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

static/index.js

@@ -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;
+}

templates/components/home_player_list.html

@@ -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" 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"><i class="bi bi-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>

templates/components/opp_player_list.html

@@ -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" 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"><i class="bi bi-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>

templates/player_list_item.html

@@ -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>