Files
CPLv4.0/pages/_app.tsx
ISA 6b99c8017b feat: automatische Redux-Initialisierung in _app.tsx basierend auf Seite
- zentrale Datenaktualisierung per Thunk alle 10 Sekunden
- alle Seiten wie dashboard, kabelueberwachung, digitale/analoge Ein-/Ausgänge etc. werden erkannt
- automatische Zuordnung der richtigen Redux-Thunks
- README.md und CHANGELOG.md aktualisiert
- Version auf 1.6.400 erhöht
2025-05-13 07:24:29 +02:00

104 lines
4.0 KiB
TypeScript

"use client";
// pages/_app.tsx
import { useEffect, useState } from "react";
import { Provider } from "react-redux";
import store, { useAppDispatch } from "../redux/store";
import { AppProps } from "next/app";
import { loadWindowVariables } from "../utils/loadWindowVariables";
import Header from "../components/header/Header";
import Navigation from "../components/navigation/Navigation";
import Footer from "../components/footer/Footer";
// Thunks importieren
import { fetchKueDataThunk } from "../redux/thunks/fetchKueDataThunk";
import { fetchDigitalOutputsThunk } from "../redux/thunks/fetchDigitalOutputsThunk";
import { fetchAnalogeEingaengeThunk } from "../redux/thunks/fetchAnalogeEingaengeThunk";
import { fetchAnalogInputsHistoryThunk } from "../redux/thunks/fetchAnalogInputsHistoryThunk";
import { fetchLast20MessagesThunk } from "../redux/thunks/fetchLast20MessagesThunk";
import { fetchOpcUaSettingsThunk } from "../redux/thunks/fetchOpcUaSettingsThunk";
import { fetchSystemSettingsThunk } from "../redux/thunks/fetchSystemSettingsThunk";
import { fetchSystemVoltTempThunk } from "../redux/thunks/fetchSystemVoltTempThunk";
import { fetchReferenceCurveBySlotThunk } from "../redux/thunks/fetchReferenceCurveBySlotThunk";
import { fetchAllTDRReferenceChartThunk } from "../redux/thunks/fetchAllTDRReferenceChartThunk";
import { fetchTDRChartDataByIdThunk } from "../redux/thunks/fetchTDRChartDataByIdThunk";
import { fetchLoopChartDataThunk } from "../redux/thunks/fetchLoopChartDataThunk";
import "../styles/globals.css";
function MyApp({ Component, pageProps }: AppProps) {
return (
<Provider store={store}>
<AppContent Component={Component} pageProps={pageProps} />
</Provider>
);
}
function AppContent({ Component, pageProps }: AppProps) {
const dispatch = useAppDispatch();
const [sessionExpired, setSessionExpired] = useState(false);
useEffect(() => {
let intervalId: NodeJS.Timeout;
const pathname = window.location.pathname;
const loadAndDispatch = () => {
if (pathname.includes("kabelueberwachung")) {
dispatch(fetchKueDataThunk());
} else if (pathname.includes("digitalOutputs")) {
dispatch(fetchDigitalOutputsThunk());
} else if (pathname.includes("digitalInputs")) {
dispatch(fetchDigitalOutputsThunk()); // 🟠 evtl. anpassen
} else if (pathname.includes("analogeEingaenge")) {
dispatch(fetchAnalogeEingaengeThunk());
} else if (pathname.includes("analogHistory")) {
dispatch(fetchAnalogInputsHistoryThunk());
} else if (pathname.includes("dashboard")) {
dispatch(fetchLast20MessagesThunk());
} else if (pathname.includes("einstellungen")) {
dispatch(fetchOpcUaSettingsThunk());
} else if (pathname.includes("systemvolt")) {
dispatch(fetchSystemVoltTempThunk());
} else if (pathname.includes("system")) {
dispatch(fetchSystemSettingsThunk());
} else if (pathname.includes("tdrRef")) {
dispatch(fetchAllTDRReferenceChartThunk());
} else if (pathname.includes("tdrSlot")) {
dispatch(fetchReferenceCurveBySlotThunk());
} else if (pathname.includes("tdrId")) {
dispatch(fetchTDRChartDataByIdThunk());
} else if (pathname.includes("loopChart")) {
dispatch(fetchLoopChartDataThunk());
}
};
if (typeof window !== "undefined") {
loadAndDispatch();
intervalId = setInterval(loadAndDispatch, 10000);
return () => clearInterval(intervalId);
}
}, []);
return (
<div className="flex flex-col h-screen overflow-hidden">
<Header />
<div className="flex flex-grow w-full">
<Navigation className="w-56" />
<main className="w-full flex-grow">
{sessionExpired && (
<div className="bg-red-500 text-white p-4 text-center">
Ihre Sitzung ist abgelaufen oder die Verbindung ist
unterbrochen. Bitte laden Sie die Seite neu.
</div>
)}
<Component {...pageProps} />
</main>
</div>
<Footer />
</div>
);
}
export default MyApp;