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

New frontpage format

Browse Source
This commit is contained in:
FrederikBaerentsen 2024-04-14 22:10:07 +02:00
parent 3ca1a1a8bd
commit 4dee6d33e9
2 changed files with 304 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app.py
View File

@ -34,6 +34,7 @@ def index():
if request.method == 'POST':
set_num = request.form.get('set_num')
index = request.form.get('index')
minif = request.form.get('minif')
scheck = request.form.get('scheck')
scol = request.form.get('scol')
@ -41,11 +42,11 @@ def index():
with open('./info/'+set_num+'.json') as info:
json_file = json.loads(info.read())
if minif != None:
json_file['Minifigs Collected'] = minif
json_file['unit'][int(index)]['Minifigs Collected'] = minif
if scheck != None:
json_file['Set Checked'] = scheck
json_file['unit'][int(index)]['Set Checked'] = scheck
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:
json.dump(json_file,dump_file)

106
templates/frontpage.html
View File

@ -33,15 +33,14 @@ body {
.grid-container {
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)); */
gap: 10px;
padding: 10px;
}
.grid-item {
height: 300px;
display: flex;
height:auto;
}
.card {
@ -49,7 +48,7 @@ body {
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
padding-bottom:40px; /* Height of the footer */
padding-bottom:30px; /* Height of the footer */
}
/* Adjust height for smaller screens */
@ -68,7 +67,6 @@ body {
.grid-item img {
max-width: 100%;
height: auto;
display: block;
}
@ -79,7 +77,7 @@ body {
position:absolute;
bottom:0;
width:90%;
height:40px; /* Height of the footer */
height:30px; /* Height of the footer */
}
.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_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_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('s_col')">Sort by Collected</button>
<button class="button button-outline" onclick="dynamicSort('s_check')">Sort by Checked</button>
@ -114,16 +113,21 @@ body {
<center>
<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="toggleButton3">Show Complete</button>
</center>
<!-- Add more buttons for other text values if needed -->
</div>
<center>
<div class="grid-container" id="gridContainer">
{% 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="columns" style="">
<div class="column is-two-thirds" style="text-align: left;">
<b class="is-size-5">
@ -138,25 +142,21 @@ body {
</div>
</div>
<div class="columns" style="">
<div class="column is-one-third">
<div class="column is-one-third" style="">
<figure class="image is-4by3">
<a href="/{{ i['set_num'] }}">
<img style='height: 100%; width: 100%; object-fit: contain' src="/static/sets/{{ i['set_num'] }}/cover.jpg" alt="Image">
</a>
</figure>
<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'] %}
<div class="column is-one-thid" style="border: 1px blue dashed;">
<p>
{{ j }}
</p>
<div class="column is-one-thid" style="margin:0;padding:0;">
<p>Set #{{ loop.index }}</p>
<div class="is-size-7">
<label class="checkbox" >
<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' %}
<input class="s_fig" id="s_fig" type="checkbox" checked />
{% else %}
@ -164,8 +164,10 @@ body {
{% endif %}
Minifigs Collected
</label>
<br>
<label class="checkbox" >
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
<input type="hidden" id="index" value="{{ loop.index0 }}">
{% if json_file[i['set_num']]['Set Checked'] == 'true' %}
<input class="s_check" id="s_check" type="checkbox" checked />
{% else %}
@ -173,21 +175,36 @@ body {
{% endif %}
Set is checked
</label>
<br>
<label class="checkbox" >
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
<input type="hidden" id="index" value="{{ loop.index0 }}">
{% if json_file[i['set_num']]['Set Collected'] == 'true' %}
<input class="s_col" id="s_col" type="checkbox" checked />
{% else %}
<input class="s_col" id="s_col" type="checkbox" />
{% endif %}
Set is collected
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>
{% endfor %}
</div>
<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">
<span>
<a class="is-size-7" style="color: #363636;" href="/{{ i['set_num'] }}">Inventory</a>
@ -202,11 +219,9 @@ body {
</footer>
</div>
</div>
</div>
{% endfor %}
</div>
</center>
<script>
function searchFunction() {
var input, filter, gridContainer, gridItems, i, txtValue;
@ -312,42 +327,48 @@ body {
$("body").on("change", "#s_fig", function (event) {
minif = $(this).prop('checked');
set_num = $(this).siblings().val()
set_num = $(this).siblings('#set_num').val();
index = $(this).siblings('#index').val();
$.ajax({
url: '/',
type: 'POST',
data: {
'set_num': set_num,
'minif': minif
'minif': minif,
'index': index
}
});
});
$("body").on("change", "#s_check", function (event) {
scheck = $(this).prop('checked');
set_num = $(this).siblings().val()
set_num = $(this).siblings('#set_num').val();
index = $(this).siblings('#index').val();
$.ajax({
url: '/',
type: 'POST',
data: {
'set_num': set_num,
'scheck': scheck
'scheck': scheck,
'index': index
}
});
});
$("body").on("change", "#s_col", function (event) {
scol = $(this).prop('checked');
set_num = $(this).siblings().val()
set_num = $(this).siblings('#set_num').val();
index = $(this).siblings('#index').val();
$.ajax({
url: '/',
type: 'POST',
data: {
'set_num': set_num,
'scol': scol
'scol': scol,
'index': index
}
});
});
@ -416,6 +437,37 @@ body {
}
});
document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.getElementById('toggleButton3');
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_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>