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>
|
||||
{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 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>
|
||||
)}
|
||||
|
||||
{/* 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]}
|
||||
{/* 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>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Kabelüberwachungsdaten anzeigen */}
|
||||
{cableMonitoring && (
|
||||
{/* 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>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
<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>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
9
public/images/IEC.svg
Normal file
9
public/images/IEC.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
10
public/images/IP-icon.svg
Normal file
10
public/images/IP-icon.svg
Normal file
@@ -0,0 +1,10 @@
|
||||
<svg width="24" height="30" viewBox="0 0 24 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_523_7201)">
|
||||
<path d="M21.3411 8.66763V27.3411H2.66763V8.66763H21.3411ZM21.3411 6H2.66763C1.20043 6 0 7.20043 0 8.66763V27.3411C0 28.8082 1.20043 30.0087 2.66763 30.0087H21.3411C22.8082 30.0087 24.0087 28.8082 24.0087 27.3411V8.66763C24.0087 7.20043 22.8082 6 21.3411 6ZM8.00289 11.3353H5.33526V24.6734H8.00289V11.3353ZM16.0058 11.3353H10.6705V24.6734H13.3382V19.3382H16.0058C17.473 19.3382 18.6734 18.1377 18.6734 16.6705V14.0029C18.6734 12.5357 17.473 11.3353 16.0058 11.3353ZM16.0058 16.6705H13.3382V14.0029H16.0058V16.6705Z" fill="#6750A4"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_523_7201">
|
||||
<rect width="24.0087" height="24.0087" fill="white" transform="translate(0 6)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 817 B |
3
public/images/gateway.svg
Normal file
3
public/images/gateway.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="22" height="27" viewBox="0 0 22 27" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.3503 23.4751V18.8764M11.3503 13.3579V8.75923M4.91213 16.1172H9.51084M17.7885 16.1172H13.1898M12.2986 12.4097L11.3503 13.6743L10.4021 12.4097H12.2986ZM10.4021 19.832L11.3503 18.5674L12.2986 19.832H10.403H10.4021ZM5.83187 17.0654L4.56722 16.1172L5.83187 15.1689V17.0654ZM16.8688 15.1689L18.1334 16.1172L16.8688 17.0654V15.1698V15.1689ZM11.3503 6C16.9378 6 21.4675 10.5297 21.4675 16.1172C21.4675 21.7046 16.9378 26.2344 11.3503 26.2344C5.76289 26.2344 1.23315 21.7046 1.23315 16.1172C1.23315 10.5297 5.76289 6 11.3503 6Z" stroke="#001AFF" stroke-width="1.06497"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 678 B |
3
public/images/subnet-mask.svg
Normal file
3
public/images/subnet-mask.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="19" height="25" viewBox="0 0 19 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.6222 19.0063C15.1598 19.0053 14.7075 19.1411 14.322 19.3965L11.3405 16.4051L10.4212 17.3246L13.4118 20.307C13.2974 20.5116 13.21 20.7302 13.1517 20.9573H5.1278C5.06289 20.7264 4.96243 20.507 4.83004 20.307L14.322 10.8123C14.7075 11.0678 15.1598 11.2036 15.6222 11.2025C16.1091 11.2045 16.5867 11.0697 17.0007 10.8135C17.4147 10.5573 17.7485 10.1901 17.9641 9.75348C18.1798 9.31689 18.2686 8.82852 18.2204 8.34394C18.1722 7.85936 17.9891 7.39804 17.6917 7.01246C17.3944 6.62689 16.9948 6.33254 16.5384 6.16292C16.0821 5.9933 15.5873 5.95522 15.1104 6.05301C14.6335 6.1508 14.1936 6.38053 13.8408 6.71606C13.488 7.05159 13.2364 7.47945 13.1147 7.95095H5.1551C5.0024 7.394 4.67216 6.90212 4.21454 6.55C3.75691 6.19789 3.19691 6.00478 2.61958 6C1.92988 6 1.26843 6.27406 0.780732 6.76189C0.293038 7.24973 0.0190543 7.91137 0.0190543 8.60127C0.0190543 9.29117 0.293038 9.95281 0.780732 10.4406C1.26843 10.9285 1.92988 11.2025 2.61958 11.2025C3.08199 11.2036 3.53437 11.0678 3.91985 10.8123L6.90136 13.8038L7.82065 12.8843L4.83004 9.90191C4.94443 9.69727 5.03184 9.47868 5.09009 9.25159H13.114C13.179 9.4825 13.2794 9.7019 13.4118 9.90191L3.91985 19.3965C3.53437 19.1411 3.08199 19.0053 2.61958 19.0063C2.13276 19.0044 1.65517 19.1392 1.24115 19.3954C0.827129 19.6515 0.493311 20.0188 0.27768 20.4554C0.0620486 20.892 -0.026737 21.3804 0.0214263 21.865C0.0695897 22.3495 0.252768 22.8109 0.550116 23.1964C0.847465 23.582 1.24704 23.8763 1.70338 24.046C2.15972 24.2156 2.6545 24.2537 3.13141 24.1559C3.60832 24.0581 4.04821 23.8284 4.40104 23.4928C4.75386 23.1573 5.00544 22.7294 5.12715 22.2579H13.0867C13.2069 22.731 13.4573 23.1609 13.8095 23.4987C14.1617 23.8365 14.6016 24.0687 15.0792 24.1689C15.5567 24.2691 16.0528 24.2333 16.511 24.0656C16.9693 23.8979 17.3713 23.6049 17.6714 23.2201C17.9715 22.8352 18.1577 22.3739 18.2087 21.8884C18.2598 21.403 18.1737 20.913 17.9603 20.4741C17.7468 20.0352 17.4146 19.665 17.0013 19.4055C16.588 19.146 16.1102 19.0078 15.6222 19.0063ZM15.6222 7.30063C15.8794 7.30063 16.1308 7.37692 16.3446 7.51983C16.5585 7.66275 16.7251 7.86588 16.8235 8.10354C16.9219 8.3412 16.9477 8.60271 16.8975 8.85501C16.8473 9.10731 16.7235 9.33906 16.5417 9.52096C16.3598 9.70285 16.1281 9.82673 15.8759 9.87691C15.6237 9.9271 15.3622 9.90134 15.1246 9.8029C14.8871 9.70446 14.684 9.53775 14.5411 9.32386C14.3982 9.10998 14.322 8.85851 14.322 8.60127C14.323 8.25664 14.4603 7.92641 14.7039 7.68272C14.9476 7.43903 15.2777 7.30166 15.6222 7.30063ZM2.61958 9.90191C2.36242 9.90191 2.11102 9.82562 1.8972 9.68271C1.68337 9.53979 1.51671 9.33666 1.4183 9.099C1.31988 8.86134 1.29413 8.59983 1.3443 8.34753C1.39447 8.09523 1.51831 7.86348 1.70016 7.68158C1.882 7.49969 2.11369 7.37581 2.36592 7.32563C2.61814 7.27544 2.87958 7.3012 3.11717 7.39964C3.35477 7.49808 3.55784 7.66479 3.70072 7.87868C3.84359 8.09256 3.91985 8.34403 3.91985 8.60127C3.91882 8.9459 3.7815 9.27613 3.53787 9.51982C3.29425 9.76351 2.96412 9.90088 2.61958 9.90191ZM2.61958 22.9083C2.36242 22.9083 2.11102 22.832 1.8972 22.6891C1.68337 22.5461 1.51671 22.343 1.4183 22.1054C1.31988 21.8677 1.29413 21.6062 1.3443 21.3539C1.39447 21.1016 1.51831 20.8698 1.70016 20.6879C1.882 20.506 2.11369 20.3822 2.36592 20.332C2.61814 20.2818 2.87958 20.3075 3.11717 20.406C3.35477 20.5044 3.55784 20.6711 3.70072 20.885C3.84359 21.0989 3.91985 21.3504 3.91985 21.6076C3.91882 21.9523 3.7815 22.2825 3.53787 22.5262C3.29425 22.7699 2.96412 22.9072 2.61958 22.9083ZM15.6222 22.9083C15.3651 22.9083 15.1137 22.832 14.8998 22.6891C14.686 22.5461 14.5194 22.343 14.4209 22.1054C14.3225 21.8677 14.2968 21.6062 14.347 21.3539C14.3971 21.1016 14.521 20.8698 14.7028 20.6879C14.8847 20.506 15.1163 20.3822 15.3686 20.332C15.6208 20.2818 15.8822 20.3075 16.1198 20.406C16.3574 20.5044 16.5605 20.6711 16.7034 20.885C16.8462 21.0989 16.9225 21.3504 16.9225 21.6076C16.9215 21.9523 16.7842 22.2825 16.5405 22.5262C16.2969 22.7699 15.9668 22.9072 15.6222 22.9083Z" fill="#647BA7"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
Reference in New Issue
Block a user