erste Test ohne Fehler
This commit is contained in:
ISA
@@ -1,135 +1,132 @@
|
||||
// pages/Zutrittskontrolle.jsx
|
||||
"use client";
|
||||
import React from "react";
|
||||
import Layout from "../components/Layout";
|
||||
|
||||
function Access() {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="bg-gray-100 min-h-screen p-8">
|
||||
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
||||
<h2 className="text-xl font-bold text-blue-500 mb-4">
|
||||
Zutrittskontrolle 1
|
||||
</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 className="bg-gray-100 min-h-screen p-8">
|
||||
<div className="bg-white rounded-lg shadow p-6 mb-8">
|
||||
<h2 className="text-xl font-bold text-blue-500 mb-4">
|
||||
Zutrittskontrolle 1
|
||||
</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>
|
||||
|
||||
{/* 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 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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import Layout from "../components/Layout";
|
||||
|
||||
function AnalogeEingaenge() {
|
||||
const [activeConfig, setActiveConfig] = useState(null);
|
||||
@@ -81,143 +81,141 @@ function AnalogeEingaenge() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="bg-gray-100 min-h-screen p-8">
|
||||
<h1 className="text-2xl font-bold mb-4">Analoge Eingänge</h1>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{inputs.map((input) => (
|
||||
<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">
|
||||
<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>
|
||||
<div className="bg-gray-100 min-h-screen p-8">
|
||||
<h1 className="text-2xl font-bold mb-4">Analoge Eingänge</h1>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{inputs.map((input) => (
|
||||
<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">
|
||||
<h2 className="text-lg">XIO-PM {input.id}</h2>
|
||||
<button
|
||||
className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
|
||||
onClick={() => setActiveConfig(null)}
|
||||
className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded"
|
||||
onClick={() => setActiveConfig(input.id)}
|
||||
>
|
||||
<i className="bi bi-x-lg"></i>
|
||||
Online
|
||||
</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 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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
import React, { useEffect } from "react";
|
||||
import Layout from "../components/Layout";
|
||||
|
||||
import Image from "next/image";
|
||||
import "tailwindcss/tailwind.css"; // Stelle sicher, dass Tailwind CSS korrekt importiert wird
|
||||
import "@fontsource/roboto"; // Standardimport für alle Schriftstärken
|
||||
@@ -7,17 +8,15 @@ import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
|
||||
function Dashboard() {
|
||||
return (
|
||||
<Layout>
|
||||
<div className="bg-gray-100 flex flex-col min-h-screen">
|
||||
<div className="flex flex-grow w-full">
|
||||
{/* Main Section */}
|
||||
<main className="flex-1 bg-white p-8 ml-4 shadow rounded-lg overflow-hidden">
|
||||
{/* Hauptinhalt */}
|
||||
<h1 className="text-2xl font-bold mb-4">Dashboard Übersicht</h1>
|
||||
</main>
|
||||
</div>
|
||||
<div className="bg-gray-100 flex flex-col min-h-screen">
|
||||
<div className="flex flex-grow w-full">
|
||||
{/* Main Section */}
|
||||
<main className="flex-1 bg-white p-8 ml-4 shadow rounded-lg overflow-hidden">
|
||||
{/* Hauptinhalt */}
|
||||
<h1 className="text-2xl font-bold mb-4">Dashboard Übersicht</h1>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
// pages/Einausgaenge.jsx
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import Layout from "../components/Layout";
|
||||
|
||||
function Einausgaenge() {
|
||||
// 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");
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="bg-gray-100 min-h-screen p-8">
|
||||
{/* Tabs für Ein- und Ausgänge */}
|
||||
<ul className="flex border-b border-gray-200">
|
||||
<li
|
||||
className={`mr-1 ${
|
||||
activeTab === "inputs" ? "border-blue-500 text-blue-600" : ""
|
||||
<div className="bg-gray-100 min-h-screen p-8">
|
||||
{/* Tabs für Ein- und Ausgänge */}
|
||||
<ul className="flex border-b border-gray-200">
|
||||
<li
|
||||
className={`mr-1 ${
|
||||
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
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
Eingänge
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className={`mr-1 ${
|
||||
activeTab === "outputs" ? "border-blue-500 text-blue-600" : ""
|
||||
Eingänge
|
||||
</button>
|
||||
</li>
|
||||
<li
|
||||
className={`mr-1 ${
|
||||
activeTab === "outputs" ? "border-blue-500 text-blue-600" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => setActiveTab("outputs")}
|
||||
className={`inline-block px-4 py-2 rounded-t-lg ${
|
||||
activeTab === "outputs"
|
||||
? "bg-blue-500 text-white"
|
||||
: "bg-white text-black hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
onClick={() => setActiveTab("outputs")}
|
||||
className={`inline-block px-4 py-2 rounded-t-lg ${
|
||||
activeTab === "outputs"
|
||||
? "bg-blue-500 text-white"
|
||||
: "bg-white text-black hover:bg-gray-200"
|
||||
}`}
|
||||
>
|
||||
Ausgänge
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
Ausgänge
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Inhalt für die aktiven Tabs */}
|
||||
<div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto">
|
||||
{activeTab === "inputs" && (
|
||||
<div>
|
||||
<h2 className="text-lg font-bold mb-4">Eingänge</h2>
|
||||
<table className="min-w-full bg-white border border-gray-300">
|
||||
<thead>
|
||||
<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">Name</th>
|
||||
<th className="py-3 px-4 text-left">Status</th>
|
||||
<th className="py-3 px-4 text-left">Beschreibung</th>
|
||||
{/* Inhalt für die aktiven Tabs */}
|
||||
<div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto">
|
||||
{activeTab === "inputs" && (
|
||||
<div>
|
||||
<h2 className="text-lg font-bold mb-4">Eingänge</h2>
|
||||
<table className="min-w-full bg-white border border-gray-300">
|
||||
<thead>
|
||||
<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">Name</th>
|
||||
<th className="py-3 px-4 text-left">Status</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>
|
||||
</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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === "outputs" && (
|
||||
<div>
|
||||
<h2 className="text-lg font-bold mb-4">Ausgänge</h2>
|
||||
<table className="min-w-full bg-white border border-gray-300">
|
||||
<thead>
|
||||
<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">Name</th>
|
||||
<th className="py-3 px-4 text-left">Status</th>
|
||||
<th className="py-3 px-4 text-left">Beschreibung</th>
|
||||
{activeTab === "outputs" && (
|
||||
<div>
|
||||
<h2 className="text-lg font-bold mb-4">Ausgänge</h2>
|
||||
<table className="min-w-full bg-white border border-gray-300">
|
||||
<thead>
|
||||
<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">Name</th>
|
||||
<th className="py-3 px-4 text-left">Status</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>
|
||||
</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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
"use client"; // Ganz oben hinzufügen
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import Layout from "../layout"; // Korrigierter Pfad zu Layout
|
||||
|
||||
function Kabelueberwachung() {
|
||||
const [activeTab, setActiveTab] = useState(1);
|
||||
@@ -13,81 +12,77 @@ function Kabelueberwachung() {
|
||||
];
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="bg-gray-100 flex-1 p-4 overflow-hidden">
|
||||
{/* Tabs */}
|
||||
<ul className="flex border-b border-gray-200">
|
||||
{racks.map((rack) => (
|
||||
<li
|
||||
key={rack.id}
|
||||
className={`mr-1 ${
|
||||
activeTab === rack.id ? "border-blue-500 text-blue-600" : ""
|
||||
<div className="bg-gray-100 flex-1 p-4 overflow-hidden">
|
||||
{/* Tabs */}
|
||||
<ul className="flex border-b border-gray-200">
|
||||
{racks.map((rack) => (
|
||||
<li
|
||||
key={rack.id}
|
||||
className={`mr-1 ${
|
||||
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
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
{rack.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{/* Rack-Inhalte */}
|
||||
<div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto max-h-full">
|
||||
{racks.map(
|
||||
(rack) =>
|
||||
activeTab === rack.id && (
|
||||
<div key={rack.id}>
|
||||
<h2 className="text-lg font-bold mb-4">
|
||||
{rack.name} Inhalte
|
||||
</h2>
|
||||
<table className="min-w-full bg-white border border-gray-300">
|
||||
<thead>
|
||||
<tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
|
||||
<th className="py-3 px-4 text-left">Slot</th>
|
||||
<th className="py-3 px-4 text-left">Bezeichnung</th>
|
||||
<th className="py-3 px-4 text-center">
|
||||
Isolationsgrenzwert
|
||||
</th>
|
||||
<th className="py-3 px-4 text-center">
|
||||
Schleifengrenzwert
|
||||
</th>
|
||||
<th className="py-3 px-4 text-center">Filterzeit</th>
|
||||
<th className="py-3 px-4 text-center">Aktionen</th>
|
||||
{rack.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{/* Rack-Inhalte */}
|
||||
<div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto max-h-full">
|
||||
{racks.map(
|
||||
(rack) =>
|
||||
activeTab === rack.id && (
|
||||
<div key={rack.id}>
|
||||
<h2 className="text-lg font-bold mb-4">{rack.name} Inhalte</h2>
|
||||
<table className="min-w-full bg-white border border-gray-300">
|
||||
<thead>
|
||||
<tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
|
||||
<th className="py-3 px-4 text-left">Slot</th>
|
||||
<th className="py-3 px-4 text-left">Bezeichnung</th>
|
||||
<th className="py-3 px-4 text-center">
|
||||
Isolationsgrenzwert
|
||||
</th>
|
||||
<th className="py-3 px-4 text-center">
|
||||
Schleifengrenzwert
|
||||
</th>
|
||||
<th className="py-3 px-4 text-center">Filterzeit</th>
|
||||
<th className="py-3 px-4 text-center">Aktionen</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-gray-600 text-sm">
|
||||
{Array.from({ length: 8 }, (_, index) => (
|
||||
<tr key={index} className="border-b border-gray-200">
|
||||
<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>
|
||||
</thead>
|
||||
<tbody className="text-gray-600 text-sm">
|
||||
{Array.from({ length: 8 }, (_, index) => (
|
||||
<tr key={index} className="border-b border-gray-200">
|
||||
<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>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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 Header from "../components/Header";
|
||||
import Navigation from "../components/Navigation";
|
||||
import Footer from "../components/Footer";
|
||||
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 }) {
|
||||
return (
|
||||
<html lang="de">
|
||||
<head>
|
||||
{/* Hier können Meta-Tags oder Links für CSS hinzugefügt werden */}
|
||||
</head>
|
||||
<body className="bg-gray-100 flex flex-col min-h-screen">
|
||||
<body>
|
||||
{/* Hier das Layout mit Header, Navigation und Footer */}
|
||||
<Header className="bg-gray-300 p-4 flex-shrink-0" />
|
||||
<div className="flex flex-grow w-full">
|
||||
<Navigation />
|
||||
<main className="flex-1 p-8">{children}</main>
|
||||
<div className="bg-gray-100 flex flex-col min-h-screen">
|
||||
<Header className="bg-gray-300 p-4 flex-shrink-0" />
|
||||
<div className="flex flex-grow w-full">
|
||||
<Navigation />
|
||||
<main className="flex-1 p-8">{children}</main>
|
||||
</div>
|
||||
<Footer className="bg-gray-300 p-4 flex-shrink-0" />
|
||||
</div>
|
||||
<Footer className="bg-gray-300 p-4 flex-shrink-0" />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
// pages/Meldungen.jsx
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import Layout from "../components/Layout";
|
||||
|
||||
function Meldungen() {
|
||||
const [rowsPerPage, setRowsPerPage] = useState(25);
|
||||
@@ -28,110 +27,108 @@ function Meldungen() {
|
||||
});
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* Filterleiste */}
|
||||
<div className="flex justify-between items-center bg-blue-500 p-4 text-white rounded-t">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span>Interner Meldungsspeicher</span>
|
||||
<select
|
||||
value={selectedMonth}
|
||||
onChange={(e) => setSelectedMonth(e.target.value)}
|
||||
className="bg-white text-black p-1 rounded"
|
||||
>
|
||||
<option value="01">Januar</option>
|
||||
<option value="02">Februar</option>
|
||||
<option value="03">März</option>
|
||||
<option value="04">April</option>
|
||||
<option value="05">Mai</option>
|
||||
<option value="06">Juni</option>
|
||||
<option value="07">Juli</option>
|
||||
<option value="08">August</option>
|
||||
<option value="09">September</option>
|
||||
<option value="10">Oktober</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">Dezember</option>
|
||||
</select>
|
||||
<select
|
||||
value={selectedYear}
|
||||
onChange={(e) => setSelectedYear(e.target.value)}
|
||||
className="bg-white text-black p-1 rounded"
|
||||
>
|
||||
<option value="22">2022</option>
|
||||
<option value="23">2023</option>
|
||||
<option value="24">2024</option>
|
||||
<option value="25">2025</option>
|
||||
<option value="26">2026</option>
|
||||
</select>
|
||||
<input
|
||||
type="number"
|
||||
value={selectedDay}
|
||||
onChange={(e) => setSelectedDay(e.target.value)}
|
||||
min="1"
|
||||
max="31"
|
||||
placeholder="Tag"
|
||||
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 className="flex flex-col h-full">
|
||||
{/* Filterleiste */}
|
||||
<div className="flex justify-between items-center bg-blue-500 p-4 text-white rounded-t">
|
||||
<div className="flex items-center space-x-4">
|
||||
<span>Interner Meldungsspeicher</span>
|
||||
<select
|
||||
value={selectedMonth}
|
||||
onChange={(e) => setSelectedMonth(e.target.value)}
|
||||
className="bg-white text-black p-1 rounded"
|
||||
>
|
||||
<option value="01">Januar</option>
|
||||
<option value="02">Februar</option>
|
||||
<option value="03">März</option>
|
||||
<option value="04">April</option>
|
||||
<option value="05">Mai</option>
|
||||
<option value="06">Juni</option>
|
||||
<option value="07">Juli</option>
|
||||
<option value="08">August</option>
|
||||
<option value="09">September</option>
|
||||
<option value="10">Oktober</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">Dezember</option>
|
||||
</select>
|
||||
<select
|
||||
value={selectedYear}
|
||||
onChange={(e) => setSelectedYear(e.target.value)}
|
||||
className="bg-white text-black p-1 rounded"
|
||||
>
|
||||
<option value="22">2022</option>
|
||||
<option value="23">2023</option>
|
||||
<option value="24">2024</option>
|
||||
<option value="25">2025</option>
|
||||
<option value="26">2026</option>
|
||||
</select>
|
||||
<input
|
||||
type="number"
|
||||
value={selectedDay}
|
||||
onChange={(e) => setSelectedDay(e.target.value)}
|
||||
min="1"
|
||||
max="31"
|
||||
placeholder="Tag"
|
||||
className="bg-white text-black p-1 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 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 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>
|
||||
</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
17
app/page.js
@@ -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() {
|
||||
return (
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
// Umleitung zur Dashboard-Seite bei der Initialisierung
|
||||
router.push("/dashboard");
|
||||
}, [router]);
|
||||
|
||||
return <div>Wird geladen...</div>; // Temporärer Ladezustand
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// components/Footer.jsx
|
||||
"use client";
|
||||
import React from "react";
|
||||
|
||||
function Footer() {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// components/Header.jsx
|
||||
"use client";
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css";
|
||||
|
||||
Reference in New Issue
Block a user