From aca1aeead47912b3b50577e4120bdab72a08a836 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 30 Mar 2025 16:18:44 +0200
Subject: [PATCH] [UI] Show battery level on PointInfo component
---
frontend/src/components/PointInfo.vue | 67 +++++++++++++++++++++++++++
1 file changed, 67 insertions(+)
diff --git a/frontend/src/components/PointInfo.vue b/frontend/src/components/PointInfo.vue
index 37928e6..7dc5ca2 100644
--- a/frontend/src/components/PointInfo.vue
+++ b/frontend/src/components/PointInfo.vue
@@ -55,6 +55,11 @@
{{ device.name }}
</p>
+ <p class="battery" :style="{ color: batteryColor }" v-if="point.battery">
+ <font-awesome-icon :icon="batteryIconClass" />
+ <span>{{ point.battery }}%</span>
+ </p>
+
<p class="locality" v-if="point.locality">{{ point.locality }}</p>
<p class="postal-code" v-if="point.postalCode">{{ point.postalCode }}</p>
<p class="country" v-if="country">
@@ -105,6 +110,58 @@ export default {
},
computed: {
+ batteryColor() {
+ if (!this.point?.battery) {
+ return null;
+ }
+
+ if (this.point.battery > 75) {
+ return 'green';
+ }
+
+ if (this.point.battery > 66) {
+ return '#7DFF2F';
+ }
+
+ if (this.point.battery > 50) {
+ return '#D7D700';
+ }
+
+ if (this.point.battery > 25) {
+ return 'orange';
+ }
+
+ if (this.point.battery > 15) {
+ return '#FF4500';
+ }
+
+ return 'red';
+ },
+
+ batteryIconClass() {
+ if (!this.point?.battery) {
+ return null;
+ }
+
+ if (this.point.battery > 75) {
+ return 'fas fa-battery-full';
+ }
+
+ if (this.point.battery > 50) {
+ return 'fas fa-battery-three-quarters';
+ }
+
+ if (this.point.battery > 25) {
+ return 'fas fa-battery-half';
+ }
+
+ if (this.point.battery > 15) {
+ return 'fas fa-battery-quarter';
+ }
+
+ return 'fas fa-battery-empty';
+ },
+
country() {
const cc = this.point?.country as string | undefined
if (cc?.length) {
@@ -286,6 +343,16 @@ export default {
letter-spacing: 0.05em;
}
+ .battery {
+ display: flex;
+ align-items: center;
+ font-weight: bold;
+
+ span {
+ margin-left: 0.25em;
+ }
+ }
+
.timestamp {
color: var(--color-heading);
font-weight: bold;