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

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 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>
);
}