put VehicleStatus component onto Static/Map screen. Readjusted CSS of components within the VehicleStatusComponent

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",

src/components/VehicleStatus/Coordinate.vue

@@ -22,8 +22,7 @@
         position: relative;
         display: flex;
         flex-direction: column;
-        width: 75%;
+        width: 92%;
-        /* border: 0.05em solid black; */
     }
 
     .coordinate-div {

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

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;

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;">Connection:</span>
-                    <span style="font-size: 0.9em;">Last Packet: </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-bottom: 2%;  
-        margin-left: 10%;  */
+      /*  margin-left: 10%;  */
     }
 
     .connection-status-specifics {
         display: flex;
         flex-direction: column;
-        padding-left: 5%;
+        padding-left: 3%;
-        padding-top: 5%;
+        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-bottom: 5%;  
-        margin-left: 20%;
+        margin-left: 10%;
     }
 
     .adjust-open-button {
         margin-top: 4%;
-        margin-left: 60%;
+        margin-left: 58%;
     }
 
     .adjust-coordinates {
-        margin-top: 10%;
+        margin-top: 18%;
-        margin-left: 20%;   
+        margin-left: 8%;   
     }
  
 </style> 

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">
+  <div class="screen_div">
-       this is static screen
+    <!-- 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>