Mock Dateien für Knotenpunlkte erstellt

components/main/kabelueberwachung/kue705FO/modals/Knotenpunkte.tsx

@@ -6,6 +6,8 @@ import React, { useEffect, useState } from "react";
 declare global {
   interface Window {
     kueNodeID?: string[];
+    kueLinkID?: string[];
+    kueLinkLength?: number[];
   }
 }
 
@@ -15,6 +17,8 @@ interface Props {
 
 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;
@@ -30,9 +34,9 @@ export default function Knotenpunkte({ slot }: Props) {
     script.async = true;
 
     script.onload = () => {
-      console.log("✅ Script geladen:", scriptUrl);
-      const werte = window.kueNodeID ?? [];
-      setKnotenNamen(werte);
+      setKnotenNamen(window.kueNodeID ?? []);
+      setLinienNamen(window.kueLinkID ?? []);
+      setLinienLaenge(window.kueLinkLength ?? []);
     };
 
     script.onerror = () => {
@@ -40,41 +44,69 @@ export default function Knotenpunkte({ slot }: Props) {
     };
 
     document.body.appendChild(script);
-
     return () => {
       document.body.removeChild(script);
     };
   }, [slot]);
 
   return (
-    <div className="space-y-4">
-      {knotenNamen.map((value, index) => (
-        <div key={index} className="flex gap-2 items-center">
-          <label className="w-24 text-right">Knoten {index + 1}:</label>
-          <input
-            type="text"
-            className="border border-gray-300 rounded px-2 py-1 w-full"
-            value={value}
-            onChange={(e) => {
-              const updated = [...knotenNamen];
-              updated[index] = e.target.value;
-              setKnotenNamen(updated);
-            }}
-          />
+    <div className="space-y-4 text-sm laptop:text-base">
+      {/*
+            <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);
+              }}
+            />
+          </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);
+                }}
+              />
+              <input
+                type="number"
+                min={0}
+                step={0.01}
+                className="border border-gray-200 rounded px-2 py-1 w-full laptop:w-24"
+                value={linienLaenge[index]}
+                onChange={(e) => {
+                  const updated = [...linienLaenge];
+                  updated[index] = parseFloat(e.target.value);
+                  setLinienLaenge(updated);
+                }}
+              />
+              <span className="pl-1">m</span>
+            </div>
+          )}
         </div>
       ))}
-
-      <div className="flex justify-end mt-4">
-        <button
-          onClick={() => {
-            alert("💾 Speichern kommt später – jetzt nur Anzeige.");
-            console.log("Daten zum Speichern:", knotenNamen);
-          }}
-          className="bg-littwin-blue text-white px-4 py-2 rounded shadow hover:bg-blue-600 transition"
-        >
-          💾 Speichern
-        </button>
-      </div>
     </div>
   );
 }