Skip to content

Commit d02c2e7

Browse files
MiodecMiodec
committed
updated the filter buttons
1 parent 98596fb commit d02c2e7

3 files changed

Lines changed: 118 additions & 70 deletions

File tree

‎public/css/style.scss‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -340,7 +340,7 @@ a:hover {
340340
display: grid;
341341
grid-auto-flow: column;
342342
gap: .5rem;
343-
margin-bottom: -0.4rem;
343+
margin-bottom: -0.4rem;
344344
width: fit-content;
345345
width: -moz-fit-content;
346346
/* transition: 0.25s; */
@@ -952,6 +952,20 @@ key {
952952
font-size: 3rem;
953953
line-height: 3rem;
954954
}
955+
&.chart{
956+
position: relative;
957+
.chartPreloader{
958+
position: absolute;
959+
width: 100%;
960+
background: rgba(0,0,0,0.5);
961+
height: 100%;
962+
display: grid;
963+
align-items: center;
964+
justify-content: center;
965+
font-size: 5rem;
966+
text-shadow: 0 0 3rem black;
967+
}
968+
}
955969
}
956970
table{
957971
border-spacing:0;
@@ -973,7 +987,10 @@ key {
973987
.group.filterButtons{
974988
gap: 1rem;
975989
display: grid;
990+
grid-template-columns: 1fr 1fr;
976991
.buttonsAndTitle{
992+
height: fit-content;
993+
height: -moz-fit-content;
977994
display: grid;
978995
gap: .25rem;
979996
color: var(--sub-color);

‎public/index.html‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ <h1>theme</h1>
278278
<div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>
279279
<div class="content hidden">
280280
<div class="group filterButtons">
281-
<div class="buttonsAndTitle">
281+
<div class="buttonsAndTitle" style="grid-column:1/3;">
282282
<div class="title">filters</div>
283283
<div class="buttons globalFilters">
284284
<div class="button" filter="all">all</div>
@@ -288,45 +288,50 @@ <h1>theme</h1>
288288
<div class="buttonsAndTitle">
289289
<div class="title">mode</div>
290290
<div class="buttons modeFilters">
291-
<div class="button" filter="words">words</div>
292-
<div class="button" filter="time">time</div>
293-
<div class="button" filter="custom">custom</div>
291+
<div class="button" filter="mode_words">words</div>
292+
<div class="button" filter="mode_time">time</div>
293+
<div class="button" filter="mode_custom">custom</div>
294+
</div>
295+
</div>
296+
<div class="buttonsAndTitle">
297+
<div class="title">punctuation</div>
298+
<div class="buttons punctuationFilter">
299+
<div class="button" filter="punc_on">on</div>
300+
<div class="button" filter="punc_off">off</div>
294301
</div>
295302
</div>
296303
<div class="buttonsAndTitle">
297304
<div class="title">words</div>
298305
<div class="buttons wordsFilter">
299-
<div class="button" filter="10">10</div>
300-
<div class="button" filter="25">25</div>
301-
<div class="button" filter="50">50</div>
302-
<div class="button" filter="100">100</div>
303-
<div class="button" filter="200">200</div>
306+
<div class="button" filter="words_10">10</div>
307+
<div class="button" filter="words_25">25</div>
308+
<div class="button" filter="words_50">50</div>
309+
<div class="button" filter="words_100">100</div>
310+
<div class="button" filter="words_200">200</div>
311+
<div class="button" filter="words_custom">custom</div>
304312
</div>
305313
</div>
306314
<div class="buttonsAndTitle">
307315
<div class="title">time</div>
308316
<div class="buttons timeFilter">
309-
<div class="button" filter="15">15</div>
310-
<div class="button" filter="30">30</div>
311-
<div class="button" filter="60">60</div>
312-
<div class="button" filter="120">120</div>
317+
<div class="button" filter="time_15">15</div>
318+
<div class="button" filter="time_30">30</div>
319+
<div class="button" filter="time_60">60</div>
320+
<div class="button" filter="time_120">120</div>
321+
<div class="button" filter="time_custom">custom</div>
313322
</div>
314323
</div>
315-
<div class="buttonsAndTitle">
316-
<div class="title">punctuation</div>
317-
<div class="buttons punctuationFilter">
318-
<div class="button" filter="puncOn">on</div>
319-
<div class="button" filter="puncOff">off</div>
320-
</div>
321-
</div>
322-
<div class="buttonsAndTitle">
324+
<div class="buttonsAndTitle" style="grid-column:1/3;">
323325
<div class="title">language</div>
324326
<div class="buttons languages">
325327

326328
</div>
327329
</div>
328330
</div>
329331
<div class="group chart">
332+
<!-- <div class="chartPreloader">
333+
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
334+
</div> -->
330335
<div class="title"></div>
331336
<div class="chart">
332337
<canvas id="resultHistoryChart"></canvas>

‎public/js/account.js‎

Lines changed: 74 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -252,9 +252,13 @@ let activeFilters = ["all"];
252252
$(document).ready(e =>{
253253
activeFilters = config.resultFilters;
254254
console.log(activeFilters);
255-
activeFilters.forEach(filter => {
256-
enableFilterButton(filter);
257-
})
255+
if(activeFilters.includes("all")){
256+
toggleFilterButton("all")
257+
}else{
258+
activeFilters.forEach(filter => {
259+
toggleFilterButton(filter);
260+
})
261+
}
258262
})
259263

260264

@@ -265,20 +269,20 @@ function toggleFilterButton(filter){
265269

266270
if(filter == 'all' || filter == 'none'){
267271
return;
268-
}else if(filter == "words"){
269-
$.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
270-
let f = $(obj).attr('filter')
271-
disableFilterButton(f)
272-
})
273-
}else if(filter == "time"){
274-
$.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
275-
let f = $(obj).attr('filter')
276-
disableFilterButton(f)
277-
})
278-
}else if(filter == "puncOff"){
279-
enableFilterButton("puncOn");
280-
}else if(filter == "puncOn"){
281-
enableFilterButton("puncOff");
272+
}else if(filter == "mode_words"){
273+
// $.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
274+
// let f = $(obj).attr('filter')
275+
// disableFilterButton(f)
276+
// })
277+
}else if(filter == "mode_time"){
278+
// $.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
279+
// let f = $(obj).attr('filter')
280+
// disableFilterButton(f)
281+
// })
282+
}else if(filter == "punc_off"){
283+
enableFilterButton("punc_on");
284+
}else if(filter == "punc_on"){
285+
enableFilterButton("punc_off");
282286
}
283287
disableFilterButton(filter);
284288
disableFilterButton('all');
@@ -302,21 +306,22 @@ function toggleFilterButton(filter){
302306
disableFilterButton(f);
303307
}
304308
})
305-
}else if(filter == "words"){
306-
$.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
307-
let f = $(obj).attr('filter');
308-
enableFilterButton(f);
309-
})
310-
}else if(filter == "time"){
311-
$.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
312-
let f = $(obj).attr('filter');
313-
enableFilterButton(f);
314-
})
315-
}else if(['10','25','50','100','200'].includes(filter)){
316-
enableFilterButton('words');
317-
}else if(['15','30','60','120'].includes(filter)){
318-
enableFilterButton('time');
319309
}
310+
// else if(filter == "mode_words"){
311+
// $.each($(`.pageAccount .content .filterButtons .buttons.wordsFilter .button`),(index,obj)=>{
312+
// let f = $(obj).attr('filter');
313+
// enableFilterButton(f);
314+
// })
315+
// }else if(filter == "mode_time"){
316+
// $.each($(`.pageAccount .content .filterButtons .buttons.timeFilter .button`),(index,obj)=>{
317+
// let f = $(obj).attr('filter');
318+
// enableFilterButton(f);
319+
// })
320+
// }else if(['10','25','50','100','200'].includes(filter)){
321+
// enableFilterButton('words');
322+
// }else if(['15','30','60','120'].includes(filter)){
323+
// enableFilterButton('time');
324+
// }
320325

321326
enableFilterButton(filter);
322327
}
@@ -344,6 +349,19 @@ function updateActiveFilters(){
344349
}
345350

346351

352+
function showChartPreloader(){
353+
$(".pageAccount .group.chart .preloader").stop(true,true).animate({
354+
opacity: 1
355+
},125);
356+
}
357+
358+
function hideChartPreloader(){
359+
$(".pageAccount .group.chart .preloader").stop(true,true).animate({
360+
opacity: 0
361+
},125);
362+
}
363+
364+
347365
$('.pageAccount .filterButtons').click('.button',e =>{
348366
const filter = $(e.target).attr('filter');
349367
toggleFilterButton(filter);
@@ -367,24 +385,30 @@ function refreshAccountPage() {
367385
let wpmLast10count = 0;
368386
$(".pageAccount .history table tbody").empty();
369387
dbSnapshot.forEach(result => {
370-
388+
// console.log(result);
371389
//apply filters
372-
if(!activeFilters.includes(result.mode)){
373-
return;
374-
}
375-
if(!activeFilters.includes(String(result.mode2))){
376-
return;
377-
}
378-
if(!activeFilters.includes(result.language)){
379-
return;
390+
if(!activeFilters.includes("mode_"+result.mode)) return;
391+
if(result.mode == "time"){
392+
let timefilter = "time_custom";
393+
if([15,30,60,120].includes(parseInt(result.mode2))){
394+
timefilter = "time_"+result.mode2;
395+
}
396+
if(!activeFilters.includes(timefilter)) return;
397+
}else if(result.mode == "words"){
398+
let wordfilter = "words_custom";
399+
if([10,25,50,100,200].includes(parseInt(result.mode2))){
400+
wordfilter = "words_"+result.mode2;
401+
}
402+
if(!activeFilters.includes(wordfilter)) return;
380403
}
381-
let puncfilter = "puncOff";
404+
405+
if(!activeFilters.includes(result.language)) return;
406+
407+
let puncfilter = "punc_off";
382408
if(result.punctuation){
383-
puncfilter = "puncOn";
384-
}
385-
if(!activeFilters.includes(puncfilter)){
386-
return;
409+
puncfilter = "punc_on";
387410
}
411+
if(!activeFilters.includes(puncfilter)) return;
388412

389413
if(wpmLast10count < 10){
390414
wpmLast10count++;
@@ -408,7 +432,7 @@ function refreshAccountPage() {
408432
<td>${result.incorrectChars}</td>
409433
<td>${result.mode} ${result.mode2}</td>
410434
<td>${withpunc}</td>
411-
<td>${result.language.replace('_',' ')}</td>
435+
<td>${result.language.replace('_','<br>')}</td>
412436
<td>${moment(result.timestamp).format('DD MMM YYYY HH:mm')}</td>
413437
</tr>`)
414438
chartData.push({
@@ -423,7 +447,9 @@ function refreshAccountPage() {
423447
});
424448

425449
if (result.wpm > topWpm) {
450+
let puncsctring = result.punctuation ? ",<br>with punctuation" : "";
426451
topWpm = result.wpm;
452+
topMode = result.mode + " " + result.mode2 + puncsctring;
427453
}
428454

429455
totalWpm += result.wpm;
@@ -445,7 +471,7 @@ function refreshAccountPage() {
445471
$(".pageAccount .highestWpm .val").text(topWpm);
446472
$(".pageAccount .averageWpm .val").text(Math.round(totalWpm/testCount));
447473
$(".pageAccount .averageWpm10 .val").text(Math.round(wpmLast10total/wpmLast10count));
448-
// $(".pageAccount .highestWpm .mode").html(topMode);
474+
$(".pageAccount .highestWpm .mode").html(topMode);
449475
$(".pageAccount .testsTaken .val").text(testCount);
450476

451477
$(".pageAccount .testsStarted .val").text(
@@ -486,7 +512,7 @@ function refreshAccountPage() {
486512
// }
487513

488514

489-
resultHistoryChart.update();
515+
resultHistoryChart.update({duration: 0});
490516

491517
swapElements($(".pageAccount .preloader"), $(".pageAccount .content"), 250);
492518
}

0 commit comments

Comments
 (0)