From 14672c260f6662ce42e9aa2e841e53f1d5e049b1 Mon Sep 17 00:00:00 2001
From: jaknapper <jaknapper@hotmail.com>
Date: Thu, 22 May 2025 16:41:50 +0100
Subject: [PATCH] Dedicated power menu

---
 webapp/src/components/appContent.vue          |  7 ++
 .../tabContentComponents/powerContent.vue     | 84 +++++++++++++++++++
 .../tabContentComponents/settingsContent.vue  | 46 ----------
 3 files changed, 91 insertions(+), 46 deletions(-)
 create mode 100644 webapp/src/components/tabContentComponents/powerContent.vue

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index fcbf7296..bc292f88 100644
--- a/webapp/src/components/appContent.vue
+++ b/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
         }
       ]
     };
diff --git a/webapp/src/components/tabContentComponents/powerContent.vue b/webapp/src/components/tabContentComponents/powerContent.vue
new file mode 100644
index 00000000..855174d8
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index ec5a0025..e7deeca4 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -63,25 +63,6 @@
         action="save_all_thing_settings"
         submit-label="Save All Settings"
       />
-    <div>
-      <button
-        v-show="'shutdown' in things.system_control.actions"
-        class="uk-button uk-button-primary 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-primary uk-margin uk-margin-remove-top uk-width-1-1"
-        @click="systemRequest('reboot')"
-      >
-        Restart
-      </button>
-    </div>
     </div>
     <div class="view-component uk-width-expand uk-padding-small">
       <tabContent
@@ -129,7 +110,6 @@
 </template>
 
 <script>
-import axios from "axios";
 import streamSettings from "./settingsComponents/streamSettings.vue";
 import cameraSettings from "./settingsComponents/cameraSettings.vue";
 import appSettings from "./settingsComponents/appSettings.vue";
@@ -155,12 +135,6 @@ export default {
     ActionButton
   },
 
-  computed: {
-    things: function() {
-      return this.$store.getters["wot/thingDescriptions"];
-    }
-  },
-
   data: function() {
     return {
       selected: "display",
@@ -174,26 +148,6 @@ export default {
         this.currentTab = tab;
       }
     },
-    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>