forked from FrederikBaerentsen/BrickTracker
203 lines
7.0 KiB
HTML
203 lines
7.0 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>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' }}" 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 action="/{{ tmp }}/saveNumber" method="post">
|
|
<input type="hidden" name="brick.part.part_num" value="{{ brick.part.part_num }}">
|
|
<input type="hidden" name="count" value="{{ i }}">
|
|
<input type="hidden" name="index" value="{{ loop.index0 }}">
|
|
<input type="hidden" name="is_spare" value="{{ brick.is_spare }}">
|
|
<input type="hidden" name="brick.color.name" 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="text" id="numberInput" name="numberInput" value={{ ns.count }}>
|
|
<button class="square-button" type="submit">
|
|
<img src="/static/save.svg" alt="Save Icon">
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h1>Spares</h1>
|
|
<table id="data" class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>img</th>
|
|
<th>element_id</th>
|
|
<th>part_num</th>
|
|
<th>name</th>
|
|
<th>color</th>
|
|
<th>qty</th>
|
|
{% for i in json_file['unit'] %}
|
|
<th>Missing ({{ loop.index }})</th>
|
|
{% endfor %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for brick in inventory_file.results %}
|
|
{% if brick.is_spare == True %}
|
|
<tr>
|
|
{% if brick.element_id == None %}
|
|
<td><img src="{{ '/static/none.jpg' }}" style="height: 50px; width: auto;"></td>
|
|
{% else %}
|
|
<td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" style="height: 50px; width: auto;"></td>
|
|
{% endif %}
|
|
<td>{{ brick.element_id }}</td>
|
|
<td>{{ brick.part.part_num }}</td>
|
|
<td>{{ brick.part.name }}</td>
|
|
<td>{{ brick.color.name }}</td>
|
|
<td>{{ brick.quantity }}</td>
|
|
{% for i in json_file['unit'] %}
|
|
|
|
<td>
|
|
{% set ns = namespace(count='') %}
|
|
<form action="/{{ tmp }}/saveNumber" method="post">
|
|
<input type="hidden" name="brick.part.part_num" value="{{ brick.part.part_num }}">
|
|
<input type="hidden" name="count" value="{{ i }}">
|
|
<input type="hidden" name="index" value="{{ loop.index0 }}">
|
|
<input type="hidden" name="is_spare" value="{{ brick.is_spare }}">
|
|
<input type="hidden" name="brick.color.name" 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 and j['brick']['is_spare']|lower == brick.is_spare|lower %}
|
|
{% set ns.count = j['brick']['amount'] %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
<input type="text" style="height:auto;width:40px" id="numberInput" name="numberInput" value={{ ns.count }}><button type="submit"><i class="fa fa-save"></i></button>
|
|
</form>
|
|
</td>
|
|
{% endfor %}
|
|
</tr>
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
|
|
<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>
|
|
|
|
function goToPage(url) {
|
|
window.location.href = url;
|
|
}
|
|
|
|
const expandButton = document.getElementById('expand-button');
|
|
const dataTable = document.getElementById('data');
|
|
let isExpanded = false;
|
|
|
|
expandButton.addEventListener('click', () => {
|
|
const hiddenColumns = dataTable.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');
|
|
const textContent = element.closest('tr').querySelector('td:nth-child(3)').textContent; // Adjust the index accordingly
|
|
lightboxImage.setAttribute('src', imgSrc);
|
|
lightboxText.textContent = textContent;
|
|
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';
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
{% endblock %}
|
|
|