585 lines
17 KiB
HTML
585 lines
17 KiB
HTML
<hr/>
|
|
|
|
<div class="filters">
|
|
<!-- Status -->
|
|
<legend>$table-plamo-status$</legend>
|
|
<fieldset class="filter-group row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 p-1" data-filter="status">
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-in-box$" checked>
|
|
$filter-plamo-in-box$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-building$" checked>
|
|
$filter-plamo-building$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-built$" checked>
|
|
$filter-plamo-built$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-complete$" checked>
|
|
$filter-plamo-complete$
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Category -->
|
|
<legend>$table-plamo-category$</legend>
|
|
<fieldset class="filter-group row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 p-1" data-filter="category">
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-category-aircraft$" checked>
|
|
$filter-plamo-category-aircraft$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-category-armoured-car$" checked>
|
|
$filter-plamo-category-armoured-car$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-category-automobile$" checked>
|
|
$filter-plamo-category-automobile$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-category-fantasy-vehicle$" checked>
|
|
$filter-plamo-category-fantasy-vehicle$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-category-figure$" checked>
|
|
$filter-plamo-category-figure$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-category-gundam$" checked>
|
|
$filter-plamo-category-gundam$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-category-mecha$" checked>
|
|
$filter-plamo-category-mecha$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-category-motorcycle$" checked>
|
|
$filter-plamo-category-motorcycle$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-category-spacecraft$" checked>
|
|
$filter-plamo-category-spacecraft$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-category-tractor$" checked>
|
|
$filter-plamo-category-tractor$
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Manufacturer -->
|
|
<legend>$table-plamo-manufacturer$</legend>
|
|
<fieldset class="filter-group row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 p-1" data-filter="manufacturer">
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="AZmodel" checked>
|
|
<span class="fi fi-cz me-1" title="CZ"></span>AZmodel
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Bandai" checked>
|
|
<span class="fi fi-jp me-1" title="JP"></span>Bandai
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Bandai Spirits" checked>
|
|
<span class="fi fi-jp me-1" title="JP"></span>Bandai Spirits
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Cavico" checked>
|
|
<span class="fi fi-jp me-1" title="JP"></span>Cavico
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Eduard" checked>
|
|
<span class="fi fi-cz me-1" title="CZ"></span>Eduard
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Fine Molds" checked>
|
|
<span class="fi fi-jp me-1" title="JP"></span>Fine Molds
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Flame Toys" checked>
|
|
<span class="fi fi-hk me-1" title="HK"></span>Flame Toys
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Fujimi" checked>
|
|
<span class="fi fi-jp me-1" title="JP"></span>Fujimi
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Hasegawa" checked>
|
|
<span class="fi fi-jp me-1" title="JP"></span>Hasegawa
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Italeri" checked>
|
|
<span class="fi fi-it me-1" title="IT"></span>Italeri
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Kotobukiya" checked>
|
|
<span class="fi fi-jp me-1" title="JP"></span>Kotobukiya
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="MiniArt" checked>
|
|
<span class="fi fi-ua me-1" title="UA"></span>MiniArt
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Moderoid - Good Smile Company" checked>
|
|
<span class="fi fi-jp me-1" title="JP"></span>Moderoid - Good Smile Company
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Ōtaki" checked>
|
|
<span class="fi fi-jp me-1" title="JP"></span>Ōtaki
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Revell" checked>
|
|
<span class="fi fi-de me-1" title="DE"></span>Revell
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Tamiya" checked>
|
|
<span class="fi fi-jp me-1" title="JP"></span>Tamiya
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Thunder Model" checked>
|
|
<span class="fi fi-cn me-1" title="CN"></span>Thunder Model
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="Wave Corporation" checked>
|
|
<span class="fi fi-jp me-1" title="JP"></span>Wave Corporation
|
|
</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Series -->
|
|
<legend>$table-plamo-series$</legend>
|
|
<fieldset class="filter-group row row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-4 p-1" data-filter="series">
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg$" checked>
|
|
$filter-plamo-series-msg$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-pocket$" checked>
|
|
$filter-plamo-series-msg-pocket$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-stardust$" checked>
|
|
$filter-plamo-series-msg-stardust$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-char$" checked>
|
|
$filter-plamo-series-msg-char$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-gqx$" checked>
|
|
$filter-plamo-series-msg-gqx$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-ironblood$" checked>
|
|
$filter-plamo-series-msg-ironblood$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed$" checked>
|
|
$filter-plamo-series-msg-seed$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed-destiny$" checked>
|
|
$filter-plamo-series-msg-seed-destiny$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-seed-freedom$" checked>
|
|
$filter-plamo-series-msg-seed-freedom$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-witch$" checked>
|
|
$filter-plamo-series-msg-witch$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-unicorn$" checked>
|
|
$filter-plamo-series-msg-unicorn$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-zz$" checked>
|
|
$filter-plamo-series-msg-zz$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-msg-zeta$" checked>
|
|
$filter-plamo-series-msg-zeta$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-gundam-wing-endless-waltz$" checked>
|
|
$filter-plamo-series-gundam-wing-endless-waltz$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-mfg-gundam$" checked>
|
|
$filter-plamo-series-mfg-gundam$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-gundam-bf-try$" checked>
|
|
$filter-plamo-series-gundam-bf-try$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-dragonball$" checked>
|
|
$filter-plamo-series-dragonball$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-dragonball-z$" checked>
|
|
$filter-plamo-series-dragonball-z$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-ikaruga$" checked>
|
|
$filter-plamo-series-ikaruga$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-kampf-riesen-mars$" checked>
|
|
$filter-plamo-series-kampf-riesen-mars$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-kyoukai-senki$" checked>
|
|
$filter-plamo-series-kyoukai-senki$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-maschinen-krieger$" checked>
|
|
$filter-plamo-series-maschinen-krieger$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-nausicaa$" checked>
|
|
$filter-plamo-series-nausicaa$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-patlabor$" checked>
|
|
$filter-plamo-series-patlabor$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-pokemon$" checked>
|
|
$filter-plamo-series-pokemon$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-space-battleship-yamato$" checked>
|
|
$filter-plamo-series-space-battleship-yamato$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-transformers$" checked>
|
|
$filter-plamo-series-transformers$
|
|
</label>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<label>
|
|
<input class="me-2" type="checkbox" value="$filter-plamo-series-xenoblade-x$" checked>
|
|
$filter-plamo-series-xenoblade-x$
|
|
</label>
|
|
</div>
|
|
</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$" data-manufacturer="$manufacturer$" data-series="$series$" data-category="$category$">
|
|
<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>
|
|
</div>
|
|
<div class="row g-0">
|
|
<div class="col-6 col-md-8">
|
|
<div class="card-body">
|
|
<p class="card-text fs-xs-smaller">
|
|
<em class="text-body-secondary">$formatted_date$</em><br/>
|
|
$model_name$<br/>
|
|
<span class="badge rounded-pill text-bg-secondary ms-4 text-center">$scale$</span><br/>
|
|
$if(series)$
|
|
$series$<br/>
|
|
$endif$
|
|
$release$ - $manufacturer$<br/>
|
|
$if(number)$
|
|
<a class="external" aria-label="scalemates dot com (opens external site in new tab)" href="https://www.scalemates.com/search.php?fkSECTION%5B%5D=All&q=$number$*" target="_blank" rel="noopener noreferrer">$number$</a><br/>
|
|
$endif$
|
|
$if(purchase_store)$
|
|
$if(price)$
|
|
$if(purchase_date)$
|
|
$purchase_store$<br/>
|
|
$price$ - <em>($formatted_purchase_date$)</em><br/>
|
|
$endif$
|
|
$endif$
|
|
$endif$
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-3">
|
|
<div class="card mt-2" style="width: 128px;">
|
|
<a href="$url$">
|
|
<img src="/images/plamo/$page$/thumbnail.webp" alt="thumbnail" class="card-img-top img-fluid rounded-top" >
|
|
</a>
|
|
<div class="card-body">
|
|
<p class="card-text text-center">$status$</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
$endfor$
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const checkboxes = document.querySelectorAll(".filters input[type=checkbox]");
|
|
const kits = document.querySelectorAll(".kit");
|
|
|
|
// 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;
|
|
|
|
const category = kit.dataset.category;
|
|
counts[category] = (counts[category] || 0) + 1;
|
|
});
|
|
|
|
// Update each filter label with the count.
|
|
document.querySelectorAll(".filters input[type='checkbox']")
|
|
.forEach(checkbox => {
|
|
const value = checkbox.value;
|
|
const count = counts[value] || 0;
|
|
|
|
// Update label text.
|
|
const label = checkbox.parentElement;
|
|
const textNode = label.childNodes[label.childNodes.length - 1];
|
|
|
|
textNode.textContent = textNode.textContent.trim() + " (" + count + ")";
|
|
});
|
|
|
|
function updateFilter() {
|
|
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 => {
|
|
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> |