admin
7dd3215520
MQTT-Collector (Python/paho-mqtt) speichert abgeschlossene go-e Wallbox-Ladungen in SQLite; Next.js-Web-App zeigt sie als Tabelle mit Energie-Summen (Monat/Jahr/gesamt) im werte-next-Design. Zwei Docker-Container mit gemeinsamem DB-Volume. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { Totals as TotalsData } from "@/lib/db";
|
|
|
|
function kwh(wh: number): string {
|
|
return (wh / 1000).toLocaleString("de-DE", {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
});
|
|
}
|
|
|
|
function formatInstall(iso: string | null): string {
|
|
if (!iso) return "";
|
|
const [date = ""] = iso.split("T");
|
|
const [y, m, d] = date.split("-");
|
|
return y && m && d ? ` (seit ${d}.${m}.${y})` : "";
|
|
}
|
|
|
|
function Card({ label, value }: { label: string; value: string }) {
|
|
return (
|
|
<div className="flex-1 min-w-[10rem] border border-black rounded-lg bg-white p-4 text-center">
|
|
<div className="text-sm text-gray-600">{label}</div>
|
|
<div className="text-2xl font-bold">
|
|
{value} <span className="text-base font-normal">kWh</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Totals({ totals }: { totals: TotalsData }) {
|
|
return (
|
|
<div className="mt-6">
|
|
<h2 className="text-lg font-semibold mb-3">Geladene Energie</h2>
|
|
<div className="flex flex-wrap gap-4">
|
|
<Card label="Aktueller Monat" value={kwh(totals.month_wh)} />
|
|
<Card label="Aktuelles Jahr" value={kwh(totals.year_wh)} />
|
|
<Card
|
|
label={`Gesamt${formatInstall(totals.install_date)}`}
|
|
value={kwh(totals.total_wh)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|