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

Implement select counter + select-all + select-none.

Browse Source
This commit is contained in:
MaxJa4
2024-01-16 21:20:50 +01:00
parent 94e0c178f0
commit f92e22f142
4 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
static/index.js
View File

@@ -94,3 +94,38 @@ function loadClans() {
console.error('There has been a problem with your fetch operation:', error);
});
}
function updateSelectedPlayers(sender) {
const playerList = sender.parentElement.parentElement.parentElement;
const checkCounter = playerList.parentElement.parentElement.querySelector('span.badge');
let counter = 0;
Array.from(playerList.children).forEach(p => {
if (p.querySelector('input[type="checkbox"]:checked'))
counter++;
});
checkCounter.innerText = counter;
}
function selectAllPlayers(playerListId) {
const playerList = document.getElementById(playerListId);
const checkCounter = playerList.parentElement.parentElement.querySelector('span.badge');
Array.from(playerList.children).forEach(p => {
p.querySelector('input[type="checkbox"]').checked = true;
});
checkCounter.innerText = playerList.children.length;
}
function deselectAllPlayers(playerListId) {
const playerList = document.getElementById(playerListId);
const checkCounter = playerList.parentElement.parentElement.querySelector('span.badge');
Array.from(playerList.children).forEach(p => {
p.querySelector('input[type="checkbox"]').checked = false;
});
checkCounter.innerText = 0;
}

6
templates/components/home_player_list.html
View File

@@ -8,8 +8,8 @@
</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"><i class="bi bi-check-square fs-4"></i></button>
<button type="button" class="btn btn-outline-secondary text-primary-emphasis"><i class="bi bi-square fs-4"></i></button>
<button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="selectAllPlayers('home-player-list')"><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"></i></button>
</div>
<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>
@@ -18,7 +18,7 @@
<br>
<div class="vstack text-center border border-secondary rounded mt-2">
<i class="bi bi-ui-checks fs-4 mt-2 mb-1"></i>
<span class="badge fs-5 mb-2">0</span>
<span class="badge fs-5 mb-2" id="home-player-selected">0</span>
</div>
</div>
</div>

6
templates/components/opp_player_list.html
View File

@@ -8,8 +8,8 @@
</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"><i class="bi bi-check-square fs-4"></i></button>
<button type="button" class="btn btn-outline-secondary text-primary-emphasis"><i class="bi bi-square fs-4"></i></button>
<button type="button" class="btn btn-outline-secondary text-primary-emphasis" onclick="selectAllPlayers('opponent-player-list')"><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"></i></button>
</div>
<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>
@@ -18,7 +18,7 @@
<br>
<div class="vstack text-center border border-secondary rounded mt-2">
<i class="bi bi-ui-checks fs-4 mt-2 mb-1"></i>
<span class="badge fs-5 mb-2">0</span>
<span class="badge fs-5 mb-2" id="opponent-player-selected">0</span>
</div>
</div>
</div>

2
templates/player_list_item.html
View File

@@ -1,6 +1,6 @@
<div class="input-group input-group-lg mb-1">
<div class="input-group-text py-1 px-2">
<input class="form-check-input fs-4 border-secondary mt-0" type="checkbox" value="">
<input class="form-check-input fs-4 border-secondary mt-0" type="checkbox" value="" onchange="updateSelectedPlayers(this)">
</div>
<span class="form-control py-1 px-2">%s</span>
<button class="btn btn-outline-secondary text-secondary-emphasis dropdown-toggle py-1" type="button" data-bs-toggle="dropdown"></button>