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

baugruppenträgger

Browse Source
This commit is contained in:
ISA
2024-09-29 12:00:27 +02:00
parent 88e7884810
commit deef4235cb
1 changed files with 75 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
app/dashboard/page.jsx
View File

@@ -13,6 +13,7 @@ import { Icon } from "@iconify/react";
function Dashboard() {
const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
const [last20Messages, setLast20Messages] = useState([]);
const [kueVersion, setKueVersion] = useState([]);
const [ip, setIp] = useState("");
const [subnet, setSubnet] = useState("");
const [gateway, setGateway] = useState("");
@@ -32,6 +33,14 @@ function Dashboard() {
console.error("Konnte last20Messages nicht finden.");
setError("Konnte last20Messages nicht finden.");
}
// Hier holen wir die kueVersion und konvertieren sie in ein Array
if (window.kueVersion) {
const versionArray = window.kueVersion.split(",").map(Number); // Wandelt die String-Array in ein Array um
setKueVersion(versionArray);
} else {
console.error("Konnte kueVersion nicht finden.");
}
setLoading(false);
})
.catch((error) => {
@@ -40,6 +49,55 @@ function Dashboard() {
setLoading(false);
});
}, [apiUrl]);
useEffect(() => {
loadWindowVariables(apiUrl)
.then(() => {
if (window.kueVersion) {
const versionArray = window.kueVersion.split(",").map(Number);
setKueVersion(versionArray);
} else {
console.error("Konnte kueVersion nicht finden.");
setError("Konnte kueVersion nicht finden.");
}
setLoading(false);
})
.catch((error) => {
console.error("Fehler beim Laden des Skripts:", error);
setError(error);
setLoading(false);
});
}, [apiUrl]);
const renderBaugruppentraeger = () => {
const baugruppen = [];
// Es gibt 4 Baugruppenträger, jeder mit 8 Slots
for (let i = 0; i < 4; i++) {
const slots = kueVersion.slice(i * 8, (i + 1) * 8);
baugruppen.push(
<div key={i} className="flex bg-white shadow-md rounded-lg p-4 mb-4">
<h2 className="text-lg font-bold mr-4">Baugruppenträger {i + 1}</h2>
<div className="flex gap-2">
{slots.map((version, index) => {
const slotNumber = i * 8 + index + 1;
return version !== 0 ? (
<Kue705_FO key={slotNumber} slot={slotNumber} />
) : (
<div
key={slotNumber}
className="w-12 h-24 flex items-center justify-center border border-gray-300"
>
<span className="text-xs text-gray-500">Leer</span>
</div>
);
})}
</div>
</div>
);
}
return baugruppen;
};
const parseMessages = (messages) => {
messages = messages
@@ -131,70 +189,25 @@ function Dashboard() {
</div>
{/* Sidebar mit Informationen */}
<div className="bg-white shadow-md rounded-lg p-4 w-full lg:w-1/3 flex flex-col gap-4">
{/* Versionsinformationen */}
<div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
<h2 className="text-lg font-semibold text-gray-700 mb-2">
Versionsinformationen
</h2>
<p className="text-sm text-gray-600">
<span className="font-bold">Applikationsversion: </span> 5.1.1.8
C-24-KA
</p>
<p className="text-sm text-gray-600">
<span className="font-bold">Webserverversion: </span> 5.3.4.1
</p>
<div className="bg-gray-100 flex flex-col min-h-screen p-4">
<div className="flex justify-between items-center pb-2 w-full lg:w-2/3 mt-8">
<Icon
icon="ri:calendar-schedule-line"
className="text-blue-500 text-4xl"
/>
<h1 className="text-xl font-bold text-gray-700">
Baugruppenträger Übersicht
</h1>
</div>
{/* Beispiel für Geräteanzeige */}
<div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
<div className="flex flex-row item-center justify-between ">
<CPLStatus />
<Access1Status />
<Access2Status />
</div>
<div className="flex flex-col item-center justify-between gap-1">
<div className="flex flex-row item-center justify-between space-y-0">
<Kue705_FO slot="1" />
<Kue705_FO slot="2" />
<Kue705_FO slot="3" />
<Kue705_FO slot="4" />
<Kue705_FO slot="5" />
<Kue705_FO slot="6" />
<Kue705_FO slot="7" />
<Kue705_FO slot="8" />
</div>
<div className="flex flex-row item-center justify-between space-y-0">
<Kue705_FO slot="9" />
<Kue705_FO slot="10" />
<Kue705_FO slot="11" />
<Kue705_FO slot="12" />
<Kue705_FO slot="13" />
<Kue705_FO slot="14" />
<Kue705_FO slot="15" />
<Kue705_FO slot="16" />
</div>
<div className="flex flex-row item-center justify-between space-y-0">
<Kue705_FO slot="17" />
<Kue705_FO slot="18" />
<Kue705_FO slot="19" />
<Kue705_FO slot="20" />
<Kue705_FO slot="21" />
<Kue705_FO slot="22" />
<Kue705_FO slot="23" />
<Kue705_FO slot="24" />
</div>
<div className="flex flex-row item-center justify-between space-y-0">
<Kue705_FO slot="25" />
<Kue705_FO slot="26" />
<Kue705_FO slot="27" />
<Kue705_FO slot="28" />
<Kue705_FO slot="29" />
<Kue705_FO slot="30" />
<Kue705_FO slot="31" />
<Kue705_FO slot="32" />
</div>
</div>
<div className="flex flex-col gap-8 mt-4">
{loading ? (
<p>Lädt...</p>
) : error ? (
<p className="text-red-500">{error}</p>
) : (
renderBaugruppentraeger()
)}
</div>
</div>
</div>