Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switch icon spielgln und farbe ändern beim klick

Browse Source
This commit is contained in:
ISA
2025-01-22 13:48:25 +01:00
parent 5a70924f4c
commit 2dbb8576b7
1 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
pages/einausgaenge.js
View File

@@ -1,5 +1,5 @@
"use client"; // Falls notwendig "use client"; // Falls notwendig
import React from "react"; import React, { useState } from "react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
function EinAusgaenge() { function EinAusgaenge() {
@@ -38,17 +38,23 @@ function EinAusgaenge() {
{ id: 32, status: "inactive", description: "DE32", isInverted: false }, { 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: 1, description: "Ausgang1", toggle: true },
{ id: 2, description: "Ausgang2", toggle: false }, { id: 2, description: "Ausgang2", toggle: false },
{ id: 3, description: "Ausgang3", toggle: true }, { id: 3, description: "Ausgang3", toggle: true },
{ id: 4, description: "Ausgang4", toggle: false }, { id: 4, description: "Ausgang4", toggle: false },
// Weitere Einträge ]);
]; const toggleSwitch = (id) => {
setDigitalOutputs((prevOutputs) =>
// Aufteilen der Eingänge in zwei Gruppen prevOutputs.map((output) =>
const inputsGroup1 = digitalInputs.slice(0, 16); output.id === id ? { ...output, toggle: !output.toggle } : output
const inputsGroup2 = digitalInputs.slice(16); )
);
};
return ( return (
<div className="p-4"> <div className="p-4">
@@ -150,9 +156,15 @@ function EinAusgaenge() {
<td className="px-2 py-1"> <td className="px-2 py-1">
<Icon <Icon
icon="ion:switch" icon="ion:switch"
className={`text-2xl ${ onClick={() => toggleSwitch(output.id)}
output.toggle ? "text-blue-500" : "text-gray-500" 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>
<td className="px-2 py-1"> <td className="px-2 py-1">