From b644c718f0a537ac99b7b42edf86f31c8e3d7e00 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Fri, 15 Mar 2024 18:42:11 -0700
Subject: [PATCH 1/8] created initial vehicle status component

---
 src/components/VehicleStatusComponent.vue | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/components/VehicleStatusComponent.vue

diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
new file mode 100644
index 0000000..e69de29

From 2d8f27cf7a02a117346dd945b0da0de965f69bfb Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Fri, 15 Mar 2024 23:01:50 -0700
Subject: [PATCH 2/8] created initial layout for vehicle status component.
 contains name, status, battery, and connection. created a test basic map
 layout to display vehicle status components

---
 src/components/VehicleStatus/Battery.vue      |  4 +-
 .../VehicleStatus/EmergencyStop.vue           | 63 +++++++++++++
 src/components/VehicleStatus/VehicleTitle.vue | 40 +++++++++
 src/components/VehicleStatusComponent.vue     | 88 +++++++++++++++++++
 src/testDisplayComponents.vue                 |  9 +-
 src/testMapScreen.vue                         | 52 +++++++++++
 6 files changed, 252 insertions(+), 4 deletions(-)
 create mode 100644 src/components/VehicleStatus/EmergencyStop.vue
 create mode 100644 src/components/VehicleStatus/VehicleTitle.vue
 create mode 100644 src/testMapScreen.vue

diff --git a/src/components/VehicleStatus/Battery.vue b/src/components/VehicleStatus/Battery.vue
index d85d569..bd6e2bf 100644
--- a/src/components/VehicleStatus/Battery.vue
+++ b/src/components/VehicleStatus/Battery.vue
@@ -106,7 +106,7 @@
     }
 
     #battery_progress {
-        background-color: rgb(116, 194, 92); 
+        background-color: rgb(83, 255, 83); 
         border-radius: 12%;
         height:100%;
         width: 100%; 
@@ -132,7 +132,7 @@
         height:100%;
     }
     .normalPercent {
-        background-color: rgb(116, 194, 92); 
+        background-color: rgb(87, 255, 87); 
         border-radius: 12%;
     }
 
diff --git a/src/components/VehicleStatus/EmergencyStop.vue b/src/components/VehicleStatus/EmergencyStop.vue
new file mode 100644
index 0000000..5947a9d
--- /dev/null
+++ b/src/components/VehicleStatus/EmergencyStop.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="outer_div">
+   
+    </div>
+    
+    </template>
+    
+<script lang="ts">
+
+    export default {
+        data() {
+            return {};    
+        },
+        props: {
+            latency: { required: true, type: Number},
+        },
+        computed: {
+        }
+    };
+</script>
+    
+    
+<style scoped>
+    .outer_div {
+        display: flex;
+        position: relative;
+        height: 25%;
+        width: 10%;  
+    }
+    .connection-container {
+        position: relative;
+        justify-content: center;
+        display: flex;
+        gap: 0.05em;
+        height: 100%;
+        width: 100%;
+        border-radius: 12%;
+        /* background-color: white; */
+    }
+    .bar {
+        width:100%;
+        background-color: white;
+        border: 0.1em solid black;
+        margin-top: auto;
+        border-radius: 20%;
+    }
+    .grayed_bar {
+        width:100%;
+        background-color: rgb(136, 135, 135);
+        border: 0.1em solid black;
+        margin-top: auto;
+        opacity: 0.2;
+        border-radius: 20%;
+    }
+    .connection_number {
+        position: absolute;
+        left: 110%;
+        bottom: 0%;
+        width: 180%;
+        font-size:0.8em;
+    }
+    
+</style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatus/VehicleTitle.vue b/src/components/VehicleStatus/VehicleTitle.vue
new file mode 100644
index 0000000..51733c5
--- /dev/null
+++ b/src/components/VehicleStatus/VehicleTitle.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="vehicle-title-container">
+        <div class="vehicle-name-div"> {{ vehicleName }}</div>
+        <div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
+    </div>
+    
+    </template>
+    
+<script lang="ts">
+
+    export default {
+        props: {
+            vehicleName: { required: true, type: String },
+            vehicleStatus: { required: true, type: String }
+        }
+    };
+</script>
+    
+    
+<style scoped>
+
+    .vehicle-title-container {
+        position: relative;
+        width: 100%;
+        padding-top: 8%;
+        padding-left: 6%;
+    }
+
+    .vehicle-name-div {
+        position: relative;
+        font-size: 2.5em;
+    }
+
+    .vehicle-status-div {
+        position: relative;
+        font-size: 1.5em;  
+        margin-top: 5%;;
+    }
+
+</style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
index e69de29..52dc902 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@@ -0,0 +1,88 @@
+<script lang="ts">
+    import Battery from './VehicleStatus/Battery.vue';
+    import Connection from './VehicleStatus/Connection.vue';
+    import VehicleTitle from './VehicleStatus/VehicleTitle.vue';
+
+    export default {
+        props: {
+            vehicleName: { required: true, type: String},
+            vehicleStatus: { required: true, type: String},
+            batteryPct: {required: true, type: Number},
+        },
+        components: {
+            VehicleTitle,
+            Battery,
+            Connection
+        },
+        // computed: {
+        //     batteryPercentage(): number {
+        //         return this.batteryPct;
+        //     }
+        // },
+    };
+</script>
+
+<template>
+    <div class="status_container">
+
+        <!-- Left side of container (Name, Status, Battery, Connection)-->
+        <div class="left-container">
+            <VehicleTitle :vehicleName="vehicleName" :vehicleStatus="vehicleStatus"/>
+            <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
+            <Connection :latency=65 class="adjust-connection"/> 
+        </div>
+
+        <div class="right-container">
+
+        </div>
+    </div>
+</template>
+    
+    
+<style scoped>
+    .status_container {
+        display: flex;
+        position: relative;
+        height: 200px;
+
+        /* width: 25%;  */
+        width: 100%; 
+
+        border: 0.1em solid black;
+        background-color: white;
+        color: black;
+    }
+
+    .left-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 40%;
+    }
+
+    .right-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100%;   
+        width: 60%; 
+    }
+
+    .adjust-battery {
+        height: 19%;
+        width: 36%;
+        margin-top: auto;
+        margin-left: 8%;
+    }
+
+    .adjust-connection {
+        height: 30%;
+        width: 28%; 
+        margin-top: 1%;
+        margin-bottom: 4%;  
+        margin-left: 10%; 
+    }
+ 
+
+</style> 
\ No newline at end of file
diff --git a/src/testDisplayComponents.vue b/src/testDisplayComponents.vue
index a2f96b9..ffe9f06 100644
--- a/src/testDisplayComponents.vue
+++ b/src/testDisplayComponents.vue
@@ -3,9 +3,14 @@
 <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"
 </script>
 
 <template>
+  <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/>
+  <!-- <yuh :vehicleName="'ERU'" :vehicleStatus="'Standby'"></yuh> -->
+
   <!-- <h2>Below is the Connection component</h2>
   <div class="border_div">
     <Connection :latency=100 />                    
@@ -17,11 +22,11 @@ import Connection from './components/VehicleStatus/Connection.vue';
     <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>
+  <!-- <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>
+  </div> -->
 
 </template>
 
diff --git a/src/testMapScreen.vue b/src/testMapScreen.vue
new file mode 100644
index 0000000..38d645e
--- /dev/null
+++ b/src/testMapScreen.vue
@@ -0,0 +1,52 @@
+<!-- <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>

From 294ffead44b9df8f6850130ef0ae62d8837eb6e9 Mon Sep 17 00:00:00 2001
From: Justin Nguyen <ju5t1n.nguy3n284@gmail.com>
Date: Tue, 19 Mar 2024 01:43:54 -0700
Subject: [PATCH 3/8] added Open button for Vehicle Status widget. Adjusted
 sizing of other components in Status widget

---
 .../VehicleStatus/EmergencyStop.vue           | 64 +++++++------------
 src/components/VehicleStatus/Open.vue         | 50 +++++++++++++++
 src/components/VehicleStatus/VehicleTitle.vue | 19 ++++--
 src/components/VehicleStatusComponent.vue     | 31 ++++++---
 4 files changed, 109 insertions(+), 55 deletions(-)
 create mode 100644 src/components/VehicleStatus/Open.vue

diff --git a/src/components/VehicleStatus/EmergencyStop.vue b/src/components/VehicleStatus/EmergencyStop.vue
index 5947a9d..639905e 100644
--- a/src/components/VehicleStatus/EmergencyStop.vue
+++ b/src/components/VehicleStatus/EmergencyStop.vue
@@ -1,9 +1,9 @@
 <template>
-    <div class="outer_div">
-   
+    <div class="emergency-stop-div">
+        <button class="emergency-button"> EMERGENCY STOP </button>
     </div>
     
-    </template>
+</template>
     
 <script lang="ts">
 
@@ -11,53 +11,33 @@
         data() {
             return {};    
         },
-        props: {
-            latency: { required: true, type: Number},
-        },
-        computed: {
-        }
+        // props: {
+        // },
+        // computed: {
+        // }
     };
 </script>
     
     
 <style scoped>
-    .outer_div {
-        display: flex;
+    .emergency-stop-div {
         position: relative;
-        height: 25%;
-        width: 10%;  
+        display: flex;
+        height: 20%;
+        width: 70%;  
+        text-align: center;
     }
-    .connection-container {
+
+    .emergency-button {
         position: relative;
-        justify-content: center;
-        display: flex;
-        gap: 0.05em;
-        height: 100%;
+        display: inline-block;
         width: 100%;
-        border-radius: 12%;
-        /* background-color: white; */
+        height: 100%;
+        background-color: rgb(255, 57, 57);
+        font-size: 1em;
+    } 
+
+    .emergency-button:hover {
+        background-color: rgb(192, 40, 40);
     }
-    .bar {
-        width:100%;
-        background-color: white;
-        border: 0.1em solid black;
-        margin-top: auto;
-        border-radius: 20%;
-    }
-    .grayed_bar {
-        width:100%;
-        background-color: rgb(136, 135, 135);
-        border: 0.1em solid black;
-        margin-top: auto;
-        opacity: 0.2;
-        border-radius: 20%;
-    }
-    .connection_number {
-        position: absolute;
-        left: 110%;
-        bottom: 0%;
-        width: 180%;
-        font-size:0.8em;
-    }
-    
 </style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatus/Open.vue b/src/components/VehicleStatus/Open.vue
new file mode 100644
index 0000000..c04c32b
--- /dev/null
+++ b/src/components/VehicleStatus/Open.vue
@@ -0,0 +1,50 @@
+<template>
+    <!-- <div class="open-button-div">
+        <button class="open-button">OPEN</button>
+    </div> -->
+    <button class="test-open-button">OPEN</button>
+</template>
+    
+<script lang="ts">
+
+    export default {
+        data() {
+            return {};    
+        },
+        // props: {
+        // },
+        // computed: {
+        // }
+    };
+</script>
+    
+    
+<style scoped>
+    .open-button-div {
+        position: relative;
+        height: 25%;
+        width: 35%;  
+    }
+
+    .open-button {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        background-color: #011949;
+        font-size: 1.3em;
+    } 
+
+    .test-open-button {
+        position: relative;
+        display: inline-block;
+        width: 30%;
+        height: 20%;
+        background-color: #011949;
+        font-size: 1em;
+    } 
+
+    .test-open-button:hover {
+        background-color: #03369b;
+    }
+</style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatus/VehicleTitle.vue b/src/components/VehicleStatus/VehicleTitle.vue
index 51733c5..ec9c7ab 100644
--- a/src/components/VehicleStatus/VehicleTitle.vue
+++ b/src/components/VehicleStatus/VehicleTitle.vue
@@ -1,6 +1,7 @@
 <template>
     <div class="vehicle-title-container">
-        <div class="vehicle-name-div"> {{ vehicleName }}</div>
+        <div class="vehicle-name-div"> {{ vehicleName }} </div>
+
         <div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
     </div>
     
@@ -11,7 +12,8 @@
     export default {
         props: {
             vehicleName: { required: true, type: String },
-            vehicleStatus: { required: true, type: String }
+            vehicleStatus: { required: true, type: String },
+            vehicleIcon: { type: Object }
         }
     };
 </script>
@@ -28,13 +30,20 @@
 
     .vehicle-name-div {
         position: relative;
-        font-size: 2.5em;
+        font-size: 2.3em;
     }
 
     .vehicle-status-div {
         position: relative;
-        font-size: 1.5em;  
-        margin-top: 5%;;
+        font-size: 1.6em;  
+        margin-top: 5%;
+    }
+
+    .vehicle-icon {
+        position: relative;
+        width: 12%;
+        height: 12%;
+        /* vertical-align: middle; */
     }
 
 </style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
index 52dc902..98fed8c 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@@ -2,6 +2,8 @@
     import Battery from './VehicleStatus/Battery.vue';
     import Connection from './VehicleStatus/Connection.vue';
     import VehicleTitle from './VehicleStatus/VehicleTitle.vue';
+    import EmergencyStop from './VehicleStatus/EmergencyStop.vue';
+    import Open from './VehicleStatus/Open.vue';
 
     export default {
         props: {
@@ -12,7 +14,9 @@
         components: {
             VehicleTitle,
             Battery,
-            Connection
+            Connection,
+            EmergencyStop,
+            Open
         },
         // computed: {
         //     batteryPercentage(): number {
@@ -33,7 +37,8 @@
         </div>
 
         <div class="right-container">
-
+            <Open class="adjust-open-button"></Open>
+            <EmergencyStop class="adjust-emergency-button"/>
         </div>
     </div>
 </template>
@@ -70,19 +75,29 @@
     }
 
     .adjust-battery {
-        height: 19%;
-        width: 36%;
+        height: 17%;
+        width: 34.5%;
         margin-top: auto;
         margin-left: 8%;
     }
 
     .adjust-connection {
-        height: 30%;
-        width: 28%; 
-        margin-top: 1%;
+        height: 28%;
+        width: 26%; 
+        margin-top: 2%;
         margin-bottom: 4%;  
         margin-left: 10%; 
     }
- 
 
+    .adjust-emergency-button {
+        margin-top: auto;
+        margin-bottom: 4%;  
+        margin-left: 20%;
+    }
+
+    .adjust-open-button {
+        margin-top: 4%;
+        margin-left: 60%;
+    }
+ 
 </style> 
\ No newline at end of file

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 4/8] 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>

From 4298176dabc49cf9d72579b74134c705ac3e6dc7 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sat, 30 Mar 2024 22:36:31 -0700
Subject: [PATCH 5/8] readjust sizes of components in vehicle status component

---
 src/assets/ERU.png                            | Bin 0 -> 3244 bytes
 src/assets/FRA.png                            | Bin 0 -> 3293 bytes
 src/assets/MEA.png                            | Bin 0 -> 4010 bytes
 src/assets/MRA.png                            | Bin 0 -> 3371 bytes
 src/components/VehicleStatus/Connection.vue   |   2 +-
 .../VehicleStatus/EmergencyStop.vue           |   3 +-
 src/components/VehicleStatus/Open.vue         |  27 ++++----------
 src/components/VehicleStatus/VehicleTitle.vue |  18 ++++++----
 src/components/VehicleStatusComponent.vue     |  33 ++++++++++++++----
 src/main.ts                                   |   3 +-
 src/views/testMapScreen.vue                   |  12 +++++--
 11 files changed, 59 insertions(+), 39 deletions(-)
 create mode 100644 src/assets/ERU.png
 create mode 100644 src/assets/FRA.png
 create mode 100644 src/assets/MEA.png
 create mode 100644 src/assets/MRA.png

diff --git a/src/assets/ERU.png b/src/assets/ERU.png
new file mode 100644
index 0000000000000000000000000000000000000000..454167dc4cdc630bd1e6fb21aca5b84e28d619fc
GIT binary patch
literal 3244
zcmbVPc|25m8|PZ0&=jc|En_TEnAMCKCT3-1C*)Swa0bI{X2v#JEF-j;L?X$Sq*B%!
zl90;swxH}wQYeYKX}NFpj+Xnrf85Xg<2|2q&Tl!-_xn8G=l48+oK!a#d(GvL<q8T4
znhXc3hkOK<9yL|@TQHI7B_F_Iny=WCA0&=q3RwyyfFHnuGPulOmIsRo#DurAY!nof
zg4kZZVqa$`LLi@O!CbPjh~^69Xaxlu+h_qZFpMRJ2C#zJJR<CMLlX?j28b{pOJ{_$
zfWiu4J4l2qPl=0Hpd>6155R1<L2aT5asn<(%!EdBIXn>|nh5*GOOVf(w&5`7HxqFf
z5%xVOUuQQcg)d}5EiKUIfe0iLip5$WF_u^?(hQ11AW?9H{KlFiF$7C20fmG9xL|T`
zLLi9XL8brjC0`L?A!4zB0Eb6KMOj3lE%?G<I1-P?FL9ty=5h;jQ4CMaj5g<q41O|D
zS)xE8TOelhdC(<BW&l4zOoYiJ{VstkaCZKSm?!#?D0#}@(M$mxX@P)qxl6jfS&PIT
ztpA4bx7H%B7y%3J!4mN!gn{z&2r~EymgnxD9W5EkqanBo+44hSa;W^k2ri2!W>ASR
z`4<a-4G_>63<60f;czr78jXxZ;?X!NosOrV$s{C=geCpt_&Y2GfkTt6mXKB$B$7rZ
zVewQNg@!|0qNyZ2#quYX!4rv@yg=4ZziheRA6V)?VhI!>iz(&{z4(02&kAr0;fwjA
z5WWCP@x($+eAqmIA0;wfI-c)psVpHok_FI(d@l4`ehKWq@sGu#F;pZOYlZo)n}kDP
z@g%u=Iuc7lQSh)ISm6K38C)I=e5pA8r&xY&$t!Sa`d8`87k@Pmizn|Gp}aM;R>0pV
zD5woHs3foG!P(tmAsc8q+x7({a38Kd+n>=LT|xIU`RHEOL`K%u)Y2HBg8WqP!!^(y
zr4BEZLX{J{{n%c9pPBi^pg}kF=HJfQIvyx_By(eIAssze{8(>+l>3zUl87H@jCw!U
zbz^R?;O=N+T@`w22>+HK3L5R|(#U9;wq2pGB0znN>PFW~NHb>lk~#U5_U$`O?p{CA
zD`S@#9p-4JZo(VkR_U)SZba;aP6kGPPPN>*P)KL&8UD3w5*JoEK|0;pIK|aWU1__u
z&Uv_jR0G_8EDH(0vI3lPI@5-u7qPF@vvNl}Nz&6e@0a>|)O2CQ!!dR%v2*oA5FxYL
zWX9vo<@6JdCr#_-7QP<Ntj=<H9d5MU=0<}H`)qM=#KWqo0j%=4uF+5i$GtLp#GVqH
zmVVY||L=_U3n;ej`N<V&ujkx^Du+BR>}KAra_^f6rA)wzPf8pvJLV8?>o#ov_m{$S
zOIF^(3e(YxahptI+Ma#MPv2<tTZ8xlnxS@M#5#ks_C3;IOt!ad(lu>t>;lj-RW;`$
zydWKjb#D(e>;~R#!Iw;mz11%yw;1|2gg9L}o<04Rc@V@u$*#s9)BgDEYIfIiEUHM$
zI8(e8Uj~?Mm--idtV};TyC<)UyfRz8>5Ocw01>qYz<f=<|CMWu9;637A~mJAI^H{F
zY<S3h%*7}+19LU@eEa%8RGluGLc#Zj4zx^t)k@DT$f-%4;}?hDcQmr^9_(zvao`Ni
z5xt@pW6sZ^Cii5GD-$+lTq+aT^tuGq=FL699N5g*=4>2Rm%h&neGRqJ^W7C?tNhbt
z^S^JUR4eMW57%CewTg^!ZGVJuIs*m&sRFhy)f?Ib8+oO_zrp$z|IeBC!(OinP!_KB
z?ZUhLZ4lo1L#~v1_g1H?J>#1S-|Ts`gQ5#51#5wQF8D=}uyOES#T?0i{j-P;NJ@r@
zleal5{X~T=1&9l=wNh*-ovmTO0C*VsjTc&r6d9h<aVnVGF<K0&^aM)KMV76XOT>q=
zgu%no>IXyatrE{OZp3Mz@d~7ywtbhh*YoT3_@n50)PvK@2OmULm}aVWGxn{QitWOA
zp+{8r8My6RS5TQ&5f9k+N;wGwTO;i$TA#X)?eC6Hj5N8I2;QvR5M`Zjm2^xyX~h4b
zW?Rh(Lbp3tM_OIM)|g$~kl10oyy_sMJE>>QsMg&6KtJ{7w$t8=;6Aj(eC^kwEb&DC
znjm;Id$Y1nZ?2_a*UZa`^<AWuI%f=X7{PS4X3Ht_S+qrimfz?5&Cr?K&AMvi0XkC9
zu64p)5rRY4?z_e7dX9bZksMQRuC^@>&bHg6)3_T;iKEp(r5yjhX|S-vjk(S3&6ah(
zVg9}@MWLQm%g;O5^XhxZ4jZ}_&q5GhG9$M^19#k>xbC?!=FNy+jcp^|pI2AzVHms|
z%?`EBlTKXkr&Tr@-&%M?PEOsdQEPNhkbhiUdQ=uM`{`1;J|$^<_X};+u-ocs!7pxs
zW;&dc3)I;GeN!51#=V)k&a1l(W*aUnzQ|41qO7X)Yxi6Hc)g&@woO7@+dQP=wd_Xl
z3_L-grE~6PM9oPtI7ep5aS8HjPs%vG_4nXvu;jK%H&~|CHw`tsQx1<;OcR(`x!JBp
z>JM{>Ws^Lm`*#oL<n@r$-ha}=`daH!f%4(5$9qxP#)#R1&O_=uo6F&P9pYba)fhNd
zMGR1~)@TdYHf+Snp6n>>0U7BN3)lAgkAt6XtiN;$w5=r<;br|{QZMIHcFLsn@vQTj
z8T^(dOy!Z?r+rgGlP1T(N^BR&bY%cJwEta3yavuVMfRsgG5%RWr<*~<vPY8>MJwXP
zCvV+Uyf*MQ0<t#$y5gvw-3eK_xAMFFceX^e3i3u1243pC?iou|cgCf(_jyoC5;2aD
z`E#9(Pt{#;4(CJsmg#$v>ba2d+Ar6k%`>WCtkVn>K;6AbSIT=A12>iL_-1Xueqd7s
z{%_@d-=uoo`9M>EqqS^Y+{vWL;%hdMZ?|ER*=8jN7yTW(&69V?<@Ey#?G@{Nm1*~u
z1ht$``xuZ(i@8g?z}z66r<vB}hPgxb4tQI5?{G@lRm-iEENYf-y^*UYc_D>AzEUMw
zJQ}f)py8|*75v0SRI)6^xD8V*8pfZI3Z|@PyhER8&28Iq<~dm#He!zp>H3gn@xGjz
zkLbDoi~vzSdpMR<GFJB%F_r_;-9X0sKyO(*mfHC6Nb|39HyT1fgCpDMx29xotX`@v
zfOT4WVS=z<c!M8Z9}=Fj+MNkQoL?sfBImiBy>E|spGX=X>Yr3~JN(NBx@%pdv$ejk
zX!971i;UWe8B++Af|SRWn<uJyp@FLkb+o~C`Y7KxjVkxc<4-UENU=x?1*|kTrj$VR
zmF~?W^p1lP#ubBs(vr{wjdnw&hg5osd`!&Vp#(fYfy+!i$RJcmw#NIci21AgQKxpA
z$??9n8$sw!Sv)-ET9dDOII5?uzQqRM=;~8iJK|1NXu~M2^+|g7J^t0dvh8v&3gDPb
zAK|=Gc8wf`cFi}qsqJP`j^43L(KD_2<6~smW431cfSqOHooA0+4yu!_Ob;MWB&qCF
ze{$?%is-@lSJw_%sf9Z<R~4317VOrVfj*fK)iO6tuQocee%eFJJ(qOu?cJi%xT;!f
z|H#t5Rb}9U`r4h=I$f9mTOG5bcb;e4J=$>kj{BT{yJ8uVa*z>H42d7r-w|`w(7vw7
zXW?H|TVt^WC9P=%1meEe_|srv>}H8h`Lg#(HD%V4%+{BJ3H(4@LJ>-mR<zxAuIdzY
zqNG1xJ66=`@bH>Q9oISj<;ePX^Nwv7%U-mmPE96u-Bv9_x~pifD}*5Jo(pgPq0~c8
znf-cYb5%Drh~Af%VUykT7SOs+CvJ2!&=+;sJvX+09;}jGL_oO;Nt~Rne#7jVaFnPO
zSfmG<JNc5$3fuNx{AGJelF_Zz0ZjD@sjn}&GVOrMIt7Gj7IO6&o6@EK2L{cBT2A&)
F_z$CWY<>U$

literal 0
HcmV?d00001

diff --git a/src/assets/FRA.png b/src/assets/FRA.png
new file mode 100644
index 0000000000000000000000000000000000000000..62775bbb7e769e8f05201cacdc0193cd2f8366f4
GIT binary patch
literal 3293
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
bVu1V~D}rI&5$*<P00000NkvXXu0mjfI`A{0

literal 0
HcmV?d00001

diff --git a/src/assets/MEA.png b/src/assets/MEA.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2a5f537b9da20ae5f8788f222ee645a69776aaa
GIT binary patch
literal 4010
zcmbVPc|25m|JNo&wjra`7?PMVX0c6-$Cw$EeHSicW-!8xnUN7C``E%IS&|GXl_l$B
z%TCdCQAv?4mk^3*)iZ9l`}_TIU(fS;J?EV7`7Y=4et-5qPJ*?iiI|AIh=72An3*Zg
zmOqoXhmauuO`pDO&!2!Syfe#==FJKrGAIH@WSSQRWEMd5q1aN0<j|mp6nz1KUEWlC
zXO^>tIhsTZ&>(KhXs`q5e6)aoz9E}VB%PtKKwcCdYM=plrSSn6L?s)5owO`8E$GG+
zU#jUj2F322r9J7~8Im3uY={Brv(bEl01Ar;Vh8vKGSO@U@SnVB{(Acu1_u2p!a8FB
z{$Z4}g*C{S#-M<-G>}k|CL9jZ*4BWdw6wM15D-EWj(}<MA8jZch1SwWBXmH2U0}X8
z2H6{JizED{i@!4f`?6ScGz=CJ5~2};)SxkZU~oM>y=@Kz0?L<wGD8DdL^d>#sq~Wp
zM`4l}R62`F3j}R561`}_ECVp#(jP7a&@C+fCJto&6)1klU~D2C2G`Jp1q5vS^`|tG
zWlQ-#GyYMUX&*|bz-%c@S}=pe&xg0tPcT1r|5?$tAm19a6@$u83eg`&BLxRg0$FA_
z12F%K2AN7mBT*<#IKfCq2d|6AW8rW;qz;Zi&@)D2jo^4AZKIzY|Af`VYH1nc@tV4L
zT`f2qkHw;}##n6~ElvKds|z>&i8TvkvWS5s%1^yizTO{L9N|A=(Z&o4kws(J(`f!b
zE5O>9#-cHOX>^dWoi<3-i5f_zg)onAr{{;aI0}P$mO>^lXaS%<<BO*LgMOs$fAjkX
zmi)iO48}JGwp|?muULK_@hfn9`FH8_H-9$|C6M1S41Q|>cL?#@a^DLxoRK~I#ge<Y
zzoV0kAu8qG<K1GV1Qf|jQrSTVnd7BZ<ypAvZlz)5Jt*#wa08jtK*$%)zx2khvb*09
zxC>sqD@Vaagwz&SD50{C;6snJPJq1dr)G&wx8x?2ZWcetTUlpJEQW24Z{GBnfa$#%
zSqWRo4;#2YHx@CMe<Faz%50~<{|$)}woZL;CFz&n51t(m|JHoTZ`VPY^JTJXwjN3%
zqj3#iSyfKOvJmn$ZU|QKh`P+LhQ$tFo9s<ne663TY|$Ln%WV}u5zA&9E3!l$iW^pj
zZyMl-PsWl{Q&rDZ%zn88aCcJcJdz72vt2jF4;z<%@$RKfh<^$|Uuza=IvMNSs!`%@
zlgd>}yyl299=vgJaiVa3Ic;tnFm&Iey}CfK;_&J<N41!FgG6oBbA-X_#AUlDSkftw
zc<k7S?9^y|+}8~WcFo1PYSj+GOzNZK#gdmNZq5ti)l()yG4K3(zoinER-;dUyOX8Y
zcQTW5<k7S2c+dCFXqQ6YW^P`}O6cV^z29NR%MlN_dn7;7<G<VBVSB%BUF1GcKP@=)
z$aSZePTi@&$kVlHqltBDFQ}?BV)zq);MUEx{x5IS=KMKr)yUWN^=*qPtFI!fe8-Zj
z0`a5OZ_JUWFU&pL2*&qyg~;H;0B;>o5=A?j@uV|OLEdZM6WCDKZh3Rv8-3_o^FE3D
zkIHo7`c_<ccP$dN)pONbP6&kjeqhaIA4$!4Q_KqAbXI^R6d1gx#p6=wfL7uKxQn}N
zeWixHtNh3#-t~DSyho6=AStQCAQe3}9FM?o5Yh{kV!<cNI;{Gz-dsdpS4h0)#$JU2
zJ%xOlTe#5q*4XS#G4*q}!Bh15xAX{CYuRPjUkXHJ5z=L*YSE9szS{i=)OQQAf7yb*
zVl)PGf9m}t$a@fqQ=d6J7!(pskivX%x~@;R9Ml0c$ECX#-6CDFI#p_A1FYz{8+J=u
zGYYtMlsA(@RqeXc=Z90gfoSkE1xgvj?OZk*KbTaUW;y6%?+Hw`c{>e%au57D^Ea+4
zIm0G<S-w^@?*{8&3d8P|2-RfKSE8siFc&>9TT~&~%Qb+-_IG~_FVFT_XUkbw)Lm*Z
zft2>gntRU`rlr`s=QUh3o6yTWryJkkA<+jpSnViO@vc{)u}9kSGrJ>U6U;ukHUZjd
z%I5|UW*^Ui$k&5(97ft~3*uK-0}UKDi^Q*EHL}HboPYNIrM^V`heIYu2LRdPeUnIQ
zoHUt*OYXF-POJ3-M(4b3Z?JNMIIi~yDCYQf)h6xh_mQi*#kp~<mf8q;Mf*i*YwlYz
zrbo81pgT&8i`}cz4+9-Z!Sv!tVqIfJsdv(zqUsVlCdX@=FKLh)@ur8!t9#^=?lg#$
z)lBgI7>AFO9K)42Y=h^5gvnWnSoXku<F5l{zO99=0dz5`3EOoF{=v<A3PvSGi7hb{
z;o-6x8BS`#j$T4hv{#H=myOU0ettg9rUrFj%$s`8D9@A$_?A^JisC&@AGn}D9A|Rq
z)ALnPGA?bj3IzbW_AzCVsfmt#QZbMLg~Vms^-AurFVRqY`O{UUg8lky#8qC0Z?i_Y
z|9pJ1f7KddDM0G{-Whrn{0n5}yJ5mWz50ukfr!`$Lo+9W;%|)C9pww+*~oA==P($i
zfH5f@)8PfA2$OY}`mns(TF%tCz^5KDl&t#EkpxQ>UsI!zRb+(n*2-?$gq(zk?>%RK
za4bZsAhl!39ZvolVE}liZ=Ub|5RJD=JcFT(tqll;Z&9X-2G!k2hHOL6DP-pLYd00u
z^F*Z^@5WBACB#7IbiKRfH;0{-Poz!_>>Xo1co&h0Sk-#mjl6Vv3_v<YCT=M9NIkpU
zSNRCsfs-BbuPHwuEz2l)XPAl&6t?LOp@v^n0Je*^XUJkEgn1kK1d2+*O{r%e@EzE^
z^Qz<>4)w?OLKO;5`Gkyp3{-dP@q!Z@B|EIw+*1wJKfB{F5oWD(&h2eUhm}RAnM!z$
z*`?{K;;>M?WiJ;2_KuZ3{TwYv>l&G%#ZI}2JvJYk%%)ZfaQHolGj+W~quAHDg}XN;
zdx4PSZpG767MYKo+y?}Ehg=k$4z@fyz$ULzlfG0%j@$pLuW|*t+!seu9bP-U7>fB<
z)^8%|8AVR|_1(y9G1!fTZpjK*O6%s9eD#=>mumQ^4RCRCA!|A(dh(qt8xuK!Ss6t5
zBl756;0<x=dz41OtzFk{?Rr{NJ<%DyfexYpFfDKZ=#<aC^uCdfOxOm6m1-rrciR%N
zX{O|fDejEdMTj&s-#0n)eM*Wm;*R>P1EkZz)cAPSbKljnv~=Bk+l1eZ207xfZpldh
zQ^5Ld22>XifVb(TUrk6+>gTj4X3M>g36S6Ya&dL(m$AM9XBCw=nUgRq!q>}Ssz&iq
zXWB9C5kmgw9-K37D&8oBI9e1t28J#cX3~<*nSM-8tC?ERm0nbp1>f9a>dT@maZ|OK
zOCK6P3sAC6rS8kc=<TRtIrfGYX??0n=1Io7oNX^pPXc&GYP+D-aT;|GAKzA{r>H9P
zD$wh~M0=ABnO8MR2afhzlvZN^V4WNNZ{0@r>zm;e8?V6#lhseAOR6|-nQ1TU&Q+`3
z!}bTfj1}JZMv1$+Ar$`X^v7aJMWEnu_51mG>=F%~#REqn#i^WjRf;otN@)?Qr2JiQ
z>Pw<q&1FSfy6KbjK4IhQ(AS6aX8HJN$&cZ!?Ix$62f}rD(z4T1ioo4ST@Blh_V)YI
z+k(8EOJSV}s>xMMIo4xn+)@8HL^vrS`$nD-GXaW=Pp#uz`gH8l9tA{P)QFwd#j*og
zHt}cJw6LVX1|^HiogY`P#?Lg>5j)om<-bRz4D{mlKyuePd0{~+u1z08k6;#^q}{-i
z0qIF5(7?oWWv-?wmLZN$O=G3Fp*)N@O#z2|KDoC<dA2l3@2%_YLV-oj<4hX}8jr59
z`kkbkj(3Ke`P7m;enm0hemJ6Ixc~VcKN3$tuM)QWSps(a?hd<eJ8$*f5$4A}NJ*r6
zT1nAk9pyn=^HUUE!&`kyWF6w+G#YRK?=F*$aGBFB0=bD;PWJ<m02N72v~GHm8JG_$
z%Gfhsi&>L-^910fvd=lawJ92W;JgXIyUnCzSTjQi7q@sg+VW<hiOE&}*y@mmKTbSU
z<7z@N-t9SWUuSdm&E(R|bx9?DxhFO45IG6H2s=*BuMf?=wPie2ph!C{%590boSJ^~
zO{c{)>bHKf_kGnEV#$XLVfY!K_w=cpWtda!eET}5u+kjpnxtvhkt+;mI&pI3pJfF$
zWkHIPZd1D-XWmPgL{`^YUc2imaUeTnrX-`leg;3^dZIMf&rQ83NhH^AtORhL-1Wut
zS%#L`A8yWZ{e6q>K&mQEZT3MsB?w<$NbYfX9Xo4pP#%RVNPiS0L(M<ZzGwDZ>?zH6
zg7zFzCMGgxiQXnN7&Due;x(j$eL8$tjjCy})>|Y3nbo>|IJ8(?aAqmLu@~w=lAUyT
z`2lqyXX_9|>8Vm`m2PyR`l`5mgsPm=I>FiEs&U&8VIe+B#z^rTVZbH~)+UCs`9L>&
z6*g&c=#|UjfSF`d^UKJpUI@2?UXgmtW&d$5mUDY=RP(=P#Iv6CRJ>PoYuXH#lVzf3
z-`BK)b<w!PkkUaDy+e?k9<u_sHl<4WW(9M5gX=s6XogOvE-zVW%QAExHwxARa5_%t
zaVsw`9Xzv(UKBR8z)LET7@u0Xc;~cO$h{%Csk>ai_Z3Dw{a5<aw<IqNcnKvos;cDc
z=jKIz(OXFK$eQAfhssUG&fZywfB72GoSxyvu;avG&ITVFBOHX3bn(h_z{=kltyJeu
zBCl`o>TG%=7Dbq9-(MJ9-(CiZ$)m3O=G>eVv}%RQ`eE#?x_0gJH8geY*~!b-qZ?OW
z=K)!>anFUuo@<W1P^U9}rZxmiTeDZ`(^8{c^D-N?Vq9sOt>V#>v6&*rZPdsjlizoW
Z3h3P5iek%<XSe^J&G44Ea;#_6zX8G?>p=hj

literal 0
HcmV?d00001

diff --git a/src/assets/MRA.png b/src/assets/MRA.png
new file mode 100644
index 0000000000000000000000000000000000000000..b98d6e22961c0a2b9aea4689db0e8a7dd25a7a2f
GIT binary patch
literal 3371
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
Q+2ZeuBh`gcO7f5X7i`PE#sB~S

literal 0
HcmV?d00001

diff --git a/src/components/VehicleStatus/Connection.vue b/src/components/VehicleStatus/Connection.vue
index 741c822..d8c2b45 100644
--- a/src/components/VehicleStatus/Connection.vue
+++ b/src/components/VehicleStatus/Connection.vue
@@ -13,7 +13,7 @@
             <div v-if="latency >= 40 || latency == 0" class="grayed_bar" style='height: 80%'></div>
             <div v-else class="bar" style='height: 80%'></div>
         </div>
-        <span class="connection_number">{{ latency }} ms</span>
+        <!-- <span class="connection_number">{{ latency }} ms</span> -->
     </div>
     
     </template>
diff --git a/src/components/VehicleStatus/EmergencyStop.vue b/src/components/VehicleStatus/EmergencyStop.vue
index 639905e..1ebcae1 100644
--- a/src/components/VehicleStatus/EmergencyStop.vue
+++ b/src/components/VehicleStatus/EmergencyStop.vue
@@ -34,7 +34,8 @@
         width: 100%;
         height: 100%;
         background-color: rgb(255, 57, 57);
-        font-size: 1em;
+        font-size: 0.96em;
+        transition: background-color 0.20s;
     } 
 
     .emergency-button:hover {
diff --git a/src/components/VehicleStatus/Open.vue b/src/components/VehicleStatus/Open.vue
index c04c32b..07d7310 100644
--- a/src/components/VehicleStatus/Open.vue
+++ b/src/components/VehicleStatus/Open.vue
@@ -1,8 +1,5 @@
 <template>
-    <!-- <div class="open-button-div">
-        <button class="open-button">OPEN</button>
-    </div> -->
-    <button class="test-open-button">OPEN</button>
+    <button class="open-button">OPEN</button>
 </template>
     
 <script lang="ts">
@@ -20,31 +17,19 @@
     
     
 <style scoped>
-    .open-button-div {
-        position: relative;
-        height: 25%;
-        width: 35%;  
-    }
 
     .open-button {
         position: relative;
-        display: inline-block;
-        width: 100%;
-        height: 100%;
-        background-color: #011949;
-        font-size: 1.3em;
-    } 
-
-    .test-open-button {
-        position: relative;
-        display: inline-block;
+        display: flex;
+        justify-content: center;
         width: 30%;
         height: 20%;
         background-color: #011949;
         font-size: 1em;
+        transition: background-color 0.20s;
     } 
 
-    .test-open-button:hover {
-        background-color: #03369b;
+    .open-button:hover {
+        background-color: #194398;
     }
 </style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatus/VehicleTitle.vue b/src/components/VehicleStatus/VehicleTitle.vue
index ec9c7ab..3b67670 100644
--- a/src/components/VehicleStatus/VehicleTitle.vue
+++ b/src/components/VehicleStatus/VehicleTitle.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="vehicle-title-container">
-        <div class="vehicle-name-div"> {{ vehicleName }} </div>
-
+        <div class="vehicle-name-div"> 
+                {{ vehicleName }} 
+              <!--  <img src="../../assets/MEA.png" class="vehicle-icon"></img>--> 
+        </div>
         <div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
     </div>
     
@@ -28,22 +30,26 @@
         padding-left: 6%;
     }
 
+    /* .vehicle-name-div {
+        position: relative;
+        font-size: 2.3em;
+    } */
+
     .vehicle-name-div {
         position: relative;
+        display: flex;
         font-size: 2.3em;
     }
 
     .vehicle-status-div {
         position: relative;
-        font-size: 1.6em;  
+        font-size: 1.4em;  
         margin-top: 5%;
     }
 
     .vehicle-icon {
         position: relative;
-        width: 12%;
-        height: 12%;
-        /* vertical-align: middle; */
+        width: 22%;
     }
 
 </style> 
\ No newline at end of file
diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
index 2446fc2..0888c9f 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@@ -31,10 +31,15 @@
         <!-- Left side of container (Name, Status, Battery, Connection)-->
         <div class="left-container">
             <VehicleTitle :vehicleName="vehicleName" :vehicleStatus="vehicleStatus"/>
-            <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
+            <!-- <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/> -->
+            <div class="battery-status-container">
+                <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
+                <span style="margin-top: 4%; font-size: 1.4em;">{{ batteryPct }}%</span>
+            </div>
             <Connection :latency="latency" class="adjust-connection"/> 
         </div>
 
+        <!-- Right side of container (Open button, Coordinates, Emergency Stop)-->
         <div class="right-container">
             <Open class="adjust-open-button"></Open>
             <Coordinate :coordinates="coordinates" class="adjust-coordinates"></Coordinate>
@@ -48,7 +53,7 @@
     .status_container {
         display: flex;
         position: relative;
-        height: 200px;
+        height: 100%;
 
         /* width: 25%;  */
         width: 100%; 
@@ -58,12 +63,21 @@
         color: black;
     }
 
+    .battery-status-container {
+        display: flex;
+        position: relative;
+        width: 100%; 
+        height: 20%;
+        gap: 6%;
+        margin-top: auto;
+    }
+
     .left-container {
         position: relative;
         display: flex;
         flex-direction: column;
         height: 100%;
-        width: 40%;
+        width: 37%;
     }
 
     .right-container {
@@ -71,14 +85,21 @@
         display: flex;
         flex-direction: column;
         height: 100%;   
-        width: 60%; 
+        width: 63%; 
     }
 
-    .adjust-battery {
+/* below is CSS adjustment for battery by itself */
+    /* .adjust-battery {
         height: 17%;
-        width: 34.5%;
+        width: 36%;
         margin-top: auto;
         margin-left: 8%;
+    } */
+
+    .adjust-battery {
+        height: 84%;
+        width: 38%;
+        margin-left: 8%;
     }
 
     .adjust-connection {
diff --git a/src/main.ts b/src/main.ts
index c33641e..f332915 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 yuh from "./views/testMapScreen.vue"
 
-createApp(App).use(router).mount("#app");
+createApp(yuh).use(router).mount("#app");
diff --git a/src/views/testMapScreen.vue b/src/views/testMapScreen.vue
index 9f888cd..ad8487c 100644
--- a/src/views/testMapScreen.vue
+++ b/src/views/testMapScreen.vue
@@ -7,16 +7,22 @@ let testCoordinateObject = {
         longitude: -177.9325790,
         latitude: 33.9325790
     }
+let testCoordinateObject2 = {
+    longitude: 40.748440,
+    latitude: -73.984559
+}
 
 </script>
 <template>
   <NavBar></NavBar>
   <div class="screen_div">
+    <!-- Map component will be placed below -->
     <div class="map_div"></div>
+
     <div class="status_rightside">
-        <Status :batteryPct=100 :latency=54 :coordinates="testCoordinateObject" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
+        <Status :batteryPct=100 :latency=50 :coordinates="testCoordinateObject2" :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=0 :latency=97 :coordinates="testCoordinateObject2" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
         <Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
 
     </div>
@@ -41,7 +47,7 @@ let testCoordinateObject = {
     flex-direction: column;
     border: 0.003em solid black;
     height: 100%;
-    width: 25%;
+    width: 23%;
     margin-left: auto
 }
 

From d8146584d6a41d3b782f8d8b30d38b8405bcb35d Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sun, 31 Mar 2024 00:40:23 -0700
Subject: [PATCH 6/8] added text for Connection section of vehicle status.
 changed viewpoint height of testMapScreen

---
 src/components/VehicleStatusComponent.vue | 38 +++++++++++++++++++++--
 src/views/testMapScreen.vue               |  2 +-
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
index 0888c9f..da9f95d 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@@ -36,7 +36,14 @@
                 <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
                 <span style="margin-top: 4%; font-size: 1.4em;">{{ batteryPct }}%</span>
             </div>
-            <Connection :latency="latency" class="adjust-connection"/> 
+            <!-- <Connection :latency="latency" class="adjust-connection"/>  -->
+            <div class="connection-status-container">
+                <Connection :latency="latency" class="adjust-connection"/> 
+                <div class="connection-status-specifics">
+                    <span style="font-size: 0.9em;">Connection: </span>
+                    <span style="font-size: 0.9em;">Last Packet: </span>
+                </div>
+            </div>
         </div>
 
         <!-- Right side of container (Open button, Coordinates, Emergency Stop)-->
@@ -72,6 +79,22 @@
         margin-top: auto;
     }
 
+    .connection-status-container {
+        display: flex;
+        position: relative;
+        width: 100%; 
+        height: 30%;
+        /* margin-bottom: 2%;  
+        margin-left: 10%;  */
+    }
+
+    .connection-status-specifics {
+        display: flex;
+        flex-direction: column;
+        padding-left: 5%;
+        padding-top: 5%;
+    }
+
     .left-container {
         position: relative;
         display: flex;
@@ -88,7 +111,9 @@
         width: 63%; 
     }
 
-/* below is CSS adjustment for battery by itself */
+/* --- These adjust the sizing and positions of the individual components --- */
+
+/* below is CSS adjustment for Battery component if it was by itself */
     /* .adjust-battery {
         height: 17%;
         width: 36%;
@@ -102,12 +127,19 @@
         margin-left: 8%;
     }
 
-    .adjust-connection {
+/* below is CSS adjustment for the Connection component if it was by itself */
+    /* .adjust-connection {
         height: 28%;
         width: 26%; 
         margin-top: 2%;
         margin-bottom: 4%;  
         margin-left: 10%; 
+    } */
+
+    .adjust-connection {
+        height: 90%;
+        width: 26%; 
+        padding-left: 10%;
     }
 
     .adjust-emergency-button {
diff --git a/src/views/testMapScreen.vue b/src/views/testMapScreen.vue
index ad8487c..444b9cb 100644
--- a/src/views/testMapScreen.vue
+++ b/src/views/testMapScreen.vue
@@ -38,7 +38,7 @@ let testCoordinateObject2 = {
 .screen_div {
     display: flex;
     border: 0.003em solid black;
-    height: 85vh;
+    height: 88vh;
     width: 99vw;
 }
 

From ddf806ec353900eda06fddadc6de494490a0b033 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Sun, 31 Mar 2024 00:46:29 -0700
Subject: [PATCH 7/8] changed main.ts back to normal

---
 src/main.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index f332915..bb86d75 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,6 +2,5 @@ import { createApp } from "vue";
 import "./styles.css";
 import App from "./App.vue";
 import router from "./router";
-import yuh from "./views/testMapScreen.vue"
 
-createApp(yuh).use(router).mount("#app");
+createApp(App).use(router).mount("#app");
\ No newline at end of file

From 4bb10cecc4da776c12ce3ffdbcc8458902d0d566 Mon Sep 17 00:00:00 2001
From: chillwafflez <ju5t1n.nguy3n284@gmail.com>
Date: Tue, 2 Apr 2024 23:08:42 -0700
Subject: [PATCH 8/8] put VehicleStatus component onto Static/Map screen.
 Readjusted CSS of components within the VehicleStatusComponent

---
 package-lock.json                             |  1 -
 src/components/VehicleStatus/Coordinate.vue   |  3 +-
 .../VehicleStatus/EmergencyStop.vue           |  8 +-
 src/components/VehicleStatus/Open.vue         |  9 +--
 src/components/VehicleStatusComponent.vue     | 81 +++++++------------
 src/views/StaticScreen.vue                    | 48 ++++++++++-
 6 files changed, 79 insertions(+), 71 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e0367c0..62f5b61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
         "@tauri-apps/api": "^1.4.0",
         "vue": "^3.2.45",
         "vue-router": "^4.3.0"
-
       },
       "devDependencies": {
         "@tauri-apps/cli": "^1.4.0",
diff --git a/src/components/VehicleStatus/Coordinate.vue b/src/components/VehicleStatus/Coordinate.vue
index 3a2efa2..c161413 100644
--- a/src/components/VehicleStatus/Coordinate.vue
+++ b/src/components/VehicleStatus/Coordinate.vue
@@ -22,8 +22,7 @@
         position: relative;
         display: flex;
         flex-direction: column;
-        width: 75%;
-        /* border: 0.05em solid black; */
+        width: 92%;
     }
 
     .coordinate-div {
diff --git a/src/components/VehicleStatus/EmergencyStop.vue b/src/components/VehicleStatus/EmergencyStop.vue
index 1ebcae1..977f3c8 100644
--- a/src/components/VehicleStatus/EmergencyStop.vue
+++ b/src/components/VehicleStatus/EmergencyStop.vue
@@ -10,11 +10,7 @@
     export default {
         data() {
             return {};    
-        },
-        // props: {
-        // },
-        // computed: {
-        // }
+        }
     };
 </script>
     
@@ -24,7 +20,7 @@
         position: relative;
         display: flex;
         height: 20%;
-        width: 70%;  
+        width: 78%;  
         text-align: center;
     }
 
diff --git a/src/components/VehicleStatus/Open.vue b/src/components/VehicleStatus/Open.vue
index 07d7310..5695b2f 100644
--- a/src/components/VehicleStatus/Open.vue
+++ b/src/components/VehicleStatus/Open.vue
@@ -7,23 +7,18 @@
     export default {
         data() {
             return {};    
-        },
-        // props: {
-        // },
-        // computed: {
-        // }
+        }
     };
 </script>
     
     
 <style scoped>
-
     .open-button {
         position: relative;
         display: flex;
         justify-content: center;
         width: 30%;
-        height: 20%;
+        height: 18%;
         background-color: #011949;
         font-size: 1em;
         transition: background-color 0.20s;
diff --git a/src/components/VehicleStatusComponent.vue b/src/components/VehicleStatusComponent.vue
index da9f95d..4c2174c 100644
--- a/src/components/VehicleStatusComponent.vue
+++ b/src/components/VehicleStatusComponent.vue
@@ -31,17 +31,15 @@
         <!-- Left side of container (Name, Status, Battery, Connection)-->
         <div class="left-container">
             <VehicleTitle :vehicleName="vehicleName" :vehicleStatus="vehicleStatus"/>
-            <!-- <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/> -->
             <div class="battery-status-container">
                 <Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
                 <span style="margin-top: 4%; font-size: 1.4em;">{{ batteryPct }}%</span>
             </div>
-            <!-- <Connection :latency="latency" class="adjust-connection"/>  -->
             <div class="connection-status-container">
                 <Connection :latency="latency" class="adjust-connection"/> 
                 <div class="connection-status-specifics">
-                    <span style="font-size: 0.9em;">Connection: </span>
-                    <span style="font-size: 0.9em;">Last Packet: </span>
+                    <span style="font-size: 0.9em;">Connection:</span>
+                    <span style="font-size: 0.9em;">Last Packet: {{ latency }} </span>
                 </div>
             </div>
         </div>
@@ -61,15 +59,29 @@
         display: flex;
         position: relative;
         height: 100%;
-
         /* width: 25%;  */
         width: 100%; 
-
         border: 0.1em solid black;
         background-color: white;
         color: black;
     }
 
+    .left-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 46%;
+    }
+
+    .right-container {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        height: 100%;   
+        width: 54%; 
+    }
+
     .battery-status-container {
         display: flex;
         position: relative;
@@ -84,78 +96,43 @@
         position: relative;
         width: 100%; 
         height: 30%;
-        /* margin-bottom: 2%;  
-        margin-left: 10%;  */
+        margin-bottom: 2%;  
+      /*  margin-left: 10%;  */
     }
 
     .connection-status-specifics {
         display: flex;
         flex-direction: column;
-        padding-left: 5%;
-        padding-top: 5%;
+        padding-left: 3%;
+        padding-top: 6%;
     }
 
-    .left-container {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        width: 37%;
-    }
-
-    .right-container {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        height: 100%;   
-        width: 63%; 
-    }
-
-/* --- These adjust the sizing and positions of the individual components --- */
-
-/* below is CSS adjustment for Battery component if it was by itself */
-    /* .adjust-battery {
-        height: 17%;
-        width: 36%;
-        margin-top: auto;
-        margin-left: 8%;
-    } */
-
     .adjust-battery {
         height: 84%;
-        width: 38%;
+        width: 34%;
         margin-left: 8%;
     }
 
-/* below is CSS adjustment for the Connection component if it was by itself */
-    /* .adjust-connection {
-        height: 28%;
-        width: 26%; 
-        margin-top: 2%;
-        margin-bottom: 4%;  
-        margin-left: 10%; 
-    } */
-
     .adjust-connection {
-        height: 90%;
+        height: 92%;
         width: 26%; 
         padding-left: 10%;
     }
 
     .adjust-emergency-button {
         margin-top: auto;
-        margin-bottom: 4%;  
-        margin-left: 20%;
+        margin-bottom: 5%;  
+        margin-left: 10%;
     }
 
     .adjust-open-button {
         margin-top: 4%;
-        margin-left: 60%;
+        margin-left: 58%;
     }
 
     .adjust-coordinates {
-        margin-top: 10%;
-        margin-left: 20%;   
+        margin-top: 18%;
+        margin-left: 8%;   
     }
  
 </style> 
\ No newline at end of file
diff --git a/src/views/StaticScreen.vue b/src/views/StaticScreen.vue
index 67a7436..c55bdc1 100644
--- a/src/views/StaticScreen.vue
+++ b/src/views/StaticScreen.vue
@@ -1,12 +1,35 @@
 <script setup lang="ts">
-
 import Camera from "../components/Camera.vue";
+import Status from '../components/VehicleStatusComponent.vue';
+import NavBar from '../components/Navbar.vue';
+
+let testCoordinateObject = {
+        longitude: -177.9325790,
+        latitude: 33.9325790
+    }
+let testCoordinateObject2 = {
+    longitude: 40.748440,
+    latitude: -73.984559
+}
 </script>
 
 <template>
-    <div class="camera-container">
-       this is static screen
+  <div class="screen_div">
+    <!-- Map component will be placed below -->
+    <div class="map_div"></div>
+
+    <div class="four-status-rightside">
+        <!-- For final product, pass in a Vehicle Object instead that contains all of the information for the VehicleStatusComponent to display-->
+        <Status :batteryPct=100 :latency=50 :coordinates="testCoordinateObject2" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
+        <Status :batteryPct=48 :latency=30 :coordinates="testCoordinateObject" :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
+        <Status :batteryPct=0 :latency=100 :coordinates="testCoordinateObject2" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
+        <Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
     </div>
+  </div>
+
+    <!-- <div class="camera-container">
+       this is static screen
+    </div> -->
 </template>
   
 <style scoped>
@@ -17,4 +40,23 @@ import Camera from "../components/Camera.vue";
     justify-content: center; /* Center the child element horizontally */
     align-items: center; /* Center the child element vertically */
 }
+
+.screen_div {
+    display: flex;
+    border: 0.003em solid black;
+    height: 89vh;
+    width: 99vw;
+}
+
+.four-status-rightside {
+    display: flex;
+    flex-direction: column;
+    border: 0.003em solid black;
+    height: 100%;
+    width: 23%;
+    margin-left: auto
+}
+
+.map_div {
+}
 </style>
\ No newline at end of file