templates/solicitud/modal.html.twig line 1

Open in your IDE?
  1. {% block stylesheets %}
  3.     <style>
  4.         fieldset
  5.         {
  6.             border: 1px solid #bbbbbb !important;
  7.             margin: 0;
  8.             min-width: 0;
  9.             padding: 10px;
  10.             position: relative;
  11.             border-radius:4px;
  12.             background-color:#f5f5f5;
  13.         }
  15.         legend
  16.         {
  17.             font-size: 15px;
  18.             font-weight: bold;
  19.             margin-bottom: 0;
  20.             width: 35%;
  21.             border: 1px solid #bbbbbb;
  22.             border-radius: 4px;
  23.             padding: 5px 5px 5px 10px;
  24.             background-color: #cecece;
  25.         }
  27.         label {
  28.             font-size: 14px;
  29.             color: #5C5A5A;
  30.         }
  31.     </style>
  33. {% endblock %}
  34. {# Plantilla de Twig #}
  35. {% form_theme form 'bootstrap_4_layout.html.twig' %}
  37. <!-- Modal with form -->
  38. <!-- div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" -->
  39. <div class="modal-dialog modal-lg" role="document">
  40.     <div class="modal-content p-4">
  42.         <div class="modal-header">
  43.             <h5 class="modal-title" id="exampleModalLabel"><b>Modificación de Solicitud : </b><b><span class="text-success">{{ solicitud.idSol }}</span></b><small></small></h5>
  45.             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  46.                 <span aria-hidden="true">&times;</span>
  47.             </button>
  48.         </div>
  50.         <div class="modal-body">
  51.             {# Datos del equipo #}
  53.             <div class="card">
  54.                 <div class="card-header " class=""  style="background: #75BFFF">
  55.                     <h3 class="card-title text-center" >Datos de la solicitud del equipo - {{ solicitud.idSol }}</h3>
  56.                     {# <div class="card-tools">
  57.                         <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
  58.                             <i class="fas fa-minus"></i>
  59.                         </button>
  60.                     </div> #}
  61.                 </div>
  62.                 <div class="card-body">
  63.                     <div><strong>Usuario:</strong> {{solicitud.usuario}} {{solicitud.usuario.pApellido}}{{solicitud.usuario.sApellido}} &nbsp;&nbsp;&nbsp;&nbsp;<strong>Correo:</strong> {{solicitud.usuario.correo}} </div>
  64.                     <div class="card-body">
  65.                         {{ form_start(form, {'attr': {'class': 'form-horizontal', 'id': 'form-editar-solicitud'}}) }}
  66.                         {# Datos del equipo #}
  67.                         <input type="hidden" name="_solicitud" value="{{ solicitud.idSol }}">
  68.                         <div class="row">
  69.                             <div class="col-lg">{{ form_row(form.falla, { 'attr': {'readonly': 'false'} }) }}</div>
  70.                         </div>
  71.                         <div class="row">
  72.                             <div class="col-lg">{{ form_row(form.srealizado) }}</div>
  73.                         </div>
  74.                         <div class="row">
  75.                             <div class="col-lg">{{ form_row(form.tipoEquipo, { 'attr': {'readonly': 'false'} } ) }}</div>
  76.                             <div class="col-lg">{{ form_row(form.refacciones ) }}</div>
  77.                             <div class="col-lg">{{ form_row(form.estatus ) }}</div>
  78.                         </div>
  79.                         <div class="row table-refaccion">
  80.                             <div class="col"></div>
  81.                         </div>
  82.                         <span class="mensajeError text-danger" style="display: none"></span>
  83.                         {#<div class="row">
  84.                             <div class="col-lg">{{ form_row(form.tipoMantenimiento ) }}</div>
  85.                             <div class="col-lg">{{ form_row(form.usuario) }}</div>
  86.                         </div>#}
  87.                         {{ form_end(form) }}
  88.                         <br>
  89.                         <div class="row">
  90.                             <div class="col text-center">
  91.                                 <button class="btn btn-outline-success" id="btn_solicitud_guardar">{{ button_label|default('Guardar') }}</button>
  92.                             </div>
  93.                             <div class="col text-center">
  94.                                 <button type="button" class="btn btn-outline-primary" data-dismiss="modal" aria-label="Close">
  95.                                     Cancelar
  96.                                 </button>
  97.                             </div>
  98.                         </div>
  100.                     </div>
  102.                 </div>
  103.             </div>
  104.         </div>
  106.     </div>
  107. </div>
  109. {% block javascripts %}
  111. <script type="text/javascript">
  113.     $(document).ready(function() {
  114.         usoRefacciones();
  115.     });
  117.     function usoRefacciones(){
  118.         const selectElement = document.querySelector('#solicitud_refacciones');
  119.         let formData = new FormData(document.getElementById("form-editar-solicitud"));
  120.         let html = '';
  121.         let body = '';
  122.         $.ajax({
  123.             type: "POST",
  124.             url: '{{ path('app_solicitud_modal') }}',
  125.             dataType: "json",
  126.             cache: false,
  127.             contentType: false,
  128.             processData: false,
  129.             success: function (data){
  130.                 for (let i = 0; i < data.catComponente.length; i++) {
  131.                     body += '<tr>' +
  132.                         '<td>' + (data.catComponente[i]['tipo'] ?? '') + '</td>' +
  133.                         '<td>' + (data.catComponente[i]['marca'] ?? '') + '</td>' +
  134.                         '<td>' + (data.catComponente[i]['modelo'] ?? '') + '</td>' +
  135.                         '<td>' + (data.catComponente[i]['nucleos'] ?? '') + '</td>' +
  136.                         '<td>' + (data.catComponente[i]['velocidad'] ?? '') + '</td>' +
  137.                         '<td>' + (data.catComponente[i]['capacidad_memoria'] ?? '') + '</td>' +
  138.                         '<td><input type="checkbox" class="refaccion-checkbox" name="componente[]" value="' + data.catComponente[i]['id_inventario'] + '" data-id="' + data.catComponente[i]['id_inventario'] + '" data-tipo="' + data.catComponente[i]['tipo'] + '" data-nucleos="' + data.catComponente[i]['nucleos'] + '" data-velocidad="' + data.catComponente[i]['velocidad'] + '" data-capacidad="' + data.catComponente[i]['capacidad_memoria'] + '" data-marca="' + data.catComponente[i]['marca'] + '" data-modelo="' + data.catComponente[i]['modelo'] + '"></td>' +
  139.                         '</tr>';
  140.                 }
  141.             },
  142.             error: function (data, text, error) {
  144.             },
  145.             complete: function () {
  146.                 const valorSeleccionado = selectElement.value;
  148.                 html = '<table id="refacciones-table" class="table">' +
  149.                     '<thead>' +
  150.                     '<tr>' +
  151.                     '<th>Tipo</th>' +
  152.                     '<th>Marca</th>' +
  153.                     '<th>Modelo</th>' +
  154.                     '<th>Núcleos</th>' +
  155.                     '<th>Velocidad</th>' +
  156.                     '<th>Cap_memoria</th>' +
  157.                     '<th>Utilizar</th>' +
  158.                     '</tr>' +
  159.                     '</thead>' +
  160.                     '<tbody>' +
  161.                     body +
  162.                     '</tbody>' +
  163.                     '</table>';
  165.                 if (valorSeleccionado === '1') {
  166.                     $('.table-refaccion').html(html);
  167.                 } else {
  168.                     $('.table-refaccion').html('');
  169.                 }
  170.             }
  171.         });
  173.         selectElement.addEventListener('change', function(event) {
  174.             const selectedOption = this.options[this.selectedIndex];
  175.             if (selectedOption.value === '1') {
  176.                 html = '<table id="refacciones-table" class="table">' +
  177.                     '<thead>' +
  178.                     '<tr>' +
  179.                     '<th>Tipo</th>' +
  180.                     '<th>Marca</th>' +
  181.                     '<th>Modelo</th>' +
  182.                     '<th>Núcleos</th>' +
  183.                     '<th>Velocidad</th>' +
  184.                     '<th>Cap_memoria</th>' +
  185.                     '<th>Utilizar</th>' +
  186.                     '</tr>' +
  187.                     '</thead>' +
  188.                     '<tbody>' +
  189.                     body +
  190.                     '</tbody>' +
  191.                     '</table>';
  192.                 $('.table-refaccion').html(html);
  193.             } else {
  194.                 $('.table-refaccion').html('');
  195.             }
  196.         });
  197.     }
  199. </script>
  200. {% endblock %}