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

Struktur in components verbessert

Browse Source
This commit is contained in:
Ismail Ali
2025-02-13 19:32:01 +01:00
parent 876af27f5e
commit 1768564d4b
18 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
components/main/analogeEingaenge/AnalogeEingaengeComponent.tsx Normal file
View File

@@ -0,0 +1,79 @@
"use client"; // components/modules/AnalogeEingaengeComponent.tsx
import React, { useState } from "react";
import { Icon } from "@iconify/react";
import { analogInputs } from "../../../data/mockdata/analogInputs";
const AnalogeEingaengeComponent = () => {
const [activeConfig, setActiveConfig] = useState<number | null>(null);
return (
<div className="border rounded-lg shadow-md laptop:p-4 p-6 bg-white flex flex-col h-full">
<h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
<div className="overflow-auto flex-grow">
<table className="table-auto w-full h-full text-sm text-left border-collapse">
<thead className="bg-gray-100 text-gray-700">
<tr>
<th className="px-2 py-1 whitespace-nowrap">Eingang</th>
<th className="px-2 py-1 whitespace-nowrap">Wert</th>
<th className="px-2 py-1 whitespace-nowrap">Bezeichnung</th>
<th className="px-2 py-1 text-center whitespace-nowrap">uW</th>
<th className="px-2 py-1 text-center whitespace-nowrap">uG</th>
<th className="px-2 py-1 text-center whitespace-nowrap">oW</th>
<th className="px-2 py-1 text-center whitespace-nowrap">oG</th>
<th className="px-2 py-1 text-center whitespace-nowrap">
Aktion
</th>
</tr>
</thead>
<tbody className="text-xs text-gray-600">
{analogInputs.map((input) => (
<tr key={input.id} className="border-t ">
<td className="px-2 py-1">{input.id}</td>
<td className="px-2 py-1">{input.value}</td>
<td className="px-2 py-1">{input.name}</td>
<td className="px-2 py-1 text-center">
<span
className={input.uW ? "text-green-500" : "text-gray-400"}
>
●
</span>
</td>
<td className="px-2 py-1 text-center">
<span
className={input.uG ? "text-green-500" : "text-gray-400"}
>
●
</span>
</td>
<td className="px-2 py-1 text-center">
<span
className={input.oW ? "text-orange-500" : "text-gray-400"}
>
●
</span>
</td>
<td className="px-2 py-1 text-center">
<span
className={input.oG ? "text-green-500" : "text-gray-400"}
>
●
</span>
</td>
<td className="px-2 py-1 text-center">
<button
onClick={() => setActiveConfig(input.id)}
className="text-blue-500 hover:text-blue-700"
>
<Icon icon="mdi:cog-outline" />
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
};
export default AnalogeEingaengeComponent;

79
components/main/analogeEingaenge/XioPM.tsx Normal file
View File

@@ -0,0 +1,79 @@
"use client";
import React from "react";
import { Icon } from "@iconify/react";
interface InputData {
id: number;
value: number;
name: string;
uW: boolean;
uG: boolean;
oW: boolean;
oG: boolean;
}
interface XioPmProps {
title: string;
data: InputData[];
onConfigClick: (id: number) => void;
}
const XioPM: React.FC<XioPmProps> = ({ title, data, onConfigClick }) => (
<div className="border rounded-lg shadow-md p-6 laptop:p-2 laptop:scale-y-90 bg-white">
<h3 className="text-sm font-semibold mb-1">{title}</h3>
<table className="w-full h-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>
{data.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.toFixed(2)}</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={() => onConfigClick(input.id)}
className="text-blue-500 hover:text-blue-700"
>
<Icon icon="mdi:cog-outline" />
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
export default XioPM;