feat: systemSettingsSlice hinzugefügt und Header sowie Einstellungen angepasst

- 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

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 || "");