driver-vault/DriverVault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The card is about the charger you picked, not all of them

Browse Source 
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>
This commit is contained in:
tajniak81
2026-09-01 13:01:09 +02:00
co-authored by Claude Opus 5
parent 9686cae8b9
commit 019c28db85
1 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web App/web/src/views/Charging.vue
+16 -12
View File
@@ -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>