Icons from Figma as svg
This commit is contained in:
ISA
@@ -101,77 +101,99 @@ function Dashboard() {
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-gray-100 flex flex-col min-h-screen">
|
||||
<div className="flex flex-grow w-full">
|
||||
{/* Hauptinhalt */}
|
||||
<main className="flex-1 bg-white p-8 ml-4 shadow rounded-lg overflow-hidden">
|
||||
<h1 className="text-2xl font-bold mb-4">Letzten 20 Meldungen:</h1>
|
||||
<div>
|
||||
<h1>Gerätedaten</h1>
|
||||
<DeviceData />
|
||||
<div className="bg-gray-100 flex flex-col min-h-screen p-8">
|
||||
{/* Letzte Meldungen */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1 className="text-xl font-bold">Letzten 20 Meldungen</h1>
|
||||
<button className="text-red-500">
|
||||
<i className="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
{/* Meldungen Liste */}
|
||||
<div className="bg-white shadow rounded-lg p-4 w-full lg:w-2/3">
|
||||
<table className="min-w-full text-left">
|
||||
<thead className="bg-gray-200 text-sm font-semibold">
|
||||
<tr>
|
||||
<th className="py-2 px-4">Zeitstempel</th>
|
||||
<th className="py-2 px-4">Modul</th>
|
||||
<th className="py-2 px-4">Meldung</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-sm">
|
||||
{/* Beispiel-Daten */}
|
||||
<tr>
|
||||
<td className="py-2 px-4">10.11.23 07:10:12</td>
|
||||
<td className="py-2 px-4">KUE 04</td>
|
||||
<td className="py-2 px-4">Isowert 2</td>
|
||||
</tr>
|
||||
{/* Weitere Zeilen nach Bedarf */}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Sidebar mit Informationen */}
|
||||
<div className="bg-white shadow 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">
|
||||
<h2 className="text-lg font-semibold mb-2">
|
||||
Versionsinformationen
|
||||
</h2>
|
||||
<p className="text-sm">
|
||||
<span className="font-bold">Applikationsversion: </span> 5.1.1.8
|
||||
C-24-KA
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
<span className="font-bold">Webserverversion: </span> 5.3.4.1
|
||||
</p>
|
||||
</div>
|
||||
{loading && <p>Lade Gerätedaten...</p>}
|
||||
{error && <p className="text-red-500">Fehler: {error.message}</p>}
|
||||
|
||||
{/* Gerätedaten anzeigen */}
|
||||
{deviceData && (
|
||||
<div>
|
||||
<h2>Gerätedaten</h2>
|
||||
<p>
|
||||
<strong>Device Name:</strong> {deviceData.deviceName}
|
||||
</p>
|
||||
<p>
|
||||
<strong>IP:</strong> {deviceData.ip}
|
||||
</p>
|
||||
<p>
|
||||
<strong>MAC1:</strong> {deviceData.mac1}
|
||||
</p>
|
||||
<p>
|
||||
<strong>MAC2:</strong> {deviceData.mac2}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Subnet:</strong> {deviceData.subnet}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Gateway:</strong> {deviceData.gateway}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Datetime:</strong> {deviceData.datetime}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{/* Beispiel für Geräteanzeige */}
|
||||
<div className="bg-gray-50 p-4 rounded-lg shadow">
|
||||
<h2 className="text-lg font-semibold mb-2">Geräte Status</h2>
|
||||
{/* Hier könntest du die Daten von "deviceData" verwenden */}
|
||||
<p className="text-sm">Server: Online</p>
|
||||
<p className="text-sm">Access 1: Online</p>
|
||||
{/* Weitere Geräteinformationen */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Digitale Eingänge anzeigen */}
|
||||
{digitalInputs && (
|
||||
<div>
|
||||
<h2>Digitale Eingänge</h2>
|
||||
{digitalInputs.inputs.map((input, index) => (
|
||||
<div key={index}>
|
||||
<p>
|
||||
<strong>Eingang {index + 1}:</strong> Zustand: {input} |
|
||||
Zähler: {digitalInputs.counters[index]} | Flatter:{" "}
|
||||
{digitalInputs.flutters[index]}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Kabelüberwachungsdaten anzeigen */}
|
||||
{cableMonitoring && (
|
||||
<div>
|
||||
<h2>Kabelüberwachung</h2>
|
||||
{cableMonitoring.cableAddress.map((address, index) => (
|
||||
<div key={index}>
|
||||
<p>
|
||||
<strong>Kabel {index + 1}:</strong> Adresse: {address} |
|
||||
Status: {cableMonitoring.status[index]}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
{/* Footer Informationen */}
|
||||
<div className="flex justify-between items-center mt-8 bg-white p-4 rounded-lg shadow">
|
||||
<div className="flex items-center space-x-4">
|
||||
<img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" />
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">IP-Adresse</p>
|
||||
<p className="text-sm font-medium">192.168.10.147</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<img
|
||||
src="/images/subnet-mask.svg"
|
||||
alt="subnet mask"
|
||||
className="w-6 h-6"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Subnet-Maske</p>
|
||||
<p className="text-sm font-medium">255.255.255.0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<img src="/images/gateway.svg" alt="gateway" className="w-6 h-6" />
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">Gateway</p>
|
||||
<p className="text-sm font-medium">192.168.10.1</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<img src="/images/IEC.svg" alt="IEC" className="w-6 h-6" />
|
||||
<div>
|
||||
<p className="text-xs text-gray-500">IEC-Adresse</p>
|
||||
<p className="text-sm font-medium">223</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user