diff --git a/package-lock.json b/package-lock.json index 65af045..66594eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@iconify-icons/ri": "^1.2.10", "@iconify/json": "^2.2.253", "@iconify/react": "^5.0.2", + "@reduxjs/toolkit": "^2.3.0", "autoprefixer": "^10.4.20", "bootstrap-icons": "^1.11.3", "chart.js": "^4.4.5", @@ -20,7 +21,10 @@ "react": "^18", "react-dom": "^18", "react-modal": "^3.16.1", - "react-spinners": "^0.14.1" + "react-redux": "^9.1.2", + "react-spinners": "^0.14.1", + "redux": "^5.0.1", + "redux-persist": "^6.0.0" }, "devDependencies": { "postcss": "^8.4.47", @@ -336,6 +340,29 @@ "node": ">=14" } }, + "node_modules/@reduxjs/toolkit": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.3.0.tgz", + "integrity": "sha512-WC7Yd6cNGfHx8zf+iu+Q1UPTfEcXhQ+ATi7CV1hlrSAaQBdlPzg7Ww/wJHNQem7qG9rxmWoFCDCPubSvFObGzA==", + "dependencies": { + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.1.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17.0.0 || ^18", + "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-redux": { + "optional": true + } + } + }, "node_modules/@swc/counter": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", @@ -350,6 +377,11 @@ "tslib": "^2.4.0" } }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", + "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" + }, "node_modules/ansi-regex": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", @@ -860,6 +892,15 @@ "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.0.tgz", "integrity": "sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw==" }, + "node_modules/immer": { + "version": "10.1.1", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz", + "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/is-binary-path": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", @@ -1493,6 +1534,28 @@ "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" } }, + "node_modules/react-redux": { + "version": "9.1.2", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz", + "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==", + "dependencies": { + "@types/use-sync-external-store": "^0.0.3", + "use-sync-external-store": "^1.0.0" + }, + "peerDependencies": { + "@types/react": "^18.2.25", + "react": "^18.0", + "redux": "^5.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "redux": { + "optional": true + } + } + }, "node_modules/react-spinners": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.14.1.tgz", @@ -1523,6 +1586,32 @@ "node": ">=8.10.0" } }, + "node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" + }, + "node_modules/redux-persist": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz", + "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==", + "peerDependencies": { + "redux": ">4.0.0" + } + }, + "node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "peerDependencies": { + "redux": "^5.0.0" + } + }, + "node_modules/reselect": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz", + "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==" + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -1907,6 +1996,14 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", + "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 1c13743..3bd064e 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@iconify-icons/ri": "^1.2.10", "@iconify/json": "^2.2.253", "@iconify/react": "^5.0.2", + "@reduxjs/toolkit": "^2.3.0", "autoprefixer": "^10.4.20", "bootstrap-icons": "^1.11.3", "chart.js": "^4.4.5", @@ -23,7 +24,10 @@ "react": "^18", "react-dom": "^18", "react-modal": "^3.16.1", - "react-spinners": "^0.14.1" + "react-redux": "^9.1.2", + "react-spinners": "^0.14.1", + "redux": "^5.0.1", + "redux-persist": "^6.0.0" }, "devDependencies": { "postcss": "^8.4.47", diff --git a/pages/_app.js b/pages/_app.js index 817a44d..1ebe903 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -5,37 +5,36 @@ import Header from "../components/Header"; import Navigation from "../components/Navigation"; import Footer from "../components/Footer"; import "../styles/globals.css"; +import { Provider } from "react-redux"; +import { setVariables } from "../store/variablesSlice"; +import store from "../store/store"; function MyApp({ Component, pageProps }) { useEffect(() => { - if (typeof window !== "undefined") { - const initializeDatabase = async () => { - try { - await loadWindowVariables(); - console.log("IndexedDB initialisiert."); - } catch (error) { - console.error("Fehler bei der Initialisierung der IndexedDB:", error); - } - }; + const loadAndStoreVariables = async () => { + await loadWindowVariables(); + const variables = {}; // Hier Variablen laden und in variables speichern + store.dispatch(setVariables(variables)); + }; - initializeDatabase(); - setInterval(() => { - loadWindowVariables(); - }, 10000); + if (typeof window !== "undefined") { + loadAndStoreVariables(); } }, []); return ( -
-
-
- -
- -
+ +
+
+
+ +
+ +
+
+
-
+ ); } diff --git a/store/store.js b/store/store.js new file mode 100644 index 0000000..f5a3d8c --- /dev/null +++ b/store/store.js @@ -0,0 +1,11 @@ +// store/store.js +import { configureStore } from "@reduxjs/toolkit"; +import variablesReducer from "./variablesSlice"; + +const store = configureStore({ + reducer: { + variables: variablesReducer, + }, +}); + +export default store; diff --git a/store/variablesSlice.js b/store/variablesSlice.js new file mode 100644 index 0000000..5ecfab3 --- /dev/null +++ b/store/variablesSlice.js @@ -0,0 +1,58 @@ +// store/variablesSlice.js +import { createSlice } from "@reduxjs/toolkit"; + +const initialState = { + last20Messages: null, + deviceName: null, + mac1: null, + mac2: null, + ip: null, + subnet: null, + gateway: null, + datetime: null, + de: null, + counter: null, + flutter: null, + kueOnline: [], + kueID: [], + kueAlarm1: [], + kueAlarm2: [], + kueRes: [], + kueCableBreak: [], + kueGroundFault: [], + kueLimit1: null, + kueLimit2Low: null, + kueDelay1: null, + kueLoopInterval: null, + kueVersion: null, + tdrAtten: null, + tdrPulse: null, + tdrSpeed: null, + tdrAmp: null, + tdrTrigger: null, + tdrLocation: null, + tdrActive: null, + kueOverflow: null, + kueResidence: null, + tdrLast: null, + appVersion: null, +}; + +const variablesSlice = createSlice({ + name: "variables", + initialState, + reducers: { + setVariable(state, action) { + const { key, value } = action.payload; + state[key] = value; + }, + setVariables(state, action) { + Object.entries(action.payload).forEach(([key, value]) => { + state[key] = value; + }); + }, + }, +}); + +export const { setVariable, setVariables } = variablesSlice.actions; +export default variablesSlice.reducer;