monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-21 07:46:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

updated the filter buttons

Browse source
This commit is contained in:
unknown 2020-05-24 21:58:13 +01:00
parent 866b7bc801
commit 2c6a1deddb
3 changed files with 122 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public/css/style.scss
View file

@ -340,7 +340,7 @@ a:hover {
display: grid;
grid-auto-flow: column;
gap: .5rem;
margin-bottom: -0.4rem;
margin-bottom: -0.4rem;
width: fit-content;
width: -moz-fit-content;
/* transition: 0.25s; */
@ -952,6 +952,20 @@ key {
font-size: 3rem;
line-height: 3rem;
}
&.chart{
position: relative;
.chartPreloader{
position: absolute;
width: 100%;
background: rgba(0,0,0,0.5);
height: 100%;
display: grid;
align-items: center;
justify-content: center;
font-size: 5rem;
text-shadow: 0 0 3rem black;
}
}
}
table{
border-spacing:0;
@ -973,7 +987,10 @@ key {
.group.filterButtons{
gap: 1rem;
display: grid;
grid-template-columns: 1fr 1fr;
.buttonsAndTitle{
height: fit-content;
height: -moz-fit-content;
display: grid;
gap: .25rem;
color: var(--sub-color);

55
public/index.html
View file

@ -278,7 +278,7 @@
<div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>
<div class="content hidden">
<div class="group filterButtons">
<div class="buttonsAndTitle">
<div class="buttonsAndTitle" style="grid-column:1/3;">
<div class="title">filters</div>
<div class="buttons globalFilters">
<div class="button" filter="all">all</div>
@ -288,38 +288,40 @@
<div class="buttonsAndTitle">
<div class="title">mode</div>
<div class="buttons modeFilters">
<div class="button" filter="words">words</div>
<div class="button" filter="time">time</div>
<div class="button" filter="custom">custom</div>
</div>
</div>
<div class="buttonsAndTitle">
<div class="title">words</div>
<div class="buttons wordsFilter">
<div class="button" filter="10">10</div>
<div class="button" filter="25">25</div>
<div class="button" filter="50">50</div>
<div class="button" filter="100">100</div>
<div class="button" filter="200">200</div>
</div>
</div>
<div class="buttonsAndTitle">
<div class="title">time</div>
<div class="buttons timeFilter">
<div class="button" filter="15">15</div>
<div class="button" filter="30">30</div>
<div class="button" filter="60">60</div>
<div class="button" filter="120">120</div>
<div class="button" filter="mode_words">words</div>
<div class="button" filter="mode_time">time</div>
<div class="button" filter="mode_custom">custom</div>
</div>
</div>
<div class="buttonsAndTitle">
<div class="title">punctuation</div>
<div class="buttons punctuationFilter">
<div class="button" filter="puncOn">on</div>
<div class="button" filter="puncOff">off</div>
<div class="button" filter="punc_on">on</div>
<div class="button" filter="punc_off">off</div>
</div>
</div>
<div class="buttonsAndTitle">
<div class="title">words</div>
<div class="buttons wordsFilter">
<div class="button" filter="words_10">10</div>
<div class="button" filter="words_25">25</div>
<div class="button" filter="words_50">50</div>
<div class="button" filter="words_100">100</div>
<div class="button" filter="words_200">200</div>
<div class="button" filter="words_custom">custom</div>
</div>
</div>
<div class="buttonsAndTitle">
<div class="title">time</div>
<div class="buttons timeFilter">
<div class="button" filter="time_15">15</div>
<div class="button" filter="time_30">30</div>
<div class="button" filter="time_60">60</div>
<div class="button" filter="time_120">120</div>
<div class="button" filter="time_custom">custom</div>
</div>
</div>
<div class="buttonsAndTitle" style="grid-column:1/3;">
<div class="title">language</div>
<div class="buttons languages">
@ -327,6 +329,9 @@
</div>
</div>
<div class="group chart">
<!-- <div class="chartPreloader">
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
</div> -->
<div class="title"></div>
<div class="chart">
<canvas id="resultHistoryChart"></canvas>

122
public/js/account.js
View file

@ -252,9 +252,13 @@ let activeFilters = ["all"];
$(document).ready(e =>{
activeFilters = config.resultFilters;
console.log(activeFilters);
activeFilters.forEach(filter => {
enableFilterButton(filter);
})
if(activeFilters.includes("all")){
toggleFilterButton("all")
}else{
activeFilters.forEach(filter => {
toggleFilterButton(filter);
})
}
})
@ -265,20 +269,20 @@ function toggleFilterButton(filter){
if(filter == 'all' || filter == 'none'){
return;
}else if(filter == "words"){
$.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
let f = $(obj).attr('filter')
disableFilterButton(f)
})
}else if(filter == "time"){
$.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
let f = $(obj).attr('filter')
disableFilterButton(f)
})
}else if(filter == "puncOff"){
enableFilterButton("puncOn");
}else if(filter == "puncOn"){
enableFilterButton("puncOff");
}else if(filter == "mode_words"){
// $.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
// let f = $(obj).attr('filter')
// disableFilterButton(f)
// })
}else if(filter == "mode_time"){
// $.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
// let f = $(obj).attr('filter')
// disableFilterButton(f)
// })
}else if(filter == "punc_off"){
enableFilterButton("punc_on");
}else if(filter == "punc_on"){
enableFilterButton("punc_off");
}
disableFilterButton(filter);
disableFilterButton('all');
@ -302,21 +306,22 @@ function toggleFilterButton(filter){
disableFilterButton(f);
}
})
}else if(filter == "words"){
$.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
let f = $(obj).attr('filter');
enableFilterButton(f);
})
}else if(filter == "time"){
$.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
let f = $(obj).attr('filter');
enableFilterButton(f);
})
}else if(['10','25','50','100','200'].includes(filter)){
enableFilterButton('words');
}else if(['15','30','60','120'].includes(filter)){
enableFilterButton('time');
}
// else if(filter == "mode_words"){
// $.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
// let f = $(obj).attr('filter');
// enableFilterButton(f);
// })
// }else if(filter == "mode_time"){
// $.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
// let f = $(obj).attr('filter');
// enableFilterButton(f);
// })
// }else if(['10','25','50','100','200'].includes(filter)){
// enableFilterButton('words');
// }else if(['15','30','60','120'].includes(filter)){
// enableFilterButton('time');
// }
enableFilterButton(filter);
}
@ -344,6 +349,19 @@ function updateActiveFilters(){
}
function showChartPreloader(){
$(".pageAccount .group.chart .preloader").stop(true,true).animate({
opacity: 1
},125);
}
function hideChartPreloader(){
$(".pageAccount .group.chart .preloader").stop(true,true).animate({
opacity: 0
},125);
}
$('.pageAccount .filterButtons').click('.button',e =>{
const filter = $(e.target).attr('filter');
toggleFilterButton(filter);
@ -367,24 +385,30 @@ function refreshAccountPage() {
let wpmLast10count = 0;
$(".pageAccount .history table tbody").empty();
dbSnapshot.forEach(result => {
// console.log(result);
//apply filters
if(!activeFilters.includes(result.mode)){
return;
if(!activeFilters.includes("mode_"+result.mode)) return;
if(result.mode == "time"){
let timefilter = "time_custom";
if([15,30,60,120].includes(parseInt(result.mode2))){
timefilter = "time_"+result.mode2;
}
if(!activeFilters.includes(timefilter)) return;
}else if(result.mode == "words"){
let wordfilter = "words_custom";
if([10,25,50,100,200].includes(parseInt(result.mode2))){
wordfilter = "words_"+result.mode2;
}
if(!activeFilters.includes(wordfilter)) return;
}
if(!activeFilters.includes(String(result.mode2))){
return;
}
if(!activeFilters.includes(result.language)){
return;
}
let puncfilter = "puncOff";
if(!activeFilters.includes(result.language)) return;
let puncfilter = "punc_off";
if(result.punctuation){
puncfilter = "puncOn";
}
if(!activeFilters.includes(puncfilter)){
return;
puncfilter = "punc_on";
}
if(!activeFilters.includes(puncfilter)) return;
if(wpmLast10count < 10){
wpmLast10count++;
@ -408,7 +432,7 @@ function refreshAccountPage() {
<td>${result.incorrectChars}</td>
<td>${result.mode} ${result.mode2}</td>
<td>${withpunc}</td>
<td>${result.language.replace('_',' ')}</td>
<td>${result.language.replace('_','<br>')}</td>
<td>${moment(result.timestamp).format('DD MMM YYYY HH:mm')}</td>
</tr>`)
chartData.push({
@ -423,7 +447,9 @@ function refreshAccountPage() {
});
if (result.wpm > topWpm) {
let puncsctring = result.punctuation ? ",<br>with punctuation" : "";
topWpm = result.wpm;
topMode = result.mode + " " + result.mode2 + puncsctring;
}
totalWpm += result.wpm;
@ -445,7 +471,7 @@ function refreshAccountPage() {
$(".pageAccount .highestWpm .val").text(topWpm);
$(".pageAccount .averageWpm .val").text(Math.round(totalWpm/testCount));
$(".pageAccount .averageWpm10 .val").text(Math.round(wpmLast10total/wpmLast10count));
// $(".pageAccount .highestWpm .mode").html(topMode);
$(".pageAccount .highestWpm .mode").html(topMode);
$(".pageAccount .testsTaken .val").text(testCount);
$(".pageAccount .testsStarted .val").text(
@ -486,7 +512,7 @@ function refreshAccountPage() {
// }
resultHistoryChart.update();
resultHistoryChart.update({duration: 0});
swapElements($(".pageAccount .preloader"), $(".pageAccount .content"), 250);
}