New frontpage format
This commit is contained in:
parent
3ca1a1a8bd
commit
4dee6d33e9
9
app.py
9
app.py
@ -34,6 +34,7 @@ def index():
|
|||||||
|
|
||||||
if request.method == 'POST':
|
if request.method == 'POST':
|
||||||
set_num = request.form.get('set_num')
|
set_num = request.form.get('set_num')
|
||||||
|
index = request.form.get('index')
|
||||||
minif = request.form.get('minif')
|
minif = request.form.get('minif')
|
||||||
scheck = request.form.get('scheck')
|
scheck = request.form.get('scheck')
|
||||||
scol = request.form.get('scol')
|
scol = request.form.get('scol')
|
||||||
@ -41,12 +42,12 @@ def index():
|
|||||||
with open('./info/'+set_num+'.json') as info:
|
with open('./info/'+set_num+'.json') as info:
|
||||||
json_file = json.loads(info.read())
|
json_file = json.loads(info.read())
|
||||||
if minif != None:
|
if minif != None:
|
||||||
json_file['Minifigs Collected'] = minif
|
json_file['unit'][int(index)]['Minifigs Collected'] = minif
|
||||||
if scheck != None:
|
if scheck != None:
|
||||||
json_file['Set Checked'] = scheck
|
json_file['unit'][int(index)]['Set Checked'] = scheck
|
||||||
if scol != None:
|
if scol != None:
|
||||||
json_file['Set Collected'] = scol
|
json_file['unit'][int(index)]['Set Collected'] = scol
|
||||||
|
|
||||||
with open('./info/'+set_num+'.json', 'w') as dump_file:
|
with open('./info/'+set_num+'.json', 'w') as dump_file:
|
||||||
json.dump(json_file,dump_file)
|
json.dump(json_file,dump_file)
|
||||||
return ('', 204)
|
return ('', 204)
|
||||||
|
|||||||
@ -33,15 +33,14 @@ body {
|
|||||||
|
|
||||||
.grid-container {
|
.grid-container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(20%, 32%)); /* Between 33% and 50% width */
|
grid-template-columns: repeat(auto-fit, minmax(10%, 48%)); /* Between 33% and 50% width */
|
||||||
/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
|
/* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-item {
|
.grid-item {
|
||||||
height: 300px;
|
height:auto;
|
||||||
display: flex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
@ -49,7 +48,7 @@ body {
|
|||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-bottom:40px; /* Height of the footer */
|
padding-bottom:30px; /* Height of the footer */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Adjust height for smaller screens */
|
/* Adjust height for smaller screens */
|
||||||
@ -68,7 +67,6 @@ body {
|
|||||||
|
|
||||||
.grid-item img {
|
.grid-item img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -79,7 +77,7 @@ body {
|
|||||||
position:absolute;
|
position:absolute;
|
||||||
bottom:0;
|
bottom:0;
|
||||||
width:90%;
|
width:90%;
|
||||||
height:40px; /* Height of the footer */
|
height:30px; /* Height of the footer */
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
@ -107,6 +105,7 @@ body {
|
|||||||
<button class="button button-outline" onclick="dynamicSort('set_id')">Sort by ID</button>
|
<button class="button button-outline" onclick="dynamicSort('set_id')">Sort by ID</button>
|
||||||
<button class="button button-outline" onclick="dynamicSort('set_year')">Sort by Year</button>
|
<button class="button button-outline" onclick="dynamicSort('set_year')">Sort by Year</button>
|
||||||
<button class="button button-outline" onclick="dynamicSort('set_parts')">Sort by Parts</button>
|
<button class="button button-outline" onclick="dynamicSort('set_parts')">Sort by Parts</button>
|
||||||
|
<button class="button button-outline" onclick="dynamicSort('set_theme')">Sort by Theme</button>
|
||||||
<button class="button button-outline" onclick="dynamicSort('set_name')">Sort by Name</button>
|
<button class="button button-outline" onclick="dynamicSort('set_name')">Sort by Name</button>
|
||||||
<button class="button button-outline" onclick="dynamicSort('s_col')">Sort by Collected</button>
|
<button class="button button-outline" onclick="dynamicSort('s_col')">Sort by Collected</button>
|
||||||
<button class="button button-outline" onclick="dynamicSort('s_check')">Sort by Checked</button>
|
<button class="button button-outline" onclick="dynamicSort('s_check')">Sort by Checked</button>
|
||||||
@ -114,49 +113,50 @@ body {
|
|||||||
<center>
|
<center>
|
||||||
<button class="button button-outline" id="toggleButton">Show Collected</button>
|
<button class="button button-outline" id="toggleButton">Show Collected</button>
|
||||||
<button class="button button-outline" id="toggleButton2">Show Checked</button>
|
<button class="button button-outline" id="toggleButton2">Show Checked</button>
|
||||||
|
<button class="button button-outline" id="toggleButton3">Show Complete</button>
|
||||||
</center>
|
</center>
|
||||||
<!-- Add more buttons for other text values if needed -->
|
<!-- Add more buttons for other text values if needed -->
|
||||||
</div>
|
</div>
|
||||||
<center>
|
<div class="grid-container" id="gridContainer">
|
||||||
<div class="grid-container" id="gridContainer">
|
|
||||||
|
|
||||||
{% for i in set_list %}
|
{% for i in set_list %}
|
||||||
|
{% if json_file[i['set_num']]['count'] == 1 %}
|
||||||
|
<div class="grid-item" style="">
|
||||||
|
<div class="card" style="">
|
||||||
|
{% else %}
|
||||||
|
<div class="grid-item" style="">
|
||||||
|
<div class="card" style="">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<div class="grid-item" style="">
|
<div class="columns" style="">
|
||||||
<div class="card" style="">
|
<div class="column is-two-thirds" style="text-align: left;">
|
||||||
<div class="columns" style="">
|
<b class="is-size-5">
|
||||||
<div class="column is-two-thirds" style="text-align: left;">
|
<span class="set_id">{{ i['set_num'] }}</span> <span class="set_name">{{ i['name'] }}</span>
|
||||||
<b class="is-size-5">
|
</b>
|
||||||
<span class="set_id">{{ i['set_num'] }}</span> <span class="set_name">{{ i['name'] }}</span>
|
</div>
|
||||||
</b>
|
<div class="column" style="text-align: left;">
|
||||||
</div>
|
<div class="is-size-5">
|
||||||
<div class="column" style="text-align: left;">
|
<b>Parts:</b>
|
||||||
<div class="is-size-5">
|
<span class='set_parts'>{{ i['num_parts'] }}</span>
|
||||||
<b>Parts:</b>
|
</div>
|
||||||
<span class='set_parts'>{{ i['num_parts'] }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="columns" style="">
|
||||||
<div class="columns" style="">
|
<div class="column is-one-third" style="">
|
||||||
<div class="column is-one-third">
|
<figure class="image is-4by3">
|
||||||
<figure class="image is-4by3">
|
<a href="/{{ i['set_num'] }}">
|
||||||
<a href="/{{ i['set_num'] }}">
|
<img style='height: 100%; width: 100%; object-fit: contain' src="/static/sets/{{ i['set_num'] }}/cover.jpg" alt="Image">
|
||||||
<img style='height: 100%; width: 100%; object-fit: contain' src="/static/sets/{{ i['set_num'] }}/cover.jpg" alt="Image">
|
</a>
|
||||||
</a>
|
</figure>
|
||||||
</figure>
|
</div>
|
||||||
<p class="is-size-7">
|
|
||||||
{{ i['theme_id'] }} (<span class='set_year'>{{ i['year'] }}</span>)
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% for j in json_file[i['set_num']]['unit'] %}
|
{% for j in json_file[i['set_num']]['unit'] %}
|
||||||
<div class="column is-one-thid" style="border: 1px blue dashed;">
|
<div class="column is-one-thid" style="margin:0;padding:0;">
|
||||||
<p>
|
<p>Set #{{ loop.index }}</p>
|
||||||
{{ j }}
|
<div class="is-size-7">
|
||||||
</p>
|
|
||||||
<div class="is-size-7" >
|
|
||||||
<label class="checkbox" >
|
<label class="checkbox" >
|
||||||
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
|
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
|
||||||
|
<input type="hidden" id="index" value="{{ loop.index0 }}">
|
||||||
{% if json_file[i['set_num']]['Minifigs Collected'] == 'true' %}
|
{% if json_file[i['set_num']]['Minifigs Collected'] == 'true' %}
|
||||||
<input class="s_fig" id="s_fig" type="checkbox" checked />
|
<input class="s_fig" id="s_fig" type="checkbox" checked />
|
||||||
{% else %}
|
{% else %}
|
||||||
@ -164,30 +164,47 @@ body {
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
Minifigs Collected
|
Minifigs Collected
|
||||||
</label>
|
</label>
|
||||||
<label class="checkbox" >
|
<br>
|
||||||
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
|
<label class="checkbox" >
|
||||||
{% if json_file[i['set_num']]['Set Checked'] == 'true' %}
|
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
|
||||||
<input class="s_check" id="s_check" type="checkbox" checked />
|
<input type="hidden" id="index" value="{{ loop.index0 }}">
|
||||||
{% else %}
|
{% if json_file[i['set_num']]['Set Checked'] == 'true' %}
|
||||||
<input class="s_check" id="s_check" type="checkbox" />
|
<input class="s_check" id="s_check" type="checkbox" checked />
|
||||||
{% endif %}
|
{% else %}
|
||||||
Set is checked
|
<input class="s_check" id="s_check" type="checkbox" />
|
||||||
</label>
|
{% endif %}
|
||||||
<label class="checkbox" >
|
Set is checked
|
||||||
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
|
</label>
|
||||||
{% if json_file[i['set_num']]['Set Collected'] == 'true' %}
|
<br>
|
||||||
<input class="s_col" id="s_col" type="checkbox" checked />
|
<label class="checkbox" >
|
||||||
{% else %}
|
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
|
||||||
<input class="s_col" id="s_col" type="checkbox" />
|
<input type="hidden" id="index" value="{{ loop.index0 }}">
|
||||||
{% endif %}
|
{% if json_file[i['set_num']]['Set Collected'] == 'true' %}
|
||||||
Set is collected
|
<input class="s_col" id="s_col" type="checkbox" checked />
|
||||||
</label>
|
{% else %}
|
||||||
|
<input class="s_col" id="s_col" type="checkbox" />
|
||||||
|
{% endif %}
|
||||||
|
Set is collected and boxed
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
<label class="checkbox" >
|
||||||
|
{% if json_file[i['set_num']]['unit'][loop.index0]['bricks']['missing'] |length > 0 %}
|
||||||
|
<input type="checkbox" class="s_com" onclick="return false;"/> Set is missing pieces
|
||||||
|
{% else %}
|
||||||
|
<input type="checkbox" class="s_com" onclick="return false;" checked /> Set is Complete
|
||||||
|
{% endif %}
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
</div>
|
||||||
<footer class="card-footer" style="">
|
<footer class="card-footer" style="">
|
||||||
|
<p class="card-footer-item">
|
||||||
|
<span>
|
||||||
|
<a class="is-size-7 set_theme" style="color: #363636;">{{ i['theme_id'] }} (<span class='set_year'>{{ i['year'] }}</span>)</a>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
<p class="card-footer-item">
|
<p class="card-footer-item">
|
||||||
<span>
|
<span>
|
||||||
<a class="is-size-7" style="color: #363636;" href="/{{ i['set_num'] }}">Inventory</a>
|
<a class="is-size-7" style="color: #363636;" href="/{{ i['set_num'] }}">Inventory</a>
|
||||||
@ -201,222 +218,257 @@ body {
|
|||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</center>
|
<script>
|
||||||
<script>
|
function searchFunction() {
|
||||||
function searchFunction() {
|
var input, filter, gridContainer, gridItems, i, txtValue;
|
||||||
var input, filter, gridContainer, gridItems, i, txtValue;
|
input = document.getElementById('searchInput');
|
||||||
input = document.getElementById('searchInput');
|
filter = input.value.toUpperCase();
|
||||||
filter = input.value.toUpperCase();
|
gridContainer = document.getElementById('gridContainer');
|
||||||
gridContainer = document.getElementById('gridContainer');
|
gridItems = gridContainer.getElementsByClassName('grid-item');
|
||||||
gridItems = gridContainer.getElementsByClassName('grid-item');
|
|
||||||
|
|
||||||
for (i = 0; i < gridItems.length; i++) {
|
for (i = 0; i < gridItems.length; i++) {
|
||||||
txtValue = gridItems[i].textContent || gridItems[i].innerText;
|
txtValue = gridItems[i].textContent || gridItems[i].innerText;
|
||||||
if (txtValue.toUpperCase().indexOf(filter) > -1) {
|
if (txtValue.toUpperCase().indexOf(filter) > -1) {
|
||||||
gridItems[i].style.display = "";
|
gridItems[i].style.display = "";
|
||||||
} else {
|
} else {
|
||||||
gridItems[i].style.display = "none";
|
gridItems[i].style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
function sortFunction() {
|
||||||
}
|
var sortSelect, sortValue, gridContainer, gridItems, sortedItems, i;
|
||||||
function sortFunction() {
|
sortSelect = document.getElementById('sortSelect');
|
||||||
var sortSelect, sortValue, gridContainer, gridItems, sortedItems, i;
|
sortValue = sortSelect.value;
|
||||||
sortSelect = document.getElementById('sortSelect');
|
gridContainer = document.getElementById('gridContainer');
|
||||||
sortValue = sortSelect.value;
|
gridItems = gridContainer.getElementsByClassName('grid-item');
|
||||||
gridContainer = document.getElementById('gridContainer');
|
sortedItems = Array.from(gridItems);
|
||||||
gridItems = gridContainer.getElementsByClassName('grid-item');
|
|
||||||
sortedItems = Array.from(gridItems);
|
|
||||||
|
|
||||||
if (sortValue === 'alphabetical') {
|
if (sortValue === 'alphabetical') {
|
||||||
sortedItems.sort(function(a, b) {
|
sortedItems.sort(function(a, b) {
|
||||||
var textA = a.textContent.trim().toUpperCase();
|
var textA = a.textContent.trim().toUpperCase();
|
||||||
var textB = b.textContent.trim().toUpperCase();
|
var textB = b.textContent.trim().toUpperCase();
|
||||||
if (textA < textB) {
|
if (textA < textB) {
|
||||||
return -1;
|
return -1;
|
||||||
|
}
|
||||||
|
if (textA > textB) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
if (textA > textB) {
|
|
||||||
return 1;
|
// Remove existing items
|
||||||
|
while (gridContainer.firstChild) {
|
||||||
|
gridContainer.removeChild(gridContainer.firstChild);
|
||||||
}
|
}
|
||||||
return 0;
|
|
||||||
|
// Append sorted items
|
||||||
|
for (i = 0; i < sortedItems.length; i++) {
|
||||||
|
gridContainer.appendChild(sortedItems[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var sortOrder = 'asc';
|
||||||
|
|
||||||
|
function dynamicSort(className) {
|
||||||
|
console.log(className);
|
||||||
|
var gridContainer, gridItems, sortedItems, i;
|
||||||
|
gridContainer = document.getElementById('gridContainer');
|
||||||
|
gridItems = gridContainer.getElementsByClassName('grid-item');
|
||||||
|
sortedItems = Array.from(gridItems);
|
||||||
|
|
||||||
|
sortedItems.sort(function(a, b) {
|
||||||
|
var textA = a.getElementsByClassName(className)[0].textContent.trim();
|
||||||
|
var textB = b.getElementsByClassName(className)[0].textContent.trim();
|
||||||
|
// Check if the className corresponds to a checkbox
|
||||||
|
if (className == 's_col' || className == 's_check') {
|
||||||
|
var checkedA = a.getElementsByClassName(className)[0].checked;
|
||||||
|
var checkedB = b.getElementsByClassName(className)[0].checked;
|
||||||
|
// Sort by checked checkboxes (true first, false last)
|
||||||
|
return (checkedA === checkedB) ? 0 : checkedA ? -1 : 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Remove digits after hyphen if present
|
||||||
|
textA = textA.replace(/-\d+$/, '').trim();
|
||||||
|
textB = textB.replace(/-\d+$/, '').trim();
|
||||||
|
// If text1 is an integer, parse it as a number
|
||||||
|
if (!isNaN(textA) && !isNaN(textB)) {
|
||||||
|
var result = parseInt(textA) - parseInt(textB);
|
||||||
|
// Toggle result based on current sort order
|
||||||
|
return sortOrder === 'asc' ? result : -result;
|
||||||
|
}
|
||||||
|
// If text1 is not an integer, treat it as a string
|
||||||
|
else {
|
||||||
|
textA = textA.toUpperCase();
|
||||||
|
textB = textB.toUpperCase();
|
||||||
|
var result = textA.localeCompare(textB);
|
||||||
|
// Toggle result based on current sort order
|
||||||
|
return sortOrder === 'asc' ? result : -result;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reverse sort order for next click
|
||||||
|
sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
|
||||||
|
|
||||||
|
// Remove existing items
|
||||||
|
while (gridContainer.firstChild) {
|
||||||
|
gridContainer.removeChild(gridContainer.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Append sorted items
|
||||||
|
for (i = 0; i < sortedItems.length; i++) {
|
||||||
|
gridContainer.appendChild(sortedItems[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$("body").on("change", "#s_fig", function (event) {
|
||||||
|
minif = $(this).prop('checked');
|
||||||
|
set_num = $(this).siblings('#set_num').val();
|
||||||
|
index = $(this).siblings('#index').val();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: '/',
|
||||||
|
type: 'POST',
|
||||||
|
data: {
|
||||||
|
'set_num': set_num,
|
||||||
|
'minif': minif,
|
||||||
|
'index': index
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
// Remove existing items
|
$("body").on("change", "#s_check", function (event) {
|
||||||
while (gridContainer.firstChild) {
|
scheck = $(this).prop('checked');
|
||||||
gridContainer.removeChild(gridContainer.firstChild);
|
set_num = $(this).siblings('#set_num').val();
|
||||||
}
|
index = $(this).siblings('#index').val();
|
||||||
|
|
||||||
// Append sorted items
|
$.ajax({
|
||||||
for (i = 0; i < sortedItems.length; i++) {
|
url: '/',
|
||||||
gridContainer.appendChild(sortedItems[i]);
|
type: 'POST',
|
||||||
}
|
data: {
|
||||||
}
|
'set_num': set_num,
|
||||||
var sortOrder = 'asc';
|
'scheck': scheck,
|
||||||
|
'index': index
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
function dynamicSort(className) {
|
$("body").on("change", "#s_col", function (event) {
|
||||||
console.log(className);
|
scol = $(this).prop('checked');
|
||||||
var gridContainer, gridItems, sortedItems, i;
|
set_num = $(this).siblings('#set_num').val();
|
||||||
gridContainer = document.getElementById('gridContainer');
|
index = $(this).siblings('#index').val();
|
||||||
gridItems = gridContainer.getElementsByClassName('grid-item');
|
|
||||||
sortedItems = Array.from(gridItems);
|
|
||||||
|
|
||||||
sortedItems.sort(function(a, b) {
|
$.ajax({
|
||||||
var textA = a.getElementsByClassName(className)[0].textContent.trim();
|
url: '/',
|
||||||
var textB = b.getElementsByClassName(className)[0].textContent.trim();
|
type: 'POST',
|
||||||
// Check if the className corresponds to a checkbox
|
data: {
|
||||||
if (className == 's_col' || className == 's_check') {
|
'set_num': set_num,
|
||||||
var checkedA = a.getElementsByClassName(className)[0].checked;
|
'scol': scol,
|
||||||
var checkedB = b.getElementsByClassName(className)[0].checked;
|
'index': index
|
||||||
// Sort by checked checkboxes (true first, false last)
|
}
|
||||||
return (checkedA === checkedB) ? 0 : checkedA ? -1 : 1;
|
});
|
||||||
}
|
});
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const toggleButton = document.getElementById('toggleButton');
|
||||||
|
let isHidden = true; // Initially, only show checked grid items
|
||||||
|
|
||||||
// Remove digits after hyphen if present
|
// Initialize visibility based on isHidden
|
||||||
textA = textA.replace(/-\d+$/, '').trim();
|
updateVisibility();
|
||||||
textB = textB.replace(/-\d+$/, '').trim();
|
|
||||||
// If text1 is an integer, parse it as a number
|
|
||||||
if (!isNaN(textA) && !isNaN(textB)) {
|
|
||||||
var result = parseInt(textA) - parseInt(textB);
|
|
||||||
// Toggle result based on current sort order
|
|
||||||
return sortOrder === 'asc' ? result : -result;
|
|
||||||
}
|
|
||||||
// If text1 is not an integer, treat it as a string
|
|
||||||
else {
|
|
||||||
textA = textA.toUpperCase();
|
|
||||||
textB = textB.toUpperCase();
|
|
||||||
var result = textA.localeCompare(textB);
|
|
||||||
// Toggle result based on current sort order
|
|
||||||
return sortOrder === 'asc' ? result : -result;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Reverse sort order for next click
|
toggleButton.addEventListener('click', function() {
|
||||||
sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
|
// Toggle visibility and update grid items
|
||||||
|
isHidden = !isHidden;
|
||||||
|
updateVisibility();
|
||||||
|
});
|
||||||
|
|
||||||
// Remove existing items
|
function updateVisibility() {
|
||||||
while (gridContainer.firstChild) {
|
// Get all grid items
|
||||||
gridContainer.removeChild(gridContainer.firstChild);
|
const gridItems = document.querySelectorAll('.grid-item');
|
||||||
}
|
|
||||||
|
|
||||||
// Append sorted items
|
// Iterate over each grid item
|
||||||
for (i = 0; i < sortedItems.length; i++) {
|
gridItems.forEach(function(item) {
|
||||||
gridContainer.appendChild(sortedItems[i]);
|
// Check if the corresponding checkbox is checked
|
||||||
}
|
const checkbox = item.querySelector('.s_col');
|
||||||
}
|
if (isHidden || (checkbox && checkbox.checked)) {
|
||||||
|
// Show the grid item if it's hidden or the checkbox is checked
|
||||||
$("body").on("change", "#s_fig", function (event) {
|
item.style.display = 'block';
|
||||||
minif = $(this).prop('checked');
|
} else {
|
||||||
set_num = $(this).siblings().val()
|
// Hide the grid item if the checkbox is not checked
|
||||||
|
item.style.display = 'none';
|
||||||
$.ajax({
|
}
|
||||||
url: '/',
|
});
|
||||||
type: 'POST',
|
|
||||||
data: {
|
|
||||||
'set_num': set_num,
|
|
||||||
'minif': minif
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$("body").on("change", "#s_check", function (event) {
|
|
||||||
scheck = $(this).prop('checked');
|
|
||||||
set_num = $(this).siblings().val()
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: '/',
|
|
||||||
type: 'POST',
|
|
||||||
data: {
|
|
||||||
'set_num': set_num,
|
|
||||||
'scheck': scheck
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$("body").on("change", "#s_col", function (event) {
|
|
||||||
scol = $(this).prop('checked');
|
|
||||||
set_num = $(this).siblings().val()
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: '/',
|
|
||||||
type: 'POST',
|
|
||||||
data: {
|
|
||||||
'set_num': set_num,
|
|
||||||
'scol': scol
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
|
||||||
const toggleButton = document.getElementById('toggleButton');
|
|
||||||
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');
|
|
||||||
|
|
||||||
// Iterate over each grid item
|
|
||||||
gridItems.forEach(function(item) {
|
|
||||||
// Check if the corresponding checkbox is checked
|
|
||||||
const checkbox = item.querySelector('.s_col');
|
|
||||||
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 () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
const toggleButton = document.getElementById('toggleButton2');
|
const toggleButton = document.getElementById('toggleButton2');
|
||||||
let isHidden = true; // Initially, only show checked grid items
|
let isHidden = true; // Initially, only show checked grid items
|
||||||
|
|
||||||
// Initialize visibility based on isHidden
|
// Initialize visibility based on isHidden
|
||||||
updateVisibility();
|
updateVisibility();
|
||||||
|
|
||||||
toggleButton.addEventListener('click', function() {
|
toggleButton.addEventListener('click', function() {
|
||||||
// Toggle visibility and update grid items
|
// Toggle visibility and update grid items
|
||||||
isHidden = !isHidden;
|
isHidden = !isHidden;
|
||||||
updateVisibility();
|
updateVisibility();
|
||||||
});
|
});
|
||||||
|
|
||||||
function updateVisibility() {
|
function updateVisibility() {
|
||||||
// Get all grid items
|
// Get all grid items
|
||||||
const gridItems = document.querySelectorAll('.grid-item');
|
const gridItems = document.querySelectorAll('.grid-item');
|
||||||
|
|
||||||
// Iterate over each grid item
|
// Iterate over each grid item
|
||||||
gridItems.forEach(function(item) {
|
gridItems.forEach(function(item) {
|
||||||
// Check if the corresponding checkbox is checked
|
// Check if the corresponding checkbox is checked
|
||||||
const checkbox = item.querySelector('.s_check');
|
const checkbox = item.querySelector('.s_check');
|
||||||
if (isHidden || (checkbox && checkbox.checked)) {
|
if (isHidden || (checkbox && checkbox.checked)) {
|
||||||
// Show the grid item if it's hidden or the checkbox is checked
|
// Show the grid item if it's hidden or the checkbox is checked
|
||||||
item.style.display = 'block';
|
item.style.display = 'block';
|
||||||
} else {
|
} else {
|
||||||
// Hide the grid item if the checkbox is not checked
|
// Hide the grid item if the checkbox is not checked
|
||||||
item.style.display = 'none';
|
item.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const toggleButton = document.getElementById('toggleButton3');
|
||||||
|
let isHidden = true; // Initially, only show checked grid items
|
||||||
|
|
||||||
</script>
|
// 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');
|
||||||
|
|
||||||
|
// 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';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user