From 1cf724e933b6b758618c3dcb11be50c0ce30655a Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sat, 23 Mar 2024 00:38:44 -0700
Subject: [PATCH] added Coordinate component to display coordinate in Vehicle
 Status component

---
 src/components/VehicleStatus/Coordinate.vue | 38 +++++++++++++++
 src/components/VehicleStatusComponent.vue   | 19 +++++---
 src/testDisplayComponents.vue               | 26 ++++-------
 src/testMapScreen.vue                       | 52 ---------------------
 src/views/testMapScreen.vue                 | 52 +++++++++++++++++++++
 5 files changed, 111 insertions(+), 76 deletions(-)
 create mode 100644 src/components/VehicleStatus/Coordinate.vue
 delete mode 100644 src/testMapScreen.vue
 create mode 100644 src/views/testMapScreen.vue

diff --git a/src/components/VehicleStatus/Coordinate.vue b/src/components/VehicleStatus/Coordinate.vue
new file mode 100644
index 0000000..3a2efa2
--- /dev/null
+++ b/src/components/VehicleStatus/Coordinate.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="coordinate-container">
+        <div class="coordinate-div">Longitude: {{ coordinates.longitude }}</div>
+        <div class="coordinate-div">Latitude: {{ coordinates.latitude }}</div>
+    </div>
+</template>
+    
+<script lang="ts">
+    export default {
+        props: {
+            coordinates: { required: true, type: Object }
+        },
+        computed: {
+
+        }
+    };
+</script>
+    
+    
+<style scoped>
+    .coordinate-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: 75%;
+        /* border: 0.05em solid black; */
+    }
+
+    .coordinate-div {
+        position: relative;
+        padding: 1%;
+        font-size: 1.2em;
+        color: black;
+        width: 100%;
+    }
+
+
+</style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
index 98fed8c..2446fc2 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@@ -4,25 +4,24 @@
     import VehicleTitle from './VehicleStatus/VehicleTitle.vue';
     import EmergencyStop from './VehicleStatus/EmergencyStop.vue';
     import Open from './VehicleStatus/Open.vue';
+    import Coordinate from './VehicleStatus/Coordinate.vue';
 
     export default {
         props: {
             vehicleName: { required: true, type: String},
             vehicleStatus: { required: true, type: String},
             batteryPct: {required: true, type: Number},
+            latency: { required: true, type: Number },
+            coordinates: { required: true, type: Object }
         },
         components: {
             VehicleTitle,
             Battery,
             Connection,
             EmergencyStop,
-            Open
+            Open,
+            Coordinate
         },
-        // computed: {
-        //     batteryPercentage(): number {
-        //         return this.batteryPct;
-        //     }
-        // },
     };
 </script>
 
@@ -33,11 +32,12 @@
         <div class="left-container">
             <VehicleTitle :vehicleName="vehicleName" :vehicleStatus="vehicleStatus"/>
             <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
-            <Connection :latency=65 class="adjust-connection"/> 
+            <Connection :latency="latency" class="adjust-connection"/> 
         </div>
 
         <div class="right-container">
             <Open class="adjust-open-button"></Open>
+            <Coordinate :coordinates="coordinates" class="adjust-coordinates"></Coordinate>
             <EmergencyStop class="adjust-emergency-button"/>
         </div>
     </div>
@@ -99,5 +99,10 @@
         margin-top: 4%;
         margin-left: 60%;
     }
+
+    .adjust-coordinates {
+        margin-top: 10%;
+        margin-left: 20%;   
+    }
  
 </style> 
\ No newline at end of file
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
index ffe9f06..75c4f9e 100644
--- a/src/testDisplayComponents.vue
+++ b/src/testDisplayComponents.vue
@@ -5,29 +5,21 @@ 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'
+
+
+let testObject = {
+        longitude: -177.9325790,
+        latitude: 33.9325790
+    }
 </script>
 
 <template>
-  <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/>
-  <!-- <yuh :vehicleName="'ERU'" :vehicleStatus="'Standby'"></yuh> -->
+  <!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
 
-  <!-- <h2>Below is the Connection component</h2>
-  <div class="border_div">
-    <Connection :latency=100 />                    
-  </div> -->
+  <Coordinate :coordinates="testObject"></Coordinate>
 
 
-  <!-- <h2>Below is the Battery component</h2>
-  <div class="border_div">
-    <Battery :percentage=12 :charging="false"/>    pass in the current percentage into percentage prop. charging is a boolean ! -->
-  <!-- </div> -->
-
-  <!-- <h2>Below is both in one div</h2>
-  <div class="border_div_2">
-    <Battery :percentage=12 :charging="false" class="additional_battery_prop"/>    
-    <Connection :latency=56 />                    
-  </div> -->
-
 </template>
 
 <style scoped>
diff --git a/src/testMapScreen.vue b/src/testMapScreen.vue
deleted file mode 100644
index 38d645e..0000000
--- a/src/testMapScreen.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<!-- <script setup> -->
-<script setup>
-import Status from './components/VehicleStatusComponent.vue';
-import NavBar from './components/Navbar.vue';
-
-
-</script>
-<template>
-  <NavBar></NavBar>
-  <div class="screen_div">
-    <div class="map_div"></div>
-    <div class="status_rightside">
-        <!-- <Status :vehicle-name="'ERU'" />
-        <Status :vehicle-name="'MRA'" />
-        <Status :vehicle-name="'MEA'" />
-        <Status :vehicle-name="'FRA'" /> -->
-        <Status :batteryPct=100 :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
-        <Status :batteryPct=48 :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
-        <Status :batteryPct=0 :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
-        <Status :batteryPct=10 :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
-
-    </div>
-  
-  </div>
-
-
-
-</template>
-
-<style scoped>
-
-.screen_div {
-    display: flex;
-    border: 0.003em solid black;
-    height: 85vh;
-    width: 99vw;
-}
-
-.status_rightside {
-    display: flex;
-    flex-direction: column;
-    border: 0.003em solid black;
-    height: 100%;
-    width: 25%;
-    margin-left: auto
-}
-
-.map_div {
-    background-color: pink;
-}
-
-</style>
diff --git a/src/views/testMapScreen.vue b/src/views/testMapScreen.vue
new file mode 100644
index 0000000..9f888cd
--- /dev/null
+++ b/src/views/testMapScreen.vue
@@ -0,0 +1,52 @@
+<!-- <script setup> -->
+<script setup>
+import Status from '../components/VehicleStatusComponent.vue';
+import NavBar from '../components/Navbar.vue';
+
+let testCoordinateObject = {
+        longitude: -177.9325790,
+        latitude: 33.9325790
+    }
+
+</script>
+<template>
+  <NavBar></NavBar>
+  <div class="screen_div">
+    <div class="map_div"></div>
+    <div class="status_rightside">
+        <Status :batteryPct=100 :latency=54 :coordinates="testCoordinateObject" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
+        <Status :batteryPct=48 :latency=30 :coordinates="testCoordinateObject" :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
+        <Status :batteryPct=0 :latency=97 :coordinates="testCoordinateObject" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
+        <Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
+
+    </div>
+  
+  </div>
+
+
+
+</template>
+
+<style scoped>
+
+.screen_div {
+    display: flex;
+    border: 0.003em solid black;
+    height: 85vh;
+    width: 99vw;
+}
+
+.status_rightside {
+    display: flex;
+    flex-direction: column;
+    border: 0.003em solid black;
+    height: 100%;
+    width: 25%;
+    margin-left: auto
+}
+
+.map_div {
+    background-color: pink;
+}
+
+</style>