forked from jappel/leistungsbilanz-ts
110 lines
3.4 KiB
TypeScript
110 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
distributionBoardInfoFieldLabels,
|
|
distributionBoardInfoFieldMaxLengths,
|
|
distributionBoardInfoFields,
|
|
type DistributionBoardInfoField,
|
|
} from "../../shared/constants/distribution-board";
|
|
import type { DistributionBoardInfoDto } from "../types";
|
|
|
|
export type DistributionBoardInfoDraft = Record<DistributionBoardInfoField, string>;
|
|
|
|
const placeholders: Record<DistributionBoardInfoField, string> = {
|
|
boardNumber: "z. B. UV 1.1",
|
|
location: "z. B. Raum 003 Technik",
|
|
fedFrom: "z. B. HAK, Zähleranlage, Trafo oder NEA",
|
|
remark: "",
|
|
};
|
|
|
|
export function toDistributionBoardInfoDraft(
|
|
info: DistributionBoardInfoDto
|
|
): DistributionBoardInfoDraft {
|
|
return {
|
|
boardNumber: info.boardNumber ?? "",
|
|
location: info.location ?? "",
|
|
fedFrom: info.fedFrom ?? "",
|
|
remark: info.remark ?? "",
|
|
};
|
|
}
|
|
|
|
export function fromDistributionBoardInfoDraft(
|
|
draft: DistributionBoardInfoDraft
|
|
): DistributionBoardInfoDto {
|
|
const value = (field: DistributionBoardInfoField) =>
|
|
draft[field].trim() ? draft[field].trim() : null;
|
|
return {
|
|
boardNumber: value("boardNumber"),
|
|
location: value("location"),
|
|
fedFrom: value("fedFrom"),
|
|
remark: value("remark"),
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Descriptive board data used by the print view title block. The values are
|
|
* local planning values; a later Revit import may prefill them only through
|
|
* an explicit, previewed decision.
|
|
*/
|
|
export function DistributionBoardInfoCard({
|
|
draft,
|
|
onChange,
|
|
}: {
|
|
draft: DistributionBoardInfoDraft;
|
|
onChange: (draft: DistributionBoardInfoDraft) => void;
|
|
}) {
|
|
return (
|
|
<section
|
|
aria-labelledby="distribution-board-info-heading"
|
|
className="card"
|
|
>
|
|
<div className="card-header" id="distribution-board-info-heading">
|
|
Infokarte
|
|
</div>
|
|
<div className="card-body row g-3">
|
|
{distributionBoardInfoFields.map((field) => (
|
|
<div
|
|
className={field === "remark" ? "col-12" : "col-12 col-md-6"}
|
|
key={field}
|
|
>
|
|
<label
|
|
className="form-label"
|
|
htmlFor={`distribution-board-info-${field}`}
|
|
>
|
|
{distributionBoardInfoFieldLabels[field]}
|
|
</label>
|
|
{field === "remark" ? (
|
|
<textarea
|
|
className="form-control"
|
|
id={`distribution-board-info-${field}`}
|
|
maxLength={distributionBoardInfoFieldMaxLengths[field]}
|
|
onChange={(event) =>
|
|
onChange({ ...draft, [field]: event.target.value })
|
|
}
|
|
rows={2}
|
|
value={draft[field]}
|
|
/>
|
|
) : (
|
|
<input
|
|
className="form-control"
|
|
id={`distribution-board-info-${field}`}
|
|
maxLength={distributionBoardInfoFieldMaxLengths[field]}
|
|
onChange={(event) =>
|
|
onChange({ ...draft, [field]: event.target.value })
|
|
}
|
|
placeholder={placeholders[field]}
|
|
value={draft[field]}
|
|
/>
|
|
)}
|
|
{field === "fedFrom" ? (
|
|
<div className="form-text">
|
|
Für externe Einspeisungen oder ergänzende Hinweise. Eine
|
|
speisende Projektverteilung wird oben logisch verknüpft.
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|