Update filter to include manufacturer and series.
This commit is contained in:
parent
eb18dad265
commit
7800557b88
@ -1,8 +1,9 @@
|
||||
<hr/>
|
||||
|
||||
<div class="filters">
|
||||
<fieldset>
|
||||
<legend>$filter$</legend>
|
||||
<!-- Status -->
|
||||
<fieldset class="filter-group" data-filter="status">
|
||||
<legend>Status</legend>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="$filter-plamo-in-box$" checked>
|
||||
$filter-plamo-in-box$
|
||||
@ -20,13 +21,161 @@
|
||||
$filter-plamo-complete$
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Manufacturer -->
|
||||
<fieldset class="filter-group" data-filter="manufacturer">
|
||||
<legend>Manufacturer</legend>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="AZmodel" checked>
|
||||
AZmodel
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Bandai" checked>
|
||||
Bandai
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Bandai Spirits" checked>
|
||||
Bandai Spirits
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Cavico" checked>
|
||||
Cavico
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Eduard" checked>
|
||||
Eduard
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Finemolds" checked>
|
||||
Finemolds
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Flame Toys" checked>
|
||||
Flame Toys
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Fujimi" checked>
|
||||
Fujimi
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Hasegawa" checked>
|
||||
Hasegawa
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Italeri" checked>
|
||||
Italeri
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Kotobukiya" checked>
|
||||
Kotobukiya
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="MiniArt" checked>
|
||||
MiniArt
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Moderoid - Good Smile Company" checked>
|
||||
Moderoid - Good Smile Company
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Ōtaki" checked>
|
||||
Ōtaki
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Revell" checked>
|
||||
Revell
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Tamiya" checked>
|
||||
Tamiya
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Thunder Model" checked>
|
||||
Thunder Model
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Wave Corporation" checked>
|
||||
Wave Corporation
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<!-- Series -->
|
||||
<fieldset class="filter-group" data-filter="series">
|
||||
<legend>Series</legend>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam" checked>
|
||||
Mobile Suit Gundam
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam 0080: War in the Pocket" checked>
|
||||
Mobile Suit Gundam 0080: War in the Pocket
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam 0083: Stardust Memory" checked>
|
||||
Mobile Suit Gundam 0083: Stardust Memory
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam: Char's Counterattack" checked>
|
||||
Mobile Suit Gundam: Char's Counterattack
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam GQuuuuuuX" checked>
|
||||
Mobile Suit Gundam GQuuuuuuX
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam Iron Blooded Orphans" checked>
|
||||
Mobile Suit Gundam Iron Blooded Orphans
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED" checked>
|
||||
Mobile Suit Gundam SEED
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED Destiny" checked>
|
||||
Mobile Suit Gundam SEED Destiny
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam SEED Freedom" checked>
|
||||
Mobile Suit Gundam SEED Freedom
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam the Witch from Mercury" checked>
|
||||
Mobile Suit Gundam the Witch from Mercury
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam Unicorn" checked>
|
||||
Mobile Suit Gundam Unicorn
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Gundam ZZ" checked>
|
||||
Mobile Suit Gundam ZZ
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Suit Zeta Gundam" checked>
|
||||
Mobile Suit Zeta Gundam
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Mobile Fighter G Gundam" checked>
|
||||
Mobile Fighter G Gundam
|
||||
</label>
|
||||
<label>
|
||||
<input class="me-2" type="checkbox" value="Gundam Build Fighters Try" checked>
|
||||
Gundam Build Fighters Try
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<button id="clear-filters" type="button" class="btn btn-sm btn-outline-secondary">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div class="row row-cols-md-1 row-cols-lg-2 row-cols-xxl-3 g-4 p-1">
|
||||
$for(kits)$
|
||||
<div class="col kit" data-status="$status$">
|
||||
<div class="col kit" data-status="$status$" data-manufacturer="$manufacturer$" data-series="$series$">
|
||||
<div class="card h-100 mb-3" style="max-width: 500px; min-width: 300px;">
|
||||
<div class="row g-0">
|
||||
<a href="$url$"><h5 class="card-title text-center mt-1">$title$</h5></a>
|
||||
@ -77,11 +226,17 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
const checkboxes = document.querySelectorAll(".filters input[type=checkbox]");
|
||||
const kits = document.querySelectorAll(".kit");
|
||||
|
||||
// Count by status.
|
||||
// Count meta data.
|
||||
const counts = {};
|
||||
kits.forEach(kit => {
|
||||
const status = kit.dataset.status;
|
||||
counts[status] = (counts[status] || 0) + 1;
|
||||
|
||||
const manufacturer = kit.dataset.manufacturer;
|
||||
counts[manufacturer] = (counts[manufacturer] || 0) + 1;
|
||||
|
||||
const series = kit.dataset.series;
|
||||
counts[series] = (counts[series] || 0) + 1;
|
||||
});
|
||||
|
||||
// Update each filter label with the count.
|
||||
@ -90,7 +245,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
const value = checkbox.value;
|
||||
const count = counts[value] || 0;
|
||||
|
||||
// Update label text
|
||||
// Update label text.
|
||||
const label = checkbox.parentElement;
|
||||
const textNode = label.childNodes[label.childNodes.length - 1];
|
||||
|
||||
@ -98,20 +253,55 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
|
||||
function updateFilter() {
|
||||
const selected = Array.from(checkboxes)
|
||||
.filter(cb => cb.checked)
|
||||
.map(cb => cb.value);
|
||||
const groups = document.querySelectorAll(".filter-group");
|
||||
|
||||
// Get all checked checkboxes across all groups.
|
||||
const allChecked = document.querySelectorAll(
|
||||
".filter-group input:checked"
|
||||
);
|
||||
|
||||
// If nothing is selected anywhere, then hide everything.
|
||||
if (allChecked.length === 0) {
|
||||
kits.forEach(kit => {
|
||||
kit.style.display = "none";
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
kits.forEach(kit => {
|
||||
const status = kit.dataset.status;
|
||||
if (selected.includes(status)) {
|
||||
kit.style.display = "";
|
||||
} else {
|
||||
kit.style.display = "none";
|
||||
}
|
||||
let visible = true;
|
||||
|
||||
groups.forEach(group => {
|
||||
const filterName = group.dataset.filter;
|
||||
|
||||
const selected = Array.from(
|
||||
group.querySelectorAll("input:checked")
|
||||
).map(cb => cb.value);
|
||||
|
||||
const kitValue = kit.dataset[filterName];
|
||||
|
||||
// OR inside group
|
||||
if (selected.length > 0 && !selected.includes(kitValue)) {
|
||||
visible = false;
|
||||
}
|
||||
});
|
||||
|
||||
kit.style.display = visible ? "" : "none";
|
||||
});
|
||||
}
|
||||
|
||||
checkboxes.forEach(cb => cb.addEventListener("change", updateFilter));
|
||||
|
||||
// Clear button.
|
||||
const clearButton = document.getElementById("clear-filters");
|
||||
|
||||
clearButton.addEventListener("click", function () {
|
||||
// Uncheck all checkboxes.
|
||||
checkboxes.forEach(cb => {
|
||||
cb.checked = false;
|
||||
});
|
||||
// Update the visible kits.
|
||||
updateFilter();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user