From d16c294ca3b0b1f8465dd958a0aca4766351e221 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 17 Oct 2024 13:51:57 +0200
Subject: [PATCH] =?UTF-8?q?Modulname=20von=20Modal=20=C3=A4ndern=20und=20d?=
 =?UTF-8?q?en=20Modul=20=C3=BCbergeben?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/modales/KueModal.jsx | 31 +++++++++++++++++++++++++++++--
 components/modules/Kue705FO.jsx | 17 ++++++++++++++++-
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/components/modales/KueModal.jsx b/components/modales/KueModal.jsx
index 7977ceb..e1a11e1 100644
--- a/components/modales/KueModal.jsx
+++ b/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
diff --git a/components/modules/Kue705FO.jsx b/components/modules/Kue705FO.jsx
index 0217071..c3755cb 100644
--- a/components/modules/Kue705FO.jsx
+++ b/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]">