337 lines
10 KiB
HTML
337 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<center><button class="hidden-desktop" style="background-color: white;border: 1px solid black; color: black;" id="expand-button">Expand Columns</button></center>
|
|
<div class="center-table">
|
|
<table id="data" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th style="text-align:center;margin:0px;" class="fixed-width hidden-mobile">ID</th>
|
|
<th class="fixed-width hidden-mobile">Name</th>
|
|
<th class="fixed-width">Color</th>
|
|
<th style="text-align: center;" class="fixed-width">Qty</th>
|
|
{% for i in json_file['unit'] %}
|
|
<th style="text-align: center;" class="fixed-width">Missing ({{ loop.index }})</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for brick in inventory_file.results %}
|
|
{% if brick.is_spare == False %}
|
|
<tr>
|
|
{% if brick.element_id == None %}
|
|
<td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" style="height: 50px; width: auto;"></td>
|
|
{% else %}
|
|
<td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" class="lightbox-trigger" style="height: 50px; width: auto;"></td>
|
|
{% endif %}
|
|
<td style="text-align:center;margin:0px;" class="hidden-mobile">{{ brick.part.part_num }}</td>
|
|
<td class="hidden-mobile">{{ brick.part.name }}</td>
|
|
<td>{{ brick.color.name }}</td>
|
|
<td style="text-align:center;">{{ brick.quantity }}</td>
|
|
{% for i in json_file['unit'] %}
|
|
|
|
<td class="centered-cell">
|
|
<div class="inputContainer">
|
|
{% set ns = namespace(count='') %}
|
|
<!-- <form id="number-form" action="/{{ tmp }}" method="post"> -->
|
|
<form id="number-form">
|
|
<input type="hidden" name="numberID" id="numberID" value="{{ tmp }}">
|
|
<input type="hidden" name="brickpartpart_num" id="brickpartpart_num" value="{{ brick.part.part_num }}">
|
|
<input type="hidden" name="count" value="{{ i }}">
|
|
<input type="hidden" name="index" id="index" value="{{ loop.index0 }}">
|
|
<input type="hidden" name="is_spare" id="is_spare" value="{{ brick.is_spare }}">
|
|
<input type="hidden" name="brickcolorname" id="brickcolorname" value="{{ brick.color.name }}">
|
|
{% for j in json_file['unit'][loop.index0]['bricks']['missing'] %}
|
|
{% if j['brick']['ID'] == brick.part.part_num and j['brick']['color_name'] == brick.color.name %}
|
|
|
|
{% if j['brick']['is_spare']|lower == brick.is_spare|lower %}
|
|
|
|
{% set ns.count = j['brick']['amount'] %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
<div class='inputField'>
|
|
<input type="tel" style="text-align:center;font-size: 16px;" id="numberInput" name="numberInput" value="{{ ns.count }}" pattern="\d+">
|
|
<span style="display:none">{{ ns.count }}</span>
|
|
<button class="square-button" id="bnumber-form" type="submit">
|
|
<img src="/static/save.svg" alt="Save Icon">
|
|
</button>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{% if minifigs_file.figs | length > 0 %}
|
|
|
|
<h1>Minifigs</h1>
|
|
{% for fig in minifigs_file.figs %}
|
|
|
|
<h2>{{ fig.name}}</h2>
|
|
|
|
<img src="{{ '/static/figs/' + fig.set_num + '.jpg' }}" class="lightbox-trigger" style="height: 100px; width: auto;"><span style="font-size: 50px;">X {{ fig.quantity }}</span>
|
|
|
|
<div class="center-table">
|
|
<table id="sdata" class="table">
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th style="text-align:center;margin:0px;" class="fixed-width">ID</th>
|
|
<th class="fixed-width">Name</th>
|
|
<th>Total Qty</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for part in fig.parts %}
|
|
<tr>
|
|
<td><img src="{{ '/static/figs/' + part.part_num + '.jpg' }}" class="lightbox-trigger" style="height: 50px; width: auto;"></td>
|
|
<td style="text-align:center;margin:0px;">{{ part.part_num }}</td>
|
|
<td>{{ part.name }}</td>
|
|
<td>{{ part.quantity * fig.quantity }}</td>
|
|
{% for i in json_file['unit'] %}
|
|
|
|
<td class="centered-cell">
|
|
<div class="inputContainer">
|
|
{% set ns = namespace(count='') %}
|
|
<!-- <form id="number-form" action="/{{ tmp }}" method="post"> -->
|
|
<form id="number-form">
|
|
<input type="hidden" name="numberID" id="numberID" value="{{ tmp }}">
|
|
<input type="hidden" name="brickpartpart_num" id="brickpartpart_num" value="{{ part.part_num }}">
|
|
<input type="hidden" name="count" value="{{ i }}">
|
|
<input type="hidden" name="index" id="index" value="{{ loop.index0 }}">
|
|
<input type="hidden" name="is_spare" id="is_spare" value="">
|
|
<input type="hidden" name="brickcolorname" id="brickcolorname" value="{{ part.color_name }}">
|
|
{% for j in json_file['unit'][loop.index0]['bricks']['missing'] %}
|
|
{% if j['brick']['ID'] == part.part_num and j['brick']['color_name'] == part.color_name %}
|
|
|
|
|
|
{% endif %}
|
|
{% endfor %}
|
|
<div class='inputField'>
|
|
<input type="tel" style="text-align:center;font-size: 16px;" id="numberInput" name="numberInput" value="{{ ns.count }}" pattern="\d+">
|
|
<span style="display:none">{{ ns.count }}</span>
|
|
<button class="square-button" id="bnumber-form" type="submit">
|
|
<img src="/static/save.svg" alt="Save Icon">
|
|
</button>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% 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();
|
|
// } );
|
|
|
|
|
|
|
|
|
|
|
|
// 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(3)').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('numberInput');
|
|
|
|
// 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');
|
|
});
|
|
|
|
|
|
let options = {
|
|
searchable: true,
|
|
sortable: true,
|
|
paging: false,
|
|
perPage: 10,
|
|
perPageSelect: [5, 10, 25, 50, ["All", -1]],
|
|
columns: [
|
|
|
|
{ select: [0], sortable: false }
|
|
|
|
|
|
]
|
|
};
|
|
|
|
let myTable = document.querySelector("#data");
|
|
let dataTable = new simpleDatatables.DataTable(myTable, options);
|
|
|
|
|
|
$("body").on("click", "#number-form", function (event) {
|
|
// $('#number-form').submit(function(event) {
|
|
event.preventDefault();
|
|
//console.log($(this)[0]);
|
|
|
|
brickpartpart_num = $(this)[0][1].value;
|
|
brickcolorname = $(this)[0][5].value;
|
|
index = $(this)[0][3].value;
|
|
numberInput = $(this)[0][6].value;
|
|
is_spare = $(this)[0][4].value;
|
|
|
|
// console.log('ID: ' + brickpartpart_num);
|
|
// console.log('Color Name: ' + brickcolorname);
|
|
// console.log('Index: ' + index);
|
|
// console.log('Number Input: ' + numberInput);
|
|
// console.log('is_spare: ' + is_spare);
|
|
|
|
$.ajax({
|
|
url: '/'+$(this)[0][0].value,
|
|
type: 'POST',
|
|
data: {
|
|
'brickpartpart_num': brickpartpart_num,
|
|
'brickcolorname': brickcolorname,
|
|
'index': index,
|
|
'numberInput': numberInput,
|
|
'is_spare': is_spare
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 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 %}
|
|
|