From 0dfac9a2e686495d6a028dd72f29a96b4425996a Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sat, 23 Mar 2024 01:22:41 -0700
Subject: [PATCH] added flight components from vue-flight-indicators library to
 test

---
 package-lock.json                             | 27 +++++++++++------
 package.json                                  |  1 +
 src/components/FlightComponents/Airspeed.vue  | 28 +++++++++++++++++
 src/components/FlightComponents/Altimeter.vue | 28 +++++++++++++++++
 src/components/FlightComponents/Altitude.vue  | 29 ++++++++++++++++++
 src/main.ts                                   |  3 +-
 src/testDisplayComponents.vue                 | 30 +++++--------------
 7 files changed, 114 insertions(+), 32 deletions(-)
 create mode 100644 src/components/FlightComponents/Airspeed.vue
 create mode 100644 src/components/FlightComponents/Altimeter.vue
 create mode 100644 src/components/FlightComponents/Altitude.vue

diff --git a/package-lock.json b/package-lock.json
index 62f5b61..0d9f539 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@tauri-apps/api": "^1.4.0",
         "vue": "^3.2.45",
+        "vue-flight-indicators": "^0.1.1",
         "vue-router": "^4.3.0"
       },
       "devDependencies": {
@@ -5932,9 +5933,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "dev": true,
       "funding": [
         {
@@ -7178,9 +7179,9 @@
       }
     },
     "node_modules/ip": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
-      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
+      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
       "dev": true
     },
     "node_modules/ip-regex": {
@@ -14173,6 +14174,14 @@
         "node": ">=16.14"
       }
     },
+    "node_modules/vue-flight-indicators": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/vue-flight-indicators/-/vue-flight-indicators-0.1.1.tgz",
+      "integrity": "sha512-Qwu7IMl2/IRiB7mtyi5C/rt+ty4jJNkvsjCU8GiuFNp2NcYGaQlUhzQmIeQBbjgTBA/Tnh0sy+rQXjIp7rymeA==",
+      "peerDependencies": {
+        "vue": ">=2.0.0"
+      }
+    },
     "node_modules/vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -16518,9 +16527,9 @@
       "peer": true
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
       "dev": true,
       "peer": true,
       "dependencies": {
diff --git a/package.json b/package.json
index f9988c8..2904ad3 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@tauri-apps/api": "^1.4.0",
     "vue": "^3.2.45",
+    "vue-flight-indicators": "^0.1.1",
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
diff --git a/src/components/FlightComponents/Airspeed.vue b/src/components/FlightComponents/Airspeed.vue
new file mode 100644
index 0000000..4d5f951
--- /dev/null
+++ b/src/components/FlightComponents/Airspeed.vue
@@ -0,0 +1,28 @@
+<script>
+import {Airspeed} from  'vue-flight-indicators'
+
+export  default {
+	name:  'airspeed',
+    props: {
+        airspeed: { required: true, type: Number},
+    },  
+	components: {
+		Airspeed
+	}
+}
+</script>
+
+<template>
+	<div class="airspeed-div">
+		<Airspeed :size="220" :airspeed="airspeed"/>
+	</div>
+</template>
+
+<style scoped>
+    .airspeed-div {
+        height: 100%;
+        width:100%;
+        border: 1px solid black;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/FlightComponents/Altimeter.vue b/src/components/FlightComponents/Altimeter.vue
new file mode 100644
index 0000000..36f8dc8
--- /dev/null
+++ b/src/components/FlightComponents/Altimeter.vue
@@ -0,0 +1,28 @@
+<script>
+import {Altimeter} from  'vue-flight-indicators'
+
+export  default {
+	name:  'altimeter',
+    props: {
+        altitude: { required: true, type: Number},
+    },  
+	components: {
+		Altimeter
+	}
+}
+</script>
+
+<template>
+	<div class="altimeter-div">
+		<Altimeter :size="220" :altitude="altitude"/>
+	</div>
+</template>
+
+<style scoped>
+    .altimeter-div {
+        height: 100%;
+        width:100%;
+        border: 1px solid black;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/FlightComponents/Altitude.vue b/src/components/FlightComponents/Altitude.vue
new file mode 100644
index 0000000..2ac7db2
--- /dev/null
+++ b/src/components/FlightComponents/Altitude.vue
@@ -0,0 +1,29 @@
+<script>
+import {Attitude} from  'vue-flight-indicators'
+
+export  default {
+	name:  'altitude',
+    props: {
+        pitch: { required: true, type: Number},
+        roll: {required: true, type: Number},
+    },  
+	components: {
+		Attitude
+	}
+}
+</script>
+
+<template>
+	<div class="altitude-div">
+		<Attitude :size="220" :pitch="pitch" :roll="roll" />
+	</div>
+</template>
+
+<style scoped>
+    .altitude-div {
+        height: 100%;
+        width:100%;
+        border: 1px solid black;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index c33641e..909a064 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,5 +2,6 @@ import { createApp } from "vue";
 import "./styles.css";
 import App from "./App.vue";
 import router from "./router";
+import testDisplayComponents from "./testDisplayComponents.vue";
 
-createApp(App).use(router).mount("#app");
+createApp(testDisplayComponents).use(router).mount("#app");
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
index 75c4f9e..f629d6f 100644
--- a/src/testDisplayComponents.vue
+++ b/src/testDisplayComponents.vue
@@ -1,12 +1,10 @@
-<!-- Using this to see how the Battery and Connection components look -->
+<!-- Using this to see how the our components look -->
 
 <script setup>
-import Battery from './components/VehicleStatus/Battery.vue';
-import Connection from './components/VehicleStatus/Connection.vue';
-import Status from "./components/VehicleStatusComponent.vue";
-import yuh from "./components/VehicleStatus/VehicleTitle.vue"
-import Coordinate from './components/VehicleStatus/Coordinate.vue'
-
+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'
 
 let testObject = {
         longitude: -177.9325790,
@@ -17,8 +15,9 @@ let testObject = {
 <template>
   <!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
 
-  <Coordinate :coordinates="testObject"></Coordinate>
-
+  <Altitude :pitch=2 :roll=10></Altitude>
+  <Altimeter :altitude=200></Altimeter>
+  <Airspeed :airspeed=60></Airspeed>
 
 </template>
 
@@ -33,18 +32,5 @@ let testObject = {
   width: 200px;  */
 }
 
-.border_div_2 {
-  display: flex;
-  border: 0.4em solid black;
-  height: 180px;
-  width: 380px;
-  /* height: 100px;
-  width: 200px;  */
-}
-
-.additional_battery_prop {
-  top: 4%;
-  margin-right: 2%;
-}
 
 </style>