First frontend
This commit is contained in:
@@ -0,0 +1,386 @@
|
||||
"use client";
|
||||
|
||||
import { Activity, FolderPlus, Plus, RefreshCw, Zap } from "lucide-react";
|
||||
import { FormEvent, useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
createConsumer,
|
||||
createDistributionBoard,
|
||||
createProject,
|
||||
listConsumers,
|
||||
listDistributionBoards,
|
||||
listProjects,
|
||||
} from "../utils/api";
|
||||
import type {
|
||||
ConsumerWithCalculatedValues,
|
||||
CreateConsumerInput,
|
||||
DistributionBoardDto,
|
||||
ProjectDto,
|
||||
} from "../types";
|
||||
|
||||
const initialConsumerForm = {
|
||||
name: "",
|
||||
category: "",
|
||||
quantity: "1",
|
||||
installedPowerPerUnitKw: "0.1",
|
||||
demandFactor: "1",
|
||||
voltageV: "230",
|
||||
phaseCount: "1",
|
||||
powerFactor: "1",
|
||||
note: "",
|
||||
};
|
||||
|
||||
type ConsumerForm = typeof initialConsumerForm;
|
||||
|
||||
function toOptionalNumber(value: string) {
|
||||
if (value.trim() === "") {
|
||||
return undefined;
|
||||
}
|
||||
return Number(value);
|
||||
}
|
||||
|
||||
function formatNumber(value: number | undefined, digits = 2) {
|
||||
if (value === undefined || Number.isNaN(value)) {
|
||||
return "-";
|
||||
}
|
||||
return new Intl.NumberFormat("de-DE", {
|
||||
maximumFractionDigits: digits,
|
||||
minimumFractionDigits: digits,
|
||||
}).format(value);
|
||||
}
|
||||
|
||||
export function PowerBalanceWorkspace() {
|
||||
const [projects, setProjects] = useState<ProjectDto[]>([]);
|
||||
const [selectedProjectId, setSelectedProjectId] = useState("");
|
||||
const [distributionBoards, setDistributionBoards] = useState<DistributionBoardDto[]>([]);
|
||||
const [selectedBoardId, setSelectedBoardId] = useState("");
|
||||
const [consumers, setConsumers] = useState<ConsumerWithCalculatedValues[]>([]);
|
||||
const [projectName, setProjectName] = useState("");
|
||||
const [boardName, setBoardName] = useState("");
|
||||
const [consumerForm, setConsumerForm] = useState<ConsumerForm>(initialConsumerForm);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const selectedProject = projects.find((project) => project.id === selectedProjectId);
|
||||
const selectedBoard = distributionBoards.find((board) => board.id === selectedBoardId);
|
||||
const visibleConsumers = selectedBoardId
|
||||
? consumers.filter((consumer) => consumer.distributionBoardId === selectedBoardId)
|
||||
: consumers;
|
||||
|
||||
const totals = useMemo(
|
||||
() =>
|
||||
visibleConsumers.reduce(
|
||||
(sum, consumer) => ({
|
||||
installedPowerKw: sum.installedPowerKw + consumer.installedPowerKw,
|
||||
demandPowerKw: sum.demandPowerKw + consumer.demandPowerKw,
|
||||
}),
|
||||
{ installedPowerKw: 0, demandPowerKw: 0 }
|
||||
),
|
||||
[visibleConsumers]
|
||||
);
|
||||
|
||||
async function refreshProjects() {
|
||||
setError(null);
|
||||
const loadedProjects = await listProjects();
|
||||
setProjects(loadedProjects);
|
||||
setSelectedProjectId((current) => current || loadedProjects[0]?.id || "");
|
||||
}
|
||||
|
||||
async function refreshConsumers(projectId: string) {
|
||||
if (!projectId) {
|
||||
setConsumers([]);
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
setConsumers(await listConsumers(projectId));
|
||||
}
|
||||
|
||||
async function refreshDistributionBoards(projectId: string) {
|
||||
if (!projectId) {
|
||||
setDistributionBoards([]);
|
||||
setSelectedBoardId("");
|
||||
return;
|
||||
}
|
||||
|
||||
setError(null);
|
||||
const boards = await listDistributionBoards(projectId);
|
||||
setDistributionBoards(boards);
|
||||
setSelectedBoardId((current) => (boards.some((board) => board.id === current) ? current : boards[0]?.id || ""));
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
refreshProjects()
|
||||
.catch((err: unknown) => setError(err instanceof Error ? err.message : "Projekte konnten nicht geladen werden."))
|
||||
.finally(() => setIsLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
refreshDistributionBoards(selectedProjectId).catch((err: unknown) =>
|
||||
setError(err instanceof Error ? err.message : "Verteilungen konnten nicht geladen werden.")
|
||||
);
|
||||
refreshConsumers(selectedProjectId).catch((err: unknown) =>
|
||||
setError(err instanceof Error ? err.message : "Verbraucher konnten nicht geladen werden.")
|
||||
);
|
||||
}, [selectedProjectId]);
|
||||
|
||||
async function handleCreateProject(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
const name = projectName.trim();
|
||||
if (!name) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const project = await createProject(name);
|
||||
setProjects((current) => [...current, project]);
|
||||
setSelectedProjectId(project.id);
|
||||
setProjectName("");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Projekt konnte nicht angelegt werden.");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCreateDistributionBoard(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
const name = boardName.trim();
|
||||
if (!selectedProjectId || !name) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const board = await createDistributionBoard(selectedProjectId, name);
|
||||
setDistributionBoards((current) => [...current, board]);
|
||||
setSelectedBoardId(board.id);
|
||||
setBoardName("");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Verteilung konnte nicht angelegt werden.");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCreateConsumer(event: FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
if (!selectedProjectId || !consumerForm.name.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const input: CreateConsumerInput = {
|
||||
projectId: selectedProjectId,
|
||||
distributionBoardId: selectedBoardId || undefined,
|
||||
name: consumerForm.name.trim(),
|
||||
category: consumerForm.category.trim() || undefined,
|
||||
quantity: Number(consumerForm.quantity),
|
||||
installedPowerPerUnitKw: Number(consumerForm.installedPowerPerUnitKw),
|
||||
demandFactor: Number(consumerForm.demandFactor),
|
||||
voltageV: toOptionalNumber(consumerForm.voltageV),
|
||||
phaseCount: consumerForm.phaseCount === "3" ? 3 : 1,
|
||||
powerFactor: toOptionalNumber(consumerForm.powerFactor),
|
||||
note: consumerForm.note.trim() || undefined,
|
||||
};
|
||||
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
try {
|
||||
const created = await createConsumer(input);
|
||||
setConsumers((current) => [...current, created]);
|
||||
setConsumerForm(initialConsumerForm);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Verbraucher konnte nicht angelegt werden.");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
function updateConsumerForm(field: keyof ConsumerForm, value: string) {
|
||||
setConsumerForm((current) => ({ ...current, [field]: value }));
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="workspace">
|
||||
<header className="topbar">
|
||||
<div>
|
||||
<p className="eyebrow">TGA / ELT Planung</p>
|
||||
<h1>Leistungsbilanz</h1>
|
||||
</div>
|
||||
<button className="iconButton" type="button" onClick={() => refreshConsumers(selectedProjectId)} title="Aktualisieren">
|
||||
<RefreshCw size={18} />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{error ? <p className="alert">{error}</p> : null}
|
||||
|
||||
<section className="toolbarBand">
|
||||
<form className="projectForm" onSubmit={handleCreateProject}>
|
||||
<label>
|
||||
Projekt
|
||||
<select value={selectedProjectId} onChange={(event) => setSelectedProjectId(event.target.value)}>
|
||||
<option value="">Kein Projekt</option>
|
||||
{projects.map((project) => (
|
||||
<option key={project.id} value={project.id}>
|
||||
{project.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Neues Projekt
|
||||
<input value={projectName} onChange={(event) => setProjectName(event.target.value)} placeholder="z. B. BV Neubau" />
|
||||
</label>
|
||||
<button className="primaryButton" type="submit" disabled={isSaving}>
|
||||
<FolderPlus size={17} />
|
||||
Anlegen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form className="boardForm" onSubmit={handleCreateDistributionBoard}>
|
||||
<label>
|
||||
Verteilung
|
||||
<select value={selectedBoardId} onChange={(event) => setSelectedBoardId(event.target.value)}>
|
||||
<option value="">Alle Verteilungen</option>
|
||||
{distributionBoards.map((board) => (
|
||||
<option key={board.id} value={board.id}>
|
||||
{board.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Neue Verteilung
|
||||
<input value={boardName} onChange={(event) => setBoardName(event.target.value)} placeholder="z. B. UV-01" />
|
||||
</label>
|
||||
<button className="primaryButton" type="submit" disabled={!selectedProjectId || isSaving}>
|
||||
<Plus size={17} />
|
||||
Anlegen
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="summaryStrip" aria-label="Summen">
|
||||
<div>
|
||||
<span>Verbraucher</span>
|
||||
<strong>{visibleConsumers.length}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Installierte Leistung</span>
|
||||
<strong>{formatNumber(totals.installedPowerKw)} kW</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Berechnete Leistung</span>
|
||||
<strong>{formatNumber(totals.demandPowerKw)} kW</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="entryBand">
|
||||
<form className="consumerForm" onSubmit={handleCreateConsumer}>
|
||||
<label>
|
||||
Verbraucher
|
||||
<input value={consumerForm.name} onChange={(event) => updateConsumerForm("name", event.target.value)} placeholder="z. B. Steckdosen Büro" />
|
||||
</label>
|
||||
<label>
|
||||
Kategorie
|
||||
<input value={consumerForm.category} onChange={(event) => updateConsumerForm("category", event.target.value)} placeholder="Allgemein" />
|
||||
</label>
|
||||
<label>
|
||||
Anzahl
|
||||
<input min="0" type="number" value={consumerForm.quantity} onChange={(event) => updateConsumerForm("quantity", event.target.value)} />
|
||||
</label>
|
||||
<label>
|
||||
Leistung je Stück [kW]
|
||||
<input min="0" step="0.01" type="number" value={consumerForm.installedPowerPerUnitKw} onChange={(event) => updateConsumerForm("installedPowerPerUnitKw", event.target.value)} />
|
||||
</label>
|
||||
<label>
|
||||
Gleichzeitigkeitsfaktor
|
||||
<input min="0" max="1" step="0.01" type="number" value={consumerForm.demandFactor} onChange={(event) => updateConsumerForm("demandFactor", event.target.value)} />
|
||||
</label>
|
||||
<label>
|
||||
Spannung [V]
|
||||
<input min="1" type="number" value={consumerForm.voltageV} onChange={(event) => updateConsumerForm("voltageV", event.target.value)} />
|
||||
</label>
|
||||
<label>
|
||||
Phasen
|
||||
<select value={consumerForm.phaseCount} onChange={(event) => updateConsumerForm("phaseCount", event.target.value)}>
|
||||
<option value="1">1-phasig</option>
|
||||
<option value="3">3-phasig</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
cos phi
|
||||
<input min="0" max="1" step="0.01" type="number" value={consumerForm.powerFactor} onChange={(event) => updateConsumerForm("powerFactor", event.target.value)} />
|
||||
</label>
|
||||
<label className="wideField">
|
||||
Bemerkung
|
||||
<input value={consumerForm.note} onChange={(event) => updateConsumerForm("note", event.target.value)} />
|
||||
</label>
|
||||
<button className="primaryButton" type="submit" disabled={!selectedProjectId || isSaving}>
|
||||
<Plus size={17} />
|
||||
Hinzufügen
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section className="tableBand">
|
||||
<div className="tableHeader">
|
||||
<div>
|
||||
<p className="eyebrow">Aktuelles Projekt</p>
|
||||
<h2>{selectedProject?.name || "Noch kein Projekt ausgewählt"}</h2>
|
||||
<p className="subline">{selectedBoard ? `Verteilung: ${selectedBoard.name}` : "Alle Verteilungen"}</p>
|
||||
</div>
|
||||
<div className="statusPill">
|
||||
<Activity size={16} />
|
||||
{isLoading ? "Lädt" : "Bereit"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="tableScroll">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Verbraucher</th>
|
||||
<th>Kategorie</th>
|
||||
<th>Anzahl</th>
|
||||
<th>Leistung je Stück [kW]</th>
|
||||
<th>Installierte Leistung [kW]</th>
|
||||
<th>GZF</th>
|
||||
<th>Berechnete Leistung [kW]</th>
|
||||
<th>Strom [A]</th>
|
||||
<th>Bemerkung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{visibleConsumers.map((consumer) => (
|
||||
<tr key={consumer.id}>
|
||||
<td className="nameCell">
|
||||
<Zap size={15} />
|
||||
{consumer.name}
|
||||
</td>
|
||||
<td>{consumer.category || "-"}</td>
|
||||
<td>{consumer.quantity}</td>
|
||||
<td>{formatNumber(consumer.installedPowerPerUnitKw)}</td>
|
||||
<td>{formatNumber(consumer.installedPowerKw)}</td>
|
||||
<td>{formatNumber(consumer.demandFactor, 2)}</td>
|
||||
<td>{formatNumber(consumer.demandPowerKw)}</td>
|
||||
<td>{formatNumber(consumer.currentA)}</td>
|
||||
<td>{consumer.note || "-"}</td>
|
||||
</tr>
|
||||
))}
|
||||
{!visibleConsumers.length ? (
|
||||
<tr>
|
||||
<td colSpan={9} className="emptyState">
|
||||
Lege eine Verteilung an oder erfasse den ersten Verbraucher.
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user