slide-to-confirm: refactored slide to confirm to return true or false…

… based on success

src/components/SlideToConfirm.vue

@@ -9,8 +9,8 @@
         :noanimate="false"
         :width="400"
         :height="50"
-        text="slide to confirm"
-        success-text="action confirmed"
+        :text="sliderText"
+        :success-text="confirmationSliderText"
         name="slideunlock"
         class="slide-unlock"
         @completed="onSlideConfirmed()"
@@ -25,12 +25,16 @@
 <script setup lang="ts">
 import SlideUnlock from 'vue-slide-unlock'
 
-import { confirmed, showSlideToConfirm } from '@/libs/slide-to-confirm'
+import { confirmationSliderText, confirmed, showSlideToConfirm, sliderText } from '@/libs/slide-to-confirm'
 
 const onSlideConfirmed = (): void => {
-  showSlideToConfirm.value = false
   confirmed.value = true
-  console.log('Slide confirmed!')
+
+  // show success message for 1.5 second
+  setTimeout(() => {
+    showSlideToConfirm.value = false
+    console.log('Slide confirmed!')
+  }, 1500)
 }
 
 const cancelAction = (): void => {

src/libs/slide-to-confirm.ts

@@ -1,34 +1,31 @@
-import { ref, watch } from 'vue' // Adjust this import based on your Vue version
+import { ref, watch } from 'vue'
 
-// Reactive variables (if they are not provided from outside)
 export const showSlideToConfirm = ref(false)
+export const sliderText = ref('Slide to Confirm')
+export const confirmationSliderText = ref('Action Confirm')
 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.
+ * Waits for user confirmation through the slide-to-confirm component.
+ * @param {string} text - The custom text to display on the slider.
+ * @param {string} confirmationText - The custom text to display on the confirmation slider after the user slides to confirm.
+ * @returns {Promise<boolean>} - A promise that resolves with true when the action is confirmed and false when the user cancels the action.
  */
-export function slideToConfirm(actionFunc: () => void): Promise<void> {
-  console.log('slideToConfirm')
-  return new Promise((resolve, reject) => {
-    // Show slide to confirm component
+export function slideToConfirm(text: string, confirmationText: string): Promise<boolean> {
+  console.log('slideToConfirm with text:', text)
+  return new Promise((resolve) => {
+    sliderText.value = text
+    confirmationSliderText.value = confirmationText
     showSlideToConfirm.value = true
 
-    // Watch for changes on confirmed and showSlideToConfirm variables
     const stopWatching = watch([confirmed, showSlideToConfirm], ([newConfirmed, newShowSlideToConfirm]) => {
       if (newConfirmed) {
         stopWatching()
         confirmed.value = false
-        try {
-          actionFunc()
-          resolve()
-        } catch (error) {
-          reject(error)
-        }
+        resolve(true)
       } else if (!newShowSlideToConfirm) {
         stopWatching()
-        reject(new Error('User cancelled the action'))
+        resolve(false)
       }
     })
   })

src/stores/mainVehicle.ts

@@ -125,67 +125,89 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   })
 
   /**
-   * Arm the vehicle
-   * @returns { void } A Promise that resolves when arming is successful or rejects if an error occurs or the action is cancelled.
+   * Arm the vehicle.
+   * Awaits user confirmation before arming the vehicle. Resolves when arming is successful or rejects if the action is cancelled.
+   * @returns {Promise<void>}
    */
-  function arm(): Promise<void> {
-    return slideToConfirm(() => {
-      if (!mainVehicle.value) {
-        throw new Error('action rejected or failed')
-      }
+  async function arm(): Promise<void> {
+    if (!mainVehicle.value) {
+      throw new Error('No vehicle available to arm.')
+    }
+
+    const confirmed = await slideToConfirm('Confirm Arm', 'Arm Command Confirmed')
+    if (confirmed) {
       mainVehicle.value.arm()
-    })
+    } else {
+      throw new Error('Arming cancelled by the user')
+    }
   }
 
   /**
-   * Disarm the vehicle
-   * @returns { void } A Promise that resolves when disarming is successful or rejects if an error occurs or the action is cancelled.
+   * Disarm the vehicle.
+   * Awaits user confirmation before disarming the vehicle. Resolves when disarming is successful or rejects if the action is cancelled.
+   * @returns {Promise<void>}
    */
-  function disarm(): Promise<void> {
-    return slideToConfirm(() => {
-      if (!mainVehicle.value) {
-        throw new Error('action rejected or failed')
-      }
+  async function disarm(): Promise<void> {
+    if (!mainVehicle.value) {
+      throw new Error('No vehicle available to disarm.')
+    }
+
+    const confirmed = await slideToConfirm('Confirm Disarm', 'Disarm Command Confirmed')
+    if (confirmed) {
       mainVehicle.value.disarm()
-    })
+    } else {
+      throw new Error('Disarming cancelled by the user')
+    }
   }
+
   /**
    * Initiates the takeoff process, requiring user confirmation.
-   * @returns { void } A Promise that resolves when the takeoff is successful or rejects if an error occurs or the action is cancelled.
+   * @returns {Promise<void>} A Promise that resolves when the takeoff is successful or rejects if an error occurs or the action is cancelled.
    */
-  function takeoff(): Promise<void> {
-    return slideToConfirm(() => {
-      if (!mainVehicle.value) {
-        throw new Error('action rejected or failed')
-      }
-      mainVehicle.value.takeoff()
-    })
+  async function takeoff(): Promise<void> {
+    if (!mainVehicle.value) {
+      throw new Error('No vehicle available for takeoff')
+    }
+    const confirmed = await slideToConfirm('Confirm Takeoff', 'Takeoff Command Confirmed')
+    if (confirmed) {
+      mainVehicle.value.takeoff(altitude_setpoint.value)
+    } else {
+      console.error('Takeoff cancelled by the user')
+      throw new Error('Takeoff cancelled by the user')
+    }
   }
+
   /**
-   * Land the vehicle
-   * @returns { void } A Promise that resolves when landing is successful or rejects if an error occurs or the action is cancelled.
+   * Land the vehicle.
+   * @returns {Promise<void>} A Promise that resolves when landing is successful or rejects if the action is cancelled.
    */
-  function land(): Promise<void> {
-    return slideToConfirm(() => {
-      if (!mainVehicle.value) {
-        throw new Error('action rejected or failed')
-      }
+  async function land(): Promise<void> {
+    if (!mainVehicle.value) {
+      throw new Error('No vehicle available to land.')
+    }
+
+    const confirmed = await slideToConfirm('Confirm Landing', 'Landing Command Confirmed')
+    if (confirmed) {
       mainVehicle.value.land()
-    })
+    } else {
+      console.error('Landing cancelled by the user')
+      throw new Error('Landing cancelled by the user')
+    }
   }
 
   /**
-   * Go to a given position
-   * @param { number } hold Time to hold position in seconds
-   * @param { number } acceptanceRadius Radius in meters to consider the waypoint reached
-   * @param { number } passRadius Radius in meters to pass the waypoint
-   * @param { number } yaw Yaw angle in degrees
-   * @param { number } latitude Latitude in degrees
-   * @param { number } longitude Longitude in degrees
-   * @param { number } alt Altitude in meters
-   * @returns { void } A Promise that resolves when the vehicle reaches the waypoint or rejects if an error occurs or the action is cancelled.
+   * Go to a given position.
+   * Awaits user confirmation before moving the vehicle to a specified waypoint. Resolves when the vehicle reaches the waypoint or rejects if the action is cancelled.
+   * @param {number} hold Time to hold position in seconds.
+   * @param {number} acceptanceRadius Radius in meters to consider the waypoint reached.
+   * @param {number} passRadius Radius in meters to pass the waypoint.
+   * @param {number} yaw Yaw angle in degrees.
+   * @param {number} latitude Latitude in degrees.
+   * @param {number} longitude Longitude in degrees.
+   * @param {number} alt Altitude in meters.
+   * @returns {Promise<void>}
    */
-  function goTo(
+  async function goTo(
     hold: number,
     acceptanceRadius: number,
     passRadius: number,
@@ -194,17 +216,20 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     longitude: number,
     alt: number
   ): Promise<void> {
-    const waypoint = new Coordinates()
-    waypoint.latitude = latitude
-    waypoint.altitude = alt
-    waypoint.longitude = longitude
-
-    return slideToConfirm(() => {
-      if (!mainVehicle.value) {
-        throw new Error('action rejected or failed')
-      }
+    if (!mainVehicle.value) {
+      throw new Error('No vehicle available to execute go to command.')
+    }
+
+    const confirmed = await slideToConfirm('Confirm Go To Position', 'Go To Position Command Confirmed')
+    if (confirmed) {
+      const waypoint = new Coordinates()
+      waypoint.latitude = latitude
+      waypoint.altitude = alt
+      waypoint.longitude = longitude
       mainVehicle.value.goTo(hold, acceptanceRadius, passRadius, yaw, waypoint)
-    })
+    } else {
+      throw new Error('Go to position cancelled by the user')
+    }
   }
 
   /**