feat(analogInputs): automatisches Laden der Chart-Daten bei Tabellenklick via Redux

- analogInputsHistorySlice um `autoLoad` erweitert, um automatisches Laden zu triggern - handleSelect in AnalogInputsTable dispatcht jetzt `setAutoLoad(true)` - AnalogInputsChart lauscht auf `autoLoad` + `selectedId` und lädt Daten automatisch - `autoLoad` wird nach dem Laden wieder auf false zurückgesetzt
2025-07-15 09:24:27 +02:00
parent 658aa0cae5
commit f485d87809
8 changed files with 67 additions and 27 deletions
--- a/.env.development
+++ b/.env.development
@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.599
+NEXT_PUBLIC_APP_VERSION=1.6.601
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

--- a/.env.production
+++ b/.env.production
@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.599
+NEXT_PUBLIC_APP_VERSION=1.6.601
 NEXT_PUBLIC_CPL_MODE=production
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## [1.6.601] – 2025-07-15
+
+- uninstall redux-persist, weil nimmt viel Performance weg
+
+---
+## [1.6.600] – 2025-07-15
+
+- uninstall redux-persist, weil nimmt viel Performance weg
+
+---
 ## [1.6.599] – 2025-07-14

 - feat: AnalogInputsChart mit DateRangePicker und vollständiger Redux-Integration erweitert
--- a/components/main/analogInputs/AnalogInputsChart.tsx
+++ b/components/main/analogInputs/AnalogInputsChart.tsx
@@ -22,6 +22,7 @@ import {
  setVonDatum,
  setBisDatum,
  setZeitraum,
+  setAutoLoad,
 } from "@/redux/slices/analogInputs/analogInputsHistorySlice";
 import DateRangePicker from "@/components/common/DateRangePicker";
 import { Listbox } from "@headlessui/react";
@@ -43,17 +44,12 @@ type AnalogInputHistoryPoint = {
  m: number;
 };

-export default function AnalogInputsChart({
-  selectedId,
-}: {
-  selectedId: number | null;
-}) {
+export default function AnalogInputsChart() {
  const dispatch = useDispatch<AppDispatch>();
  const chartRef = useRef<any>(null);

-  const { zeitraum, vonDatum, bisDatum, data, isLoading } = useSelector(
-    (state: RootState) => state.analogInputsHistory
-  );
+  const { zeitraum, vonDatum, bisDatum, data, autoLoad, selectedId } =
+    useSelector((state: RootState) => state.analogInputsHistory);

  useEffect(() => {
    const today = new Date();
@@ -128,6 +124,19 @@ export default function AnalogInputsChart({
    },
  };

+  useEffect(() => {
+    if (autoLoad && selectedId) {
+      dispatch(
+        getAnalogInputsHistoryThunk({
+          eingang: selectedId,
+          zeitraum,
+          vonDatum,
+          bisDatum,
+        })
+      );
+      dispatch(setAutoLoad(false)); // ✅ zurücksetzen, sonst endlose Schleife
+    }
+  }, [autoLoad, selectedId, dispatch, zeitraum, vonDatum, bisDatum]);
  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-wrap items-center gap-4 mb-2">
--- a/components/main/analogInputs/AnalogInputsTable.tsx
+++ b/components/main/analogInputs/AnalogInputsTable.tsx
@@ -9,7 +9,10 @@ import settingsIcon from "@iconify/icons-mdi/settings";
 import waveformIcon from "@iconify/icons-mdi/waveform";
 import { setSelectedAnalogInput } from "@/redux/slices/analogInputs/selectedAnalogInputSlice";
 import { setIsSettingsModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
-import { setSelectedId } from "@/redux/slices/analogInputs/analogInputsHistorySlice";
+import {
+  setSelectedId,
+  setAutoLoad,
+} from "@/redux/slices/analogInputs/analogInputsHistorySlice";

 export default function AnalogInputsTable() {
  const dispatch = useDispatch<AppDispatch>();
@@ -25,10 +28,10 @@ export default function AnalogInputsTable() {
  );

  const handleSelect = (id: number, input: AnalogInput) => {
-    dispatch(setIsSettingsModalOpen(true));
    dispatch(setSelectedId(id));
    setActiveId(id);
    dispatch(setSelectedAnalogInput(input));
+    dispatch(setAutoLoad(true));
  };

  return (
@@ -54,48 +57,60 @@ export default function AnalogInputsTable() {
          <tbody>
            {Object.values(analogInputs)
              .filter(
-                (e) =>
-                  e && typeof e.id === "number" && typeof e.label === "string"
+                (analogInput) =>
+                  analogInput &&
+                  typeof analogInput.id === "number" &&
+                  typeof analogInput.label === "string"
              )
              .slice(0, 8)
-              .map((e, index) => (
+              .map((analogInput, index) => (
                <tr
                  key={index}
                  className={`transition cursor-pointer ${
-                    e.id === activeId ? "bg-blue-100" : "hover:bg-gray-100"
+                    analogInput.id === activeId
+                      ? "bg-blue-100"
+                      : "hover:bg-gray-100"
                  }`}
                >
                  <td
                    className="border p-2"
-                    onClick={() => handleSelect(e.id!, e)}
+                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                  >
                    <div className="flex items-center gap-1 ">
                      <Icon
                        icon={waveformIcon}
                        className="text-gray-600 text-base laptop:text-sm xl:text-sm 2xl:text-lg"
                      />
-                      {e.id ?? "-"}
+                      {analogInput.id ?? "-"}
                    </div>
                  </td>
                  <td
                    className="border p-2 text-right"
-                    onClick={() => handleSelect(e.id!, e)}
+                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                  >
-                    {typeof e.value === "number" ? e.value.toFixed(2) : "-"}
+                    {typeof analogInput.value === "number"
+                      ? analogInput.value.toFixed(2)
+                      : "-"}
                  </td>

-                  <td className="border p-2">{e.unit || "-"}</td>
                  <td
                    className="border p-2"
-                    onClick={() => handleSelect(e.id!, e)}
+                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                  >
-                    {e.label || "----"}
+                    {analogInput.unit || "-"}
+                  </td>
+                  <td
+                    className="border p-2"
+                    onClick={() => handleSelect(analogInput.id!, analogInput)}
+                  >
+                    {analogInput.label || "----"}
                  </td>

                  <td className="border p-2 text-center">
                    <button
                      onClick={() => {
-                        handleSelect(e.id!, e);
+                        handleSelect(analogInput.id!, analogInput);
+                        dispatch(setIsSettingsModalOpen(true));
                      }}
                      className="text-gray-400 hover:text-gray-500"
                    >
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.599",
+  "version": "1.6.601",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cpl-v4",
-      "version": "1.6.599",
+      "version": "1.6.601",
      "dependencies": {
        "@fontsource/roboto": "^5.1.0",
        "@headlessui/react": "^2.2.4",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.599",
+  "version": "1.6.601",
  "private": true,
  "scripts": {
    "dev": "next dev",
--- a/redux/slices/analogInputs/analogInputsHistorySlice.ts
+++ b/redux/slices/analogInputs/analogInputsHistorySlice.ts
@@ -15,6 +15,7 @@ export interface InputHistoryState {
  isLoading: boolean;
  error: string | null;
  data: Record<string, AnalogInputsHistoryEntry[]>;
+  autoLoad: boolean;
 }

 const initialState: InputHistoryState = {
@@ -25,6 +26,7 @@ const initialState: InputHistoryState = {
  isLoading: false,
  error: null,
  data: {},
+  autoLoad: false,
 };

 export const analogInputsHistorySlice = createSlice({
@@ -34,6 +36,9 @@ export const analogInputsHistorySlice = createSlice({
    setSelectedId: (state, action: PayloadAction<number | null>) => {
      state.selectedId = action.payload;
    },
+    setAutoLoad: (state, action: PayloadAction<boolean>) => {
+      state.autoLoad = action.payload; // ✅ AutoLoad steuern
+    },
    setZeitraum: (state, action: PayloadAction<string>) => {
      state.zeitraum = action.payload;
    },
@@ -64,6 +69,7 @@ export const analogInputsHistorySlice = createSlice({

 export const {
  setSelectedId,
+  setAutoLoad,
  setZeitraum,
  setVonDatum,
  setBisDatum,