Initial Implementation of Slide to Confirm

package.json

@@ -33,7 +33,7 @@
     "date-fns": "^2.29.3",
     "file-saver": "^2.0.5",
     "fix-webm-duration": "^1.0.5",
-    "floating-vue": "^2.0.0-beta.20",
+    "floating-vue": "^5.0.3",
     "gamepad.js": "^1.0.4",
     "gsap": "^3.11.3",
     "haversine-distance": "^1.2.1",
@@ -47,6 +47,7 @@
     "vue": "^3.3.4",
     "vue-draggable-plus": "^0.2.0-beta.2",
     "vue-router": "^4.0.14",
+    "vue-slide-unlock": "^0.4.8",
     "vue-virtual-scroller": "^2.0.0-beta.8",
     "vuetify": "3.4.7",
     "webfontloader": "^1.0.0",

src/App.vue

@@ -102,27 +102,27 @@
             </div>
           </div>
           <Transition name="fade">
-            <div
-              v-if="showBottomBarNow"
-              class="z-[60] w-full h-12 bg-slate-600/50 absolute flex bottom-0 backdrop-blur-[2px] justify-between"
-            >
-              <MiniWidgetContainer
-                :container="widgetStore.currentView.miniWidgetContainers[0]"
-                :allow-editing="widgetStore.editingMode"
-                align="start"
-              />
-              <div />
-              <MiniWidgetContainer
-                :container="widgetStore.currentView.miniWidgetContainers[1]"
-                :allow-editing="widgetStore.editingMode"
-                align="center"
-              />
-              <div />
-              <MiniWidgetContainer
-                :container="widgetStore.currentView.miniWidgetContainers[2]"
-                :allow-editing="widgetStore.editingMode"
-                align="end"
-              />
+            <div v-if="showBottomBarNow" class="bottom-container">
+              <SlideToConfirm />
+              <div class="bottom-bar h-12">
+                <MiniWidgetContainer
+                  :container="widgetStore.currentView.miniWidgetContainers[0]"
+                  :allow-editing="widgetStore.editingMode"
+                  align="start"
+                />
+                <div />
+                <MiniWidgetContainer
+                  :container="widgetStore.currentView.miniWidgetContainers[1]"
+                  :allow-editing="widgetStore.editingMode"
+                  align="center"
+                />
+                <div />
+                <MiniWidgetContainer
+                  :container="widgetStore.currentView.miniWidgetContainers[2]"
+                  :allow-editing="widgetStore.editingMode"
+                  align="end"
+                />
+              </div>
             </div>
           </Transition>
           <router-view />
@@ -158,6 +158,7 @@ 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'
@@ -266,4 +267,20 @@ body.hide-cursor {
   opacity: 0;
   transform: translate(0, 100px);
 }
+.bottom-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 60; /* Adjust z-index as needed */
+}
+
+.bottom-bar {
+  width: 100%;
+  background: rgba(108, 117, 125, 0.5);
+  display: flex;
+  justify-content: space-between;
+}
 </style>

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>

src/libs/slide-to-confirm.ts

@@ -0,0 +1,35 @@
+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 and showSlideToConfirm variables
+    const stopWatching = watch([confirmed, showSlideToConfirm], ([newConfirmed, newShowSlideToConfirm]) => {
+      if (newConfirmed) {
+        stopWatching()
+        confirmed.value = false
+        try {
+          actionFunc()
+          resolve()
+        } catch (error) {
+          reject(error)
+        }
+      } else if (!newShowSlideToConfirm) {
+        stopWatching()
+        reject(new Error('User cancelled the action'))
+      }
+    })
+  })
+}

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'
@@ -125,29 +126,52 @@ 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.
    */
-  function arm(): void {
-    mainVehicle.value?.arm()
+  function arm(): Promise<void> {
+    return slideToConfirm(() => {
+      if (!mainVehicle.value) {
+        throw new Error('action rejected or failed')
+      }
+      mainVehicle.value.arm()
+    })
   }
 
   /**
    * Disarm the vehicle
+   * @returns { void } A Promise that resolves when disarming is successful or rejects if an error occurs or the action is cancelled.
    */
-  function disarm(): void {
-    mainVehicle.value?.disarm()
+  function disarm(): Promise<void> {
+    return slideToConfirm(() => {
+      if (!mainVehicle.value) {
+        throw new Error('action rejected or failed')
+      }
+      mainVehicle.value.disarm()
+    })
   }
   /**
-   * Takeoff the vehicle
+   * 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.
    */
-  function takeoff(): void {
-    mainVehicle.value?.takeoff()
+  function takeoff(): Promise<void> {
+    return slideToConfirm(() => {
+      if (!mainVehicle.value) {
+        throw new Error('action rejected or failed')
+      }
+      mainVehicle.value.takeoff()
+    })
   }
-
   /**
    * Land the vehicle
+   * @returns { void } A Promise that resolves when landing is successful or rejects if an error occurs or the action is cancelled.
    */
-  function land(): void {
-    mainVehicle.value?.land()
+  function land(): Promise<void> {
+    return slideToConfirm(() => {
+      if (!mainVehicle.value) {
+        throw new Error('action rejected or failed')
+      }
+      mainVehicle.value.land()
+    })
   }
 
   /**
@@ -159,6 +183,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
    * @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.
    */
   function goTo(
     hold: number,
@@ -168,13 +193,18 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     latitude: number,
     longitude: number,
     alt: number
-  ): void {
+  ): Promise<void> {
     const waypoint = new Coordinates()
     waypoint.latitude = latitude
     waypoint.altitude = alt
     waypoint.longitude = longitude
 
-    mainVehicle.value?.goTo(hold, acceptanceRadius, passRadius, yaw, waypoint)
+    return slideToConfirm(() => {
+      if (!mainVehicle.value) {
+        throw new Error('action rejected or failed')
+      }
+      mainVehicle.value.goTo(hold, acceptanceRadius, passRadius, yaw, waypoint)
+    })
   }
 
   /**