Grovy311/leistungsbilanz-ts
1
0
Fork 0
forked from jappel/leistungsbilanz-ts
Code Pull requests Activity

Added 1B, 2 and added bootstrap again for site

Browse source
This commit is contained in:
Julian Appel 2026-05-03 22:04:45 +02:00
parent b8995b3a1b
commit d1ce485572
37 changed files with 1842 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

213
src/frontend/components/circuit-tree-preview.tsx Normal file
View file

@ -0,0 +1,213 @@
"use client";
import { useEffect, useState } from "react";
import { Fragment } from "react";
import { getCircuitTree } from "../utils/api";
import type { CircuitTreeCircuitDto, CircuitTreeResponseDto } from "../types";
function formatNumber(value: number | undefined, digits = 2) {
if (value === undefined || Number.isNaN(value)) {
return "-";
}
return new Intl.NumberFormat("de-DE", {
minimumFractionDigits: digits,
maximumFractionDigits: digits,
}).format(value);
}
function renderCircuitSummaryLabel(circuit: CircuitTreeCircuitDto) {
if (circuit.displayName?.trim()) {
return circuit.displayName;
}
if (circuit.deviceRows.length > 1) {
return `${circuit.deviceRows.length} devices`;
}
return "Reserve";
}
export function CircuitTreePreview(props: { projectId: string; circuitListId: string }) {
const { projectId, circuitListId } = props;
const [data, setData] = useState<CircuitTreeResponseDto | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setIsLoading(true);
setError(null);
getCircuitTree(projectId, circuitListId)
.then(setData)
.catch((err: unknown) =>
setError(err instanceof Error ? err.message : "Circuit tree could not be loaded.")
)
.finally(() => setIsLoading(false));
}, [projectId, circuitListId]);
if (isLoading) {
return <div className="alert alert-info">Loading circuit tree...</div>;
}
if (error) {
return <div className="alert alert-danger">{error}</div>;
}
if (!data || !data.sections.length) {
return <div className="alert alert-secondary">No sections or circuits available.</div>;
}
const hasAnyCircuits = data.sections.some((section) => section.circuits.length > 0);
if (!hasAnyCircuits) {
return <div className="alert alert-secondary">Sections exist, but no circuits were found yet.</div>;
}
return (
<div className="card shadow-sm">
<div className="card-body">
<div className="table-responsive">
<table className="table table-sm align-middle circuit-tree-table">
<thead>
<tr>
<th>Equipment identifier</th>
<th>Display name</th>
<th>Phase type</th>
<th>Connection kind</th>
<th>Cost group</th>
<th>Category</th>
<th>Level</th>
<th>Room number</th>
<th>Room name</th>
<th className="text-end">Quantity</th>
<th className="text-end">Power / unit</th>
<th className="text-end">Simultaneity</th>
<th className="text-end">cosPhi</th>
<th className="text-end">Row total</th>
<th className="text-end">Circuit total</th>
<th>Protection type</th>
<th className="text-end">Protection current</th>
<th>Protection characteristic</th>
<th>Cable type</th>
<th>Cable cross-section</th>
<th className="text-end">Cable length</th>
<th>Remark</th>
</tr>
</thead>
<tbody>
{data.sections.map((section) => (
<SectionRows key={section.id} section={section} />
))}
</tbody>
</table>
</div>
</div>
</div>
);
}
function SectionRows(props: { section: CircuitTreeResponseDto["sections"][number] }) {
const { section } = props;
return (
<>
<tr className="section-row">
<td colSpan={22}>
<strong>{section.displayName}</strong>
</td>
</tr>
{section.circuits.map((circuit) => {
if (circuit.deviceRows.length === 0) {
return (
<tr key={circuit.id} className="reserve-row">
<td>{circuit.equipmentIdentifier}</td>
<td>{circuit.displayName?.trim() || "Reserve"}</td>
<td colSpan={12}>-</td>
<td className="text-end">{formatNumber(circuit.circuitTotalPower)}</td>
<td>{circuit.protectionType ?? "-"}</td>
<td className="text-end">{formatNumber(circuit.protectionRatedCurrent)}</td>
<td>{circuit.protectionCharacteristic ?? "-"}</td>
<td>{circuit.cableType ?? "-"}</td>
<td>{circuit.cableCrossSection ?? "-"}</td>
<td className="text-end">{formatNumber(circuit.cableLength)}</td>
<td>{circuit.remark ?? "-"}</td>
</tr>
);
}
if (circuit.deviceRows.length === 1) {
const row = circuit.deviceRows[0];
return (
<tr key={circuit.id} className={circuit.isReserve ? "reserve-row" : ""}>
<td>{circuit.equipmentIdentifier}</td>
<td>{row.displayName || row.name}</td>
<td>{row.phaseType ?? "-"}</td>
<td>{row.connectionKind ?? "-"}</td>
<td>{row.costGroup ?? "-"}</td>
<td>{row.category ?? "-"}</td>
<td>{row.level ?? "-"}</td>
<td>{row.roomNumberSnapshot ?? "-"}</td>
<td>{row.roomNameSnapshot ?? "-"}</td>
<td className="text-end">{formatNumber(row.quantity, 0)}</td>
<td className="text-end">{formatNumber(row.powerPerUnit)}</td>
<td className="text-end">{formatNumber(row.simultaneityFactor)}</td>
<td className="text-end">{formatNumber(row.cosPhi)}</td>
<td className="text-end">{formatNumber(row.rowTotalPower)}</td>
<td className="text-end">{formatNumber(circuit.circuitTotalPower)}</td>
<td>{circuit.protectionType ?? "-"}</td>
<td className="text-end">{formatNumber(circuit.protectionRatedCurrent)}</td>
<td>{circuit.protectionCharacteristic ?? "-"}</td>
<td>{circuit.cableType ?? "-"}</td>
<td>{circuit.cableCrossSection ?? "-"}</td>
<td className="text-end">{formatNumber(circuit.cableLength)}</td>
<td>{row.remark ?? circuit.remark ?? "-"}</td>
</tr>
);
}
return (
<Fragment key={circuit.id}>
<tr key={`${circuit.id}-summary`} className="summary-row">
<td>{circuit.equipmentIdentifier}</td>
<td>{renderCircuitSummaryLabel(circuit)}</td>
<td colSpan={12}>-</td>
<td className="text-end">{formatNumber(circuit.circuitTotalPower)}</td>
<td>{circuit.protectionType ?? "-"}</td>
<td className="text-end">{formatNumber(circuit.protectionRatedCurrent)}</td>
<td>{circuit.protectionCharacteristic ?? "-"}</td>
<td>{circuit.cableType ?? "-"}</td>
<td>{circuit.cableCrossSection ?? "-"}</td>
<td className="text-end">{formatNumber(circuit.cableLength)}</td>
<td>{circuit.remark ?? "-"}</td>
</tr>
{circuit.deviceRows.map((row) => (
<tr key={row.id} className="device-row">
<td className="text-muted"> </td>
<td className="indented-cell">{row.displayName || row.name}</td>
<td>{row.phaseType ?? "-"}</td>
<td>{row.connectionKind ?? "-"}</td>
<td>{row.costGroup ?? "-"}</td>
<td>{row.category ?? "-"}</td>
<td>{row.level ?? "-"}</td>
<td>{row.roomNumberSnapshot ?? "-"}</td>
<td>{row.roomNameSnapshot ?? "-"}</td>
<td className="text-end">{formatNumber(row.quantity, 0)}</td>
<td className="text-end">{formatNumber(row.powerPerUnit)}</td>
<td className="text-end">{formatNumber(row.simultaneityFactor)}</td>
<td className="text-end">{formatNumber(row.cosPhi)}</td>
<td className="text-end">{formatNumber(row.rowTotalPower)}</td>
<td className="text-end">-</td>
<td>-</td>
<td className="text-end">-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td className="text-end">-</td>
<td>{row.remark ?? "-"}</td>
</tr>
))}
</Fragment>
);
})}
<tr className="placeholder-row">
<td>-frei-</td>
<td colSpan={21}>free placeholder</td>
</tr>
</>
);
}