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

added Coordinate component to display coordinate in Vehicle Status component

This commit is contained in:
chillwafflez 2024-03-23 00:38:44 -07:00
parent 294ffead44
commit 1cf724e933
5 changed files with 111 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/VehicleStatus/Coordinate.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<div class="coordinate-container">
<div class="coordinate-div">Longitude: {{ coordinates.longitude }}</div>
<div class="coordinate-div">Latitude: {{ coordinates.latitude }}</div>
</div>
</template>
<script lang="ts">
export default {
props: {
coordinates: { required: true, type: Object }
},
computed: {
}
};
</script>
<style scoped>
.coordinate-container {
position: relative;
display: flex;
flex-direction: column;
width: 75%;
/* border: 0.05em solid black; */
}
.coordinate-div {
position: relative;
padding: 1%;
font-size: 1.2em;
color: black;
width: 100%;
}
</style>

19
src/components/VehicleStatusComponent.vue
View File

@ -4,25 +4,24 @@
import VehicleTitle from './VehicleStatus/VehicleTitle.vue';
import EmergencyStop from './VehicleStatus/EmergencyStop.vue';
import Open from './VehicleStatus/Open.vue';
import Coordinate from './VehicleStatus/Coordinate.vue';
export default {
props: {
vehicleName: { required: true, type: String},
vehicleStatus: { required: true, type: String},
batteryPct: {required: true, type: Number},
latency: { required: true, type: Number },
coordinates: { required: true, type: Object }
},
components: {
VehicleTitle,
Battery,
Connection,
EmergencyStop,
Open
Open,
Coordinate
},
// computed: {
// batteryPercentage(): number {
// return this.batteryPct;
// }
// },
};
</script>
@ -33,11 +32,12 @@
<div class="left-container">
<VehicleTitle :vehicleName="vehicleName" :vehicleStatus="vehicleStatus"/>
<Battery :percentage = "batteryPct" :charging="false" class="adjust-battery"/>
<Connection :latency=65 class="adjust-connection"/>
<Connection :latency="latency" class="adjust-connection"/>
</div>
<div class="right-container">
<Open class="adjust-open-button"></Open>
<Coordinate :coordinates="coordinates" class="adjust-coordinates"></Coordinate>
<EmergencyStop class="adjust-emergency-button"/>
</div>
</div>
@ -99,5 +99,10 @@
margin-top: 4%;
margin-left: 60%;
}
.adjust-coordinates {
margin-top: 10%;
margin-left: 20%;
}
</style>

26
src/testDisplayComponents.vue
View File

@ -5,29 +5,21 @@ 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"
import Coordinate from './components/VehicleStatus/Coordinate.vue'
let testObject = {
longitude: -177.9325790,
latitude: 33.9325790
}
</script>
<template>
<Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/>
<!-- <yuh :vehicleName="'ERU'" :vehicleStatus="'Standby'"></yuh> -->
<!-- <Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/> -->
<!-- <h2>Below is the Connection component</h2>
<div class="border_div">
<Connection :latency=100 />
</div> -->
<Coordinate :coordinates="testObject"></Coordinate>
<!-- <h2>Below is the Battery component</h2>
<div class="border_div">
<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>
<div class="border_div_2">
<Battery :percentage=12 :charging="false" class="additional_battery_prop"/>
<Connection :latency=56 />
</div> -->
</template>
<style scoped>

52
src/testMapScreen.vue
View File

@ -1,52 +0,0 @@
<!-- <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>

52
src/views/testMapScreen.vue Normal file
View File

@ -0,0 +1,52 @@
<!-- <script setup> -->
<script setup>
import Status from '../components/VehicleStatusComponent.vue';
import NavBar from '../components/Navbar.vue';
let testCoordinateObject = {
longitude: -177.9325790,
latitude: 33.9325790
}
</script>
<template>
<NavBar></NavBar>
<div class="screen_div">
<div class="map_div"></div>
<div class="status_rightside">
<Status :batteryPct=100 :latency=54 :coordinates="testCoordinateObject" :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
<Status :batteryPct=48 :latency=30 :coordinates="testCoordinateObject" :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
<Status :batteryPct=0 :latency=97 :coordinates="testCoordinateObject" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
<Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject" :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>