Sort history on click (#1646) by tricarbonate

* History sorting works for every numerical categories except date

* Sorting now works for date

* Added sort-up and sort-down icons for sorted column in history

* smaller icon

* showing default sort state

* Sort resets when applying filters

* fixed typo

* removed console logs

Co-authored-by: Miodec <bartnikjack@gmail.com>

src/js/account.js

@@ -912,3 +912,103 @@ $(document).on("click", ".pageAccount .miniResultChartButton", (event) => {
     event.pageY + 30
   );
 });
+
+$(document).on("click", ".history-wpm-header", (event) => {
+  sortAndRefreshHistory("wpm", ".history-wpm-header");
+});
+
+$(document).on("click", ".history-raw-header", (event) => {
+  sortAndRefreshHistory("rawWpm", ".history-raw-header");
+});
+
+$(document).on("click", ".history-acc-header", (event) => {
+  sortAndRefreshHistory("acc", ".history-acc-header");
+});
+
+$(document).on("click", ".history-correct-chars-header", (event) => {
+  sortAndRefreshHistory("correctChars", ".history-correct-chars-header");
+});
+
+$(document).on("click", ".history-incorrect-chars-header", (event) => {
+  sortAndRefreshHistory("incorrectChars", ".history-incorrect-chars-header");
+});
+
+$(document).on("click", ".history-consistency-header", (event) => {
+  sortAndRefreshHistory("consistency", ".history-consistency-header");
+});
+
+$(document).on("click", ".history-date-header", (event) => {
+  sortAndRefreshHistory("timestamp", ".history-date-header");
+});
+
+// Resets sorting to by date' when applying filers (normal or advanced)
+$(document).on("click", ".buttonsAndTitle .buttons .button", (event) => {
+  // We want to 'force' descending sort:
+  sortAndRefreshHistory("timestamp", ".history-date-header", true);
+});
+
+function sortAndRefreshHistory(key, headerClass, forceDescending = null) {
+  // Removes styling from previous sorting requests:
+  $("td").removeClass("header-sorted");
+  $("td").children("i").remove();
+  $(headerClass).addClass("header-sorted");
+
+  if (filteredResults.length < 2) return;
+
+  // This allows to reverse the sorting order when clicking multiple times on the table header
+  let descending = true;
+  if (forceDescending !== null) {
+    if (forceDescending == true) {
+      $(headerClass).append(
+        '<i class="fas fa-sort-down" aria-hidden="true"></i>'
+      );
+    } else {
+      descending = false;
+      $(headerClass).append(
+        '<i class="fas fa-sort-up" aria-hidden="true"></i>'
+      );
+    }
+  } else if (
+    filteredResults[0][key] <= filteredResults[filteredResults.length - 1][key]
+  ) {
+    descending = true;
+    $(headerClass).append(
+      '<i class="fas fa-sort-down" aria-hidden="true"></i>'
+    );
+  } else {
+    descending = false;
+    $(headerClass).append('<i class="fas fa-sort-up", aria-hidden="true"></i>');
+  }
+
+  let temp = [];
+  let parsedIndexes = [];
+
+  while (temp.length < filteredResults.length) {
+    let lowest = Number.MAX_VALUE;
+    let highest = -1;
+    let idx = -1;
+
+    for (let i = 0; i < filteredResults.length; i++) {
+      //find the lowest wpm with index not already parsed
+      if (!descending) {
+        if (filteredResults[i][key] <= lowest && !parsedIndexes.includes(i)) {
+          lowest = filteredResults[i][key];
+          idx = i;
+        }
+      } else {
+        if (filteredResults[i][key] >= highest && !parsedIndexes.includes(i)) {
+          highest = filteredResults[i][key];
+          idx = i;
+        }
+      }
+    }
+
+    temp.push(filteredResults[idx]);
+    parsedIndexes.push(idx);
+  }
+  filteredResults = temp;
+
+  $(".pageAccount .history table tbody").empty();
+  visibleTableLines = 0;
+  loadMoreLines();
+}

src/sass/style.scss

@@ -4015,3 +4015,13 @@ key {
     background-color: var(--bg-color);
   }
 }
+
+.header-sorted {
+  font-weight: bold;
+}
+
+.sortable:hover {
+  cursor: pointer;
+  user-select: none;
+  background-color: rgba(0, 0, 0, 0.1);
+}

static/index.html

@@ -4361,25 +4361,45 @@
                   <thead>
                     <tr>
                       <td></td>
-                      <td>wpm</td>
-                      <td>raw</td>
-                      <td>accuracy</td>
-                      <td>
+                      <td type="button" class="sortable history-wpm-header">
+                        wpm
+                      </td>
+                      <td type="button" class="sortable history-raw-header">
+                        raw
+                      </td>
+                      <td type="button" class="sortable history-acc-header">
+                        accuracy
+                      </td>
+                      <td
+                        type="button"
+                        class="sortable history-correct-chars-header"
+                      >
                         correct
                         <br />
                         chars
                       </td>
-                      <td>
+                      <td
+                        type="button"
+                        class="sortable history-incorrect-chars-header"
+                      >
                         incorrect
                         <br />
                         chars
                       </td>
-                      <td>consistency</td>
+                      <td
+                        type="button"
+                        class="sortable history-consistency-header"
+                      >
+                        consistency
+                      </td>
                       <td>mode</td>
                       <!-- <td>punctuation</td> -->
                       <td>info</td>
                       <td>tags</td>
-                      <td>date</td>
+                      <td type="button" class="sortable history-date-header">
+                        date
+                        <i class="fas fa-sort-down" aria-hidden="true"></i>
+                      </td>
                     </tr>
                   </thead>
                   <tbody></tbody>