add a dialog to confirm the run

simonsobs · Jun 29, 2023 · e463560 · e463560
1 parent e2185d9
commit e463560
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -30,6 +30,7 @@ declare module '@vue/runtime-core' {
     VBreadcrumbs: typeof import('vuetify/lib')['VBreadcrumbs']
     VBtn: typeof import('vuetify/lib')['VBtn']
     VCard: typeof import('vuetify/lib')['VCard']
+    VCardAction: typeof import('vuetify/lib')['VCardAction']
     VCardActions: typeof import('vuetify/lib')['VCardActions']
     VCardSubtitle: typeof import('vuetify/lib')['VCardSubtitle']
     VCardText: typeof import('vuetify/lib')['VCardText']
@@ -38,6 +39,7 @@ declare module '@vue/runtime-core' {
     VCol: typeof import('vuetify/lib')['VCol']
     VContainer: typeof import('vuetify/lib')['VContainer']
     VDataTable: typeof import('vuetify/lib')['VDataTable']
+    VDialog: typeof import('vuetify/lib')['VDialog']
     VDivider: typeof import('vuetify/lib')['VDivider']
     VIcon: typeof import('vuetify/lib')['VIcon']
     VList: typeof import('vuetify/lib')['VList']

diff --git a/src/components/RunCtrl.vue b/src/components/RunCtrl.vue
@@ -62,11 +62,24 @@
         </v-list-item>
       </v-list>
     </v-menu>
+    <v-dialog v-model="dialog" max-width="290">
+      <v-card>
+        <v-card-title> Start running the script? </v-card-title>
+        <v-card-text> Are you sure to start? </v-card-text>
+        <v-card-actions>
+          <v-btn text color="grey darken-2" @click="dialog = false">
+            Cancel
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn text color="primary" @click="onStartConfirmed"> Start </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
   </v-card-actions>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { watch, ref, computed } from "vue";
 
 import { useStore } from "@/stores/main";
 
@@ -173,7 +186,7 @@ const chip = computed(
 
 async function onClick(method: Method) {
   if (method === "run") {
-    await executeExec({});
+    showConfirmationDialog();
   } else if (method === "reset") {
     await executeReset({});
   } else if (method === "interrupt") {
@@ -190,4 +203,21 @@ const { executeMutation: executeReset } = useResetMutation();
 const { executeMutation: executeInterrupt } = useInterruptMutation();
 const { executeMutation: executeTerminate } = useTerminateMutation();
 const { executeMutation: executeKill } = useKillMutation();
+
+function showConfirmationDialog() {
+  dialog.value = true;
+}
+
+async function onStartConfirmed() {
+  dialog.value = false;
+  await executeExec({});
+}
+
+watch(nextlineState, () => {
+  if (nextlineState.value !== "initialized") {
+    dialog.value = false;
+  }
+});
+
+const dialog = ref(false);
 </script>