From c4136de6d1c68e0a0acf13fbb9ba8eb416850ce3 Mon Sep 17 00:00:00 2001 From: ISA Date: Wed, 22 Jan 2025 15:03:13 +0100 Subject: [PATCH] =?UTF-8?q?Code=20funktioniert,aber=20style=20soll=20ge?= =?UTF-8?q?=C3=A4ndert=20werden=20f=C3=BCr=20einausgaenge.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/einausgaenge copy.js | 280 +++++++++++++++++++++++++++++++ pages/einausgaenge.js | 243 ++++++++++++++------------- public/CPLmockData/SERVICE/de.js | 2 +- 3 files changed, 411 insertions(+), 114 deletions(-) create mode 100644 pages/einausgaenge copy.js diff --git a/pages/einausgaenge copy.js b/pages/einausgaenge copy.js new file mode 100644 index 0000000..fd657be --- /dev/null +++ b/pages/einausgaenge copy.js @@ -0,0 +1,280 @@ +"use client"; // pages/einausgaenge.js +import React, { useState, useEffect } from "react"; +import { Icon } from "@iconify/react"; + +function EinAusgaenge() { + const [mockData, setMockData] = useState({ + win_de: Array(32).fill(0), // Fallback-Daten für die Initialisierung + win_counter: Array(32).fill(0), + win_flutter: Array(32).fill(0), + }); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const isDevelopment = process.env.NODE_ENV === "development"; + const script = document.createElement("script"); + + script.src = isDevelopment + ? "/CPLmockData/SERVICE/de.js" + : "/CPL/SERVICE/de.js"; + script.async = true; + + script.onload = () => { + try { + // Sicherstellen, dass die globalen Variablen verfügbar sind + if ( + typeof win_de !== "undefined" && + typeof win_counter !== "undefined" && + typeof win_flutter !== "undefined" + ) { + setMockData({ + win_de, + win_counter, + win_flutter, + }); + } else { + console.error("Mock-Daten konnten nicht geladen werden."); + } + } catch (error) { + console.error("Fehler beim Zugriff auf die globalen Daten:", error); + } finally { + setIsLoading(false); + } + }; + + script.onerror = () => { + console.error("Fehler beim Laden der Skript-Datei:", script.src); + setIsLoading(false); + }; + + document.body.appendChild(script); + + return () => { + document.body.removeChild(script); + }; + }, []); + + // Hook-Anzahl konstant halten + const digitalInputs = mockData.win_de.map((status, index) => ({ + id: index + 1, + status: status === 1 ? "active" : "inactive", + description: `DE${index + 1}`, + isInverted: false, + })); + + const inputsGroup1 = digitalInputs.slice(0, 16); + const inputsGroup2 = digitalInputs.slice(16); + + const [digitalOutputs, setDigitalOutputs] = useState([ + { id: 1, description: "Ausgang1", toggle: true }, + { id: 2, description: "Ausgang2", toggle: false }, + { id: 3, description: "Ausgang3", toggle: true }, + { id: 4, description: "Ausgang4", toggle: false }, + ]); + + const toggleSwitch = (id) => { + setDigitalOutputs((prevOutputs) => + prevOutputs.map((output) => + output.id === id ? { ...output, toggle: !output.toggle } : output + ) + ); + }; + + const [selectedInput, setSelectedInput] = useState(null); + const [selectedOutput, setSelectedOutput] = useState(null); + const [isInputModalOpen, setIsInputModalOpen] = useState(false); + const [isOutputModalOpen, setIsOutputModalOpen] = useState(false); + + const openInputModal = (input) => { + setSelectedInput(input); + setIsInputModalOpen(true); + }; + + const closeInputModal = () => { + setSelectedInput(null); + setIsInputModalOpen(false); + }; + + const openOutputModal = (output) => { + setSelectedOutput(output); + setIsOutputModalOpen(true); + }; + + const closeOutputModal = () => { + setSelectedOutput(null); + setIsOutputModalOpen(false); + }; + + // Warten auf Daten + if (isLoading) { + return
Daten werden geladen...
; + } + + //-------------------------------------------- + return ( +
+

Ein- und Ausgänge

+
+ {/* Digitale Eingänge */} +
+

+ + Digitale Eingänge +

+
+ {[inputsGroup1, inputsGroup2].map((group, index) => ( +
+ + + + + + + + + + + {group.map((input) => ( + + + + + + + ))} + +
EingangZustandBezeichnungAktion
+ + {input.id} + + + {input.status === "active" ? "●" : "⨉"} + + {input.description} + openInputModal(input)} + /> +
+
+ ))} +
+
+
+ + {/* Digitale Ausgänge */} +
+

+ + Digitale Ausgänge +

+ + + + + + + + + + + {digitalOutputs.map((output) => ( + + + + + + + ))} + +
AusgangBezeichnungSchalterAktion
+ + {output.id} + {output.description} + toggleSwitch(output.id)} + className={`cursor-pointer text-2xl transform ${ + output.toggle + ? "text-blue-500 scale-x-100" + : "text-gray-500 scale-x-[-1]" + }`} + title={`Schalter ${output.toggle ? "EIN" : "AUS"} schalten`} + /> + + openOutputModal(output)} + /> +
+
+ + {/* Modal für Eingänge */} + {isInputModalOpen && ( +
+
+

+ Details für Eingang {selectedInput.id} +

+

+ Status:{" "} + {selectedInput.status === "active" ? "Aktiv" : "Inaktiv"} +

+

+ Beschreibung: {selectedInput.description} +

+

+ Invertiert:{" "} + {selectedInput.isInverted ? "Ja" : "Nein"} +

+ +
+
+ )} + {/* Modal für Ausgänge */} + {isOutputModalOpen && ( +
+
+

+ Details für Ausgang {selectedOutput.id} +

+

+ Bezeichnung: {selectedOutput.description} +

+

+ Status:{" "} + {selectedOutput.toggle ? "Eingeschaltet" : "Ausgeschaltet"} +

+ +
+
+ )} +
+ ); +} + +export default EinAusgaenge; diff --git a/pages/einausgaenge.js b/pages/einausgaenge.js index 08e4c0d..fd657be 100644 --- a/pages/einausgaenge.js +++ b/pages/einausgaenge.js @@ -1,53 +1,77 @@ -"use client"; // Falls notwendig -import React, { useState } from "react"; +"use client"; // pages/einausgaenge.js +import React, { useState, useEffect } from "react"; import { Icon } from "@iconify/react"; function EinAusgaenge() { - const digitalInputs = [ - { id: 1, status: "active", description: "100V-Ausfall", isInverted: true }, - { id: 2, status: "inactive", description: "DE2", isInverted: false }, - { id: 3, status: "active", description: "DE3", isInverted: false }, - { id: 4, status: "inactive", description: "DE4", isInverted: false }, - { id: 5, status: "active", description: "DE5", isInverted: false }, - { id: 6, status: "inactive", description: "DE6", isInverted: false }, - { id: 7, status: "active", description: "DE7", isInverted: false }, - { id: 8, status: "inactive", description: "DE8", isInverted: false }, - { id: 9, status: "active", description: "DE9", isInverted: false }, - { id: 10, status: "inactive", description: "DE10", isInverted: false }, - { id: 11, status: "active", description: "DE11", isInverted: false }, - { id: 12, status: "inactive", description: "DE12", isInverted: false }, - { id: 13, status: "active", description: "DE13", isInverted: false }, - { id: 14, status: "inactive", description: "DE14", isInverted: false }, - { id: 15, status: "active", description: "DE15", isInverted: false }, - { id: 16, status: "inactive", description: "DE16", isInverted: false }, - { id: 17, status: "active", description: "DE17", isInverted: false }, - { id: 18, status: "inactive", description: "DE18", isInverted: false }, - { id: 19, status: "active", description: "DE19", isInverted: false }, - { id: 20, status: "inactive", description: "DE20", isInverted: false }, - { id: 21, status: "active", description: "DE21", isInverted: false }, - { id: 22, status: "inactive", description: "DE22", isInverted: false }, - { id: 23, status: "active", description: "DE23", isInverted: false }, - { id: 24, status: "inactive", description: "DE24", isInverted: false }, - { id: 25, status: "active", description: "DE25", isInverted: false }, - { id: 26, status: "inactive", description: "DE26", isInverted: false }, - { id: 27, status: "active", description: "DE27", isInverted: false }, - { id: 28, status: "inactive", description: "DE28", isInverted: false }, - { id: 29, status: "active", description: "DE29", isInverted: false }, - { id: 30, status: "inactive", description: "DE30", isInverted: false }, - { id: 31, status: "active", description: "DE31", isInverted: false }, - { id: 32, status: "inactive", description: "DE32", isInverted: false }, - ]; + const [mockData, setMockData] = useState({ + win_de: Array(32).fill(0), // Fallback-Daten für die Initialisierung + win_counter: Array(32).fill(0), + win_flutter: Array(32).fill(0), + }); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const isDevelopment = process.env.NODE_ENV === "development"; + const script = document.createElement("script"); + + script.src = isDevelopment + ? "/CPLmockData/SERVICE/de.js" + : "/CPL/SERVICE/de.js"; + script.async = true; + + script.onload = () => { + try { + // Sicherstellen, dass die globalen Variablen verfügbar sind + if ( + typeof win_de !== "undefined" && + typeof win_counter !== "undefined" && + typeof win_flutter !== "undefined" + ) { + setMockData({ + win_de, + win_counter, + win_flutter, + }); + } else { + console.error("Mock-Daten konnten nicht geladen werden."); + } + } catch (error) { + console.error("Fehler beim Zugriff auf die globalen Daten:", error); + } finally { + setIsLoading(false); + } + }; + + script.onerror = () => { + console.error("Fehler beim Laden der Skript-Datei:", script.src); + setIsLoading(false); + }; + + document.body.appendChild(script); + + return () => { + document.body.removeChild(script); + }; + }, []); + + // Hook-Anzahl konstant halten + const digitalInputs = mockData.win_de.map((status, index) => ({ + id: index + 1, + status: status === 1 ? "active" : "inactive", + description: `DE${index + 1}`, + isInverted: false, + })); - // Aufteilen der Eingänge in zwei Gruppen const inputsGroup1 = digitalInputs.slice(0, 16); const inputsGroup2 = digitalInputs.slice(16); - //----------------------------------------- + const [digitalOutputs, setDigitalOutputs] = useState([ { id: 1, description: "Ausgang1", toggle: true }, { id: 2, description: "Ausgang2", toggle: false }, { id: 3, description: "Ausgang3", toggle: true }, { id: 4, description: "Ausgang4", toggle: false }, ]); + const toggleSwitch = (id) => { setDigitalOutputs((prevOutputs) => prevOutputs.map((output) => @@ -55,7 +79,7 @@ function EinAusgaenge() { ) ); }; - //-------------------------------------------- + const [selectedInput, setSelectedInput] = useState(null); const [selectedOutput, setSelectedOutput] = useState(null); const [isInputModalOpen, setIsInputModalOpen] = useState(false); @@ -80,6 +104,12 @@ function EinAusgaenge() { setSelectedOutput(null); setIsOutputModalOpen(false); }; + + // Warten auf Daten + if (isLoading) { + return
Daten werden geladen...
; + } + //-------------------------------------------- return (
@@ -114,28 +144,16 @@ function EinAusgaenge() { {input.id} -
- {/* Status-Icon */} - - {input.status === "active" ? "●" : "⨉"} - - {/* Swap-Icon wird angezeigt, wenn invertiert */} - {input.isInverted && ( - - )} -
+ + {input.status === "active" ? "●" : "⨉"} + - {input.description}
- - {/* Digitale Ausgänge */} -
-

- - Digitale Ausgänge -

- - - - - - - - - - - {digitalOutputs.map((output) => ( - - - - - - - ))} - -
AusgangBezeichnungSchalterAktion
- - {output.id} - {output.description} - toggleSwitch(output.id)} - className={`cursor-pointer text-2xl transform ${ - output.toggle - ? "text-blue-500 scale-x-100" - : "text-gray-500 scale-x-[-1]" - }`} - title={`Schalter ${ - output.toggle ? "EIN" : "AUS" - } schalten`} - /> - - openOutputModal(output)} - /> -
-
+ + {/* Digitale Ausgänge */} +
+

+ + Digitale Ausgänge +

+ + + + + + + + + + + {digitalOutputs.map((output) => ( + + + + + + + ))} + +
AusgangBezeichnungSchalterAktion
+ + {output.id} + {output.description} + toggleSwitch(output.id)} + className={`cursor-pointer text-2xl transform ${ + output.toggle + ? "text-blue-500 scale-x-100" + : "text-gray-500 scale-x-[-1]" + }`} + title={`Schalter ${output.toggle ? "EIN" : "AUS"} schalten`} + /> + + openOutputModal(output)} + /> +
+
+ {/* Modal für Eingänge */} {isInputModalOpen && (
diff --git a/public/CPLmockData/SERVICE/de.js b/public/CPLmockData/SERVICE/de.js index 3e48235..b00f0bc 100644 --- a/public/CPLmockData/SERVICE/de.js +++ b/public/CPLmockData/SERVICE/de.js @@ -1,5 +1,5 @@ var win_de = [ - 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ]; var win_counter = [