{% extends 'base.html.twig' %}
{% block title %}Hello AcceptanceOfDeliveryController!{% endblock %}
{% set linkActive = 'warehouse' %}
{% block body %}
<div class="container" style="padding-top: 10px">
<div class="row">
<div class="col-sm-12">
<h3>Nowe zlecenie</h3>
</div>
</div>
<form action="" class="row g-3 align-items-center" method="post">
<div class="row" style="padding-top: 20px">
<div class="col-sm-12">
<div class="mb-3 row">
<label for="orderDate" class="col-sm-2 col-form-label">Data zakończenia</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="form_orderDate" name="form[orderDate]" value="{{ workday }}">
</div>
</div>
<div class="mb-3 row">
<label for="orderAddress" class="col-sm-2 col-form-label">Adres zlecenia</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="form_orderAddress" name="form[orderAddress]" />
</div>
</div>
<div class="mb-3 row">
<label for="orderNumber" class="col-sm-2 col-form-label">Numer zlecenia</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="form_orderNumber" name="form[orderNumber]" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h3>Demontaż</h3>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="mb-3 row">
<label for="disassembledDeviceType" class="col-sm-4 col-form-label">Indeks materiałowy</label>
<div class="col-sm-6">
<select class="form-select" id="disassembledDeviceType">
<option></option>
{% for device in devicesModel %}
<option value="{{ device.id }}">{{ device.name }} (Indeks: {{ device.indeks }})</option>
{% endfor %}
</select>
</div>
</div>
<div class="mb-3 row">
<label for="disassembledSerialNumber" class="col-sm-4 col-form-label">Numer seryjny</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="disassembledSerialNumber">
</div>
</div>
</div>
<div class="col-sm-6">
<table id="devicesDisassembled" class="table table-striped">
<thead>
<td>Indeks materiałowy</td>
<td>Numer seryjny</td>
<td></td>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h3>Montaż</h3>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="mb-3 row">
<label for="assembledSerialNumber" class="col-sm-4 col-form-label">Numer seryjny</label>
<div class="col-sm-6">
<div class="input-group">
<input type="text" class="form-control" id="assembledSerialNumber" placeholder="Wyszukaj urządzenie" aria-label="Numer seryjny" aria-describedby="button-search-clear">
<button class="btn btn-outline-secondary" type="button" id="button-search-clear">X</button>
</div>
</div>
</div>
<div class="mb-3 row">
<table id="searchAssembledDevices" class="table table-striped">
<tbody></tbody>
</table>
</div>
</div>
<div class="col-sm-6">
<table id="devicesAssembled" class="table table-striped">
<thead>
<td>Indeks materiałowy</td>
<td>Numer seryjny</td>
<td></td>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="col-sm-2 offset-2">
<button class="btn btn-success" type="submit">Zapisz zlecenie</button>
</div>
</form>
</div>
{% endblock %}
{% block js_external %}
<script>
$(document).on('click', '.add', function (event) {
var addedItemId = $(this).attr('data-id');
var addedItemDeviceModel = $(this).attr('data-device-model');
var addedItemSerialNumber = $(this).attr('data-serial-number');
$('#devicesAssembled tbody').append('<tr>' +
'<td>'+addedItemDeviceModel+'</td>' +
'<td>'+addedItemSerialNumber+'</td>' +
'<td><input type="hidden" name="form[assembledId][]" value="'+addedItemId+'"/></td>' +
'</tr>');
$('#assembledSerialNumber').val('');
$('#searchAssembledDevices tbody').empty();
});
$( document ).ready(function() {
var disassembledSerialNumber = '';
var serialNumber = '';
$('#assembledSerialNumber').click(function (event) {
event.preventDefault();
})
$('#form_orderDate').datepicker({
dateFormat: 'yy-mm-dd',
dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
dayNamesMin: ['N', 'Pn', 'Wt', 'Śr', 'Cz', 'Pi', 'So'],
monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
firstDay: 1
});
$('#disassembledSerialNumber').keydown(function (event) {
if (event.which === 13) {
event.preventDefault();
var disassembledSerialNumber = $('#disassembledSerialNumber').val();
$('#devicesDisassembled tbody').append('<tr>' +
'<td>' + $('#disassembledDeviceType option:selected').text() + '<input type="hidden" name="form[disassembledDeviceTypeId][]" value="' + $('#disassembledDeviceType option:selected').val() + '"</td>' +
'<td>' + disassembledSerialNumber + '<input type="hidden" name="form[disassembledSerialNumber][]" value="' + disassembledSerialNumber + '"></td>' +
'<td></td></tr>');
$('#disassembledSerialNumber').val('');
$('#disassembledDeviceType').val($('#disassembledDeviceType option:first').val());
}
})
$('#button-search-clear').click(function () {
$('#assembledSerialNumber').val('')
});
var timer;
var timeout = 500;
$('#assembledSerialNumber').keyup(function (event) {
clearTimeout(timer);
if ($('#assembledSerialNumber').val) {
timer = setTimeout(function(){
//do stuff here e.g ajax call etc....
search();
}, timeout);
}
});
function search() {
var search = $('#assembledSerialNumber').val();
$.ajax({
url: '/warehouse/search',
data: { search: search, filter: 'not-assembled' }
}).done(function (data) {
$('#searchAssembledDevices tbody').empty();
// console.log(data.length);
$.each(data, function (i, item) {
$('#searchAssembledDevices tbody').append('<tr>' +
'<td>' + item.deviceModel + '</td>' +
'<td>' + item.serialNumber + '</td>' +
'<td><button class="btn btn-sm btn-success add" type="button" ' +
'data-id="' + item.id + '" ' +
'data-device-model="' + item.deviceModel + '" ' +
'data-serial-number="' + item.serialNumber + '" ' +
'>Dodaj</button></td></tr>');
});
})
}
});
</script>
{% endblock %}