priyatham
/
gcs-user-interface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
chillwafflez 2024-04-02 23:08:42 -07:00
parent e010b32e90
commit 4bb10cecc4
6 changed files with 79 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json generated
View File

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

3
src/components/VehicleStatus/Coordinate.vue
View File

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

8
src/components/VehicleStatus/EmergencyStop.vue
View File

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

9
src/components/VehicleStatus/Open.vue
View File

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

81
src/components/VehicleStatusComponent.vue
View File

@ -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>

48
src/views/StaticScreen.vue
View File

@ -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>