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

modals ausgelagern von pages/einausgaenge.tsx

Browse Source
This commit is contained in:
Ismail Ali
2025-02-19 13:38:50 +01:00
parent 3b482935d5
commit 6eecd8c96d
3 changed files with 83 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/main/einausgaenge/modals/InputModal.tsx Normal file
View File

@@ -0,0 +1,29 @@
"use client";
import React from "react";
export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
if (!isOpen || !selectedInput) return null;
return (
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
<div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
<h2 className="text-lg font-bold mb-4">
Details für Eingang {selectedInput.id}
</h2>
<p>
<strong>Status:</strong>{" "}
{selectedInput.status === "active" ? "Aktiv" : "Inaktiv"}
</p>
<p>
<strong>Beschreibung:</strong> {selectedInput.description}
</p>
<button
onClick={closeInputModal}
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
>
Schließen
</button>
</div>
</div>
);
}

33
components/main/einausgaenge/modals/OutputModal.tsx Normal file
View File

@@ -0,0 +1,33 @@
"use client";
import React from "react";
export default function OutputModal({
selectedOutput,
closeOutputModal,
isOpen,
}) {
if (!isOpen || !selectedOutput) return null;
return (
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
<div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
<h2 className="text-lg font-bold mb-4">
Details für Ausgang {selectedOutput.id}
</h2>
<p>
<strong>Bezeichnung:</strong> {selectedOutput.description}
</p>
<p>
<strong>Status:</strong>{" "}
{selectedOutput.toggle ? "Eingeschaltet" : "Ausgeschaltet"}
</p>
<button
onClick={closeOutputModal}
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
>
Schließen
</button>
</div>
</div>
);
}

73
pages/einausgaenge.tsx
View File

@@ -1,9 +1,10 @@
"use client"; // Falls notwendig
import React, { useState, useEffect } from "react";
import { Icon } from "@iconify/react";
"use client"; // pages/einausgaenge.tsx
import React, { useState } from "react";
import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs";
import DigitalInputs from "../components/main/einausgaenge/DigitalInputs";
import { useLoadScript } from "../hooks/useLoadScript";
import InputModal from "../components/main/einausgaenge/modals/InputModal";
import OutputModal from "../components/main/einausgaenge/modals/OutputModal";
function EinAusgaenge() {
// Digitale Ausgänge (Hooks müssen immer initialisiert werden)
@@ -20,8 +21,10 @@ function EinAusgaenge() {
const [isInputModalOpen, setIsInputModalOpen] = useState(false);
const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
// Daten laden
const { mockData, isLoading } = useLoadScript();
// Funktionen zum Umschalten von Ausgängen
const toggleSwitch = (id) => {
setDigitalOutputs((prevOutputs) =>
prevOutputs.map((output) =>
@@ -30,26 +33,27 @@ function EinAusgaenge() {
);
};
// Modal-Funktionen für Eingänge
const openInputModal = (input) => {
setSelectedInput(input);
setIsInputModalOpen(true);
};
const closeInputModal = () => {
setSelectedInput(null);
setIsInputModalOpen(false);
};
// Modal-Funktionen für Ausgänge
const openOutputModal = (output) => {
setSelectedOutput(output);
setIsOutputModalOpen(true);
};
const closeOutputModal = () => {
setSelectedOutput(null);
setIsOutputModalOpen(false);
};
// Digitale Eingänge aus Mock-Daten generieren
const digitalInputs = mockData.win_de.map((status, index) => ({
id: index + 1,
status: status === 1 ? "active" : "inactive",
@@ -70,7 +74,6 @@ function EinAusgaenge() {
inputsGroup2={inputsGroup2}
openInputModal={openInputModal}
/>
{/* Digitale Ausgänge */}
<DigitalOutputs
digitalOutputs={digitalOutputs}
@@ -79,53 +82,19 @@ function EinAusgaenge() {
/>
</div>
{/* Modal für Eingänge */}
{isInputModalOpen && (
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
<div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
<h2 className="text-lg font-bold mb-4">
Details für Eingang {selectedInput.id}
</h2>
<p>
<strong>Status:</strong>{" "}
{selectedInput.status === "active" ? "Aktiv" : "Inaktiv"}
</p>
<p>
<strong>Beschreibung:</strong> {selectedInput.description}
</p>
<button
onClick={closeInputModal}
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
>
Schließen
</button>
</div>
</div>
)}
{/* Eingangs-Modal */}
<InputModal
selectedInput={selectedInput}
closeInputModal={closeInputModal}
isOpen={isInputModalOpen}
/>
{/* Modal für Ausgänge */}
{isOutputModalOpen && (
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
<div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
<h2 className="text-lg font-bold mb-4">
Details für Ausgang {selectedOutput.id}
</h2>
<p>
<strong>Bezeichnung:</strong> {selectedOutput.description}
</p>
<p>
<strong>Status:</strong>{" "}
{selectedOutput.toggle ? "Eingeschaltet" : "Ausgeschaltet"}
</p>
<button
onClick={closeOutputModal}
className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
>
Schließen
</button>
</div>
</div>
)}
{/* Ausgangs-Modal */}
<OutputModal
selectedOutput={selectedOutput}
closeOutputModal={closeOutputModal}
isOpen={isOutputModalOpen}
/>
</div>
);
}