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

Digitale Eingänge und digitale Ausgänge an die Seite anpassen

Browse Source
This commit is contained in:
ISA
2025-04-02 14:54:27 +02:00
parent 1d84f9ea3c
commit c973e85ce3
4 changed files with 115 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
components/main/einausgaenge/DigitalInputs.tsx
View File

@@ -1,71 +1,65 @@
"use client"; // components/main/einausgaenge/DigitalInputs.tsx "use client";
import React from "react"; import React from "react";
import { Icon } from "@iconify/react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store"; import { RootState } from "../../../redux/store";
import { Icon } from "@iconify/react";
export default function DigitalInputs({ openInputModal }) { type Props = {
openInputModal: (input: any) => void;
inputRange: { start: number; end: number };
};
export default function DigitalInputs({ openInputModal, inputRange }: Props) {
const digitalInputs = useSelector( const digitalInputs = useSelector(
(state: RootState) => state.digitalInputsSlice.inputs (state: RootState) => state.digitalInputsSlice.inputs
); );
// **Gruppiere Eingänge in zwei Tabellen** const inputs = digitalInputs.slice(inputRange.start, inputRange.end);
const midIndex = Math.ceil(digitalInputs.length / 2);
const inputsGroup1 = digitalInputs.slice(0, midIndex);
const inputsGroup2 = digitalInputs.slice(midIndex);
return ( return (
<div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-full flex-grow flex flex-col"> <div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full">
<h2 className="text-md font-bold mb-4 flex items-center"> <h2 className="text-sm font-bold mb-3 flex items-center">
<Icon icon="mdi:input" className="text-blue-500 mr-2 text-2xl" /> <Icon icon="mdi:input" className="text-littwin-blue mr-2 text-xl" />
Digitale Eingänge Digitale Eingänge {inputRange.start + 1} – {inputRange.end}
</h2> </h2>
<div className="grid grid-cols-2 gap-4"> <table className="w-full text-xs border-collapse">
{[inputsGroup1, inputsGroup2].map((group, index) => ( <thead className="bg-gray-100 border-b">
<div key={index} className="flex-grow"> <tr>
<table className="w-full text-sm border-collapse bg-white rounded-lg"> <th className="px-1 py-1 text-left">Eingang</th>
<thead className="bg-gray-100 border-b"> <th className="px-1 py-1 text-left">Zustand</th>
<tr> <th className="px-1 py-1 text-left">Bezeichnung</th>
<th className="px-2 py-1 text-left">Eingang</th> <th className="px-1 py-1 text-left">Aktion</th>
<th className="px-2 py-1 text-left">Zustand</th> </tr>
<th className="px-2 py-1 text-left">Bezeichnung</th> </thead>
<th className="px-2 py-1 text-left">Aktion</th> <tbody>
</tr> {inputs.map((input) => (
</thead> <tr key={input.id} className="border-b">
<tbody> <td className="flex items-center px-1 py-1">
{group.map((input) => ( <Icon
<tr key={input.id} className="border-b"> icon="mdi:login"
<td className="flex items-center p-2 xl:py-0 2xl:p-1"> className="text-gray-600 mr-1 text-base"
<Icon />
icon="mdi:input" {input.id}
className="text-black-500 mr-2 text-xl" </td>
/> <td className="px-1 py-1">
{input.id} {input.status ? (
</td> <span className="text-green-500 text-xs">●</span>
<td className="p-2 xl:py-0"> ) : (
<span <span className="text-red-500 text-xs">✕</span>
className={ )}
input.status ? "text-green-500" : "text-red-500" </td>
} <td className="px-1 py-1">{input.label}</td>
> <td className="px-1 py-1">
{input.status ? "●" : "⨉"} <Icon
</span> icon="mdi:cog"
</td> className="text-gray-400 text-base cursor-pointer"
<td className="p-2 xl:py-0">{input.label}</td> onClick={() => openInputModal(input)}
<td className="p-2 xl:py-0"> />
<Icon </td>
icon="mdi:settings" </tr>
className="text-gray-400 text-lg cursor-pointer" ))}
onClick={() => openInputModal(input)} </tbody>
/> </table>
</td>
</tr>
))}
</tbody>
</table>
</div>
))}
</div>
</div> </div>
); );
} }

67
components/main/einausgaenge/DigitalOutputs.tsx
View File

@@ -1,71 +1,54 @@
"use client"; "use client";
import React from "react"; import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../redux/store";
import { setDigitalOutputs } from "../../../redux/slices/digitalOutputsSlice";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store";
export default function DigitalOutputs({ openOutputModal }) { export default function DigitalOutputs({ openOutputModal }) {
const dispatch = useDispatch();
// Redux-Store für digitale Ausgänge nutzen
const digitalOutputs = useSelector( const digitalOutputs = useSelector(
(state: RootState) => state.digitalOutputs?.outputs ?? [] (state: RootState) => state.digitalOutputsSlice.outputs
); );
// Funktion zum Umschalten des Ausgangsstatus
const toggleSwitch = (id: number) => {
const updatedOutputs = digitalOutputs.map((output) =>
output.id === id ? { ...output, status: !output.status } : output
);
dispatch(setDigitalOutputs(updatedOutputs));
};
return ( return (
<div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-2/5 h-[fit-content]"> <div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full h-fit max-h-[400px] overflow-auto">
<h2 className="text-md font-bold mb-4 flex items-center"> <h2 className="text-sm font-bold mb-3 flex items-center">
<Icon icon="mdi:output" className="text-littwin-blue mr-2 text-2xl" /> <Icon icon="mdi:output" className="text-littwin-blue mr-2 text-xl" />
Digitale Ausgänge Digitale Ausgänge
</h2> </h2>
<table className="w-full text-sm border-collapse bg-white rounded-lg"> <table className="w-full text-xs border-collapse bg-white rounded-lg">
<thead className="bg-gray-100 border-b"> <thead className="bg-gray-100 border-b">
<tr> <tr>
<th className="px-2 py-1 text-left">Ausgang</th> <th className="px-1 py-1 text-left">Ausgang</th>
<th className="px-2 py-1 text-left">Bezeichnung</th> <th className="px-1 py-1 text-left">Bezeichnung</th>
<th className="px-2 py-1 text-left">Schalter</th> <th className="px-1 py-1 text-left">Schalter</th>
<th className="px-2 py-1 text-left">Aktion</th> <th className="px-1 py-1 text-left">Aktion</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{digitalOutputs.map((output) => ( {digitalOutputs.map((output) => (
<tr key={output.id} className="border-b"> <tr key={output.id} className="border-b">
<td className="flex items-center px-2 py-1"> <td className="flex items-center px-1 py-1">
<Icon <Icon
icon="mdi:output" icon="mdi:output"
className="text-black-500 mr-2 text-xl" className="text-gray-600 mr-1 text-base"
/> />
{output.id} {output.id}
</td> </td>
<td className="px-2 py-1">{output.label}</td> <td className="px-1 py-1">{output.label}</td>
<td className="px-2 py-1"> <td className="px-1 py-1">
<span <Icon
title={`Schalter ${output.status ? "EIN" : "AUS"} schalten`} icon="ion:switch"
> className={`text-base ${
<Icon output.status
icon="ion:switch" ? "text-littwin-blue"
onClick={() => toggleSwitch(output.id)} : "text-gray-500 scale-x-[-1]"
className={`cursor-pointer text-2xl transform ${ }`}
output.status />
? "text-littwin-blue scale-x-100"
: "text-gray-500 scale-x-[-1]"
}`}
/>
</span>
</td> </td>
<td className="px-2 py-1"> <td className="px-1 py-1">
<Icon <Icon
icon="mdi:settings" icon="mdi:settings"
className="text-gray-400 text-lg cursor-pointer" className="text-gray-400 text-base cursor-pointer"
onClick={() => openOutputModal(output)} onClick={() => openOutputModal(output)}
/> />
</td> </td>

106
pages/einausgaenge.tsx
View File

@@ -1,38 +1,43 @@
"use client"; // pages/einausgaenge.tsx
"use client"; "use client";
import React, { useState, useEffect } from "react"; import React, { useEffect, useState } from "react";
import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs"; import { useDispatch, useSelector } from "react-redux";
import DigitalInputs from "../components/main/einausgaenge/DigitalInputs"; import { AppDispatch, RootState } from "../redux/store";
import InputModal from "../components/main/einausgaenge/modals/InputModal"; import InputModal from "../components/main/einausgaenge/modals/InputModal";
import OutputModal from "../components/main/einausgaenge/modals/OutputModal"; import OutputModal from "../components/main/einausgaenge/modals/OutputModal";
import { useDigitalInputData } from "../hooks/einausgaenge/useDigitalInputsData";
import { useDigitalOutputs } from "../hooks/einausgaenge/useDigitalOutputsData";
import { useDispatch } from "react-redux";
import { AppDispatch } from "../redux/store";
import { setDigitalOutputs } from "../redux/slices/digitalOutputsSlice";
import { fetchDigitaleEingaengeThunk } from "../redux/thunks/fetchDigitaleEingaengeThunk"; import { fetchDigitaleEingaengeThunk } from "../redux/thunks/fetchDigitaleEingaengeThunk";
import { fetchDigitalOutputsThunk } from "../redux/thunks/fetchDigitalOutputsThunk"; import { fetchDigitalOutputsThunk } from "../redux/thunks/fetchDigitalOutputsThunk";
import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs";
import DigitalInputs from "../components/main/einausgaenge/DigitalInputs";
const EinAusgaenge: React.FC = () => { const EinAusgaenge: React.FC = () => {
const dispatch = useDispatch<AppDispatch>(); const dispatch = useDispatch<AppDispatch>();
const { digitalOutputs, isLoading: isLoadingOutputs } = useDigitalOutputs(); const digitalInputs = useSelector(
const { mockData, isLoading: isLoadingInputs } = useDigitalInputData(); (state: RootState) => state.digitalInputsSlice.inputs
);
const digitalOutputs = useSelector(
(state: RootState) => state.digitalOutputsSlice.outputs
);
// Zustand für Modale
const [selectedInput, setSelectedInput] = useState(null); const [selectedInput, setSelectedInput] = useState(null);
const [selectedOutput, setSelectedOutput] = useState(null); const [selectedOutput, setSelectedOutput] = useState(null);
const [isInputModalOpen, setIsInputModalOpen] = useState(false); const [isInputModalOpen, setIsInputModalOpen] = useState(false);
const [isOutputModalOpen, setIsOutputModalOpen] = useState(false); const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
// Funktion zum Umschalten des Ausgangs useEffect(() => {
const toggleSwitch = (id: number) => { dispatch(fetchDigitaleEingaengeThunk());
const updatedOutputs = digitalOutputs.map((output) => dispatch(fetchDigitalOutputsThunk());
output.id === id ? { ...output, status: !output.status } : output
); const interval = setInterval(() => {
dispatch(setDigitalOutputs(updatedOutputs)); dispatch(fetchDigitaleEingaengeThunk());
}; dispatch(fetchDigitalOutputsThunk());
}, 10000);
return () => clearInterval(interval);
}, [dispatch]);
// Funktionen zum Öffnen und Schließen der Modale
const openInputModal = (input: any) => { const openInputModal = (input: any) => {
setSelectedInput(input); setSelectedInput(input);
setIsInputModalOpen(true); setIsInputModalOpen(true);
@@ -53,60 +58,22 @@ const EinAusgaenge: React.FC = () => {
setIsOutputModalOpen(false); setIsOutputModalOpen(false);
}; };
// Digitale Eingänge aus Mock-Daten generieren
const digitalInputs = mockData.win_de.map(
(status: number, index: number) => ({
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);
//---------------------------------------------------------
useEffect(() => {
if (typeof window !== "undefined") {
dispatch(fetchDigitaleEingaengeThunk());
const interval = setInterval(() => {
dispatch(fetchDigitaleEingaengeThunk());
}, 10000);
return () => clearInterval(interval);
}
}, [dispatch]);
//---------------------------------------------------------
useEffect(() => {
dispatch(fetchDigitalOutputsThunk());
const interval = setInterval(() => {
dispatch(fetchDigitalOutputsThunk());
}, 10000);
return () => clearInterval(interval);
}, [dispatch]);
//---------------------------------------------------------
return ( return (
<div className="p-4"> <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0">
<h1 className="text-lg font-semibold mb-4">Ein- und Ausgänge</h1> <h1 className="text-base font-semibold mb-2">Ein- und Ausgänge</h1>
<div className="flex gap-4">
{/* Digitale Eingänge */} <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 items-start">
<DigitalInputs <DigitalInputs
inputsGroup1={inputsGroup1}
inputsGroup2={inputsGroup2}
openInputModal={openInputModal} openInputModal={openInputModal}
inputRange={{ start: 0, end: 16 }}
/> />
{/* Digitale Ausgänge */} <DigitalInputs
{!isLoadingOutputs && ( openInputModal={openInputModal}
<DigitalOutputs inputRange={{ start: 16, end: 32 }}
digitalOutputs={digitalOutputs} />
openOutputModal={openOutputModal} <DigitalOutputs openOutputModal={openOutputModal} />
toggleSwitch={toggleSwitch}
/>
)}
</div> </div>
{/* Eingangs-Modal */}
{isInputModalOpen && selectedInput && ( {isInputModalOpen && selectedInput && (
<InputModal <InputModal
selectedInput={selectedInput} selectedInput={selectedInput}
@@ -115,7 +82,6 @@ const EinAusgaenge: React.FC = () => {
/> />
)} )}
{/* Ausgangs-Modal */}
{isOutputModalOpen && selectedOutput && ( {isOutputModalOpen && selectedOutput && (
<OutputModal <OutputModal
selectedOutput={selectedOutput} selectedOutput={selectedOutput}

3
public/CPL/SERVICE/da.js Normal file
View File

@@ -0,0 +1,3 @@
// Digitale Ausgänge Ausgang Bezeichnung und Zustand
var win_da=[<%=DES80%>,<%=DES81%>,<%=DES82%>,<%=DES83%>];