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

Added Connection component, moved Battery and Connection to VehicleStatus folder

This commit is contained in:
chillwafflez 2024-03-05 01:32:15 -08:00
parent 14f35907e2
commit 5c7e9d23bd
3 changed files with 84 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Battery.vue → src/components/VehicleStatus/Battery.vue
View File

@ -5,7 +5,7 @@
<div :class="percentageCSS" :style="[percentage > 15 ? { width: percentage + '%' } : { width: '15%'}]"></div>
</div>
<div class="battery_widget"></div>
<img class="lightingSymbol" :class="batteryStatus" src="..\assets\lightning-icon-png-5.png" >
<img class="lightingSymbol" :class="batteryStatus" src="..\..\assets\lightning-icon-png-5.png" >
</div>
</template>

75
src/components/VehicleStatus/Connection.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div class="outer_div">
<div class="container">
<div v-if="latency == 0" class="grayed_bar" style='height: 20%'></div>
<div v-else class="bar" style='height: 20%'></div>
<div v-if="latency <= 30" class="grayed_bar" style='height: 40%'></div>
<div v-else class="bar" style='height: 40%'></div>
<div v-if="latency <= 50" class="grayed_bar" style='height: 60%'></div>
<div v-else class="bar" style='height: 60%'></div>
<div v-if="latency <= 70" class="grayed_bar" style='height: 80%'></div>
<div v-else class="bar" style='height: 80%'></div>
</div>
<span class="connection_number">{{ latency }} ms</span>
</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%;
}
.container {
position: relative;
justify-content: center;
display: flex;
gap: 0.1em;
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: 120%;
}
</style>

14
src/testDisplayComponents.vue
View File

@ -1,18 +1,20 @@
<script setup>
import Battery from './components/Battery.vue';
<!-- Using this to see how the Battery and Connection components look -->
<script setup>
import Battery from './components/VehicleStatus/Battery.vue';
import Connection from './components/VehicleStatus/Connection.vue';
</script>
<template>
<h2>Below is the Connection component</h2>
<!-- <div class="bruh">
<Connection :latency=20 />
</div> -->
<div class="border_div">
<Connection :latency=100 /> <!-- pass in latency into latency prop !-->
</div>
<h2>Below is the Battery component</h2>
<div class="border_div">
<Battery :percentage=10 :charging="false"/>
<Battery :percentage=6 :charging="false"/> <!-- pass in the current percentage into percentage prop. charging is a boolean !-->
</div>
</template>