Ladefenster neu: Zustand zuerst, Modus als Karten, Aenderungen sofort
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>
This commit is contained in:
Claude Opus 5
+86
-87
@@ -1,94 +1,93 @@
|
||||
<?php
|
||||
/*
|
||||
* Formular des Auto-Lademodals. carEG.php und carOG.php zeigen dasselbe
|
||||
* Formular; nur die Wallbox dahinter unterscheidet sich - eingebunden wird
|
||||
* es aus carSteuerung.php, das $wallbox und $formId setzt. $formId trennt
|
||||
* die beiden Formulare fuer das JavaScript.
|
||||
* Das Ladefenster, gemeinsam für beide Wallboxen (carEG.php, carOG.php über
|
||||
* carSteuerung.php).
|
||||
*
|
||||
* Der Schieberegler traegt die Wattstunden je Prozent als data-Attribut bei
|
||||
* sich. Frueher stand die Umrechnung als feste 14000 im JavaScript und
|
||||
* passte damit hoechstens zu einem der beiden Autos: eingestellte und
|
||||
* angezeigte Prozente gingen auseinander.
|
||||
* 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];
|
||||
$whProProzent = wallboxWhProProzent($wallbox);
|
||||
$box = wallboxen()[$wallbox];
|
||||
?>
|
||||
<div class="d-grid gap-2 col-6 mx-auto my-4">
|
||||
<button class="btn btn-primary" id="evStart/Stop">Laden starten</button>
|
||||
<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>
|
||||
<!--begin::Form-->
|
||||
<form id="<?= $formId ?>">
|
||||
<div class="card m-3">
|
||||
<div class="card-header py-1 px-3">
|
||||
<div class="card-title">Modus</div>
|
||||
</div>
|
||||
<!--begin::Body-->
|
||||
<div class="card-body">
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="evMode" id="EV_Default" value="default">
|
||||
<label class="form-check-label" for="EV_Default"> Immer Laden </label></input>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="evMode" id="EV_Eco" value="eco">
|
||||
<label class="form-check-label" for="EV_Eco"> Überschuss </label></input>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<input class="form-check-input" type="radio" name="evMode" id="EV_NextTrip" value="NextTrip">
|
||||
<label class="form-check-label" for="EV_NextTrip"> Ladeplanung </label></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card m-3">
|
||||
<div class="card-header py-1 px-3">
|
||||
<div class="card-title">Max. Ladestrom</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="col-sm-10">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="evAmp" id="EV_6A" value="6">
|
||||
<label class="form-check-label" for="EV_6A"> 6A </label></input>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="evAmp" id="EV_10A" value="10">
|
||||
<label class="form-check-label" for="EV_10A"> 10A </label></input>
|
||||
</div>
|
||||
<div class="form-check disabled">
|
||||
<input class="form-check-input" type="radio" name="evAmp" id="EV_16A" value="16">
|
||||
<label class="form-check-label" for="EV_16A"> 16A </label></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card m-3">
|
||||
<div class="card-header py-1 px-3">
|
||||
<div class="card-title">Ladeplanung</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="form-check">
|
||||
<label class="form-label" for="addedCharge">Zusätzlich benötigte Ladung (%): </label>
|
||||
<div style="font-size: 15px;color: #297195;display: inline-block;" id="modal-slider-label">sdf</div>
|
||||
<input type="range" id="modal-slider" name="fte" class="form-range range-color-track" min="1" max="100"
|
||||
data-wh-pro-prozent="<?= $whProProzent ?>" />
|
||||
<div class="small text-secondary">
|
||||
<?= htmlspecialchars($auto["name"]) ?>,
|
||||
<?= htmlspecialchars(rtrim(rtrim(number_format($auto["akkuKWh"], 1, ",", "."), "0"), ",")) ?> kWh nutzbar
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<span class="max-amount f-16 font-weight-normal darkGray-color text-right mt-1">1%</span>
|
||||
<span class="max-amount f-16 font-weight-normal darkGray-color text-right mt-1">100%</span>
|
||||
</div>
|
||||
<!--<input name="fte" class="form-control" type="number" max="100" min="1" value="" />-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="form-check">
|
||||
<label class="form-label" for="planedTime">Zeitpunkt zudem geladen sein soll: </label>
|
||||
<input id="EV_NextTripTime" name="ftt" class="form-control" size="2" type="time" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user