dialog to switch between rotary modes

src/js/app.js

@@ -321,6 +321,13 @@ module.exports = new Vue({
             return semverLt(this.config.full_version, this.latestVersion);
         },
 
+        showSwitchRotaryModeDialog: function(){
+            SvelteComponents.showDialog("SwitchRotary", {
+                isActive: this.is_rotary_active,
+                switchMode: () => this.toggle_rotary()
+            });
+        },
+ 
         toggle_rotary: async function() {
             let motor = this.config.motors[2];
             if(motor['axis'] == 'A'){

src/pug/index.pug

@@ -92,7 +92,7 @@ html(lang="en")
           .whitespace
 
           div
-            button.rotary-button(:disabled="!enable_rotary", :class="is_rotary_active && 'active'", @click="toggle_rotary")
+            button.rotary-button(:disabled="!enable_rotary", :class="is_rotary_active && 'active'", @click="showSwitchRotaryModeDialog")
               img(src="/images/rotary.svg", alt="rotary", :style="is_rotary_active ? 'width:90%;' : 'width:85%;'")
 
           .video(title="Plug camera into USB.\n" +

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

@@ -10,6 +10,7 @@
     import MoveToZeroDialog from "./MoveToZeroDialog.svelte";
     import ShutdownDialog from "./ShutdownDialog.svelte";
     import MessageDialog from "./MessageDialog.svelte";
+    import SwitchRotaryDialog from "./SwitchRotaryDialog.svelte";
 
     const HomeMachineDialogProps = writable<HomeMachineDialogPropsType>();
     type HomeMachineDialogPropsType = {
@@ -72,6 +73,13 @@
         noaction: boolean;
     };
 
+    const SwitchRotaryDialogProps = writable<SwitchRotaryDialogPropsType>();
+    type SwitchRotaryDialogPropsType = {
+        open: boolean;
+        isActive: boolean;
+        switchMode: () => void;
+    };
+
     export function showDialog(
         dialog: "HomeMachine",
         props: Omit<HomeMachineDialogPropsType, "open">
@@ -122,6 +130,11 @@
         props: Omit<MessageDialogPropsType, "open">
     );
 
+    export function showDialog(
+        dialog: "SwitchRotary",
+        props: Omit<SwitchRotaryDialogPropsType, "open">
+    );
+
     export function showDialog(dialog: string, props: any) {
         switch (dialog) {
             case "HomeMachine":
@@ -163,6 +176,10 @@
             case "Message":
                 MessageDialogProps.set({ ...props, open: true });
                 break;
+            
+            case "SwitchRotary":
+                MessageDialogProps.set({ ...props, open: true });
+                break;
 
             default:
                 throw new Error(`Unknown dialog '${dialog}'`);
@@ -242,3 +259,4 @@
 <MoveToZeroDialog {...$MoveToZeroDialogProps} />
 <ShutdownDialog {...$ShutdownDialogProps} />
 <MessageDialog {...$MessageDialogProps} />
+<SwitchRotaryDialog {...$SwitchRotaryDialogProps} />

src/svelte-components/src/dialogs/SwitchRotaryDialog.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import Dialog, {
+        Title,
+        Content,
+        Actions,
+        InitialFocus,
+    } from "@smui/dialog";
+    import Button, { Label } from "@smui/button";
+
+    export let open: boolean;
+    export let isActive: boolean;
+    export let switchMode: () => any;
+</script>
+
+<Dialog
+    bind:open
+    scrimClickAction=""
+    aria-labelledby="switch-rotary-dialog-title"
+    aria-describedby="switch-rotary-dialog-content"
+>
+    <Title id="switch-rotary-dialog-title">Switch Rotary Mode</Title>
+
+    <Content id="switch-rotary-dialog-content">
+        {isActive ? "Enable Rotary Mode?" : "Disable Rotary Mode?"}
+    </Content>
+
+    <Actions>
+        <Button>
+            <Label>No</Label>
+        </Button>
+
+        <Button defaultAction use={[InitialFocus]} on:click={switchMode}>
+            <Label>Yes</Label>
+        </Button>
+    </Actions>
+</Dialog>