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

fixed latency ranges for connection component

This commit is contained in:
chillwafflez 2024-03-05 12:53:41 -08:00
parent 9ed4c32061
commit 3b8e866e74
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/VehicleStatus/Connection.vue
View File

@ -4,13 +4,13 @@
<div v-if="latency == 0" class="grayed_bar" style='height: 20%'></div> <div v-if="latency == 0" class="grayed_bar" style='height: 20%'></div>
<div v-else class="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-if="latency >= 70 || latency == 0" class="grayed_bar" style='height: 40%'></div>
<div v-else class="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-if="latency >= 60 || latency == 0" class="grayed_bar" style='height: 60%'></div>
<div v-else class="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-if="latency >= 40 || latency == 0" class="grayed_bar" style='height: 80%'></div>
<div v-else class="bar" style='height: 80%'></div> <div v-else class="bar" style='height: 80%'></div>
</div> </div>
<span class="connection_number">{{ latency }} ms</span> <span class="connection_number">{{ latency }} ms</span>

4
src/testDisplayComponents.vue
View File

@ -8,13 +8,13 @@ import Connection from './components/VehicleStatus/Connection.vue';
<template> <template>
<h2>Below is the Connection component</h2> <h2>Below is the Connection component</h2>
<div class="border_div"> <div class="border_div">
<Connection :latency=100 /> <!-- pass in latency into latency prop !--> <Connection :latency=56 /> <!-- pass in latency into latency prop !-->
</div> </div>
<h2>Below is the Battery component</h2> <h2>Below is the Battery component</h2>
<div class="border_div"> <div class="border_div">
<Battery :percentage=6 :charging="false"/> <!-- pass in the current percentage into percentage prop. charging is a boolean !--> <Battery :percentage=12 :charging="false"/> <!-- pass in the current percentage into percentage prop. charging is a boolean !-->
</div> </div>
</template> </template>