From 2dbb8576b762f4940d2c8fac67b063d4c544e86f Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Wed, 22 Jan 2025 13:48:25 +0100
Subject: [PATCH] =?UTF-8?q?switch=20icon=20spielgln=20und=20farbe=20=C3=A4?=
 =?UTF-8?q?ndern=20beim=20klick?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/einausgaenge.js | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

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 (
     <div className="p-4">
@@ -150,9 +156,15 @@ function EinAusgaenge() {
                   <td className="px-2 py-1">
                     <Icon
                       icon="ion:switch"
-                      className={`text-2xl ${
-                        output.toggle ? "text-blue-500" : "text-gray-500"
+                      onClick={() => 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`}
                     />
                   </td>
                   <td className="px-2 py-1">