85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { useAppDispatch } from "../redux/store";
|
|
import { setSystemSettings } from "../redux/slices/systemSettingsSlice";
|
|
import { loadWindowVariables } from "../utils/loadWindowVariables";
|
|
import GeneralSettings from "../components/main/settingsPageComponents/GeneralSettings";
|
|
import OPCUAInterfaceSettings from "../components/main/settingsPageComponents/OPCUAInterfaceSettings";
|
|
|
|
export default function Settings() {
|
|
const [activeTab, setActiveTab] = useState("tab1");
|
|
const dispatch = useAppDispatch();
|
|
|
|
useEffect(() => {
|
|
const loadSettings = async () => {
|
|
const vars = await loadWindowVariables();
|
|
if (!vars) return;
|
|
|
|
const {
|
|
deviceName,
|
|
mac1,
|
|
ip,
|
|
subnet,
|
|
gateway,
|
|
cplInternalTimestamp,
|
|
ntp1,
|
|
ntp2,
|
|
ntp3,
|
|
ntpTimezone,
|
|
ntpActive,
|
|
} = vars;
|
|
|
|
dispatch(
|
|
setSystemSettings({
|
|
deviceName,
|
|
mac1,
|
|
ip,
|
|
subnet,
|
|
gateway,
|
|
cplInternalTimestamp,
|
|
ntp1,
|
|
ntp2,
|
|
ntp3,
|
|
ntpTimezone,
|
|
ntpActive,
|
|
})
|
|
);
|
|
};
|
|
|
|
loadSettings();
|
|
}, [dispatch]);
|
|
|
|
return (
|
|
<div className="p-4">
|
|
{/* Tab-Navigation */}
|
|
<div className="flex border-b border-gray-200">
|
|
<button
|
|
className={`px-4 py-2 ${
|
|
activeTab === "tab1"
|
|
? "border-b-2 border-blue-500 text-blue-500"
|
|
: ""
|
|
}`}
|
|
onClick={() => setActiveTab("tab1")}
|
|
>
|
|
Allgemeine Einstellungen
|
|
</button>
|
|
<button
|
|
className={`px-4 py-2 ${
|
|
activeTab === "tab2"
|
|
? "border-b-2 border-blue-500 text-blue-500"
|
|
: ""
|
|
}`}
|
|
onClick={() => setActiveTab("tab2")}
|
|
>
|
|
OPCUA
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tab-Inhalt */}
|
|
<div className="mt-4">
|
|
{activeTab === "tab1" && <GeneralSettings />}
|
|
{activeTab === "tab2" && <OPCUAInterfaceSettings />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|