Messkurve mit Chart.js in Modal zeigen , die Daten kommen von json Dateien

app/json/page.jsx

@@ -0,0 +1,20 @@
+"use client"; // Wichtiger Hinweis, wenn du Next.js App Router verwendest
+
+import { useEffect } from "react";
+
+export default function Json() {
+  // Beispielvariable
+  const myVariable = "<%=KIZ0%>";
+
+  // useEffect, um sicherzustellen, dass die Konsole nach dem Laden der Seite ausgeführt wird
+  useEffect(() => {
+    console.log("Die Variable ist: ", myVariable);
+  }, []); // Der leere Array sorgt dafür, dass es nur einmal beim Laden der Komponente ausgeführt wird
+
+  return (
+    <div>
+      <h1>Json Page</h1>
+      <p>Überprüfe die Konsole, um die Variable zu sehen.</p>
+    </div>
+  );
+}

components/modules/Kue705FO.jsx

@@ -1,14 +1,16 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import ReactModal from "react-modal";
+import Chart from "chart.js/auto";
 import KueModal from "../modales/KueModal";
 
 function Kue705FO({
-  isolationswert, // Übergabeparameter für den Isolationswert
+  isolationswert,
-  schleifenwiderstand, // Übergabeparameter für den Schleifenwiderstand
+  schleifenwiderstand,
-  modulName, // Übergabeparameter für den Modulnamen
+  modulName,
-  kueVersion = "V4.19", // Optionaler Parameter für die Version (Standardwert)
+  kueVersion = "V4.19",
-  kueOnline, // Array für den Modulstatus (1: Modul vorhanden, 0: kein Modul)
+  kueOnline,
-  slotIndex, // Der Index des Slots, für den die Anzeige gilt
+  slotIndex,
-  tdrLocation, // Wert für die TDR-Entfernung
+  tdrLocation,
 }) {
   const [currentModulName, setCurrentModulName] = useState(modulName);
   const [activeButton, setActiveButton] = useState("Schleife");
@@ -16,9 +18,11 @@ function Kue705FO({
   const [loading, setLoading] = useState(false);
   const [currentDisplayValue, setCurrentDisplayValue] = useState(
     schleifenwiderstand || "0"
-  ); // Wert, der im unteren Display angezeigt wird
+  );
-  //--Modales Fenster
   const [showModal, setShowModal] = useState(false);
+  const [showChartModal, setShowChartModal] = useState(false); // Modal für die Messkurve
+  const [chartData, setChartData] = useState(null); // State für die geladene Chart-Daten
+
   const handleOpenModal = () => {
     setShowModal(true);
   };
@@ -26,23 +30,83 @@ function Kue705FO({
   const handleCloseModal = () => {
     setShowModal(false);
   };
-  //----
+
-  // Funktion zum Wechseln der Buttons und Anpassen des Anzeigewerts
+  // Funktion zum Anzeigen des Chart-Modals
-  const handleButtonClick = (button) => {
+  const handleOpenChartModal = () => {
-    if (button === "Schleife") {
+    setShowChartModal(true);
-      setActiveButton("Schleife");
+    loadChartData(); // Lade die Daten, wenn das Modal geöffnet wird
-      setDisplayText("Schleifenwiderstand [kOhm]");
+  };
-      setCurrentDisplayValue(schleifenwiderstand || "0");
+
-    } else if (button === "TDR") {
+  const handleCloseChartModal = () => {
-      setActiveButton("TDR");
+    setShowChartModal(false);
-      setDisplayText("Entfernung [Km]");
+  };
-      setCurrentDisplayValue(tdrLocation || "0");
+
-    }
+  // Daten laden und den Chart erstellen
+  const loadChartData = () => {
+    const slot = slotIndex;
+    const fileData = `../cpl?4000values/slot${slot}.json`; // Je nach Slot wird die entsprechende Datei geladen
+
+    fetch(fileData)
+      .then((response) => response.json())
+      .then((data) => {
+        setChartData(data); // Daten setzen
+        createChart(data);
+      })
+      .catch((error) => {
+        console.error("Fehler beim Laden der Messkurvendaten:", error);
+      });
+  };
+
+  // Funktion zum Erstellen des Charts
+  const createChart = (data) => {
+    const ctx = document.getElementById("myChart").getContext("2d");
+
+    new Chart(ctx, {
+      type: "line",
+      data: {
+        labels: data.map((row) => row.t), // Zeitwerte
+        datasets: [
+          {
+            label: "Isolationswiderstand",
+            data: data.map((row) => row.m),
+            borderColor: "#00AEEF",
+            fill: false,
+            yAxisID: "y",
+          },
+          {
+            label: "Schleifenwiderstand",
+            data: data.map((row) => row.n),
+            borderColor: "black",
+            fill: false,
+            yAxisID: "y1",
+          },
+          {
+            label: "Messung gültig",
+            data: data.map((row) => row.v),
+            borderColor: "gray",
+            fill: false,
+            yAxisID: "y1",
+          },
+        ],
+      },
+      options: {
+        scales: {
+          y: {
+            type: "linear",
+            position: "left",
+          },
+          y1: {
+            type: "linear",
+            position: "right",
+          },
+        },
+      },
+    });
   };
 
   // Funktion für die TDR-Messung
   const goTDR = () => {
-    let slot = slotIndex; // Verwende direkt slotIndex, da Slot 0 der erste Slot ist
+    let slot = slotIndex;
 
     if (slot >= 32) {
       return;
@@ -51,7 +115,7 @@ function Kue705FO({
     let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;
     const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
 
-    setLoading(true); // Ladezustand setzen
+    setLoading(true);
     fetch(
       `${apiUrl}/CPL?Service/KUEdetailTDR.ACP&KTT${slotFormat}=1&slot=${slot}`,
       {
@@ -68,12 +132,12 @@ function Kue705FO({
       .catch((error) => {
         console.error("Fehler:", error);
       })
-      .finally(() => setLoading(false)); // Ladezustand wieder deaktivieren
+      .finally(() => setLoading(false));
   };
 
   // Funktion für die Schleifenmessung
   const goLoop = () => {
-    let slot = slotIndex; // Verwende direkt slotIndex
+    let slot = slotIndex;
 
     if (slot >= 32) {
       return;
@@ -82,7 +146,7 @@ function Kue705FO({
     let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;
     const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
 
-    setLoading(true); // Ladezustand setzen
+    setLoading(true);
     fetch(
       `${apiUrl}/CPL?Service/KUEdetail.HTML&KS_${slotFormat}=1&slot=${slot}`,
       {
@@ -99,31 +163,34 @@ function Kue705FO({
       .catch((error) => {
         console.error("Fehler:", error);
       })
-      .finally(() => setLoading(false)); // Ladezustand wieder deaktivieren
+      .finally(() => setLoading(false));
+  };
+
+  const handleModulNameChange = (newName) => {
+    setCurrentModulName(newName);
   };
 
   // Überprüfe, ob ein Modul im Slot vorhanden ist
   const isModulPresent = kueOnline[slotIndex] === 1;
 
-  // Bestimme, welche Funktion ausgeführt wird, basierend auf dem aktiven Button
+  const handleButtonClick = (button) => {
-  const handleRefreshClick = () => {
+    if (button === "Schleife") {
-    if (activeButton === "Schleife") {
+      setActiveButton("Schleife");
-      goLoop(); // Wenn Schleife aktiv ist, starte goLoop
+      setDisplayText("Schleifenwiderstand [kOhm]");
-    } else if (activeButton === "TDR") {
+      setCurrentDisplayValue(schleifenwiderstand || "0");
-      goTDR(); // Wenn TDR aktiv ist, starte goTDR
+    } else if (button === "TDR") {
+      setActiveButton("TDR");
+      setDisplayText("Entfernung [Km]");
+      setCurrentDisplayValue(tdrLocation || "0");
     }
   };
 
-  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 ? (
         <>
           <div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
-            <div className="flex items-start justify-between h-[30px] ">
+            <div className="flex items-start justify-between h-[30px]">
               <div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
                 <span className="text-white text-[10px]">{slotIndex + 1}</span>
               </div>
@@ -137,16 +204,13 @@ function Kue705FO({
                 <span className="text-white text-[20px]">⚙</span>
               </button>
             </div>
-            {/* Modal */}
+
             <KueModal
               showModal={showModal}
               onClose={handleCloseModal}
               slot={slotIndex}
               onModulNameChange={handleModulNameChange}
-            >
+            />
-              <h2>Modul Einstellungen</h2>
-              <p>Hier kannst du Einstellungen für {modulName} vornehmen.</p>
-            </KueModal>
 
             <div className="flex flex-col mt-[10px] ml-[10px]">
               <div className="flex items-center">
@@ -169,15 +233,6 @@ 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">
               {currentModulName || "Test1"}
             </div>
@@ -192,12 +247,10 @@ function Kue705FO({
               {displayText}
             </span>
 
-            {/* Unterer Bereich, der den dynamischen Wert anzeigt */}
             <div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
               <button
-                onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button
+                onClick={() => console.log("Refresh clicked")}
                 className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
-                disabled={loading} // Disable button while loading
               >
                 <span className="text-white text-[18px]">⟳</span>
               </button>
@@ -209,7 +262,6 @@ function Kue705FO({
               </div>
             </div>
 
-            {/* Buttons für Schleife und TDR */}
             <div className="flex mt-2 space-x-1">
               <button
                 onClick={() => handleButtonClick("Schleife")}
@@ -232,12 +284,48 @@ function Kue705FO({
             </div>
 
             <button
-              onClick={() => console.log("Messkurve clicked")}
+              onClick={handleOpenChartModal} // Öffnet das Chart-Modal
               className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1"
             >
               Messkurve
             </button>
           </div>
+
+          {/* Modal für Messkurve */}
+          {showChartModal && (
+            <ReactModal
+              isOpen={showChartModal}
+              onRequestClose={handleCloseChartModal}
+              ariaHideApp={false}
+              style={{
+                overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+                content: {
+                  top: "50%",
+                  left: "50%",
+                  right: "auto",
+                  bottom: "auto",
+                  marginRight: "-50%",
+                  transform: "translate(-50%, -50%)",
+                  width: "90%",
+                  maxWidth: "800px",
+                  height: "600px",
+                  padding: "20px",
+                },
+              }}
+            >
+              <h2>Messkurve Slot {slotIndex + 1}</h2>
+              <canvas
+                id="myChart"
+                style={{ width: "100%", height: "400px" }}
+              ></canvas>
+              <button
+                onClick={handleCloseChartModal}
+                className="bg-red-500 text-white p-2 mt-4"
+              >
+                Schließen
+              </button>
+            </ReactModal>
+          )}
         </>
       ) : (
         <div className="flex items-center justify-center h-full text-gray-500">

package-lock.json

@@ -14,6 +14,7 @@
         "@iconify/react": "^5.0.2",
         "autoprefixer": "^10.4.20",
         "bootstrap-icons": "^1.11.3",
+        "chart.js": "^4.4.5",
         "next": "14.2.13",
         "react": "^18",
         "react-dom": "^18",
@@ -143,6 +144,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@next/env": {
       "version": "14.2.13",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.13.tgz",
@@ -551,6 +557,17 @@
         }
       ]
     },
+    "node_modules/chart.js": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.5.tgz",
+      "integrity": "sha512-CVVjg1RYTJV9OCC8WeJPMx8gsV8K6WIyIEQUE3ui4AR9Hfgls9URri6Ja3hyMVBbTF8Q2KFa19PE815gWcWhng==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "@iconify/react": "^5.0.2",
     "autoprefixer": "^10.4.20",
     "bootstrap-icons": "^1.11.3",
+    "chart.js": "^4.4.5",
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18",

public/placeholder/de.acp

@@ -0,0 +1,3 @@
+var de=[<%=DES80%>,<%=DES81%>,<%=DES82%>,<%=DES83%>];
+var counter=[<%=DEC80%>,<%=DEC81%>,<%=DEC82%>,<%=DEC83%>];
+var flutter=[<%=DEF80%>,<%=DEF81%>,<%=DEF82%>,<%=DEF83%>];

public/placeholder/kueData.js

@@ -0,0 +1,21 @@
+
+var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>];
+var kueIso=[<%=KIM80%>,<%=KIM81%>,<%=KIM82%>,<%=KIM83%>];
+var kueValid=[<%=KIV80%>,<%=KIV81%>,<%=KIV82%>,<%=KIV83%>];
+var kueAlarm1=[<%=KIA80%>,<%=KIA81%>,<%=KIA82%>,<%=KIA83%>];
+var kueAlarm2=[<%=KRA80%>,<%=KRA81%>,<%=KRA82%>,<%=KRA83%>];
+var kueRes=[<%=KRM80%>,<%=KRM81%>,<%=KRM82%>,<%=KRM83%>];
+var kueCableBreak=[<%=KSC80%>,<%=KSC81%>,<%=KSC82%>,<%=KSC83%>];
+var kueGroundFault=[<%=KSG80%>,<%=KSG81%>,<%=KSG82%>,<%=KSG83%>];
+var kueLimit1=[<%=KIG80%>,<%=KIG81%>,<%=KIG82%>,<%=KIG83%>];
+var kueLimit2Low=[<%=KRG80%>,<%=KRG81%>,<%=KRG82%>,<%=KRG83%>];
+var kueLimit2High=[<%=KRH80%>,<%=KRH81%>,<%=KRH82%>,<%=KRH83%>];
+var kueDelay1=[<%=KID80%>,<%=KID81%>,<%=KID82%>,<%=KID83%>];
+var kueLoopInterval=[<%=KRI80%>,<%=KRI81%>,<%=KRI82%>,<%=KRI83%>];
+var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>];
+var kueName=[<%=KSA80%>,<%=KSA81%>,<%=KSA82%>,<%=KSA83%>];
+var kueVersion=[<%=KSV80%>,<%=KSV81%>,<%=KSV82%>,<%=KSV83%>];
+var kueOverflow=[<%=KIW80%>,<%=KIW81%>,<%=KIW82%>,<%=KIW83%>];
+var kue100V=[<%=KSS80%>,<%=KSS81%>,<%=KSS82%>,<%=KSS83%>];
+var kueResidence=[<%=KSN80%>,<%=KSN81%>,<%=KSN82%>,<%=KSN83%>];
+var kueBooting=[<%=KSB80%>,<%=KSB81%>,<%=KSB82%>,<%=KSB83%>];

public/placeholder/kueDetailTdr.acp

@@ -0,0 +1,17 @@
+var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>];
+var kueValid=[<%=KIV80%>,<%=KIV81%>,<%=KIV82%>,<%=KIV83%>];
+
+
+var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>];
+var kueName=[<%=KSA80%>,<%=KSA81%>,<%=KSA82%>,<%=KSA83%>];
+var kueVersion=[<%=KSV80%>,<%=KSV81%>,<%=KSV82%>,<%=KSV83%>];
+
+
+var tdrAtten=[<%=KTD80%>,<%=KTD81%>,<%=KTD82%>,<%=KTD83%>];
+var tdrPulse=[<%=KTP80%>,<%=KTP81%>,<%=KTP82%>,<%=KTP83%>];
+var tdrSpeed=[<%=KTS80%>,<%=KTS81%>,<%=KTS82%>,<%=KTS83%>];
+var tdrAmp=[<%=KTA80%>,<%=KTA81%>,<%=KTA82%>,<%=KTA83%>];
+var tdrTrigger=[<%=KTE80%>,<%=KTE81%>,<%=KTE82%>,<%=KTE83%>];
+var tdrLocation=[<%=KTF80%>,<%=KTF81%>,<%=KTF82%>,<%=KTF83%>];
+var tdrActive=[<%=KTX80%>,<%=KTX81%>,<%=KTX82%>,<%=KTX83%>];
+var tdrLast=[<%=KTL80%>,<%=KTL81%>,<%=KTL82%>,<%=KTL83%>];

public/placeholder/start.acp

@@ -0,0 +1 @@
+var last20Messages =<%=SAM01%>;

public/placeholder/system.acp

@@ -0,0 +1,15 @@
+var deviceName="<%=SAN01%>";
+var mac1="<%=SEM01%>";
+var mac2="<%=SEM02%>";
+var ip="<%=SEI01%>";
+var subnet="<%=SES01%>";
+var gateway="<%=SEG01%>";
+var datetime="<%=SCL01%>";
+var opcState="<%=SOS01%>";
+var opcSessions="<%=SOC01%>";
+var opcName="<%=SON01%>";
+var ntp1="<%=STP01%>";
+var ntp2="<%=STP02%>";
+var ntp3="<%=STP03%>";
+var ntpTimezone="<%=STT00%>";
+var ntpActive="<%=STA00%>";

utils/loadWindowVariables.js

@@ -67,6 +67,7 @@ export async function loadWindowVariables(apiUrl) {
             kueResidence: window.kueResidence,
             tdrLastMeasurement: window.tdrLastMeasurement,
             kueBooting: window.kueBooting,
+            k1json: window.k1json,
           });
 
           resolve();