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

The bolt in the list takes the colour the badge already had

Browse Source 
Every charger in "Your chargers" drew its bolt in the same green, state or
no state — the list's one visual signal said nothing. It now takes the
green and amber the information card's badges use, off the same live map,
so the list answers "which one is up?" without opening anything.

A charger the service is silent about draws muted rather than green: a
green bolt for an unknown charger is a claim. The icon carries a title as
well, so the state is not left to colour alone.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
tajniak81
2026-09-01 11:52:04 +02:00
co-authored by Claude Opus 5
parent 7cbc81778c
commit 21a54c4cfa
1 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web App/web/src/views/Charging.vue
+20 -1
View File
@@ -173,6 +173,24 @@ function sourcesLabel(sources) {
}).join(" · ");
}
// The colour the list icon is drawn in: the same green and amber the badges in
// the information card use, so the list can be read at a glance without opening
// anything. A charger the service says nothing about stays muted — unknown is
// not offline, and a green bolt for it would be a claim.
function homeChargerStatusLabel(c) {
const online = liveFor(c)?.online;
if (online === true) return t("charging.info.online");
if (online === false) return t("charging.info.offline");
return "";
}
function homeChargerTone(c) {
const online = liveFor(c)?.online;
if (online === true) return TONE.good.fg;
if (online === false) return TONE.due.fg;
return "var(--text-muted)";
}
// The OCPP connector state as the *service* sees it — the cloud's own reading,
// not our CSMS's. It words it when it can and numbers it when it cannot.
function ocppStatusLabel(live) {
@@ -646,8 +664,9 @@ onMounted(async () => {
<span
class="grid h-9 w-9 flex-none place-items-center rounded-control"
:class="selected === c.id ? 'bg-card' : 'bg-sunken'"
:title="homeChargerStatusLabel(c)"
>
<svg viewBox="0 0 24 24" fill="none" :stroke="TONE.good.fg" stroke-width="2" class="h-4.5 w-4.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z"/></svg>
<svg viewBox="0 0 24 24" fill="none" :stroke="homeChargerTone(c)" stroke-width="2" class="h-4.5 w-4.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z"/></svg>
</span>
<span class="min-w-0 flex-1">
<span class="block truncate text-sm font-semibold text-strong">{{ c.name }}</span>