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

feat: Tooltip für Eingangszustände eingebaut und versetzt positioniert

Browse Source 
- Tooltip-Text erscheint bei Mouseover über Symbol
- Unterscheidung: Eingang inaktiv (✖), Eingang Aus (● rot), Eingang Ein (● grün)
- Position des Tooltips mit translate-x-4 und translate-y-4 optimiert
This commit is contained in:
ISA
2025-04-24 14:25:49 +02:00
parent 560a5cfd76
commit c60cfa1b92
4 changed files with 38 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/main/einausgaenge/DigitalInputs.tsx
View File

@@ -44,10 +44,27 @@ export default function DigitalInputs({ openInputModal, inputRange }: Props) {
{input.id}
</td>
<td className="px-1 py-1">
{input.status ? (
<span className="text-red-500 text-xs">✕</span>
{input.eingangOffline ? (
<div className="relative group inline-block">
<span className="text-red-500 text-2xl font-bold">✖</span>
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
Eingang inaktiv
</div>
</div>
) : input.status ? (
<div className="relative group inline-block">
<span className="text-red-500 text-2xl">●</span>
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
Eingang Aus
</div>
</div>
) : (
<span className="text-green-500 text-xs">●</span>
<div className="relative group inline-block">
<span className="text-green-500 text-2xl">●</span>
<div className="absolute bottom-full translate-x-4 translate-y-4 w-max bg-gray-400 text-xs text-white rounded opacity-0 group-hover:opacity-100 transition p-1 z-10">
Eingang Ein
</div>
</div>
)}
</td>

4
components/main/einausgaenge/modals/InputModal.tsx
View File

@@ -113,12 +113,12 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
<div className="flex items-center gap-3 text-xl font-semibold col-span-1">
{reduxInput.status ? (
<>
<span className="w-4 h-4 bg-red-500 rounded-full inline-block"></span>
<span className="text-red-500 text-2xl">●</span>
<span className="text-red-600">Aus</span>
</>
) : (
<>
<span className="w-4 h-4 bg-green-500 rounded-full inline-block"></span>
<span className="text-green-500 text-2xl">●</span>
<span className="text-green-600">Ein</span>
</>
)}