fix: digitale Ein- und Ausgänge vollständig responsive – Tailwind Breakpoints für Icons und Textgrößen
- Anpassungen an laptop, xl, 2xl eingeführt - Konsistente Darstellung bei Meldungseingängen und Schaltausgängen - Offline-fähige lokale Icon-Imports für alle Symbole
This commit is contained in:
ISA
@@ -21,79 +21,68 @@ export default function DigitalInputs({ openInputModal, inputRange }: Props) {
|
||||
const inputs = digitalInputs.slice(inputRange.start, inputRange.end);
|
||||
|
||||
return (
|
||||
<div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full">
|
||||
<h2 className="text-sm font-bold mb-3 flex items-center laptop:text-xs">
|
||||
<div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full laptop:p-1 xl:p-1">
|
||||
<h2 className="text-sm laptop:text-xs font-bold mb-3 flex items-center">
|
||||
<Icon
|
||||
icon={inputIcon}
|
||||
className="text-littwin-blue mr-2 text-xl laptop:text-lg"
|
||||
className="text-littwin-blue mr-2 text-xl laptop:text-lg xl:text-xl 2xl:text-2xl"
|
||||
/>
|
||||
Meldungseingänge {inputRange.start + 1} – {inputRange.end}
|
||||
</h2>
|
||||
<table className="w-full text-xs border-collapse laptop:text-[10px]">
|
||||
<table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse">
|
||||
<thead className="bg-gray-100 border-b">
|
||||
<tr>
|
||||
<th className="px-1 py-1 text-left laptop:px-0.5 laptop:py-0.5">
|
||||
Eingang
|
||||
</th>
|
||||
<th className="px-1 py-1 text-left laptop:px-0.5 laptop:py-0.5">
|
||||
Zustand
|
||||
</th>
|
||||
<th className="px-1 py-1 text-left laptop:px-0.5 laptop:py-0.5">
|
||||
Bezeichnung
|
||||
</th>
|
||||
<th className="px-1 py-1 text-left laptop:px-0.5 laptop:py-0.5">
|
||||
Aktion
|
||||
</th>
|
||||
<th className="px-1 py-1 text-left">Eingang</th>
|
||||
<th className="px-1 py-1 text-left">Zustand</th>
|
||||
<th className="px-1 py-1 text-left">Bezeichnung</th>
|
||||
<th className="px-1 py-1 text-left">Aktion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{inputs.map((input) => (
|
||||
<tr key={input.id} className="border-b">
|
||||
<td className="flex items-center px-1 py-1 laptop:px-0.5 laptop:py-0.5">
|
||||
<td className="flex items-center px-1 py-1">
|
||||
<Icon
|
||||
icon={loginIcon}
|
||||
className="text-gray-600 mr-1 text-base laptop:text-sm"
|
||||
className="text-gray-600 mr-1 text-base laptop:text-sm xl:text-sm 2xl:text-lg"
|
||||
/>
|
||||
{input.id}
|
||||
</td>
|
||||
<td className="px-1 py-1 laptop:px-0.5 laptop:py-0.5">
|
||||
<td className="px-1 py-1 ">
|
||||
{input.eingangOffline ? (
|
||||
<div className="relative group inline-block">
|
||||
<span className="text-red-500 text-2xl laptop:text-sm font-bold">
|
||||
<span className="text-red-500 text-2xl laptop:text-sm font-bold xl:text-sm ">
|
||||
✖
|
||||
</span>
|
||||
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs laptop:text-[10px] text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max bg-gray-400 text-xs laptop:text-[10px] text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10 xl:text-sm ">
|
||||
Eingang inaktiv
|
||||
</div>
|
||||
</div>
|
||||
) : input.status ? (
|
||||
<div className="relative group inline-block">
|
||||
<span className="text-red-500 text-2xl laptop:text-sm">
|
||||
<span className="text-red-500 text-2xl laptop:text-sm xl:text-sm ">
|
||||
●
|
||||
</span>
|
||||
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs laptop:text-[10px] text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max bg-gray-400 text-xs laptop:text-[10px] text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10 xl:text-sm ">
|
||||
Eingang Aus
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative group inline-block">
|
||||
<span className="text-green-500 text-2xl laptop:text-sm">
|
||||
<span className="text-green-500 text-2xl laptop:text-sm xl:text-sm ">
|
||||
●
|
||||
</span>
|
||||
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs laptop:text-[10px] text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
|
||||
<div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max bg-gray-400 text-xs laptop:text-[10px] text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
|
||||
Eingang Ein
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td className="px-1 py-1 laptop:px-0.5 laptop:py-0.5">
|
||||
{input.label}
|
||||
</td>
|
||||
<td className="px-1 py-1 laptop:px-0.5 laptop:py-0.5">
|
||||
<td className="px-1 py-1">{input.label}</td>
|
||||
<td className="px-1 py-1">
|
||||
<Icon
|
||||
icon={settingsIcon}
|
||||
className="text-gray-400 text-base cursor-pointer"
|
||||
className="text-gray-400 text-base laptop:text-sm xl:text-sm 2xl:text-lg cursor-pointer"
|
||||
onClick={() => openInputModal(input)}
|
||||
/>
|
||||
</td>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
"use client"; // /components/main/einausgaenge/DigitalOutputs.tsx
|
||||
"use client";
|
||||
// /components/main/einausgaenge/DigitalOutputs.tsx
|
||||
import React from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { RootState } from "../../../redux/store";
|
||||
@@ -14,11 +15,14 @@ export default function DigitalOutputs({ openOutputModal }) {
|
||||
|
||||
return (
|
||||
<div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full h-fit max-h-[400px] overflow-auto">
|
||||
<h2 className="text-sm font-bold mb-3 flex items-center">
|
||||
<Icon icon={outputIcon} className="text-littwin-blue mr-2 text-xl" />
|
||||
<h2 className="text-sm laptop:text-xs font-bold mb-3 flex items-center">
|
||||
<Icon
|
||||
icon={outputIcon}
|
||||
className="text-littwin-blue mr-2 text-xl laptop:text-lg xl:text-xl 2xl:text-2xl"
|
||||
/>
|
||||
Digitale Ausgänge
|
||||
</h2>
|
||||
<table className="w-full text-xs border-collapse bg-white rounded-lg">
|
||||
<table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse bg-white rounded-lg">
|
||||
<thead className="bg-gray-100 border-b">
|
||||
<tr>
|
||||
<th className="px-1 py-1 text-left">Ausgang</th>
|
||||
@@ -33,15 +37,15 @@ export default function DigitalOutputs({ openOutputModal }) {
|
||||
<td className="flex items-center px-1 py-1">
|
||||
<Icon
|
||||
icon={outputIcon}
|
||||
className="text-gray-600 mr-1 text-base"
|
||||
className="text-gray-600 mr-1 text-base laptop:text-sm xl:text-base 2xl:text-lg"
|
||||
/>
|
||||
{output.id}
|
||||
</td>
|
||||
<td className="px-1 py-1">{output.label}</td>
|
||||
<td className="px-1 py-1">
|
||||
<Icon
|
||||
icon="ion:switch"
|
||||
className={`text-base ${
|
||||
icon={switchIcon}
|
||||
className={`text-base laptop:text-sm xl:text-base 2xl:text-lg ${
|
||||
output.status
|
||||
? "text-littwin-blue"
|
||||
: "text-gray-500 scale-x-[-1]"
|
||||
@@ -51,7 +55,7 @@ export default function DigitalOutputs({ openOutputModal }) {
|
||||
<td className="px-1 py-1">
|
||||
<Icon
|
||||
icon={settingsIcon}
|
||||
className="text-gray-400 text-base cursor-pointer"
|
||||
className="text-gray-400 text-base laptop:text-sm xl:text-base 2xl:text-lg cursor-pointer"
|
||||
onClick={() => openOutputModal(output)}
|
||||
/>
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user