From d04489819d40895c807ce2a54dd905fbc5cd7642 Mon Sep 17 00:00:00 2001 From: Marcel Peterkau Date: Fri, 31 May 2024 12:49:38 +0200 Subject: [PATCH] highlite active Faction in WEbUI --- Software/data_src/index.htm | 12 ++++++------ Software/data_src/static/css/custom.css | 21 ++++++++++++++++++++- Software/data_src/static/js/websocket.js | 21 ++++++++++++++++++++- 3 files changed, 46 insertions(+), 8 deletions(-) diff --git a/Software/data_src/index.htm b/Software/data_src/index.htm index 6597724..2ce7558 100644 --- a/Software/data_src/index.htm +++ b/Software/data_src/index.htm @@ -96,14 +96,14 @@
%NAME_FAC_3%
-
... + -
... + -
... +
diff --git a/Software/data_src/static/css/custom.css b/Software/data_src/static/css/custom.css index 5e4b9ca..01b1963 100644 --- a/Software/data_src/static/css/custom.css +++ b/Software/data_src/static/css/custom.css @@ -8438,4 +8438,23 @@ a.text-dark:hover { .navbar-dark.bg-primary { background-color: #111 !important -} \ No newline at end of file +} + +.glow-active-faction { + border: 3px solid #FFD700; /* Goldene Umrandung */ + box-shadow: 0 0 20px #FFD700; /* Leuchtender Glüheffekt */ + animation: glow 1.5s infinite alternate; + border-radius: 10px; /* Abgerundete Ecken */ + margin-bottom: 10px; /* Abstand nach unten */ + } + + @keyframes glow { + from { + box-shadow: 0 0 10px #FFD700; + } + to { + box-shadow: 0 0 20px #FFD700; + } + } + + \ No newline at end of file diff --git a/Software/data_src/static/js/websocket.js b/Software/data_src/static/js/websocket.js index bbfe3dd..cbe1de2 100644 --- a/Software/data_src/static/js/websocket.js +++ b/Software/data_src/static/js/websocket.js @@ -178,9 +178,12 @@ function fillValuesToHTML(dataset) { // Wenn das Element ein Settingsabschnitt-div ist if (dataset[key] == 0) element.style.display = "none"; else element.style.display = ""; - } else if (element.tagName === "DIV") { + } else if (element.tagName === "DIV" || element.tagName === "SPAN") { if (element.classList.contains("format-time")) { element.innerText = formatTime(dataset[key]); + } else if (element.classList.contains("faction-logo")) { + // Faction-Logo-Logik + updateFactionLogo(element, dataset[key]); } else { element.innerText = dataset[key]; } @@ -211,6 +214,22 @@ function formatTime(seconds) { ); } +function updateFactionLogo(element, faction) { + const glowClass = "glow-active-faction"; + const factionClasses = ["faction1", "faction2", "faction3"]; + + factionClasses.forEach((factionClass) => { + if ( + factionClass === "faction" + faction && + element.classList.contains(factionClass) + ) { + element.classList.add(glowClass); + } else { + element.classList.remove(glowClass); + } + }); +} + // Funktion zum Setzen des ausgewählten Werts für Dropdowns function setDropdownValue(selectElement, value) { for (var i = 0; i < selectElement.options.length; i++) {