Willkommen auf der Stromzählerseite von Westrup-Dudek.

Im folgenden Beitrag werden ich dir erklären, wie du einen Zählerstand eingibst, diesen abschickst und wie die Liste, und das Dashboard funktionieren.
Den Technischen Umfang werde ich dir genau so erläutern. Du darfst also gespannt sein, was diese Seite alles so zu bieten hat.

Funktion: Eingabe aktueller Zählerstand

Benutzer können einen Zählerstand in kWH “Kilowattstunden” eintragenc
Die eingabe erfolt über das Formular “Einagabe aktueller Zählerstand”
Der eingetragene Zählerstand wird in einer Datenbank gespeichert
Nach dem speichern:
Wird eine grüne Erfolgsmeldung: “Zählerstand gespeichert!” angezeigt
Wird ein bunter “Konfetti-Effekt” im Brwoser ausgelöst

Funktion: Zählerstände anzeigen (Liste)

Ausgabe aller gespeicherten Zählerstände in einer Tabelle
Spalten: Nach Datum und Uhrzeit und Zählerstand (kWh)
Sortierung: Absteigend nach Datum

Funktion: Alle Zählerstände löschen (Liste)

Im Listenbereich gibt es einen Button “Alle Zählerstände löschen”
Dieser Button ist je nach Benutzer-Zugriffsberechtigung zu sehen oder verborgen “Berechtigung zum löschen: “stromzaehler_loeschen”
Sicherheitsfrage via confirm(…) vor dem löschen
Bei Bestätigung “Alle Zählerstände löschen” wir noch mal gefragt: “Möchtest du wirklich alle Zählerstände löschen?” werden alle Zählerstandeinträge unwiederruflich gelöscht
Erfolgsmeldung nach dem löschen “Alle Zählerstände wurden gelöscht!”

Funktion: Dashboard mit Filter und Analyse

Ausgabe in einer eigenen Tabelle:
Datum und Uhrzeit
Zählerstand (kWh)
Differenz zum Datumsfilter: Von / Bis “Tag, Monat, Jahr”
Tabelle wird entsprechend der Filter angepasst

Funktion: Verbrauchsanalyse mit Farbkodierung

Verbrauch (Differenz zum vorherigen Zählerstand) wird farblich markiert:
🟢 Grün: ≤ 50 kWh (niedrig) niedriger Stromverbrauch
🟡 Gelb: ≤ 200 kWh (mittel) Mittlerer Stromverbrauch
🔴 Rot: > 200 kWh (hoch) hoher Stromverbrauch
Visualisierung über farbige Punkte neben dem Zählerstand

Technische Merkmale zur Funktion von Skripten und Styles

Einbindung von Skripten und Styles

Lädt eigenes CSS (style.css) für Layout & Gestaltung
Lädt JavaScript:
canvas-confetti (über CDN) für Konfetti-Effekt
eigenes JS-Skript konfetti.js (Plugin-Datei)

Zusatzfunktionen

Eingabevalidierung: Nur numerische Werte mit Nachkommastellen erlaubt
Automatische Datumsformatierung (deutsches Format: TT.MM.JJJJ HH:MM:SS)
Schutz vor direktem Zugriff (if (!defined('ABSPATH')) exit;)