From 4d37731cbbd7baae94502094b4a3777615c31ba8 Mon Sep 17 00:00:00 2001
From: sanjayk03-dev <imsanjay003@gmail.com>
Date: Fri, 29 Nov 2024 13:13:14 +0530
Subject: [PATCH] dialog to switch between rotary modes

---
 src/js/app.js                                 |  7 ++++
 src/pug/index.pug                             |  2 +-
 .../src/dialogs/DialogHost.svelte             | 18 ++++++++++
 .../src/dialogs/SwitchRotaryDialog.svelte     | 36 +++++++++++++++++++
 4 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/svelte-components/src/dialogs/SwitchRotaryDialog.svelte

diff --git a/src/js/app.js b/src/js/app.js
index 8517ffa..fe881ee 100644
--- a/src/js/app.js
+++ b/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'){
diff --git a/src/pug/index.pug b/src/pug/index.pug
index be60861..d5e36f4 100644
--- a/src/pug/index.pug
+++ b/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" +
diff --git a/src/svelte-components/src/dialogs/DialogHost.svelte b/src/svelte-components/src/dialogs/DialogHost.svelte
index c250acf..b847f57 100644
--- a/src/svelte-components/src/dialogs/DialogHost.svelte
+++ b/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} />
diff --git a/src/svelte-components/src/dialogs/SwitchRotaryDialog.svelte b/src/svelte-components/src/dialogs/SwitchRotaryDialog.svelte
new file mode 100644
index 0000000..4619810
--- /dev/null
+++ b/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>