uninstall redux-persist, weil nimmt viel Performance weg

components/main/analogInputs/AnalogInputsChart.tsx

@@ -22,7 +22,7 @@ import {
   setVonDatum,
   setBisDatum,
   setZeitraum,
-} from "@/redux/slices/analogInputsHistorySlice";
+} from "@/redux/slices/analogInputs/analogInputsHistorySlice";
 import DateRangePicker from "@/components/common/DateRangePicker";
 import { Listbox } from "@headlessui/react";
 import { getColor } from "@/utils/colors";

components/main/analogInputs/AnalogInputsSettingsModal.tsx

@@ -1,32 +1,31 @@
-"use client"; // /components/main/analogeEingaenge/AnalogInputsSettingsModal.tsx
+"use client";
+
 import React, { useEffect, useState } from "react";
 import { Listbox } from "@headlessui/react";
-interface AnalogInput {
-  id: number;
-  label?: string;
-  offset?: number | string;
-  factor?: number | string;
-  loggerInterval: string;
-  unit?: string;
-}
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { setIsSettingsModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
 
-interface Props {
-  selectedInput: AnalogInput;
-  isOpen: boolean;
-  onClose: () => void;
-}
+import type { AnalogInput } from "@/types/analogInput"; // 👈 Importiere den Typ (jetzt definiert und exportiert)
+
+export default function AnalogInputsSettingsModal() {
+  const dispatch = useDispatch();
+
+  const isOpen = useSelector(
+    (state: RootState) => state.analogInputsUi.isSettingsModalOpen
+  );
+
+  const selectedInput = useSelector<RootState, AnalogInput | null>(
+    (state) => state.selectedAnalogInput
+  );
 
-export default function AnalogInputSettingsModal({
-  selectedInput,
-  isOpen,
-  onClose,
-}: Props) {
   const [label, setLabel] = useState("");
   const [offset, setOffset] = useState("0.000");
   const [factor, setFactor] = useState("1.000");
   const [loggerInterval, setLoggerInterval] = useState("9");
   const [unit, setUnit] = useState("V");
   const [isSaving, setIsSaving] = useState(false);
+
   const unitOptions = ["V", "mA", "°C", "bar", "%"];
 
   useEffect(() => {
@@ -42,12 +41,8 @@ export default function AnalogInputSettingsModal({
           ? selectedInput.factor.toFixed(3)
           : selectedInput.factor || "1.000"
       );
-      setLoggerInterval(selectedInput.loggerInterval);
+      setLoggerInterval(selectedInput.loggerInterval || "9");
       setUnit(selectedInput.unit || "V");
-      console.log(
-        "selectedInput in analoge Eingänge:",
-        selectedInput.loggerInterval
-      );
     }
   }, [selectedInput, isOpen]);
 
@@ -55,6 +50,7 @@ export default function AnalogInputSettingsModal({
 
   const handleSave = async () => {
     setIsSaving(true);
+
     const slot = selectedInput.id;
     const isDev = window.location.hostname === "localhost";
 
@@ -100,7 +96,7 @@ export default function AnalogInputSettingsModal({
         alert("Einstellungen gespeichert (Produktion).");
       }
 
-      onClose();
+      dispatch(setIsSettingsModalOpen(false));
       location.reload();
     } catch (err) {
       alert("Fehler beim Speichern.");
@@ -118,7 +114,7 @@ export default function AnalogInputSettingsModal({
             Einstellungen Messwerteingang {selectedInput.id}
           </h2>
           <button
-            onClick={onClose}
+            onClick={() => dispatch(setIsSettingsModalOpen(false))}
             className="text-2xl hover:text-gray-400"
             aria-label="Modal schließen"
           >
@@ -128,97 +124,85 @@ export default function AnalogInputSettingsModal({
 
         {/* Bezeichnung */}
         <div className="grid grid-cols-2 gap-x-4 gap-y-3">
-          <div>
-            <span className="font-normal">Bezeichnung:</span>
-          </div>
-          <div>
-            <input
-              type="text"
-              className="w-full border rounded px-3 py-1 mb-4"
-              value={label}
-              onChange={(e) => setLabel(e.target.value)}
-            />
-          </div>
+          <span className="font-normal">Bezeichnung:</span>
+          <input
+            type="text"
+            className="w-full border rounded px-3 py-1 mb-4"
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+          />
         </div>
+
         {/* Offset */}
         <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
-          <div>
-            <span className="font-normal">Offset:</span>
-          </div>
-          <div>
-            <input
-              type="number"
-              step="0.001"
-              className="border border-gray-300 rounded px-2 py-1 w-full text-right "
-              value={offset}
-              onChange={(e) => setOffset(e.target.value)}
-            />
-          </div>
+          <span className="font-normal">Offset:</span>
+          <input
+            type="number"
+            step="0.001"
+            className="border border-gray-300 rounded px-2 py-1 w-full text-right"
+            value={offset}
+            onChange={(e) => setOffset(e.target.value)}
+          />
         </div>
+
         {/* Faktor */}
         <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
-          <div>
-            <span className="font-normal">Faktor:</span>
-          </div>
-          <div>
-            <input
-              type="number"
-              step="0.001"
-              className="border border-gray-300 rounded px-2 py-1 w-full text-right"
-              value={factor}
-              onChange={(e) => setFactor(e.target.value)}
-            />{" "}
-          </div>
+          <span className="font-normal">Faktor:</span>
+          <input
+            type="number"
+            step="0.001"
+            className="border border-gray-300 rounded px-2 py-1 w-full text-right"
+            value={factor}
+            onChange={(e) => setFactor(e.target.value)}
+          />
         </div>
-        {/* Einheit  */}
-        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
-          <div>
-            <span className="font-normal">Einheit:</span>
-          </div>
-          <div>
-            <Listbox value={unit} onChange={setUnit}>
-              <div className="relative w-full">
-                <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm text-gray-900 font-sans">
-                  <span>{unit}</span>
-                  <svg
-                    className="w-5 h-5 text-gray-400"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
+
+        {/* Einheit */}
+        <div className="grid grid-cols-2 gap-x-4 gap-y-3 mb-4">
+          <span className="font-normal">Einheit:</span>
+          <Listbox value={unit} onChange={setUnit}>
+            <div className="relative w-full">
+              <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm text-gray-900 font-sans">
+                <span>{unit}</span>
+                <svg
+                  className="w-5 h-5 text-gray-400"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </Listbox.Button>
+              <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm text-gray-900 font-sans">
+                {unitOptions.map((opt) => (
+                  <Listbox.Option
+                    key={opt}
+                    value={opt}
+                    className={({ selected, active }) =>
+                      `px-4 py-1 cursor-pointer ${
+                        selected
+                          ? "bg-littwin-blue text-white font-medium"
+                          : active
+                          ? "bg-gray-200"
+                          : "text-gray-900"
+                      }`
+                    }
                   >
-                    <path
-                      fillRule="evenodd"
-                      d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </Listbox.Button>
-                <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm text-gray-900 font-sans">
-                  {unitOptions.map((opt) => (
-                    <Listbox.Option
-                      key={opt}
-                      value={opt}
-                      className={({ selected, active }) =>
-                        `px-4 py-1 cursor-pointer ${
-                          selected
-                            ? "bg-littwin-blue text-white font-medium"
-                            : active
-                            ? "bg-gray-200"
-                            : "text-gray-900"
-                        }`
-                      }
-                    >
-                      {opt}
-                    </Listbox.Option>
-                  ))}
-                </Listbox.Options>
-              </div>
-            </Listbox>
-          </div>
+                    {opt}
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </div>
+          </Listbox>
         </div>
-        {/* Loggerintervall/Speicherintervall */}
-        <div className="grid grid-cols-2 gap-x-4 gap-y-3 ">
+
+        {/* Speicherintervall */}
+        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
           <span className="font-normal">Speicherintervall:</span>
           <div className="relative w-full">
             <input
@@ -233,6 +217,7 @@ export default function AnalogInputSettingsModal({
           </div>
         </div>
 
+        {/* Speichern-Button */}
         <div className="flex justify-end gap-2 mt-6">
           <button
             onClick={handleSave}

components/main/analogInputs/AnalogInputsTable.tsx

@@ -7,18 +7,13 @@ import { getAnalogInputsThunk } from "@/redux/thunks/getAnalogInputsThunk";
 import { Icon } from "@iconify/react";
 import settingsIcon from "@iconify/icons-mdi/settings";
 import waveformIcon from "@iconify/icons-mdi/waveform";
-import { setSelectedAnalogInput } from "@/redux/slices/selectedAnalogInputSlice";
+import { setSelectedAnalogInput } from "@/redux/slices/analogInputs/selectedAnalogInputSlice";
+import { setIsSettingsModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
+import { setSelectedId } from "@/redux/slices/analogInputs/analogInputsHistorySlice";
 
-export default function AnalogInputsTable({
-  setSelectedId,
-  setSelectedInput,
-  setIsSettingsModalOpen,
-}: {
-  setSelectedId: (id: number) => void;
-  setSelectedInput: (input: AnalogInput) => void;
-  setIsSettingsModalOpen: (open: boolean) => void;
-}) {
+export default function AnalogInputsTable() {
   const dispatch = useDispatch<AppDispatch>();
+
   const [activeId, setActiveId] = React.useState<number | null>(null);
 
   useEffect(() => {
@@ -30,9 +25,10 @@ export default function AnalogInputsTable({
   );
 
   const handleSelect = (id: number, input: AnalogInput) => {
-    setSelectedId(id);
+    dispatch(setIsSettingsModalOpen(true));
+    dispatch(setSelectedId(id));
     setActiveId(id);
-    dispatch(setSelectedAnalogInput(input)); // 🧠 hier kommt die Bezeichnung in Redux
+    dispatch(setSelectedAnalogInput(input));
   };
 
   return (
@@ -100,8 +96,6 @@ export default function AnalogInputsTable({
                     <button
                       onClick={() => {
                         handleSelect(e.id!, e);
-                        setSelectedInput(e);
-                        setIsSettingsModalOpen(true);
                       }}
                       className="text-gray-400 hover:text-gray-500"
                     >

components/main/analogInputs/AnalogInputsView.tsx

@@ -6,20 +6,20 @@ import AnalogInputsChart from "@/components/main/analogInputs/AnalogInputsChart"
 import AnalogInputsSettingsModal from "@/components/main/analogInputs/AnalogInputsSettingsModal";
 import { getAnalogInputsThunk } from "@/redux/thunks/getAnalogInputsThunk";
 import { useAppDispatch } from "@/redux/store";
-
-export interface AnalogInput2 {
-  id: number;
-  label?: string;
-  offset?: number | string;
-  factor?: number | string;
-  loggerInterval: string;
-  unit?: string;
-}
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
 
 function AnalogInputsView() {
-  const [selectedId, setSelectedId] = useState<number | null>(null);
-  const [selectedInput, setSelectedInput] = useState<AnalogInput2 | null>(null);
-  const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
+  const selectedInput = useSelector(
+    (state: RootState) => state.selectedAnalogInput
+  );
+  const selectedId = useSelector(
+    (state: RootState) => state.analogInputsHistory.selectedId
+  );
+  const isSettingsModalOpen = useSelector(
+    (state: RootState) => state.analogInputsUi.isSettingsModalOpen
+  );
+
   const dispatch = useAppDispatch();
 
   useEffect(() => {
@@ -40,13 +40,7 @@ function AnalogInputsView() {
             <h2 className="text-xl font-semibold mb-4 text-gray-700">
               Messwerteingänge
             </h2>
-            <AnalogInputsTable
-              setSelectedId={setSelectedId}
-              setSelectedInput={(input) =>
-                setSelectedInput(input as unknown as AnalogInput2)
-              }
-              setIsSettingsModalOpen={setIsSettingsModalOpen}
-            />
+            <AnalogInputsTable />
           </div>
 
           <div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
@@ -58,13 +52,7 @@ function AnalogInputsView() {
         </div>
       </div>
 
-      {selectedInput !== null && (
-        <AnalogInputsSettingsModal
-          selectedInput={selectedInput}
-          isOpen={isSettingsModalOpen}
-          onClose={() => setIsSettingsModalOpen(false)}
-        />
-      )}
+      {selectedInput !== null && <AnalogInputsSettingsModal />}
     </div>
   );
 }