Added Connection component, moved Battery and Connection to VehicleStatus folder

src/components/VehicleStatus/Battery.vue

@@ -5,7 +5,7 @@
             <div :class="percentageCSS" :style="[percentage > 15 ? { width: percentage + '%' } : { width: '15%'}]"></div>
         </div>
         <div class="battery_widget"></div> 
-        <img class="lightingSymbol" :class="batteryStatus" src="..\assets\lightning-icon-png-5.png" >
+        <img class="lightingSymbol" :class="batteryStatus" src="..\..\assets\lightning-icon-png-5.png" >
     </div>
     
 </template>

src/components/VehicleStatus/Connection.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="outer_div">
+        <div class="container">
+            <div v-if="latency == 0" class="grayed_bar" style='height: 20%'></div>
+            <div v-else class="bar" style='height: 20%'></div>
+
+            <div v-if="latency <= 30" class="grayed_bar" style='height: 40%'></div>
+            <div v-else class="bar" style='height: 40%'></div>
+
+            <div v-if="latency <= 50" class="grayed_bar" style='height: 60%'></div>
+            <div v-else class="bar" style='height: 60%'></div>
+
+            <div v-if="latency <= 70" class="grayed_bar" style='height: 80%'></div>
+            <div v-else class="bar" style='height: 80%'></div>
+        </div>
+        <span class="connection_number">{{ latency }} ms</span>
+    </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%;  
+    }
+    .container {
+        position: relative;
+        justify-content: center;
+        display: flex;
+        gap: 0.1em;
+        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: 120%;
+    }
+    
+</style> 

src/testDisplayComponents.vue

@@ -1,18 +1,20 @@
-<script setup>
+<!-- Using this to see how the Battery and Connection components look -->
-import Battery from './components/Battery.vue';
 
+<script setup>
+import Battery from './components/VehicleStatus/Battery.vue';
+import Connection from './components/VehicleStatus/Connection.vue';
 </script>
 
 <template>
   <h2>Below is the Connection component</h2>
-  <!-- <div class="bruh">
+  <div class="border_div">
-    <Connection :latency=20 />
+    <Connection :latency=100 />                    <!-- pass in latency into latency prop !-->
-  </div> -->
+  </div>
 
 
   <h2>Below is the Battery component</h2>
   <div class="border_div">
-    <Battery :percentage=10 :charging="false"/>
+    <Battery :percentage=6 :charging="false"/>    <!-- pass in the current percentage into percentage prop. charging is a boolean !-->
   </div>
 
 </template>