adminandClaude Opus 5
b0bac3d3ba
Nach dem abgestimmten Entwurf: Ladestand als Ring mit Ziel, Leistung, Sonnenanteil und fertig um; ein grosser Knopf, der sich nach der gemeldeten Freigabe (frc) richtet - "Laden stoppen", "Ladung freigeben" (zurueck zum Modus statt dauerhaft gesperrt), "Jetzt laden", ohne Auto ausgegraut. Modus als Karten (Sofort, Sonne, Geplant), Planung nur bei "Geplant": mit Ladestand des Autos als Ziel-Ladestand, sonst als zusaetzliche Prozent; Abfahrt per Schnellwahl. Ladestrom als Segmente mit kW. Jede Aenderung geht sofort als JSON an carSteuerung.php (frc, modus, strom, plan) statt ueber "Save changes"; die Logik steht in js/solar/ladefenster.js. Am 800er-Display zweispaltig ohne Scrollen. Nebenbei: die Uebersicht las die Restladezeit aus carRemChrg, das der Manager nicht mehr schickt - jetzt evRemChrgTime. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
94 lines
5.0 KiB
PHP
94 lines
5.0 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>
|
||
<label class="lade-chip" aria-pressed="false" data-lade="chipEigen">andere
|
||
<input type="time" data-lade="zeitEigen" aria-label="eigene Abfahrtszeit"></label>
|
||
</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>
|