From dc589c35df4c0b8bdb31ad961aad0af28557718d Mon Sep 17 00:00:00 2001
From: Ismail Ali <ismailali1553@gmail.com>
Date: Thu, 13 Feb 2025 20:31:56 +0100
Subject: [PATCH] NetworkInfo Kompoente von dashboard.tsx  incomponents
 ausgelagert

---
 .../Last20MessagesTable.tsx                   |  0
 components/main/uebersicht/NetworkInfo.tsx    | 73 +++++++++++++++++++
 config/webVersion.ts                          |  2 +-
 pages/dashboard.tsx                           | 50 +------------
 4 files changed, 77 insertions(+), 48 deletions(-)
 rename components/main/uebersicht/{last20MessagesTable => }/Last20MessagesTable.tsx (100%)
 create mode 100644 components/main/uebersicht/NetworkInfo.tsx

diff --git a/components/main/uebersicht/last20MessagesTable/Last20MessagesTable.tsx b/components/main/uebersicht/Last20MessagesTable.tsx
similarity index 100%
rename from components/main/uebersicht/last20MessagesTable/Last20MessagesTable.tsx
rename to components/main/uebersicht/Last20MessagesTable.tsx
diff --git a/components/main/uebersicht/NetworkInfo.tsx b/components/main/uebersicht/NetworkInfo.tsx
new file mode 100644
index 0000000..3bc4a7a
--- /dev/null
+++ b/components/main/uebersicht/NetworkInfo.tsx
@@ -0,0 +1,73 @@
+"use client";
+import React from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "../../../redux/store";
+
+const NetworkInfo: React.FC = () => {
+  // Werte direkt aus Redux holen
+  const ip =
+    useSelector((state: RootState) => state.variables.ip) || "Unbekannt";
+  const subnet =
+    useSelector((state: RootState) => state.variables.subnet) || "Unbekannt";
+  const gateway =
+    useSelector((state: RootState) => state.variables.gateway) || "Unbekannt";
+  const opcUaZustand =
+    useSelector((state: RootState) => state.variables.opcUaZustand) ||
+    "Unbekannt";
+  const opcUaNodesetName =
+    useSelector((state: RootState) => state.variables.opcUaNodesetName) ||
+    "Unbekannt";
+
+  return (
+    <div className="flex items-center space-x-4">
+      <div className="flex-shrink-0 flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200 laptop:m-0 laptop:scale-y-75">
+        <div className="flex items-center space-x-4">
+          <img src="/images/IP-icon.svg" alt="IP Address" className="w-6" />
+          <div>
+            <p className="text-xs text-gray-500">IP-Adresse</p>
+            <p className="text-sm font-medium text-gray-700">{ip}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-4">
+          <img
+            src="/images/subnet-mask.svg"
+            alt="subnet mask"
+            className="w-6"
+          />
+          <div>
+            <p className="text-xs text-gray-500">Subnet-Maske</p>
+            <p className="text-sm font-medium text-gray-700">{subnet}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-4">
+          <img src="/images/gateway.svg" alt="gateway" className="w-6" />
+          <div>
+            <p className="text-xs text-gray-500">Gateway</p>
+            <p className="text-sm font-medium text-gray-700">{gateway}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-4">
+          <div className="text-xs font-bold text-blue-600">OPC-UA</div>
+          <div>
+            <p className="text-xs text-gray-500">Status</p>
+            <p className="text-sm font-medium text-gray-700">{opcUaZustand}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center space-x-4">
+          <div>
+            <p className="text-xs text-gray-500">Nodeset Name</p>
+            <p className="text-sm font-medium text-gray-700">
+              {opcUaNodesetName}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NetworkInfo;
diff --git a/config/webVersion.ts b/config/webVersion.ts
index eb13f46..26711bd 100644
--- a/config/webVersion.ts
+++ b/config/webVersion.ts
@@ -5,5 +5,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.19";
+const webVersion = "1.6.20";
 export default webVersion;
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index f08707b..2ac2407 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -16,7 +16,8 @@ import {
   setOpcUaNodesetName,
 } from "../redux/slices/variablesSlice";
 import webVersion from "../config/webVersion";
-import Last20MessagesTable from "../components/main/uebersicht/last20MessagesTable/Last20MessagesTable";
+import Last20MessagesTable from "../components/main/uebersicht/Last20MessagesTable";
+import NetworkInfo from "../components/main/uebersicht/NetworkInfo";
 
 function Dashboard() {
   const router = useRouter();
@@ -197,52 +198,7 @@ function Dashboard() {
         </div>
       </div>
 
-      <div className="flex-shrink-0 flex justify-between items-center mt-1 bg-white p-2 rounded-lg shadow-md border border-gray-200  laptop:m-0 laptop:scale-y-75">
-        <div className="flex items-center space-x-4">
-          <img src="/images/IP-icon.svg" alt="IP Address" className="w-6 " />
-          <div>
-            <p className="text-xs text-gray-500">IP-Adresse</p>
-            <p className="text-sm font-medium text-gray-700">{ip}</p>
-          </div>
-        </div>
-
-        <div className="flex items-center space-x-4">
-          <img
-            src="/images/subnet-mask.svg"
-            alt="subnet mask"
-            className="w-6 "
-          />
-          <div>
-            <p className="text-xs text-gray-500">Subnet-Maske</p>
-            <p className="text-sm font-medium text-gray-700">{subnet}</p>
-          </div>
-        </div>
-        <div className="flex items-center space-x-4">
-          <img src="/images/gateway.svg" alt="gateway" className="w-6 " />
-          <div>
-            <p className="text-xs text-gray-500">Gateway</p>
-            <p className="text-sm font-medium text-gray-700">{gateway}</p>
-          </div>
-        </div>
-
-        <div className="flex items-center space-x-4">
-          <div className="text-xs font-bold text-blue-600">OPC-UA</div>
-
-          <div>
-            <p className="text-xs text-gray-500">Status</p>
-            <p className="text-sm font-medium text-gray-700">{opcUaZustand}</p>
-          </div>
-        </div>
-
-        <div className="flex items-center space-x-4">
-          <div>
-            <p className="text-xs text-gray-500">Nodeset Name</p>
-            <p className="text-sm font-medium text-gray-700">
-              {opcUaNodesetName}
-            </p>
-          </div>
-        </div>
-      </div>
+      <NetworkInfo />
     </div>
   );
 }