Modulname von Modal ändern und den Modul übergeben

components/modales/KueModal.jsx

@@ -1,7 +1,7 @@
 import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
 
-function KueModal({ showModal, onClose, slot }) {
+function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   // Verwende ein Array von Bezeichnungen und Isolationsgrenzwerten für 32 Slots
   const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
   const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
@@ -60,6 +60,33 @@ function KueModal({ showModal, onClose, slot }) {
       return updatedGrenzwerte;
     });
   };
+  const handleSave = () => {
+    const newBezeichnung = bezeichnungen[slot];
+    // Angepasstes URL-Format gemäß deinem funktionierenden Test
+    const url = `${
+      process.env.NEXT_PUBLIC_API_BASE_URL
+    }/cpl?Service/kueDetail.HTML&slot=${slot}&KIA${slot}=${encodeURIComponent(
+      newBezeichnung
+    )}`;
+
+    // Fetch-Aufruf, um den neuen Modulnamen zu senden
+    fetch(url, { method: "GET" })
+      .then((response) => {
+        if (response.ok) {
+          alert("Modulname erfolgreich gespeichert!");
+          onModulNameChange(newBezeichnung); // Hier wird die Änderung weitergegeben
+        } else {
+          alert("Fehler beim Speichern des Modulnamens!");
+        }
+      })
+      .catch((error) => {
+        console.error("Fehler:", error);
+        alert("Fehler beim Senden des Modulnamens!");
+      });
+
+    // Schließe das Modal nach dem Speichern
+    onClose();
+  };
 
   return (
     <ReactModal
@@ -188,7 +215,7 @@ function KueModal({ showModal, onClose, slot }) {
       {/* Modal Footer */}
       <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
         <button
-          onClick={onClose}
+          onClick={handleSave}
           className="bg-blue-500 text-white p-2 rounded flex items-center"
         >
           <span className="mr-2">💾</span> Speichern

components/modules/Kue705FO.jsx

@@ -10,6 +10,7 @@ function Kue705FO({
   slotIndex, // Der Index des Slots, für den die Anzeige gilt
   tdrLocation, // Wert für die TDR-Entfernung
 }) {
+  const [currentModulName, setCurrentModulName] = useState(modulName);
   const [activeButton, setActiveButton] = useState("Schleife");
   const [displayText, setDisplayText] = useState("Schleifenwiderstand [kOhm]");
   const [loading, setLoading] = useState(false);
@@ -113,6 +114,10 @@ function Kue705FO({
     }
   };
 
+  const handleModulNameChange = (newName) => {
+    setCurrentModulName(newName); // Aktualisiere den Namen direkt in Kue705FO
+  };
+
   return (
     <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
       {isModulPresent ? (
@@ -137,6 +142,7 @@ function Kue705FO({
               showModal={showModal}
               onClose={handleCloseModal}
               slot={slotIndex}
+              onModulNameChange={handleModulNameChange}
             >
               <h2>Modul Einstellungen</h2>
               <p>Hier kannst du Einstellungen für {modulName} vornehmen.</p>
@@ -163,8 +169,17 @@ function Kue705FO({
             <div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div>
             <div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>
 
+            {/* Modal zum Ändern des Modulnamens */}
+            <KueModal
+              showModal={showModal}
+              onClose={handleCloseModal}
+              slot={slotIndex}
+              onModulNameChange={handleModulNameChange}
+            />
+
+            {/* Modulname */}
             <div className="absolute bottom-[20px] left-[10px] text-black text-[10px] bg-gray-300 p-1 w-[100px] text-center">
-              {modulName || "Test1"}
+              {currentModulName || "Test1"}
             </div>
 
             <div className="absolute bottom-1 right-1 text-black text-[8px]">