Shutdown button terminates server in simulation. Adjust power tab layout

src/openflexure_microscope_server/things/system.py

@@ -10,6 +10,8 @@ from typing import Optional
 from uuid import UUID, uuid4
 import subprocess
 import os
+from signal import SIGTERM
+import time
 
 from pydantic import BaseModel
 
@@ -80,6 +82,16 @@ class OpenFlexureSystem(lt.Thing):
     @lt.thing_action
     def shutdown(self) -> CommandOutput:
         """Attempt to shutdown the device."""
+        if not self.is_raspberrypi:
+            os.kill(os.getpid(), SIGTERM)
+            time.sleep(0.5)
+            # If this line is reached then the server did not shut down!
+            return CommandOutput(
+                output="",
+                error="Shutdown command sent to server process, but the server has not shutdown.",
+            )
+
+        # On a Raspberry Pi
         p = subprocess.Popen(
             ["sudo", "shutdown", "-h", "now"],
             stderr=subprocess.PIPE,
@@ -92,6 +104,12 @@ class OpenFlexureSystem(lt.Thing):
     @lt.thing_action
     def reboot(self) -> CommandOutput:
         """Attempt to reboot the device."""
+        if not self.is_raspberrypi:
+            return CommandOutput(
+                output="",
+                error="Restart is only available on Raspberry Pi.",
+            )
+
         p = subprocess.Popen(
             ["sudo", "shutdown", "-r", "now"],
             stderr=subprocess.PIPE,

webapp/src/components/tabContentComponents/powerContent.vue

@@ -1,23 +1,23 @@
 <template>
   <!-- Grid managing tab content -->
-  <div class="center">
+  <div class="container">
-  <h1 style="text-align: center;"> Power</h1>
+    <h1 id="power-title"> Power</h1>
-  <p style="text-align: center;"> It's essential to turn off your OpenFlexure Microscope here before unplugging it.
+    <p id="power-msg"> It's essential to turn off your OpenFlexure Microscope here before unplugging it.
-  <br>
+    <br>
-  <br>
+    <br>
-  Unplugging the microscope unexpectedly can damage the SD card or onboard computer.
+    Unplugging the microscope unexpectedly can damage the SD card or onboard computer.
-  </p>
+    </p>
-    <div class="buttons">
+    <div class="buttons-container">
       <button
         v-show="'shutdown' in things.system.actions"
-        class="uk-button uk-button-primary uk-width-1-3"
+        class="uk-button uk-button-primary uk-width-1-3 shutdown-button"
         @click="systemRequest('shutdown')"
       >
         Shutdown
       </button>
       <button
-        v-show="'reboot' in things.system.actions"
+        v-if="isRaspberrypi"
-        class="uk-button uk-button-primary uk-width-1-3"
+        class="uk-button uk-button-primary uk-width-1-3 shutdown-button"
         @click="systemRequest('reboot')"
       >
         Restart
@@ -34,14 +34,27 @@ export default {
 
   components: {},
 
+  data: function() {
+    return {
+      isRaspberrypi: undefined,
+    }
+  },
+  
   computed: {
     things: function() {
       return this.$store.getters["wot/thingDescriptions"];
     }
   },
 
+  async mounted() {
+    this.isRaspberrypi = await this.readThingProperty(
+      "system",
+      "is_raspberrypi"
+    );
+  },
+
   methods: {
-  systemRequest: function(action) {
+    systemRequest: function(action) {
       let message = "";
       if (action == "reboot") {
         message = "Restart microscope?"
@@ -69,14 +82,32 @@ export default {
 // Custom UIkit CSS modifications
 @import "../../assets/less/theme.less";
 
-.center {
+
-    right: 50%;
+.container {
-    bottom: 50%;
+  display: flex;
-    transform: translate(50%,50%);
+  flex-direction: column;
-    position: absolute;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 2em;
+  box-sizing: border-box;
 }
 
-.uk-button {
+#power-title {
+  text-align: center;
+}
+
+#power-msg {
+  text-align: center;
+}
+
+.buttons-container {
+  width: 100%;
+  text-align: center;
+}
+
+.shutdown-button {
   display: inline;
   text-align:center;
   margin: 30px 30px 30px 30px;