diff --git a/Web App/web/src/views/Charging.vue b/Web App/web/src/views/Charging.vue index 1bdf9a6..7c1c927 100644 --- a/Web App/web/src/views/Charging.vue +++ b/Web App/web/src/views/Charging.vue @@ -1000,6 +1000,31 @@ function liveFor(c) { return chargerLive.value[c.providerChargerId] || chargerLive.value[c.serial] || null; } +// --- The charger the buttons act on, as a picture and a name ------------------ +// +// The control card drives whichever serial is in force, which is not always the +// record highlighted in the list beside it, so it identifies its charger by that +// serial rather than by the selection. Two sources carry the same product shot: +// the account's own charger list, and the live half held per provider. Either +// will do; the account's is the one that arrives without the home tab having +// been opened. +// +// It lives here rather than up with the other ctl* values because both of its +// sources do, and a lookup reads better next to the map it reads from. +function accountCharger(sn) { + if (!sn) return null; + return chargers.value.find((c) => c.sn === sn) || chargerLive.value[sn] || null; +} + +const ctlImageUrl = computed(() => accountCharger(ctlSerial.value.trim())?.imageUrl || ""); +const ctlChargerName = computed(() => accountCharger(ctlSerial.value.trim())?.name || ""); + +// A product shot is a URL from the service, and a URL can 404. Remembered per +// URL rather than per charger, so the picture simply stops being drawn and comes +// back on its own if the service starts answering for it again — no reset to +// forget when the serial changes. +const imageFailed = ref({}); + // How the charger is registered on the account, in the service's own terms. function sourcesLabel(sources) { if (!sources?.length) return ""; @@ -1929,6 +1954,26 @@ onMounted(async () => {
{{ ctlChargerName }}
+{{ ctlSerial }}
+