113 lines
3.5 KiB
TypeScript
113 lines
3.5 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { RootState } from "../../../redux/store";
|
|
|
|
import handleNtpSubmit from "./handlers/handleNtpSubmit";
|
|
|
|
const NTPSettings: React.FC = () => {
|
|
const dispatch = useDispatch();
|
|
const systemSettings = useSelector(
|
|
(state: RootState) => state.systemSettingsSlice
|
|
);
|
|
|
|
// Wenn Daten noch nicht geladen sind, Ladeanzeige anzeigen
|
|
if (!systemSettings || systemSettings.ntp1 === undefined) {
|
|
return <p className="text-xs text-gray-500">Lade NTP-Daten...</p>;
|
|
}
|
|
|
|
// Lokale States mit Fallback-Werten absichern
|
|
const [ntp1, setNtp1] = React.useState(systemSettings.ntp1 ?? "");
|
|
const [ntp2, setNtp2] = React.useState(systemSettings.ntp2 ?? "");
|
|
const [ntp3, setNtp3] = React.useState(systemSettings.ntp3 ?? "");
|
|
const [ntpTimezone, setNtpTimezone] = React.useState(
|
|
systemSettings.ntpTimezone ?? ""
|
|
);
|
|
const [active, setActive] = React.useState(systemSettings.ntpActive ?? false);
|
|
|
|
return (
|
|
<div className="p-6 md:p-3 bg-gray-100 max-w-5xl mr-auto">
|
|
<h2 className="text-sm md:text-md font-bold mb-4">NTP Einstellungen</h2>
|
|
|
|
<div className="grid md:grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="block text-xs font-medium">NTP Server 1</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
|
|
value={ntp1}
|
|
onChange={(e) => setNtp1(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium">NTP Server 2</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
|
|
value={ntp2}
|
|
onChange={(e) => setNtp2(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium">NTP Server 3</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
|
|
value={ntp3}
|
|
onChange={(e) => setNtp3(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-medium">Zeitzone</label>
|
|
<input
|
|
type="text"
|
|
className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
|
|
value={ntpTimezone}
|
|
onChange={(e) => setNtpTimezone(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-span-2 flex items-center gap-2 mt-2">
|
|
<label className="text-xs font-medium">NTP aktiv:</label>
|
|
<input
|
|
type="checkbox"
|
|
checked={active}
|
|
onChange={(e) => setActive(e.target.checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-span-2">
|
|
<button
|
|
onClick={() =>
|
|
handleNtpSubmit(
|
|
{
|
|
ntp1: systemSettings.ntp1 ?? "",
|
|
ntp2: systemSettings.ntp2 ?? "",
|
|
ntp3: systemSettings.ntp3 ?? "",
|
|
ntpTimezone: systemSettings.ntpTimezone ?? "",
|
|
active: systemSettings.ntpActive ?? false,
|
|
},
|
|
{
|
|
ntp1,
|
|
ntp2,
|
|
ntp3,
|
|
ntpTimezone,
|
|
active,
|
|
}
|
|
)
|
|
}
|
|
className="bg-littwin-blue text-white px-3 py-1 rounded text-xs"
|
|
>
|
|
Speichern
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NTPSettings;
|