Merge ButtonScheduler and ButtonQueue into ButtonAutoMode

Author: TaiSakuma

src/components/schedule/auto-mode/auto-mode-button/AutoModeButton.vue

@@ -1,18 +1,18 @@
 <template>
   <VCardActions>
-    <ButtonOff v-if="mode === 'off'"></ButtonOff>
-    <ButtonScheduler v-else-if="mode === 'scheduler'"></ButtonScheduler>
-    <ButtonQueue v-else-if="mode === 'queue'"></ButtonQueue>
-    <ButtonError v-else></ButtonError>
+    <VBtn v-if="loading" loading variant="tonal" color="tertiary"> </VBtn>
+    <ButtonError v-else-if="error" :error="error"></ButtonError>
+    <ButtonAutoMode v-else-if="autoMode"></ButtonAutoMode>
+    <ButtonOff v-else-if="autoMode === false"></ButtonOff>
+    <VBtn v-else variant="tonal" color="error"> Unknown </VBtn>
   </VCardActions>
 </template>
 
 <script setup lang="ts">
-import { useSubscribeScheduleAutoModeMode } from "@/api";
+import { useAutoMode } from "./use-auto-mode";
 
-import ButtonError from "./modes/error/Button.vue";
 import ButtonOff from "./modes/off/Button.vue";
-import ButtonQueue from "./modes/queue/Button.vue";
-import ButtonScheduler from "./modes/scheduler/Button.vue";
-const { data: mode } = await useSubscribeScheduleAutoModeMode();
+import ButtonAutoMode from "./modes/auto-mode/Button.vue";
+import ButtonError from "./modes/error/Button.vue";
+const { autoMode, loading, error } = await useAutoMode();
 </script>

…/auto-mode-button/modes/queue/Button.vue …o-mode-button/modes/auto-mode/Button.vuesrc/components/schedule/auto-mode/auto-mode-button/modes/queue/Button.vue renamed to src/components/schedule/auto-mode/auto-mode-button/modes/auto-mode/Button.vue src/components/schedule/auto-mode/auto-mode-button/modes/queue/Button.vue renamed to src/components/schedule/auto-mode/auto-mode-button/modes/auto-mode/Button.vue

@@ -2,20 +2,17 @@
   <Component :is="menuComponent">
     <template #activator="{ props }">
       <VBtn v-bind="props" variant="tonal" color="tertiary">
-        <slot v-if="!mobile">Auto Mode: </slot>Queue
+        <slot v-if="!mobile">Auto Mode: </slot>{{ mode }}
         <template #append v-if="pulling">
-          <VProgressCircular
-            indeterminate
-            size="16"
-            width="2"
-            class="ml-2"
-          >
+          <VProgressCircular indeterminate size="16" width="2" class="ml-1">
           </VProgressCircular>
         </template>
       </VBtn>
     </template>
     <div>
-      <Dialog class="dialog"></Dialog>
+      <DialogScheduler v-if="mode === 'scheduler'" class="dialog"></DialogScheduler>
+      <DialogQueue v-else-if="mode === 'queue'" class="dialog"></DialogQueue>
+      <VCard v-else><VAlert type="error" variant="tonal">Unknown Mode</VAlert></VCard>
     </div>
   </Component>
 </template>
@@ -26,13 +23,18 @@ import { useDisplay } from "vuetify";
 import { VBottomSheet } from "vuetify/components/VBottomSheet";
 import { VMenu } from "vuetify/components/VMenu";
 
+import { useSubscribeScheduleAutoModeMode } from "@/api";
+
 import { useAutoMode } from "../../use-auto-mode";
-import Dialog from "./Dialog.vue";
+import DialogScheduler from "./scheduler/Dialog.vue";
+import DialogQueue from "./queue/Dialog.vue";
 
 const { mobile } = useDisplay();
 const menuComponent = computed(() => (mobile.value ? VBottomSheet : VMenu));
 
-const { pulling } = await useAutoMode();
+const { data: mode, then: then1 } = useSubscribeScheduleAutoModeMode();
+const { pulling, then: then2 } = useAutoMode();
+await Promise.all([then1(), then2()]);
 </script>
 
 <style scoped>

…o-mode-button/modes/scheduler/Dialog.vue …o-mode-button/modes/auto-mode/Dialog.vuesrc/components/schedule/auto-mode/auto-mode-button/modes/scheduler/Dialog.vue renamed to src/components/schedule/auto-mode/auto-mode-button/modes/auto-mode/Dialog.vue src/components/schedule/auto-mode/auto-mode-button/modes/scheduler/Dialog.vue renamed to src/components/schedule/auto-mode/auto-mode-button/modes/auto-mode/Dialog.vue

@@ -0,0 +1,44 @@
+<template>
+  <VCard>
+    <VCardText>
+      <div class="mb-1">
+        <p class="font-weight-medium">
+          The auto mode currently is <span class="font-italic"> on </span> and loads
+          scripts from the <span class="font-italic"> scheduler </span>.
+        </p>
+        <p class="mt-3">
+          The auto mode automatically loads and runs the next script after each run
+          successfully ends.
+        </p>
+        <p class="mt-3">
+          The auto mode can load scripts from either the
+          <span class="font-italic"> scheduler </span> or the
+          <span class="font-italic"> queue </span>.
+        </p>
+      </div>
+    </VCardText>
+    <VCardActions>
+      <VBtn variant="outlined" class="flex-grow-1" @click="switchToLoadFromQueue">
+        switch to load from queue
+      </VBtn>
+    </VCardActions>
+    <VCardActions>
+      <VBtn variant="outlined" class="flex-grow-1" @click="turnOff">
+        turn off auto mode
+      </VBtn>
+    </VCardActions>
+  </VCard>
+</template>
+
+<script setup lang="ts">
+import { useScheduleAutoModeChangeModeMutation } from "@/graphql/codegen/generated";
+const { executeMutation: changeMode } = useScheduleAutoModeChangeModeMutation();
+
+async function switchToLoadFromQueue() {
+  await changeMode({ mode: "queue" });
+}
+
+async function turnOff() {
+  await changeMode({ mode: "off" });
+}
+</script>