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

Analoger Eingänge

Browse Source
This commit is contained in:
Ismail Ali
2025-01-23 23:03:28 +01:00
parent d077bec9e0
commit beb476f50c
3 changed files with 200 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Header.jsx
View File

@@ -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 "> <header className="bg-gray-300 flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-black ">
<div <div
className="absolute transform -translate-y-1/2 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%]" top-[90%] sm:top-[90%] md:top-[90%] lg:top-[90%] xl:top-[90%]"
style={{ style={{
height: "13vh", // Dynamische Höhe des Containers height: "13vh", // Dynamische Höhe des Containers

1
components/Navigation.jsx
View File

@@ -21,6 +21,7 @@ function Navigation() {
{ name: "Übersicht", path: "/dashboard" }, { name: "Übersicht", path: "/dashboard" },
{ name: "Kabelüberwachung", path: "/kabelueberwachung" }, { name: "Kabelüberwachung", path: "/kabelueberwachung" },
{ name: "Ein- und Ausgänge", path: "/einausgaenge" }, { name: "Ein- und Ausgänge", path: "/einausgaenge" },
{ name: "Analoge Eingänge", path: "/analogeEingaenge" },
// Weitere Menüpunkte hier // Weitere Menüpunkte hier
]; ];

359
pages/analogeEingaenge.js
View File

@@ -4,217 +4,254 @@ import React, { useState } from "react";
function AnalogeEingaenge() { function AnalogeEingaenge() {
const [activeConfig, setActiveConfig] = useState(null); const [activeConfig, setActiveConfig] = useState(null);
// Beispiel-Daten, du kannst die Daten dynamisch laden // Mock-Daten für die analogen Eingänge
const inputs = [ 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, id: 1,
value: 0, value: 1.34,
name: "------------------", name: "Test1",
uG: true,
uW: true, uW: true,
oW: true, uG: true,
oW: false,
oG: true, oG: true,
}, },
{ {
id: 2, id: 2,
value: 0, value: 7.94,
name: "------------------", name: "----",
uG: true,
uW: true, uW: true,
uG: true,
oW: true, oW: true,
oG: true, oG: true,
}, },
{ {
id: 3, id: 3,
value: 0, value: 7.94,
name: "------------------", name: "----",
uW: false,
uG: true, uG: true,
uW: true,
oW: true, oW: true,
oG: true, oG: true,
}, },
{ {
id: 4, id: 4,
value: 0, value: 7.94,
name: "------------------", name: "----",
uG: true,
uW: true, uW: true,
uG: true,
oW: true, oW: true,
oG: true, oG: true,
}, },
{ {
id: 5, id: 5,
value: 0, value: 6.13,
name: "------------------", name: "----",
uG: true,
uW: true, uW: true,
uG: true,
oW: true, oW: true,
oG: true, oG: true,
}, },
{ {
id: 6, id: 6,
value: 0, value: 8.77,
name: "------------------", name: "----",
uG: true,
uW: true, uW: true,
oW: true, uG: true,
oW: false,
oG: true, oG: true,
}, },
{ {
id: 7, id: 7,
value: 0, value: 10.59,
name: "------------------", name: "----",
uG: true,
uW: true, uW: true,
uG: true,
oW: true, oW: true,
oG: true, oG: true,
}, },
{ {
id: 8, id: 8,
value: 0, value: 15.11,
name: "------------------", name: "----",
uG: true,
uW: true, uW: true,
oW: true, uG: true,
oW: false,
oG: true, oG: true,
}, },
]; ];
return ( return (
<div className="bg-gray-100 min-h-screen p-8"> <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">
<h1 className="text-2xl font-bold mb-4">Analoge Eingänge</h1> {/* Main Content */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="flex-grow grid grid-cols-2 gap-4 p-4">
{inputs.map((input) => ( {/* Erste Box */}
<div key={input.id} className="bg-white rounded-lg shadow-lg p-6"> <div className="border rounded-lg shadow-md p-2 bg-white">
<div className="flex justify-between items-center bg-blue-500 text-white rounded-t-lg p-4"> <h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
<h2 className="text-lg">XIO-PM {input.id}</h2> <table className="w-full text-xs text-left ">
<button <thead className="bg-gray-100 text-gray-700">
className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded" <tr>
onClick={() => setActiveConfig(input.id)} <th className="px-1 py-1">Eingang</th>
> <th className="px-1 py-1">Wert</th>
Online <th className="px-1 py-1">Bezeichnung</th>
</button> <th className="px-1 py-1 text-center">uW</th>
</div> <th className="px-1 py-1 text-center">uG</th>
<div className="p-4"> <th className="px-1 py-1 text-center">oW</th>
<table className="min-w-full bg-white border border-gray-300"> <th className="px-1 py-1 text-center">oG</th>
<thead> <th className="px-1 py-1 text-center">Aktion</th>
<tr className="bg-gray-200 text-gray-600 uppercase text-sm leading-normal"> </tr>
<th className="py-3 px-4 text-center">Eingang</th> </thead>
<th className="py-3 px-4 text-center">Wert</th> <tbody>
<th className="py-3 px-4 text-left">Bezeichnung</th> {inputs.map((input) => (
<th className="py-3 px-4 text-center">uG</th> <tr key={input.id} className="border-t">
<th className="py-3 px-4 text-center">uW</th> <td className="px-1 py-1">{input.id}</td>
<th className="py-3 px-4 text-center">oW</th> <td className="px-1 py-1">{input.value}</td>
<th className="py-3 px-4 text-center">oG</th> <td className="px-1 py-1">{input.name}</td>
<th className="py-3 px-4 text-center">Konfig</th> <td className="px-1 py-1 text-center">
</tr> <span
</thead> className={input.uW ? "text-green-500" : "text-gray-400"}
<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> </span>
<td className="py-3 px-4 text-right">{input.value}</td> </td>
<td className="py-3 px-4">{input.name}</td> <td className="px-1 py-1 text-center">
<td className="py-3 px-4 text-center"> <span
<i className={input.uG ? "text-green-500" : "text-gray-400"}
className={`bi bi-circle-fill text-${ >
input.uG ? "green" : "gray" ●
}-500`} </span>
></i> </td>
</td> <td className="px-1 py-1 text-center">
<td className="py-3 px-4 text-center"> <span
<i className={input.oW ? "text-orange-500" : "text-gray-400"}
className={`bi bi-circle-fill text-${ >
input.uW ? "green" : "gray" ●
}-500`} </span>
></i> </td>
</td> <td className="px-1 py-1 text-center">
<td className="py-3 px-4 text-center"> <span
<i className={input.oG ? "text-green-500" : "text-gray-400"}
className={`bi bi-circle-fill text-${ >
input.oW ? "green" : "gray" ●
}-500`} </span>
></i> </td>
</td> <td className="px-1 py-1 text-center">
<td className="py-3 px-4 text-center"> <button
<i onClick={() => setActiveConfig(input.id)}
className={`bi bi-circle-fill text-${ className="text-blue-500 hover:text-blue-700"
input.oG ? "green" : "gray" >
}-500`} <iconify-icon icon="mdi:cog-outline"></iconify-icon>
></i> </button>
</td> </td>
<td className="py-3 px-4 text-center"> </tr>
<button ))}
className="text-blue-500" </tbody>
onClick={() => setActiveConfig(input.id)} </table>
>
<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> </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> </div>
); );
} }