package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "@tauri-apps/api": "^1.4.0",
         "vue": "^3.2.45",
-        "vue-flight-indicators": "^0.1.1",
         "vue-router": "^4.3.0"
       },
       "devDependencies": {
@@ -5933,9 +5932,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.6",
+      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
       "dev": true,
       "funding": [
         {
@@ -7179,9 +7178,9 @@
       }
     },
     "node_modules/ip": {
-      "version": "1.1.9",
+      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
+      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.8.tgz",
-      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
+      "integrity": "sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==",
       "dev": true
     },
     "node_modules/ip-regex": {
@@ -14174,14 +14173,6 @@
         "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",
@@ -16527,9 +16518,9 @@
       "peer": true
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "5.3.4",
+      "version": "5.3.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz",
-      "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==",
+      "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==",
       "dev": true,
       "peer": true,
       "dependencies": {

package.json

@@ -13,7 +13,6 @@
   "dependencies": {
     "@tauri-apps/api": "^1.4.0",
     "vue": "^3.2.45",
-    "vue-flight-indicators": "^0.1.1",
     "vue-router": "^4.3.0"
   },
   "devDependencies": {

src/components/FlightComponents/Airspeed.vue

@@ -1,32 +0,0 @@
-<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="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%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-</style>

src/components/FlightComponents/Altimeter.vue

@@ -1,32 +0,0 @@
-<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="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%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-</style>

src/components/FlightComponents/Altitude.vue

@@ -1,33 +0,0 @@
-<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="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%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-</style>

src/components/VehicleStatus/EmergencyStop.vue

@@ -1,33 +1,15 @@
 <template>
     <div class="emergency-stop-div">
-        <button class="emergency-button" @click="showEmergencyModal"> EMERGENCY STOP </button>
+        <button class="emergency-button"> EMERGENCY STOP </button>
-        <EmergencyStopModal :vehicle-name="vehicleName" v-show="showModal" @close="closeEmergencyModal"></EmergencyStopModal>
     </div>
     
 </template>
     
 <script lang="ts">
-    import EmergencyStopModal from './EmergencyStopModal.vue';
 
     export default {
-        components: {
-            EmergencyStopModal
-        },
         data() {
-            return {
+            return {};    
-                showModal: false
-            };    
-        },
-        props: {
-            vehicleName: { required: true, type: String},
-        },
-        methods: {
-            showEmergencyModal() {
-                this.showModal = true;
-            },
-            closeEmergencyModal() {
-                this.showModal = false;
-            }
         }
     };
 </script>

src/components/VehicleStatus/EmergencyStopModal.vue

@@ -1,171 +0,0 @@
-<template>
-  <transition name="modal-fade">
-    <div class="modal-backdrop" @click="closeFromOutside">
-      <div class="modal">
-        <header class="modal-header">
-          <img src="../../assets/stop-symbol.png" class="stop-icon"></img> 
-          <slot name="header">
-            Emergency Stop
-          </slot>
-          <button type="button" class="btn-close" @click="close">x</button>
-        </header>
-        
-        <section class="modal-body">
-          <slot name="body">
-            Send Stop Command to {{ vehicleName }}?
-          </slot>
-         </section>
-  
-        <footer class="modal-footer">
-          <button type="button" class="modal-button no-button" @click="close"> No </button>
-          <button type="button" class="modal-button yes-button" @click="sendStopCommand"> Yes </button>
-        </footer>
-      </div>
-    </div>
-  </transition>
-</template>
-    
-<script lang="ts">
-    export default {
-        data() {
-            return {};    
-        },
-        props: {
-            vehicleName: { required: true, type: String},
-        },
-        methods: {
-            sendStopCommand() {
-              console.log("Pressed yes to send stop command for " + this.vehicleName);
-              this.close();
-            },
-            close() {
-                this.$emit('close');
-            },
-            closeFromOutside(event: MouseEvent) {
-                if (!this.$el.querySelector('.modal').contains(event.target)) {
-                    this.close();
-                }
-            }
-        }
-    };
-</script>
-    
-    
-<style scoped>
-  .modal-backdrop {
-    position: fixed;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(0, 0, 0, 0.3);
-    z-index: 999;
-  }
-
-  .modal {
-    background: #FFFFFF;
-    box-shadow: 2px 2px 20px 1px;
-    overflow-x: auto;
-    display: flex;
-    flex-direction: column;
-    width: 25%;
-    height: 22%;
-    border-radius: 2%;
-  }
-
-  .modal-header {
-    position: relative;
-    display: flex;
-    /* justify-content: space-between; */
-    gap: 2%;
-    /* padding: 15px; */
-    padding: 15px;
-
-    font-size: 1.2em;
-    font-weight: 600;
-    border-bottom: 1px solid #d1cece;
-  }
-
-  .modal-body {
-    position: relative;
-    padding: 20px 10px;
-    font-size: 1.8em;
-    font-weight: bold;
-  }
-
-  .modal-footer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 20%;
-    padding-top: 5%;
-  }
-
-  .btn-close {
-    position: absolute;
-    top: 2%;
-    right: 2%;
-    border: none;
-    font-size: 20px;
-    padding: 10px;
-    cursor: pointer;
-    font-weight: bold;
-    color: rgb(255, 57, 57);
-    background: transparent;
-    transition: color 0.20s;
-  }
-
-  .btn-close:hover {
-    color: rgb(163, 9, 9);
-  }
-
-  .modal-button {
-    display:flex;
-    justify-content: center;
-    color: white;
-    width: 15%;
-    border-radius: 10%;
-    transition: background-color 0.30s;
-    font-size: 1.2em;
-  }
-
-  .no-button {
-    background: rgb(255, 57, 57);
-    border: 1px solid rgb(177, 6, 6);
-  }
-  .no-button:hover {
-    background-color: rgb(192, 40, 40);
-  }
-
-  .yes-button {
-    background: #03b900;    
-    border: 1px solid #059402;
-  }
-  .yes-button:hover {
-    background-color: #027500;
-  }
-  
-/* fade in/out transitions for the modal + modal overlay (screen dimming)*/
-  .modal-fade-enter-from,
-  .modal-fade-leave-to {
-    opacity: 0;
-  }
-  .modal-fade-enter-active, 
-  .modal-fade-leave-active {
-    transition: opacity .3s ease;
-  }
-
-/* slide transitions for modal window */
-  .modal-fade-enter-from .modal,
-  .modal-fade-leave-to .modal {
-    transform: translateY(-40px);
-    transition: transform .3s ease;
-  }
-
-  .stop-icon {
-    width: 5%;
-  }
-</style>    

src/components/VehicleStatus/VehicleTitle.vue

@@ -2,7 +2,7 @@
     <div class="vehicle-title-container">
         <div class="vehicle-name-div"> 
                 {{ vehicleName }} 
-               <img :src="getIconPath" class="vehicle-icon"></img> 
+              <!--  <img src="../../assets/MEA.png" class="vehicle-icon"></img>--> 
         </div>
         <div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
     </div>
@@ -16,11 +16,6 @@
             vehicleName: { required: true, type: String },
             vehicleStatus: { required: true, type: String },
             vehicleIcon: { type: Object }
-        },
-        computed: {
-            getIconPath() {
-                return new URL('../../assets/' + this.vehicleName + '.png', import.meta.url).href;
-            }
         }
     };
 </script>
@@ -31,27 +26,30 @@
     .vehicle-title-container {
         position: relative;
         width: 100%;
-        padding-top: 6%;
+        padding-top: 8%;
         padding-left: 6%;
     }
 
+    /* .vehicle-name-div {
+        position: relative;
+        font-size: 2.3em;
+    } */
+
     .vehicle-name-div {
         position: relative;
         display: flex;
         font-size: 2.3em;
-        align-items: center;
-        gap: 2%;
     }
 
     .vehicle-status-div {
         position: relative;
         font-size: 1.4em;  
-        margin-top: 3%;
+        margin-top: 5%;
     }
 
     .vehicle-icon {
         position: relative;
-        width: 16%;
+        width: 22%;
     }
 
 </style> 

src/components/VehicleStatusComponent.vue

@@ -48,7 +48,7 @@
         <div class="right-container">
             <Open class="adjust-open-button"></Open>
             <Coordinate :coordinates="coordinates" class="adjust-coordinates"></Coordinate>
-            <EmergencyStop :vehicleName="vehicleName" class="adjust-emergency-button"/>
+            <EmergencyStop class="adjust-emergency-button"/>
         </div>
     </div>
 </template>

src/main.ts

@@ -2,6 +2,5 @@ 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");

src/testDisplayComponents.vue

@@ -1,10 +1,12 @@
-<!-- Using this to see how the our components look -->
+<!-- Using this to see how the Battery and Connection components look -->
 
 <script setup>
-import Coordinate from './components/VehicleStatus/Coordinate.vue';
+import Battery from './components/VehicleStatus/Battery.vue';
-import Altitude from './components/FlightComponents/Altitude.vue';
+import Connection from './components/VehicleStatus/Connection.vue';
-import Altimeter from './components/FlightComponents/Altimeter.vue';
+import Status from "./components/VehicleStatusComponent.vue";
-import Airspeed from './components/FlightComponents/Airspeed.vue';
+import yuh from "./components/VehicleStatus/VehicleTitle.vue"
+import Coordinate from './components/VehicleStatus/Coordinate.vue'
+
 
 let testObject = {
         longitude: -177.9325790,
@@ -13,18 +15,9 @@ let testObject = {
 </script>
 
 <template>
+  <!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
 
-  <div class="altitude-outer-div">
+  <Coordinate :coordinates="testObject"></Coordinate>
-    <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>
@@ -40,14 +33,18 @@ let testObject = {
   width: 200px;  */
 }
 
-.altitude-outer-div {
+.border_div_2 {
-  height: 50;
+  display: flex;
-  width: 10%;
+  border: 0.4em solid black;
+  height: 180px;
+  width: 380px;
+  /* height: 100px;
+  width: 200px;  */
 }
 
-.altimeter-outer-div {
+.additional_battery_prop {
-  height: 50;
+  top: 4%;
-  width: 10%;
+  margin-right: 2%;
 }
 
 </style>

src/views/CamFocus.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import Airspeed from "../components/FlightComponents/Airspeed.vue";
+
-import Altimeter from "../components/FlightComponents/Altimeter.vue";
-import Altitude from "../components/FlightComponents/Altitude.vue";
 import Camera from "../components/Camera.vue";
 import { useRoute } from 'vue-router';
 const route = useRoute();
@@ -10,7 +8,6 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
 </script>
 
 <template>
-  <div class="cam-focus-screen-div">
     <div class="camera-container">
         <div class="camera-wrapper">
             <router-link to="/" class="back">Back</router-link>
@@ -18,33 +15,11 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
             <!-- Back button -->
         </div>
     </div>
-
-  <div class="vehicle-info-container">
-    <div class="flight-indicator">
-        <Altitude :pitch=2 :roll=10></Altitude>
-    </div>
-
-    <div class="flight-indicator">
-        <Altimeter :altitude=200></Altimeter>
-    </div>
-
-    <div class="flight-indicator">
-        <Airspeed :airspeed=100></Airspeed>
-    </div>
-  </div>
-</div>
 </template>
   
 <style scoped>
-.cam-focus-screen-div {
-    display:flex;
-    height: 90vh; 
-    width: 100%;
-}
-
 .camera-container {
-    /* height: 90vh;  */
+    height: 90vh; /* Set the height of the container to 100% of the viewport height */
-    height: 100%; 
     width: 75%;
     display: flex; /* Use flexbox to align items vertically */
     justify-content: center; /* Center the child element horizontally */
@@ -65,19 +40,4 @@ const cameraID = Number(route.params.id); // Assuming we're using camera Number
     color: black;
     cursor: pointer;
   }
-  .vehicle-info-container {
-    display: flex;
-    flex-direction: column;
-    gap: 1%;
-    height: 100%; 
-    width: 25%;
-    /* background-color: pink; */
-}
-.flight-indicator{
-    position: relative;
-    width: 45%;
-    border: 1px solid black;
-    padding-bottom: 2%;
-}
-
 </style>