Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

erste Test ohne Fehler

Browse Source
This commit is contained in:
ISA
2024-09-23 13:46:44 +02:00
parent 067d2e0200
commit 6844c3cfab
10 changed files with 538 additions and 550 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
app/access/page.jsx
View File

@@ -1,135 +1,132 @@
// pages/Zutrittskontrolle.jsx "use client";
import React from "react"; import React from "react";
import Layout from "../components/Layout";
function Access() { function Access() {
return ( return (
<Layout> <div className="bg-gray-100 min-h-screen p-8">
<div className="bg-gray-100 min-h-screen p-8"> <div className="bg-white rounded-lg shadow p-6 mb-8">
<div className="bg-white rounded-lg shadow p-6 mb-8"> <h2 className="text-xl font-bold text-blue-500 mb-4">
<h2 className="text-xl font-bold text-blue-500 mb-4"> Zutrittskontrolle 1
Zutrittskontrolle 1 </h2>
</h2> <div className="flex justify-between">
<div className="flex justify-between"> <div className="w-full lg:w-1/2 p-4">
<div className="w-full lg:w-1/2 p-4"> <table className="min-w-full text-sm">
<table className="min-w-full text-sm"> <tbody>
<tbody> <tr>
<tr> <td className="py-3 px-4">
<td className="py-3 px-4"> <b>Betrieb</b>
<b>Betrieb</b> </td>
</td> <td className="py-3 px-4">Status: ...</td>
<td className="py-3 px-4">Status: ...</td> </tr>
</tr> <tr>
<tr> <td className="py-3 px-4">
<td className="py-3 px-4"> <b>Status</b>
<b>Status</b> </td>
</td> <td className="py-3 px-4">...</td>
<td className="py-3 px-4">...</td> </tr>
</tr> <tr>
<tr> <td className="py-3 px-4">Letzte Chip-ID</td>
<td className="py-3 px-4">Letzte Chip-ID</td> <td className="py-3 px-4">...</td>
<td className="py-3 px-4">...</td> </tr>
</tr> <tr>
<tr> <td className="py-3 px-4">Zeitstempel</td>
<td className="py-3 px-4">Zeitstempel</td> <td className="py-3 px-4">...</td>
<td className="py-3 px-4">...</td> </tr>
</tr> <tr>
<tr> <td className="py-3 px-4">Access Typ</td>
<td className="py-3 px-4">Access Typ</td> <td className="py-3 px-4">...</td>
<td className="py-3 px-4">...</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
<div className="w-full lg:w-1/2 p-4">
<table className="min-w-full text-sm">
<thead className="bg-gray-200">
<tr>
<th className="py-3 px-4 text-center">Eingang</th>
<th className="py-3 px-4 text-center">Zustand</th>
<th className="py-3 px-4">Bezeichnung</th>
</tr>
</thead>
<tbody>
<tr>
<td className="py-3 px-4 text-center">1</td>
<td className="py-3 px-4 text-center">...</td>
<td className="py-3 px-4">...</td>
</tr>
<tr>
<td className="py-3 px-4 text-center">2</td>
<td className="py-3 px-4 text-center">...</td>
<td className="py-3 px-4">...</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> <div className="w-full lg:w-1/2 p-4">
<table className="min-w-full text-sm">
{/* Zutrittskontrolle 2 */} <thead className="bg-gray-200">
<div className="bg-white rounded-lg shadow p-6"> <tr>
<h2 className="text-xl font-bold text-blue-500 mb-4"> <th className="py-3 px-4 text-center">Eingang</th>
Zutrittskontrolle 2 <th className="py-3 px-4 text-center">Zustand</th>
</h2> <th className="py-3 px-4">Bezeichnung</th>
<div className="flex justify-between"> </tr>
<div className="w-full lg:w-1/2 p-4"> </thead>
<table className="min-w-full text-sm"> <tbody>
<tbody> <tr>
<tr> <td className="py-3 px-4 text-center">1</td>
<td className="py-3 px-4"> <td className="py-3 px-4 text-center">...</td>
<b>Betrieb</b> <td className="py-3 px-4">...</td>
</td> </tr>
<td className="py-3 px-4">Status: ...</td> <tr>
</tr> <td className="py-3 px-4 text-center">2</td>
<tr> <td className="py-3 px-4 text-center">...</td>
<td className="py-3 px-4"> <td className="py-3 px-4">...</td>
<b>Status</b> </tr>
</td> </tbody>
<td className="py-3 px-4">...</td> </table>
</tr>
<tr>
<td className="py-3 px-4">Letzte Chip-ID</td>
<td className="py-3 px-4">...</td>
</tr>
<tr>
<td className="py-3 px-4">Zeitstempel</td>
<td className="py-3 px-4">...</td>
</tr>
<tr>
<td className="py-3 px-4">Access Typ</td>
<td className="py-3 px-4">...</td>
</tr>
</tbody>
</table>
</div>
<div className="w-full lg:w-1/2 p-4">
<table className="min-w-full text-sm">
<thead className="bg-gray-200">
<tr>
<th className="py-3 px-4 text-center">Eingang</th>
<th className="py-3 px-4 text-center">Zustand</th>
<th className="py-3 px-4">Bezeichnung</th>
</tr>
</thead>
<tbody>
<tr>
<td className="py-3 px-4 text-center">1</td>
<td className="py-3 px-4 text-center">...</td>
<td className="py-3 px-4">...</td>
</tr>
<tr>
<td className="py-3 px-4 text-center">2</td>
<td className="py-3 px-4 text-center">...</td>
<td className="py-3 px-4">...</td>
</tr>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
</Layout>
{/* Zutrittskontrolle 2 */}
<div className="bg-white rounded-lg shadow p-6">
<h2 className="text-xl font-bold text-blue-500 mb-4">
Zutrittskontrolle 2
</h2>
<div className="flex justify-between">
<div className="w-full lg:w-1/2 p-4">
<table className="min-w-full text-sm">
<tbody>
<tr>
<td className="py-3 px-4">
<b>Betrieb</b>
</td>
<td className="py-3 px-4">Status: ...</td>
</tr>
<tr>
<td className="py-3 px-4">
<b>Status</b>
</td>
<td className="py-3 px-4">...</td>
</tr>
<tr>
<td className="py-3 px-4">Letzte Chip-ID</td>
<td className="py-3 px-4">...</td>
</tr>
<tr>
<td className="py-3 px-4">Zeitstempel</td>
<td className="py-3 px-4">...</td>
</tr>
<tr>
<td className="py-3 px-4">Access Typ</td>
<td className="py-3 px-4">...</td>
</tr>
</tbody>
</table>
</div>
<div className="w-full lg:w-1/2 p-4">
<table className="min-w-full text-sm">
<thead className="bg-gray-200">
<tr>
<th className="py-3 px-4 text-center">Eingang</th>
<th className="py-3 px-4 text-center">Zustand</th>
<th className="py-3 px-4">Bezeichnung</th>
</tr>
</thead>
<tbody>
<tr>
<td className="py-3 px-4 text-center">1</td>
<td className="py-3 px-4 text-center">...</td>
<td className="py-3 px-4">...</td>
</tr>
<tr>
<td className="py-3 px-4 text-center">2</td>
<td className="py-3 px-4 text-center">...</td>
<td className="py-3 px-4">...</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
); );
} }

262
app/analogeEingaenge/page.jsx
View File

@@ -1,5 +1,5 @@
"use client";
import React, { useState } from "react"; import React, { useState } from "react";
import Layout from "../components/Layout";
function AnalogeEingaenge() { function AnalogeEingaenge() {
const [activeConfig, setActiveConfig] = useState(null); const [activeConfig, setActiveConfig] = useState(null);
@@ -81,143 +81,141 @@ function AnalogeEingaenge() {
]; ];
return ( return (
<Layout> <div className="bg-gray-100 min-h-screen p-8">
<div className="bg-gray-100 min-h-screen p-8"> <h1 className="text-2xl font-bold mb-4">Analoge Eingänge</h1>
<h1 className="text-2xl font-bold mb-4">Analoge Eingänge</h1> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> {inputs.map((input) => (
{inputs.map((input) => ( <div key={input.id} className="bg-white rounded-lg shadow-lg p-6">
<div key={input.id} className="bg-white rounded-lg shadow-lg p-6"> <div className="flex justify-between items-center bg-blue-500 text-white rounded-t-lg p-4">
<div className="flex justify-between items-center bg-blue-500 text-white rounded-t-lg p-4"> <h2 className="text-lg">XIO-PM {input.id}</h2>
<h2 className="text-lg">XIO-PM {input.id}</h2>
<button
className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded"
onClick={() => setActiveConfig(input.id)}
>
Online
</button>
</div>
<div className="p-4">
<table className="min-w-full bg-white border border-gray-300">
<thead>
<tr className="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
<th className="py-3 px-4 text-center">Eingang</th>
<th className="py-3 px-4 text-center">Wert</th>
<th className="py-3 px-4 text-left">Bezeichnung</th>
<th className="py-3 px-4 text-center">uG</th>
<th className="py-3 px-4 text-center">uW</th>
<th className="py-3 px-4 text-center">oW</th>
<th className="py-3 px-4 text-center">oG</th>
<th className="py-3 px-4 text-center">Konfig</th>
</tr>
</thead>
<tbody className="text-gray-600 text-sm">
<tr className="border-b border-gray-200">
<td className="py-3 px-4 text-center">{input.id}</td>
<td className="py-3 px-4 text-right">{input.value}</td>
<td className="py-3 px-4">{input.name}</td>
<td className="py-3 px-4 text-center">
<i
className={`bi bi-circle-fill text-${
input.uG ? "green" : "gray"
}-500`}
></i>
</td>
<td className="py-3 px-4 text-center">
<i
className={`bi bi-circle-fill text-${
input.uW ? "green" : "gray"
}-500`}
></i>
</td>
<td className="py-3 px-4 text-center">
<i
className={`bi bi-circle-fill text-${
input.oW ? "green" : "gray"
}-500`}
></i>
</td>
<td className="py-3 px-4 text-center">
<i
className={`bi bi-circle-fill text-${
input.oG ? "green" : "gray"
}-500`}
></i>
</td>
<td className="py-3 px-4 text-center">
<button
className="text-blue-500"
onClick={() => setActiveConfig(input.id)}
>
<i className="bi bi-gear-fill"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
))}
</div>
{/* Modal für Konfiguration */}
{activeConfig && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white p-8 rounded-lg shadow-lg w-96">
<h2 className="text-xl font-bold mb-4">
Konfiguration - XIO-PM {activeConfig}
</h2>
<button <button
className="absolute top-4 right-4 text-gray-500 hover:text-gray-700" className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded"
onClick={() => setActiveConfig(null)} onClick={() => setActiveConfig(input.id)}
> >
<i className="bi bi-x-lg"></i> Online
</button> </button>
{/* Konfigurationsformular hier einfügen */} </div>
<form> <div className="p-4">
<div className="mb-4"> <table className="min-w-full bg-white border border-gray-300">
<label <thead>
className="block text-gray-700 text-sm font-bold mb-2" <tr className="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
htmlFor="bezeichnung" <th className="py-3 px-4 text-center">Eingang</th>
> <th className="py-3 px-4 text-center">Wert</th>
Bezeichnung <th className="py-3 px-4 text-left">Bezeichnung</th>
</label> <th className="py-3 px-4 text-center">uG</th>
<input <th className="py-3 px-4 text-center">uW</th>
type="text" <th className="py-3 px-4 text-center">oW</th>
id="bezeichnung" <th className="py-3 px-4 text-center">oG</th>
name="bezeichnung" <th className="py-3 px-4 text-center">Konfig</th>
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" </tr>
placeholder="Bezeichnung eingeben" </thead>
/> <tbody className="text-gray-600 text-sm">
</div> <tr className="border-b border-gray-200">
<div className="mb-4"> <td className="py-3 px-4 text-center">{input.id}</td>
<label <td className="py-3 px-4 text-right">{input.value}</td>
className="block text-gray-700 text-sm font-bold mb-2" <td className="py-3 px-4">{input.name}</td>
htmlFor="ug" <td className="py-3 px-4 text-center">
> <i
Unterer Grenzwert className={`bi bi-circle-fill text-${
</label> input.uG ? "green" : "gray"
<input }-500`}
type="number" ></i>
id="ug" </td>
name="ug" <td className="py-3 px-4 text-center">
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" <i
placeholder="Wert eingeben" className={`bi bi-circle-fill text-${
/> input.uW ? "green" : "gray"
</div> }-500`}
{/* Weitere Felder hier hinzufügen */} ></i>
<button </td>
type="button" <td className="py-3 px-4 text-center">
className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600" <i
onClick={() => setActiveConfig(null)} className={`bi bi-circle-fill text-${
> input.oW ? "green" : "gray"
Speichern }-500`}
</button> ></i>
</form> </td>
<td className="py-3 px-4 text-center">
<i
className={`bi bi-circle-fill text-${
input.oG ? "green" : "gray"
}-500`}
></i>
</td>
<td className="py-3 px-4 text-center">
<button
className="text-blue-500"
onClick={() => setActiveConfig(input.id)}
>
<i className="bi bi-gear-fill"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
)} ))}
</div> </div>
</Layout>
{/* Modal für Konfiguration */}
{activeConfig && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white p-8 rounded-lg shadow-lg w-96">
<h2 className="text-xl font-bold mb-4">
Konfiguration - XIO-PM {activeConfig}
</h2>
<button
className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
onClick={() => setActiveConfig(null)}
>
<i className="bi bi-x-lg"></i>
</button>
{/* Konfigurationsformular hier einfügen */}
<form>
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="bezeichnung"
>
Bezeichnung
</label>
<input
type="text"
id="bezeichnung"
name="bezeichnung"
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
placeholder="Bezeichnung eingeben"
/>
</div>
<div className="mb-4">
<label
className="block text-gray-700 text-sm font-bold mb-2"
htmlFor="ug"
>
Unterer Grenzwert
</label>
<input
type="number"
id="ug"
name="ug"
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
placeholder="Wert eingeben"
/>
</div>
{/* Weitere Felder hier hinzufügen */}
<button
type="button"
className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
onClick={() => setActiveConfig(null)}
>
Speichern
</button>
</form>
</div>
</div>
)}
</div>
); );
} }

21
app/dashboard/page.jsx
View File

@@ -1,5 +1,6 @@
"use client";
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import Layout from "../components/Layout";
import Image from "next/image"; import Image from "next/image";
import "tailwindcss/tailwind.css"; // Stelle sicher, dass Tailwind CSS korrekt importiert wird import "tailwindcss/tailwind.css"; // Stelle sicher, dass Tailwind CSS korrekt importiert wird
import "@fontsource/roboto"; // Standardimport für alle Schriftstärken import "@fontsource/roboto"; // Standardimport für alle Schriftstärken
@@ -7,17 +8,15 @@ import "bootstrap-icons/font/bootstrap-icons.css";
function Dashboard() { function Dashboard() {
return ( return (
<Layout> <div className="bg-gray-100 flex flex-col min-h-screen">
<div className="bg-gray-100 flex flex-col min-h-screen"> <div className="flex flex-grow w-full">
<div className="flex flex-grow w-full"> {/* Main Section */}
{/* Main Section */} <main className="flex-1 bg-white p-8 ml-4 shadow rounded-lg overflow-hidden">
<main className="flex-1 bg-white p-8 ml-4 shadow rounded-lg overflow-hidden"> {/* Hauptinhalt */}
{/* Hauptinhalt */} <h1 className="text-2xl font-bold mb-4">Dashboard Übersicht</h1>
<h1 className="text-2xl font-bold mb-4">Dashboard Übersicht</h1> </main>
</main>
</div>
</div> </div>
</Layout> </div>
); );
} }

177
app/einausgaenge/page.jsx
View File

@@ -1,6 +1,5 @@
// pages/Einausgaenge.jsx "use client";
import React, { useState } from "react"; import React, { useState } from "react";
import Layout from "../components/Layout";
function Einausgaenge() { function Einausgaenge() {
// Beispiel-Daten für Ein- und Ausgänge (kannst du durch deine Daten ersetzen) // Beispiel-Daten für Ein- und Ausgänge (kannst du durch deine Daten ersetzen)
@@ -62,104 +61,100 @@ function Einausgaenge() {
const [activeTab, setActiveTab] = useState("inputs"); const [activeTab, setActiveTab] = useState("inputs");
return ( return (
<Layout> <div className="bg-gray-100 min-h-screen p-8">
<div className="bg-gray-100 min-h-screen p-8"> {/* Tabs für Ein- und Ausgänge */}
{/* Tabs für Ein- und Ausgänge */} <ul className="flex border-b border-gray-200">
<ul className="flex border-b border-gray-200"> <li
<li className={`mr-1 ${
className={`mr-1 ${ activeTab === "inputs" ? "border-blue-500 text-blue-600" : ""
activeTab === "inputs" ? "border-blue-500 text-blue-600" : "" }`}
>
<button
onClick={() => setActiveTab("inputs")}
className={`inline-block px-4 py-2 rounded-t-lg ${
activeTab === "inputs"
? "bg-blue-500 text-white"
: "bg-white text-black hover:bg-gray-200"
}`} }`}
> >
<button Eingänge
onClick={() => setActiveTab("inputs")} </button>
className={`inline-block px-4 py-2 rounded-t-lg ${ </li>
activeTab === "inputs" <li
? "bg-blue-500 text-white" className={`mr-1 ${
: "bg-white text-black hover:bg-gray-200" activeTab === "outputs" ? "border-blue-500 text-blue-600" : ""
}`} }`}
> >
Eingänge <button
</button> onClick={() => setActiveTab("outputs")}
</li> className={`inline-block px-4 py-2 rounded-t-lg ${
<li activeTab === "outputs"
className={`mr-1 ${ ? "bg-blue-500 text-white"
activeTab === "outputs" ? "border-blue-500 text-blue-600" : "" : "bg-white text-black hover:bg-gray-200"
}`} }`}
> >
<button Ausgänge
onClick={() => setActiveTab("outputs")} </button>
className={`inline-block px-4 py-2 rounded-t-lg ${ </li>
activeTab === "outputs" </ul>
? "bg-blue-500 text-white"
: "bg-white text-black hover:bg-gray-200"
}`}
>
Ausgänge
</button>
</li>
</ul>
{/* Inhalt für die aktiven Tabs */} {/* Inhalt für die aktiven Tabs */}
<div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto"> <div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto">
{activeTab === "inputs" && ( {activeTab === "inputs" && (
<div> <div>
<h2 className="text-lg font-bold mb-4">Eingänge</h2> <h2 className="text-lg font-bold mb-4">Eingänge</h2>
<table className="min-w-full bg-white border border-gray-300"> <table className="min-w-full bg-white border border-gray-300">
<thead> <thead>
<tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal"> <tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
<th className="py-3 px-4 text-left">ID</th> <th className="py-3 px-4 text-left">ID</th>
<th className="py-3 px-4 text-left">Name</th> <th className="py-3 px-4 text-left">Name</th>
<th className="py-3 px-4 text-left">Status</th> <th className="py-3 px-4 text-left">Status</th>
<th className="py-3 px-4 text-left">Beschreibung</th> <th className="py-3 px-4 text-left">Beschreibung</th>
</tr>
</thead>
<tbody className="text-gray-600 text-sm">
{inputs.map((input) => (
<tr key={input.id} className="border-b border-gray-200">
<td className="py-3 px-4 text-left">{input.id}</td>
<td className="py-3 px-4 text-left">{input.name}</td>
<td className="py-3 px-4 text-left">{input.status}</td>
<td className="py-3 px-4 text-left">{input.description}</td>
</tr> </tr>
</thead> ))}
<tbody className="text-gray-600 text-sm"> </tbody>
{inputs.map((input) => ( </table>
<tr key={input.id} className="border-b border-gray-200"> </div>
<td className="py-3 px-4 text-left">{input.id}</td> )}
<td className="py-3 px-4 text-left">{input.name}</td>
<td className="py-3 px-4 text-left">{input.status}</td>
<td className="py-3 px-4 text-left">
{input.description}
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
{activeTab === "outputs" && ( {activeTab === "outputs" && (
<div> <div>
<h2 className="text-lg font-bold mb-4">Ausgänge</h2> <h2 className="text-lg font-bold mb-4">Ausgänge</h2>
<table className="min-w-full bg-white border border-gray-300"> <table className="min-w-full bg-white border border-gray-300">
<thead> <thead>
<tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal"> <tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
<th className="py-3 px-4 text-left">ID</th> <th className="py-3 px-4 text-left">ID</th>
<th className="py-3 px-4 text-left">Name</th> <th className="py-3 px-4 text-left">Name</th>
<th className="py-3 px-4 text-left">Status</th> <th className="py-3 px-4 text-left">Status</th>
<th className="py-3 px-4 text-left">Beschreibung</th> <th className="py-3 px-4 text-left">Beschreibung</th>
</tr>
</thead>
<tbody className="text-gray-600 text-sm">
{outputs.map((output) => (
<tr key={output.id} className="border-b border-gray-200">
<td className="py-3 px-4 text-left">{output.id}</td>
<td className="py-3 px-4 text-left">{output.name}</td>
<td className="py-3 px-4 text-left">{output.status}</td>
<td className="py-3 px-4 text-left">
{output.description}
</td>
</tr> </tr>
</thead> ))}
<tbody className="text-gray-600 text-sm"> </tbody>
{outputs.map((output) => ( </table>
<tr key={output.id} className="border-b border-gray-200"> </div>
<td className="py-3 px-4 text-left">{output.id}</td> )}
<td className="py-3 px-4 text-left">{output.name}</td>
<td className="py-3 px-4 text-left">{output.status}</td>
<td className="py-3 px-4 text-left">
{output.description}
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</div> </div>
</Layout> </div>
); );
} }

141
app/kabelueberwachung/page.jsx
View File

@@ -1,6 +1,5 @@
"use client"; // Ganz oben hinzufügen "use client";
import React, { useState } from "react"; import React, { useState } from "react";
import Layout from "../layout"; // Korrigierter Pfad zu Layout
function Kabelueberwachung() { function Kabelueberwachung() {
const [activeTab, setActiveTab] = useState(1); const [activeTab, setActiveTab] = useState(1);
@@ -13,81 +12,77 @@ function Kabelueberwachung() {
]; ];
return ( return (
<Layout> <div className="bg-gray-100 flex-1 p-4 overflow-hidden">
<div className="bg-gray-100 flex-1 p-4 overflow-hidden"> {/* Tabs */}
{/* Tabs */} <ul className="flex border-b border-gray-200">
<ul className="flex border-b border-gray-200"> {racks.map((rack) => (
{racks.map((rack) => ( <li
<li key={rack.id}
key={rack.id} className={`mr-1 ${
className={`mr-1 ${ activeTab === rack.id ? "border-blue-500 text-blue-600" : ""
activeTab === rack.id ? "border-blue-500 text-blue-600" : "" }`}
>
<button
onClick={() => setActiveTab(rack.id)}
className={`inline-block px-4 py-2 rounded-t-lg ${
activeTab === rack.id
? "bg-blue-500 text-white"
: "bg-white text-black hover:bg-gray-200"
}`} }`}
> >
<button {rack.name}
onClick={() => setActiveTab(rack.id)} </button>
className={`inline-block px-4 py-2 rounded-t-lg ${ </li>
activeTab === rack.id ))}
? "bg-blue-500 text-white" </ul>
: "bg-white text-black hover:bg-gray-200" {/* Rack-Inhalte */}
}`} <div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto max-h-full">
> {racks.map(
{rack.name} (rack) =>
</button> activeTab === rack.id && (
</li> <div key={rack.id}>
))} <h2 className="text-lg font-bold mb-4">{rack.name} Inhalte</h2>
</ul> <table className="min-w-full bg-white border border-gray-300">
{/* Rack-Inhalte */} <thead>
<div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto max-h-full"> <tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
{racks.map( <th className="py-3 px-4 text-left">Slot</th>
(rack) => <th className="py-3 px-4 text-left">Bezeichnung</th>
activeTab === rack.id && ( <th className="py-3 px-4 text-center">
<div key={rack.id}> Isolationsgrenzwert
<h2 className="text-lg font-bold mb-4"> </th>
{rack.name} Inhalte <th className="py-3 px-4 text-center">
</h2> Schleifengrenzwert
<table className="min-w-full bg-white border border-gray-300"> </th>
<thead> <th className="py-3 px-4 text-center">Filterzeit</th>
<tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal"> <th className="py-3 px-4 text-center">Aktionen</th>
<th className="py-3 px-4 text-left">Slot</th> </tr>
<th className="py-3 px-4 text-left">Bezeichnung</th> </thead>
<th className="py-3 px-4 text-center"> <tbody className="text-gray-600 text-sm">
Isolationsgrenzwert {Array.from({ length: 8 }, (_, index) => (
</th> <tr key={index} className="border-b border-gray-200">
<th className="py-3 px-4 text-center"> <td className="py-3 px-4 text-left">
Schleifengrenzwert Slot {index + 1}
</th> </td>
<th className="py-3 px-4 text-center">Filterzeit</th> <td className="py-3 px-4 text-left">
<th className="py-3 px-4 text-center">Aktionen</th> Beispielbezeichnung
</td>
<td className="py-3 px-4 text-center">0.5 MOhm</td>
<td className="py-3 px-4 text-center">10 kOhm</td>
<td className="py-3 px-4 text-center">5 sek.</td>
<td className="py-3 px-4 text-center">
<button className="bg-blue-500 text-white px-3 py-1 rounded">
Bearbeiten
</button>
</td>
</tr> </tr>
</thead> ))}
<tbody className="text-gray-600 text-sm"> </tbody>
{Array.from({ length: 8 }, (_, index) => ( </table>
<tr key={index} className="border-b border-gray-200"> </div>
<td className="py-3 px-4 text-left"> )
Slot {index + 1} )}
</td>
<td className="py-3 px-4 text-left">
Beispielbezeichnung
</td>
<td className="py-3 px-4 text-center">0.5 MOhm</td>
<td className="py-3 px-4 text-center">10 kOhm</td>
<td className="py-3 px-4 text-center">5 sek.</td>
<td className="py-3 px-4 text-center">
<button className="bg-blue-500 text-white px-3 py-1 rounded">
Bearbeiten
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
)
)}
</div>
</div> </div>
</Layout> </div>
); );
} }

18
app/layout.js
View File

@@ -1,25 +1,27 @@
"use client"; // Ganz oben hinzufügen "use client"; // Nur in Client-Komponenten verwenden, nicht in Layout-Dateien
import React from "react"; import React from "react";
import Header from "../components/Header"; import Header from "../components/Header";
import Navigation from "../components/Navigation"; import Navigation from "../components/Navigation";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import "../app/globals.css"; import "../app/globals.css";
// Diese Datei befindet sich in /app/layout.jsx // Diese Datei befindet sich in /app/layout.js
export default function RootLayout({ children }) { export default function RootLayout({ children }) {
return ( return (
<html lang="de"> <html lang="de">
<head> <head>
{/* Hier können Meta-Tags oder Links für CSS hinzugefügt werden */} {/* Hier können Meta-Tags oder Links für CSS hinzugefügt werden */}
</head> </head>
<body className="bg-gray-100 flex flex-col min-h-screen"> <body>
{/* Hier das Layout mit Header, Navigation und Footer */} {/* Hier das Layout mit Header, Navigation und Footer */}
<Header className="bg-gray-300 p-4 flex-shrink-0" /> <div className="bg-gray-100 flex flex-col min-h-screen">
<div className="flex flex-grow w-full"> <Header className="bg-gray-300 p-4 flex-shrink-0" />
<Navigation /> <div className="flex flex-grow w-full">
<main className="flex-1 p-8">{children}</main> <Navigation />
<main className="flex-1 p-8">{children}</main>
</div>
<Footer className="bg-gray-300 p-4 flex-shrink-0" />
</div> </div>
<Footer className="bg-gray-300 p-4 flex-shrink-0" />
</body> </body>
</html> </html>
); );

203
app/meldungen/page.jsx
View File

@@ -1,6 +1,5 @@
// pages/Meldungen.jsx "use client";
import React, { useState } from "react"; import React, { useState } from "react";
import Layout from "../components/Layout";
function Meldungen() { function Meldungen() {
const [rowsPerPage, setRowsPerPage] = useState(25); const [rowsPerPage, setRowsPerPage] = useState(25);
@@ -28,110 +27,108 @@ function Meldungen() {
}); });
return ( return (
<Layout> <div className="flex flex-col h-full">
<div className="flex flex-col h-full"> {/* Filterleiste */}
{/* Filterleiste */} <div className="flex justify-between items-center bg-blue-500 p-4 text-white rounded-t">
<div className="flex justify-between items-center bg-blue-500 p-4 text-white rounded-t"> <div className="flex items-center space-x-4">
<div className="flex items-center space-x-4"> <span>Interner Meldungsspeicher</span>
<span>Interner Meldungsspeicher</span> <select
<select value={selectedMonth}
value={selectedMonth} onChange={(e) => setSelectedMonth(e.target.value)}
onChange={(e) => setSelectedMonth(e.target.value)} className="bg-white text-black p-1 rounded"
className="bg-white text-black p-1 rounded" >
> <option value="01">Januar</option>
<option value="01">Januar</option> <option value="02">Februar</option>
<option value="02">Februar</option> <option value="03">März</option>
<option value="03">März</option> <option value="04">April</option>
<option value="04">April</option> <option value="05">Mai</option>
<option value="05">Mai</option> <option value="06">Juni</option>
<option value="06">Juni</option> <option value="07">Juli</option>
<option value="07">Juli</option> <option value="08">August</option>
<option value="08">August</option> <option value="09">September</option>
<option value="09">September</option> <option value="10">Oktober</option>
<option value="10">Oktober</option> <option value="11">November</option>
<option value="11">November</option> <option value="12">Dezember</option>
<option value="12">Dezember</option> </select>
</select> <select
<select value={selectedYear}
value={selectedYear} onChange={(e) => setSelectedYear(e.target.value)}
onChange={(e) => setSelectedYear(e.target.value)} className="bg-white text-black p-1 rounded"
className="bg-white text-black p-1 rounded" >
> <option value="22">2022</option>
<option value="22">2022</option> <option value="23">2023</option>
<option value="23">2023</option> <option value="24">2024</option>
<option value="24">2024</option> <option value="25">2025</option>
<option value="25">2025</option> <option value="26">2026</option>
<option value="26">2026</option> </select>
</select> <input
<input type="number"
type="number" value={selectedDay}
value={selectedDay} onChange={(e) => setSelectedDay(e.target.value)}
onChange={(e) => setSelectedDay(e.target.value)} min="1"
min="1" max="31"
max="31" placeholder="Tag"
placeholder="Tag" className="bg-white text-black p-1 rounded"
className="bg-white text-black p-1 rounded" />
/>
</div>
<div className="flex items-center space-x-4">
<input
type="text"
value={filter}
onChange={(e) => setFilter(e.target.value)}
placeholder="Filter"
className="bg-white text-black p-1 rounded"
/>
<select
value={rowsPerPage}
onChange={(e) => setRowsPerPage(e.target.value)}
className="bg-white text-black p-1 rounded"
>
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>
</div>
</div> </div>
<div className="flex items-center space-x-4">
{/* Meldungen Tabelle */} <input
<div className="flex-grow overflow-auto mt-4"> type="text"
<table className="min-w-full bg-white border border-gray-300"> value={filter}
<thead> onChange={(e) => setFilter(e.target.value)}
<tr className="bg-gray-200 text-gray-600 text-sm leading-normal"> placeholder="Filter"
<th className="py-3 px-4 text-left">Datum</th> className="bg-white text-black p-1 rounded"
<th className="py-3 px-4 text-left">Meldung</th> />
</tr> <select
</thead> value={rowsPerPage}
<tbody className="text-gray-600 text-sm"> onChange={(e) => setRowsPerPage(e.target.value)}
{filteredMessages.slice(0, rowsPerPage).map((msg, index) => ( className="bg-white text-black p-1 rounded"
<tr key={index} className="border-b border-gray-200"> >
<td className="py-3 px-4">{msg.date}</td> <option value="5">5</option>
<td className="py-3 px-4">{msg.message}</td> <option value="10">10</option>
</tr> <option value="25">25</option>
))} <option value="50">50</option>
</tbody> </select>
</table>
</div>
{/* Pagination */}
<div className="flex justify-center mt-4">
<ul className="flex space-x-2">
{Array.from(
{ length: Math.ceil(filteredMessages.length / rowsPerPage) },
(_, i) => (
<li
key={i}
className="cursor-pointer bg-blue-500 text-white p-2 rounded"
>
{i + 1}
</li>
)
)}
</ul>
</div> </div>
</div> </div>
</Layout>
{/* Meldungen Tabelle */}
<div className="flex-grow overflow-auto mt-4">
<table className="min-w-full bg-white border border-gray-300">
<thead>
<tr className="bg-gray-200 text-gray-600 text-sm leading-normal">
<th className="py-3 px-4 text-left">Datum</th>
<th className="py-3 px-4 text-left">Meldung</th>
</tr>
</thead>
<tbody className="text-gray-600 text-sm">
{filteredMessages.slice(0, rowsPerPage).map((msg, index) => (
<tr key={index} className="border-b border-gray-200">
<td className="py-3 px-4">{msg.date}</td>
<td className="py-3 px-4">{msg.message}</td>
</tr>
))}
</tbody>
</table>
</div>
{/* Pagination */}
<div className="flex justify-center mt-4">
<ul className="flex space-x-2">
{Array.from(
{ length: Math.ceil(filteredMessages.length / rowsPerPage) },
(_, i) => (
<li
key={i}
className="cursor-pointer bg-blue-500 text-white p-2 rounded"
>
{i + 1}
</li>
)
)}
</ul>
</div>
</div>
); );
} }

17
app/page.js
View File

@@ -1,9 +1,14 @@
import Image from "next/image"; "use client";
import { useEffect } from "react";
import { useRouter } from "next/navigation"; // App-Router Hook für Navigation
export default function Home() { export default function Home() {
return ( const router = useRouter();
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<h1>Next.js startseite</h1> useEffect(() => {
</div> // Umleitung zur Dashboard-Seite bei der Initialisierung
); router.push("/dashboard");
}, [router]);
return <div>Wird geladen...</div>; // Temporärer Ladezustand
} }

2
components/Footer.jsx
View File

@@ -1,4 +1,4 @@
// components/Footer.jsx "use client";
import React from "react"; import React from "react";
function Footer() { function Footer() {

2
components/Header.jsx
View File

@@ -1,4 +1,4 @@
// components/Header.jsx "use client";
import React from "react"; import React from "react";
import Image from "next/image"; import Image from "next/image";
import "bootstrap-icons/font/bootstrap-icons.css"; import "bootstrap-icons/font/bootstrap-icons.css";