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

XIOPM 1 und 2 in dashboard

Browse Source
This commit is contained in:
ISA
2024-09-29 17:56:46 +02:00
parent 4880b6473e
commit 8989a78936
4 changed files with 47 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/dashboard/page.jsx
View File

@@ -8,6 +8,8 @@ import CPLStatus from "../../components/modulesStatus/CPLStatus";
import Access1Status from "../../components/modulesStatus/Access1Status";
import Access2Status from "../../components/modulesStatus/Access2Status";
import Kue705_FO from "../../components/modulesStatus/Kue705_FO";
import XioPM1Status from "../../components/modulesStatus/XioPM1Status";
import XioPM2Status from "../../components/modulesStatus/XioPM2Status";
import { Icon } from "@iconify/react";
function Dashboard() {
@@ -209,7 +211,7 @@ function Dashboard() {
{/* Beispiel für Geräteanzeige */}
<div className="bg-gray-50 rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
<div className="flex flex-row item-center justify-between bg-red-600 p-1">
<div className="flex flex-row item-center justify-between p-1">
<CPLStatus />
<Access1Status />
<Access2Status />
@@ -227,6 +229,15 @@ function Dashboard() {
</div>
</div>
</div>
{/* Die Box für XIOPM1 und XIOPM2, jeweils unter CPL und Access 1 */}
<div className="grid grid-cols-3 gap-4 p-4">
<div className="flex justify-start items-center">
<XioPM1Status /> {/* Unter CPL */}
</div>
<div className="flex justify-center items-center">
<XioPM2Status /> {/* Unter Access 1 */}
</div>
</div>
</div>
</div>
</div>

10
components/modulesStatus/Kue705_FO.jsx
View File

@@ -5,15 +5,15 @@ const Kue705_FO = ({ slot }) => {
return (
<div className="border border-gray-400 w-10 h-20 flex flex-col">
{/* Erstes Kind, nimmt den restlichen Platz ein */}
<div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-xs">
<div className="flex w-full p-1 mb-4 items-start justify-start">
<div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-[10px]">
<div className="flex w-full mb-1 items-start justify-start">
{slot}
</div>
<div className="text-xs">KÜ705</div>
<div className="text-xs">FO</div>
<div className="text-[10px]">KÜ705</div>
<div className="text-[10px]">FO</div>
</div>
{/* Die unteren Abschnitte behalten ihre festen Höhen */}
<div className="bg-green-500 w-full h-3/6"></div>
<div className="bg-green-500 w-full h-2/6"></div>
<div className="bg-blue-500 w-full h-1/6"></div>
</div>
);

15
components/modulesStatus/XioPM1Status.jsx Normal file
View File

@@ -0,0 +1,15 @@
// components/Access1Status.jsx
import React from "react";
const Access1Status = () => {
return (
<div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
{/* Grüner Streifen auf der linken Seite */}
<div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
{/* Blauer Hauptbereich */}
<div className="flex flex-row text-white text-xs ">XIOPM 1</div>
</div>
);
};
export default Access1Status;

15
components/modulesStatus/XioPM2Status.jsx Normal file
View File

@@ -0,0 +1,15 @@
// components/Access1Status.jsx
import React from "react";
const Access1Status = () => {
return (
<div className="border border-gray-400 w-20 h-10 flex items-center justify-start bg-blue-500">
{/* Grüner Streifen auf der linken Seite */}
<div className=" left-0 top-0 h-full w-1/6 bg-green-500 mr-2"></div>
{/* Blauer Hauptbereich */}
<div className="flex flex-row text-white text-xs ">XIOPM 2</div>
</div>
);
};
export default Access1Status;