adminandClaude Opus 5
0cb0d4c3ae
Drei Teile, die zusammengehoeren: die Fahrzeugkachel zeigt den Ladestand jetzt dort, wo er im Auto auch sitzt, die Jahresstatistik wird zur Tabelle, und beide holen ihr Aussehen aus einer gemeinsamen Farbwelt. Fahrzeugkachel. Die Kachel "Batterie und Ladung" ist aufgeloest; ihr Inhalt steckt in der Draufsicht. Die Akkuplatte im Fahrzeugboden fuellt sich von hinten nach vorn, traegt die Zielmarke und nennt Prozent und Reichweite in ihrer Mitte - auf dem Goldenen Schnitt der Plattenhoehe, damit sie nicht am Klimaknopf klebt. Beim Laden wandern Streifen im gefuellten Teil nach vorn, und vom Anschluss fliesst eine Linie in die Platte. Was sich nicht zeichnen laesst - Ladeleistung, Restzeit, Kilometerstand, Klima, Herkunft des Ladestroms - steht als Kennzahl daneben, dazu die gefahrenen Kilometer aus Woche, Monat und Jahr (?was=strecke, gerechnet aus dem Zaehlerstand statt aus erkannten Fahrten - faellt eine Zeile aus, fehlt die Fahrt in der Liste, im Zaehlerstand aber nicht). Am Fahrzeug selbst: kein Panoramadach, das hat unseres nicht. Reling und Spoiler neu gezeichnet, weil sie mit der Dachplatte bisher ein geschlossenes Rechteck bildeten und das wie ein Fensterrahmen aussah. Die Blende am Bug ist schmaler und heller - von oben sieht man von einer senkrechten Flaeche nur einen Streifen, und fast schwarz las sie sich wie ein Loch. Die Ladeklappe ist gebaut wie der Klimaknopf; den Ladezustand traegt jetzt die Farbe statt einer zweiten Form. Jahresvergleich. getStats.php liefert kein fertiges HTML mehr, sondern JSON, das sich selbst beschreibt: Einheit, Nachkommastellen, Richtung und Zugehoerigkeit stehen als Metadaten je Kennzahl, nicht mehr als zwei Arrays, die ueber den Spaltenindex mit der Abfrage synchron gehalten werden mussten. Zwei Abfragen holen alles - Monatswerte, daraus die ganzen Jahre und die Summe seit Aufzeichnungsbeginn, dazu der gleiche Zeitraum jedes Jahres bis zum heutigen Kalendertag. Verhaeltniszahlen sind auf jeder Ebene neu aus den Summen gerechnet; ein Jahresmittel ist nicht das Mittel der Monatsmittel. Gezeichnet wird das von einem Baustein, den sich Historien- und Solarseite teilen: dort drei Jahresspalten mit verschiebbarem Fenster bis zurueck zum ersten Jahr, hier eine Spalte ohne Werkzeuge. Zeilen, die sich aufteilen, stehen als "davon" darunter; was bereits in einer anderen Zeile steckt, als "darin" samt Namen der Zeile - der Beitrag der Batterie und die Solarladung des Autos duerfen nicht zum Ertrag addiert werden. Zusammengefasste Zeilen sind zunaechst zu, damit die Tabelle mit zehn Zeilen aufmacht statt mit siebzehn. Farbwelt. Statt Regel fuer Regel zu ueberschreiben, ist die Palette ausgetauscht: ein paar Variablen am Wurzelelement, an die Bootstrap und AdminLTE ohnehin gehen. Anthrazit als Grund, eine Spur hellere Flaeche fuer Karten, Haarlinien statt Rahmen und Schatten, Bernstein als einzige Akzentfarbe - auf dieser Seite die Farbe der eigenen Anlage. Gruen, Rot und Gelb bleiben den Zustaenden vorbehalten. Erklaerungen, die bisher nur im title standen, sind antippbar: am Finger gibt es kein Ueberfahren, und ein title erscheint dort nie. Die beiden neuen Abfragen sind gegen solarLog gelaufen, die Monatswerte decken sich mit einer unabhaengigen Zerlegung. grundpreisImJahr() ruft jetzt grundpreisImZeitraum() auf - dieselbe Rechnung, nur auch fuer einen Teil des Jahres. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
139 lines
6.5 KiB
PHP
139 lines
6.5 KiB
PHP
<?php
|
|
require_once("helper.php");
|
|
|
|
if (isset($_GET["addUser"])) {
|
|
if (checkAdduser($_GET["addUser"])) {
|
|
echo <<<ENDE
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>Smarthome control</title>
|
|
<link rel="icon" type="image/png" href="assets/img/favicon.png">
|
|
<!--end::Accessibility Meta Tags-->
|
|
|
|
<!--begin::Primary Meta Tags-->
|
|
<meta name="title" content="Smarthome control" />
|
|
<meta name="author" content="ColorlibHQ" />
|
|
<meta name="description" content="Smarthome control panel by m0." />
|
|
<meta name="keywords" content="smarthome dashboard, admin panel" />
|
|
<!--end::Primary Meta Tags-->
|
|
|
|
<!--begin::Fonts-->
|
|
<link rel="stylesheet" href="assets/fonts/font_poppins.css" media="print" onload="this.media='all'" />
|
|
<!--end::Fonts-->
|
|
|
|
<!--begin::Third Party Plugin(Bootstrap Icons)-->
|
|
<link rel="stylesheet" href="css/bootstrap-icons.min.css" />
|
|
<!--end::Third Party Plugin(Bootstrap Icons)-->
|
|
|
|
<!--begin::Required Plugin(AdminLTE)-->
|
|
<link rel="stylesheet" href="./css/adminlte.min.css?v=2" />
|
|
<!--end::Required Plugin(AdminLTE)-->
|
|
|
|
|
|
</head>
|
|
<body onload="createRegistration()">
|
|
</body>
|
|
<script src="js/auth.js"></script>
|
|
<script>
|
|
async function createRegistration() {
|
|
try {
|
|
// check browser support
|
|
if (!window.fetch || !navigator.credentials || !navigator.credentials.create) {
|
|
throw new Error('Browser not supported.');
|
|
}
|
|
let keyName = encodeURIComponent(prompt('Bitte Hier den Namen des Schlüssels eingeben:'));
|
|
// get create args
|
|
let rep = await window.fetch('authServer.php?fn=getCreateArgs', {method:'GET', cache:'no-cache'});
|
|
//alert(await rep.text());
|
|
const createArgs = await rep.json();
|
|
// error handling
|
|
if (createArgs.success === false) {
|
|
throw new Error(createArgs.msg || 'unknown error occured');
|
|
}
|
|
|
|
// replace binary base64 data with ArrayBuffer. a other way to do this
|
|
// is the reviver function of JSON.parse()
|
|
recursiveBase64StrToArrayBuffer(createArgs);
|
|
|
|
// create credentials
|
|
const cred = await navigator.credentials.create(createArgs);
|
|
|
|
// create object
|
|
const authenticatorAttestationResponse = {
|
|
transports: cred.response.getTransports ? cred.response.getTransports() : null,
|
|
clientDataJSON: cred.response.clientDataJSON ? arrayBufferToBase64(cred.response.clientDataJSON) : null,
|
|
attestationObject: cred.response.attestationObject ? arrayBufferToBase64(cred.response.attestationObject) : null
|
|
};
|
|
|
|
// check auth on server side
|
|
rep = await window.fetch('authServer.php?fn=processCreate&name='+keyName, {
|
|
method : 'POST',
|
|
body : JSON.stringify(authenticatorAttestationResponse),
|
|
cache : 'no-cache'
|
|
});
|
|
authenticatorAttestationServerResponse = await rep.json();
|
|
// prompt server response
|
|
if (authenticatorAttestationServerResponse.success) {
|
|
window.alert(authenticatorAttestationServerResponse.msg || 'registration success');
|
|
if(!authenticatorAttestationServerResponse.msg){
|
|
window.location.href = "https://nas.el-wa.org/smart";
|
|
}
|
|
|
|
} else {
|
|
throw new Error(authenticatorAttestationServerResponse.msg);
|
|
}
|
|
|
|
} catch (err) {
|
|
window.alert(err.message || 'unknown error occured');
|
|
}
|
|
}
|
|
</script>
|
|
</html>
|
|
ENDE;
|
|
}
|
|
} else if (checkLogin()) {
|
|
/*
|
|
* Seitentabelle: Vorlage, Seitenskripte und welche Bibliotheken die Seite
|
|
* ueberhaupt braucht. Frueher wurden Chart.js, MQTT & Co. auf jeder Seite
|
|
* geladen - die Home-Seite etwa zeichnet gar keine Diagramme.
|
|
*/
|
|
$pages = [
|
|
"solar" => ["template" => "solar.php", "mqtt" => true, "charts" => true, "meteogram" => true, "leaflet" => false,
|
|
"scripts" => ["js/solar/jahresstatistik.js", "js/solar/solarMQTT.js"]],
|
|
"home" => ["template" => "home.php", "mqtt" => true, "charts" => false, "meteogram" => false, "leaflet" => false,
|
|
"scripts" => ["js/solar/autoActionFuncs.js", "js/solar/homeMQTT.js"]],
|
|
"heat" => ["template" => "heat.php", "mqtt" => true, "charts" => true, "meteogram" => false, "leaflet" => false,
|
|
"scripts" => ["js/solar/heatMQTT.js"]],
|
|
"history" => ["template" => "history.php", "mqtt" => false, "charts" => true, "meteogram" => false, "leaflet" => false,
|
|
"scripts" => ["js/solar/jahresstatistik.js", "js/solar/historyMQTT.js"]],
|
|
"skoda" => ["template" => "skoda.php", "mqtt" => true, "charts" => true, "meteogram" => false, "leaflet" => true,
|
|
"scripts" => ["js/solar/skodaMQTT.js"]],
|
|
"weather" => ["template" => "weather.php", "mqtt" => true, "charts" => false, "meteogram" => true, "leaflet" => false,
|
|
"scripts" => ["js/solar/weatherMQTT.js"]],
|
|
"settings" => ["template" => "settings.php", "mqtt" => false, "charts" => false, "meteogram" => false, "leaflet" => false,
|
|
"scripts" => ["js/solar/settings.js"]],
|
|
"logs" => ["template" => "logs.php", "mqtt" => false, "charts" => false, "meteogram" => false, "leaflet" => false,
|
|
"scripts" => ["js/solar/logs.js"]],
|
|
];
|
|
|
|
// Unbekannte oder fehlende Aktion faellt auf die Solar-Seite zurueck.
|
|
if (!isset($_GET["action"]) || !isset($pages[$_GET["action"]])) {
|
|
$_GET["action"] = "solar";
|
|
}
|
|
$page = $pages[$_GET["action"]];
|
|
|
|
include "restricted/header.php";
|
|
include "restricted/" . $page["template"];
|
|
include "restricted/footer.php";
|
|
} else {
|
|
echo <<<ENDE
|
|
<html>
|
|
<head><link rel="icon" type="image/png" href="assets/img/favicon.png"></head>
|
|
<body onload="checkRegistration()">
|
|
<script src="js/auth.js"></script>
|
|
</body>
|
|
</html>
|
|
ENDE;
|
|
}
|