forked from jappel/leistungsbilanz-ts
666 lines
34 KiB
TypeScript
666 lines
34 KiB
TypeScript
"use client";
|
||
|
||
import React, { useEffect, useMemo, useState, type FormEvent } from "react";
|
||
import {
|
||
createDefaultExternalCsvConfiguration,
|
||
type ExternalCsvConfiguration,
|
||
type ExternalCsvFamilyTypeRule,
|
||
} from "../../external-model/csv/external-csv-contracts";
|
||
import type {
|
||
CreateProjectDeviceInput,
|
||
CreateRoomInput,
|
||
ExternalCsvPreviewDto,
|
||
ExternalInitialImportPlanDto,
|
||
ProjectDeviceCommandResultDto,
|
||
ProjectRoomCommandResultDto,
|
||
} from "../types";
|
||
import {
|
||
applyExternalInitialImport,
|
||
getExternalCsvConfiguration,
|
||
planExternalInitialImport,
|
||
previewExternalCsv,
|
||
updateExternalCsvConfiguration,
|
||
} from "../utils/api";
|
||
import { FormModal } from "./form-modal";
|
||
import { ProjectDeviceModal } from "./project-device-modal";
|
||
import { RoomModal } from "./room-modal";
|
||
|
||
interface RevitCsvModalProps {
|
||
currentRevision: number;
|
||
onClose: () => void;
|
||
onCreateProjectDevice: (
|
||
input: CreateProjectDeviceInput
|
||
) => Promise<ProjectDeviceCommandResultDto>;
|
||
onCreateRoom: (input: CreateRoomInput) => Promise<ProjectRoomCommandResultDto>;
|
||
onRevisionChange: (currentRevision: number) => void;
|
||
projectId: string;
|
||
}
|
||
|
||
const defaultConfiguration = createDefaultExternalCsvConfiguration({
|
||
ifcGuid: "IfcGUID",
|
||
roomNumber: "MEP-Raum: Nummer",
|
||
roomName: "MEP-Raum: Name",
|
||
familyAndType: "Familie und Typ",
|
||
selectionMarker: "CAx_Auswahlkenner",
|
||
circuitIdentifier: "kbp_Stromkreisnummer",
|
||
power: "kbp-E-Elektrische Leistung",
|
||
quantity: null,
|
||
});
|
||
defaultConfiguration.additionalSourceMappings = [
|
||
{ sourceColumn: "CAx_Anmerkung", targetField: "sourceRemark" },
|
||
{ sourceColumn: "kbp-E-Spannung", targetField: "sourceVoltage" },
|
||
{ sourceColumn: "kbp-E-Stromstärke", targetField: "sourceCurrent" },
|
||
{ sourceColumn: "kbp-E-Versorgung von ELT", targetField: "sourceElectricalSupply" },
|
||
{ sourceColumn: "kbp-E-Versorgung von MSR/GLT", targetField: "sourceControlSupply" },
|
||
];
|
||
|
||
const columnFields = [
|
||
["ifcGuid", "IFC-GUID"],
|
||
["roomNumber", "Raumnummer"],
|
||
["roomName", "Raumname"],
|
||
["familyAndType", "Familie und Typ"],
|
||
["selectionMarker", "CAx-Auswahlkenner"],
|
||
["circuitIdentifier", "Stromkreiskennzeichnung"],
|
||
["power", "Elektrische Leistung"],
|
||
["quantity", "Menge (optional)"],
|
||
] as const;
|
||
|
||
export function RevitCsvModal({
|
||
currentRevision,
|
||
onClose,
|
||
onCreateProjectDevice,
|
||
onCreateRoom,
|
||
onRevisionChange,
|
||
projectId,
|
||
}: RevitCsvModalProps) {
|
||
const [configuration, setConfiguration] = useState<ExternalCsvConfiguration>(
|
||
structuredClone(defaultConfiguration)
|
||
);
|
||
const [savedConfiguration, setSavedConfiguration] = useState<string | null>(null);
|
||
const [file, setFile] = useState<File | null>(null);
|
||
const [preview, setPreview] = useState<ExternalCsvPreviewDto | null>(null);
|
||
const [importPlan, setImportPlan] = useState<ExternalInitialImportPlanDto | null>(null);
|
||
const [roomDecisions, setRoomDecisions] = useState<Record<string, { roomId: string | null; defaultDistributionBoardId: string | null }>>({});
|
||
const [familyLinks, setFamilyLinks] = useState<Record<string, string | null>>({});
|
||
const [sourceName, setSourceName] = useState("Revit-Gesamtmodell");
|
||
const [success, setSuccess] = useState<string | null>(null);
|
||
const [isLoading, setIsLoading] = useState(true);
|
||
const [isSaving, setIsSaving] = useState(false);
|
||
const [isPreviewing, setIsPreviewing] = useState(false);
|
||
const [isPlanning, setIsPlanning] = useState(false);
|
||
const [isApplying, setIsApplying] = useState(false);
|
||
const [isCreatingCatalogEntry, setIsCreatingCatalogEntry] = useState(false);
|
||
const [newRoomSourceKey, setNewRoomSourceKey] = useState<string | null>(null);
|
||
const [newProjectDeviceFamily, setNewProjectDeviceFamily] = useState<string | null>(null);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
getExternalCsvConfiguration(projectId)
|
||
.then(({ configuration: stored }) => {
|
||
const next = stored?.configuration ?? structuredClone(defaultConfiguration);
|
||
setConfiguration(next);
|
||
setSavedConfiguration(stored ? JSON.stringify(next) : null);
|
||
})
|
||
.catch((reason: unknown) =>
|
||
setError(reason instanceof Error ? reason.message : "Konfiguration konnte nicht geladen werden.")
|
||
)
|
||
.finally(() => setIsLoading(false));
|
||
}, [projectId]);
|
||
|
||
const isDirty = savedConfiguration !== JSON.stringify(configuration);
|
||
|
||
function replaceConfiguration(next: ExternalCsvConfiguration) {
|
||
setConfiguration(next);
|
||
setPreview(null);
|
||
setImportPlan(null);
|
||
setSuccess(null);
|
||
}
|
||
|
||
async function handleSave(event: FormEvent<HTMLFormElement>) {
|
||
event.preventDefault();
|
||
setIsSaving(true);
|
||
setError(null);
|
||
try {
|
||
const result = await updateExternalCsvConfiguration(
|
||
projectId,
|
||
currentRevision,
|
||
configuration
|
||
);
|
||
setSavedConfiguration(JSON.stringify(result.configuration.configuration));
|
||
setImportPlan(null);
|
||
onRevisionChange(result.history.currentRevision);
|
||
} catch (reason) {
|
||
setError(reason instanceof Error ? reason.message : "Konfiguration konnte nicht gespeichert werden.");
|
||
} finally {
|
||
setIsSaving(false);
|
||
}
|
||
}
|
||
|
||
async function handlePreview() {
|
||
if (!file || isDirty || savedConfiguration === null) return;
|
||
setIsPreviewing(true);
|
||
setError(null);
|
||
try {
|
||
const contentBase64 = await fileToBase64(file);
|
||
setPreview(await previewExternalCsv(projectId, file.name, contentBase64));
|
||
setImportPlan(null);
|
||
setSuccess(null);
|
||
} catch (reason) {
|
||
setPreview(null);
|
||
setError(reason instanceof Error ? reason.message : "CSV-Vorschau konnte nicht erstellt werden.");
|
||
} finally {
|
||
setIsPreviewing(false);
|
||
}
|
||
}
|
||
|
||
async function handlePlanImport() {
|
||
if (!file || !preview || isDirty || savedConfiguration === null) return;
|
||
setIsPlanning(true);
|
||
setError(null);
|
||
try {
|
||
const contentBase64 = await fileToBase64(file);
|
||
const plan = await planExternalInitialImport(projectId, file.name, contentBase64);
|
||
if (plan.sha256 !== preview.sha256) {
|
||
throw new Error("Die Datei stimmt nicht mehr mit der Vorschau überein.");
|
||
}
|
||
setImportPlan(plan);
|
||
setRoomDecisions(Object.fromEntries(plan.sourceRooms.map((room) => [
|
||
room.sourceRoomKey,
|
||
{ roomId: room.suggestedRoomId, defaultDistributionBoardId: null },
|
||
])));
|
||
setFamilyLinks(Object.fromEntries(plan.familyGroups.map((group) => [
|
||
group.familyAndType,
|
||
null,
|
||
])));
|
||
} catch (reason) {
|
||
setImportPlan(null);
|
||
setError(reason instanceof Error ? reason.message : "Erstimport konnte nicht geplant werden.");
|
||
} finally {
|
||
setIsPlanning(false);
|
||
}
|
||
}
|
||
|
||
async function handleApplyImport() {
|
||
if (!file || !importPlan) return;
|
||
if (!window.confirm(
|
||
`${importPlan.objectCount} Revit-Objekte jetzt als einen rückgängig machbaren Import übernehmen?`
|
||
)) return;
|
||
setIsApplying(true);
|
||
setError(null);
|
||
try {
|
||
const contentBase64 = await fileToBase64(file);
|
||
const result = await applyExternalInitialImport(projectId, {
|
||
expectedRevision: currentRevision,
|
||
expectedConfigurationVersion: importPlan.configurationVersion,
|
||
expectedSha256: importPlan.sha256,
|
||
fileName: file.name,
|
||
contentBase64,
|
||
sourceName,
|
||
roomDecisions: importPlan.sourceRooms.map((room) => ({
|
||
sourceRoomKey: room.sourceRoomKey,
|
||
roomId: roomDecisions[room.sourceRoomKey]?.roomId ?? null,
|
||
defaultDistributionBoardId:
|
||
roomDecisions[room.sourceRoomKey]?.defaultDistributionBoardId ?? null,
|
||
})),
|
||
familyProjectDeviceDecisions: importPlan.familyGroups.map((group) => ({
|
||
familyAndType: group.familyAndType,
|
||
projectDeviceId: familyLinks[group.familyAndType] ?? null,
|
||
})),
|
||
});
|
||
onRevisionChange(result.history.currentRevision);
|
||
setSuccess(`${result.import.objectCount} Revit-Objekte wurden übernommen.`);
|
||
setImportPlan(null);
|
||
setPreview(null);
|
||
} catch (reason) {
|
||
setError(reason instanceof Error ? reason.message : "Erstimport konnte nicht übernommen werden.");
|
||
} finally {
|
||
setIsApplying(false);
|
||
}
|
||
}
|
||
|
||
function updateColumn(key: (typeof columnFields)[number][0], value: string) {
|
||
setConfiguration((current) => ({
|
||
...current,
|
||
columns: { ...current.columns, [key]: key === "quantity" && !value.trim() ? null : value },
|
||
}));
|
||
setPreview(null);
|
||
setImportPlan(null);
|
||
}
|
||
|
||
async function handleCreateRoom(input: CreateRoomInput) {
|
||
if (!newRoomSourceKey) return;
|
||
setIsCreatingCatalogEntry(true);
|
||
setError(null);
|
||
try {
|
||
const result = await onCreateRoom(input);
|
||
setImportPlan((current) => current ? {
|
||
...current,
|
||
existing: {
|
||
...current.existing,
|
||
rooms: [...current.existing.rooms, result.room],
|
||
},
|
||
} : current);
|
||
setRoomDecisions((current) => ({
|
||
...current,
|
||
[newRoomSourceKey]: {
|
||
roomId: result.room.id,
|
||
defaultDistributionBoardId:
|
||
current[newRoomSourceKey]?.defaultDistributionBoardId ?? null,
|
||
},
|
||
}));
|
||
setNewRoomSourceKey(null);
|
||
} catch (reason) {
|
||
setError(reason instanceof Error ? reason.message : "Raum konnte nicht angelegt werden.");
|
||
setNewRoomSourceKey(null);
|
||
} finally {
|
||
setIsCreatingCatalogEntry(false);
|
||
}
|
||
}
|
||
|
||
async function handleCreateProjectDevice(input: CreateProjectDeviceInput) {
|
||
if (!newProjectDeviceFamily) return;
|
||
setIsCreatingCatalogEntry(true);
|
||
setError(null);
|
||
try {
|
||
const result = await onCreateProjectDevice(input);
|
||
setImportPlan((current) => current ? {
|
||
...current,
|
||
existing: {
|
||
...current.existing,
|
||
projectDevices: [...current.existing.projectDevices, result.projectDevice],
|
||
},
|
||
} : current);
|
||
setFamilyLinks((current) => ({
|
||
...current,
|
||
[newProjectDeviceFamily]: result.projectDevice.id,
|
||
}));
|
||
setNewProjectDeviceFamily(null);
|
||
} catch (reason) {
|
||
setError(reason instanceof Error ? reason.message : "ProjectDevice konnte nicht angelegt werden.");
|
||
setNewProjectDeviceFamily(null);
|
||
} finally {
|
||
setIsCreatingCatalogEntry(false);
|
||
}
|
||
}
|
||
|
||
if (newRoomSourceKey && importPlan) {
|
||
const sourceRoom = importPlan.sourceRooms.find((room) => room.sourceRoomKey === newRoomSourceKey);
|
||
if (sourceRoom) {
|
||
return (
|
||
<RoomModal
|
||
floors={importPlan.existing.floors.map((floor) => ({ ...floor, projectId }))}
|
||
initialValues={{ roomNumber: sourceRoom.roomNumber, roomName: sourceRoom.roomName }}
|
||
isSaving={isCreatingCatalogEntry}
|
||
onClose={() => setNewRoomSourceKey(null)}
|
||
onSave={handleCreateRoom}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
|
||
if (newProjectDeviceFamily && importPlan) {
|
||
const group = importPlan.familyGroups.find((entry) => entry.familyAndType === newProjectDeviceFamily);
|
||
if (group) {
|
||
return (
|
||
<ProjectDeviceModal
|
||
globalDevices={[]}
|
||
initialValues={createRevitProjectDevicePrefill(importPlan, group.familyAndType)}
|
||
isSaving={isCreatingCatalogEntry}
|
||
onClose={() => setNewProjectDeviceFamily(null)}
|
||
onImportGlobal={async () => undefined}
|
||
onSave={handleCreateProjectDevice}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<FormModal
|
||
description="Projektweites Mapping speichern und Revit-CSV ohne Datenübernahme prüfen."
|
||
dialogSize="viewport"
|
||
isSaving={isSaving || isApplying}
|
||
onClose={onClose}
|
||
onSubmit={handleSave}
|
||
submitDisabled={isLoading || isPreviewing || isPlanning || isApplying || !isDirty}
|
||
submitLabel="Konfiguration speichern"
|
||
title="Revit-CSV"
|
||
>
|
||
{error ? <div className="alert alert-warning">{error}</div> : null}
|
||
{success ? <div className="alert alert-success">{success}</div> : null}
|
||
{isLoading ? <p>Konfiguration wird geladen …</p> : (
|
||
<div className="d-grid gap-4">
|
||
<section>
|
||
<h3 className="h6">Transport</h3>
|
||
<div className="row g-3">
|
||
<Field label="Encoding"><select className="form-select" disabled value={configuration.encoding}><option value="utf-8">UTF-8</option></select></Field>
|
||
<Field label="Trennzeichen"><select className="form-select" value={configuration.delimiter} onChange={(event) => replaceConfiguration({ ...configuration, delimiter: event.target.value as ExternalCsvConfiguration["delimiter"] })}><option value=";">Semikolon (;)</option><option value=",">Komma (,)</option><option value="\t">Tabulator</option></select></Field>
|
||
<Field label="Dezimaltrennzeichen"><select className="form-select" value={configuration.decimalSeparator} onChange={(event) => replaceConfiguration({ ...configuration, decimalSeparator: event.target.value as "," | "." })}><option value=",">Komma</option><option value=".">Punkt</option></select></Field>
|
||
<Field label="Leistungseinheit"><select className="form-select" value={configuration.powerUnit} onChange={(event) => replaceConfiguration({ ...configuration, powerUnit: event.target.value as "W" | "kW", wattsPerSourceUnit: event.target.value === "kW" ? 1000 : 1 })}><option value="W">Watt</option><option value="kW">Kilowatt</option></select></Field>
|
||
<Field label="Umrechnung in Watt"><input className="form-control" min="0.000001" step="any" type="number" value={configuration.wattsPerSourceUnit} onChange={(event) => replaceConfiguration({ ...configuration, wattsPerSourceUnit: Number(event.target.value) })} /></Field>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<h3 className="h6">Spaltenzuordnung</h3>
|
||
<div className="row g-3">
|
||
{columnFields.map(([key, label]) => (
|
||
<Field key={key} label={label}>
|
||
<input className="form-control" value={configuration.columns[key] ?? ""} onChange={(event) => updateColumn(key, event.target.value)} />
|
||
</Field>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
<AdditionalMappings configuration={configuration} onChange={(additionalSourceMappings) => replaceConfiguration({ ...configuration, additionalSourceMappings })} />
|
||
<FamilyRules configuration={configuration} onChange={(familyTypeRules) => replaceConfiguration({ ...configuration, familyTypeRules })} />
|
||
|
||
<section className="border-top pt-3">
|
||
<h3 className="h6">CSV prüfen</h3>
|
||
<p className="small text-secondary">Die Vorschau speichert keine Datei und verändert keine Projektdaten.</p>
|
||
<div className="d-flex flex-wrap gap-2 align-items-center">
|
||
<input accept=".csv,text/csv" className="form-control" onChange={(event) => { setFile(event.target.files?.[0] ?? null); setPreview(null); setImportPlan(null); setSuccess(null); }} style={{ maxWidth: 480 }} type="file" />
|
||
<button className="btn btn-outline-primary" disabled={!file || isDirty || savedConfiguration === null || isPreviewing || isSaving} onClick={handlePreview} type="button">{isPreviewing ? "Wird geprüft …" : "Vorschau erstellen"}</button>
|
||
<button className="btn btn-primary" disabled={!preview || isDirty || isPlanning || isPreviewing || isSaving} onClick={handlePlanImport} type="button">{isPlanning ? "Wird geplant …" : "Erstimport planen"}</button>
|
||
</div>
|
||
{isDirty ? <div className="form-text">Vor der Vorschau muss die Konfiguration gespeichert werden.</div> : null}
|
||
</section>
|
||
|
||
{preview ? <PreviewResult preview={preview} /> : null}
|
||
{importPlan ? (
|
||
<RevitCsvImportPlan
|
||
familyLinks={familyLinks}
|
||
isApplying={isApplying}
|
||
onApply={handleApplyImport}
|
||
onCreateProjectDevice={setNewProjectDeviceFamily}
|
||
onCreateRoom={setNewRoomSourceKey}
|
||
onFamilyLinkChange={(familyAndType, projectDeviceId) => setFamilyLinks((current) => ({ ...current, [familyAndType]: projectDeviceId }))}
|
||
onRoomDecisionChange={(sourceRoomKey, decision) => setRoomDecisions((current) => ({ ...current, [sourceRoomKey]: decision }))}
|
||
plan={importPlan}
|
||
roomDecisions={roomDecisions}
|
||
setSourceName={setSourceName}
|
||
sourceName={sourceName}
|
||
/>
|
||
) : null}
|
||
</div>
|
||
)}
|
||
</FormModal>
|
||
);
|
||
}
|
||
|
||
function Field({ children, label }: { children: React.ReactNode; label: string }) {
|
||
return <label className="col-12 col-md-6"><span className="form-label">{label}</span>{children}</label>;
|
||
}
|
||
|
||
function AdditionalMappings({ configuration, onChange }: { configuration: ExternalCsvConfiguration; onChange: (value: ExternalCsvConfiguration["additionalSourceMappings"]) => void }) {
|
||
return <section><div className="d-flex justify-content-between align-items-center"><h3 className="h6 mb-0">Weitere Quellfelder</h3><button className="btn btn-sm btn-outline-secondary" onClick={() => onChange([...configuration.additionalSourceMappings, { sourceColumn: "", targetField: "" }])} type="button">Zuordnung hinzufügen</button></div><div className="d-grid gap-2 mt-2">{configuration.additionalSourceMappings.map((mapping, index) => <div className="row g-2" key={index}><div className="col"><input aria-label={`Quellspalte ${index + 1}`} className="form-control" placeholder="CSV-Spalte" value={mapping.sourceColumn} onChange={(event) => onChange(configuration.additionalSourceMappings.map((entry, entryIndex) => entryIndex === index ? { ...entry, sourceColumn: event.target.value } : entry))} /></div><div className="col"><input aria-label={`Zielfeld ${index + 1}`} className="form-control" placeholder="Internes Zielfeld" value={mapping.targetField} onChange={(event) => onChange(configuration.additionalSourceMappings.map((entry, entryIndex) => entryIndex === index ? { ...entry, targetField: event.target.value } : entry))} /></div><div className="col-auto"><button aria-label={`Zuordnung ${index + 1} entfernen`} className="btn btn-outline-danger" onClick={() => onChange(configuration.additionalSourceMappings.filter((_, entryIndex) => entryIndex !== index))} type="button">Entfernen</button></div></div>)}</div></section>;
|
||
}
|
||
|
||
function FamilyRules({ configuration, onChange }: { configuration: ExternalCsvConfiguration; onChange: (value: ExternalCsvFamilyTypeRule[]) => void }) {
|
||
const rules = configuration.familyTypeRules;
|
||
function change(index: number, patch: Partial<ExternalCsvFamilyTypeRule>) { onChange(rules.map((rule, ruleIndex) => ruleIndex === index ? { ...rule, ...patch } : rule)); }
|
||
return <section><div className="d-flex justify-content-between align-items-center"><div><h3 className="h6 mb-0">Familie-und-Typ-Regeln</h3><div className="form-text">Exakter Textvergleich; Reihenfolge wird beibehalten.</div></div><button className="btn btn-sm btn-outline-secondary" onClick={() => onChange([...rules, { exactFamilyAndType: "", internalDeviceType: "", connectionKind: null, category: "single_phase", quantityRule: { kind: "fixed", quantity: 1 }, displayNameSuggestion: null }])} type="button">Regel hinzufügen</button></div><div className="d-grid gap-3 mt-2">{rules.map((rule, index) => <div className="border rounded p-3" key={index}><div className="row g-2"><Field label="Exakter Familie-und-Typ-Wert"><input className="form-control" value={rule.exactFamilyAndType} onChange={(event) => change(index, { exactFamilyAndType: event.target.value })} /></Field><Field label="Interner Gerätetyp"><input className="form-control" value={rule.internalDeviceType} onChange={(event) => change(index, { internalDeviceType: event.target.value })} /></Field><Field label="Anschlussart (optional)"><input className="form-control" value={rule.connectionKind ?? ""} onChange={(event) => change(index, { connectionKind: event.target.value || null })} /></Field><Field label="Kategorie"><select className="form-select" value={rule.category} onChange={(event) => change(index, { category: event.target.value as ExternalCsvFamilyTypeRule["category"] })}><option value="lighting">Beleuchtung</option><option value="single_phase">1-phasig</option><option value="three_phase">3-phasig</option></select></Field><Field label="Mengenregel"><select className="form-select" value={rule.quantityRule.kind} onChange={(event) => change(index, { quantityRule: event.target.value === "mapped-column" ? { kind: "mapped-column" } : { kind: "fixed", quantity: 1 } })}><option value="fixed">Feste Menge</option><option disabled={configuration.columns.quantity === null} value="mapped-column">Aus Mengenspalte</option></select></Field>{rule.quantityRule.kind === "fixed" ? <Field label="Feste Menge"><input className="form-control" min="0.001" step="any" type="number" value={rule.quantityRule.quantity} onChange={(event) => change(index, { quantityRule: { kind: "fixed", quantity: Number(event.target.value) } })} /></Field> : null}<Field label="Anzeigename vorschlagen aus"><select className="form-select" value={rule.displayNameSuggestion?.kind ?? "none"} onChange={(event) => change(index, { displayNameSuggestion: event.target.value === "none" ? null : event.target.value === "fixed" ? { kind: "fixed", value: "" } : { kind: event.target.value as "selection-marker" | "family-and-type" } })}><option value="none">Kein Vorschlag</option><option value="selection-marker">CAx-Auswahlkenner</option><option value="family-and-type">Familie und Typ</option><option value="fixed">Fester Text</option></select></Field>{rule.displayNameSuggestion?.kind === "fixed" ? <Field label="Fester Anzeigename"><input className="form-control" value={rule.displayNameSuggestion.value} onChange={(event) => change(index, { displayNameSuggestion: { kind: "fixed", value: event.target.value } })} /></Field> : null}</div><button className="btn btn-sm btn-outline-danger mt-2" onClick={() => onChange(rules.filter((_, ruleIndex) => ruleIndex !== index))} type="button">Regel entfernen</button></div>)}</div></section>;
|
||
}
|
||
|
||
function PreviewResult({ preview }: { preview: ExternalCsvPreviewDto }) {
|
||
const visibleObjects = useMemo(() => preview.objects.slice(0, 25), [preview]);
|
||
return <section className="border-top pt-3"><h3 className="h6">Prüfergebnis</h3><div className="row g-2 mb-3"><Stat label="Objekte" value={preview.objectCount} /><Stat label="Passthrough-Zeilen" value={preview.passthroughCount} /><Stat label="Verdachtszeilen" value={preview.suspectObjectCount} /><Stat label="Kopfzeile" value={preview.headerRowNumber} /></div><p className="small text-secondary text-break mb-2">SHA-256: {preview.sha256}</p><div className="table-responsive"><table className="table table-sm"><thead><tr><th>Zeile</th><th>IFC-GUID</th><th>Raum</th><th>Familie und Typ</th><th>Auswahlkenner</th><th>Stromkreis</th></tr></thead><tbody>{visibleObjects.map((object) => <tr key={object.ifcGuid}><td>{object.rowNumber}</td><td><code>{object.ifcGuid}</code></td><td>{[object.roomNumber, object.roomName].filter(Boolean).join(" · ") || "–"}</td><td>{object.familyAndType || "–"}</td><td>{object.selectionMarker || "–"}</td><td>{object.circuitIdentifier || "–"}</td></tr>)}</tbody></table></div>{preview.objects.length > visibleObjects.length ? <p className="small text-secondary">Es werden die ersten {visibleObjects.length} von {preview.objects.length} Objekten angezeigt.</p> : null}</section>;
|
||
}
|
||
|
||
interface RoomDecision {
|
||
roomId: string | null;
|
||
defaultDistributionBoardId: string | null;
|
||
}
|
||
|
||
export function RevitCsvImportPlan({
|
||
familyLinks,
|
||
isApplying,
|
||
onApply,
|
||
onCreateProjectDevice,
|
||
onCreateRoom,
|
||
onFamilyLinkChange,
|
||
onRoomDecisionChange,
|
||
plan,
|
||
roomDecisions,
|
||
setSourceName,
|
||
sourceName,
|
||
}: {
|
||
familyLinks: Record<string, string | null>;
|
||
isApplying: boolean;
|
||
onApply: () => void;
|
||
onCreateProjectDevice: (familyAndType: string) => void;
|
||
onCreateRoom: (sourceRoomKey: string) => void;
|
||
onFamilyLinkChange: (familyAndType: string, projectDeviceId: string | null) => void;
|
||
onRoomDecisionChange: (sourceRoomKey: string, decision: RoomDecision) => void;
|
||
plan: ExternalInitialImportPlanDto;
|
||
roomDecisions: Record<string, RoomDecision>;
|
||
setSourceName: (value: string) => void;
|
||
sourceName: string;
|
||
}) {
|
||
const hasBlockingIssues = plan.issueCounts.unknownFamilyAndType > 0;
|
||
const warningCount =
|
||
plan.issueCounts.invalidPower +
|
||
plan.issueCounts.invalidQuantity +
|
||
plan.issueCounts.missingRoom +
|
||
plan.suspectObjectCount;
|
||
const floorsById = new Map(plan.existing.floors.map((floor) => [floor.id, floor]));
|
||
|
||
return (
|
||
<section className="border-top pt-3">
|
||
<div className="d-flex flex-wrap justify-content-between gap-2 align-items-start">
|
||
<div>
|
||
<h3 className="h6 mb-1">Erstimport vorbereiten</h3>
|
||
<p className="small text-secondary mb-0">
|
||
Raum- und Gerätekatalog-Zuordnungen werden zusammen mit {plan.objectCount} Revit-Objekten gespeichert.
|
||
Stromkreise und Gerätezeilen entstehen dabei noch nicht.
|
||
</p>
|
||
</div>
|
||
<span className="badge text-bg-secondary">Konfiguration {plan.configurationVersion}</span>
|
||
</div>
|
||
|
||
<div className="row g-2 my-2">
|
||
<Stat label="Quellräume" value={plan.sourceRooms.length} />
|
||
<Stat label="Familien/Typen" value={plan.familyGroups.length} />
|
||
<Stat label="Objekte" value={plan.objectCount} />
|
||
<Stat label="Hinweise" value={warningCount} />
|
||
</div>
|
||
|
||
{hasBlockingIssues ? (
|
||
<div className="alert alert-danger">
|
||
{plan.issueCounts.unknownFamilyAndType} Objekte besitzen noch keine exakte Familie-und-Typ-Regel.
|
||
Ergänze die Regeln oben, speichere die Konfiguration und plane den Import erneut.
|
||
</div>
|
||
) : null}
|
||
{plan.issueCounts.invalidPower > 0 ? <div className="alert alert-warning py-2">Bei {plan.issueCounts.invalidPower} Objekten ist die Leistung ungültig.</div> : null}
|
||
{plan.issueCounts.invalidQuantity > 0 ? <div className="alert alert-warning py-2">Bei {plan.issueCounts.invalidQuantity} Objekten ist die Menge ungültig.</div> : null}
|
||
{plan.issueCounts.missingRoom > 0 ? <div className="alert alert-warning py-2">{plan.issueCounts.missingRoom} Objekte besitzen keine Raumangabe.</div> : null}
|
||
{plan.suspectObjectCount > 0 ? <div className="alert alert-warning py-2">{plan.suspectObjectCount} Objektzeilen wurden als verdächtig erkannt.</div> : null}
|
||
|
||
<label className="form-label mt-2" style={{ maxWidth: 520 }}>
|
||
<span>Bezeichnung des externen Modells</span>
|
||
<input
|
||
className="form-control"
|
||
onChange={(event) => setSourceName(event.target.value)}
|
||
value={sourceName}
|
||
/>
|
||
</label>
|
||
|
||
<h4 className="h6 mt-4">Räume zuordnen</h4>
|
||
<div className="table-responsive">
|
||
<table className="table table-sm align-middle">
|
||
<thead><tr><th>Quellraum</th><th>Objekte</th><th>Treffer</th><th>Interner Raum</th><th>Standardverteilung</th></tr></thead>
|
||
<tbody>
|
||
{plan.sourceRooms.map((sourceRoom) => {
|
||
const decision = roomDecisions[sourceRoom.sourceRoomKey] ?? {
|
||
roomId: sourceRoom.suggestedRoomId,
|
||
defaultDistributionBoardId: null,
|
||
};
|
||
return (
|
||
<tr key={sourceRoom.sourceRoomKey}>
|
||
<td>{[sourceRoom.roomNumber, sourceRoom.roomName].filter(Boolean).join(" · ")}</td>
|
||
<td>{sourceRoom.objectCount}</td>
|
||
<td><RoomMatchBadge status={sourceRoom.matchStatus} /></td>
|
||
<td>
|
||
<div className="input-group input-group-sm">
|
||
<select
|
||
aria-label={`Interner Raum für ${sourceRoom.roomNumber || sourceRoom.roomName}`}
|
||
className="form-select"
|
||
onChange={(event) => onRoomDecisionChange(sourceRoom.sourceRoomKey, {
|
||
...decision,
|
||
roomId: event.target.value || null,
|
||
})}
|
||
value={decision.roomId ?? ""}
|
||
>
|
||
<option value="">Nicht verknüpfen</option>
|
||
{plan.existing.rooms.map((room) => {
|
||
const floor = room.floorId ? floorsById.get(room.floorId) : null;
|
||
return <option key={room.id} value={room.id}>{room.roomNumber} · {room.roomName}{floor ? ` (${floor.name})` : ""}</option>;
|
||
})}
|
||
</select>
|
||
<button
|
||
aria-label={`Raum ${sourceRoom.roomNumber || sourceRoom.roomName} neu anlegen`}
|
||
className="btn btn-outline-secondary"
|
||
onClick={() => onCreateRoom(sourceRoom.sourceRoomKey)}
|
||
type="button"
|
||
>
|
||
Neu
|
||
</button>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<select
|
||
aria-label={`Standardverteilung für ${sourceRoom.roomNumber || sourceRoom.roomName}`}
|
||
className="form-select form-select-sm"
|
||
onChange={(event) => onRoomDecisionChange(sourceRoom.sourceRoomKey, {
|
||
...decision,
|
||
defaultDistributionBoardId: event.target.value || null,
|
||
})}
|
||
value={decision.defaultDistributionBoardId ?? ""}
|
||
>
|
||
<option value="">Keine Standardverteilung</option>
|
||
{plan.existing.distributionBoards.map((board) => <option key={board.id} value={board.id}>{board.name}</option>)}
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<h4 className="h6 mt-4">Familien und Typen zuordnen</h4>
|
||
<div className="table-responsive">
|
||
<table className="table table-sm align-middle">
|
||
<thead><tr><th>Familie und Typ</th><th>Objekte</th><th>Klassifizierung</th><th>ProjectDevice (optional)</th></tr></thead>
|
||
<tbody>
|
||
{plan.familyGroups.map((group) => (
|
||
<tr key={group.familyAndType}>
|
||
<td>{group.familyAndType || "–"}</td>
|
||
<td>{group.objectCount}</td>
|
||
<td>
|
||
{group.classified
|
||
? `${group.internalDeviceType ?? "–"} · ${categoryLabel(group.category)}`
|
||
: <span className="badge text-bg-danger">Regel fehlt</span>}
|
||
</td>
|
||
<td>
|
||
<div className="input-group input-group-sm">
|
||
<select
|
||
aria-label={`ProjectDevice für ${group.familyAndType}`}
|
||
className="form-select"
|
||
onChange={(event) => onFamilyLinkChange(group.familyAndType, event.target.value || null)}
|
||
value={familyLinks[group.familyAndType] ?? ""}
|
||
>
|
||
<option value="">Nicht verknüpfen</option>
|
||
{plan.existing.projectDevices.map((device) => (
|
||
<option key={device.id} value={device.id}>{device.displayName || device.name} · {categoryLabel(device.category)}</option>
|
||
))}
|
||
</select>
|
||
<button
|
||
aria-label={`ProjectDevice für ${group.familyAndType} neu anlegen`}
|
||
className="btn btn-outline-secondary"
|
||
disabled={!group.classified}
|
||
onClick={() => onCreateProjectDevice(group.familyAndType)}
|
||
type="button"
|
||
>
|
||
Neu
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div className="d-flex justify-content-end mt-3">
|
||
<button
|
||
className="btn btn-primary"
|
||
disabled={hasBlockingIssues || isApplying || !sourceName.trim()}
|
||
onClick={onApply}
|
||
type="button"
|
||
>
|
||
{isApplying ? "Import wird übernommen …" : "Erstimport übernehmen"}
|
||
</button>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function RoomMatchBadge({ status }: { status: ExternalInitialImportPlanDto["sourceRooms"][number]["matchStatus"] }) {
|
||
if (status === "exact-number") return <span className="badge text-bg-success">Eindeutig</span>;
|
||
if (status === "ambiguous-number") return <span className="badge text-bg-warning">Mehrdeutig</span>;
|
||
return <span className="badge text-bg-secondary">Neu</span>;
|
||
}
|
||
|
||
function categoryLabel(category: string | null) {
|
||
if (category === "lighting") return "Beleuchtung";
|
||
if (category === "single_phase") return "1-phasig";
|
||
if (category === "three_phase") return "3-phasig";
|
||
return "Ohne Kategorie";
|
||
}
|
||
|
||
export function createRevitProjectDevicePrefill(
|
||
plan: ExternalInitialImportPlanDto,
|
||
familyAndType: string
|
||
): Partial<CreateProjectDeviceInput> {
|
||
const group = plan.familyGroups.find((entry) => entry.familyAndType === familyAndType);
|
||
const firstObject = plan.objects.find(
|
||
(object) => object.sourceValues.familyAndType === familyAndType
|
||
);
|
||
const category = group?.category;
|
||
return {
|
||
name: group?.internalDeviceType || familyAndType || "Revit-Gerät",
|
||
displayName: firstObject?.suggestedPlanningValues.displayName || familyAndType,
|
||
connectionKind: group?.connectionKind ?? undefined,
|
||
category:
|
||
category === "lighting" || category === "three_phase"
|
||
? category
|
||
: "single_phase",
|
||
quantity: firstObject?.suggestedPlanningValues.effectiveQuantity ?? 1,
|
||
powerPerUnit:
|
||
firstObject?.suggestedPlanningValues.powerPerUnitW === null ||
|
||
firstObject?.suggestedPlanningValues.powerPerUnitW === undefined
|
||
? 0.1
|
||
: firstObject.suggestedPlanningValues.powerPerUnitW / 1000,
|
||
simultaneityFactor:
|
||
firstObject?.suggestedPlanningValues.simultaneityFactor ?? 1,
|
||
cosPhi: firstObject?.suggestedPlanningValues.cosPhi ?? undefined,
|
||
costGroup: firstObject?.suggestedPlanningValues.costGroup ?? undefined,
|
||
remark: firstObject?.suggestedPlanningValues.remark ?? undefined,
|
||
};
|
||
}
|
||
|
||
function Stat({ label, value }: { label: string; value: number }) { return <div className="col-6 col-lg-3"><div className="border rounded p-2"><div className="small text-secondary">{label}</div><strong>{value}</strong></div></div>; }
|
||
|
||
function fileToBase64(file: File) {
|
||
return new Promise<string>((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onerror = () => reject(new Error("CSV-Datei konnte nicht gelesen werden."));
|
||
reader.onload = () => {
|
||
const result = String(reader.result ?? "");
|
||
const commaIndex = result.indexOf(",");
|
||
if (commaIndex < 0) reject(new Error("CSV-Datei konnte nicht kodiert werden."));
|
||
else resolve(result.slice(commaIndex + 1));
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
}
|