From 22464701226069cb6ee2ffe934d702af9fb4d027 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 23 Jan 2025 11:19:57 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20Entfernen=20von=20unn=C3=B6tigem=20Scrol?=
 =?UTF-8?q?len=20und=20Leerbereich=20nach=20dem=20Footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Layout angepasst, um Scrollbalken und Leerbereich nach dem Footer zu vermeiden.
- `h-screen` und `overflow-hidden` für die Hauptcontainer verwendet.
- Sicherstellung, dass die Seite genau die Bildschirmhöhe ausfüllt.
- Cleanup in CSS und JSX zur Verbesserung der Benutzeroberfläche.
---
 pages/_app.js              |   2 +-
 pages/einausgaenge copy.js | 280 -------------------------------------
 2 files changed, 1 insertion(+), 281 deletions(-)
 delete mode 100644 pages/einausgaenge copy.js

diff --git a/pages/_app.js b/pages/_app.js
index b54ca34..74e1e1d 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -38,7 +38,7 @@ function MyApp({ Component, pageProps }) {
 
   return (
     <Provider store={store}>
-      <div className="flex flex-col min-h-screen">
+      <div className="flex flex-col h-screen overflow-hidden">
         <Header />
         <div className="flex flex-grow w-full">
           <Navigation className="w-1/5" />
diff --git a/pages/einausgaenge copy.js b/pages/einausgaenge copy.js
deleted file mode 100644
index fd657be..0000000
--- a/pages/einausgaenge copy.js	
+++ /dev/null
@@ -1,280 +0,0 @@
-"use client"; // pages/einausgaenge.js
-import React, { useState, useEffect } from "react";
-import { Icon } from "@iconify/react";
-
-function EinAusgaenge() {
-  const [mockData, setMockData] = useState({
-    win_de: Array(32).fill(0), // Fallback-Daten für die Initialisierung
-    win_counter: Array(32).fill(0),
-    win_flutter: Array(32).fill(0),
-  });
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const isDevelopment = process.env.NODE_ENV === "development";
-    const script = document.createElement("script");
-
-    script.src = isDevelopment
-      ? "/CPLmockData/SERVICE/de.js"
-      : "/CPL/SERVICE/de.js";
-    script.async = true;
-
-    script.onload = () => {
-      try {
-        // Sicherstellen, dass die globalen Variablen verfügbar sind
-        if (
-          typeof win_de !== "undefined" &&
-          typeof win_counter !== "undefined" &&
-          typeof win_flutter !== "undefined"
-        ) {
-          setMockData({
-            win_de,
-            win_counter,
-            win_flutter,
-          });
-        } else {
-          console.error("Mock-Daten konnten nicht geladen werden.");
-        }
-      } catch (error) {
-        console.error("Fehler beim Zugriff auf die globalen Daten:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    script.onerror = () => {
-      console.error("Fehler beim Laden der Skript-Datei:", script.src);
-      setIsLoading(false);
-    };
-
-    document.body.appendChild(script);
-
-    return () => {
-      document.body.removeChild(script);
-    };
-  }, []);
-
-  // Hook-Anzahl konstant halten
-  const digitalInputs = mockData.win_de.map((status, index) => ({
-    id: index + 1,
-    status: status === 1 ? "active" : "inactive",
-    description: `DE${index + 1}`,
-    isInverted: false,
-  }));
-
-  const inputsGroup1 = digitalInputs.slice(0, 16);
-  const inputsGroup2 = digitalInputs.slice(16);
-
-  const [digitalOutputs, setDigitalOutputs] = useState([
-    { id: 1, description: "Ausgang1", toggle: true },
-    { id: 2, description: "Ausgang2", toggle: false },
-    { id: 3, description: "Ausgang3", toggle: true },
-    { id: 4, description: "Ausgang4", toggle: false },
-  ]);
-
-  const toggleSwitch = (id) => {
-    setDigitalOutputs((prevOutputs) =>
-      prevOutputs.map((output) =>
-        output.id === id ? { ...output, toggle: !output.toggle } : output
-      )
-    );
-  };
-
-  const [selectedInput, setSelectedInput] = useState(null);
-  const [selectedOutput, setSelectedOutput] = useState(null);
-  const [isInputModalOpen, setIsInputModalOpen] = useState(false);
-  const [isOutputModalOpen, setIsOutputModalOpen] = useState(false);
-
-  const openInputModal = (input) => {
-    setSelectedInput(input);
-    setIsInputModalOpen(true);
-  };
-
-  const closeInputModal = () => {
-    setSelectedInput(null);
-    setIsInputModalOpen(false);
-  };
-
-  const openOutputModal = (output) => {
-    setSelectedOutput(output);
-    setIsOutputModalOpen(true);
-  };
-
-  const closeOutputModal = () => {
-    setSelectedOutput(null);
-    setIsOutputModalOpen(false);
-  };
-
-  // Warten auf Daten
-  if (isLoading) {
-    return <div>Daten werden geladen...</div>;
-  }
-
-  //--------------------------------------------
-  return (
-    <div className="p-4">
-      <h1 className="text-lg font-semibold mb-4">Ein- und Ausgänge</h1>
-      <div className="flex gap-4">
-        {/* Digitale Eingänge */}
-        <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-3/5 flex-grow flex flex-col">
-          <h2 className="text-md font-bold mb-4 flex items-center">
-            <Icon icon="mdi:input" className="text-blue-500 mr-2 text-2xl" />
-            Digitale Eingänge
-          </h2>
-          <div className="grid grid-cols-2 gap-4">
-            {[inputsGroup1, inputsGroup2].map((group, index) => (
-              <div key={index} className="flex-grow">
-                <table className="w-full text-sm border-collapse bg-white rounded-lg">
-                  <thead className="bg-gray-100 border-b">
-                    <tr>
-                      <th className="px-2 py-1 text-left">Eingang</th>
-                      <th className="px-2 py-1 text-left">Zustand</th>
-                      <th className="px-2 py-1 text-left">Bezeichnung</th>
-                      <th className="px-2 py-1 text-left">Aktion</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {group.map((input) => (
-                      <tr key={input.id} className="border-b">
-                        <td className="flex items-center p-2 xl:py-0 2xl:p-1">
-                          <Icon
-                            icon="mdi:input"
-                            className="text-black-500 mr-2 text-xl"
-                          />
-                          {input.id}
-                        </td>
-                        <td className="p-2 xl:py-0">
-                          <span
-                            className={
-                              input.status === "active"
-                                ? "text-green-500"
-                                : "text-red-500"
-                            }
-                          >
-                            {input.status === "active" ? "●" : "⨉"}
-                          </span>
-                        </td>
-                        <td className="p-2 xl:py-0">{input.description}</td>
-                        <td className="p-2 xl:py-0">
-                          <Icon
-                            icon="mdi:settings"
-                            className="text-gray-400 text-lg cursor-pointer"
-                            onClick={() => openInputModal(input)}
-                          />
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Digitale Ausgänge */}
-      <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-2/5 h-[fit-content]">
-        <h2 className="text-md font-bold mb-4 flex items-center">
-          <Icon icon="mdi:output" className="text-blue-500 mr-2 text-2xl" />
-          Digitale Ausgänge
-        </h2>
-        <table className="w-full text-sm border-collapse bg-white rounded-lg">
-          <thead className="bg-gray-100 border-b">
-            <tr>
-              <th className="px-2 py-1 text-left">Ausgang</th>
-              <th className="px-2 py-1 text-left">Bezeichnung</th>
-              <th className="px-2 py-1 text-left">Schalter</th>
-              <th className="px-2 py-1 text-left">Aktion</th>
-            </tr>
-          </thead>
-          <tbody>
-            {digitalOutputs.map((output) => (
-              <tr key={output.id} className="border-b">
-                <td className="flex items-center px-2 py-1">
-                  <Icon
-                    icon="mdi:output"
-                    className="text-black-500 mr-2 text-xl"
-                  />
-                  {output.id}
-                </td>
-                <td className="px-2 py-1">{output.description}</td>
-                <td className="px-2 py-1">
-                  <Icon
-                    icon="ion:switch"
-                    onClick={() => toggleSwitch(output.id)}
-                    className={`cursor-pointer text-2xl transform  ${
-                      output.toggle
-                        ? "text-blue-500 scale-x-100"
-                        : "text-gray-500 scale-x-[-1]"
-                    }`}
-                    title={`Schalter ${output.toggle ? "EIN" : "AUS"} schalten`}
-                  />
-                </td>
-                <td className="px-2 py-1">
-                  <Icon
-                    icon="mdi:settings"
-                    className="text-gray-400 text-lg cursor-pointer"
-                    onClick={() => openOutputModal(output)}
-                  />
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      {/* Modal für Eingänge */}
-      {isInputModalOpen && (
-        <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
-          <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
-            <h2 className="text-lg font-bold mb-4">
-              Details für Eingang {selectedInput.id}
-            </h2>
-            <p>
-              <strong>Status:</strong>{" "}
-              {selectedInput.status === "active" ? "Aktiv" : "Inaktiv"}
-            </p>
-            <p>
-              <strong>Beschreibung:</strong> {selectedInput.description}
-            </p>
-            <p>
-              <strong>Invertiert:</strong>{" "}
-              {selectedInput.isInverted ? "Ja" : "Nein"}
-            </p>
-            <button
-              onClick={closeInputModal}
-              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
-            >
-              Schließen
-            </button>
-          </div>
-        </div>
-      )}
-      {/* Modal für Ausgänge */}
-      {isOutputModalOpen && (
-        <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
-          <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
-            <h2 className="text-lg font-bold mb-4">
-              Details für Ausgang {selectedOutput.id}
-            </h2>
-            <p>
-              <strong>Bezeichnung:</strong> {selectedOutput.description}
-            </p>
-            <p>
-              <strong>Status:</strong>{" "}
-              {selectedOutput.toggle ? "Eingeschaltet" : "Ausgeschaltet"}
-            </p>
-            <button
-              onClick={closeOutputModal}
-              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
-            >
-              Schließen
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default EinAusgaenge;