Maxi/InfantrySkillCalculator
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases Activity

Enhanced icons and tooltips.
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 42s
Details

Browse Source
This commit is contained in:
MaxJa4
2024-01-24 10:48:28 +01:00
parent a0a469bc91
commit 0b2d10e7b7
12 changed files with 68 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
static/index.js
View File

@@ -1,9 +1,13 @@
document.addEventListener('DOMContentLoaded', function() { 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) => { tooltipTriggerList.forEach((elem) => {
new bootstrap.Tooltip(elem); new bootstrap.Tooltip(elem);
}); });
}); }
function setupClanButtons(dropdownId, delBtnId, editBtnId) { function setupClanButtons(dropdownId, delBtnId, editBtnId) {
const dropdown = document.getElementById(dropdownId); const dropdown = document.getElementById(dropdownId);

12
templates/components/bottom_controls.html
View File

@@ -3,12 +3,12 @@
<div class="row justify-content-between border-top pt-4 position-relative mb-5"> <div class="row justify-content-between border-top pt-4 position-relative mb-5">
<div class="col-auto position-absolute start-0"> <div class="col-auto position-absolute start-0">
<div class="btn-toolbar" role="toolbar"> <div class="btn-toolbar" role="toolbar">
<a class="btn btn-lg btn-outline-secondary text-secondary-emphasis me-2" href="/logout"> <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" data-bs-toggle="tooltip" data-bs-title="Abmelden"></i> <i class="bi bi-door-closed-fill"></i>
</a> </a>
<!-- <!--
<button class="btn btn-lg btn-outline-secondary text-secondary-emphasis me-2" data-bs-toggle="modal" data-bs-target="#settingsModal"> <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> </button>
--> -->
{{ if (eq .UserRole "ADMIN") }} {{ if (eq .UserRole "ADMIN") }}
@@ -63,14 +63,14 @@
</div> </div>
</div> </div>
<div class="col-auto position-absolute start-50 translate-middle-x"> <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> <i class="bi bi-calculator-fill me-2"></i>
Berechnen Berechnen
</button> </button>
</div> </div>
<div class="col-auto position-absolute end-0"> <div class="col-auto position-absolute end-0">
<button class="btn btn-lg btn-outline-secondary text-secondary-emphasis" id="singleCalcBtn" onclick="showSingleCalcDialog(this)"> <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 me-2"></i> <i class="bi bi-person-fill me-2"></i>
Einzel-Abfrage Einzel-Abfrage
</button> </button>
</div> </div>

20
templates/components/home_clan_bar.html
View File

@@ -11,14 +11,17 @@
<!-- Options will be loaded dynamically --> <!-- Options will be loaded dynamically -->
</select> </select>
{{ if not (eq .UserRole "READER") }} {{ 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> <button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="home-delete"
<i class="bi bi-trash3" data-bs-toggle="tooltip" data-bs-title="Clan löschen"></i> 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>
<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> <button class="btn btn-lg btn-outline-secondary text-primary bg-secondary-subtle" type="button" id="home-edit"
<i class="bi bi-pencil-fill" data-bs-toggle="tooltip" data-bs-title="Clan bearbeiten"></i> 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>
<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"> <button class="btn btn-lg btn-outline-secondary text-success" type="button" id="home-add"
<i class="bi bi-plus-lg" data-bs-toggle="tooltip" data-bs-title="Clan hinzufügen"></i> 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> </button>
{{ end }} {{ end }}
</div> </div>
@@ -28,6 +31,11 @@
<script lang="javascript"> <script lang="javascript">
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
setupClanButtons('home-clan', 'home-delete', 'home-edit'); setupClanButtons('home-clan', 'home-delete', 'home-edit');
const homePlayerList = document.getElementById('home-player-list');
homePlayerList.addEventListener('htmx:afterSwap', function() {
initTooltips(homePlayerList);
});
}); });
</script> </script>

15
templates/components/home_player_list.html
View File

@@ -8,21 +8,22 @@
</div> </div>
<div class="col-auto ps-0"> <div class="col-auto ps-0">
<div class="btn-group-vertical btn-group-lg" role="group"> <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')"> <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" data-bs-toggle="tooltip" data-bs-title="Alle auswählen"></i> <i class="bi bi-check-square fs-4"></i>
</button> </button>
<button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="deselectAllPlayers('home-player-list')"> <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" data-bs-toggle="tooltip" data-bs-title="Nichts auswählen"></i> <i class="bi bi-square fs-4"></i>
</button> </button>
</div> </div>
{{ if not (eq .UserRole "READER") }} {{ if not (eq .UserRole "READER") }}
<br> <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> <button type="button" class="btn btn-outline-secondary text-success px-3 mt-2 bg-secondary-subtle" id="home-player-add"
<i class="bi bi-person-add fs-4" data-bs-toggle="tooltip" data-bs-title="Spieler hinzufügen"></i> 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> </button>
{{ end }} {{ end }}
<br> <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> <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> <span class="badge fs-5 mb-2" id="home-player-selected">0</span>
</div> </div>

15
templates/components/opp_clan_bar.html
View File

@@ -10,14 +10,17 @@
<option disabled selected value>Auswählen...</option> <option disabled selected value>Auswählen...</option>
</select> </select>
{{ if not (eq .UserRole "READER") }} {{ 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> <button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="opponent-delete"
<i class="bi bi-trash3" data-bs-toggle="tooltip" data-bs-title="Clan löschen"></i> 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>
<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> <button class="btn btn-lg btn-outline-secondary text-primary bg-secondary-subtle" type="button" id="opponent-edit"
<i class="bi bi-pencil-fill" data-bs-toggle="tooltip" data-bs-title="Clan bearbeiten"></i> 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>
<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"> <button class="btn btn-lg btn-outline-secondary text-success" type="button" id="opponent-add"
<i class="bi bi-plus-lg" data-bs-toggle="tooltip" data-bs-title="Clan hinzufügen"></i> 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> </button>
{{ end }} {{ end }}
</div> </div>

20
templates/components/opp_player_list.html
View File

@@ -8,21 +8,22 @@
</div> </div>
<div class="col-auto ps-0"> <div class="col-auto ps-0">
<div class="btn-group-vertical btn-group-lg" role="group"> <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')"> <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" data-bs-toggle="tooltip" data-bs-title="Alle auswählen"></i> <i class="bi bi-check-square fs-4"></i>
</button> </button>
<button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="deselectAllPlayers('opponent-player-list')"> <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" data-bs-toggle="tooltip" data-bs-title="Nichts auswählen"></i> <i class="bi bi-square fs-4"></i>
</button> </button>
</div> </div>
{{ if not (eq .UserRole "READER") }} {{ if not (eq .UserRole "READER") }}
<br> <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> <button type="button" class="btn btn-outline-secondary text-success px-3 mt-2 bg-secondary-subtle" id="opponent-player-add"
<i class="bi bi-person-add fs-4" data-bs-toggle="tooltip" data-bs-title="Spieler hinzufügen"></i> 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> </button>
{{ end }} {{ end }}
<br> <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> <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> <span class="badge fs-5 mb-2" id="opponent-player-selected">0</span>
</div> </div>
@@ -32,6 +33,11 @@
<script lang="javascript"> <script lang="javascript">
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
setupPlayerButtons('opponent-clan', 'opponent-player-list', 'opponent-player-add'); setupPlayerButtons('opponent-clan', 'opponent-player-list', 'opponent-player-add');
const oppPlayerList = document.getElementById('opponent-player-list');
oppPlayerList.addEventListener('htmx:afterSwap', function() {
initTooltips(oppPlayerList);
});
}); });
</script> </script>

4
templates/index.html
View File

@@ -8,7 +8,7 @@
<div class="row"> <div class="row">
<!-- Home-Clan Column --> <!-- Home-Clan Column -->
<div class="col-md-6 d-flex flex-column border-end px-3 pb-4"> <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 --> <!-- Clan Selection -->
{{ template "home_clan_bar" . }} {{ template "home_clan_bar" . }}
@@ -18,7 +18,7 @@
<!-- Opponent-Clan Column --> <!-- Opponent-Clan Column -->
<div class="col-md-6 d-flex flex-column px-3 pb-4"> <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 --> <!-- Clan Selection -->
{{ template "opp_clan_bar" . }} {{ template "opp_clan_bar" . }}

2
templates/login.html
View File

@@ -17,7 +17,7 @@
<label for="password">Passwort</label> <label for="password">Passwort</label>
</div> </div>
<button class="btn btn-lg btn-primary mt-4" type="submit"><i class="bi bi-door-open me-3"></i>Anmelden</button> <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> </form>
<div id="login-result" class="fs-4 mt-2"></div> <div id="login-result" class="fs-4 mt-2"></div>
</div> </div>

1
templates/modals/add_player.html
View File

@@ -124,6 +124,7 @@
errorDiv.innerText = ""; errorDiv.innerText = "";
errorDiv.style.display = 'none'; errorDiv.style.display = 'none';
playerName.classList.remove('is-invalid'); playerName.classList.remove('is-invalid');
initTooltips(playerList);
}); });
} }
}); });

2
templates/modals/settings.html
View File

@@ -22,7 +22,7 @@
<input class="form-check-input" type="checkbox" id="settingsSquadColors" value="squadColors" checked> <input class="form-check-input" type="checkbox" id="settingsSquadColors" value="squadColors" checked>
<label class="form-check-label" for="settingsSquadColors">Squad-Farben aktivieren</label> <label class="form-check-label" for="settingsSquadColors">Squad-Farben aktivieren</label>
</div> </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"> <input class="form-check-input" type="checkbox" id="settingsCalcMedian" value="calcMedian">
<label class="form-check-label" for="settingsCalcMedian">Median aktivieren</label> <label class="form-check-label" for="settingsCalcMedian">Median aktivieren</label>
</div> </div>

2
templates/register.html
View File

@@ -30,7 +30,7 @@
</div> </div>
</div> </div>
<button class="btn btn-lg btn-primary mt-4" type="submit"><i class="bi bi-key me-3"></i>Registrieren</button> <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> </form>
<div id="register-result" class="fs-4 mt-2"></div> <div id="register-result" class="fs-4 mt-2"></div>
</div> </div>

12
templates/shards/player_list_item.html
View File

@@ -2,24 +2,24 @@
<div class="input-group input-group-lg mb-1" data-id="{{ .PlayerID }}"> <div class="input-group input-group-lg mb-1" data-id="{{ .PlayerID }}">
<div class="input-group-text py-1 px-2"> <div class="input-group-text py-1 px-2">
<label> <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> </label>
</div> </div>
<span class="form-control py-2 px-3" style="width: 10em">{{ .PlayerName }}</span> <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> <i class="bi bi-trophy me-3 text-warning"></i><span id="quickScore" class="text-secondary-emphasis">{{ .Score }}</span>
</div> </div>
<button type="button" class="btn btn-outline-secondary" hx-get="/score/{{ .PlayerID }}" hx-target="previous #quickScore" onclick="singleCalcSpinner(this)"> <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 text-info"></i> <i class="bi bi-calculator-fill text-warning"></i>
</button> </button>
{{ if not (eq .UserRole "READER") }} {{ 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> <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"> <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"> <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> </button></li>
<li><button class="dropdown-item text-danger fs-5" data-bs-toggle="modal" data-bs-id="{{ .PlayerID }}" data-bs-target="#deletePlayerModal"> <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> </button></li>
</ul> </ul>
{{ end }} {{ end }}