NTP Reiter/Tab erstellt

components/main/settingsPageComponents/GeneralSettings.tsx

@@ -5,12 +5,12 @@ import { useSelector } from "react-redux";
 import handleClearDatabase from "./handlers/dbHandlers/handleClearDatabase";
 import handleReboot from "./handlers/handleReboot";
 import handleSetDateTime from "./handlers/handleSetDateTime";
-import handleSubmit from "./handlers/handleSubmit";
 import { useAdminAuth } from "./hooks/useAdminAuth";
 import handleAdminLogin from "./handlers/handleAdminLogin";
 import { useDispatch } from "react-redux";
 import { AppDispatch } from "../../../redux/store";
 import { fetchSystemSettingsThunk } from "../../../redux/thunks/fetchSystemSettingsThunk";
+import handleGeneralSubmit from "./handlers/handleGeneralSubmit";
 
 const GeneralSettings: React.FC = () => {
   const dispatch = useDispatch<AppDispatch>();
@@ -33,13 +33,6 @@ const GeneralSettings: React.FC = () => {
   const [systemUhr, setSystemUhr] = useState(
     systemSettings.cplInternalTimestamp || ""
   );
-  const [ntp1, setNtp1] = useState(systemSettings.ntp1 || "");
-  const [ntp2, setNtp2] = useState(systemSettings.ntp2 || "");
-  const [ntp3, setNtp3] = useState(systemSettings.ntp3 || "");
-  const [ntpTimezone, setNtpTimezone] = useState(
-    systemSettings.ntpTimezone || ""
-  );
-  const [active, setActive] = useState(systemSettings.ntpActive || false);
 
   const handleLogin = async () => {
     handleAdminLogin(
@@ -148,62 +141,6 @@ const GeneralSettings: React.FC = () => {
           />
         </div>
 
-        {/* NTP */}
-        <div className="md:grid md:grid-cols-2 md:gap-2 col-span-2">
-          <div>
-            <label className="block text-xs md:text-sm 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 md:text-sm 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 md:text-sm 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 md:text-sm 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>
-        <div className="col-span-2 flex items-center gap-2 mt-2">
-          <label className="text-xs md:text-sm font-medium">NTP aktiv:</label>
-          <input
-            type="checkbox"
-            checked={active}
-            onChange={(e) => setActive(e.target.checked)}
-          />
-        </div>
-
         {/* Admin Login */}
         <div className="col-span-2 flex flex-col gap-1">
           {isAdminLoggedIn ? (
@@ -263,19 +200,19 @@ const GeneralSettings: React.FC = () => {
             type="button"
             className="bg-littwin-blue text-white px-2 py-1 rounded text-xs w-full md:w-auto"
             onClick={() =>
-              handleSubmit(
+              handleGeneralSubmit(
                 {
                   name,
                   ip,
                   subnet,
                   gateway,
-                  ntp1,
-                  ntp2,
-                  ntp3,
-                  ntpTimezone,
-                  active,
                 },
-                systemSettings
+                {
+                  name: systemSettings.deviceName ?? "",
+                  ip: systemSettings.ip ?? "",
+                  subnet: systemSettings.subnet ?? "",
+                  gateway: systemSettings.gateway ?? "",
+                }
               )
             }
           >

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;

components/main/settingsPageComponents/handlers/handleGeneralSubmit.ts

@@ -0,0 +1,67 @@
+// /components/main/settingsPageComponents/handlers/handleGeneralSubmit.ts
+
+const handleGeneralSubmit = (
+  original: {
+    name: string;
+    ip: string;
+    subnet: string;
+    gateway: string;
+  },
+  current: {
+    name: string;
+    ip: string;
+    subnet: string;
+    gateway: string;
+  }
+) => {
+  const changes: { [key: string]: string } = {};
+  let networkChanges = false;
+  let newIp: string | null = null;
+
+  if (current.name !== original.name) {
+    changes.SNNA = current.name;
+    networkChanges = true;
+  }
+  if (current.ip !== original.ip) {
+    changes.SEI01 = current.ip;
+    newIp = current.ip;
+    networkChanges = true;
+  }
+  if (current.subnet !== original.subnet) {
+    changes.SEI02 = current.subnet;
+    networkChanges = true;
+  }
+  if (current.gateway !== original.gateway) {
+    changes.SEI03 = current.gateway;
+    networkChanges = true;
+  }
+
+  if (Object.keys(changes).length === 0) {
+    alert("Keine Änderungen vorgenommen.");
+    return;
+  }
+
+  let url = `${window.location.origin}/CPL?${window.location.pathname}`;
+  Object.entries(changes).forEach(([key, value]) => {
+    url += `&${key}=${encodeURIComponent(value)}`;
+  });
+
+  console.log(url);
+
+  fetch(url, { method: "GET" })
+    .then(() => {
+      alert("Netzwerkdaten erfolgreich gesendet!");
+      if (networkChanges) {
+        alert(
+          "Ein Neustart ist erforderlich, um die Netzwerkeinstellungen zu übernehmen."
+        );
+        // Optional: handleReboot(newIp);
+      }
+    })
+    .catch((err) => {
+      console.error("Fehler:", err);
+      alert("Fehler beim Senden der Netzwerkdaten.");
+    });
+};
+
+export default handleGeneralSubmit;

components/main/settingsPageComponents/handlers/handleNtpSubmit.ts

@@ -0,0 +1,59 @@
+// /components/main/settingsPageComponents/handlers/handleNtpSubmit.ts
+
+const handleNtpSubmit = (
+  original: {
+    ntp1: string;
+    ntp2: string;
+    ntp3: string;
+    ntpTimezone: string;
+    active: boolean;
+  },
+  current: {
+    ntp1: string;
+    ntp2: string;
+    ntp3: string;
+    ntpTimezone: string;
+    active: boolean;
+  }
+) => {
+  const changes: { [key: string]: string | boolean } = {};
+
+  if (current.ntp1 !== original.ntp1) {
+    changes.SNIP1 = current.ntp1;
+  }
+  if (current.ntp2 !== original.ntp2) {
+    changes.SNIP2 = current.ntp2;
+  }
+  if (current.ntp3 !== original.ntp3) {
+    changes.SNIP3 = current.ntp3;
+  }
+  if (current.ntpTimezone !== original.ntpTimezone) {
+    changes.SNTZ = current.ntpTimezone;
+  }
+  if (current.active !== original.active) {
+    changes.SNAC = current.active ? "1" : "0";
+  }
+
+  if (Object.keys(changes).length === 0) {
+    alert("Keine Änderungen vorgenommen.");
+    return;
+  }
+
+  let url = `${window.location.origin}/CPL?${window.location.pathname}`;
+  Object.entries(changes).forEach(([key, value]) => {
+    url += `&${key}=${encodeURIComponent(value)}`;
+  });
+
+  console.log(url);
+
+  fetch(url, { method: "GET" })
+    .then(() => {
+      alert("NTP-Daten erfolgreich gesendet!");
+    })
+    .catch((err) => {
+      console.error("Fehler:", err);
+      alert("Fehler beim Senden der NTP-Daten.");
+    });
+};
+
+export default handleNtpSubmit;