templates/new_order/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Hello AcceptanceOfDeliveryController!{% endblock %}
  3. {% set linkActive = 'warehouse' %}
  4. {% block body %}
  5.     <div class="container" style="padding-top: 10px">
  6.         <div class="row">
  7.             <div class="col-sm-12">
  8.                 <h3>Nowe zlecenie</h3>
  9.             </div>
  10.         </div>
  11.         <form action="" class="row g-3 align-items-center" method="post">
  12.             <div class="row" style="padding-top: 20px">
  13.                 <div class="col-sm-12">
  14.                     <div class="mb-3 row">
  15.                         <label for="orderDate" class="col-sm-2 col-form-label">Data zakończenia</label>
  16.                         <div class="col-sm-3">
  17.                             <input type="text" class="form-control" id="form_orderDate" name="form[orderDate]" value="{{ workday }}">
  18.                         </div>
  19.                     </div>
  20.                     <div class="mb-3 row">
  21.                         <label for="orderAddress" class="col-sm-2 col-form-label">Adres zlecenia</label>
  22.                         <div class="col-sm-3">
  23.                             <input type="text" class="form-control" id="form_orderAddress" name="form[orderAddress]" />
  24.                         </div>
  25.                     </div>
  26.                     <div class="mb-3 row">
  27.                         <label for="orderNumber" class="col-sm-2 col-form-label">Numer zlecenia</label>
  28.                         <div class="col-sm-3">
  29.                             <input type="text" class="form-control" id="form_orderNumber" name="form[orderNumber]" />
  30.                         </div>
  31.                     </div>
  32.                 </div>
  33.             </div>
  34.             <div class="row">
  35.                 <div class="col-sm-12">
  36.                     <h3>Demontaż</h3>
  37.                 </div>
  38.             </div>
  39.             <div class="row">
  40.                 <div class="col-sm-6">
  41.                     <div class="mb-3 row">
  42.                         <label for="disassembledDeviceType" class="col-sm-4 col-form-label">Indeks materiałowy</label>
  43.                         <div class="col-sm-6">
  44.                             <select class="form-select" id="disassembledDeviceType">
  45.                                 <option></option>
  46.                                 {% for device in devicesModel %}
  47.                                     <option value="{{ device.id }}">{{ device.name }} (Indeks: {{ device.indeks }})</option>
  48.                                 {% endfor %}
  49.                             </select>
  50.                         </div>
  51.                     </div>
  52.                     <div class="mb-3 row">
  53.                         <label for="disassembledSerialNumber" class="col-sm-4 col-form-label">Numer seryjny</label>
  54.                         <div class="col-sm-6">
  55.                             <input type="text" class="form-control" id="disassembledSerialNumber">
  56.                         </div>
  57.                     </div>
  58.                 </div>
  59.                 <div class="col-sm-6">
  60.                     <table id="devicesDisassembled" class="table table-striped">
  61.                         <thead>
  62.                         <td>Indeks materiałowy</td>
  63.                         <td>Numer seryjny</td>
  64.                         <td></td>
  65.                         </thead>
  66.                         <tbody></tbody>
  67.                     </table>
  68.                 </div>
  69.             </div>
  70.             <div class="row">
  71.                 <div class="col-sm-12">
  72.                     <h3>Montaż</h3>
  73.                 </div>
  74.             </div>
  75.             <div class="row">
  76.                 <div class="col-sm-6">
  77.                     <div class="mb-3 row">
  78.                         <label for="assembledSerialNumber" class="col-sm-4 col-form-label">Numer seryjny</label>
  79.                         <div class="col-sm-6">
  80.                             <div class="input-group">
  81.                                 <input type="text" class="form-control" id="assembledSerialNumber" placeholder="Wyszukaj urządzenie" aria-label="Numer seryjny" aria-describedby="button-search-clear">
  82.                                 <button class="btn btn-outline-secondary" type="button" id="button-search-clear">X</button>
  83.                             </div>
  84.                         </div>
  85.                     </div>
  86.                     <div class="mb-3 row">
  87.                         <table id="searchAssembledDevices" class="table table-striped">
  88.                             <tbody></tbody>
  89.                         </table>
  90.                     </div>
  91.                 </div>
  92.                 <div class="col-sm-6">
  93.                     <table id="devicesAssembled" class="table table-striped">
  94.                         <thead>
  95.                         <td>Indeks materiałowy</td>
  96.                         <td>Numer seryjny</td>
  97.                         <td></td>
  98.                         </thead>
  99.                         <tbody></tbody>
  100.                     </table>
  101.                 </div>
  102.             </div>
  103.             <div class="col-sm-2 offset-2">
  104.                 <button class="btn btn-success" type="submit">Zapisz zlecenie</button>
  105.             </div>
  106.         </form>
  107.     </div>
  108. {% endblock %}
  109. {% block js_external %}
  110.     <script>
  111.         $(document).on('click', '.add', function (event) {
  112.             var addedItemId = $(this).attr('data-id');
  113.             var addedItemDeviceModel = $(this).attr('data-device-model');
  114.             var addedItemSerialNumber = $(this).attr('data-serial-number');
  115.             $('#devicesAssembled tbody').append('<tr>' +
  116.                 '<td>'+addedItemDeviceModel+'</td>' +
  117.                 '<td>'+addedItemSerialNumber+'</td>' +
  118.                 '<td><input type="hidden" name="form[assembledId][]" value="'+addedItemId+'"/></td>' +
  119.                 '</tr>');
  120.             $('#assembledSerialNumber').val('');
  121.             $('#searchAssembledDevices tbody').empty();
  122.         });
  123.         $( document ).ready(function() {
  124.             var disassembledSerialNumber = '';
  125.             var serialNumber = '';
  126.             $('#assembledSerialNumber').click(function (event) {
  127.                 event.preventDefault();
  128.             })
  129.             $('#form_orderDate').datepicker({
  130.                 dateFormat: 'yy-mm-dd',
  131.                 dayNames: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
  132.                 dayNamesMin: ['N', 'Pn', 'Wt', 'Śr', 'Cz', 'Pi', 'So'],
  133.                 monthNames: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
  134.                 firstDay: 1
  135.             });
  136.             $('#disassembledSerialNumber').keydown(function (event) {
  137.                 if (event.which === 13) {
  138.                     event.preventDefault();
  139.                     var disassembledSerialNumber = $('#disassembledSerialNumber').val();
  140.                     $('#devicesDisassembled tbody').append('<tr>' +
  141.                         '<td>' + $('#disassembledDeviceType option:selected').text() + '<input type="hidden" name="form[disassembledDeviceTypeId][]" value="' + $('#disassembledDeviceType option:selected').val() + '"</td>' +
  142.                         '<td>' + disassembledSerialNumber + '<input type="hidden" name="form[disassembledSerialNumber][]" value="' + disassembledSerialNumber + '"></td>' +
  143.                         '<td></td></tr>');
  144.                     $('#disassembledSerialNumber').val('');
  145.                     $('#disassembledDeviceType').val($('#disassembledDeviceType option:first').val());
  146.                 }
  147.             })
  148.             $('#button-search-clear').click(function () {
  149.                 $('#assembledSerialNumber').val('')
  150.             });
  151.             var timer;
  152.             var timeout = 500;
  153.             $('#assembledSerialNumber').keyup(function (event) {
  154.                 clearTimeout(timer);
  155.                 if ($('#assembledSerialNumber').val) {
  156.                     timer = setTimeout(function(){
  157.                         //do stuff here e.g ajax call etc....
  158.                         search();
  159.                     }, timeout);
  160.                 }
  161.             });
  162.             function search() {
  163.                 var search = $('#assembledSerialNumber').val();
  164.                 $.ajax({
  165.                     url: '/warehouse/search',
  166.                     data: { search: search, filter: 'not-assembled' }
  167.                 }).done(function (data) {
  168.                     $('#searchAssembledDevices tbody').empty();
  169.                     // console.log(data.length);
  170.                     $.each(data, function (i, item) {
  171.                         $('#searchAssembledDevices tbody').append('<tr>' +
  172.                             '<td>' + item.deviceModel + '</td>' +
  173.                             '<td>' + item.serialNumber + '</td>' +
  174.                             '<td><button class="btn btn-sm btn-success add" type="button" ' +
  175.                             'data-id="' + item.id + '" ' +
  176.                             'data-device-model="' + item.deviceModel + '" ' +
  177.                             'data-serial-number="' + item.serialNumber + '" ' +
  178.                             '>Dodaj</button></td></tr>');
  179.                     });
  180.                 })
  181.             }
  182.         });
  183.     </script>
  184. {% endblock %}