FrederikBaerentsen/BrickTracker
4
4
Fork 3
Code Issues 9 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

Added extra Show options

Browse Source
This commit is contained in:
FrederikBaerentsen 2024-04-19 10:20:44 +02:00
parent 7ab5ff06cd
commit a60c5fb601
1 changed files with 74 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
templates/index.html
View File

@ -92,9 +92,9 @@
<a class="navbar-item" href="/create">
Add Set
</a>
<a class="navbar-item" href="/missing">
<!-- <a class="navbar-item" href="/missing">
Missing
</a>
</a> -->
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
@ -108,6 +108,25 @@
</div>
<div class="navbar-end">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Show
</a>
<div class="navbar-dropdown">
<a class="navbar-item" id="toggleButton">
Collected and boxed
</a>
<a class="navbar-item" id="toggleButton2">
Checked for missing pieces
</a>
<a class="navbar-item" id="toggleButton3">
Complete set without missing pieces
</a>
<a class="navbar-item" id="toggleButton4">
Sets with missing pieces
</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Select Theme
@ -116,22 +135,7 @@
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Show
</a>
<div class="navbar-dropdown">
<a class="navbar-item" id="toggleButton">
Collected
</a>
<a class="navbar-item" id="toggleButton2">
Checked
</a>
<a class="navbar-item" id="toggleButton3">
Complete
</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Sort by
@ -153,12 +157,6 @@
<a class="navbar-item" onclick="dynamicSort('set_name')">
Name
</a>
<a class="navbar-item" onclick="dynamicSort('s_col')">
Collected
</a>
<a class="navbar-item" onclick="dynamicSort('s_check')">
Checked
</a>
</div>
</div>
</div>
@ -291,6 +289,7 @@
{% endfor %}
</div>
<script>
function searchFunction() {
var input, filter, gridContainer, gridItems, i, txtValue;
input = document.getElementById('searchInput');
@ -518,6 +517,38 @@
updateVisibility();
});
function updateVisibility() {
// Get all grid items
const gridItems = document.querySelectorAll('.grid-item');
// Iterate over each grid item
gridItems.forEach(function(item) {
// Check if the corresponding checkbox is checked
const checkbox = item.querySelector('.s_com');
if (isHidden || (checkbox && !checkbox.checked)) {
// Show the grid item if it's hidden or the checkbox is checked
item.style.display = 'block';
} else {
// Hide the grid item if the checkbox is not checked
item.style.display = 'none';
}
});
}
});
document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.getElementById('toggleButton4');
let isHidden = true; // Initially, only show checked grid items
// Initialize visibility based on isHidden
updateVisibility();
toggleButton.addEventListener('click', function() {
// Toggle visibility and update grid items
isHidden = !isHidden;
updateVisibility();
});
function updateVisibility() {
// Get all grid items
const gridItems = document.querySelectorAll('.grid-item');
@ -599,17 +630,32 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
});
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
$(".navbar-item").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").removeClass("is-active");
$(".navbar-menu").removeClass("is-active");
});
});
</script>
</body>
</html>