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

Kue705-FO UI component

Browse Source
This commit is contained in:
ISA
2024-09-29 21:46:20 +02:00
parent 6bd667c8fc
commit 28f791069f
4 changed files with 64 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
app/kabelueberwachung/page.jsx
View File

@@ -1,86 +1,32 @@
"use client";
import React, { useState } from "react";
import Kue705FO from "../../components/modules/Kue705FO";
function Kabelueberwachung() {
const [activeTab, setActiveTab] = useState(1);
const racks = [
{ id: 1, name: "Rack 1" },
{ id: 2, name: "Rack 2" },
{ id: 3, name: "Rack 3" },
{ id: 4, name: "Rack 4" },
];
const moduleValues = {
isolationswert: ">200",
schleifenwiderstand: "0.85",
};
return (
<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"
}`}
>
{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>
))}
</tbody>
</table>
</div>
)
)}
<div className="bg-gray-100 flex-1 p-4">
<h1 className="text-2xl mb-4">Kabelüberwachung</h1>
<div className="flex flex-row gap-4">
{/* Hier verwenden wir die Kue705FO-Komponente */}
<Kue705FO
isolationswert={moduleValues.isolationswert}
schleifenwiderstand={moduleValues.schleifenwiderstand}
/>
<Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
<Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
<Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
<Kue705FO
isolationswert={moduleValues.isolationswert}
schleifenwiderstand={moduleValues.schleifenwiderstand}
/>
<Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
<Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
<Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
</div>
</div>
);

35
components/modules/Kue705FO.jsx Normal file
View File

@@ -0,0 +1,35 @@
import React from "react";
import { Icon } from "@iconify/react"; // Für Iconify Icons
function Kue705FO({ isolationswert, schleifenwiderstand, modulName, version }) {
return (
<div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400">
{/* Hauptkörper - Linker Bereich */}
<div className="absolute top-[1.352px] left-[1.352px] w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400"></div>
{/* Innenrahmen weiß */}
<div className="absolute top-[3.375px] left-[3.375px] w-[109.125px] h-[238.5px] border-[3px] border-white"></div>
{/* Rechte Spalte */}
<div className="absolute top-[3.375px] right-0 w-[37.5px] h-[238.5px] border-[3px] border-white"></div>
{/* Oberer kleiner Block in der rechten Spalte */}
<div className="absolute top-[3.375px] right-0 w-[37.5px] h-[37.052px] border-[3px] border-white"></div>
{/* Text KÜ705-FO */}
<h3 className="absolute top-[19.871px] left-[25.541px] text-white font-bold text-[9px]">
KÜ705-FO
</h3>
{/* Unterer Bereich - Schleifenwiderstand und Messkurve */}
<div className="absolute bottom-0 left-[1.095px] w-[113.182px] h-[105.864px] bg-gray-300 border-[1.5px] border-gray-400">
{/* Messkurve Button */}
<div className="absolute bottom-[1.5px] left-[13.49px] w-[91.428px] h-[14.544px] bg-littwin-blue flex items-center justify-center">
<span className="text-white text-[9px]">Messkurve</span>
</div>
</div>
</div>
);
}
export default Kue705FO;

1
public/images/KUE_Steckplatz.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

6
tailwind.config.js
View File

@@ -6,7 +6,11 @@ module.exports = {
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {},
extend: {
colors: {
"littwin-blue": "#00AEEF", // Definiere die Farbe mit dem gewünschten Hex-Wert
},
},
},
plugins: [],
};