Working on rewrite of web part
This commit is contained in:
parent
c0b2e72686
commit
5ddc27a73b
@ -5,19 +5,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- CSS Reset -->
|
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- CSS Reset -->
|
||||||
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Milligram CSS -->
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@ -261,13 +249,13 @@ background-color: white;
|
|||||||
<div class="header" id='myHeader'>
|
<div class="header" id='myHeader'>
|
||||||
<span><h2>{{ tmp }} - {{ title }} </h2></span>
|
<span><h2>{{ tmp }} - {{ title }} </h2></span>
|
||||||
|
|
||||||
<span><button style="background-color: white;color: black;border: 1px dotted black;width: 98%;margin: 1%;" onclick="goToPage('/')">Home</button></span>
|
<span><button class="button is-link" style="width: 98%;margin: 1%;" onclick="goToPage('/')">Home</button></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<center>
|
<center>
|
||||||
|
|
||||||
<img class="lightbox-trigger" id="cover" style='height: 100px; width: auto; object-fit: contain' src="/static/sets/{{ tmp }}/cover.jpg" alt="Image">
|
<img class="lightbox-trigger" id="cover" style='height: 100px; width: auto; object-fit: contain' src="/static/sets/{{ tmp }}.jpg" alt="Image">
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
{% block scripts %}{% endblock %}
|
{% block scripts %}{% endblock %}
|
||||||
|
|||||||
41
templates/create.html
Normal file
41
templates/create.html
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title></title>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<form id="createForm" action="/create" method="post">
|
||||||
|
<div class="field">
|
||||||
|
<label class="label" for="inputField">Input:</label>
|
||||||
|
<div class="control">
|
||||||
|
<input class="input" type="text" id="inputField" name="inputField">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="control">
|
||||||
|
<label class="checkbox">
|
||||||
|
<input type="checkbox" name="addDuplicate" value="true">
|
||||||
|
Add duplicate
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="control">
|
||||||
|
<button class="button is-primary" type="submit">Submit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@ -1,17 +1,479 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html data-theme="light">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Flask App - Insert Number</title>
|
<title>Set Overview</title>
|
||||||
</head>
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||||
<body>
|
|
||||||
<h1>Insert Number</h1>
|
|
||||||
<form action="/saveNumber" method="post">
|
|
||||||
<label for="numberInput">Number:</label>
|
|
||||||
<input type="number" id="numberInput" name="numberInput">
|
|
||||||
<button type="submit">Save Number</button>
|
|
||||||
</form>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-container {
|
||||||
|
display: grid;
|
||||||
|
/* grid-template-columns: repeat(auto-fit, minmax(10%, 23%)); /* Between 33% and 50% width */
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item {
|
||||||
|
height:auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom:30px; /* Height of the footer */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Adjust height for smaller screens */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.card {
|
||||||
|
height: auto; /* Let the height adjust dynamically */
|
||||||
|
}
|
||||||
|
.grid-container {
|
||||||
|
grid-template-columns: 100%; /* On mobile, set width to 100% */
|
||||||
|
}
|
||||||
|
.grid-item {
|
||||||
|
height: auto; /* Let the height adjust dynamically */
|
||||||
|
overflow: visible; /* Allow content to overflow if necessary */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item img {
|
||||||
|
max-width: 100%;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
}
|
||||||
|
.card p {
|
||||||
|
margin: 0; /* Remove default margin */
|
||||||
|
}
|
||||||
|
.card-footer {
|
||||||
|
position:absolute;
|
||||||
|
bottom:0;
|
||||||
|
width:90%;
|
||||||
|
height:30px; /* Height of the footer */
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: black;
|
||||||
|
border-color: black;
|
||||||
|
}
|
||||||
|
.button.button-clear,
|
||||||
|
.button.button-outline {
|
||||||
|
background-color: transparent;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
.button.button-clear {
|
||||||
|
border-color: transparent;
|
||||||
|
}
|
||||||
|
.search-container {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="search-container">
|
||||||
|
<input type="text" id="searchInput" onkeyup="searchFunction()" placeholder="Search...">
|
||||||
|
</select>
|
||||||
|
<center>
|
||||||
|
<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>
|
||||||
|
</center>
|
||||||
|
<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>
|
||||||
|
<select id="themeDropdown">
|
||||||
|
<option value="">Select Theme</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Add more buttons for other text values if needed -->
|
||||||
|
</div>
|
||||||
|
<div class="grid-container" id="gridContainer">
|
||||||
|
|
||||||
|
{% for i in set_list %}
|
||||||
|
<div class="grid-item">
|
||||||
|
<div class="card">
|
||||||
|
<div class="columns" style="">
|
||||||
|
<div class="column is-two-thirds" style="text-align: left;">
|
||||||
|
<p class="is-size-5">
|
||||||
|
<span style="font-weight: bold;" class="set_id">{{ i[0] }}</span> <span style="font-weight: bold;" class="set_name">{{ i[1] }}</span>
|
||||||
|
<span class="is-size-7">{{ i[8] }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="column" style="text-align: left;">
|
||||||
|
<div class="is-size-5">
|
||||||
|
<b>Parts:</b>
|
||||||
|
<span class='set_parts'>{{ i[4] }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columns" style="">
|
||||||
|
<div class="column is-half" style="">
|
||||||
|
<figure class="image is-4by3">
|
||||||
|
<a href="/{{ i[0] }}/{{ i[8] }}">
|
||||||
|
<img style='height: 100%; width: 100%; object-fit: contain' src="/static/sets/{{ i[0] }}.jpg" alt="Image">
|
||||||
|
</a>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="column is-half" style="margin:0;padding:0;">
|
||||||
|
<div class="is-size-7">
|
||||||
|
<label class="checkbox" >
|
||||||
|
<input type="hidden" id="set_num" value="{{ i[0] }}">
|
||||||
|
<input class="s_fig" id="s_fig" type="checkbox" checked />
|
||||||
|
Minifigs Collected
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
<label class="checkbox" >
|
||||||
|
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
|
||||||
|
<input class="s_check" id="s_check" type="checkbox" checked />
|
||||||
|
Set is checked
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
<label class="checkbox" >
|
||||||
|
<input type="hidden" id="set_num" value="{{ i['set_num'] }}">
|
||||||
|
<input class="s_col" id="s_col" type="checkbox" checked />
|
||||||
|
Set is collected and boxed
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
<label class="checkbox" >
|
||||||
|
<input type="checkbox" class="s_com" onclick="return false;"/> Set is missing pieces
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="card-footer" style="">
|
||||||
|
<p class="card-footer-item">
|
||||||
|
<span>
|
||||||
|
<a class="is-size-7 set_theme" style="color: #363636;">{{ i[3] }}</a> <a class="is-size-7" style="color: #363636;"> (<span class='set_year'>{{ i[2] }}</span>)</a>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="card-footer-item">
|
||||||
|
<span>
|
||||||
|
<a class="is-size-6" style="color: #363636;" href="/{{ i['set_num'] }}">Inventory</a>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="card-footer-item">
|
||||||
|
<span>
|
||||||
|
<a class="is-size-6" style="color: #363636;" href="/{{ i['set_num'] }}">Instructions</a>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
function searchFunction() {
|
||||||
|
var input, filter, gridContainer, gridItems, i, txtValue;
|
||||||
|
input = document.getElementById('searchInput');
|
||||||
|
filter = input.value.toUpperCase();
|
||||||
|
gridContainer = document.getElementById('gridContainer');
|
||||||
|
gridItems = gridContainer.getElementsByClassName('grid-item');
|
||||||
|
|
||||||
|
for (i = 0; i < gridItems.length; i++) {
|
||||||
|
txtValue = gridItems[i].textContent || gridItems[i].innerText;
|
||||||
|
if (txtValue.toUpperCase().indexOf(filter) > -1) {
|
||||||
|
gridItems[i].style.display = "";
|
||||||
|
} else {
|
||||||
|
gridItems[i].style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function sortFunction() {
|
||||||
|
var sortSelect, sortValue, gridContainer, gridItems, sortedItems, i;
|
||||||
|
sortSelect = document.getElementById('sortSelect');
|
||||||
|
sortValue = sortSelect.value;
|
||||||
|
gridContainer = document.getElementById('gridContainer');
|
||||||
|
gridItems = gridContainer.getElementsByClassName('grid-item');
|
||||||
|
sortedItems = Array.from(gridItems);
|
||||||
|
|
||||||
|
if (sortValue === 'alphabetical') {
|
||||||
|
sortedItems.sort(function(a, b) {
|
||||||
|
var textA = a.textContent.trim().toUpperCase();
|
||||||
|
var textB = b.textContent.trim().toUpperCase();
|
||||||
|
if (textA < textB) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
if (textA > textB) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove existing items
|
||||||
|
while (gridContainer.firstChild) {
|
||||||
|
gridContainer.removeChild(gridContainer.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$("body").on("change", "#s_check", function (event) {
|
||||||
|
scheck = $(this).prop('checked');
|
||||||
|
set_num = $(this).siblings('#set_num').val();
|
||||||
|
index = $(this).siblings('#index').val();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: '/',
|
||||||
|
type: 'POST',
|
||||||
|
data: {
|
||||||
|
'set_num': set_num,
|
||||||
|
'scheck': scheck,
|
||||||
|
'index': index
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$("body").on("change", "#s_col", function (event) {
|
||||||
|
scol = $(this).prop('checked');
|
||||||
|
set_num = $(this).siblings('#set_num').val();
|
||||||
|
index = $(this).siblings('#index').val();
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: '/',
|
||||||
|
type: 'POST',
|
||||||
|
data: {
|
||||||
|
'set_num': set_num,
|
||||||
|
'scol': scol,
|
||||||
|
'index': index
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
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 () {
|
||||||
|
const toggleButton = document.getElementById('toggleButton2');
|
||||||
|
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_check');
|
||||||
|
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('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';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const themeDropdown = document.getElementById('themeDropdown');
|
||||||
|
|
||||||
|
// Retrieve all unique values from the <a> elements
|
||||||
|
const themes = [];
|
||||||
|
const themeLinks = document.querySelectorAll('.set_theme');
|
||||||
|
themeLinks.forEach(function(link) {
|
||||||
|
const themeId = link.textContent.trim();
|
||||||
|
if (!themes.includes(themeId)) {
|
||||||
|
themes.push(themeId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create options for the dropdown list
|
||||||
|
themes.forEach(function(theme) {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.value = theme;
|
||||||
|
option.textContent = theme;
|
||||||
|
themeDropdown.appendChild(option);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add event listener to filter grid items
|
||||||
|
themeDropdown.addEventListener('change', function() {
|
||||||
|
const selectedTheme = themeDropdown.value;
|
||||||
|
filterGridItems(selectedTheme);
|
||||||
|
});
|
||||||
|
|
||||||
|
function filterGridItems(selectedTheme) {
|
||||||
|
const gridItems = document.querySelectorAll('.grid-item');
|
||||||
|
gridItems.forEach(function(item) {
|
||||||
|
const themeLink = item.querySelector('.set_theme');
|
||||||
|
const themeId = themeLink.textContent.trim();
|
||||||
|
if (!selectedTheme || themeId === selectedTheme) {
|
||||||
|
item.style.display = 'block'; // Show the grid item
|
||||||
|
} else {
|
||||||
|
item.style.display = 'none'; // Hide the grid item
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
237
templates/table.html
Normal file
237
templates/table.html
Normal file
@ -0,0 +1,237 @@
|
|||||||
|
{% extends "base.html" %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<center><button class="hidden-desktop button is-primary" id="expand-button">Expand Columns</button></center>
|
||||||
|
|
||||||
|
|
||||||
|
{{ inventory_list[0][5] }}
|
||||||
|
|
||||||
|
|
||||||
|
<div class="center-table">
|
||||||
|
<table id="data" class="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="fixed-width" style="width:50px;"></th>
|
||||||
|
<th style="text-align:left;margin:0px;" class="fixed-width hidden-mobile">Name</th>
|
||||||
|
<th class="hidden-mobile">Color</th>
|
||||||
|
<th style="text-align: center;">Qty</th>
|
||||||
|
<th style="text-align: center;">Missing</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for brick in inventory_list %}
|
||||||
|
<tr>
|
||||||
|
<td class="fixed-width" style="width:50px;"><img src="{{ '/static/parts/' + brick[5] + '.jpg' }}" class="lightbox-trigger" class="fixed-width" style="height: 50px; width: 50px;"></td>
|
||||||
|
<td style="text-align:left;margin:0px;" class="hidden-mobile">{{ brick[3] }}</td>
|
||||||
|
<td class="hidden-mobile">{{ brick[7] }}</td>
|
||||||
|
<td>{{ brick[8] }}</td>
|
||||||
|
<td class="centered-cell">
|
||||||
|
<div class="inputContainer">
|
||||||
|
{% set ns = namespace(count='') %}
|
||||||
|
<form id="number-form">
|
||||||
|
<input type="hidden" id="set_num" value="{{ brick[0] }}">
|
||||||
|
<input type="hidden" id="id" value="{{ brick[1] }}">
|
||||||
|
<input type="hidden" id="part_num" value="{{ brick[2] }}">
|
||||||
|
<input type="hidden" id="color_id" value="{{ brick[6] }}">
|
||||||
|
<input type="hidden" id="element_id" value="{{ brick[10] }}">
|
||||||
|
<input type="hidden" id="u_id" value="{{ brick[11] }}">
|
||||||
|
|
||||||
|
|
||||||
|
<div class='inputField'>
|
||||||
|
{% for missing in missing_list %}
|
||||||
|
{% if missing[1] == brick[1] and missing[2] == brick[2] and missing[3] == brick[6] and missing[5] == brick[10] %}
|
||||||
|
{% set ns.count = missing[4] %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
<input type="tel" style="text-align:center;font-size: 16px;" id="missing" value="{{ ns.count }}" pattern="\d+">
|
||||||
|
<button class="square-button" id="bnumber-form" type="submit">
|
||||||
|
<img src="/static/save.svg" alt="Save Icon">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="lightbox-modal">
|
||||||
|
<div class="lightbox-wrapper">
|
||||||
|
<span class="close">×</span>
|
||||||
|
<img class="lightbox-content" id="lightbox-image">
|
||||||
|
<div class="text-container" id="lightbox-text"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{% block scripts %}
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// $(document).ready( function () {
|
||||||
|
// $('#data').DataTable();
|
||||||
|
// } );
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
// const myDataTable = document.getElementById('data');
|
||||||
|
|
||||||
|
// myDataTable.addEventListener('click', function (event) {
|
||||||
|
// const clickedRow = event.target.closest('td');
|
||||||
|
// if (clickedRow) {
|
||||||
|
// // Remove highlighting from all rows
|
||||||
|
// const rows = myDataTable.querySelectorAll('tr');
|
||||||
|
// rows.forEach(row => row.classList.remove('highlighted'));
|
||||||
|
|
||||||
|
// // Add highlighting to the clicked row
|
||||||
|
// if (clickedRow.classList.contains('highlighted')) {
|
||||||
|
|
||||||
|
// clickedRow.classList.remove('highlighted');
|
||||||
|
// } else {
|
||||||
|
// clickedRow.classList.add('highlighted');
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
function goToPage(url) {
|
||||||
|
window.location.href = url;
|
||||||
|
}
|
||||||
|
|
||||||
|
const expandButton = document.getElementById('expand-button');
|
||||||
|
const myDataTable = document.getElementById('data');
|
||||||
|
let isExpanded = false;
|
||||||
|
|
||||||
|
expandButton.addEventListener('click', () => {
|
||||||
|
const hiddenColumns = myDataTable.querySelectorAll('.hidden-mobile');
|
||||||
|
hiddenColumns.forEach(column => {
|
||||||
|
if (isExpanded) {
|
||||||
|
column.style.display = 'none';
|
||||||
|
expandButton.textContent = 'Expand Columns';
|
||||||
|
} else {
|
||||||
|
column.style.display = 'table-cell';
|
||||||
|
expandButton.textContent = 'Hide Columns';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
isExpanded = !isExpanded;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const lightboxTrigger = document.querySelectorAll('.lightbox-trigger');
|
||||||
|
const lightboxModal = document.getElementById('lightbox-modal');
|
||||||
|
const lightboxImage = document.getElementById('lightbox-image');
|
||||||
|
const lightboxText = document.getElementById('lightbox-text');
|
||||||
|
const closeModal = document.querySelector('.close');
|
||||||
|
|
||||||
|
lightboxTrigger.forEach(function (element) {
|
||||||
|
element.addEventListener('click', function () {
|
||||||
|
const imgSrc = element.getAttribute('src');
|
||||||
|
textContent = '';
|
||||||
|
try {
|
||||||
|
textContent = element.closest('tr').querySelector('td:nth-child(2)').textContent; // Adjust the index accordingly
|
||||||
|
lightboxText.textContent = textContent;
|
||||||
|
} catch (e) {
|
||||||
|
textContent = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
lightboxImage.setAttribute('src', imgSrc);
|
||||||
|
lightboxModal.style.display = 'block';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
closeModal.addEventListener('click', function () {
|
||||||
|
lightboxModal.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
lightboxModal.addEventListener('click', function (event) {
|
||||||
|
if (event.target === lightboxModal || event.target === lightboxImage || event.target === lightboxText) {
|
||||||
|
// Dismiss only if the clicked element is part of the content area
|
||||||
|
lightboxModal.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Dismiss the lightbox when clicking outside the content area (i.e., the background)
|
||||||
|
lightboxModal.addEventListener('click', function (event) {
|
||||||
|
if (event.target != lightboxModal) {
|
||||||
|
lightboxModal.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
const numberInput = document.getElementById('missing');
|
||||||
|
|
||||||
|
// Add event listener to input to prevent non-numeric input
|
||||||
|
numberInput.addEventListener('input', function () {
|
||||||
|
// Remove non-numeric characters
|
||||||
|
this.value = this.value.replace(/\D/g, '');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Force numeric keyboard on mobile devices
|
||||||
|
numberInput.setAttribute('inputmode', 'numeric');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
$("body").on("submit", "#number-form", function (event) {
|
||||||
|
// $('#number-form').submit(function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
console.log($(this)[0]);
|
||||||
|
|
||||||
|
set_num = $(this)[0][0].value;
|
||||||
|
id = $(this)[0][1].value;
|
||||||
|
part_num = $(this)[0][2].value;
|
||||||
|
color_id = $(this)[0][3].value;
|
||||||
|
element_id = $(this)[0][4].value;
|
||||||
|
u_id = $(this)[0][5].value;
|
||||||
|
missing = $(this)[0][6].value
|
||||||
|
|
||||||
|
// console.log('set_num: ' + set_num);
|
||||||
|
// console.log('id: ' + id);
|
||||||
|
// console.log('part_num: ' + part_num);
|
||||||
|
// console.log('color_id: ' + color_id);
|
||||||
|
// console.log('element_id: ' + element_id);
|
||||||
|
// console.log('u_id: ' + u_id);
|
||||||
|
// console.log('missing: ' + missing);
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: '/'+set_num+'/'+u_id,
|
||||||
|
type: 'POST',
|
||||||
|
data: {
|
||||||
|
'set_num': set_num,
|
||||||
|
'id': id,
|
||||||
|
'part_num': part_num,
|
||||||
|
'color_id': color_id,
|
||||||
|
'element_id': element_id,
|
||||||
|
'u_id': u_id,
|
||||||
|
'missing': missing
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// part_num = request.form.get('brickpartpart_num')
|
||||||
|
// color = request.form.get('brickcolorname')
|
||||||
|
// index = request.form.get('index')
|
||||||
|
// number = request.form.get('numberInput')
|
||||||
|
// is_spare = request.form.get('is_spare')
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user