mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-03-10 21:53:13 +08:00
cleaned up the filters, made them a togglable element
This commit is contained in:
Jack
parent
5b70c13da6
commit
3c956cbd54
3 changed files with 277 additions and 185 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -2468,38 +2468,37 @@
|
|||
<div class="title">tests completed</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="group globalTimeTyping" style="margin-bottom: 2rem;">
|
||||
<div class="group globalTimeTyping">
|
||||
<div class="title">time typing</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group filterButtons">
|
||||
<div
|
||||
<div class="group topFilters">
|
||||
<!-- <div
|
||||
class="button"
|
||||
id="currentConfigFilter"
|
||||
style="grid-column: 1/3;"
|
||||
>
|
||||
set filters to current settings
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="buttonsAndTitle" style="grid-column: 1/3;">
|
||||
<div class="title">filters</div>
|
||||
<div class="buttons">
|
||||
<div class="button allFilters">all</div>
|
||||
<div class="button noFilters">none</div>
|
||||
<div class="button currentConfigFilter">
|
||||
current settings
|
||||
</div>
|
||||
<div class="button toggleAdvancedFilters">
|
||||
advanced
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">punctuation</div>
|
||||
<div class="buttons filterGroup" group="punctuation">
|
||||
<div class="button" filter="on">on</div>
|
||||
<div class="button" filter="off">off</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">numbers</div>
|
||||
<div class="buttons filterGroup" group="numbers">
|
||||
<div class="button" filter="on">on</div>
|
||||
<div class="button" filter="off">off</div>
|
||||
</div>
|
||||
<div class="group filterButtons" style="display:none">
|
||||
<div class="buttonsAndTitle" style="grid-column: 1/3;">
|
||||
<div class="title">advanced filters</div>
|
||||
<div class="buttons">
|
||||
<div class="button noFilters">clear filters</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
|
|
@ -2540,6 +2539,20 @@
|
|||
<div class="button" filter="custom">custom</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">punctuation</div>
|
||||
<div class="buttons filterGroup" group="punctuation">
|
||||
<div class="button" filter="on">on</div>
|
||||
<div class="button" filter="off">off</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">numbers</div>
|
||||
<div class="buttons filterGroup" group="numbers">
|
||||
<div class="button" filter="on">on</div>
|
||||
<div class="button" filter="off">off</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle testDate" style="grid-column: 1/3;">
|
||||
<div class="title">date</div>
|
||||
<div class="buttons filterGroup" group="date">
|
||||
|
|
|
|||
|
|
@ -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 += "<div class='group'>";
|
||||
if (group == "difficulty") {
|
||||
chartString += `<span aria-label="Difficulty" data-balloon-pos="up"><i class="fas fa-fw fa-star"></i>`;
|
||||
} else if (group == "mode") {
|
||||
chartString += `<span aria-label="Mode" data-balloon-pos="up"><i class="fas fa-fw fa-bars"></i>`;
|
||||
} else if (group == "punctuation") {
|
||||
chartString += `<span aria-label="Punctuation" data-balloon-pos="up"><span class="punc" style="font-weight: 900;
|
||||
function addText(group) {
|
||||
let ret = "";
|
||||
ret += "<div class='group'>";
|
||||
if (group == "difficulty") {
|
||||
ret += `<span aria-label="Difficulty" data-balloon-pos="up"><i class="fas fa-fw fa-star"></i>`;
|
||||
} else if (group == "mode") {
|
||||
ret += `<span aria-label="Mode" data-balloon-pos="up"><i class="fas fa-fw fa-bars"></i>`;
|
||||
} else if (group == "punctuation") {
|
||||
ret += `<span aria-label="Punctuation" data-balloon-pos="up"><span class="punc" style="font-weight: 900;
|
||||
width: 1.25rem;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
letter-spacing: -.1rem;">!?</span>`;
|
||||
} else if (group == "numbers") {
|
||||
ret += `<span aria-label="Numbers" data-balloon-pos="up"><span class="numbers" style="font-weight: 900;
|
||||
width: 1.25rem;
|
||||
text-align: center;
|
||||
margin-right: .1rem;
|
||||
display: inline-block;
|
||||
letter-spacing: -.1rem;">!?</span>`;
|
||||
} else if (group == "numbers") {
|
||||
chartString += `<span aria-label="Numbers" data-balloon-pos="up"><span class="numbers" style="font-weight: 900;
|
||||
width: 1.25rem;
|
||||
text-align: center;
|
||||
margin-right: .1rem;
|
||||
display: inline-block;
|
||||
letter-spacing: -.1rem;">15</span>`;
|
||||
} else if (group == "words") {
|
||||
chartString += `<span aria-label="Words" data-balloon-pos="up"><i class="fas fa-fw fa-font"></i>`;
|
||||
} else if (group == "time") {
|
||||
chartString += `<span aria-label="Time" data-balloon-pos="up"><i class="fas fa-fw fa-clock"></i>`;
|
||||
} else if (group == "date") {
|
||||
chartString += `<span aria-label="Date" data-balloon-pos="up"><i class="fas fa-fw fa-calendar"></i>`;
|
||||
} else if (group == "tags") {
|
||||
chartString += `<span aria-label="Tags" data-balloon-pos="up"><i class="fas fa-fw fa-tags"></i>`;
|
||||
} else if (group == "language") {
|
||||
chartString += `<span aria-label="Language" data-balloon-pos="up"><i class="fas fa-fw fa-globe-americas"></i>`;
|
||||
} else if (group == "funbox") {
|
||||
chartString += `<span aria-label="Funbox" data-balloon-pos="up"><i class="fas fa-fw fa-gamepad"></i>`;
|
||||
}
|
||||
|
||||
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 += "</span></div>";
|
||||
if (Object.keys(aboveChartDisplay).length !== count)
|
||||
chartString += `<div class="spacer"></div>`;
|
||||
letter-spacing: -.1rem;">15</span>`;
|
||||
} else if (group == "words") {
|
||||
ret += `<span aria-label="Words" data-balloon-pos="up"><i class="fas fa-fw fa-font"></i>`;
|
||||
} else if (group == "time") {
|
||||
ret += `<span aria-label="Time" data-balloon-pos="up"><i class="fas fa-fw fa-clock"></i>`;
|
||||
} else if (group == "date") {
|
||||
ret += `<span aria-label="Date" data-balloon-pos="up"><i class="fas fa-fw fa-calendar"></i>`;
|
||||
} else if (group == "tags") {
|
||||
ret += `<span aria-label="Tags" data-balloon-pos="up"><i class="fas fa-fw fa-tags"></i>`;
|
||||
} else if (group == "language") {
|
||||
ret += `<span aria-label="Language" data-balloon-pos="up"><i class="fas fa-fw fa-globe-americas"></i>`;
|
||||
} else if (group == "funbox") {
|
||||
ret += `<span aria-label="Funbox" data-balloon-pos="up"><i class="fas fa-fw fa-gamepad"></i>`;
|
||||
}
|
||||
});
|
||||
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 += "</span></div>";
|
||||
return ret;
|
||||
}
|
||||
|
||||
let chartString = "";
|
||||
|
||||
//date
|
||||
chartString += addText("date");
|
||||
chartString += `<div class="spacer"></div>`;
|
||||
|
||||
//mode
|
||||
chartString += addText("mode");
|
||||
chartString += `<div class="spacer"></div>`;
|
||||
|
||||
//time
|
||||
if (aboveChartDisplay.mode.array.includes("time")) {
|
||||
chartString += addText("time");
|
||||
chartString += `<div class="spacer"></div>`;
|
||||
}
|
||||
|
||||
//words
|
||||
if (aboveChartDisplay.mode.array.includes("words")) {
|
||||
chartString += addText("words");
|
||||
chartString += `<div class="spacer"></div>`;
|
||||
}
|
||||
|
||||
//diff
|
||||
chartString += addText("difficulty");
|
||||
chartString += `<div class="spacer"></div>`;
|
||||
|
||||
//punc
|
||||
chartString += addText("punctuation");
|
||||
chartString += `<div class="spacer"></div>`;
|
||||
|
||||
//numbers
|
||||
chartString += addText("numbers");
|
||||
chartString += `<div class="spacer"></div>`;
|
||||
|
||||
//language
|
||||
chartString += addText("language");
|
||||
chartString += `<div class="spacer"></div>`;
|
||||
|
||||
//funbox
|
||||
chartString += addText("funbox");
|
||||
chartString += `<div class="spacer"></div>`;
|
||||
|
||||
//tags
|
||||
chartString += addText("tags");
|
||||
// chartString += `<div class="spacer"></div>`;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 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 += "<div class='group'>";
|
||||
// if (group == "difficulty") {
|
||||
// chartString += `<span aria-label="Difficulty" data-balloon-pos="up"><i class="fas fa-fw fa-star"></i>`;
|
||||
// } else if (group == "mode") {
|
||||
// chartString += `<span aria-label="Mode" data-balloon-pos="up"><i class="fas fa-fw fa-bars"></i>`;
|
||||
// } else if (group == "punctuation") {
|
||||
// chartString += `<span aria-label="Punctuation" data-balloon-pos="up"><span class="punc" style="font-weight: 900;
|
||||
// width: 1.25rem;
|
||||
// text-align: center;
|
||||
// display: inline-block;
|
||||
// letter-spacing: -.1rem;">!?</span>`;
|
||||
// } else if (group == "numbers") {
|
||||
// chartString += `<span aria-label="Numbers" data-balloon-pos="up"><span class="numbers" style="font-weight: 900;
|
||||
// width: 1.25rem;
|
||||
// text-align: center;
|
||||
// margin-right: .1rem;
|
||||
// display: inline-block;
|
||||
// letter-spacing: -.1rem;">15</span>`;
|
||||
// } else if (group == "words") {
|
||||
// chartString += `<span aria-label="Words" data-balloon-pos="up"><i class="fas fa-fw fa-font"></i>`;
|
||||
// } else if (group == "time") {
|
||||
// chartString += `<span aria-label="Time" data-balloon-pos="up"><i class="fas fa-fw fa-clock"></i>`;
|
||||
// } else if (group == "date") {
|
||||
// chartString += `<span aria-label="Date" data-balloon-pos="up"><i class="fas fa-fw fa-calendar"></i>`;
|
||||
// } else if (group == "tags") {
|
||||
// chartString += `<span aria-label="Tags" data-balloon-pos="up"><i class="fas fa-fw fa-tags"></i>`;
|
||||
// } else if (group == "language") {
|
||||
// chartString += `<span aria-label="Language" data-balloon-pos="up"><i class="fas fa-fw fa-globe-americas"></i>`;
|
||||
// } else if (group == "funbox") {
|
||||
// chartString += `<span aria-label="Funbox" data-balloon-pos="up"><i class="fas fa-fw fa-gamepad"></i>`;
|
||||
// }
|
||||
|
||||
// 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 += "</span></div>";
|
||||
// if (Object.keys(aboveChartDisplay).length !== count)
|
||||
// chartString += `<div class="spacer"></div>`;
|
||||
// }
|
||||
// });
|
||||
|
||||
// if (allall) chartString = `<i class="fas fa-fw fa-filter"></i>all`;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (allall) chartString = `<i class="fas fa-fw fa-filter"></i>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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue