Ladefenster: eigene Abfahrtszeit lesbar und als ganzer Knopf antippbar

Das Zeitfeld im Chip war zu schmal (von 16:00 blieb die 1) und oeffnete
den Waehler nur ueber das Uhrsymbol von Chromium. Jetzt zeigt der Knopf die
Zeit und oeffnet den Waehler per showPicker(); das Feld liegt unsichtbar
darunter. Car-Zustand Complete heisst beendet, nicht voll.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

ajax/carForm.php

@@ -73,8 +73,14 @@ $box  = wallboxen()[$wallbox];
           <button type="button" class="lade-chip" aria-pressed="false" data-zeit="06:00">06:00</button>
           <button type="button" class="lade-chip" aria-pressed="false" data-zeit="07:00">07:00</button>
           <button type="button" class="lade-chip" aria-pressed="false" data-zeit="08:00">08:00</button>
-          <label class="lade-chip" aria-pressed="false" data-lade="chipEigen">andere
+          <!-- Eigene Zeit: der Knopf zeigt sie an und öffnet den Zeitwähler;
-            <input type="time" data-lade="zeitEigen" aria-label="eigene Abfahrtszeit"></label>
+               das Feld liegt unsichtbar darunter. Direkt eingebettet war es
+               zu schmal, und Chromium öffnete den Wähler nur über sein
+               eigenes Uhrsymbol. -->
+          <button type="button" class="lade-chip lade-chip-eigen" aria-pressed="false" data-lade="chipEigen">
+            <i class="bi bi-clock"></i><span data-lade="chipEigenText">andere</span>
+            <input type="time" class="lade-zeitfeld" data-lade="zeitEigen" tabindex="-1" aria-label="eigene Abfahrtszeit">
+          </button>
         </div>
       </div>
     </div>

css/solar.css

@@ -4029,7 +4029,10 @@ body.anzeige-ohne-maus * { cursor: none !important; }
 .lade .lade-chip { all: unset; cursor: pointer; padding: .35rem .7rem; border-radius: 99px; background: #363d43; font-size: .8rem; font-weight: 500; font-variant-numeric: tabular-nums; }
 .lade .lade-chip[aria-pressed="true"] { background: var(--lade-wallbox); color: #0c1a1d; font-weight: 600; }
 .lade .lade-chip:focus-visible { outline: 2px solid var(--lade-wallbox); outline-offset: 1px; }
-.lade .lade-chip input { all: unset; width: 4.6ch; font: inherit; color: inherit; }
+.lade .lade-chip-eigen { position: relative; display: inline-flex; align-items: center; gap: .35rem; }
+.lade .lade-chip-eigen .bi { font-size: .85em; }
+/* Unsichtbar, aber an Ort und Stelle: der Wähler öffnet sich am Knopf. */
+.lade .lade-zeitfeld { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; }
 
 .lade .lade-strom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; padding: .25rem; border-radius: .75rem; background: var(--ton-flaeche-2, #2b3237); }
 .lade .lade-strom button { all: unset; cursor: pointer; text-align: center; padding: .45rem .2rem; border-radius: .55rem; display: grid; gap: .05rem; }

js/solar/ladefenster.js

@@ -27,7 +27,7 @@
       ampere: "wattpilot/properties/amp/state",
       energie: "wattpilot/properties/fte/state", zeit: "wattpilot/properties/ftt/state",
       frc: "wattpilot/properties/frc/state", frcWerte: { Neutral: 0, Off: 1, On: 2, 0: 0, 1: 1, 2: 2 },
-      auto: "wattpilot/properties/car/state", autoWerte: { Idle: "kein", Charging: "laedt", WaitCar: "wartet", Complete: "fertig" },
+      auto: "wattpilot/properties/car/state", autoWerte: { Idle: "kein", Charging: "laedt", WaitCar: "wartet", Complete: "fertig" },   // Complete = Ladevorgang beendet, nicht Akku voll
       leistungKW: "solarManager/evPower", soc: "solarManager/evSOC", restMin: "solarManager/evRemChrgTime",
     },
     og: {   // go-e Charger, direkt am Broker
@@ -139,10 +139,10 @@
       setze("ringUnten", s.modus === "plan" ? (mitSoc ? "Ziel " + s.ziel + " %" : "+ " + s.ziel + " %") : mitSoc ? "Ladestand" : "Akku");
 
       // Zustand
-      const zustand = laedt ? "lädt" : s.frc === 1 ? "gestoppt" : s.auto === "fertig" ? "fertig" : s.auto === "kein" ? "kein Auto" : "wartet";
+      const zustand = laedt ? "lädt" : s.frc === 1 ? "gestoppt" : s.auto === "fertig" ? "beendet" : s.auto === "kein" ? "kein Auto" : "wartet";
       $("leistung").innerHTML = komma(s.kw) + " kW<small>" + zustand + "</small>";
       const pille = $("stecker");
-      const pilleText = s.auto === "kein" ? "kein Auto" : s.auto === "laedt" ? "lädt" : s.auto === "fertig" ? "voll" : s.auto ? "angesteckt" : "";
+      const pilleText = s.auto === "kein" ? "kein Auto" : s.auto === "laedt" ? "lädt" : s.auto === "fertig" ? "beendet" : s.auto ? "angesteckt" : "";
       setze("stecker", pilleText);
       pille.className = "lade-pille" + (s.auto && s.auto !== "kein" ? " an" : "");
       const anteil = laedt && s.kw > 0 ? Math.max(0, Math.min(1, 1 - Math.max(0, s.netz) / (s.kw * 1000))) : null;
@@ -201,8 +201,9 @@
           c.setAttribute("aria-pressed", an ? "true" : "false");
         });
         $("chipEigen").setAttribute("aria-pressed", bekannt ? "false" : "true");
+        setze("chipEigenText", bekannt ? "andere" : s.zeit);
         const eigen = $("zeitEigen");
-        if (document.activeElement !== eigen && !bekannt) eigen.value = s.zeit;
+        if (document.activeElement !== eigen) eigen.value = s.zeit;
       }
       return s;
     }
@@ -245,6 +246,13 @@
       merke("zeit", c.dataset.zeit);
       planSchicken(stand());
     }));
+    $("chipEigen").addEventListener("click", e => {
+      const feld = $("zeitEigen");
+      if (e.target === feld) return;
+      // showPicker öffnet den Wähler des Browsers; ältere Browser bekommen
+      // wenigstens den Fokus und damit die Eingabe per Tastatur.
+      try { feld.showPicker(); } catch (fehler) { feld.focus(); }
+    });
     $("zeitEigen").addEventListener("change", e => {
       if (!/^\d\d:\d\d$/.test(e.target.value)) return;
       merke("zeit", e.target.value);