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

Design ok für KÜ705-FO Komponente

Browse Source
This commit is contained in:
ISA
2024-10-15 20:32:32 +02:00
parent 2891e70a6b
commit 5d6e945e56
2 changed files with 56 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/kabelueberwachung/page.jsx
View File

@@ -68,7 +68,7 @@ function Kabelueberwachung() {
}, []); }, []);
return ( return (
<div className="bg-gray-100 flex-1 p-4"> <div className="bg-gray-100 flex-1 p-6">
<h1 className="text-2xl mb-4">Kabelüberwachung</h1> <h1 className="text-2xl mb-4">Kabelüberwachung</h1>
{/* Tabs for Racks */} {/* Tabs for Racks */}
@@ -108,14 +108,15 @@ function Kabelueberwachung() {
</div> </div>
{/* Slots for the active rack */} {/* Slots for the active rack */}
<div className="flex flex-row gap-4"> <div className="flex flex-row justify-between">
{racks[`rack${activeRack}`].map((slot, index) => ( {racks[`rack${activeRack}`].map((slot, index) => (
<Kue705FO <div key={index} className="flex-grow">
key={index} <Kue705FO
isolationswert={slot.isolationswert} isolationswert={slot.isolationswert}
schleifenwiderstand={slot.schleifenwiderstand} schleifenwiderstand={slot.schleifenwiderstand}
modulName={slot.modulName} modulName={slot.modulName}
/> />
</div>
))} ))}
</div> </div>
</div> </div>

75
components/modules/Kue705FO.jsx
View File

@@ -8,42 +8,61 @@ function Kue705FO({
kueVersion, kueVersion,
}) { }) {
return ( return (
<div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400"> <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
{/* Hauptkörper - Linker Bereich */} {/* 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> <div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
{/* Header-Bereich mit Slotnummer und Zahnrad */}
<div className="flex items-start justify-between h-[30px] ">
{/* Slotnummer */}
<div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
<span className="text-white text-[10px]">1</span>
</div>
{/* Innenrahmen weiß */} {/* KÜ705-FO Text */}
<div className="absolute top-[3.375px] left-[3.375px] w-[109.125px] h-[238.5px] border-[3px] border-white"></div> <h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3>
{/* Rechte Spalte */} {/* Zahnrad-Icon */}
<div className="absolute top-[3.375px] right-0 w-[37.5px] h-[238.5px] border-[3px] border-white"></div> <button
onClick={() => console.log("Settings clicked")}
className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center"
>
<span className="text-white text-[20px]">⚙</span>
</button>
</div>
{/* Oberer kleiner Block in der rechten Spalte */} {/* Betrieb und Alarm Status */}
<div className="absolute top-[3.375px] right-0 w-[37.5px] h-[37.052px] border-[3px] border-white"></div> <div className="flex flex-col mt-[10px] ml-[10px]">
<div className="flex items-center">
<div className="w-[10px] h-[10px] bg-green-500 rounded-full mr-2"></div>
<span className="text-white text-[10px]">Betrieb</span>
</div>
<div className="flex items-center mt-1">
<div className="w-[10px] h-[10px] bg-gray-300 rounded-full mr-2"></div>
<span className="text-white text-[10px]">Alarm</span>
</div>
</div>
{/* Text KÜ705-FO */} {/* Isolationswert-Anzeige */}
<h3 className="absolute top-[19.871px] left-[25.541px] text-white font-bold text-[9px]"> <div className="relative mt-[50px] mx-auto bg-black text-white w-[80px] h-[40px] flex items-center justify-center text-[18px] z-10">
KÜ705-FO <div className="text-center">
</h3> <span>{">200"}</span>
<div className="text-[8px]">ISO MOhm</div>
</div>
</div>
{/* Modulname und Version */} {/* Weiße Linien */}
<div className="absolute top-[220px] left-[10px] text-white text-[8px]"> <div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div>
<p>Version: {kueVersion}</p> <div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>
</div>
{/* Isolationswert */} {/* Modulname-Anzeige */}
<div className="absolute top-[100px] left-[10px] text-white text-[8px]"> <div className="absolute bottom-[20px] left-[10px] text-black text-[10px] bg-gray-300 p-1 w-[100px] text-center">
<p>Isolationswert: </p> Test1
<p>{isolationswert} kOhm</p> </div>
</div>
{/* Kabelüberwachung-Modul-Name */} {/* Version */}
<div className="absolute top-[130px] left-[10px] text-white text-[8px]"> <div className="absolute bottom-1 right-1 text-black text-[8px]">
<p>ModulName: {modulName}</p> V4.19
</div> </div>
{/* Schleifenwiderstand */}
<div className="absolute top-[270px] left-[10px] text-white text-[8px]">
<p>Schleifenwiderstand: {schleifenwiderstand} kOhm</p>
</div> </div>
{/* Unterer Bereich - Schleifenwiderstand und Messkurve */} {/* Unterer Bereich - Schleifenwiderstand und Messkurve */}