diff --git a/pages/einausgaenge.js b/pages/einausgaenge.js index af0ab06..c129252 100644 --- a/pages/einausgaenge.js +++ b/pages/einausgaenge.js @@ -1,5 +1,5 @@ "use client"; // Falls notwendig -import React from "react"; +import React, { useState } from "react"; import { Icon } from "@iconify/react"; function EinAusgaenge() { @@ -38,17 +38,23 @@ function EinAusgaenge() { { id: 32, status: "inactive", description: "DE32", isInverted: false }, ]; - const digitalOutputs = [ + // 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 }, - // Weitere Einträge - ]; - - // Aufteilen der Eingänge in zwei Gruppen - const inputsGroup1 = digitalInputs.slice(0, 16); - const inputsGroup2 = digitalInputs.slice(16); + ]); + const toggleSwitch = (id) => { + setDigitalOutputs((prevOutputs) => + prevOutputs.map((output) => + output.id === id ? { ...output, toggle: !output.toggle } : output + ) + ); + }; return (