forked from jappel/leistungsbilanz-ts
Remove circuit structure preview
This commit is contained in:
parent
1eed19ef6b
commit
facf788ce8
5 changed files with 2 additions and 294 deletions
|
|
@ -1,219 +0,0 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Fragment } from "react";
|
||||
import { getCircuitTree } from "../utils/api";
|
||||
import type { CircuitTreeCircuitDto, CircuitTreeResponseDto } from "../types";
|
||||
import {
|
||||
formatCellValue,
|
||||
formatValue,
|
||||
getCircuitSectionLabel,
|
||||
} from "../utils/circuit-grid-model";
|
||||
|
||||
function renderCircuitSummaryLabel(circuit: CircuitTreeCircuitDto) {
|
||||
if (circuit.displayName?.trim()) {
|
||||
return circuit.displayName;
|
||||
}
|
||||
if (circuit.deviceRows.length > 1) {
|
||||
return `${circuit.deviceRows.length} Geräte`;
|
||||
}
|
||||
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 : "Die Stromkreisstruktur konnte nicht geladen werden.")
|
||||
)
|
||||
.finally(() => setIsLoading(false));
|
||||
}, [projectId, circuitListId]);
|
||||
|
||||
if (isLoading) {
|
||||
return <div className="alert alert-info">Stromkreisstruktur wird geladen …</div>;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div className="alert alert-danger">{error}</div>;
|
||||
}
|
||||
|
||||
if (!data || !data.sections.length) {
|
||||
return <div className="alert alert-secondary">Keine Bereiche oder Stromkreise vorhanden.</div>;
|
||||
}
|
||||
|
||||
const hasAnyCircuits = data.sections.some((section) => section.circuits.length > 0);
|
||||
if (!hasAnyCircuits) {
|
||||
return <div className="alert alert-secondary">Bereiche sind vorhanden, enthalten aber noch keine Stromkreise.</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>Betriebsmittelkennzeichen</th>
|
||||
<th>Anzeigename</th>
|
||||
<th>Phasenart</th>
|
||||
<th>Anschlussart</th>
|
||||
<th>Kostengruppe</th>
|
||||
<th>Kategorie</th>
|
||||
<th>Ebene</th>
|
||||
<th>Raumnummer</th>
|
||||
<th>Raumname</th>
|
||||
<th className="text-end">Anzahl</th>
|
||||
<th className="text-end">Leistung / Gerät [kW]</th>
|
||||
<th className="text-end">Gleichzeitigkeit</th>
|
||||
<th className="text-end">cos φ</th>
|
||||
<th className="text-end">Gesamtsumme [kW]</th>
|
||||
<th>Schutzart</th>
|
||||
<th className="text-end">Bemessungsstrom</th>
|
||||
<th>Charakteristik</th>
|
||||
<th>Kabeltyp</th>
|
||||
<th>Kabelquerschnitt</th>
|
||||
<th className="text-end">Kabellänge</th>
|
||||
<th>Bemerkung</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={21}>
|
||||
<strong>{getCircuitSectionLabel(section)}</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={11}>-</td>
|
||||
<td className="text-end">
|
||||
{formatCellValue(circuit.circuitTotalPower, "circuitTotalPower")}
|
||||
</td>
|
||||
<td>{circuit.protectionDevice?.type ?? "-"}</td>
|
||||
<td className="text-end">
|
||||
{formatValue(circuit.protectionDevice?.ratedCurrentA, "protectionRatedCurrent")}
|
||||
</td>
|
||||
<td>{circuit.protectionDevice?.tripCharacteristic ?? circuit.protectionDevice?.fuseUtilizationCategory ?? "-"}</td>
|
||||
<td>{circuit.cableType ?? "-"}</td>
|
||||
<td>{circuit.cableCrossSection ?? "-"}</td>
|
||||
<td className="text-end">{formatValue(circuit.cableLength, "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>{formatValue(row.phaseType ?? undefined, "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">{formatCellValue(row.quantity, "quantity")}</td>
|
||||
<td className="text-end">{formatCellValue(row.powerPerUnit, "powerPerUnit")}</td>
|
||||
<td className="text-end">
|
||||
{formatValue(row.simultaneityFactor, "simultaneityFactor")}
|
||||
</td>
|
||||
<td className="text-end">{formatValue(row.cosPhi, "cosPhi")}</td>
|
||||
<td className="text-end">{formatCellValue(row.rowTotalPower, "rowTotalPower")}</td>
|
||||
<td>{circuit.protectionDevice?.type ?? "-"}</td>
|
||||
<td className="text-end">
|
||||
{formatValue(circuit.protectionDevice?.ratedCurrentA, "protectionRatedCurrent")}
|
||||
</td>
|
||||
<td>{circuit.protectionDevice?.tripCharacteristic ?? circuit.protectionDevice?.fuseUtilizationCategory ?? "-"}</td>
|
||||
<td>{circuit.cableType ?? "-"}</td>
|
||||
<td>{circuit.cableCrossSection ?? "-"}</td>
|
||||
<td className="text-end">{formatValue(circuit.cableLength, "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={11}>-</td>
|
||||
<td className="text-end">
|
||||
{formatCellValue(circuit.circuitTotalPower, "circuitTotalPower")}
|
||||
</td>
|
||||
<td>{circuit.protectionDevice?.type ?? "-"}</td>
|
||||
<td className="text-end">
|
||||
{formatValue(circuit.protectionDevice?.ratedCurrentA, "protectionRatedCurrent")}
|
||||
</td>
|
||||
<td>{circuit.protectionDevice?.tripCharacteristic ?? circuit.protectionDevice?.fuseUtilizationCategory ?? "-"}</td>
|
||||
<td>{circuit.cableType ?? "-"}</td>
|
||||
<td>{circuit.cableCrossSection ?? "-"}</td>
|
||||
<td className="text-end">{formatValue(circuit.cableLength, "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>{formatValue(row.phaseType ?? undefined, "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">{formatCellValue(row.quantity, "quantity")}</td>
|
||||
<td className="text-end">{formatCellValue(row.powerPerUnit, "powerPerUnit")}</td>
|
||||
<td className="text-end">
|
||||
{formatValue(row.simultaneityFactor, "simultaneityFactor")}
|
||||
</td>
|
||||
<td className="text-end">{formatValue(row.cosPhi, "cosPhi")}</td>
|
||||
<td className="text-end">{formatCellValue(row.rowTotalPower, "rowTotalPower")}</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={20}>Freie Zeile</td>
|
||||
</tr>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue