- Displaying number of records in result analyzer added

js/result_analyzer.js

@@ -31,12 +31,24 @@ function autoconvert_datetime(str) {
     return filter;
 }
 
+function count_selected() {
+    let n = 0;
+    document.getElementsByName("game_select").forEach((chk) => {
+       if (chk.checked) {
+           n++;
+       }
+    });
+
+    document.getElementById("selected_n").innerText = n.toString();
+}
+
 function fetch_results() {
 
     let filterF = document.getElementById("filter");
     let orderbyF = document.getElementById("orderby");
     let groupsF = document.getElementById("groups");
     let best_onlyChk = document.getElementById("best_only");
+    let records_nS = document.getElementById("records_n");
 
     let filter = autoconvert_datetime(filterF.value.trim());
 
@@ -61,7 +73,7 @@ function fetch_results() {
             return;
         }
 
-        // let n = results.length;
+        records_nS.innerText = results.length;
 
         results.forEach((record) => {
             let row = document.createElement("tr");
@@ -89,6 +101,9 @@ function fetch_results() {
             selectChk.type = "checkbox";
             selectChk.name = "game_select";
             selectChk.record = record;
+            selectChk.addEventListener("input", () => {
+               count_selected();
+            });
 
             let selection_cell = create_cell();
             selection_cell.append(selectChk);
@@ -211,6 +226,7 @@ function toggle_test_selection() {
     game_selectChks.forEach((chk) => {
         chk.checked = !chk.checked;
     });
+    count_selected();
 }
 
 function delete_tests() {

result_analyzer.php

@@ -55,48 +55,49 @@ if (!$gameMgr->getGame($game_id)->isUserContributorOrOwner($user_data["nickname"
     <input type="button" value="Kijelöltek törlése" onclick="delete_tests()"><br>
     <input type="checkbox" id="best_only"><label for="best_only" style="font-size: 12px">Csak legjobb eredmények felhasználónként</label>
 </section>
-<section>
+<section id="table_section">
-    <section id="table_section">
+    <table class="management">
-        <table class="management">
+        <thead>
-            <thead>
+        <tr>
-            <tr>
+            <th>
-                <th>
+                <input type="checkbox" onclick="toggle_test_selection()">
-                    <input type="checkbox" onclick="toggle_test_selection()">
+            </th>
-                </th>
+            <th>#<br>
-                <th>#<br>
+                <code>
-                    <code>
+                    [_id]
-                        [_id]
+                </code>
-                    </code>
+            </th>
-                </th>
+            <th></th>
-                <th></th>
+            <th>
-                <th>
+                Felhasználónév<br>
-                    Felhasználónév<br>
+                <code>
-                    <code>
+                    [nickname]
-                        [nickname]
+                </code>
-                    </code>
+            </th>
-                </th>
+            <th>Eredmény<br>
-                <th>Eredmény<br>
+                <code>
-                    <code>
+                    [summary.percentage]
-                        [summary.percentage]
+                </code>
-                    </code>
+            </th>
-                </th>
+            <th>Kezdés ideje<br>
-                <th>Kezdés ideje<br>
+                <code>
-                    <code>
+                    [start_time]
-                        [start_time]
+                </code>
-                    </code>
+            </th>
-                </th>
+            <th>Befejezés ideje<br>
-                <th>Befejezés ideje<br>
+                <code>
-                    <code>
+                    [end_time]
-                        [end_time]
+                </code>
-                    </code>
+            </th>
-                </th>
 
-            </tr>
+        </tr>
-            </thead>
+        </thead>
-            <tbody id="results_display">
+        <tbody id="results_display">
-            </tbody>
+        </tbody>
-        </table>
+    </table>
-    </section>
+</section>
+<section id="summary_section">
+    <span id="records_n">0</span>&nbsp;találat, <span id="selected_n">0</span>&nbsp;kijelölve
 </section>
 <script>
     let GAMEID = <?="$game_id"?>;

style/quizmaster_area.css

@@ -1,9 +1,13 @@
 section#table_section {
     position: sticky;
-    height: calc(100vh - 4em);
+    height: calc(100vh - 6em);
     overflow-y: auto;
 }
 
+section#summary_section {
+    margin-top: 0.5em;
+}
+
 table.management {
     width: 100%;
     border-collapse: collapse;