132 lines
4.2 KiB
HTML
132 lines
4.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
|
|
<script>
|
|
let image_to_update = ''
|
|
|
|
// handle Delete
|
|
function handleDelete(button) {
|
|
lappQueueItemRequest('/item_delete/'+button.name, {
|
|
coalesceKey: 'item:' + button.name
|
|
}).then(function (sent) {
|
|
if (sent) {
|
|
window.location.href = '/items_append/{{ listid }}';
|
|
}
|
|
});
|
|
}
|
|
|
|
// handle AddOne
|
|
function handleAddOne(button) {
|
|
lappQueueItemRequest('/item_addone/'+button.name, {
|
|
coalesceKey: 'item:' + button.name
|
|
});
|
|
clearSearch();
|
|
}
|
|
|
|
// handle Add with quantity
|
|
function handleAddWithQuantity(button, q) {
|
|
lappQueueItemRequest('/item_addquantity/'+button.name+'/'+q, {
|
|
coalesceKey: 'item:' + button.name
|
|
});
|
|
clearSearch();
|
|
}
|
|
|
|
//trigger change category button
|
|
function clickedCategoryButton(image) {
|
|
image_to_update = image
|
|
}
|
|
|
|
// selected the category
|
|
function clickedUpdateCategory4Item(icon) {
|
|
image_to_update.src="{{ iconpath }}" + icon.name + ".svg"
|
|
lappQueueItemRequest('/item_update_category/'+image_to_update.name+'/'+icon.name, {
|
|
coalesceKey: 'category:' + image_to_update.name
|
|
});
|
|
$('#staticBackdrop').modal('hide');
|
|
}
|
|
|
|
$(document).ready(function(){
|
|
$("#myInput").on("keyup", function() {
|
|
var value = $(this).val().toLowerCase();
|
|
$("#myList tbody tr").filter(function() {
|
|
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
|
|
});
|
|
});
|
|
});
|
|
|
|
function clearSearch() {
|
|
$("#myInput").val("");
|
|
$("#myList tbody tr").show();
|
|
}
|
|
|
|
</script>
|
|
|
|
<form method="post" action="/items_append/{{ listid }}">
|
|
<div class=".container">
|
|
<div class="d-flex justify-content-between">
|
|
<input class="form-control" id="myInput" type="text" name="newItem" placeholder="Search.."/>
|
|
|
|
<button class="btn btn-success">+</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<br/>
|
|
|
|
<table id="myList" style="width: 100%; background-color: white;">
|
|
<tbody>
|
|
{% for item in items %}
|
|
<tr style="border-bottom: 1px solid lightgray;">
|
|
<td style="padding: 5px;">
|
|
<a class="btn btn-{% if item.is_suggestion %}primary{% else %}info{% endif %} btn-sm" name="{{ item.id }}" onclick='handleAddOne(this);'> + </a>
|
|
{{ item.label }}</td>
|
|
<td style="text-align: right">
|
|
{% if item.quantity > 1 or item.unit != 'x' %}
|
|
<a class="btn btn-outline-primary btn-sm" name="{{ item.id }}" onclick='handleAddWithQuantity(this, {{ item.quantity }} );'>{{ item.quantity }}{{ item.unit }}</a>
|
|
|
|
{% endif %}
|
|
|
|
<a href="" data-bs-toggle="modal" data-bs-target="#staticBackdrop"><img id="category4itemid_{{ item.id }}" name="{{item.id}}" src="{{ iconpath }}{{ item.category }}.svg" style="height: 2em;" alt="..." onclick='clickedCategoryButton(this);'></a>
|
|
|
|
|
|
<a class="btn btn-danger btn-sm" name="{{ item.id }}" onclick='handleDelete(this);'>-</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
<br/>
|
|
|
|
<form method="post" action="/items_multiappend/{{ listid }}">
|
|
<div class=".container">
|
|
<div class="d-flex justify-content-between">
|
|
<textarea class="form-control" id="myInput" rows="4" name="newItems" placeholder="many items..."></textarea>
|
|
|
|
<button class="btn btn-secondary">+</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="staticBackdropLabel">Category</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
{% for icon in icons %}
|
|
<a name= "{{ icon }}" onclick='clickedUpdateCategory4Item(this);'><img style="border: 10px solid white; height: 4em; width: 4em;" src="{{ iconpath }}{{ icon }}.svg" alt="..."></a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Exit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|