124 lines
3.9 KiB
TypeScript
124 lines
3.9 KiB
TypeScript
"use client";
|
||
// components/modales/kueModal/pages/Knotenpunkte.tsx
|
||
|
||
import React, { useEffect, useState } from "react";
|
||
|
||
declare global {
|
||
interface Window {
|
||
kueNodeID?: string[];
|
||
kueLinkID?: string[];
|
||
kueLinkLength?: number[];
|
||
}
|
||
}
|
||
|
||
interface Props {
|
||
slot: number;
|
||
onClose?: () => void;
|
||
}
|
||
|
||
export default function Knotenpunkte({ slot }: Props) {
|
||
const [knotenNamen, setKnotenNamen] = useState<string[]>(Array(10).fill(""));
|
||
const [linienNamen, setLinienNamen] = useState<string[]>(Array(10).fill(""));
|
||
const [linienLaenge, setLinienLaenge] = useState<number[]>(Array(10).fill(0));
|
||
|
||
useEffect(() => {
|
||
const slotIndex = slot;
|
||
const isDev =
|
||
typeof window !== "undefined" && window.location.hostname === "localhost";
|
||
|
||
const scriptUrl = isDev
|
||
? `/api/cpl/readKnotenpunktAPIHandler?slot=${slotIndex}`
|
||
: `/CPL?/CPL/Service/kueDataKnoten/kueData${slotIndex}.js`;
|
||
|
||
const script = document.createElement("script");
|
||
script.src = scriptUrl;
|
||
script.async = true;
|
||
|
||
script.onload = () => {
|
||
setKnotenNamen(window.kueNodeID ?? []);
|
||
setLinienNamen(window.kueLinkID ?? []);
|
||
setLinienLaenge(window.kueLinkLength ?? []);
|
||
};
|
||
|
||
script.onerror = () => {
|
||
console.error("❌ Fehler beim Laden von:", scriptUrl);
|
||
};
|
||
|
||
document.body.appendChild(script);
|
||
return () => {
|
||
document.body.removeChild(script);
|
||
};
|
||
}, [slot]);
|
||
|
||
return (
|
||
<div
|
||
className="space-y-2 text-sm laptop:text-base"
|
||
style={{ maxHeight: "calc(75vh - 4rem)", overflowY: "auto" }}
|
||
>
|
||
{/*
|
||
<h2 className="text-base laptop:text-lg font-semibold">
|
||
Knotenpunkte & Verbindungen – Slot {slot + 1}
|
||
</h2>
|
||
*/}
|
||
|
||
{knotenNamen.map((knoten, index) => (
|
||
<div key={`knoten-${index}`} className="space-y-1">
|
||
<div className="flex flex-col laptop:flex-row laptop:items-center gap-1 laptop:gap-2">
|
||
<label className="w-full laptop:w-28 text-left laptop:text-right shrink-0">
|
||
Knoten {index + 1}:
|
||
</label>
|
||
<input
|
||
type="text"
|
||
className="border border-gray-300 rounded px-2 py-1 w-full"
|
||
value={knoten}
|
||
onChange={(e) => {
|
||
const updated = [...knotenNamen];
|
||
updated[index] = e.target.value;
|
||
setKnotenNamen(updated);
|
||
}}
|
||
disabled
|
||
/>
|
||
</div>
|
||
|
||
{index < 9 && (
|
||
<div className="flex flex-col laptop:flex-row laptop:items-center laptop:ml-10 gap-1 laptop:gap-2 text-gray-600 text-xs laptop:text-sm">
|
||
<span className="w-full laptop:w-28 text-left laptop:text-right shrink-0">
|
||
↳ Verbindung:
|
||
</span>
|
||
<input
|
||
type="text"
|
||
className="border border-gray-200 rounded px-2 py-1 w-full laptop:w-1/2"
|
||
value={linienNamen[index]}
|
||
onChange={(e) => {
|
||
const updated = [...linienNamen];
|
||
updated[index] = e.target.value;
|
||
setLinienNamen(updated);
|
||
}}
|
||
disabled
|
||
/>
|
||
<div className="relative w-full laptop:w-24">
|
||
<input
|
||
type="number"
|
||
min={0}
|
||
step={0.01}
|
||
className="border border-gray-200 rounded px-2 py-1 pr-12 w-full text-right"
|
||
value={linienLaenge[index]}
|
||
onChange={(e) => {
|
||
const updated = [...linienLaenge];
|
||
updated[index] = parseFloat(e.target.value);
|
||
setLinienLaenge(updated);
|
||
}}
|
||
disabled
|
||
/>
|
||
<span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
|
||
m
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|