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

@@ -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%;
     }
 

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> 

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> 

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> 

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>
 

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>