Merge pull request #1414 from Estebene/select-tests

Added click on account graph to scroll down to the test

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="resultRow" 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,25 @@ $(".pageAccount .loadMoreButton").click((e) => {
   loadMoreLines();
 });
 
+let activeChartIndex;
+
+export function setActiveChartIndex(index) {
+  activeChartIndex = index;
+}
+
+$(".pageAccount #accountHistoryChart").click((e) => {
+  let index = activeChartIndex;
+  loadMoreLines(index);
+  $([document.documentElement, document.body]).animate(
+    {
+      scrollTop: $(`#result-${index}`).offset().top - ($(window).height()/2),
+    },
+    500
+  );
+  $(".resultRow").removeClass("active");
+  $(`#result-${index}`).addClass("active");
+});
+
 $(document).on("click", ".pageAccount .miniResultChartButton", (event) => {
   console.log("updating");
   let filteredId = $(event.currentTarget).attr("filteredResultsId");

src/js/chart-controller.js

@@ -2,6 +2,7 @@ import Chart from "chart.js";
 import * as TestStats from "./test-stats";
 import * as ThemeColors from "./theme-colors";
 import * as Misc from "./misc";
+import * as Account from "./account";
 
 export let result = new Chart($("#wpmChart"), {
   type: "line",
@@ -247,7 +248,8 @@ export let accountHistory = new Chart($(".pageAccount #accountHistoryChart"), {
         label: function () {
           return;
         },
-        afterLabel: function () {
+        afterLabel: function (tooltip, data) {
+          Account.setActiveChartIndex(tooltip.index);
           return;
         },
       },

src/sass/style.scss

@@ -3273,6 +3273,10 @@ key {
     }
 
     &.history {
+      .active {
+        animation: flashHighlight 4s linear 0s 1;
+      }
+
       .loadMoreButton {
         background: rgba(0, 0, 0, 0.1);
         color: var(--text-color);
@@ -3393,12 +3397,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;
+    }
   }
 }
 
@@ -3936,3 +3939,18 @@ key {
     }
   }
 }
+
+@keyframes flashHighlight {
+  0% {
+    background-color: var(--bg-color);
+  }
+  10% {
+    background-color: var(--main-color);
+  }
+  40% {
+    background-color: var(--main-color);
+  }
+  100% {
+    background-color: var(--bg-color);
+  }
+}