62 lines
1.5 KiB
JavaScript
62 lines
1.5 KiB
JavaScript
|
let showOnlyTracked = false;
|
||
|
|
let kindFilter = new Set();
|
||
|
|
|
||
|
|
document.addEventListener("DOMContentLoaded", (event) => {
|
||
|
|
const onlyTrackedFilter = document.querySelector(
|
||
|
|
'input[name="onlyTracked"]',
|
||
|
|
);
|
||
|
|
|
||
|
|
onlyTrackedFilter.addEventListener("input", function () {
|
||
|
|
showOnlyTracked = this.checked ? true : false;
|
||
|
|
filter();
|
||
|
|
});
|
||
|
|
|
||
|
|
const kindFilters = document.querySelectorAll(
|
||
|
|
'input[type="checkbox"][name="kindFilter"]',
|
||
|
|
);
|
||
|
|
|
||
|
|
kindFilters.forEach(function (item, index) {
|
||
|
|
item.addEventListener("input", function () {
|
||
|
|
if (this.checked) {
|
||
|
|
kindFilter.add(this.value);
|
||
|
|
} else {
|
||
|
|
kindFilter.delete(this.value);
|
||
|
|
}
|
||
|
|
console.log(kindFilter);
|
||
|
|
filter();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function track(element) {
|
||
|
|
let parent = element.parentElement.parentElement;
|
||
|
|
let isTracked = parent.dataset["isTracked"] ?? false;
|
||
|
|
isTracked = isTracked === "true" ? false : true;
|
||
|
|
parent.dataset["isTracked"] = isTracked;
|
||
|
|
element.innerHTML = isTracked ? "Stop tracking" : "Start tracking";
|
||
|
|
element.style["border-bottom-color"] = isTracked ? "#a00" : "#0a0";
|
||
|
|
filter();
|
||
|
|
}
|
||
|
|
|
||
|
|
function filter() {
|
||
|
|
const categories = document.querySelectorAll(".category-wrapper");
|
||
|
|
|
||
|
|
for (const category of categories) {
|
||
|
|
let isTracked = category.dataset["isTracked"] == "true";
|
||
|
|
let kind = category.dataset["matKind"];
|
||
|
|
let type = category.dataset["matType"];
|
||
|
|
|
||
|
|
category.style.display = "";
|
||
|
|
|
||
|
|
if (showOnlyTracked && !isTracked) {
|
||
|
|
category.style.display = "none";
|
||
|
|
}
|
||
|
|
|
||
|
|
if (kindFilter.size > 0) {
|
||
|
|
if (!kindFilter.has(kind)) {
|
||
|
|
category.style.display = "none";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|