adminandClaude Opus 5
5f42309410
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>
100 lines
5.4 KiB
PHP
100 lines
5.4 KiB
PHP
<?php
|
||
/*
|
||
* Das Ladefenster, gemeinsam für beide Wallboxen (carEG.php, carOG.php über
|
||
* carSteuerung.php).
|
||
*
|
||
* Hier steht nur das Gerüst mit dem, was der Server weiß: welches Auto, wie
|
||
* groß sein Akku ist. Werte, Zustände und jede Änderung übernimmt
|
||
* js/solar/ladefenster.js - live aus den MQTT-Werten der Seite, geschrieben
|
||
* wird sofort per POST an carSteuerung.php.
|
||
*/
|
||
$auto = fahrzeuge()[$wallbox];
|
||
$box = wallboxen()[$wallbox];
|
||
?>
|
||
<div class="lade" data-wallbox="<?= htmlspecialchars($wallbox) ?>"
|
||
data-wh-pro-prozent="<?= wallboxWhProProzent($wallbox) ?>"
|
||
data-akku-kwh="<?= htmlspecialchars((string)$auto["akkuKWh"]) ?>">
|
||
|
||
<div class="lade-links">
|
||
<div class="lade-status">
|
||
<div class="lade-ring" aria-hidden="true">
|
||
<svg viewBox="0 0 120 120">
|
||
<circle class="lade-spur" cx="60" cy="60" r="50" pathLength="100"/>
|
||
<circle class="lade-ziel" cx="60" cy="60" r="50" pathLength="100"/>
|
||
<circle class="lade-ist" cx="60" cy="60" r="50" pathLength="100"/>
|
||
</svg>
|
||
<div class="lade-ring-mitte">
|
||
<b data-lade="soc">–</b>
|
||
<span data-lade="ringUnten"></span>
|
||
</div>
|
||
</div>
|
||
<div class="lade-text">
|
||
<div class="lade-auto"><?= htmlspecialchars($auto["name"]) ?> <span data-lade="stecker" class="lade-pille"></span></div>
|
||
<div class="lade-gross" data-lade="leistung">–</div>
|
||
<div class="lade-zeile" data-lade="quelle"></div>
|
||
<div class="lade-zeile" data-lade="fertig"></div>
|
||
</div>
|
||
</div>
|
||
<button type="button" class="lade-start" data-lade="start"><span class="lade-punkt"></span><span data-lade="startText">…</span></button>
|
||
<div class="lade-erklaerung" data-lade="erklaerung"></div>
|
||
</div>
|
||
|
||
<div class="lade-rechts">
|
||
<div class="lade-abschnitt">
|
||
<h3 id="lade-modus-<?= $wallbox ?>">Wie laden?</h3>
|
||
<div class="lade-modi" role="radiogroup" aria-labelledby="lade-modus-<?= $wallbox ?>">
|
||
<button type="button" class="lade-modus" role="radio" aria-checked="false" data-modus="sofort" style="--c:#6cbe58">
|
||
<span class="lade-sym"><svg viewBox="0 0 24 24"><path d="M13 3 5 14h6l-1 7 8-11h-6z"/></svg></span>
|
||
<b>Sofort</b><span>volle Leistung, auch aus dem Netz</span>
|
||
</button>
|
||
<button type="button" class="lade-modus" role="radio" aria-checked="false" data-modus="sonne" style="--c:#f7c000">
|
||
<span class="lade-sym"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg></span>
|
||
<b>Sonne</b><span>nur Überschuss der Anlage</span>
|
||
</button>
|
||
<button type="button" class="lade-modus" role="radio" aria-checked="false" data-modus="plan" style="--c:#4b9fd6">
|
||
<span class="lade-sym"><svg viewBox="0 0 24 24"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2.5 2M9 2h6"/></svg></span>
|
||
<b>Geplant</b><span>bis zur Abfahrt geladen</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lade-planung" data-lade="planung" hidden>
|
||
<div>
|
||
<div class="lade-plan-zeile">
|
||
<label for="lade-ziel-<?= $wallbox ?>" data-lade="zielTitel">Ladestand bei Abfahrt</label>
|
||
<output data-lade="zielAusgabe"></output>
|
||
</div>
|
||
<input type="range" id="lade-ziel-<?= $wallbox ?>" data-lade="ziel" min="0" max="100" step="5" value="80">
|
||
<div class="lade-marken"><span data-lade="markeLinks">0 %</span><span data-lade="markeMitte"></span><span>100 %</span></div>
|
||
</div>
|
||
<div>
|
||
<div class="lade-plan-zeile"><label>Abfahrt</label><output data-lade="abfahrtAusgabe"></output></div>
|
||
<div class="lade-chips" role="group" aria-label="Abfahrt">
|
||
<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>
|
||
<!-- Eigene Zeit: der Knopf zeigt sie an und öffnet den Zeitwähler;
|
||
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>
|
||
|
||
<div class="lade-abschnitt">
|
||
<h3 id="lade-strom-<?= $wallbox ?>">Höchstens</h3>
|
||
<div class="lade-strom" role="radiogroup" aria-labelledby="lade-strom-<?= $wallbox ?>">
|
||
<button type="button" role="radio" aria-checked="false" data-ampere="6"><b>6 A</b><span>≈ 4,1 kW</span></button>
|
||
<button type="button" role="radio" aria-checked="false" data-ampere="10"><b>10 A</b><span>≈ 6,9 kW</span></button>
|
||
<button type="button" role="radio" aria-checked="false" data-ampere="16"><b>16 A</b><span>≈ 11 kW</span></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="lade-meldung" data-lade="meldung" aria-live="polite">Änderungen gelten sofort · <?= htmlspecialchars($box["titel"]) ?></div>
|
||
</div>
|
||
</div>
|