83ff40f27f
- Knotenpunkte.tsx angepasst: <script>-basierte Einbindung von kueDataX.js über CGI-Endpoint (/CPL?/CPL/Service/kueDataKnoten/kueDataX.js) - Verwendung von window.kueNodeID zur Anzeige der dynamisch geladenen Daten - Files in Browser DevTools > Sources sichtbar dank echter Script-Einbindung - Platzhalterlose kueDataX.js-Dateien erstellt und eingebunden - Produktionsbuild erfolgreich getestet und in /out-Verzeichnis übertragen
81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
"use client";
|
||
// components/modales/kueModal/pages/Knotenpunkte.tsx
|
||
|
||
import React, { useEffect, useState } from "react";
|
||
|
||
declare global {
|
||
interface Window {
|
||
kueNodeID?: string[];
|
||
}
|
||
}
|
||
|
||
interface Props {
|
||
slot: number;
|
||
}
|
||
|
||
export default function Knotenpunkte({ slot }: Props) {
|
||
const [knotenNamen, setKnotenNamen] = useState<string[]>(Array(10).fill(""));
|
||
|
||
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 = () => {
|
||
console.log("✅ Script geladen:", scriptUrl);
|
||
const werte = window.kueNodeID ?? [];
|
||
setKnotenNamen(werte);
|
||
};
|
||
|
||
script.onerror = () => {
|
||
console.error("❌ Fehler beim Laden von:", scriptUrl);
|
||
};
|
||
|
||
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>
|
||
))}
|
||
|
||
<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>
|
||
);
|
||
}
|