Merge branch 'main' of https://github.com/clr-li/AttendanceScanner

clr-li · Apr 6, 2024 · b0a1a49 · b0a1a49
2 parents 9519685 + 3b3b763
commit b0a1a49
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/public/stats.html b/public/stats.html
@@ -30,7 +30,7 @@
             <section>
                 <h1>Stats</h1>
                 <type-select id="business-selector" name="businesses" label="Group:"></type-select>
-                <button id="show-filter" class="button" type="button"><i class="fa-solid fa-filter"></i>&nbsp;Filter</button>
+                <button id="show-filter" style="margin-bottom: 15px;" class="button" type="button"><i class="fa-solid fa-filter"></i>&nbsp;Filter</button>
                 <div class="scroll">
                     <table id="user-stats-table" class="calendar"></table>
                 </div><br>

diff --git a/public/stats.js b/public/stats.js
@@ -43,7 +43,7 @@ async function runMemberStatsTable(memberAttArr, numPastEvents) {
     }
 
     let html =
-        '</th><th data-csv="Name">Name (id)</th><th data-csv="Present">Present <button id="sort-present" value="asc" style="border: none; background-color: white;"><i class="fa-solid fa-sort"></i></button></i></th><th data-csv="Absent">Absent <button id="sort-absent" value="asc" style="border: none; background-color: white;"><i class="fa-solid fa-sort"></i></button></th><th data-csv="Late">Late <button id="sort-late" value="asc" style="border: none; background-color: white;"><i class="fa-solid fa-sort"></i></button></th><th data-csv="Excused">Excused <button id="sort-excused" value="asc" style="border: none; background-color: white;"><i class="fa-solid fa-sort"></i></button></th><th data-csv="Total Count">Total Count</th></tr>';
+        '</th><th data-csv="Name">Name (id) <button id="sort-name" value="asc" style="border: none; background-color: white;"><i class="fa-solid fa-sort"></i></button></th><th data-csv="Present">Present <button id="sort-present" value="asc" style="border: none; background-color: white;"><i class="fa-solid fa-sort"></i></button></i></th><th data-csv="Absent">Absent <button id="sort-absent" value="asc" style="border: none; background-color: white;"><i class="fa-solid fa-sort"></i></button></th><th data-csv="Late">Late <button id="sort-late" value="asc" style="border: none; background-color: white;"><i class="fa-solid fa-sort"></i></button></th><th data-csv="Excused">Excused <button id="sort-excused" value="asc" style="border: none; background-color: white;"><i class="fa-solid fa-sort"></i></button></th><th data-csv="Total Count">Total Count</th></tr>';
     for (const uid of uidToUserinfo.keys()) {
         const userinfo = uidToUserinfo.get(uid);
         html += `<tr id="row-${sanitizeText(uid)}"><td data-name="${userinfo.name}" data-csv="${
@@ -68,32 +68,38 @@ async function runMemberStatsTable(memberAttArr, numPastEvents) {
     const absentButton = document.getElementById('sort-absent');
     const lateButton = document.getElementById('sort-late');
     const excusedButton = document.getElementById('sort-excused');
+    const nameButton = document.getElementById('sort-name');
+    nameButton.onclick = () => {
+        sortStatus(nameButton, presentButton, absentButton, lateButton, excusedButton, 0);
+    };
     presentButton.onclick = () => {
-        sortStatus(presentButton, absentButton, lateButton, excusedButton, 1);
+        sortStatus(presentButton, absentButton, lateButton, excusedButton, nameButton, 1);
     };
     absentButton.onclick = () => {
-        sortStatus(absentButton, presentButton, lateButton, excusedButton, 2);
+        sortStatus(absentButton, presentButton, lateButton, excusedButton, nameButton, 2);
     };
     lateButton.onclick = () => {
-        sortStatus(lateButton, presentButton, absentButton, excusedButton, 3);
+        sortStatus(lateButton, presentButton, absentButton, excusedButton, nameButton, 3);
     };
     excusedButton.onclick = () => {
-        sortStatus(excusedButton, presentButton, absentButton, lateButton, 4);
+        sortStatus(excusedButton, presentButton, absentButton, lateButton, nameButton, 4);
     };
 }
 
-function sortStatus(statusBtn, otherBtn1, otherBtn2, otherBtn3, index) {
+function sortStatus(statusBtn, otherBtn1, otherBtn2, otherBtn3, otherBtn4, index) {
     const sortDirection = statusBtn.value;
     const table = document.getElementById('user-stats-table');
     const rows = table.rows;
     const sortedRows = [...rows].slice(1);
     sortedRows.sort((a, b) => {
-        const aVal = parseInt(a.cells[index].innerText);
-        const bVal = parseInt(b.cells[index].innerText);
+        const aVal = a.cells[index].innerText;
+        const bVal = b.cells[index].innerText;
         if (sortDirection === 'asc') {
-            return bVal - aVal;
+            if (index === 0) return aVal.localeCompare(bVal);
+            return parseInt(bVal) - parseInt(aVal);
         } else {
-            return aVal - bVal;
+            if (index === 0) return bVal.localeCompare(aVal);
+            return parseInt(aVal) - parseInt(bVal);
         }
     });
     sortedRows.forEach(row => table.appendChild(row));
@@ -105,6 +111,7 @@ function sortStatus(statusBtn, otherBtn1, otherBtn2, otherBtn3, index) {
     otherBtn1.innerHTML = '<i class="fa-solid fa-sort"></i>';
     otherBtn2.innerHTML = '<i class="fa-solid fa-sort"></i>';
     otherBtn3.innerHTML = '<i class="fa-solid fa-sort"></i>';
+    otherBtn4.innerHTML = '<i class="fa-solid fa-sort"></i>';
 }
 
 function sortStudents(searchword) {