Rebuilt the shutdown/reboot dialog in Svelte

.devcontainer/Dockerfile

@@ -9,7 +9,7 @@ RUN    apt update \
     && apt install -y \
         build-essential git wget binfmt-support qemu gcc-9 \
         parted gcc-avr avr-libc avrdude python3 python3-tornado curl \
-        unzip python3-setuptools gcc-arm-linux-gnueabihf bc sudo \
+        unzip python3-setuptools gcc-arm-linux-gnueabihf bc vim sudo \
     && update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-9 9 \
     && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
     && apt install -y nodejs

src/js/app.js

@@ -106,8 +106,7 @@ module.exports = new Vue({
       firmwareUpgrading: false,
       checkedUpgrade: false,
       firmwareName: "",
-      latestVersion: "",
+      latestVersion: ""
-      confirmShutdown: false,
     };
   },
 
@@ -283,10 +282,17 @@ module.exports = new Vue({
     },
 
     show_upgrade: function () {
-      if (!this.latestVersion) return false;
+      if (!this.latestVersion) {
+        return false;
+      }
+
       return is_newer_version(this.config.version, this.latestVersion);
     },
 
+    showShutdownDialog: function () {
+      SvelteComponents.showDialog("Shutdown");
+    },
+
     update: async function () {
       const config = await api.get("config/load");
 
@@ -303,16 +309,6 @@ module.exports = new Vue({
       SvelteComponents.handleConfigUpdate(this.config);
     },
 
-    shutdown: function () {
-      this.confirmShutdown = false;
-      api.put("shutdown");
-    },
-
-    reboot: function () {
-      this.confirmShutdown = false;
-      api.put("reboot");
-    },
-
     connect: function () {
       this.sock = new Sock(`//${location.host}/sockjs`);
 

src/pug/index.pug

@@ -65,16 +65,8 @@ html(lang="en")
             li.pure-menu-heading
               a.pure-menu-link(href="#help") Help
               
-            button.pure-button.pure-button-primary(@click="confirmShutdown = true", style="width: 100%")
+            button.pure-button.pure-button-primary(@click="showShutdownDialog", style="width: 100%")
               .fa.fa-power-off              
-            message(:show.sync="confirmShutdown")
-              h3(slot="header") Confirm shutdown?
-              p(slot="body") Please wait for black screen before switching off power.
-              div(slot="footer")
-                button.pure-button(@click="confirmShutdown = false") Cancel
-                button.pure-button.button-success(@click="shutdown") Shutdown
-                button.pure-button.button-success(@click="reboot") Restart
-              
 
       #main
         .header

src/svelte-components/src/dialogs/DialogHost.svelte

@@ -7,6 +7,7 @@
   import SetTimeDialog from "./SetTimeDialog.svelte";
   import ManualHomeAxisDialog from "./ManualHomeAxisDialog.svelte";
   import SetAxisPositionDialog from "./SetAxisPositionDialog.svelte";
+  import ShutdownDialog from "./ShutdownDialog.svelte";
 
   const HomeMachineDialogProps = writable<HomeMachineDialogPropsType>();
   type HomeMachineDialogPropsType = {
@@ -49,6 +50,11 @@
     axis: string;
   };
 
+  const ShutdownDialogProps = writable<ShutdownDialogPropsType>();
+  type ShutdownDialogPropsType = {
+    open: boolean;
+  };
+
   export function showDialog(
     dialog: "HomeMachine",
     props: Omit<HomeMachineDialogPropsType, "open">
@@ -84,6 +90,11 @@
     props: Omit<SetAxisPositionDialogPropsType, "open">
   );
 
+  export function showDialog(
+    dialog: "Shutdown",
+    props: Omit<ShutdownDialogPropsType, "open">
+  );
+
   export function showDialog(dialog: string, props: any) {
     switch (dialog) {
       case "HomeMachine":
@@ -114,8 +125,12 @@
         SetAxisPositionDialogProps.set({ ...props, open: true });
         break;
 
+      case "Shutdown":
+        ShutdownDialogProps.set({ ...props, open: true });
+        break;
+
       default:
-        throw new Error(`Unknown dialog '${dialog}`);
+        throw new Error(`Unknown dialog '${dialog}'`);
     }
   }
 </script>
@@ -127,3 +142,4 @@
 <SetTimeDialog {...$SetTimeDialogProps} />
 <ManualHomeAxisDialog {...$ManualHomeAxisDialogProps} />
 <SetAxisPositionDialog {...$SetAxisPositionDialogProps} />
+<ShutdownDialog {...$ShutdownDialogProps} />

src/svelte-components/src/dialogs/ShutdownDialog.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import Dialog, { Title, Actions, InitialFocus } from "@smui/dialog";
+    import Button, { Label } from "@smui/button";
+    import * as Api from "$lib/api"
+
+    export let open;
+
+    function shutdown() {
+        Api.PUT("shutdown");
+    }
+
+    function restart() {
+        Api.PUT("reboot");
+    }
+</script>
+
+<Dialog
+    bind:open
+    scrimClickAction=""
+    aria-labelledby="shutdown-dialog-title"
+    aria-describedby="shutdown-dialog-content"
+>
+    <Title id="shutdown-dialog-title">Confirm Shutdown?</Title>
+
+    <Actions>
+        <Button>
+            <Label>Cancel</Label>
+        </Button>
+
+        <Button on:click={shutdown}>
+            <Label>Shutdown</Label>
+        </Button>
+
+        <Button use={[InitialFocus]} on:click={restart}>
+            <Label>Restart</Label>
+        </Button>
+    </Actions>
+</Dialog>