From 8ad402234af4f1ba0bdb3f725a51a09e6c2349cd Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 15 Mar 2024 16:09:04 +0100
Subject: [PATCH] Mobile UI: add active loadpoint indicator (#12973)

---
 assets/js/components/Loadpoints.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/assets/js/components/Loadpoints.vue b/assets/js/components/Loadpoints.vue
index 168c754a6f..5fd999b7be 100644
--- a/assets/js/components/Loadpoints.vue
+++ b/assets/js/components/Loadpoints.vue
@@ -32,7 +32,15 @@
 				:class="{ 'indicator--selected': selected(index) }"
 				@click="scrollTo(index)"
 			>
-				<shopicon-filled-circle class="indicator-icon"></shopicon-filled-circle>
+				<shopicon-filled-lightning
+					v-if="isCharging(loadpoint)"
+					class="indicator-icon"
+				></shopicon-filled-lightning>
+				<shopicon-filled-circle
+					v-else-if="loadpoint.connected"
+					class="indicator-icon"
+				></shopicon-filled-circle>
+				<shopicon-bold-circle v-else class="indicator-icon"></shopicon-bold-circle>
 			</button>
 		</div>
 	</div>
@@ -40,6 +48,8 @@
 
 <script>
 import "@h2d2/shopicons/es/filled/circle";
+import "@h2d2/shopicons/es/bold/circle";
+import "@h2d2/shopicons/es/filled/lightning";
 
 import Loadpoint from "./Loadpoint.vue";
 
@@ -73,6 +83,9 @@ export default {
 			const { offsetWidth } = this.$refs.carousel.children[0];
 			this.selectedIndex = Math.round((scrollLeft - 7.5) / offsetWidth);
 		},
+		isCharging(lp) {
+			return lp.charging && lp.chargePower > 0;
+		},
 		selected(index) {
 			return this.selectedIndex === index;
 		},