Analoger Eingänge
This commit is contained in:
Ismail Ali
@@ -52,7 +52,7 @@ function Header() {
|
||||
<header className="bg-gray-300 flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-black ">
|
||||
<div
|
||||
className="absolute transform -translate-y-1/2
|
||||
left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%]
|
||||
left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] laptop:
|
||||
top-[90%] sm:top-[90%] md:top-[90%] lg:top-[90%] xl:top-[90%]"
|
||||
style={{
|
||||
height: "13vh", // Dynamische Höhe des Containers
|
||||
|
||||
@@ -21,6 +21,7 @@ function Navigation() {
|
||||
{ name: "Übersicht", path: "/dashboard" },
|
||||
{ name: "Kabelüberwachung", path: "/kabelueberwachung" },
|
||||
{ name: "Ein- und Ausgänge", path: "/einausgaenge" },
|
||||
{ name: "Analoge Eingänge", path: "/analogeEingaenge" },
|
||||
// Weitere Menüpunkte hier
|
||||
];
|
||||
|
||||
|
||||
@@ -4,217 +4,254 @@ import React, { useState } from "react";
|
||||
function AnalogeEingaenge() {
|
||||
const [activeConfig, setActiveConfig] = useState(null);
|
||||
|
||||
// Beispiel-Daten, du kannst die Daten dynamisch laden
|
||||
// Mock-Daten für die analogen Eingänge
|
||||
const inputs = [
|
||||
{ id: 1, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
|
||||
{
|
||||
id: 2,
|
||||
value: 22.91,
|
||||
name: "Feuchtigkeit",
|
||||
uW: true,
|
||||
uG: true,
|
||||
oW: true,
|
||||
oG: false,
|
||||
},
|
||||
{ id: 3, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
|
||||
{ id: 4, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
|
||||
{ id: 5, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
|
||||
{
|
||||
id: 6,
|
||||
value: 21.0,
|
||||
name: "Temperatur",
|
||||
uW: true,
|
||||
uG: true,
|
||||
oW: false,
|
||||
oG: false,
|
||||
},
|
||||
{ id: 7, value: 0, name: "----", uW: true, uG: true, oW: true, oG: true },
|
||||
{ id: 8, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
|
||||
];
|
||||
|
||||
// Mock-Daten für XIO-PM 1
|
||||
const xioPmInputs = [
|
||||
{
|
||||
id: 1,
|
||||
value: 0,
|
||||
name: "------------------",
|
||||
uG: true,
|
||||
value: 1.34,
|
||||
name: "Test1",
|
||||
uW: true,
|
||||
oW: true,
|
||||
uG: true,
|
||||
oW: false,
|
||||
oG: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: 0,
|
||||
name: "------------------",
|
||||
uG: true,
|
||||
value: 7.94,
|
||||
name: "----",
|
||||
uW: true,
|
||||
uG: true,
|
||||
oW: true,
|
||||
oG: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: 0,
|
||||
name: "------------------",
|
||||
value: 7.94,
|
||||
name: "----",
|
||||
uW: false,
|
||||
uG: true,
|
||||
uW: true,
|
||||
oW: true,
|
||||
oG: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: 0,
|
||||
name: "------------------",
|
||||
uG: true,
|
||||
value: 7.94,
|
||||
name: "----",
|
||||
uW: true,
|
||||
uG: true,
|
||||
oW: true,
|
||||
oG: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: 0,
|
||||
name: "------------------",
|
||||
uG: true,
|
||||
value: 6.13,
|
||||
name: "----",
|
||||
uW: true,
|
||||
uG: true,
|
||||
oW: true,
|
||||
oG: true,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: 0,
|
||||
name: "------------------",
|
||||
uG: true,
|
||||
value: 8.77,
|
||||
name: "----",
|
||||
uW: true,
|
||||
oW: true,
|
||||
uG: true,
|
||||
oW: false,
|
||||
oG: true,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
value: 0,
|
||||
name: "------------------",
|
||||
uG: true,
|
||||
value: 10.59,
|
||||
name: "----",
|
||||
uW: true,
|
||||
uG: true,
|
||||
oW: true,
|
||||
oG: true,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
value: 0,
|
||||
name: "------------------",
|
||||
uG: true,
|
||||
value: 15.11,
|
||||
name: "----",
|
||||
uW: true,
|
||||
oW: true,
|
||||
uG: true,
|
||||
oW: false,
|
||||
oG: true,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-gray-100 min-h-screen p-8">
|
||||
<h1 className="text-2xl font-bold mb-4">Analoge Eingänge</h1>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{inputs.map((input) => (
|
||||
<div key={input.id} className="bg-white rounded-lg shadow-lg p-6">
|
||||
<div className="flex justify-between items-center bg-blue-500 text-white rounded-t-lg p-4">
|
||||
<h2 className="text-lg">XIO-PM {input.id}</h2>
|
||||
<button
|
||||
className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded"
|
||||
onClick={() => setActiveConfig(input.id)}
|
||||
>
|
||||
Online
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<table className="min-w-full bg-white border border-gray-300">
|
||||
<thead>
|
||||
<tr className="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
|
||||
<th className="py-3 px-4 text-center">Eingang</th>
|
||||
<th className="py-3 px-4 text-center">Wert</th>
|
||||
<th className="py-3 px-4 text-left">Bezeichnung</th>
|
||||
<th className="py-3 px-4 text-center">uG</th>
|
||||
<th className="py-3 px-4 text-center">uW</th>
|
||||
<th className="py-3 px-4 text-center">oW</th>
|
||||
<th className="py-3 px-4 text-center">oG</th>
|
||||
<th className="py-3 px-4 text-center">Konfig</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-gray-600 text-sm">
|
||||
<tr className="border-b border-gray-200">
|
||||
<td className="py-3 px-4 text-center">{input.id}</td>
|
||||
<td className="py-3 px-4 text-right">{input.value}</td>
|
||||
<td className="py-3 px-4">{input.name}</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<i
|
||||
className={`bi bi-circle-fill text-${
|
||||
input.uG ? "green" : "gray"
|
||||
}-500`}
|
||||
></i>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<i
|
||||
className={`bi bi-circle-fill text-${
|
||||
input.uW ? "green" : "gray"
|
||||
}-500`}
|
||||
></i>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<i
|
||||
className={`bi bi-circle-fill text-${
|
||||
input.oW ? "green" : "gray"
|
||||
}-500`}
|
||||
></i>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<i
|
||||
className={`bi bi-circle-fill text-${
|
||||
input.oG ? "green" : "gray"
|
||||
}-500`}
|
||||
></i>
|
||||
</td>
|
||||
<td className="py-3 px-4 text-center">
|
||||
<button
|
||||
className="text-blue-500"
|
||||
onClick={() => setActiveConfig(input.id)}
|
||||
>
|
||||
<i className="bi bi-gear-fill"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Modal für Konfiguration */}
|
||||
{activeConfig && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white p-8 rounded-lg shadow-lg w-96">
|
||||
<h2 className="text-xl font-bold mb-4">
|
||||
Konfiguration - XIO-PM {activeConfig}
|
||||
</h2>
|
||||
<button
|
||||
className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
|
||||
onClick={() => setActiveConfig(null)}
|
||||
>
|
||||
<i className="bi bi-x-lg"></i>
|
||||
</button>
|
||||
{/* Konfigurationsformular hier einfügen */}
|
||||
<form>
|
||||
<div className="mb-4">
|
||||
<label
|
||||
className="block text-gray-700 text-sm font-bold mb-2"
|
||||
htmlFor="bezeichnung"
|
||||
>
|
||||
Bezeichnung
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="bezeichnung"
|
||||
name="bezeichnung"
|
||||
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
placeholder="Bezeichnung eingeben"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label
|
||||
className="block text-gray-700 text-sm font-bold mb-2"
|
||||
htmlFor="ug"
|
||||
>
|
||||
Unterer Grenzwert
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="ug"
|
||||
name="ug"
|
||||
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
|
||||
placeholder="Wert eingeben"
|
||||
/>
|
||||
</div>
|
||||
{/* Weitere Felder hier hinzufügen */}
|
||||
<button
|
||||
type="button"
|
||||
className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
|
||||
onClick={() => setActiveConfig(null)}
|
||||
>
|
||||
Speichern
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div className="flex flex-col h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-6vh)] xl:h-[calc(100vh-10vh-6vh)] bg-gray-100">
|
||||
{/* Main Content */}
|
||||
<div className="flex-grow grid grid-cols-2 gap-4 p-4">
|
||||
{/* Erste Box */}
|
||||
<div className="border rounded-lg shadow-md p-2 bg-white">
|
||||
<h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
|
||||
<table className="w-full text-xs text-left ">
|
||||
<thead className="bg-gray-100 text-gray-700">
|
||||
<tr>
|
||||
<th className="px-1 py-1">Eingang</th>
|
||||
<th className="px-1 py-1">Wert</th>
|
||||
<th className="px-1 py-1">Bezeichnung</th>
|
||||
<th className="px-1 py-1 text-center">uW</th>
|
||||
<th className="px-1 py-1 text-center">uG</th>
|
||||
<th className="px-1 py-1 text-center">oW</th>
|
||||
<th className="px-1 py-1 text-center">oG</th>
|
||||
<th className="px-1 py-1 text-center">Aktion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{inputs.map((input) => (
|
||||
<tr key={input.id} className="border-t">
|
||||
<td className="px-1 py-1">{input.id}</td>
|
||||
<td className="px-1 py-1">{input.value}</td>
|
||||
<td className="px-1 py-1">{input.name}</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span
|
||||
className={input.uW ? "text-green-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span
|
||||
className={input.uG ? "text-green-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span
|
||||
className={input.oW ? "text-orange-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span
|
||||
className={input.oG ? "text-green-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<button
|
||||
onClick={() => setActiveConfig(input.id)}
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
<iconify-icon icon="mdi:cog-outline"></iconify-icon>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Zweite Box */}
|
||||
<div className="border rounded-lg shadow-md p-2 bg-white">
|
||||
<h3 className="text-sm font-semibold mb-1">Diagramm</h3>
|
||||
<p>Diagramm wird hier eingefügt</p>
|
||||
</div>
|
||||
|
||||
{/* Dritte Box */}
|
||||
<div className="border rounded-lg shadow-md p-2 bg-white">
|
||||
<h3 className="text-sm font-semibold mb-1">XIO-PM 1</h3>
|
||||
<table className="w-full text-xs text-left">
|
||||
<thead className="bg-gray-100 text-gray-700">
|
||||
<tr>
|
||||
<th className="px-1 py-1">Eingang</th>
|
||||
<th className="px-1 py-1">Wert</th>
|
||||
<th className="px-1 py-1">Bezeichnung</th>
|
||||
<th className="px-1 py-1 text-center">uW</th>
|
||||
<th className="px-1 py-1 text-center">uG</th>
|
||||
<th className="px-1 py-1 text-center">oW</th>
|
||||
<th className="px-1 py-1 text-center">oG</th>
|
||||
<th className="px-1 py-1 text-center">Aktion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{xioPmInputs.map((input) => (
|
||||
<tr key={input.id} className="border-t">
|
||||
<td className="px-1 py-1">{input.id}</td>
|
||||
<td className="px-1 py-1">{input.value}</td>
|
||||
<td className="px-1 py-1">{input.name}</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span
|
||||
className={input.uW ? "text-green-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span
|
||||
className={input.uG ? "text-green-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span
|
||||
className={input.oW ? "text-orange-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<span
|
||||
className={input.oG ? "text-green-500" : "text-gray-400"}
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-1 py-1 text-center">
|
||||
<button
|
||||
onClick={() => setActiveConfig(input.id)}
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
<iconify-icon icon="mdi:cog-outline"></iconify-icon>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Vierte Box */}
|
||||
<div className="border rounded-lg shadow-md p-2 bg-white">
|
||||
<h3 className="text-sm font-semibold mb-1">XIO-PM 2</h3>
|
||||
<p>Inhalt für XIO-PM 2 wird hier eingefügt</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user