From 0b2d10e7b75e8682660d5424b421a06a3638b0ad Mon Sep 17 00:00:00 2001
From: MaxJa4 <74194322+MaxJa4@users.noreply.github.com>
Date: Wed, 24 Jan 2024 10:48:28 +0100
Subject: [PATCH] Enhanced icons and tooltips.

---
 static/index.js                            |  8 ++++++--
 templates/components/bottom_controls.html  | 12 ++++++------
 templates/components/home_clan_bar.html    | 20 ++++++++++++++------
 templates/components/home_player_list.html | 15 ++++++++-------
 templates/components/opp_clan_bar.html     | 15 +++++++++------
 templates/components/opp_player_list.html  | 20 +++++++++++++-------
 templates/index.html                       |  4 ++--
 templates/login.html                       |  2 +-
 templates/modals/add_player.html           |  1 +
 templates/modals/settings.html             |  2 +-
 templates/register.html                    |  2 +-
 templates/shards/player_list_item.html     | 12 ++++++------
 12 files changed, 68 insertions(+), 45 deletions(-)

diff --git a/static/index.js b/static/index.js
index a1009b0..f1e8fe9 100644
--- a/static/index.js
+++ b/static/index.js
@@ -1,9 +1,13 @@
 document.addEventListener('DOMContentLoaded', function() {
-    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    initTooltips(document);
+});
+
+function initTooltips(elementRoot) {
+    const tooltipTriggerList = elementRoot.querySelectorAll('[data-bs-action="tooltip"]');
     tooltipTriggerList.forEach((elem) => {
         new bootstrap.Tooltip(elem);
     });
-});
+}
 
 function setupClanButtons(dropdownId, delBtnId, editBtnId) {
     const dropdown = document.getElementById(dropdownId);
diff --git a/templates/components/bottom_controls.html b/templates/components/bottom_controls.html
index 78d3ebb..04d6f0d 100644
--- a/templates/components/bottom_controls.html
+++ b/templates/components/bottom_controls.html
@@ -3,12 +3,12 @@
 <div class="row justify-content-between border-top pt-4 position-relative mb-5">
     <div class="col-auto position-absolute start-0">
         <div class="btn-toolbar" role="toolbar">
-            <a class="btn btn-lg btn-outline-secondary text-secondary-emphasis me-2" href="/logout">
-                <i class="bi bi-door-closed" data-bs-toggle="tooltip" data-bs-title="Abmelden"></i>
+            <a class="btn btn-lg btn-outline-secondary text-secondary-emphasis me-2" href="/logout" data-bs-action="tooltip" data-bs-title="Abmelden">
+                <i class="bi bi-door-closed-fill"></i>
             </a>
             <!--
             <button class="btn btn-lg btn-outline-secondary text-secondary-emphasis me-2" data-bs-toggle="modal" data-bs-target="#settingsModal">
-                <i class="bi bi-gear-fill" data-bs-toggle="tooltip" data-bs-title="Einstellungen"></i>
+                <i class="bi bi-gear-fill" data-bs-action="tooltip" data-bs-title="Einstellungen"></i>
             </button>
             -->
             {{ if (eq .UserRole "ADMIN") }}
@@ -63,14 +63,14 @@
         </div>
     </div>
     <div class="col-auto position-absolute start-50 translate-middle-x">
-        <button class="btn btn-lg btn-primary" id="fullCalcBtn" data-bs-toggle="modal" data-bs-target="#fullCalcModal">
+        <button class="btn btn-lg btn-primary" id="fullCalcBtn" data-bs-toggle="modal" data-bs-target="#fullCalcModal" data-bs-action="tooltip" data-bs-title="Ausgewählte Spieler berechnen">
             <i class="bi bi-calculator-fill me-2"></i>
             Berechnen
         </button>
     </div>
     <div class="col-auto position-absolute end-0">
-        <button class="btn btn-lg btn-outline-secondary text-secondary-emphasis" id="singleCalcBtn" onclick="showSingleCalcDialog(this)">
-            <i class="bi bi-person me-2"></i>
+        <button class="btn btn-lg btn-outline-secondary text-secondary-emphasis" id="singleCalcBtn" onclick="showSingleCalcDialog(this)" data-bs-action="tooltip" data-bs-title="Einzelnen Spieler berechnen">
+            <i class="bi bi-person-fill me-2"></i>
             Einzel-Abfrage
         </button>
     </div>
diff --git a/templates/components/home_clan_bar.html b/templates/components/home_clan_bar.html
index adf54aa..034c7e5 100644
--- a/templates/components/home_clan_bar.html
+++ b/templates/components/home_clan_bar.html
@@ -11,14 +11,17 @@
                 <!-- Options will be loaded dynamically -->
             </select>
             {{ if not (eq .UserRole "READER") }}
-                <button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="home-delete" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#deleteClanModal" disabled>
-                    <i class="bi bi-trash3" data-bs-toggle="tooltip" data-bs-title="Clan löschen"></i>
+                <button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="home-delete"
+                        data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#deleteClanModal" data-bs-action="tooltip" data-bs-title="Clan löschen" disabled>
+                    <i class="bi bi-trash3-fill"></i>
                 </button>
-                <button class="btn btn-lg btn-outline-secondary text-primary bg-secondary-subtle" type="button" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#editClanModal" id="home-edit" disabled>
-                    <i class="bi bi-pencil-fill" data-bs-toggle="tooltip" data-bs-title="Clan bearbeiten"></i>
+                <button class="btn btn-lg btn-outline-secondary text-primary bg-secondary-subtle" type="button" id="home-edit"
+                        data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#editClanModal" data-bs-action="tooltip" data-bs-title="Clan bearbeiten" disabled>
+                    <i class="bi bi-pencil-fill"></i>
                 </button>
-                <button class="btn btn-lg btn-outline-secondary text-success" type="button" data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#addClanModal" id="home-add">
-                    <i class="bi bi-plus-lg" data-bs-toggle="tooltip" data-bs-title="Clan hinzufügen"></i>
+                <button class="btn btn-lg btn-outline-secondary text-success" type="button" id="home-add"
+                        data-bs-toggle="modal" data-bs-list="#home-clan" data-bs-target="#addClanModal" data-bs-action="tooltip" data-bs-title="Clan hinzufügen">
+                    <i class="bi bi-plus-lg"></i>
                 </button>
             {{ end }}
         </div>
@@ -28,6 +31,11 @@
 <script lang="javascript">
     document.addEventListener('DOMContentLoaded', function() {
         setupClanButtons('home-clan', 'home-delete', 'home-edit');
+
+        const homePlayerList = document.getElementById('home-player-list');
+        homePlayerList.addEventListener('htmx:afterSwap', function() {
+            initTooltips(homePlayerList);
+        });
     });
 </script>
 
diff --git a/templates/components/home_player_list.html b/templates/components/home_player_list.html
index 6cee9e3..6755518 100644
--- a/templates/components/home_player_list.html
+++ b/templates/components/home_player_list.html
@@ -8,21 +8,22 @@
     </div>
     <div class="col-auto ps-0">
         <div class="btn-group-vertical btn-group-lg" role="group">
-            <button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="selectAllPlayers('home-player-list')">
-                <i class="bi bi-check-square fs-4" data-bs-toggle="tooltip" data-bs-title="Alle auswählen"></i>
+            <button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="selectAllPlayers('home-player-list')" data-bs-action="tooltip" data-bs-title="Alle auswählen">
+                <i class="bi bi-check-square fs-4"></i>
             </button>
-            <button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="deselectAllPlayers('home-player-list')">
-                <i class="bi bi-square fs-4" data-bs-toggle="tooltip" data-bs-title="Nichts auswählen"></i>
+            <button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="deselectAllPlayers('home-player-list')" data-bs-action="tooltip" data-bs-title="Nichts auswählen">
+                <i class="bi bi-square fs-4"></i>
             </button>
         </div>
         {{ if not (eq .UserRole "READER") }}
             <br>
-            <button type="button" class="btn btn-outline-secondary text-success px-3 mt-2 bg-secondary-subtle" id="home-player-add" data-bs-toggle="modal" data-bs-list="#home-player-list" data-bs-target="#addPlayerModal" disabled>
-                <i class="bi bi-person-add fs-4" data-bs-toggle="tooltip" data-bs-title="Spieler hinzufügen"></i>
+            <button type="button" class="btn btn-outline-secondary text-success px-3 mt-2 bg-secondary-subtle" id="home-player-add"
+                    data-bs-toggle="modal" data-bs-list="#home-player-list" data-bs-target="#addPlayerModal" data-bs-action="tooltip" data-bs-title="Spieler hinzufügen" disabled>
+                <i class="bi bi-person-fill-add fs-4"></i>
             </button>
         {{ end }}
         <br>
-        <div class="vstack text-center border border-secondary rounded mt-2" data-bs-toggle="tooltip" data-bs-title="Ausgewählte Spieler">
+        <div class="vstack text-center border border-secondary rounded mt-2" data-bs-action="tooltip" data-bs-title="Ausgewählte Spieler">
             <i class="bi bi-ui-checks fs-4 mt-2 mb-1"></i>
             <span class="badge fs-5 mb-2" id="home-player-selected">0</span>
         </div>
diff --git a/templates/components/opp_clan_bar.html b/templates/components/opp_clan_bar.html
index 5a58096..f4265b4 100644
--- a/templates/components/opp_clan_bar.html
+++ b/templates/components/opp_clan_bar.html
@@ -10,14 +10,17 @@
                 <option disabled selected value>Auswählen...</option>
             </select>
             {{ if not (eq .UserRole "READER") }}
-                <button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="opponent-delete" data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#deleteClanModal" disabled>
-                    <i class="bi bi-trash3" data-bs-toggle="tooltip" data-bs-title="Clan löschen"></i>
+                <button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="opponent-delete"
+                        data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#deleteClanModal" data-bs-action="tooltip" data-bs-title="Clan löschen" disabled>
+                    <i class="bi bi-trash3-fill"></i>
                 </button>
-                <button class="btn btn-lg btn-outline-secondary text-primary bg-secondary-subtle" type="button" data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#editClanModal" id="opponent-edit" disabled>
-                    <i class="bi bi-pencil-fill" data-bs-toggle="tooltip" data-bs-title="Clan bearbeiten"></i>
+                <button class="btn btn-lg btn-outline-secondary text-primary bg-secondary-subtle" type="button" id="opponent-edit"
+                        data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#editClanModal" data-bs-action="tooltip" data-bs-title="Clan bearbeiten" disabled>
+                    <i class="bi bi-pencil-fill"></i>
                 </button>
-                <button class="btn btn-lg btn-outline-secondary text-success" type="button" data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#addClanModal" id="opponent-add">
-                    <i class="bi bi-plus-lg" data-bs-toggle="tooltip" data-bs-title="Clan hinzufügen"></i>
+                <button class="btn btn-lg btn-outline-secondary text-success" type="button" id="opponent-add"
+                        data-bs-toggle="modal" data-bs-list="#opponent-clan" data-bs-target="#addClanModal" data-bs-action="tooltip" data-bs-title="Clan hinzufügen">
+                    <i class="bi bi-plus-lg"></i>
                 </button>
             {{ end }}
         </div>
diff --git a/templates/components/opp_player_list.html b/templates/components/opp_player_list.html
index 97119e7..dbeebb0 100644
--- a/templates/components/opp_player_list.html
+++ b/templates/components/opp_player_list.html
@@ -8,21 +8,22 @@
         </div>
         <div class="col-auto ps-0">
             <div class="btn-group-vertical btn-group-lg" role="group">
-                <button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="selectAllPlayers('opponent-player-list')">
-                    <i class="bi bi-check-square fs-4" data-bs-toggle="tooltip" data-bs-title="Alle auswählen"></i>
+                <button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="selectAllPlayers('opponent-player-list')" data-bs-action="tooltip" data-bs-title="Alle auswählen">
+                    <i class="bi bi-check-square fs-4"></i>
                 </button>
-                <button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="deselectAllPlayers('opponent-player-list')">
-                    <i class="bi bi-square fs-4" data-bs-toggle="tooltip" data-bs-title="Nichts auswählen"></i>
+                <button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="deselectAllPlayers('opponent-player-list')" data-bs-action="tooltip" data-bs-title="Nichts auswählen">
+                    <i class="bi bi-square fs-4"></i>
                 </button>
             </div>
             {{ if not (eq .UserRole "READER") }}
                 <br>
-                <button type="button" class="btn btn-outline-secondary text-success px-3 mt-2 bg-secondary-subtle" id="opponent-player-add" data-bs-toggle="modal" data-bs-list="#opponent-player-list" data-bs-target="#addPlayerModal" disabled>
-                    <i class="bi bi-person-add fs-4" data-bs-toggle="tooltip" data-bs-title="Spieler hinzufügen"></i>
+                <button type="button" class="btn btn-outline-secondary text-success px-3 mt-2 bg-secondary-subtle" id="opponent-player-add"
+                        data-bs-toggle="modal" data-bs-list="#opponent-player-list" data-bs-target="#addPlayerModal" data-bs-action="tooltip" data-bs-title="Spieler hinzufügen" disabled>
+                    <i class="bi bi-person-fill-add fs-4"></i>
                 </button>
             {{ end }}
             <br>
-            <div class="vstack text-center border border-secondary rounded mt-2" data-bs-toggle="tooltip" data-bs-title="Ausgewählte Spieler">
+            <div class="vstack text-center border border-secondary rounded mt-2" data-bs-action="tooltip" data-bs-title="Ausgewählte Spieler">
                 <i class="bi bi-ui-checks fs-4 mt-2 mb-1"></i>
                 <span class="badge fs-5 mb-2" id="opponent-player-selected">0</span>
             </div>
@@ -32,6 +33,11 @@
     <script lang="javascript">
         document.addEventListener('DOMContentLoaded', function() {
             setupPlayerButtons('opponent-clan', 'opponent-player-list', 'opponent-player-add');
+
+            const oppPlayerList = document.getElementById('opponent-player-list');
+            oppPlayerList.addEventListener('htmx:afterSwap', function() {
+                initTooltips(oppPlayerList);
+            });
         });
     </script>
 
diff --git a/templates/index.html b/templates/index.html
index 2fe9fb1..b1f06d4 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -8,7 +8,7 @@
     <div class="row">
         <!-- Home-Clan Column -->
         <div class="col-md-6 d-flex flex-column border-end px-3 pb-4">
-            <h4 class="text-center mt-2 pb-3 mb-3 border-bottom"><i class="bi bi-people me-3"></i>Heim-Team</h4>
+            <h4 class="text-center mt-2 pb-3 mb-3 border-bottom text-primary"><i class="bi bi-people-fill me-3"></i>Heim-Team</h4>
             <!-- Clan Selection -->
             {{ template "home_clan_bar" . }}
 
@@ -18,7 +18,7 @@
 
         <!-- Opponent-Clan Column -->
         <div class="col-md-6 d-flex flex-column px-3 pb-4">
-            <h4 class="text-center mt-2 pb-3 mb-3 border-bottom"><i class="bi bi-people me-3"></i>Gegner-Team</h4>
+            <h4 class="text-center mt-2 pb-3 mb-3 border-bottom text-danger"><i class="bi bi-people-fill me-3"></i>Gegner-Team</h4>
             <!-- Clan Selection -->
             {{ template "opp_clan_bar" . }}
 
diff --git a/templates/login.html b/templates/login.html
index 2479e58..9fe3bb2 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -17,7 +17,7 @@
                 <label for="password">Passwort</label>
             </div>
             <button class="btn btn-lg btn-primary mt-4" type="submit"><i class="bi bi-door-open me-3"></i>Anmelden</button>
-            <a class="btn btn-lg btn-outline-primary mt-4 ms-2 position-absolute end-0" href="/register" data-bs-toggle="tooltip" data-bs-title="Zur Registrierung"><i class="bi bi-key"></i></a>
+            <a class="btn btn-lg btn-outline-primary mt-4 ms-2 position-absolute end-0" href="/register" data-bs-action="tooltip" data-bs-title="Zur Registrierung"><i class="bi bi-key"></i></a>
         </form>
         <div id="login-result" class="fs-4 mt-2"></div>
     </div>
diff --git a/templates/modals/add_player.html b/templates/modals/add_player.html
index d883d4f..6ab8b25 100644
--- a/templates/modals/add_player.html
+++ b/templates/modals/add_player.html
@@ -124,6 +124,7 @@
                 errorDiv.innerText = "";
                 errorDiv.style.display = 'none';
                 playerName.classList.remove('is-invalid');
+                initTooltips(playerList);
             });
         }
     });
diff --git a/templates/modals/settings.html b/templates/modals/settings.html
index 6da1ecf..9c0c763 100644
--- a/templates/modals/settings.html
+++ b/templates/modals/settings.html
@@ -22,7 +22,7 @@
                     <input class="form-check-input" type="checkbox" id="settingsSquadColors" value="squadColors" checked>
                     <label class="form-check-label" for="settingsSquadColors">Squad-Farben aktivieren</label>
                 </div>
-                <div class="form-check form-check-inline mt-3 fs-5 visually-hidden" data-bs-toggle="tooltip" data-bs-title="Median zusätzlich berechnen">
+                <div class="form-check form-check-inline mt-3 fs-5 visually-hidden" data-bs-action="tooltip" data-bs-title="Median zusätzlich berechnen">
                     <input class="form-check-input" type="checkbox" id="settingsCalcMedian" value="calcMedian">
                     <label class="form-check-label" for="settingsCalcMedian">Median aktivieren</label>
                 </div>
diff --git a/templates/register.html b/templates/register.html
index 71dd9e4..33efc0c 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -30,7 +30,7 @@
             </div>
         </div>
         <button class="btn btn-lg btn-primary mt-4" type="submit"><i class="bi bi-key me-3"></i>Registrieren</button>
-        <a class="btn btn-lg btn-outline-primary mt-4 ms-2 position-absolute end-0" href="/login" data-bs-toggle="tooltip" data-bs-title="Zurück zur Anmeldung"><i class="bi bi-door-open"></i></a>
+        <a class="btn btn-lg btn-outline-primary mt-4 ms-2 position-absolute end-0" href="/login" data-bs-action="tooltip" data-bs-title="Zurück zur Anmeldung"><i class="bi bi-door-open"></i></a>
     </form>
     <div id="register-result" class="fs-4 mt-2"></div>
 </div>
diff --git a/templates/shards/player_list_item.html b/templates/shards/player_list_item.html
index ea6d8a3..8f99952 100644
--- a/templates/shards/player_list_item.html
+++ b/templates/shards/player_list_item.html
@@ -2,24 +2,24 @@
     <div class="input-group input-group-lg mb-1" data-id="{{ .PlayerID }}">
         <div class="input-group-text py-1 px-2">
             <label>
-                <input class="form-check-input fs-4 border-secondary mt-0" type="checkbox" value="" onchange="updateSelectedPlayers(this)">
+                <input class="form-check-input fs-4 border-secondary mt-1" type="checkbox" value="" onchange="updateSelectedPlayers(this)">
             </label>
         </div>
         <span class="form-control py-2 px-3" style="width: 10em">{{ .PlayerName }}</span>
-        <div class="form-control text-center px-2 text-secondary">
+        <div class="form-control text-center px-2 text-secondary border-start-0">
             <i class="bi bi-trophy me-3 text-warning"></i><span id="quickScore" class="text-secondary-emphasis">{{ .Score }}</span>
         </div>
-        <button type="button" class="btn btn-outline-secondary" hx-get="/score/{{ .PlayerID }}" hx-target="previous #quickScore" onclick="singleCalcSpinner(this)">
-            <i class="bi bi-calculator text-info"></i>
+        <button type="button" class="btn btn-outline-secondary" hx-get="/score/{{ .PlayerID }}" hx-target="previous #quickScore" onclick="singleCalcSpinner(this)" data-bs-action="tooltip" data-bs-title="Schnell-Berechnung">
+            <i class="bi bi-calculator-fill text-warning"></i>
         </button>
         {{ if not (eq .UserRole "READER") }}
             <button class="btn btn-outline-secondary text-secondary-emphasis dropdown-toggle py-1" type="button" data-bs-toggle="dropdown"></button>
             <ul class="dropdown-menu dropdown-menu-end">
                 <li><button class="dropdown-item text-primary fs-5" data-bs-toggle="modal" data-bs-id="{{ .PlayerID }}" data-bs-target="#editPlayerModal">
-                        <i class="bi bi-person-gear fs-4 me-2"></i>Bearbeiten
+                        <i class="bi bi-person-fill-gear fs-4 me-2"></i>Bearbeiten
                 </button></li>
                 <li><button class="dropdown-item text-danger fs-5" data-bs-toggle="modal" data-bs-id="{{ .PlayerID }}" data-bs-target="#deletePlayerModal">
-                        <i class="bi bi-person-dash fs-4 me-2"></i>Löschen
+                        <i class="bi bi-person-fill-dash fs-4 me-2"></i>Löschen
                 </button></li>
             </ul>
         {{ end }}