refactor: extract Kabelueberwachung logic into KabelueberwachungView for better structure

2025-07-08 13:13:30 +02:00
parent 454b8bfb8d
commit b091a8d82a
14 changed files with 423 additions and 397 deletions
--- a/components/main/settingsPageComponents/SettingsView.tsx
+++ b/components/main/settingsPageComponents/SettingsView.tsx
@@ -0,0 +1,85 @@
+// components/main/settingsPageComponents/SettingsView.tsx
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { useAppDispatch } from "@/redux/store";
+import { getSystemSettingsThunk } from "@/redux/thunks/getSystemSettingsThunk";
+import GeneralSettings from "./GeneralSettings";
+import OPCUAInterfaceSettings from "./OPCUAInterfaceSettings";
+import DatabaseSettings from "./DatabaseSettings";
+import NTPSettings from "./NTPSettings";
+import UserManagementSettings from "./UserManagementSettings";
+
+export default function SettingsView() {
+  const [activeTab, setActiveTab] = useState("tab1");
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(getSystemSettingsThunk());
+  }, [dispatch]);
+
+  return (
+    <div className="p-4">
+      <div className="flex border-b border-gray-200">
+        <button
+          className={`px-4 py-2 ${
+            activeTab === "tab1"
+              ? "border-b-2 border-littwin-blue text-littwin-blue"
+              : ""
+          }`}
+          onClick={() => setActiveTab("tab1")}
+        >
+          Allgemeine Einstellungen
+        </button>
+        <button
+          className={`px-4 py-2 ${
+            activeTab === "tab2"
+              ? "border-b-2 border-littwin-blue text-littwin-blue"
+              : ""
+          }`}
+          onClick={() => setActiveTab("tab2")}
+        >
+          OPCUA
+        </button>
+        <button
+          className={`px-4 py-2 ${
+            activeTab === "tab3"
+              ? "border-b-2 border-littwin-blue text-littwin-blue"
+              : ""
+          }`}
+          onClick={() => setActiveTab("tab3")}
+        >
+          Datenbank
+        </button>
+        <button
+          className={`px-4 py-2 ${
+            activeTab === "tab4"
+              ? "border-b-2 border-littwin-blue text-littwin-blue"
+              : ""
+          }`}
+          onClick={() => setActiveTab("tab4")}
+        >
+          NTP
+        </button>
+        <button
+          className={`px-4 py-2 ${
+            activeTab === "tab5"
+              ? "border-b-2 border-littwin-blue text-littwin-blue"
+              : ""
+          }`}
+          onClick={() => setActiveTab("tab5")}
+        >
+          Benutzerverwaltung
+        </button>
+      </div>
+
+      <div className="mt-4">
+        {activeTab === "tab1" && <GeneralSettings />}
+        {activeTab === "tab2" && <OPCUAInterfaceSettings />}
+        {activeTab === "tab3" && <DatabaseSettings />}
+        {activeTab === "tab4" && <NTPSettings />}
+        {activeTab === "tab5" && <UserManagementSettings />}
+      </div>
+    </div>
+  );
+}