From 372a785af6e63583f64e2fe4c65e11da65de00b5 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Fri, 27 Sep 2024 10:59:33 +0200
Subject: [PATCH] feat: Header- und Navigationskomponenten angepasst
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Header-Layout optimiert, um Temperatur und Icons korrekt anzuzeigen.
- Anpassungen in der Navigation Abstand zwischen die Elemente.
- Verbesserte Ausrichtung und Abstände für Header-Elemente.
- Farbanpassungen und Styling-Optimierungen in der Header.
-Auf verschiedene Bildschirm Auflösungen getestet (Full-HD und 2K/QHD)
---
 app/dashboard/page.jsx                        | 30 +++++++++++--------
 components/Header.jsx                         | 27 ++++++++---------
 components/Navigation.jsx                     |  6 ++--
 .../{ => modulesStatus}/Access1Status.jsx     |  0
 .../{ => modulesStatus}/Access2Status.jsx     |  0
 components/{ => modulesStatus}/CPLStatus.jsx  |  0
 components/modulesStatus/Kue705_FO.jsx        | 20 +++++++++++++
 7 files changed, 53 insertions(+), 30 deletions(-)
 rename components/{ => modulesStatus}/Access1Status.jsx (100%)
 rename components/{ => modulesStatus}/Access2Status.jsx (100%)
 rename components/{ => modulesStatus}/CPLStatus.jsx (100%)
 create mode 100644 components/modulesStatus/Kue705_FO.jsx

diff --git a/app/dashboard/page.jsx b/app/dashboard/page.jsx
index 9c31b85..51dc230 100644
--- a/app/dashboard/page.jsx
+++ b/app/dashboard/page.jsx
@@ -4,9 +4,10 @@ import "tailwindcss/tailwind.css";
 import "@fontsource/roboto";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import { loadWindowVariables } from "../../utils/loadWindowVariables";
-import CPLStatus from "../../components/CPLStatus";
-import Access1Status from "../../components/Access1Status";
-import Access2Status from "../../components/Access2Status";
+import CPLStatus from "../../components/modulesStatus/CPLStatus";
+import Access1Status from "../../components/modulesStatus/Access1Status";
+import Access2Status from "../../components/modulesStatus/Access2Status";
+import Kue705_FO from "../../components/modulesStatus/Kue705_FO";
 
 function Dashboard() {
   const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
@@ -60,7 +61,7 @@ function Dashboard() {
   };
 
   return (
-    <div className="bg-gray-100 flex flex-col min-h-screen p-8">
+    <div className="bg-gray-100 flex flex-col min-h-screen ">
       {/* Letzte Meldungen */}
       <div className="flex justify-between items-center mb-4">
         <h1 className="text-xl font-bold text-gray-700">
@@ -73,7 +74,7 @@ function Dashboard() {
 
       <div className="flex flex-col lg:flex-row gap-8">
         {/* Meldungen Liste */}
-        <div className="bg-white shadow-md rounded-lg p-4 w-full lg:w-2/3">
+        <div className="bg-white shadow-md rounded-lg  w-full lg:w-2/3">
           <table className="min-w-full border border-gray-200 text-left">
             <thead className="bg-gray-100 border-b border-gray-300">
               <tr>
@@ -94,18 +95,18 @@ function Dashboard() {
                 </th>
               </tr>
             </thead>
-            <tbody className="text-sm text-gray-600">
+            <tbody className="text-xs text-gray-600">
               {last20Messages.length > 0 ? (
                 last20Messages.map((columns, index) => (
                   <tr
                     key={index}
                     className="border-b border-gray-200 hover:bg-gray-50"
                   >
-                    <td className="py-3 px-4">{columns[0]}</td>
-                    <td className="py-3 px-4">{columns[1]}</td>
-                    <td className="py-3 px-4">{columns[2]}</td>
-                    <td className="py-3 px-4 w-2/3">{columns[3]}</td>
-                    <td className="py-3 px-4">{columns[4]}</td>
+                    <td className="py-3 px-4 w-1/7">{columns[0]}</td>
+                    <td className="py-3 px-4 w-1/7">{columns[1]}</td>
+                    <td className="py-3 px-4 w-2/7">{columns[2]}</td>
+                    <td className="py-3 px-4 w-2/7">{columns[3]}</td>
+                    <td className="py-3 px-4w-1/7">{columns[4]}</td>
                   </tr>
                 ))
               ) : (
@@ -136,12 +137,15 @@ function Dashboard() {
           </div>
 
           {/* Beispiel für Geräteanzeige */}
-          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
-            <div className="flex flex-row item-center justify-between">
+          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
+            <div className="flex flex-row item-center justify-between ">
               <CPLStatus />
               <Access1Status />
               <Access2Status />
             </div>
+            <div className="flex flex-row item-center justify-between">
+              <Kue705_FO />
+            </div>
           </div>
         </div>
       </div>
diff --git a/components/Header.jsx b/components/Header.jsx
index 5d79b36..98cfb45 100644
--- a/components/Header.jsx
+++ b/components/Header.jsx
@@ -24,7 +24,7 @@ function Header() {
   }, [apiUrl]);
 
   return (
-    <header className="bg-gray-300 flex justify-between items-center w-full h-28 p-4 relative">
+    <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative">
       {/* Logo - Vergrößert und verschoben */}
       <div className="absolute left-32 top-32 transform -translate-y-1/2">
         <Image
@@ -36,46 +36,45 @@ function Header() {
           priority={false}
         />
       </div>
-      <div className="w-1/6 flex-shrink-0 h-28"></div>
+      <div className="w-64 flex-shrink-0 h-full mt-24 "></div>
 
       {/* CPL Status und Stationsname */}
       <div className="flex items-start space-x-4 w-full">
-        <div className="flex flex-col text-left">
+        <div className="flex flex-col text-left pl-8">
           {/* Text immer linksbündig */}
-          <h2 className="text-sm font-semibold">Stationsname</h2>
-          <p className="font-bold text-lg">{stationsname}</p>
+          <h2 className="text-base ">Stationsname</h2>
+          <p className="text-base  text-gray-600">{stationsname}</p>
         </div>
       </div>
-
+      <div className="flex items-start space-x-4 w-full"></div>
       {/* Temperatur und Icons */}
-      <div className="flex items-center space-x-32 w-2/6">
+      <div className="p-4 w-full lg:w-full flex flex-row gap-3 justify-between">
         {/* Temperatur und Luftfeuchtigkeit */}
-        <div className="flex items-center space-x-4">
-          <div className="flex items-center">
+        <div className="flex items-center space-x-4 min-w-0 flex-shrink">
+          <div className="flex items-center min-w-0">
             <i className="bi bi-thermometer-half"></i>
             <p className="text-lg ml-1">20.5 °C</p>
           </div>
 
-          <div className="flex items-center">
+          <div className="flex items-center min-w-0">
             <i className="bi bi-droplet"></i>
             <p className="text-lg ml-1">60%</p>
           </div>
         </div>
 
         {/* Toggle Switch light and dark mode */}
-        <div className="flex items-center space-x-4">
+        <div className="flex items-center space-x-4 min-w-0 flex-shrink">
           <i className="bi bi-moon"></i>
           {/* Toggle Switch */}
           <div className="flex items-center space-x-2">
             <i className="bi bi-toggle-off"></i>
             <i className="bi bi-brightness-high"></i>
           </div>
-          {/* Leer div für flexiblen Abstand */}
         </div>
 
         {/* User Icon */}
-        <div>
-          <i className="bi bi-person-circle text-3xl text-black"></i>
+        <div className="min-w-0">
+          <i className="bi bi-person-circle text-3xl text-black mr-7"></i>
         </div>
       </div>
     </header>
diff --git a/components/Navigation.jsx b/components/Navigation.jsx
index 94c930a..bb4b034 100644
--- a/components/Navigation.jsx
+++ b/components/Navigation.jsx
@@ -23,12 +23,12 @@ function Navigation() {
   ];
 
   return (
-    <aside className="w-1/6 flex-shrink-0 h-full mt-24">
-      <nav className="space-y-6 p-4">
+    <aside>
+      <nav className="w-64 flex-shrink-0 h-full mt-24">
         {menuItems.map((item) => (
           <Link href={item.path} key={item.name}>
             <div
-              className={`block px-4 py-2 font-bold whitespace-nowrap transition duration-300 ${
+              className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 ${
                 activeLink === item.path
                   ? "bg-sky-500 text-white rounded-r-full"
                   : "text-black hover:bg-gray-200 rounded-r-full"
diff --git a/components/Access1Status.jsx b/components/modulesStatus/Access1Status.jsx
similarity index 100%
rename from components/Access1Status.jsx
rename to components/modulesStatus/Access1Status.jsx
diff --git a/components/Access2Status.jsx b/components/modulesStatus/Access2Status.jsx
similarity index 100%
rename from components/Access2Status.jsx
rename to components/modulesStatus/Access2Status.jsx
diff --git a/components/CPLStatus.jsx b/components/modulesStatus/CPLStatus.jsx
similarity index 100%
rename from components/CPLStatus.jsx
rename to components/modulesStatus/CPLStatus.jsx
diff --git a/components/modulesStatus/Kue705_FO.jsx b/components/modulesStatus/Kue705_FO.jsx
new file mode 100644
index 0000000..0ae65ce
--- /dev/null
+++ b/components/modulesStatus/Kue705_FO.jsx
@@ -0,0 +1,20 @@
+// components/Kue705_FO.jsx
+import React from "react";
+
+const Kue705_FO = () => {
+  return (
+    <div className="border border-gray-400 w-16 h-32 flex flex-col">
+      {/* Erstes Kind, nimmt den restlichen Platz ein */}
+      <div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-xs">
+        <div className="flex flex-col justify-start">1</div>
+        <div>KÜ705</div>
+        <div>FO</div>
+      </div>
+      {/* Die unteren Abschnitte behalten ihre festen Höhen */}
+      <div className="bg-green-500 w-full h-1/6"></div>
+      <div className="bg-blue-500 w-full h-1/6"></div>
+    </div>
+  );
+};
+
+export default Kue705_FO;