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

Home chargers: your own wallbox as a record, imported the way a car is

Browse Source 
The Home chargers tab has been showing a hardcoded "Home charger · 11 kW · NACS"
since it was drawn, and the control card asked for a serial as free text — a
number printed on a box hanging in a garage, typed in by hand while the connected
account already knew it. The garage solved the same problem for cars a while ago,
so this is that solution aimed at the wall: pick the charger off a service you
have connected, press Import, and it becomes a record of yours.

A charger is a record rather than a live listing because it has to outlive the
account it came from. Disconnect Anker and the wallbox is still on the wall; the
integration is how the charger was found, not what it is. Hence home_chargers,
owned by a person and not related to any car — it charges whichever car is
plugged into it, and it outlives all of them — and hence no sharing: a charger is
one household's business in a way a car shared with a partner is not.

The provider layer is vehicleproviders.go's shape on purpose, down to the soft
gate: a listing answers 200 with an empty list and the sentence that says what to
do about a closed gate, a write answers 400, because there the caller asked for
something that did not happen. Anker and Greencell are two adapters over plugins
that already exist, so the next charger service is an adapter appended to
chargerSources() and nothing else. What is deliberately absent is the car
import's checkbox panel: a charger is a name, a serial and the hardware behind
it, all of which the list already carries, so there is nothing to choose and the
whole screen is pick one, press Import.

Only the name is editable afterwards. The rest describes hardware and came from
the service, and the provider link is written by the import endpoint alone, so
renaming a charger cannot quietly orphan it from the account it tracks. Deleting
one says as much in its confirmation: the charger is untouched, and importing it
again brings the record straight back.

The Anker gate moved into ankerGate() beside greencellGate(), because the same
four-case switch was about to exist in a third place. Behaviour is unchanged —
the same sentences, and the probe still skips the personal opt-in, since checking
credentials is what you do before switching the integration on.

The phone app still has the old tab; parity there is a separate change.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
tajniak81
2026-08-31 21:07:21 +02:00
co-authored by Claude Opus 5
parent a809980d8b
commit a3f69fa5ef
15 changed files with 1150 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web App/web/src/views/Charging.vue
+121 -30
View File
@@ -2,6 +2,7 @@
import { ref, computed, onMounted } from "vue";
import { t } from "../i18n";
import { api } from "../api";
import ChargerImportModal from "../components/ChargerImportModal.vue";
// Charging & map screen, mirroring the web-dashboard UI kit. There is no live
// charging API yet (only the Anker Solix credential cascade in Settings), so the
@@ -17,14 +18,14 @@ const stations = [
{ id: "sc", name: "DriverVault Supercharge", dist: "0.4 km", kw: 250, conn: "CCS · NACS", avail: 6, total: 8, price: "0,34 €", tone: "good", x: "47%", y: "34%" },
{ id: "evgo", name: "EVgo · Market St", dist: "1.2 km", kw: 150, conn: "CCS", avail: 2, total: 6, price: "0,41 €", tone: "due", x: "26%", y: "60%" },
{ id: "cp", name: "ChargePoint Garage", dist: "2.1 km", kw: 62, conn: "J1772", avail: 0, total: 4, price: "0,29 €", tone: "fault", x: "70%", y: "64%" },
{ id: "home", name: t("charging.stations.homeCharger"), dist: "—", kw: 11, conn: "NACS", avail: 1, total: 1, price: t("charging.stations.offPeak"), tone: "good", x: "60%", y: "19%", home: true },
];
// Two tabs split the public charging network (discovery map + nearby stations)
// from the user's own home charger(s) and their real OCPP control.
// from the user's own chargers and their real OCPP control. The public half is
// still placeholder data; the home half is not — those are records the user
// imported from a service they connected.
const chargerTab = ref("public"); // "public" | "home"
const publicStations = stations.filter((s) => !s.home);
const homeStations = stations.filter((s) => s.home);
const publicStations = stations;
const selected = ref("sc");
const charging = ref(true);
@@ -96,6 +97,54 @@ function chargerLabel(c) {
return c.name ? `${c.name} · ${c.sn}` : c.sn;
}
// --- The user's own chargers, imported from a connected service ---
// The same move the garage makes for a car: a charger on a connected account
// becomes a record here, and stays one after the account is disconnected.
const homeChargers = ref([]);
const homeChargersError = ref("");
const showChargerImport = ref(false);
// Importing only makes sense once a charger service is connected, so the button
// appears only then — same rule the garage's import button follows.
const canImportCharger = ref(false);
async function loadHomeChargers() {
homeChargersError.value = "";
try {
homeChargers.value = await api.listHomeChargers();
} catch (e) {
homeChargersError.value = e.message;
}
}
// A charger picked here becomes the one the control card drives.
function selectHomeCharger(c) {
selected.value = c.id;
if (!c.serial) return;
ctlSerial.value = c.serial;
refreshCtl();
}
function onChargerImported(charger) {
showChargerImport.value = false;
homeChargers.value = [...homeChargers.value, charger];
selectHomeCharger(charger);
}
async function removeHomeCharger(c) {
if (!confirm(t("charging.home.removeConfirm", { name: c.name }))) return;
homeChargersError.value = "";
try {
await api.deleteHomeCharger(c.id);
homeChargers.value = homeChargers.value.filter((x) => x.id !== c.id);
} catch (e) {
homeChargersError.value = e.message;
}
}
function homeChargerSubtitle(c) {
return [c.serial, c.model, c.siteName].filter(Boolean).join(" · ");
}
async function refreshCtl() {
const sn = ctlSerial.value.trim();
if (!sn) {
@@ -152,6 +201,11 @@ function cancelReset() {
}
onMounted(async () => {
await loadHomeChargers();
api
.listChargerProviders()
.then((list) => (canImportCharger.value = list.some((p) => p.connected)))
.catch(() => (canImportCharger.value = false));
await loadCtlMode();
if (ctlActive.value) await loadChargers();
await refreshCtl();
@@ -395,37 +449,74 @@ onMounted(async () => {
</div>
</div>
<!-- Home station list -->
<!-- The user's own chargers -->
<div class="flex flex-col gap-4">
<div class="dh-card p-2">
<div class="eyebrow px-3 pb-1.5 pt-2.5">
{{ t("charging.stations.homeHeading") }} · {{ t("charging.stations.count", { n: homeStations.length }) }}
</div>
<button
v-for="s in homeStations"
:key="s.id"
type="button"
class="flex w-full items-center gap-3 rounded-control p-3 text-left transition-colors"
:class="selected === s.id ? 'bg-brand-100' : 'hover:bg-sunken'"
@click="selected = s.id"
>
<div
class="grid h-9 w-9 flex-none place-items-center rounded-control"
:class="selected === s.id ? 'bg-card' : 'bg-sunken'"
<div class="flex items-center justify-between gap-2 px-3 pb-1.5 pt-2.5">
<span class="eyebrow">
{{ t("charging.stations.homeHeading") }} · {{ t("charging.home.count", { n: homeChargers.length }) }}
</span>
<button
v-if="canImportCharger"
type="button"
class="dh-btn dh-btn-ghost !px-2 !py-1 text-xs"
@click="showChargerImport = true"
>
<svg viewBox="0 0 24 24" fill="none" :stroke="TONE[s.tone].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>
</div>
<div class="min-w-0 flex-1">
<div class="truncate text-sm font-semibold text-strong">{{ s.name }}</div>
<div class="data text-[11px] text-muted">{{ s.dist }} · {{ s.kw }} kW · {{ s.conn }}</div>
</div>
<div class="text-right">
<div class="data text-[11px] font-medium" :style="{ color: TONE[s.tone].fg }">{{ stationStatus(s) }}</div>
<div class="data mt-0.5 text-[11px] text-muted">{{ s.price }}</div>
</div>
</button>
{{ t("charging.home.import") }}
</button>
</div>
<div
v-for="c in homeChargers"
:key="c.id"
class="flex w-full items-center gap-3 rounded-control p-3 text-left transition-colors"
:class="selected === c.id ? 'bg-brand-100' : 'hover:bg-sunken'"
>
<button type="button" class="flex min-w-0 flex-1 items-center gap-3 text-left" @click="selectHomeCharger(c)">
<span
class="grid h-9 w-9 flex-none place-items-center rounded-control"
:class="selected === c.id ? 'bg-card' : 'bg-sunken'"
>
<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>
</span>
<span class="min-w-0 flex-1">
<span class="block truncate text-sm font-semibold text-strong">{{ c.name }}</span>
<span class="data block truncate text-[11px] text-muted">{{ homeChargerSubtitle(c) }}</span>
</span>
</button>
<button
type="button"
class="shrink-0 text-xs font-medium text-muted hover:text-danger"
:title="t('charging.home.remove')"
@click="removeHomeCharger(c)"
>
{{ t("charging.home.remove") }}
</button>
</div>
<!-- Nothing imported yet: say what this list is for and offer the import. -->
<div v-if="homeChargers.length === 0" class="px-3 pb-3 pt-1">
<p class="text-sm text-muted">{{ t("charging.home.empty") }}</p>
<button
v-if="canImportCharger"
type="button"
class="dh-btn dh-btn-primary mt-3 w-full"
@click="showChargerImport = true"
>
{{ t("charging.home.import") }}
</button>
<p v-else class="mt-2 text-xs text-muted">{{ t("charging.home.connectFirst") }}</p>
</div>
<p v-if="homeChargersError" class="px-3 pb-3 text-sm text-danger">{{ homeChargersError }}</p>
</div>
</div>
</div>
<ChargerImportModal
v-if="showChargerImport"
@saved="onChargerImported"
@close="showChargerImport = false"
/>
</div>
</template>