created initial layout for vehicle status component. contains name, status, battery, and connection. created a test basic map layout to display vehicle status components
This commit is contained in:
chillwafflez
parent
b644c718f0
commit
2d8f27cf7a
|
|
@ -106,7 +106,7 @@
|
|||
}
|
||||
|
||||
#battery_progress {
|
||||
background-color: rgb(116, 194, 92);
|
||||
background-color: rgb(83, 255, 83);
|
||||
border-radius: 12%;
|
||||
height:100%;
|
||||
width: 100%;
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
height:100%;
|
||||
}
|
||||
.normalPercent {
|
||||
background-color: rgb(116, 194, 92);
|
||||
background-color: rgb(87, 255, 87);
|
||||
border-radius: 12%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,63 @@
|
|||
<template>
|
||||
<div class="outer_div">
|
||||
|
||||
</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%;
|
||||
}
|
||||
.connection-container {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
gap: 0.05em;
|
||||
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: 180%;
|
||||
font-size:0.8em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="vehicle-title-container">
|
||||
<div class="vehicle-name-div"> {{ vehicleName }}</div>
|
||||
<div class="vehicle-status-div">Status: {{ vehicleStatus }}</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
export default {
|
||||
props: {
|
||||
vehicleName: { required: true, type: String },
|
||||
vehicleStatus: { required: true, type: String }
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
.vehicle-title-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 8%;
|
||||
padding-left: 6%;
|
||||
}
|
||||
|
||||
.vehicle-name-div {
|
||||
position: relative;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.vehicle-status-div {
|
||||
position: relative;
|
||||
font-size: 1.5em;
|
||||
margin-top: 5%;;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<script lang="ts">
|
||||
import Battery from './VehicleStatus/Battery.vue';
|
||||
import Connection from './VehicleStatus/Connection.vue';
|
||||
import VehicleTitle from './VehicleStatus/VehicleTitle.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
vehicleName: { required: true, type: String},
|
||||
vehicleStatus: { required: true, type: String},
|
||||
batteryPct: {required: true, type: Number},
|
||||
},
|
||||
components: {
|
||||
VehicleTitle,
|
||||
Battery,
|
||||
Connection
|
||||
},
|
||||
// computed: {
|
||||
// batteryPercentage(): number {
|
||||
// return this.batteryPct;
|
||||
// }
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="status_container">
|
||||
|
||||
<!-- 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"/>
|
||||
<Connection :latency=65 class="adjust-connection"/>
|
||||
</div>
|
||||
|
||||
<div class="right-container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.status_container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 200px;
|
||||
|
||||
/* 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: 40%;
|
||||
}
|
||||
|
||||
.right-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.adjust-battery {
|
||||
height: 19%;
|
||||
width: 36%;
|
||||
margin-top: auto;
|
||||
margin-left: 8%;
|
||||
}
|
||||
|
||||
.adjust-connection {
|
||||
height: 30%;
|
||||
width: 28%;
|
||||
margin-top: 1%;
|
||||
margin-bottom: 4%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -3,9 +3,14 @@
|
|||
<script setup>
|
||||
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"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Status :batteryPct=48 :vehicleName="'ERU'" :vehicleStatus="'Offline'"/>
|
||||
<!-- <yuh :vehicleName="'ERU'" :vehicleStatus="'Standby'"></yuh> -->
|
||||
|
||||
<!-- <h2>Below is the Connection component</h2>
|
||||
<div class="border_div">
|
||||
<Connection :latency=100 />
|
||||
|
|
@ -17,11 +22,11 @@ import Connection from './components/VehicleStatus/Connection.vue';
|
|||
<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>
|
||||
<!-- <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>
|
||||
</div> -->
|
||||
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
<!-- <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>
|
||||
Loading…
Reference in New Issue