From 3c956cbd547dbe103994baaee263efbedd3a7d0d Mon Sep 17 00:00:00 2001 From: Jack Date: Sun, 13 Sep 2020 21:21:01 +0100 Subject: [PATCH] cleaned up the filters, made them a togglable element --- public/css/style.scss | 9 + public/index.html | 47 +++-- public/js/account.js | 406 +++++++++++++++++++++++++----------------- 3 files changed, 277 insertions(+), 185 deletions(-) diff --git a/public/css/style.scss b/public/css/style.scss index 56947c858..32eba6cc6 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -2140,6 +2140,15 @@ key { gap: 2rem; } + .topFilters .buttons{ + display: flex; + justify-content: space-evenly; + gap: 1rem; + .button{ + width: 100%; + } + } + // .hoverChartWrapper { // z-index: 999; // display: none; diff --git a/public/index.html b/public/index.html index ed91926e8..7c83786b1 100644 --- a/public/index.html +++ b/public/index.html @@ -2468,38 +2468,37 @@
tests completed
-
-
+
time typing
-
-
-
+
filters
all
-
none
+
+ current settings +
+
+ advanced +
-
-
punctuation
-
-
on
-
off
-
-
-
-
numbers
-
-
on
-
off
+
+ +
+
punctuation
+
+
on
+
off
+
+
+
+
numbers
+
+
on
+
off
+
+
date
diff --git a/public/js/account.js b/public/js/account.js index d4c7195a1..87531c6e7 100644 --- a/public/js/account.js +++ b/public/js/account.js @@ -1128,76 +1128,189 @@ function showActiveFilters() { }); }); - let chartString = ""; - let allall = true; - let count = 0; - Object.keys(aboveChartDisplay).forEach((group) => { - count++; - if (group === "time" && !aboveChartDisplay.mode.array.includes("time")) - return; - if (group === "words" && !aboveChartDisplay.mode.array.includes("words")) - return; - - if (aboveChartDisplay[group].array.length > 0) { - chartString += "
"; - if (group == "difficulty") { - chartString += ``; - } else if (group == "mode") { - chartString += ``; - } else if (group == "punctuation") { - chartString += ``; + } else if (group == "mode") { + ret += ``; + } else if (group == "punctuation") { + ret += `!?`; + } else if (group == "numbers") { + ret += `!?`; - } else if (group == "numbers") { - chartString += `15`; - } else if (group == "words") { - chartString += ``; - } else if (group == "time") { - chartString += ``; - } else if (group == "date") { - chartString += ``; - } else if (group == "tags") { - chartString += ``; - } else if (group == "language") { - chartString += ``; - } else if (group == "funbox") { - chartString += ``; - } - - if (aboveChartDisplay[group].all) { - chartString += "all"; - } else { - allall = false; - if (group === "tags") { - chartString += aboveChartDisplay.tags.array - .map((id) => { - if (id == "none") return id; - let name = dbSnapshot.tags.filter((t) => t.id == id)[0]; - if (name !== undefined) { - return dbSnapshot.tags.filter((t) => t.id == id)[0].name; - } - }) - .join(", "); - } else { - chartString += aboveChartDisplay[group].array - .join(", ") - .replace(/_/g, " "); - } - } - chartString += "
"; - if (Object.keys(aboveChartDisplay).length !== count) - chartString += `
`; + letter-spacing: -.1rem;">15`; + } else if (group == "words") { + ret += ``; + } else if (group == "time") { + ret += ``; + } else if (group == "date") { + ret += ``; + } else if (group == "tags") { + ret += ``; + } else if (group == "language") { + ret += ``; + } else if (group == "funbox") { + ret += ``; } - }); + if (aboveChartDisplay[group].all) { + ret += "all"; + } else { + allall = false; + if (group === "tags") { + ret += aboveChartDisplay.tags.array + .map((id) => { + if (id == "none") return id; + let name = dbSnapshot.tags.filter((t) => t.id == id)[0]; + if (name !== undefined) { + return dbSnapshot.tags.filter((t) => t.id == id)[0].name; + } + }) + .join(", "); + } else { + ret += aboveChartDisplay[group].array + .join(", ") + .replace(/_/g, " "); + } + } + ret += "
"; + return ret; + } + + let chartString = ""; + + //date + chartString += addText("date"); + chartString += `
`; + + //mode + chartString += addText("mode"); + chartString += `
`; + + //time + if (aboveChartDisplay.mode.array.includes("time")) { + chartString += addText("time"); + chartString += `
`; + } + + //words + if (aboveChartDisplay.mode.array.includes("words")) { + chartString += addText("words"); + chartString += `
`; + } + + //diff + chartString += addText("difficulty"); + chartString += `
`; + + //punc + chartString += addText("punctuation"); + chartString += `
`; + + //numbers + chartString += addText("numbers"); + chartString += `
`; + + //language + chartString += addText("language"); + chartString += `
`; + + //funbox + chartString += addText("funbox"); + chartString += `
`; + + //tags + chartString += addText("tags"); + // chartString += `
`; + + + + + + // let allall = true; + // let count = 0; + // Object.keys(aboveChartDisplay).forEach((group) => { + // count++; + // if (group === "time" && !aboveChartDisplay.mode.array.includes("time")) + // return; + // if (group === "words" && !aboveChartDisplay.mode.array.includes("words")) + // return; + + // if (aboveChartDisplay[group].array.length > 0) { + // chartString += "
"; + // if (group == "difficulty") { + // chartString += ``; + // } else if (group == "mode") { + // chartString += ``; + // } else if (group == "punctuation") { + // chartString += `!?`; + // } else if (group == "numbers") { + // chartString += `15`; + // } else if (group == "words") { + // chartString += ``; + // } else if (group == "time") { + // chartString += ``; + // } else if (group == "date") { + // chartString += ``; + // } else if (group == "tags") { + // chartString += ``; + // } else if (group == "language") { + // chartString += ``; + // } else if (group == "funbox") { + // chartString += ``; + // } + + // if (aboveChartDisplay[group].all) { + // chartString += "all"; + // } else { + // allall = false; + // if (group === "tags") { + // chartString += aboveChartDisplay.tags.array + // .map((id) => { + // if (id == "none") return id; + // let name = dbSnapshot.tags.filter((t) => t.id == id)[0]; + // if (name !== undefined) { + // return dbSnapshot.tags.filter((t) => t.id == id)[0].name; + // } + // }) + // .join(", "); + // } else { + // chartString += aboveChartDisplay[group].array + // .join(", ") + // .replace(/_/g, " "); + // } + // } + // chartString += "
"; + // if (Object.keys(aboveChartDisplay).length !== count) + // chartString += `
`; + // } + // }); + + // if (allall) chartString = `all`; + + + + + + - if (allall) chartString = `all`; $(".pageAccount .group.chart .above").html(chartString); @@ -1222,6 +1335,66 @@ function hideChartPreloader() { ); } +$(".pageAccount .topFilters .button.allFilters").click((e) => { + Object.keys(config.resultFilters).forEach((group) => { + Object.keys(config.resultFilters[group]).forEach((filter) => { + if (group === "date") { + config.resultFilters[group][filter] = false; + } else { + config.resultFilters[group][filter] = true; + } + }); + }); + config.resultFilters.date.all = true; + showActiveFilters(); + saveConfigToCookie(); +}) + +$(".pageAccount .topFilters .button.currentConfigFilter").click((e) => { + + Object.keys(config.resultFilters).forEach((group) => { + Object.keys(config.resultFilters[group]).forEach((filter) => { + config.resultFilters[group][filter] = false; + }); + }); + + config.resultFilters.difficulty[config.difficulty] = true; + config.resultFilters.mode[config.mode] = true; + if (config.mode === "time") { + config.resultFilters.time[config.time] = true; + } else if (config.mode === "words") { + config.resultFilters.words[config.words] = true; + } + if (config.punctuation) { + config.resultFilters.punctuation.on = true; + } else { + config.resultFilters.punctuation.off = true; + } + if (config.numbers) { + config.resultFilters.numbers.on = true; + } else { + config.resultFilters.numbers.off = true; + } + config.resultFilters.language[config.language] = true; + config.resultFilters.funbox[activeFunBox] = true; + config.resultFilters.tags.none = true; + dbSnapshot.tags.forEach((tag) => { + if (tag.active === true) { + config.resultFilters.tags.none = false; + config.resultFilters.tags[tag.id] = true; + } + }); + + config.resultFilters.date.all = true; + + showActiveFilters(); + saveConfigToCookie(); +}) + +$(".pageAccount .topFilters .button.toggleAdvancedFilters").click((e) => { + $(".pageAccount .filterButtons").slideToggle(250); +}) + $(".pageAccount .filterButtons .buttonsAndTitle .buttons").click( ".button", (e) => { @@ -1260,109 +1433,6 @@ $(".pageAccount .filterButtons .buttonsAndTitle .buttons").click( } ); -$(".pageAccount #currentConfigFilter").click((e) => { - // let disableGroups = [ - // "globalFilters", - // "difficultyFilters", - // "modeFilters", - // "punctuationFilter", - // "wordsFilter", - // "timeFilter", - // "languages", - // "tags", - // "funbox", - // ]; - // disableGroups.forEach((group) => { - // $.each( - // $(`.pageAccount .filterButtons .buttons.${group} .button`), - // (index, button) => { - // let fl = $(button).attr("filter"); - // disableFilterButton(fl); - // config.resultFilters = config.resultFilters.filter((f) => f !== fl); - // } - // ); - // }); - // showActiveFilters(); - - Object.keys(config.resultFilters).forEach((group) => { - Object.keys(config.resultFilters[group]).forEach((filter) => { - config.resultFilters[group][filter] = false; - }); - }); - - //rewrite this monstrosity soon pls - // config.resultFilters.push(`difficulty_${config.difficulty}`); - // toggleFilterButton(`difficulty_${config.difficulty}`); - // config.resultFilters.push(`mode_${config.mode}`); - // toggleFilterButton(`mode_${config.mode}`); - // if (config.mode === "time") { - // config.resultFilters.push(`time_${config.time}`); - // toggleFilterButton(`time_${config.time}`); - // } else if (config.mode === "words") { - // config.resultFilters.push(`words_${config.words}`); - // toggleFilterButton(`words_${config.words}`); - // } - // let puncfilter = config.punctuation ? "punc_on" : "punc_off"; - // config.resultFilters.push(puncfilter); - // toggleFilterButton(puncfilter); - // config.resultFilters.push(`lang_${config.language}`); - // toggleFilterButton(`lang_${config.language}`); - - // config.resultFilters.push(`funbox_${activeFunBox}`); - // toggleFilterButton(`funbox_${activeFunBox}`); - - // let activeTags = []; - // try { - // dbSnapshot.tags.forEach((tag) => { - // if (tag.active === true) { - // activeTags.push(tag.id); - // } - // }); - // } catch (e) {} - - // if (activeTags.length > 0) { - // activeTags.forEach((tag) => { - // config.resultFilters.push(`tag_${tag}`); - // toggleFilterButton(`tag_${tag}`); - // }); - // } else { - // config.resultFilters.push(`tag_notag`); - // toggleFilterButton(`tag_notag`); - // } - - config.resultFilters.difficulty[config.difficulty] = true; - config.resultFilters.mode[config.mode] = true; - if (config.mode === "time") { - config.resultFilters.time[config.time] = true; - } else if (config.mode === "words") { - config.resultFilters.words[config.words] = true; - } - if (config.punctuation) { - config.resultFilters.punctuation.on = true; - } else { - config.resultFilters.punctuation.off = true; - } - if (config.numbers) { - config.resultFilters.numbers.on = true; - } else { - config.resultFilters.numbers.off = true; - } - config.resultFilters.language[config.language] = true; - config.resultFilters.funbox[activeFunBox] = true; - config.resultFilters.tags.none = true; - dbSnapshot.tags.forEach((tag) => { - if (tag.active === true) { - config.resultFilters.tags.none = false; - config.resultFilters.tags[tag.id] = true; - } - }); - - config.resultFilters.date.all = true; - - showActiveFilters(); - saveConfigToCookie(); -}); - let filteredResults = []; let visibleTableLines = 0;