From 4bef4e69cd9f4e162e314274f76648dc3ad76d6c Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sun, 31 Mar 2024 22:39:53 -0700
Subject: [PATCH] added labels for each flight indicator component

---
 src/components/FlightComponents/Airspeed.vue  |  9 ++++--
 src/components/FlightComponents/Altimeter.vue |  9 ++++--
 src/components/FlightComponents/Altitude.vue  | 11 +++++--
 src/testDisplayComponents.vue                 | 29 +++++++++++++++----
 4 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/components/FlightComponents/Airspeed.vue b/src/components/FlightComponents/Airspeed.vue
index 4d5f951..cc222ed 100644
--- a/src/components/FlightComponents/Airspeed.vue
+++ b/src/components/FlightComponents/Airspeed.vue
@@ -14,14 +14,19 @@ export  default {
 
 <template>
 	<div class="airspeed-div">
-		<Airspeed :size="220" :airspeed="airspeed"/>
+		<Airspeed :size="200" :airspeed="airspeed"/>
+        <span style="font-size: 1.2em;"> Airspeed: {{ airspeed }} ft/s</span>
 	</div>
 </template>
 
 <style scoped>
     .airspeed-div {
+        position: relative;
         height: 100%;
-        width:100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         border: 1px solid black;
     }
 
diff --git a/src/components/FlightComponents/Altimeter.vue b/src/components/FlightComponents/Altimeter.vue
index 36f8dc8..5a2e448 100644
--- a/src/components/FlightComponents/Altimeter.vue
+++ b/src/components/FlightComponents/Altimeter.vue
@@ -14,14 +14,19 @@ export  default {
 
 <template>
 	<div class="altimeter-div">
-		<Altimeter :size="220" :altitude="altitude"/>
+		<Altimeter :size="200" :altitude="altitude"/>
+        <span style="font-size: 1.2em;"> Altitude: {{ altitude }} ft/s</span>
 	</div>
 </template>
 
 <style scoped>
     .altimeter-div {
+        position: relative;
         height: 100%;
-        width:100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         border: 1px solid black;
     }
 
diff --git a/src/components/FlightComponents/Altitude.vue b/src/components/FlightComponents/Altitude.vue
index 2ac7db2..b32c11f 100644
--- a/src/components/FlightComponents/Altitude.vue
+++ b/src/components/FlightComponents/Altitude.vue
@@ -15,15 +15,20 @@ export  default {
 
 <template>
 	<div class="altitude-div">
-		<Attitude :size="220" :pitch="pitch" :roll="roll" />
+		<Attitude :size="200" :pitch="pitch" :roll="roll" />
+        <span style="font-size: 1.2em;"> Pitch: {{ pitch }} </span>
+        <span style="font-size: 1.2em;"> Roll: {{ roll }} </span>
 	</div>
 </template>
 
 <style scoped>
     .altitude-div {
+        position: relative;
         height: 100%;
-        width:100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
         border: 1px solid black;
     }
-
 </style>
\ No newline at end of file
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
index f629d6f..a61255e 100644
--- a/src/testDisplayComponents.vue
+++ b/src/testDisplayComponents.vue
@@ -3,8 +3,8 @@
 <script setup>
 import Coordinate from './components/VehicleStatus/Coordinate.vue';
 import Altitude from './components/FlightComponents/Altitude.vue';
-import Altimeter from './components/FlightComponents/Altimeter.vue'
-import Airspeed from './components/FlightComponents/Airspeed.vue'
+import Altimeter from './components/FlightComponents/Altimeter.vue';
+import Airspeed from './components/FlightComponents/Airspeed.vue';
 
 let testObject = {
         longitude: -177.9325790,
@@ -13,11 +13,19 @@ let testObject = {
 </script>
 
 <template>
-  <!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
 
-  <Altitude :pitch=2 :roll=10></Altitude>
-  <Altimeter :altitude=200></Altimeter>
-  <Airspeed :airspeed=60></Airspeed>
+  <div class="altitude-outer-div">
+    <Altitude :pitch=2 :roll=10></Altitude>
+  </div>
+
+  <div class="altimeter-outer-div">
+    <Altimeter :altitude=200></Altimeter>
+  </div>
+
+  <div class="altitude-outer-div">
+    <Airspeed :airspeed=100></Airspeed>
+  </div>
+  
 
 </template>
 
@@ -32,5 +40,14 @@ let testObject = {
   width: 200px;  */
 }
 
+.altitude-outer-div {
+  height: 50;
+  width: 10%;
+}
+
+.altimeter-outer-div {
+  height: 50;
+  width: 10%;
+}
 
 </style>