diff --git a/components/main/einausgaenge/DigitalInputs.tsx b/components/main/einausgaenge/DigitalInputs.tsx new file mode 100644 index 0000000..88adc6e --- /dev/null +++ b/components/main/einausgaenge/DigitalInputs.tsx @@ -0,0 +1,46 @@ +// components/main/einausgaenge/DigitalInputs.tsx +import React from "react"; +import { Icon } from "@iconify/react"; + +export default function DigitalInputs({ digitalInputs, openInputModal }) { + return ( +
+

+ + Digitale Eingänge +

+ + + + + + + + + + + {digitalInputs.map((input) => ( + + + + + + + ))} + +
EingangZustandBezeichnungAktion
+ + {input.id} + {input.status === "active" ? "●" : "⨉"}{input.description} + openInputModal(input)} + /> +
+
+ ); +} diff --git a/components/main/einausgaenge/DigitalOutputs.tsx b/components/main/einausgaenge/DigitalOutputs.tsx new file mode 100644 index 0000000..743cb19 --- /dev/null +++ b/components/main/einausgaenge/DigitalOutputs.tsx @@ -0,0 +1,64 @@ +// components/main/einausgaenge/DigitalOutputs.tsx +import React from "react"; +import { Icon } from "@iconify/react"; + +export default function DigitalOutputs({ + digitalOutputs, + openOutputModal, + toggleSwitch, +}) { + return ( +
+

+ + 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]" + }`} + /> + + + openOutputModal(output)} + /> +
+
+ ); +} diff --git a/components/modals/InputModal.tsx b/components/modals/InputModal.tsx new file mode 100644 index 0000000..daa0322 --- /dev/null +++ b/components/modals/InputModal.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +export default function InputModal({ isOpen, input, closeModal }) { + if (!isOpen || !input) return null; + + return ( +
+
+

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

+

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

+

+ Beschreibung: {input.description} +

+ +
+
+ ); +} diff --git a/components/modals/OutputModal.tsx b/components/modals/OutputModal.tsx new file mode 100644 index 0000000..58a5630 --- /dev/null +++ b/components/modals/OutputModal.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +export default function OutputModal({ isOpen, output, closeModal }) { + if (!isOpen || !output) return null; + + return ( +
+
+

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

+

+ Bezeichnung: {output.description} +

+

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

+ +
+
+ ); +} diff --git a/config/webVersion.ts b/config/webVersion.ts index 3e82155..afd421a 100644 --- a/config/webVersion.ts +++ b/config/webVersion.ts @@ -6,5 +6,5 @@ 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). */ -const webVersion = "1.6.50"; +const webVersion = "1.6.51"; export default webVersion; diff --git a/hooks/useLoadDigitalOutputs.ts b/hooks/useLoadDigitalOutputs.ts new file mode 100644 index 0000000..037eb02 --- /dev/null +++ b/hooks/useLoadDigitalOutputs.ts @@ -0,0 +1,17 @@ +// hokks/useLoadDigitalOutputs.ts +import { useEffect, useState } from "react"; + +export function useLoadDigitalOutputs() { + const [digitalOutputs, setDigitalOutputs] = useState([]); + + useEffect(() => { + fetch("/CPLmockData/digitaleausgaengeMockData.json") + .then((response) => response.json()) + .then((data) => setDigitalOutputs(data)) + .catch((error) => + console.error("Fehler beim Laden der digitalen Ausgänge:", error) + ); + }, []); + + return { digitalOutputs, setDigitalOutputs }; +} diff --git a/hooks/useLoadScript.ts b/hooks/useLoadScript.ts new file mode 100644 index 0000000..5207736 --- /dev/null +++ b/hooks/useLoadScript.ts @@ -0,0 +1,52 @@ +// hooks/useLoadScript.ts: +import { useEffect, useState } from "react"; + +export function useLoadScript() { + const [mockData, setMockData] = useState(); + 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 { + 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); + }; + }, []); + + return { mockData, isLoading }; +} diff --git a/pages/einausgaenge.tsx b/pages/einausgaenge.tsx index b0003c7..05ec5e4 100644 --- a/pages/einausgaenge.tsx +++ b/pages/einausgaenge.tsx @@ -1,6 +1,7 @@ "use client"; // Falls notwendig import React, { useState, useEffect } from "react"; import { Icon } from "@iconify/react"; +import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs"; function EinAusgaenge() { const [mockData, setMockData] = useState({ @@ -166,57 +167,11 @@ function EinAusgaenge() { {/* 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 */} diff --git a/public/CPLmockData/digitaleausgaengeMockData.json b/public/CPLmockData/digitaleausgaengeMockData.json new file mode 100644 index 0000000..658d57e --- /dev/null +++ b/public/CPLmockData/digitaleausgaengeMockData.json @@ -0,0 +1,6 @@ +[ + { "id": 1, "description": "Ausgang1", "toggle": true }, + { "id": 2, "description": "Ausgang2", "toggle": false }, + { "id": 3, "description": "Ausgang3", "toggle": true }, + { "id": 4, "description": "Ausgang4", "toggle": false } +]