NTP Reiter/Tab erstellt

2025-04-25 10:09:04 +02:00
parent 2cc9e6cbe2
commit 23953facc8
6 changed files with 259 additions and 72 deletions
--- a/components/main/settingsPageComponents/NTPSettings.tsx
+++ b/components/main/settingsPageComponents/NTPSettings.tsx
@@ -0,0 +1,112 @@
+"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;