management of the form of adding a device in a batch from the frontend

This commit is contained in:
Cayo Puigdefabregas 2021-12-30 12:41:37 +01:00
parent a5a08a162c
commit 94bf3aaf87
4 changed files with 53 additions and 16 deletions

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,19 @@
$(document) .ready(function() {
$(".deviceSelect").on("change", deviceSelect);
})
function deviceSelect() {
var devices = $(".deviceSelect").filter(':checked');
var devices_id = $.map(devices, function(x) { return $(x).attr('data')}).join(",");
if (devices_id == "") {
$("#addingLotModal .text-danger").show();
$("#addingLotModal .btn-primary").hide();
} else {
$("#addingLotModal .text-danger").hide();
$("#addingLotModal .btn-primary").removeClass('d-none');
$("#addingLotModal .btn-primary").show();
}
$.map($(".devicesList"), function(x) {
$(x).val(devices_id);
});
}

View File

@ -1,28 +1,39 @@
<div class="modal fade" id="addingLotModal" tabindex="-1" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Adding to a lot</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form action="/inventory/lot/devices/add" method="post">
{# form.csrf_token #}
<div class="modal-body">
Please write a name of a lot
<select class="form-control selectpicker" id="selectLot" data-live-search="true">
<select class="form-control selectpicker" id="selectLot" name="lot" data-live-search="true">
{% for lot in lots %}
<option value="{{ lot.id }}">{{ lot.name }}</option>
{% endfor %}
</select>
<input class="devicesList" type="hidden" name="devices" />
<p class="text-danger">
You need select first some device for adding this in a lot
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
<input type="submit" class="btn btn-primary d-none" value="Save changes" />
</div>
</form>
</div>
</div>
</div>
<script>
$(function() {
$('#selectLot').selectpicker();
});
//$(function() {
// $('#selectLot').selectpicker();
//});
</script>

View File

@ -126,7 +126,7 @@
<tbody>
{% for dev in devices %}
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" class="deviceSelect" data="{{ dev.id }}"/></td>
<td>{{ dev.type }} {{ dev.manufacturer }} {{ dev.model }}</td>
<td>{{ dev.devicehub_id }}</td>
<td>
@ -158,4 +158,9 @@
<script>
const table = new simpleDatatables.DataTable("table")
</script>
<script>
</script>
<script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/main_inventory.js') }}"></script>
{% endblock main %}