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