From 019c28db855a854f536703dc10701b0202cd2d24 Mon Sep 17 00:00:00 2001
From: tajniak81 <13187254+tajniak81@users.noreply.github.com>
Date: Tue, 1 Sep 2026 13:01:09 +0200
Subject: [PATCH] The card is about the charger you picked, not all of them
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Charger information stacked every imported charger, so the list beside it
selected one and the card ignored the choice — with two chargers the page
said everything twice and the picking meant nothing. It now shows the
selected one alone, and falls back to the first until something is picked:
a card that stays blank until clicked is a worse greeting than the charger
most people have only one of.

The per-block ring goes with it. Highlighting the selection inside a card
that shows nothing else is a distinction without a second thing to draw.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 Web App/web/src/views/Charging.vue | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/Web App/web/src/views/Charging.vue b/Web App/web/src/views/Charging.vue
index f645971..bdc4689 100644
--- a/Web App/web/src/views/Charging.vue	
+++ b/Web App/web/src/views/Charging.vue	
@@ -218,6 +218,14 @@ async function loadHomeChargers() {
   }
 }
 
+// The card shows one charger: whichever is picked in the list beside it. Until
+// something is picked that is the first one — a card that says nothing until
+// clicked would be a worse first impression than the charger most people have
+// only one of.
+const selectedHomeCharger = computed(
+  () => homeChargers.value.find((c) => c.id === selected.value) || homeChargers.value[0] || null
+);
+
 // A charger picked here becomes the one the control card drives.
 function selectHomeCharger(c) {
   selected.value = c.id;
@@ -606,30 +614,26 @@ onMounted(async () => {
             </button>
           </div>
 
-          <div
-            v-for="c in homeChargers"
-            :key="c.id"
-            class="mt-3 rounded-control bg-sunken p-3"
-            :class="selected === c.id ? 'ring-2 ring-accent' : ''"
-          >
+          <!-- The charger picked in the list beside this card, and only it. -->
+          <div v-if="selectedHomeCharger" class="mt-3 rounded-control bg-sunken p-3">
             <div class="flex items-center justify-between gap-2">
-              <p class="truncate text-sm font-semibold text-strong">{{ c.name }}</p>
+              <p class="truncate text-sm font-semibold text-strong">{{ selectedHomeCharger.name }}</p>
               <div class="flex shrink-0 items-center gap-2">
                 <!-- Reachability, said either way. A charger the service says
                      nothing about stays silent: unknown is not offline. -->
-                <span v-if="liveFor(c)?.online === true" class="dh-badge dh-badge-success">
+                <span v-if="liveFor(selectedHomeCharger)?.online === true" class="dh-badge dh-badge-success">
                   {{ t("charging.info.online") }}
                 </span>
-                <span v-else-if="liveFor(c)?.online === false" class="dh-badge dh-badge-warning">
+                <span v-else-if="liveFor(selectedHomeCharger)?.online === false" class="dh-badge dh-badge-warning">
                   {{ t("charging.info.offline") }}
                 </span>
-                <span v-if="c.provider" class="dh-badge dh-badge-neutral">
-                  {{ providerLabel(c.provider) }}
+                <span v-if="selectedHomeCharger.provider" class="dh-badge dh-badge-neutral">
+                  {{ providerLabel(selectedHomeCharger.provider) }}
                 </span>
               </div>
             </div>
             <dl class="mt-2 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
-              <template v-for="row in chargerInfoRows(c)" :key="row.key">
+              <template v-for="row in chargerInfoRows(selectedHomeCharger)" :key="row.key">
                 <dt class="text-[11px] text-muted">{{ row.label }}</dt>
                 <dd class="data break-all text-[11px] text-body">{{ row.value }}</dd>
               </template>