296 lines
11 KiB
HTML
296 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="center-table" >
|
|
<table id="data" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th class="fixed-width"></th>
|
|
<th style="text-align:left;margin:0px;" class="fixed-width hidden-mobile name-class">Name</th>
|
|
<th class="fixed-width hidden-mobile">Color</th>
|
|
<th class="fixed-width" style="text-align: center;">Qty</th>
|
|
<th class="fixed-width" style="text-align: center;">Missing</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for brick in inventory_list %}
|
|
<tr>
|
|
{% if brick[5] == 'nil' %}
|
|
<td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" alt="{{ brick[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
|
|
{% else %}
|
|
<td><img src="{{ '/static/parts/' + brick[5] + '.jpg' }}" class="lightbox-trigger" alt="{{ brick[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;"loading="lazy"></td>
|
|
{% endif %}
|
|
|
|
<td style="text-align:left;margin:0px;" class="hidden-mobile name-class">{{ brick[3] }}</td>
|
|
<td class="hidden-mobile">{{ brick[7] }}</td>
|
|
<td style="text-align: center;">{{ 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="part_img_url_id" value="{{ brick[5] }}">
|
|
<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[4] == brick[6] and (missing[6] == brick[10] or missing[6] == 'brick[10]' or missing[6] == 'None') %}
|
|
{% set ns.count = missing[5] %}
|
|
{% 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" loading="lazy">
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% if minifig_list | length > 0 %}
|
|
|
|
<h1 class="title">Minifigs</h1>
|
|
{% for fig in minifig_list %}
|
|
<h2 class="subtitle">{{ fig[2] }} ({{ fig[0] }})</h2>
|
|
|
|
<div style="display: flex; justify-content: center;">
|
|
<div style="display: flex; align-items: center;">
|
|
{% if fig[4] == None %}
|
|
<img src="/static/nil_mf.jpg" class="lightbox-trigger" style="height: 100px; width: auto;" alt="{{ fig[2] }}" loading="lazy">
|
|
{% else %}
|
|
<img src="{{ '/static/minifigs/' + fig[0] + '.jpg' }}" class="lightbox-trigger" style="height: 100px; width: auto;" alt="{{ fig[2] }}" loading="lazy">
|
|
{% endif %}
|
|
<span style="font-size: 50px; margin-left: 10px;">X {{ fig[3] }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="center-table" >
|
|
<table id="data" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th class="fixed-width"></th>
|
|
<th style="text-align:left;margin:0px;" class="fixed-width hidden-mobile name-class">Name</th>
|
|
<th class="fixed-width hidden-mobile">Color</th>
|
|
<th class="fixed-width" style="text-align: center;">Qty</th>
|
|
<th class="fixed-width" style="text-align: center;">Missing</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
{% for parts in minifig_inventory_list %}
|
|
{% for part in parts %}
|
|
|
|
{% if part[0] == fig[0] %}
|
|
<tr>
|
|
{% if part[5] == 'nil' %}
|
|
<td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" alt="{{ part[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
|
|
{% else %}
|
|
<td><img src="{{ '/static/parts/' + part[5] + '.jpg' }}" class="lightbox-trigger" alt="{{ part[3] }}" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
|
|
{% endif %}
|
|
<td style="text-align:left;margin:0px;" class="hidden-mobile name-class">{{ part[3] }}</td>
|
|
<td class="hidden-mobile">{{ part[7] }}</td>
|
|
<td style="text-align: center;">{{ part[8] * fig[3] }}</td>
|
|
<td class="centered-cell">
|
|
<div class="inputContainer">
|
|
{% set ns = namespace(count='') %}
|
|
<form id="number-form">
|
|
<input type="hidden" id="set_num" value="{{ part[0] }}">
|
|
<input type="hidden" id="id" value="{{ part[1] }}">
|
|
<input type="hidden" id="part_num" value="{{ part[2] }}">
|
|
<input type="hidden" id="color_id" value="{{ part[6] }}">
|
|
<input type="hidden" id="part_img_url_id" value="{{ part[5] }}">
|
|
<input type="hidden" id="element_id" value="{{ part[10] }}">
|
|
<input type="hidden" id="u_id" value="{{ part[11] }}">
|
|
|
|
|
|
<div class='inputField'>
|
|
{% for missing in missing_list %}
|
|
{% if missing[1] == part[1] and missing[2] == part[2] and missing[4] == part[6] and (missing[6] == part[10] or missing[6] == 'part[10]' or missing[6] == 'None') %}
|
|
{% set ns.count = missing[5] %}
|
|
{% 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" loading="lazy">
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<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();
|
|
// } );
|
|
|
|
|
|
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 = '';
|
|
console.log(element.getAttribute('alt'));
|
|
textContent = element.getAttribute('alt');
|
|
// textContent = element.closest('tr').querySelector('td:nth-child(2)').textContent; // Adjust the index accordingly
|
|
lightboxText.textContent = 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;
|
|
part_img_url_id = $(this)[0][4].value;
|
|
element_id = $(this)[0][5].value;
|
|
u_id = $(this)[0][6].value;
|
|
missing = $(this)[0][7].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,
|
|
'part_img_url_id': part_img_url_id,
|
|
'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 %}
|
|
|