moved slide to confirm functions into components

bluerobotics · Jan 25, 2024 · 25456dd · 25456dd
1 parent 7e5aa52
commit 25456dd
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 82 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -104,31 +104,7 @@
 
           <Transition name="fade">
             <div v-if="showBottomBarNow" class="bottom-container">
-              <div class="flex items-center space-x-4 mb-3">
-                <slide-unlock
-                  v-if="vehicleStore.showSlideToConfirm"
-                  ref="vueslideunlock"
-                  :auto-width="false"
-                  :circle="true"
-                  :disabled="false"
-                  :noanimate="false"
-                  :width="400"
-                  :height="50"
-                  text="slide to confirm"
-                  success-text="success"
-                  name="slideunlock"
-                  class="slide-unlock"
-                  @completed="onSlideConfirmed()"
-                />
-                <button
-                  v-if="vehicleStore.showSlideToConfirm"
-                  class="w-12 h-12 flex items-center justify-center rounded-full bg-white text-gray"
-                  @click="cancelAction"
-                >
-                  X
-                </button>
-              </div>
-
+              <SlideToConfirm />
               <div class="bottom-bar h-12">
                 <MiniWidgetContainer
                   :container="widgetStore.currentView.miniWidgetContainers[0]"
@@ -170,7 +146,6 @@ import {
   watch,
 } from 'vue'
 import { useRoute } from 'vue-router'
-import SlideUnlock from 'vue-slide-unlock'
 
 import ConfigurationMenu from '@/components/ConfigurationMenu.vue'
 import { coolMissionNames } from '@/libs/funny-name/words'
@@ -179,18 +154,16 @@ import {
   registerActionCallback,
   unregisterActionCallback,
 } from '@/libs/joystick/protocols/cockpit-actions'
-import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
 
 import Dialog from './components/Dialog.vue'
 import EditMenu from './components/EditMenu.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'
+import SlideToConfirm from './components/SlideToConfirm.vue'
 import Alerter from './components/widgets/Alerter.vue'
 import { datalogger } from './libs/sensors-logging'
 import { useWidgetManagerStore } from './stores/widgetManager'
 
-const vehicleStore = useMainVehicleStore()
-
 const widgetStore = useWidgetManagerStore()
 
 const showConfigurationMenu = ref(false)
@@ -227,20 +200,6 @@ const timeNow = useTimestamp({ interval: 1000 })
 // Control showing mouse
 let hideMouseTimeoutId: ReturnType<typeof setInterval>
 
-const onSlideConfirmed = (): void => {
-  vehicleStore.showSlideToConfirm = false
-  vehicleStore.confirmed = true
-  console.log('Slide confirmed!')
-  // Additional logic here
-}
-
-const cancelAction = (): void => {
-  vehicleStore.showSlideToConfirm = false
-  vehicleStore.confirmed = false
-  console.log('Slide canceled!')
-  // Additional logic here
-}
-
 const hideMouse = (): void => {
   document.body.classList.add('hide-cursor')
 }

diff --git a/src/components/SlideToConfirm.vue b/src/components/SlideToConfirm.vue
@@ -0,0 +1,41 @@
+<template>
+  <div v-if="showSlideToConfirm">
+    <div class="flex items-center space-x-4 mb-3">
+      <slide-unlock
+        ref="vueslideunlock"
+        :auto-width="false"
+        :circle="true"
+        :disabled="false"
+        :noanimate="false"
+        :width="400"
+        :height="50"
+        text="slide to confirm"
+        success-text="action confirmed"
+        name="slideunlock"
+        class="slide-unlock"
+        @completed="onSlideConfirmed()"
+      />
+      <button class="w-12 h-12 flex items-center justify-center rounded-full bg-white text-gray" @click="cancelAction">
+        X
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SlideUnlock from 'vue-slide-unlock'
+
+import { confirmed, showSlideToConfirm } from '@/libs/slide-to-confirm'
+
+const onSlideConfirmed = (): void => {
+  showSlideToConfirm.value = false
+  confirmed.value = true
+  console.log('Slide confirmed!')
+}
+
+const cancelAction = (): void => {
+  showSlideToConfirm.value = false
+  confirmed.value = false
+  console.log('Slide canceled!')
+}
+</script>
diff --git a/src/libs/slide-to-confirm.ts b/src/libs/slide-to-confirm.ts
@@ -0,0 +1,40 @@
+import { ref, watch } from 'vue' // Adjust this import based on your Vue version
+
+// Reactive variables (if they are not provided from outside)
+export const showSlideToConfirm = ref(false)
+export const confirmed = ref(false)
+
+/**
+ * Calls the provided action function if the user confirms through the slide-to-confirm component.
+ * @param {() => void} actionFunc - A function representing the action to be confirmed.
+ * @returns {Promise<void>} A Promise that resolves if the action is successfully executed or rejects in case of cancellation or errors.
+ */
+export function slideToConfirm(actionFunc: () => void): Promise<void> {
+  console.log('slideToConfirm')
+  return new Promise((resolve, reject) => {
+    // Show slide to confirm component
+    showSlideToConfirm.value = true
+
+    // Watch for changes on confirmed variable
+    const stopWatching = watch(confirmed, (newValue) => {
+      if (newValue === true) {
+        // Stop the watcher to prevent memory leaks
+        stopWatching()
+
+        confirmed.value = false
+
+        // Execute the provided action function
+        try {
+          actionFunc()
+          resolve()
+        } catch (error) {
+          reject(error)
+        }
+      }
+      if (showSlideToConfirm.value === false) {
+        stopWatching()
+        reject(new Error('User cancelled the action'))
+      }
+    })
+  })
+}
diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
@@ -14,6 +14,7 @@ import {
   registerActionCallback,
 } from '@/libs/joystick/protocols/cockpit-actions'
 import { MavlinkManualControlManager } from '@/libs/joystick/protocols/mavlink-manual-control'
+import { slideToConfirm } from '@/libs/slide-to-confirm'
 import type { ArduPilot } from '@/libs/vehicle/ardupilot/ardupilot'
 import type { ArduPilotParameterSetData } from '@/libs/vehicle/ardupilot/types'
 import * as Protocol from '@/libs/vehicle/protocol/protocol'
@@ -110,48 +111,11 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   const statusText: StatusText = reactive({} as StatusText)
   const statusGPS: StatusGPS = reactive({} as StatusGPS)
   const genericVariables: Record<string, unknown> = reactive({})
-  const showSlideToConfirm = ref<boolean>(false)
-  const confirmed = ref<boolean>(false)
 
   const mode = ref<string | undefined>(undefined)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const modes = ref<Map<string, any>>()
 
-  /**
-   * Calls the provided action function if the user confirms through the slide-to-confirm component.
-   * @param { void } actionFunc  - A function representing the action to be confirmed.
-   * @returns { void } A Promise that resolves if the action is successfully executed or rejects in case of cancellation or errors.
-   */
-  function slideToConfirm(actionFunc: () => void): Promise<void> {
-    return new Promise((resolve, reject) => {
-      // Show slide to confirm component
-      showSlideToConfirm.value = true
-
-      // Watch for changes on confirmed variable
-      /* eslint-disable @typescript-eslint/no-unused-vars */
-      const stopWatching = watch(confirmed, (newValue, oldValue) => {
-        if (newValue === true) {
-          // Stop the watcher to prevent memory leaks
-          stopWatching()
-
-          confirmed.value = false
-
-          // Execute the provided action function
-          try {
-            actionFunc()
-            resolve()
-          } catch (error) {
-            reject(error)
-          }
-        }
-        if (showSlideToConfirm.value === false) {
-          stopWatching()
-          reject(new Error('User cancelled the action'))
-        }
-      })
-    })
-  }
-
   /**
    * Check if vehicle is online (no more than 5 seconds passed since last heartbeat)
    * @returns { boolean } True if vehicle is online
@@ -502,7 +466,5 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     configurationPages,
     rtcConfiguration,
     genericVariables,
-    showSlideToConfirm,
-    confirmed,
   }
 })