From 69b825bd30710ad4680ffbfbc07c0af52633d677 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Mon, 24 Feb 2025 07:16:55 +0100
Subject: [PATCH] feat: UI-Komponente responsiver gestaltet und angepasst
 OPCUA-Komponente
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Containergröße reduziert (`max-w-lg` statt `max-w-3xl`), um besser auf die Seite zu passen.
- Padding (`p-4` → `p-2`) und Schriftgrößen (`text-lg` → `text-base`, `text-sm` für Labels) optimiert.
- Buttons kompakter gemacht (`px-3 py-1` statt `px-4 py-2`), um Platz zu sparen.
- Flex-Layout verbessert (`flex-wrap`, `gap-2`), um die Darstellung auf kleineren Bildschirmen zu optimieren.
---
 .../OPCUAInterfaceSettings.tsx                | 63 +++++++++----------
 config/webVersion.ts                          |  2 +-
 2 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx b/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
index a4d026f..94568ac 100644
--- a/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
+++ b/components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx
@@ -34,15 +34,17 @@ export default function OPCUAInterfaceSettings() {
   };
 
   return (
-    <div className="max-w-3xl mx-auto p-4 bg-gray-100 shadow-md rounded-lg">
-      <h2 className="text-lg font-semibold mb-4">OPCUA Server Einstellungen</h2>
+    <div className="max-w-lg mx-auto p-2 bg-gray-100 shadow-md rounded-lg">
+      <h2 className="text-base font-semibold mb-3">
+        OPCUA Server Einstellungen
+      </h2>
 
       {/* ✅ Server Aktivierung */}
-      <div className="mb-4 flex items-center">
-        <label className="mr-4 font-medium">Server Status:</label>
+      <div className="mb-3 flex flex-wrap items-center">
+        <label className="mr-3 font-medium text-sm">Server Status:</label>
         <button
           onClick={() => dispatch(toggleOpcUaServer())}
-          className={`px-4 py-2 rounded ${
+          className={`px-3 py-1 rounded text-sm ${
             opcuaSettings.isEnabled ? "bg-green-500" : "bg-gray-300"
           } text-white`}
         >
@@ -51,12 +53,14 @@ export default function OPCUAInterfaceSettings() {
       </div>
 
       {/* ✅ Verschlüsselung */}
-      <div className="mb-4">
-        <label className="block font-medium mb-1">Verschlüsselung</label>
+      <div className="mb-3">
+        <label className="block font-medium text-sm mb-1">
+          Verschlüsselung
+        </label>
         <select
           value={opcuaSettings.encryption}
           onChange={(e) => dispatch(setOpcUaEncryption(e.target.value))}
-          className="w-full p-2 border border-gray-300 rounded-md"
+          className="w-full p-1 border border-gray-300 rounded-md text-sm"
         >
           <option value="None">Keine</option>
           <option value="Basic256">Basic256</option>
@@ -64,35 +68,27 @@ export default function OPCUAInterfaceSettings() {
         </select>
       </div>
 
-      {/* ✅ OPCUA Zustand (nur Anzeige) */}
-      <div className="mb-4">
-        <label className="block font-medium mb-1">OPCUA Zustand</label>
-        <div className="p-2 border border-gray-300 rounded-md bg-white">
+      {/* ✅ OPCUA Zustand */}
+      <div className="mb-3">
+        <label className="block font-medium text-sm mb-1">OPCUA Zustand</label>
+        <div className="p-1 border border-gray-300 rounded-md bg-white text-sm">
           {opcuaSettings.opcUaZustand}
         </div>
       </div>
 
-      {/* ✅ Aktive Clients (nur Anzeige) */}
-      <div className="mb-4">
-        <label className="block font-medium mb-1">Aktive Clients</label>
-        <div className="p-2 border border-gray-300 rounded-md bg-white">
-          {opcuaSettings.opcUaActiveClientCount}
-        </div>
-      </div>
-
       {/* ✅ Nodeset Name */}
-      <div className="mb-4">
-        <label className="block font-medium mb-1">Nodeset Name</label>
+      <div className="mb-3">
+        <label className="block font-medium text-sm mb-1">Nodeset Name</label>
         <div className="flex">
           <input
             type="text"
-            className="flex-grow p-2 border border-gray-300 rounded-l-md"
+            className="flex-grow p-1 border border-gray-300 rounded-l-md text-sm"
             value={nodesetName}
             onChange={(e) => setNodesetName(e.target.value)}
           />
           <button
             onClick={handleNodesetUpdate}
-            className="px-4 py-2 bg-blue-500 text-white rounded-r-md"
+            className="px-3 py-1 bg-blue-500 text-white rounded-r-md text-sm"
           >
             Übernehmen
           </button>
@@ -100,18 +96,15 @@ export default function OPCUAInterfaceSettings() {
       </div>
 
       {/* ✅ Benutzerverwaltung */}
-      <div className="mb-4">
-        <h3 className="text-lg font-semibold mb-2">Benutzer</h3>
-        <ul className="space-y-2">
+      <div className="mb-3">
+        <h3 className="text-base font-semibold mb-2">Benutzer</h3>
+        <ul className="space-y-1">
           {opcuaSettings.users.map((user) => (
             <li
               key={user.id}
-              className="p-2 bg-white shadow-sm rounded-md flex justify-between items-center"
+              className="p-1 bg-white shadow-sm rounded-md flex justify-between items-center text-sm"
             >
               <span className="font-medium">{user.username}</span>
-              <span className="text-gray-600 ml-2">
-                (Passwort: {user.password})
-              </span>
               <button
                 onClick={() => dispatch(removeOpcUaUser(user.id))}
                 className="text-red-500"
@@ -123,24 +116,24 @@ export default function OPCUAInterfaceSettings() {
         </ul>
 
         {/* ✅ Neuen Benutzer hinzufügen */}
-        <div className="mt-4 flex space-x-2">
+        <div className="mt-2 flex flex-wrap gap-2">
           <input
             type="text"
             placeholder="Benutzername"
             value={newUsername}
             onChange={(e) => setNewUsername(e.target.value)}
-            className="p-2 border rounded w-1/3"
+            className="p-1 border rounded flex-grow text-sm"
           />
           <input
             type="password"
             placeholder="Passwort"
             value={newPassword}
             onChange={(e) => setNewPassword(e.target.value)}
-            className="p-2 border rounded w-1/3"
+            className="p-1 border rounded flex-grow text-sm"
           />
           <button
             onClick={handleAddUser}
-            className="bg-blue-500 text-white p-2 rounded w-1/3"
+            className="bg-blue-500 text-white p-1 rounded text-sm"
           >
             Hinzufügen
           </button>
diff --git a/config/webVersion.ts b/config/webVersion.ts
index 218588b..d0362dc 100644
--- a/config/webVersion.ts
+++ b/config/webVersion.ts
@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.95";
+const webVersion = "1.6.96";
 export default webVersion;