From d43d913105486f1572ef6a8ebd6a078ea4930888 Mon Sep 17 00:00:00 2001 From: Jack Date: Sat, 30 May 2020 00:21:39 +0100 Subject: [PATCH] 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 | 26 ++++++++++ public/index.html | 14 ++++++ public/js/account.js | 110 ++++++++++++++++++++++++++++++++++-------- 3 files changed, 129 insertions(+), 21 deletions(-) diff --git a/public/css/style.scss b/public/css/style.scss index a0e770671..f0719c23e 100644 --- a/public/css/style.scss +++ b/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); } diff --git a/public/index.html b/public/index.html index 67e40eff8..bee426f42 100644 --- a/public/index.html +++ b/public/index.html @@ -427,6 +427,17 @@
+
+ estimated total
time spent typing +
+
+
overall
+
-
+
+
+
filtered
+
-
+
highest wpm
-
@@ -504,6 +515,9 @@ +
+ load more +
diff --git a/public/js/account.js b/public/js/account.js index 67791eccd..baea92d7c 100644 --- a/public/js/account.js +++ b/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 = '
punctuation'; + } + let diff = result.difficulty; + if (result.difficulty == undefined){ + diff = 'normal'; + } + + $(".pageAccount .history table tbody").append(` + + ${result.wpm} + ${result.acc}% + ${result.correctChars} + ${result.incorrectChars} + ${result.mode}
${result.mode2}${withpunc} + ${diff} + ${result.language.replace('_','
')} + ${moment(result.timestamp).format('DD MMM YYYY HH:mm')} + `); + } +} + 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 = '
punctuation'; - } - let diff = result.difficulty; - if (result.difficulty == undefined){ - diff = 'normal'; - } - $(".pageAccount .history table tbody").append(` - - ${result.wpm} - ${result.acc}% - ${result.correctChars} - ${result.incorrectChars} - ${result.mode}
${result.mode2}${withpunc} - ${diff} - ${result.language.replace('_','
')} - ${moment(result.timestamp).format('DD MMM YYYY HH:mm')} - `) + + + 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));