added estimated typing time to the account page

optimised the speed of loading the account page by limiting table results to 10 lines at a time

public/css/style.scss

@@ -1080,6 +1080,10 @@ key {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 1rem;
+    .text{
+      align-self: center;
+      color: var(--sub-color);
+    }
   }
   .group{
     &.noDataError{
@@ -1088,6 +1092,28 @@ key {
       // line-height: 30rem;
       text-align: center;
     }
+    &.history{
+      .loadMoreButton{
+        background: rgba(0, 0, 0, 0.1);
+        color: var(--sub-color);
+        text-align: center;
+        padding: .5rem;
+        border-radius: var(--roundness);
+        cursor: pointer;
+        -webkit-transition: .25s;
+        transition: .25s;
+        -webkit-user-select: none;
+        display: -ms-grid;
+        display: grid;
+        -ms-flex-line-pack: center;
+        align-content: center;
+        margin-top: 1rem;
+        &:hover,&:focus{
+          color: var(--sub-color);
+          background: var(--main-color);
+        }
+      }
+    }
     .title{
       color: var(--sub-color);
     }

public/index.html

@@ -427,6 +427,17 @@
             </div>
           </div>
           <div class="triplegroup stats">
+            <div class="text" style="margin-bottom: 2rem;">
+              estimated total<br>time spent typing
+            </div>
+            <div class="group timeTotal" style="margin-bottom: 2rem;">
+              <div class="title">overall</div>
+              <div class="val">-</div>
+            </div>
+            <div class="group timeTotalFiltered">
+              <div class="title">filtered</div>
+              <div class="val">-</div>
+            </div>
             <div class="group highestWpm">
               <div class="title">highest wpm</div>
               <div class="val">-</div>
@@ -504,6 +515,9 @@
 
               </tbody>
             </table>
+            <div class="loadMoreButton">
+              load more
+            </div>
           </div>
         </div>
       </div>

public/js/account.js

@@ -22,6 +22,10 @@ $(".signOut").click(e => {
   signOut();
 })
 
+$(".pageAccount .loadMoreButton").click(e => {
+  loadMoreLines();
+})
+
 function showSignOutButton() {
   $(".signOut").removeClass('hidden').css("opacity",1);
 }
@@ -383,6 +387,36 @@ $('.pageAccount .filterButtons').click('.button',e =>{
   saveConfigToCookie();
 })
 
+let filteredResults = [];
+let visibleTableLines = 0;
+
+function loadMoreLines(){
+  if(filteredResults == []) return;
+  for(let i = visibleTableLines; i < visibleTableLines+10; i++){
+    result = filteredResults[i];
+    let withpunc = '';
+    if (result.punctuation) {
+      withpunc = '<br>punctuation';
+    }
+    let diff = result.difficulty;
+    if (result.difficulty == undefined){
+      diff = 'normal';
+    }
+    
+    $(".pageAccount .history table tbody").append(`
+    <tr>
+    <td>${result.wpm}</td>
+    <td>${result.acc}%</td>
+    <td>${result.correctChars}</td>
+    <td>${result.incorrectChars}</td>
+    <td>${result.mode}<br>${result.mode2}${withpunc}</td>
+    <td>${diff}</td>
+    <td>${result.language.replace('_','<br>')}</td>
+    <td>${moment(result.timestamp).format('DD MMM YYYY HH:mm')}</td>
+    </tr>`);
+  }
+}
+
 function refreshAccountPage() {
 
   function cont(){
@@ -409,8 +443,33 @@ function refreshAccountPage() {
       max: 0
     }
 
+    let totalSeconds = 0;
+    let totalSecondsFiltered = 0;
+    
+    let tableEl = "";
+
+    filteredResults = [];
     $(".pageAccount .history table tbody").empty();
     dbSnapshot.forEach(result => {
+
+
+      let tt = 0;
+      if(result.timeDuration == null){
+        //test finished before timeduration field was introduced - estimate
+        if(result.mode == "time"){
+          tt = parseFloat(result.mode2);
+        }else if(result.mode == "words"){
+          tt = (parseFloat(result.mode2)/parseFloat(result.wpm)) * 60;
+        }
+      }else{
+        tt = parseFloat(result.timeDuration);
+      }
+      if(result.restartCount != null){
+        tt += (tt/2) * result.restartCount;
+      }
+      totalSeconds += tt;
+
+
       // console.log(result);
       //apply filters
       let resdiff = result.difficulty;
@@ -441,6 +500,28 @@ function refreshAccountPage() {
       }
       if(!activeFilters.includes(puncfilter)) return;
 
+      filteredResults.push(result);
+
+      //filters done
+
+      tt = 0;
+      if(result.timeDuration == null){
+        //test finished before timeduration field was introduced - estimate
+        if(result.mode == "time"){
+          tt = parseFloat(result.mode2);
+        }else if(result.mode == "words"){
+          tt = (parseFloat(result.mode2)/parseFloat(result.wpm)) * 60;
+        }
+      }else{
+        tt = parseFloat(result.timeDuration);
+      }
+      if(result.restartCount != null){
+        tt += (tt/2) * result.restartCount;
+      }
+      totalSecondsFiltered += tt;
+
+
+
       if(last10 < 10){
         last10++;
         wpmLast10total += result.wpm;
@@ -467,25 +548,9 @@ function refreshAccountPage() {
       if (result.restartCount != undefined) {
         testRestarts += result.restartCount;
       }
-      let withpunc = '';
-      if (result.punctuation) {
-        withpunc = '<br>punctuation';
-      }
-      let diff = result.difficulty;
-      if (result.difficulty == undefined){
-        diff = 'normal';
-      }
-      $(".pageAccount .history table tbody").append(`
-      <tr>
-      <td>${result.wpm}</td>
-      <td>${result.acc}%</td>
-      <td>${result.correctChars}</td>
-      <td>${result.incorrectChars}</td>
-      <td>${result.mode}<br>${result.mode2}${withpunc}</td>
-      <td>${diff}</td>
-      <td>${result.language.replace('_','<br>')}</td>
-      <td>${moment(result.timestamp).format('DD MMM YYYY HH:mm')}</td>
-      </tr>`)
+      
+
+
       chartData.push({
         x: result.timestamp,
         y: result.wpm,
@@ -506,10 +571,9 @@ function refreshAccountPage() {
 
       totalWpm += result.wpm;
     })
+    loadMoreLines();
     ////////
 
-    let totalWpm10 = 0;
-
     let mainColor = getComputedStyle(document.body).getPropertyValue('--main-color').replace(' ', '');
     let subColor = getComputedStyle(document.body).getPropertyValue('--sub-color').replace(' ','');
   
@@ -533,6 +597,10 @@ function refreshAccountPage() {
       $(".pageAccount .triplegroup.stats").removeClass('hidden');
     }
 
+    $(".pageAccount .timeTotal .val").text(moment.utc(moment.duration(totalSeconds, "seconds").asMilliseconds()).format("HH:mm:ss"));
+    $(".pageAccount .timeTotalFiltered .val").text(moment.utc(moment.duration(totalSecondsFiltered, "seconds").asMilliseconds()).format("HH:mm:ss"));
+
+
     $(".pageAccount .highestWpm .val").text(topWpm);
     $(".pageAccount .averageWpm .val").text(Math.round(totalWpm/testCount));
     $(".pageAccount .averageWpm10 .val").text(Math.round(wpmLast10total/last10));