{% 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 %}