Merge branch 'shutdown-in-gui' into 'v3'

GUI shutdown clean up

Closes #372, #373, and #382

See merge request openflexure/openflexure-microscope-server!275

webapp/src/components/appContent.vue

@@ -138,6 +138,7 @@ import viewContent from "./tabContentComponents/viewContent.vue";
 import settingsContent from "./tabContentComponents/settingsContent.vue";
 import aboutContent from "./tabContentComponents/aboutContent.vue";
 import loggingContent from "./tabContentComponents/loggingContent.vue";
+import powerContent from "./tabContentComponents/powerContent.vue";
 // ImJoy is loaded asynchronously to allow it to be disabled if needed
 const imjoyContent = () =>
   import(
@@ -164,6 +165,7 @@ export default {
     aboutContent,
     loggingContent,
     TabIcon,
+    powerContent,
     imjoyContent
   },
   data: function() {
@@ -185,6 +187,11 @@ export default {
           id: "about",
           icon: "info",
           component: aboutContent
+        },
+        {
+          id: "power",
+          icon: "power_settings_new",
+          component: powerContent
         }
       ]
     };

webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue

@@ -25,7 +25,7 @@
 
       <div>
         <b>Server Version:</b> <br />
-        TODO
+        V3 (pre-alpha)
       </div>
 
       <hr />
@@ -48,28 +48,6 @@
       </div>
 
       <hr />
-
-      <div class="uk-grid-small uk-child-width-1-2" uk-grid>
-        <div>
-          <button
-            v-show="'shutdown' in things.system_control.actions"
-            class="uk-button uk-button-danger uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
-            @click="systemRequest('shutdown')"
-          >
-            Shutdown
-          </button>
-        </div>
-
-        <div>
-          <button
-            v-show="'reboot' in things.system_control.actions"
-            class="uk-button uk-button-danger uk-float-right uk-margin uk-margin-remove-top uk-width-1-1"
-            @click="systemRequest('reboot')"
-          >
-            Restart
-          </button>
-        </div>
-      </div>
     </div>
     <div v-else-if="$store.state.waiting">
       Loading...
@@ -82,7 +60,6 @@
 </template>
 
 <script>
-import axios from "axios";
 import ActionButton from "../../labThingsComponents/actionButton.vue";
 
 export default {
@@ -94,22 +71,6 @@ export default {
       return this.$store.getters["wot/thingDescriptions"];
     }
   },
-
-  methods: {
-    systemRequest: function(action) {
-      this.modalConfirm("Restart microscope?").then(
-        () => {
-          this.$store.commit("resetState");
-          this.$store.commit("wot/deleteAllThingDescriptions");
-          // Post and silence errors
-          axios
-            .post(this.thingActionUrl("system_control", action))
-            .catch(() => {});
-        },
-        () => {}
-      );
-    }
-  }
 };
 </script>
 

webapp/src/components/tabContentComponents/powerContent.vue

@@ -0,0 +1,84 @@
+<template>
+  <!-- Grid managing tab content -->
+  <div class="center">
+  <h1 style="text-align: center;"> Power</h1>
+  <p style="text-align: center;"> It's essential to turn off your OpenFlexure Microscope here before unplugging it.
+  <br>
+  <br>
+  Unplugging the microscope unexpectedly can damage the SD card or onboard computer.
+  </p>
+    <div class="buttons">
+      <button
+        v-show="'shutdown' in things.system_control.actions"
+        class="uk-button uk-button-primary uk-width-1-3"
+        @click="systemRequest('shutdown')"
+      >
+        Shutdown
+      </button>
+      <button
+        v-show="'reboot' in things.system_control.actions"
+        class="uk-button uk-button-primary uk-width-1-3"
+        @click="systemRequest('reboot')"
+      >
+        Restart
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "PowerContent",
+
+  components: {},
+  
+  computed: {
+    things: function() {
+      return this.$store.getters["wot/thingDescriptions"];
+    }
+  },
+
+  methods: {
+  systemRequest: function(action) {
+      let message = "";
+      if (action == "reboot") {
+        message = "Restart microscope?"
+      }
+      else {
+        message = "Shutdown microscope?"
+      }
+      this.modalConfirm(message).then(
+        () => {
+          this.$store.commit("resetState");
+          this.$store.commit("wot/deleteAllThingDescriptions");
+          // Post and silence errors
+          axios
+            .post(this.thingActionUrl("system_control", action))
+            .catch(() => {});
+        },
+        () => {}
+      );
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+// Custom UIkit CSS modifications
+@import "../../assets/less/theme.less";
+
+.center {
+    right: 50%;
+    bottom: 50%;
+    transform: translate(50%,50%);
+    position: absolute;
+}
+
+.uk-button {
+  display: inline;
+  text-align:center;
+  margin: 30px 30px 30px 30px;
+}
+</style>

webapp/src/main.js

@@ -86,6 +86,9 @@ Vue.mixin({
       // Stop GPU preview to show modal
       context.$root.$emit("globalTogglePreview", false);
 
+      // force OK to be capitalised
+      UIkit.modal.i18n = { ok: "OK", cancel: "Cancel" };
+
       var showModal = function(resolve, reject) {
         UIkit.modal
           .confirm(modalText, { stack: true })
@@ -150,7 +153,7 @@ Vue.mixin({
           return `${error.response.data.detail}`;
         }
         // If the response is just some generic error response
-        if (error.response.data){
+        if (error.response.data) {
           return `${error.response.data}`;
         }
         return `${error.response}`;