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

241
apiMockData/SERVICE/digitaleEingaengeMockData.js
View File

@@ -1,242 +1,31 @@
// auto-generated from update API // auto-generated from update API
var win_de_state = [ var win_de_state = [
1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
1, 0, 0, 0, 0, 0, 0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]; ];
var win_de_invert = [ var win_de_invert = [
0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0,
1,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]; ];
var win_de_counter = [ var win_de_counter = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]; ];
var win_de_time_filter = [ var win_de_time_filter = [
2000, 2000, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]; ];
var win_de_weighting = [ var win_de_weighting = [
1000, 1000, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]; ];
var win_de_counter_active = [ var win_de_counter_active = [
1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]; ];
var win_de_offline = [ var win_de_offline = [
0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]; ];
var win_de_label = [ var win_de_label = [
"DE1", "DE1",
@@ -270,5 +59,5 @@ var win_de_label = [
"DE29", "DE29",
"DE30", "DE30",
"DE31", "DE31",
"DE32" "DE32",
]; ];

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

@@ -44,10 +44,27 @@ export default function DigitalInputs({ openInputModal, inputRange }: Props) {
{input.id} {input.id}
</td> </td>
<td className="px-1 py-1"> <td className="px-1 py-1">
{input.status ? ( {input.eingangOffline ? (
<span className="text-red-500 text-xs">✕</span> <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> </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"> <div className="flex items-center gap-3 text-xl font-semibold col-span-1">
{reduxInput.status ? ( {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="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> <span className="text-green-600">Ein</span>
</> </>
)} )}

2
config/webVersion.ts
View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/ */
const webVersion = "1.6.271"; const webVersion = "1.6.272";
export default webVersion; export default webVersion;