From f9b1bcc520d92432c48bac36349b0ba8b8a67b87 Mon Sep 17 00:00:00 2001 From: tajniak81 <13187254+tajniak81@users.noreply.github.com> Date: Sun, 19 Jul 2026 00:22:38 +0200 Subject: [PATCH] Web App: fold integration cards; split Charging into two tabs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Settings → Integrations: the Toyota and Anker Solix cards are now collapsible, like the plugin rows in the API Server panel. Each header is a toggle with a rotating chevron; the Connected badge stays visible when collapsed. Bodies use v-show so loaded state and in-flight edits survive folding. Collapsed by default. Charging: split into "Public chargers" and "Home chargers" tabs. Public keeps the discovery map (public pins only) + demo session + nearby public stations. Home holds the real OCPP control card (moved here) and the user's home charger list, with a hint pointing to Settings when no control mode is active. Adds charging.tabs.*, stations.homeHeading and stations.noControlHint (en/pl/da). Co-Authored-By: Claude Opus 4.8 --- Web App/web/src/i18n/da.json | 6 ++ Web App/web/src/i18n/en.json | 6 ++ Web App/web/src/i18n/pl.json | 6 ++ Web App/web/src/views/Charging.vue | 145 +++++++++++++++++++++-------- Web App/web/src/views/Settings.vue | 68 ++++++++++---- 5 files changed, 173 insertions(+), 58 deletions(-) diff --git a/Web App/web/src/i18n/da.json b/Web App/web/src/i18n/da.json index 5b53a1d..7e0dcb1 100644 --- a/Web App/web/src/i18n/da.json +++ b/Web App/web/src/i18n/da.json @@ -35,6 +35,10 @@ "charging": { "eyebrow": "Opladning og kort", "title": "Ladere i nærheden", + "tabs": { + "public": "Offentlige ladere", + "home": "Hjemmeladere" + }, "liveMap": "Live-kort", "youAreHere": "Du er her", "session": { @@ -49,6 +53,8 @@ }, "stations": { "heading": "I nærheden", + "homeHeading": "Dine ladere", + "noControlHint": "Aktivér Own eller Proxy CSMS under Indstillinger → Integrationer for at styre din hjemmelader her.", "count": { "one": "{n} station", "other": "{n} stationer" diff --git a/Web App/web/src/i18n/en.json b/Web App/web/src/i18n/en.json index c9ebaa0..63fb347 100644 --- a/Web App/web/src/i18n/en.json +++ b/Web App/web/src/i18n/en.json @@ -35,6 +35,10 @@ "charging": { "eyebrow": "Charging & map", "title": "Nearby chargers", + "tabs": { + "public": "Public chargers", + "home": "Home chargers" + }, "liveMap": "Live map", "youAreHere": "You are here", "session": { @@ -67,6 +71,8 @@ }, "stations": { "heading": "Nearby", + "homeHeading": "Your chargers", + "noControlHint": "Turn on Own or Proxy CSMS in Settings → Integrations to control your home charger here.", "count": { "one": "{n} station", "other": "{n} stations" diff --git a/Web App/web/src/i18n/pl.json b/Web App/web/src/i18n/pl.json index f1d64cd..814a1fd 100644 --- a/Web App/web/src/i18n/pl.json +++ b/Web App/web/src/i18n/pl.json @@ -35,6 +35,10 @@ "charging": { "eyebrow": "Ładowanie i mapa", "title": "Ładowarki w pobliżu", + "tabs": { + "public": "Ładowarki publiczne", + "home": "Ładowarki domowe" + }, "liveMap": "Mapa na żywo", "youAreHere": "Tu jesteś", "session": { @@ -49,6 +53,8 @@ }, "stations": { "heading": "W pobliżu", + "homeHeading": "Twoje ładowarki", + "noControlHint": "Włącz tryb Own lub Proxy CSMS w Ustawienia → Integracje, aby sterować domową ładowarką.", "count": { "one": "{n} stacja", "few": "{n} stacje", diff --git a/Web App/web/src/views/Charging.vue b/Web App/web/src/views/Charging.vue index 22f207a..38a1053 100644 --- a/Web App/web/src/views/Charging.vue +++ b/Web App/web/src/views/Charging.vue @@ -17,9 +17,15 @@ 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%" }, + { 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. +const chargerTab = ref("public"); // "public" | "home" +const publicStations = stations.filter((s) => !s.home); +const homeStations = stations.filter((s) => s.home); + const selected = ref("sc"); const charging = ref(true); @@ -136,7 +142,23 @@ onMounted(async () => {

{{ t("charging.title") }}

-
+ +
+ +
+ + +
{
- + +
+ +
+ + +
+ + +
+
+ {{ t("charging.stations.heading") }} · {{ t("charging.stations.count", { n: publicStations.length }) }} +
+ +
+
+
+ + +
+
-

{{ t("charging.control.title") }}

@@ -265,47 +356,21 @@ onMounted(async () => {

{{ ctlError }}

- -
- - + +
+

{{ t("charging.control.title") }}

+

{{ t("charging.stations.noControlHint") }}

+
- + +
- {{ t("charging.stations.heading") }} · {{ t("charging.stations.count", { n: stations.length }) }} + {{ t("charging.stations.homeHeading") }} · {{ t("charging.stations.count", { n: homeStations.length }) }}
+
+ + {{ toyota.enabled ? t("settings.integrations.connected") : t("settings.integrations.notConnected") }} + + +
+ +

{{ t("settings.integrations.unavailable") }}

{

{{ toyotaError }}

+
-
+
+
+ + {{ anker.enabled ? t("settings.integrations.connected") : t("settings.integrations.notConnected") }} + + +
+ +

{{ t("settings.integrations.unavailable") }}

{

{{ ankerError }}

+