Rebuilt a couple more dialog boxes in Svelte.

src/js/admin-general-view.js

@@ -46,9 +46,7 @@ module.exports = {
 
   data: function () {
     return {
-      configRestored: false,
       confirmReset: false,
-      configReset: false,
       autoCheckUpgrade: true,
       reset_variant: ''
     }
@@ -71,29 +69,31 @@ module.exports = {
     },
 
     restore: function (e) {
-      var files = e.target.files || e.dataTransfer.files;
-      if (!files.length) return;
+      const files = e.target.files || e.dataTransfer.files;
+      if (!files.length) {
+        return;
+      }
 
-      var fr = new FileReader();
-      fr.onload = function (e) {
-        var config;
+      const fileReader = new FileReader();
+      fileReader.onload = async ({ target }) => {
+        let config;
         try {
-          config = JSON.parse(e.target.result);
+          config = JSON.parse(target.result);
         } catch (ex) {
           api.alert("Invalid config file");
           return;
         }
 
-        api.put('config/save', config).done(function (data) {
+        try {
+          await api.put('config/save', config);
           this.$dispatch('update');
-          this.configRestored = true;
-
-        }.bind(this)).fail(function (error) {
+          SvelteComponents.showDialog("Message", { title: "Success", message: "Configuration restored" })
+        } catch (error) {
           api.alert('Restore failed', error);
-        })
-      }.bind(this);
+        }
+      }
 
-      fr.readAsText(files[0]);
+      fileReader.readAsText(files[0]);
     },
 
     reset: async function () {
@@ -107,7 +107,7 @@ module.exports = {
         await api.put('config/save', config)
         this.confirmReset = false;
         this.$dispatch('update');
-        this.configRestored = true;
+        SvelteComponents.showDialog("Message", { title: "Success", message: "Configuration restored" })
       } catch (err) {
         api.alert('Restore failed');
         console.error('Restore failed', err);

src/js/control-view.js

@@ -418,7 +418,7 @@ module.exports = {
     },
 
     showToolpathMessageDialog: function (axis) {
-      SvelteComponents.showDialog("ToolpathMessage", { msg: this[axis].toolmsg });
+      SvelteComponents.showDialog("Message", { title: this[axis].toolmsg });
     },
 
     set_position: function (axis, position) {

src/pug/templates/admin-general-view.pug

@@ -45,9 +45,6 @@ script#admin-general-view-template(type="text/x-template")
     label.pure-button.pure-button-primary(@click="restore_config") Restore
     form.restore-config.file-upload
       input(type="file", accept=".json", @change="restore")
-    message(:show.sync="configRestored")
-      h3(slot="header") Success
-      p(slot="body") Configuration restored.
 
     button.pure-button.pure-button-primary(@click="confirmReset = true") Reset    
     message(:show.sync="confirmReset")
@@ -70,10 +67,6 @@ script#admin-general-view-template(type="text/x-template")
         button.pure-button(@click="confirmReset = false") Cancel
         button.pure-button.pure-button-primary(@click="reset") Reset
         
-    message(:show.sync="configReset")
-      h3(slot="header") Success
-      p(slot="body") Configuration reset.
-
     h2 Debugging
     a(href="/api/log", target="_blank")
       button.pure-button.pure-button-primary View Log

src/svelte-components/src/dialogs/ChangeHostnameDialog.svelte

@@ -58,7 +58,7 @@
   }
 </script>
 
-<MessageDialog open={rebooting} title="Rebooting">
+<MessageDialog open={rebooting} title="Rebooting" noaction>
   Rebooting to apply the hostname change...
 </MessageDialog>
 

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

@@ -9,7 +9,7 @@
   import SetAxisPositionDialog from "./SetAxisPositionDialog.svelte";
   import MoveToZeroDialog from "./MoveToZeroDialog.svelte";
   import ShutdownDialog from "./ShutdownDialog.svelte";
-  import ToolpathMessageDialog from "./ToolpathMessageDialog.svelte";
+  import MessageDialog from "./MessageDialog.svelte";
 
   const HomeMachineDialogProps = writable<HomeMachineDialogPropsType>();
   type HomeMachineDialogPropsType = {
@@ -63,10 +63,12 @@
     open: boolean;
   };
 
-  const ToolpathMessageDialogProps = writable<ToolpathMessageDialogPropsType>();
-  type ToolpathMessageDialogPropsType = {
+  const MessageDialogProps = writable<MessageDialogPropsType>();
+  type MessageDialogPropsType = {
     open: boolean;
-    msg: string;
+    title: string;
+    message: string;
+    noaction: boolean;
   };
 
   export function showDialog(
@@ -115,8 +117,8 @@
   );
 
   export function showDialog(
-    dialog: "ToolpathMessage",
-    props: Omit<ToolpathMessageDialogPropsType, "open">
+    dialog: "Message",
+    props: Omit<MessageDialogPropsType, "open">
   );
 
   export function showDialog(dialog: string, props: any) {
@@ -157,8 +159,8 @@
         ShutdownDialogProps.set({ ...props, open: true });
         break;
 
-      case "ToolpathMessage":
-        ToolpathMessageDialogProps.set({ ...props, open: true });
+      case "Message":
+        MessageDialogProps.set({ ...props, open: true });
         break;
 
       default:
@@ -236,4 +238,4 @@
 <SetAxisPositionDialog {...$SetAxisPositionDialogProps} />
 <MoveToZeroDialog {...$MoveToZeroDialogProps} />
 <ShutdownDialog {...$ShutdownDialogProps} />
-<ToolpathMessageDialog {...$ToolpathMessageDialogProps} />
+<MessageDialog {...$MessageDialogProps} />

src/svelte-components/src/dialogs/MessageDialog.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
-  import Dialog, { Title, Content } from "@smui/dialog";
+  import Dialog, { Title, Content, Actions } from "@smui/dialog";
+  import Button, { Label } from "@smui/button";
 
   export let open: boolean;
-  export let title: string;
+  export let title = "";
+  export let message = "";
+  export let noaction = false;
 </script>
 
 <Dialog
@@ -13,7 +16,16 @@
   aria-describedby="message-dialog-content"
 >
   <Title id="message-dialog-title">{title}</Title>
+
   <Content id="message-dialog-content">
-    <slot />
+    <slot>{message}</slot>
   </Content>
+
+  {#if !noaction}
+    <Actions>
+      <Button defaultAction>
+        <Label>OK</Label>
+      </Button>
+    </Actions>
+  {/if}
 </Dialog>

src/svelte-components/src/dialogs/ScreenRotationDialog.svelte

@@ -29,7 +29,7 @@
   }
 </script>
 
-<MessageDialog open={rebooting} title="Rebooting">
+<MessageDialog open={rebooting} title="Rebooting" noaction>
   Rebooting to apply the new screen rotation...
 </MessageDialog>
 

src/svelte-components/src/dialogs/ToolpathMessageDialog.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog";
-  import Button, { Label } from "@smui/button";
-
-  export let open: boolean;
-  export let msg: string;
-</script>
-
-<Dialog
-  bind:open
-  scrimClickAction=""
-  aria-labelledby="toolpath-message-dialog-title"
-  aria-describedby="toolpath-message-dialog-content"
->
-  <Title id="toolpath-message-dialog-title">{msg || ""}</Title>
-
-  <Actions>
-    <Button defaultAction use={[InitialFocus]}>
-      <Label>OK</Label>
-    </Button>
-  </Actions>
-</Dialog>

src/svelte-components/src/dialogs/WifiConnectionDialog.svelte

@@ -39,7 +39,7 @@
   }
 </script>
 
-<MessageDialog open={rebooting} title="Rebooting">
+<MessageDialog open={rebooting} title="Rebooting" noaction>
   Rebooting to apply Wifi changes...
 </MessageDialog>
 
@@ -49,9 +49,10 @@
   aria-labelledby="wifi-connection-dialog-title"
   aria-describedby="wifi-connection-dialog-content"
 >
-  <Title id="wifi-connection-dialog-title"
-    >{connectToOrDisconnectFrom} {network.Name}</Title
-  >
+  <Title id="wifi-connection-dialog-title">
+    {connectToOrDisconnectFrom}
+    {network.Name}
+  </Title>
 
   <Content id="wifi-connection-dialog-content">
     {#if needPassword}