FrederikBaerentsen/BrickTracker
4
6
Fork 6
Code Issues 13 Pull Requests 2 Actions Packages Projects 1 Releases 4 Wiki Activity

Create dedicated object for Grid filter

Browse Source
This commit is contained in:
Gregoo 2025-01-30 22:40:53 +01:00
parent d80728d133
commit 8e3816e2e2
3 changed files with 98 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
static/scripts/grid/filter.js Normal file
View File

@ -0,0 +1,93 @@
// Grid filter
class BrickGridFilter {
constructor(grid) {
this.grid = grid;
// Grid sort elements (built based on the initial id)
this.html_search = document.getElementById(`${this.grid.id}-search`);
this.html_status = document.getElementById(`${this.grid.id}-status`);
this.html_theme = document.getElementById(`${this.grid.id}-theme`);
// Filter setup
if (this.html_search) {
this.html_search.addEventListener("keyup", ((grid) => () => {
grid.filter();
})(this));
}
if (this.html_status) {
this.html_status.addEventListener("change", ((grid) => () => {
grid.filter();
})(this));
}
if (this.html_theme) {
this.html_theme.addEventListener("change", ((grid) => () => {
grid.filter();
})(this));
}
}
// Filter
filter() {
var filters = {};
// Check if there is a search filter
if (this.html_search && this.html_search.value != "") {
filters["search"] = this.html_search.value.toLowerCase();
}
// Check if there is a set filter
if (this.html_status && this.html_status.value != "") {
if (this.html_status.value.startsWith("-")) {
filters["filter"] = this.html_status.value.substring(1);
filters["filter-target"] = "0";
} else {
filters["filter"] = this.html_status.value;
filters["filter-target"] = "1";
}
}
// Check if there is a theme filter
if (this.html_theme && this.html_theme.value != "") {
filters["theme"] = this.html_theme.value;
}
// Filter all cards
const cards = this.grid.html_grid.querySelectorAll(`${this.grid.target} > .card`);
cards.forEach(current => {
// Set filter
if ("filter" in filters) {
if (current.getAttribute("data-" + filters["filter"]) != filters["filter-target"]) {
current.parentElement.classList.add("d-none");
return;
}
}
// Theme filter
if ("theme" in filters) {
if (current.getAttribute("data-theme") != filters["theme"]) {
current.parentElement.classList.add("d-none");
return;
}
}
// Check all searchable fields for a match
if ("search" in filters) {
for (let attribute of ["data-name", "data-number", "data-parts", "data-theme", "data-year"]) {
if (current.getAttribute(attribute).includes(filters["search"])) {
current.parentElement.classList.remove("d-none");
return;
}
}
// If no match, we need to hide it
current.parentElement.classList.add("d-none");
return;
}
// If we passed all filters, we need to display it
current.parentElement.classList.remove("d-none");
});
}
}

92
static/scripts/grid/grid.js
View File

@ -6,99 +6,15 @@ class BrickGrid {
// Grid elements (built based on the initial id)
this.html_grid = document.getElementById(this.id);
this.html_search = document.getElementById(`${this.id}-search`);
this.html_status = document.getElementById(`${this.id}-status`);
this.html_theme = document.getElementById(`${this.id}-theme`);
// Sort setup
this.sort = new BrickGridSort(this);
// Filter setup
if (this.html_search) {
this.html_search.addEventListener("keyup", ((grid) => () => {
grid.filter();
})(this));
}
if (this.html_status) {
this.html_status.addEventListener("change", ((grid) => () => {
grid.filter();
})(this));
}
if (this.html_theme) {
this.html_theme.addEventListener("change", ((grid) => () => {
grid.filter();
})(this));
}
}
// Filter
filter() {
var filters = {};
// Check if there is a search filter
if (this.html_search && this.html_search.value != "") {
filters["search"] = this.html_search.value.toLowerCase();
}
// Check if there is a set filter
if (this.html_status && this.html_status.value != "") {
if (this.html_status.value.startsWith("-")) {
filters["filter"] = this.html_status.value.substring(1);
filters["filter-target"] = "0";
} else {
filters["filter"] = this.html_status.value;
filters["filter-target"] = "1";
}
}
// Check if there is a theme filter
if (this.html_theme && this.html_theme.value != "") {
filters["theme"] = this.html_theme.value;
}
// Filter all cards
if (this.html_grid) {
const cards = this.html_grid.querySelectorAll("div > div.card");
cards.forEach(current => {
// Set filter
if ("filter" in filters) {
if (current.getAttribute("data-" + filters["filter"]) != filters["filter-target"]) {
current.parentElement.classList.add("d-none");
return;
}
}
// Sort setup
this.sort = new BrickGridSort(this);
// Theme filter
if ("theme" in filters) {
if (current.getAttribute("data-theme") != filters["theme"]) {
current.parentElement.classList.add("d-none");
return;
}
}
// Check all searchable fields for a match
if ("search" in filters) {
for (let attribute of ["data-name", "data-number", "data-parts", "data-theme", "data-year"]) {
if (current.getAttribute(attribute).includes(filters["search"])) {
current.parentElement.classList.remove("d-none");
return;
}
}
// If no match, we need to hide it
current.parentElement.classList.add("d-none");
return;
}
// If we passed all filters, we need to display it
current.parentElement.classList.remove("d-none");
})
// Filter setup
this.filter = new BrickGridFilter(this);
}
}
}
// Helper to setup the grids

1
templates/base.html
View File

@ -80,6 +80,7 @@
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.2.1/dist/umd/simple-datatables.min.js"></script>
<!-- BrickTracker scripts -->
<script src="{{ url_for('static', filename='scripts/changer.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/grid/filter.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/grid/grid.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/grid/sort.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/grid/sort_button.js') }}"></script>