From 122842782bfb448b9295b489e0731c143daab88c Mon Sep 17 00:00:00 2001
From: Estebene <49330942+TheWanderingRanger@users.noreply.github.com>
Date: Fri, 14 May 2021 00:10:49 +1200
Subject: [PATCH] Added graph test result selection

---
 src/js/account.js   | 29 +++++++++++++++++++++++++----
 src/sass/style.scss | 15 +++++++++------
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/js/account.js b/src/js/account.js
index 622981073..2b90df04d 100644
--- a/src/js/account.js
+++ b/src/js/account.js
@@ -158,9 +158,15 @@ export function getDataAndInit() {
 let filteredResults = [];
 let visibleTableLines = 0;
 
-function loadMoreLines() {
+function loadMoreLines(lineIndex) {
   if (filteredResults == [] || filteredResults.length == 0) return;
-  for (let i = visibleTableLines; i < visibleTableLines + 10; i++) {
+  let newVisibleLines;
+  if (lineIndex && lineIndex > visibleTableLines) {
+    newVisibleLines = Math.ceil(lineIndex / 10) * 10;
+  } else {
+    newVisibleLines = visibleTableLines + 10;
+  }
+  for (let i = visibleTableLines; i < newVisibleLines; i++) {
     const result = filteredResults[i];
     if (result == undefined) continue;
     let withpunc = "";
@@ -265,7 +271,7 @@ function loadMoreLines() {
     }
 
     $(".pageAccount .history table tbody").append(`
-    <tr>
+    <tr class="result-row" id="result-${i}">
     <td>${pb}</td>
     <td>${result.wpm.toFixed(2)}</td>
     <td>${raw}</td>
@@ -279,7 +285,7 @@ function loadMoreLines() {
     <td>${moment(result.timestamp).format("DD MMM YYYY<br>HH:mm")}</td>
     </tr>`);
   }
-  visibleTableLines += 10;
+  visibleTableLines = newVisibleLines;
   if (visibleTableLines >= filteredResults.length) {
     $(".pageAccount .loadMoreButton").addClass("hidden");
   } else {
@@ -817,6 +823,21 @@ $(".pageAccount .loadMoreButton").click((e) => {
   loadMoreLines();
 });
 
+$(".pageAccount #accountHistoryChart").click((e) => {
+  let activeElement = ChartController.accountHistory.getElementAtEvent(e);
+  if (activeElement == [] || activeElement.length == 0) return;
+  let index = activeElement[0]._index;
+  loadMoreLines(index);
+  $([document.documentElement, document.body]).animate(
+    {
+      scrollTop: $(`#result-${index}`).offset().top,
+    },
+    500
+  );
+  $(".result-row").removeClass("active");
+  $(`#result-${index}`).addClass("active");
+});
+
 $(document).on("click", ".pageAccount .miniResultChartButton", (event) => {
   console.log("updating");
   let filteredId = $(event.currentTarget).attr("filteredResultsId");
diff --git a/src/sass/style.scss b/src/sass/style.scss
index 2a172b679..243d36056 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -3268,6 +3268,10 @@ key {
     }
 
     &.history {
+      .active {
+        background: var(--main-color);
+        color: var(--bg-color);
+      }
       .loadMoreButton {
         background: rgba(0, 0, 0, 0.1);
         color: var(--text-color);
@@ -3388,12 +3392,11 @@ key {
 
   #resultEditTags {
     transition: 0.25s;
-  }
-
-  #resultEditTags:hover {
-    cursor: pointer;
-    color: var(--text-color);
-    opacity: 1 !important;
+    &:hover {
+      cursor: pointer;
+      color: var(--text-color);
+      opacity: 1 !important;
+    }
   }
 }