fix: digital Inputs Modal
This commit is contained in:
ISA
@@ -2,39 +2,51 @@
|
||||
// /components/main/einausgaenge/modals/InputModal.tsx
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { RootState } from "../../../../redux/store";
|
||||
import { RootState } from "@/redux/store";
|
||||
import switchIcon from "@iconify/icons-ion/switch";
|
||||
import {
|
||||
updateInvertierung,
|
||||
updateName,
|
||||
} from "../../../../redux/slices/digitalInputsSlice";
|
||||
import { updateInvert, updateLabel } from "@/redux/slices/digitalInputsSlice";
|
||||
|
||||
export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
|
||||
type InputModalProps = {
|
||||
selectedInput: {
|
||||
id: number;
|
||||
[key: string]: any;
|
||||
} | null;
|
||||
closeInputModal: () => void;
|
||||
isOpen: boolean;
|
||||
};
|
||||
|
||||
export default function InputModal({
|
||||
selectedInput,
|
||||
closeInputModal,
|
||||
isOpen,
|
||||
}: InputModalProps) {
|
||||
const dispatch = useDispatch();
|
||||
const reduxInput = useSelector((state: RootState) =>
|
||||
state.digitalInputsSlice.inputs.find(
|
||||
(input) => input.id === Number(selectedInput?.id)
|
||||
)
|
||||
);
|
||||
console.log("📦 selectedInput.id:", selectedInput?.id);
|
||||
console.log("📦 reduxInput:", reduxInput);
|
||||
/* console.log("📦 selectedInput.id:", selectedInput?.id);
|
||||
console.log("📦 reduxInput:", reduxInput); */
|
||||
|
||||
const [isInitialLoad, setIsInitialLoad] = useState(true);
|
||||
const [name, setName] = useState("");
|
||||
const [label, setLabel] = useState("");
|
||||
const [invertiert, setInvertiert] = useState(false);
|
||||
const [filterzeit, setFilterzeit] = useState(0);
|
||||
const [gewichtung, setGewichtung] = useState(0);
|
||||
const [timeFilter, setTimeFilter] = useState(0);
|
||||
const [weighting, setWeighting] = useState(0);
|
||||
const [zaehlerAktiv, setZaehlerAktiv] = useState(false);
|
||||
const [eingangOffline, setEingangOffline] = useState(false);
|
||||
const [eingangOffline, setEingangOffline] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (reduxInput && isInitialLoad) {
|
||||
setName(reduxInput.label || "");
|
||||
setInvertiert(reduxInput.invertierung);
|
||||
setFilterzeit(reduxInput.filterzeit);
|
||||
setGewichtung(reduxInput.gewichtung);
|
||||
//reduxInput
|
||||
console.log("📦 reduxInput geladen:", reduxInput);
|
||||
setLabel(reduxInput.label || "");
|
||||
setInvertiert(reduxInput.invert);
|
||||
setTimeFilter(reduxInput.timeFilter);
|
||||
setWeighting(reduxInput.weighting);
|
||||
setZaehlerAktiv(reduxInput.zaehlerAktiv);
|
||||
setEingangOffline(reduxInput.eingangOffline);
|
||||
setEingangOffline(reduxInput.eingangOffline ? 1 : 0);
|
||||
setIsInitialLoad(false);
|
||||
}
|
||||
}, [reduxInput, isInitialLoad]);
|
||||
@@ -58,29 +70,29 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
|
||||
try {
|
||||
// PRODUKTIONSUMGEBUNG (CGI-Modus)
|
||||
if (process.env.NEXT_PUBLIC_NODE_ENV === "production") {
|
||||
if (name !== reduxInput.name) {
|
||||
await sendCgiUpdate(`DEN${id}=${encodeURIComponent(name)}`);
|
||||
dispatch(updateName({ id, name }));
|
||||
if (label !== reduxInput.label) {
|
||||
await sendCgiUpdate(`DEN${id}=${encodeURIComponent(label)}`);
|
||||
dispatch(updateLabel({ id, label }));
|
||||
hasChange = true;
|
||||
}
|
||||
if (invertiert !== reduxInput.invertierung) {
|
||||
if (invertiert !== reduxInput.invert) {
|
||||
await sendCgiUpdate(`DEI${id}=${invertiert ? 1 : 0}`);
|
||||
dispatch(updateInvertierung({ id, invertierung: invertiert }));
|
||||
dispatch(updateInvert({ id, invert: invertiert }));
|
||||
hasChange = true;
|
||||
}
|
||||
if (filterzeit !== reduxInput.filterzeit) {
|
||||
await sendCgiUpdate(`DEF${id}=${filterzeit}`);
|
||||
if (timeFilter !== reduxInput.timeFilter) {
|
||||
await sendCgiUpdate(`DEF${id}=${timeFilter}`);
|
||||
hasChange = true;
|
||||
}
|
||||
if (gewichtung !== reduxInput.gewichtung) {
|
||||
await sendCgiUpdate(`DEG${id}=${gewichtung}`);
|
||||
if (weighting !== reduxInput.weighting) {
|
||||
await sendCgiUpdate(`DEG${id}=${weighting}`);
|
||||
hasChange = true;
|
||||
}
|
||||
if (zaehlerAktiv !== reduxInput.zaehlerAktiv) {
|
||||
await sendCgiUpdate(`DEZ${id}=${zaehlerAktiv ? 1 : 0}`);
|
||||
hasChange = true;
|
||||
}
|
||||
if (eingangOffline !== reduxInput.eingangOffline) {
|
||||
if (eingangOffline !== (reduxInput.eingangOffline ? 1 : 0)) {
|
||||
await sendCgiUpdate(`DEO${id}=${eingangOffline ? 1 : 0}`);
|
||||
hasChange = true;
|
||||
}
|
||||
@@ -92,22 +104,22 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
|
||||
} else {
|
||||
// ENTWICKLUNGSUMGEBUNG (lokale API)
|
||||
const updates: any = { id };
|
||||
if (name !== reduxInput.name) {
|
||||
updates.name = name;
|
||||
dispatch(updateName({ id, name }));
|
||||
if (label !== reduxInput.label) {
|
||||
updates.label = label;
|
||||
dispatch(updateLabel({ id, label }));
|
||||
hasChange = true;
|
||||
}
|
||||
if (invertiert !== reduxInput.invertierung) {
|
||||
updates.invertierung = invertiert ? 1 : 0;
|
||||
dispatch(updateInvertierung({ id, invertierung: invertiert }));
|
||||
if (invertiert !== reduxInput.invert) {
|
||||
updates.invert = invertiert ? 1 : 0;
|
||||
dispatch(updateInvert({ id, invert: invertiert }));
|
||||
hasChange = true;
|
||||
}
|
||||
if (filterzeit !== reduxInput.filterzeit) {
|
||||
updates.filterzeit = filterzeit;
|
||||
if (timeFilter !== reduxInput.timeFilter) {
|
||||
updates.timeFilter = timeFilter;
|
||||
hasChange = true;
|
||||
}
|
||||
if (gewichtung !== reduxInput.gewichtung) {
|
||||
updates.gewichtung = gewichtung;
|
||||
if (weighting !== reduxInput.weighting) {
|
||||
updates.weighting = weighting;
|
||||
hasChange = true;
|
||||
}
|
||||
if (zaehlerAktiv !== reduxInput.zaehlerAktiv) {
|
||||
@@ -145,6 +157,11 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
|
||||
setIsInitialLoad(true);
|
||||
closeInputModal();
|
||||
};
|
||||
useEffect(() => {
|
||||
if (isOpen && selectedInput) {
|
||||
setIsInitialLoad(true);
|
||||
}
|
||||
}, [isOpen, selectedInput]);
|
||||
|
||||
return (
|
||||
<div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
|
||||
@@ -169,8 +186,8 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
value={label}
|
||||
onChange={(e) => setLabel(e.target.value)}
|
||||
className="border border-gray-300 rounded px-2 py-1 w-full"
|
||||
maxLength={32}
|
||||
/>
|
||||
@@ -206,11 +223,11 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
|
||||
type="number"
|
||||
min={0}
|
||||
max={2000}
|
||||
value={filterzeit}
|
||||
value={timeFilter}
|
||||
onChange={(e) => {
|
||||
const val = Number(e.target.value);
|
||||
if (val <= 2000) {
|
||||
setFilterzeit(val);
|
||||
setTimeFilter(val);
|
||||
}
|
||||
}}
|
||||
className="border border-gray-300 rounded px-2 py-1 pr-10 w-full text-right"
|
||||
@@ -230,11 +247,11 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
|
||||
type="number"
|
||||
min={0}
|
||||
max={1000}
|
||||
value={gewichtung}
|
||||
value={weighting}
|
||||
onChange={(e) => {
|
||||
const val = Number(e.target.value);
|
||||
if (val <= 1000) {
|
||||
setGewichtung(val);
|
||||
setWeighting(val);
|
||||
}
|
||||
}}
|
||||
className="border border-gray-300 rounded px-2 py-1 w-full text-right"
|
||||
@@ -250,8 +267,8 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={eingangOffline}
|
||||
onClick={() => setEingangOffline(!eingangOffline)}
|
||||
aria-checked={!!eingangOffline}
|
||||
onClick={() => setEingangOffline(eingangOffline ? 0 : 1)}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
|
||||
eingangOffline ? "bg-littwin-blue" : "bg-gray-300"
|
||||
}`}
|
||||
|
||||
Reference in New Issue
Block a user