From b044fa3fb797b627d685ec2b9ee8b4cfcf120331 Mon Sep 17 00:00:00 2001
From: Eric <eric.emj.johnson@gmail.com>
Date: Sat, 10 Feb 2024 11:09:34 -0800
Subject: [PATCH] altitude-slider: added altitude slider component

---
 src/App.vue                             |  2 ++
 src/components/AltitudeSlider.vue       | 44 +++++++++++++++++++++++++
 src/libs/altitude-slider.ts             | 11 +++++++
 src/libs/vehicle/ardupilot/ardupilot.ts |  5 +--
 src/stores/mainVehicle.ts               |  6 ++++
 5 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 src/components/AltitudeSlider.vue
 create mode 100644 src/libs/altitude-slider.ts

diff --git a/src/App.vue b/src/App.vue
index 37d407b72..5d5908275 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -101,6 +101,7 @@
               {{ format(timeNow, 'E LLL do HH:mm') }}
             </div>
           </div>
+          <AltitudeSlider />
           <Transition name="fade">
             <div v-if="showBottomBarNow" class="bottom-container">
               <SlideToConfirm />
@@ -155,6 +156,7 @@ import {
 } from '@/libs/joystick/protocols/cockpit-actions'
 import { useMissionStore } from '@/stores/mission'
 
+import AltitudeSlider from './components/AltitudeSlider.vue'
 import Dialog from './components/Dialog.vue'
 import EditMenu from './components/EditMenu.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'
diff --git a/src/components/AltitudeSlider.vue b/src/components/AltitudeSlider.vue
new file mode 100644
index 000000000..4b8892f7b
--- /dev/null
+++ b/src/components/AltitudeSlider.vue
@@ -0,0 +1,44 @@
+<template>
+  <div v-if="showAltitudeSlider" class="slider-div">
+    <slider
+      v-model="altitude_setpoint"
+      orientation="vertical"
+      width="100%"
+      height="20"
+      color="rgb(59 130 246)"
+      track-color="rgb(59 130 246 / 0.5)"
+      always-show-handle="true"
+      step="0.1"
+    />
+    <div class="slider-value"><span>Alt (Rel)</span></div>
+    <div class="slider-value">{{ formattedValue }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import slider from 'vue3-slider'
+
+import { altitude_setpoint, showAltitudeSlider } from '@/libs/altitude-slider'
+
+const formattedValue = computed(() => altitude_setpoint.value.toFixed(1))
+</script>
+<style scoped>
+.slider-value {
+  white-space: nowrap;
+  text-align: center;
+  font-size: 0.8rem;
+}
+.slider-div {
+  position: fixed;
+  right: 2%;
+  top: 25%;
+  bottom: 0;
+  width: 25px;
+  height: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 100;
+}
+</style>
diff --git a/src/libs/altitude-slider.ts b/src/libs/altitude-slider.ts
new file mode 100644
index 000000000..9d5d4e26e
--- /dev/null
+++ b/src/libs/altitude-slider.ts
@@ -0,0 +1,11 @@
+import { ref, watch } from 'vue'
+
+export const showAltitudeSlider = ref(false)
+export const altitude_setpoint = ref(0)
+
+/**
+ * Watches the altitude value for changes and updates the altitude accordingly.
+ */
+watch(altitude_setpoint, (newValue, oldValue) => {
+  console.log(`Altitude changed from ${oldValue} to ${newValue}`)
+})
diff --git a/src/libs/vehicle/ardupilot/ardupilot.ts b/src/libs/vehicle/ardupilot/ardupilot.ts
index f6afc23fb..fb2b340c2 100644
--- a/src/libs/vehicle/ardupilot/ardupilot.ts
+++ b/src/libs/vehicle/ardupilot/ardupilot.ts
@@ -398,9 +398,10 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
 
   /**
    * Takeoff
+   * @param {number} altitude_septoint
    * @returns {void}
    */
-  takeoff(): void {
+  takeoff(altitude_septoint: number): void {
     const guidedMode = this.modesAvailable().get('GUIDED')
     if (guidedMode === undefined) {
       return
@@ -408,7 +409,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
 
     this.setMode(guidedMode as Modes)
     this.arm()
-    this._takeoff(10)
+    this._takeoff(altitude_septoint)
     this.onTakeoff.emit()
     return
   }
diff --git a/src/stores/mainVehicle.ts b/src/stores/mainVehicle.ts
index 0161ec9be..71065d295 100644
--- a/src/stores/mainVehicle.ts
+++ b/src/stores/mainVehicle.ts
@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 import { computed, reactive, ref, watch } from 'vue'
 
 import { defaultGlobalAddress } from '@/assets/defaults'
+import { altitude_setpoint, showAltitudeSlider } from '@/libs/altitude-slider'
 import * as Connection from '@/libs/connection/connection'
 import { ConnectionManager } from '@/libs/connection/connection-manager'
 import type { Package } from '@/libs/connection/m2r/messages/mavlink2rest'
@@ -168,7 +169,12 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     if (!mainVehicle.value) {
       throw new Error('No vehicle available for takeoff')
     }
+
+    showAltitudeSlider.value = true
+
     const confirmed = await slideToConfirm('Confirm Takeoff', 'Takeoff Command Confirmed')
+    showAltitudeSlider.value = false
+
     if (confirmed) {
       mainVehicle.value.takeoff(altitude_setpoint.value)
     } else {