Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: systemSettingsSlice hinzugefügt und Header sowie Einstellungen angepasst

Browse Source 
- Neuen Redux Slice `systemSettingsSlice` erstellt, um Systemdaten zentral zu verwalten.
- Header-Icon für Systemeinstellungen holt jetzt Daten aus `systemSettingsSlice` statt `variablesSlice`.
- Die Einstellungen-Seite (`Allgemeine Einstellungen`) wurde umgestellt und liest nun ebenfalls aus `systemSettingsSlice`.
- UI-Optimierungen für die Einstellungen-Seite, um alle Eingabefelder kompakter darzustellen.
This commit is contained in:
Ismail Ali
2025-02-23 09:09:47 +01:00
parent 262e8b1527
commit b85c8c67e2
10 changed files with 332 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
components/header/Header.tsx
View File

@@ -4,6 +4,7 @@ import Image from "next/image";
import { useRouter } from "next/router";
import "bootstrap-icons/font/bootstrap-icons.css";
import SettingsModal from "./settingsModal/SettingsModal";
import { RootState } from "../../redux/store";
import { useSelector } from "react-redux";
import decodeToken from "../../utils/decodeToken";
@@ -11,7 +12,9 @@ function Header() {
const router = useRouter();
const [showSettingsModal, setShowSettingsModal] = useState(false);
const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false);
const deviceName = useSelector((state) => state.variables.deviceName);
const deviceName = useSelector(
(state: RootState) => state.systemSettings.deviceName
);
const handleSettingsClick = () => setShowSettingsModal(true);
const handleCloseSettingsModal = () => setShowSettingsModal(false);

43
components/header/settingsModal/SettingsModal.tsx
View File

@@ -2,6 +2,7 @@
import React, { useState, useEffect } from "react";
import ReactModal from "react-modal";
import "bootstrap-icons/font/bootstrap-icons.css";
import { RootState } from "../../../redux/store";
import { useSelector } from "react-redux";
import handleClearDatabase from "./handlers/handleClearDatabase";
import handleReboot from "./handlers/handleReboot";
@@ -99,19 +100,37 @@ function SettingModal({ showModal, onClose }) {
}
}
}, [showModal]);
const deviceName_Redux = useSelector((state) => state.variables.deviceName);
const mac1_Redux = useSelector((state) => state.variables.mac1);
const ip_Redux = useSelector((state) => state.variables.ip);
const subnet_Redux = useSelector((state) => state.variables.subnet);
const gateway_Redux = useSelector((state) => state.variables.gateway);
const datetime_Redux = useSelector(
(state) => state.variables.cplInternalTimestamp
const deviceName_Redux = useSelector(
(state: RootState) => state.systemSettings.deviceName
);
const mac1_Redux = useSelector(
(state: RootState) => state.systemSettings.mac1
);
const ip_Redux = useSelector((state: RootState) => state.systemSettings.ip);
const subnet_Redux = useSelector(
(state: RootState) => state.systemSettings.subnet
);
const gateway_Redux = useSelector(
(state: RootState) => state.systemSettings.gateway
);
const datetime_Redux = useSelector(
(state: RootState) => state.systemSettings.cplInternalTimestamp
);
const ntp1_Redux = useSelector(
(state: RootState) => state.systemSettings.ntp1
);
const ntp2_Redux = useSelector(
(state: RootState) => state.systemSettings.ntp2
);
const ntp3_Redux = useSelector(
(state: RootState) => state.systemSettings.ntp3
);
const ntpTimezone_Redux = useSelector(
(state: RootState) => state.systemSettings.ntpTimezone
);
const active_Redux = useSelector(
(state: RootState) => state.systemSettings.ntpActive
);
const ntp1_Redux = useSelector((state) => state.variables.ntp1);
const ntp2_Redux = useSelector((state) => state.variables.ntp2);
const ntp3_Redux = useSelector((state) => state.variables.ntp3);
const ntpTimezone_Redux = useSelector((state) => state.variables.ntpTimezone);
const active_Redux = useSelector((state) => state.variables.ntpActive);
const [name, setName] = useState(deviceName_Redux || "");
const [mac1, setMac1] = useState(mac1_Redux || "");