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

2024-10-17 16:24:52 +02:00
parent bbe69f971b
commit dd09a83fb8
10 changed files with 242 additions and 58 deletions
--- a/app/json/page.jsx
+++ b/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>
+  );
+}
--- a/components/modules/Kue705FO.jsx
+++ b/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
-  schleifenwiderstand, // Übergabeparameter für den Schleifenwiderstand
-  modulName, // Übergabeparameter für den Modulnamen
-  kueVersion = "V4.19", // Optionaler Parameter für die Version (Standardwert)
-  kueOnline, // Array für den Modulstatus (1: Modul vorhanden, 0: kein Modul)
-  slotIndex, // Der Index des Slots, für den die Anzeige gilt
-  tdrLocation, // Wert für die TDR-Entfernung
+  isolationswert,
+  schleifenwiderstand,
+  modulName,
+  kueVersion = "V4.19",
+  kueOnline,
+  slotIndex,
+  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
-  const handleButtonClick = (button) => {
-    if (button === "Schleife") {
-      setActiveButton("Schleife");
-      setDisplayText("Schleifenwiderstand [kOhm]");
-      setCurrentDisplayValue(schleifenwiderstand || "0");
-    } else if (button === "TDR") {
-      setActiveButton("TDR");
-      setDisplayText("Entfernung [Km]");
-      setCurrentDisplayValue(tdrLocation || "0");
-    }
+
+  // Funktion zum Anzeigen des Chart-Modals
+  const handleOpenChartModal = () => {
+    setShowChartModal(true);
+    loadChartData(); // Lade die Daten, wenn das Modal geöffnet wird
+  };
+
+  const handleCloseChartModal = () => {
+    setShowChartModal(false);
+  };
+
+  // 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 handleRefreshClick = () => {
-    if (activeButton === "Schleife") {
-      goLoop(); // Wenn Schleife aktiv ist, starte goLoop
-    } else if (activeButton === "TDR") {
-      goTDR(); // Wenn TDR aktiv ist, starte goTDR
+  const handleButtonClick = (button) => {
+    if (button === "Schleife") {
+      setActiveButton("Schleife");
+      setDisplayText("Schleifenwiderstand [kOhm]");
+      setCurrentDisplayValue(schleifenwiderstand || "0");
+    } 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">
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/public/placeholder/de.acp
+++ b/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%>];
--- a/public/placeholder/kueData.js
+++ b/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%>];
--- a/public/placeholder/kueDetailTdr.acp
+++ b/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%>];
--- a/public/placeholder/start.acp
+++ b/public/placeholder/start.acp
@@ -0,0 +1 @@
+var last20Messages =<%=SAM01%>;
--- a/public/placeholder/system.acp
+++ b/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%>";
--- a/utils/loadWindowVariables.js
+++ b/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();