templates/equipo/modal.html.twig line 1

Open in your IDE?
  1. {% block stylesheets %}
  2.     <link href="{{ asset('plugins/select2/css/select2.min.css') }}" rel="stylesheet" />
  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.         .select2-selection.is-invalid {
  32.             border-color: #dc3545 !important;
  33.         }
  35.         .select2-selection.is-invalid:focus {
  36.             box-shadow: 0 0 0 0.2rem rgba(220,53,69,.25) !important;
  37.         }
  38.         .custom-invalid-message {
  39.              color: #dc3545; /* Rojo Bootstrap */
  40.              font-size: 0.875em;
  41.              margin-top: 5px;
  42.          }
  43.     </style>
  45. {% endblock %}
  46. {# Plantilla de Twig #}
  47. {% form_theme form 'bootstrap_4_layout.html.twig' %}
  49. <!-- Modal with form -->
  50. <!-- div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" -->
  51. <div class="modal-dialog modal-lg" role="document">
  52.     <div class="modal-content p-4">
  53.         <div class="modal-header">
  54.             <div class = 'tituloEquipo'><h5 class="modal-title" id="exampleModalLabel"><b>Modificación <small class="text-secondary"> de Equipo de cómputo <strong class="text-primary">#{{ equipo.idEqu }}</strong></small></b></h5></div>
  55.             <div class = 'tituloSolicitudes'></div>
  56.             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  57.                 <span aria-hidden="true">&times;</span>
  58.             </button>
  59.         </div>
  61.         <div class="modal-body">
  62.             <div class="card-body">
  63.                 <div class= 'infoEquipo'>
  64.                     {{ form_start(form, {'attr': {'class': 'form-horizontal', 'id': 'form-editar-equipo'}}) }}
  65.                     {# Datos del equipo #}
  66.                     <fieldset>
  67.                         <legend>Identificación del equipo</legend>
  68.                         <div class="control-group">
  69.                             <div class="row" >
  70.                                 <div class="col-lg">{{ form_row(form.marbete,{
  71.                                         'attr': {
  72.                                             'hidden': false,
  73.                                         }}) }}
  74.                                 </div>
  75.                                 <div class="col-lg">{{ form_row(form.idMarca) }}</div>
  76.                                 <div class="col-lg">{{ form_row(form.modelo) }}</div>
  77.                                 <div class="col-lg">{{ form_row(form.serie) }}</div>
  78.                             </div>
  79.                             <div class="row" disabled>
  80.                                 <div class="col-lg">{{ form_row(form.descripcion) }}</div>
  81.                             </div>
  82.                         </div>
  83.                         <br>
  84.                     </fieldset>
  85.                     <br>
  86.                     {# Hardware #}
  87.                     <fieldset>
  88.                         <legend>Hardware</legend>
  89.                         <div class="row">
  90.                             <div class="col-lg">{{ form_row(form.procesador) }}</div>
  91.                             <div class="col-lg">{{ form_row(form.nucleos) }}</div>
  92.                             <div class="col-lg">{{ form_row(form.cpuVelocidad) }}</div>
  93.                             <div class="col-lg">{{ form_row(form.ram)}} </div>
  94.                         </div>
  95.                         <div class="row">
  96.                             <div class="col-lg">{{ form_row(form.ip) }}</div>
  97.                             <div class="col-lg">{{ form_row(form.mac) }}</div>
  98.                             <div class="col-lg">{{ form_row(form.ssd) }}</div>
  99.                             <div class="col-lg">{{ form_row(form.hhd) }}</div>
  100.                         </div>
  101.                         <div class = "row">
  102.                             <div class="col-lg">{{ form_row(form.idMaterial) }}</div>
  103.                             <div class="col-lg">{{ form_row(form.color) }}</div>
  104.                         </div>
  105.                         <div class="row" disabled>
  106.                             <div class="col-lg">{{ form_row(form.allinone) }}</div>
  107.                             <div class="col-lg">{{ form_row(form.actualizable) }}</div>
  108.                         </div>
  109.                     </fieldset>
  110.                     <br>
  111.                     {# Perifericos #}
  112.                     <fieldset>
  113.                         {# Monitor #}
  114.                         <legend>Monitor</legend>
  115.                         <div class="row">
  116.                             <div class="col-lg">{{ form_row(form.monitorMarbete) }}</div>
  117.                             <div class="col-lg">{{ form_row(form.monitorMarca) }}</div>
  118.                             <div class="col-lg">{{ form_row(form.monitorModelo) }}</div>
  119.                         </div>
  120.                         <div class="row">
  121.                             <div class="col-lg">{{ form_row(form.monitorSerie) }}</div>
  122.                             <div class="col-lg">{{ form_row(form.monitorTipo) }}</div>
  123.                             <div class="col-lg">{{ form_row(form.monitorPulgadas) }}</div>
  124.                         </div>
  125.                     </fieldset>
  126.                     <br>
  127.                     <fieldset>
  128.                         {# Teclado #}
  129.                         <legend>Teclado</legend>
  130.                         <div class="row">
  131.                             <div class="col-lg">{{ form_row(form.tecladoMarca) }}</div>
  132.                             <div class="col-lg">{{ form_row(form.tecladoModelo) }}</div>
  133.                             <div class="col-lg">{{ form_row(form.tecladoSerie) }}</div>
  134.                         </div>
  135.                     </fieldset>
  136.                     <br>
  137.                     <fieldset>
  138.                         {# Mouse #}
  139.                         <legend>Mouse</legend>
  140.                         <div class="row">
  141.                             <div class="col-lg">{{ form_row(form.mouseMarca) }}</div>
  142.                             <div class="col-lg">{{ form_row(form.mouseModelo) }}</div>
  143.                             <div class="col-lg">{{ form_row(form.mouseSerie) }}</div>
  144.                         </div>
  145.                     </fieldset>
  146.                     <br>
  147.                     {# Estatus y resguardo #}
  148.                     <fieldset>
  149.                         <legend>Estatus y resguardo</legend>
  150.                         <div class="row">
  151.                             <div class="col-lg">{{ form_row(form.estatus) }}</div>
  152.                             <div class="col-lg">{{ form_row(form.uso) }}</div>
  153.                             <div class="col-lg">{{ form_row(form.idUso) }}</div>
  154.                         </div>
  155.                         <div class="row">
  156.                             <div class="col-lg">{{ form_row(form.funcion) }}</div>
  157.                             <div class="col-lg">{{ form_row(form.funcionDescripcion) }}</div>
  158.                         </div>
  159.                         <div class="row">
  160.                             <div class="col-lg">{{ form_row(form.usuario) }}</div>
  161.                             {# <div class="col-lg">{{ form_row(form.emhv) }}</div> #}
  162.                             <div class="col-lg">{{ form_row(form.ubicacion) }}</div>
  163.                             {% if form.unidad is defined %}
  164.                                 <div class="col-lg">{{ form_row(form.unidad) }}</div>
  165.                             {% endif %}
  166.                         </div>
  167.                         <div class= "row">
  168.                             <div class="col-lg">{{ form_row(form.piso) }}</div>
  169.                             <div class="col-lg">{{ form_row(form.seccionAula) }}</div>
  170.                             <div class="col-lg">{{ form_row(form.numPuertaCubi) }}</div>
  171.                         </div>
  172.                     </fieldset>
  173.                     <br>
  174.                     <div class="row">
  175.                         <div class="col text-center">
  176.                             <button class="btn btn-outline-success" id="btn_equipo_guardar">{{ button_label|default('Guardar') }}</button>
  177.                         </div>
  179.                         <div class="col text-center">
  180.                             <button type="button" class="btn btn-outline-primary" data-dismiss="modal" aria-label="Close">
  181.                                 Cancelar
  182.                             </button>
  183.                         </div>
  184.                     </div>
  185.                     {{ form_end(form) }}
  186.                 </div>
  187.                 <div class="infoSolicitudes"></div>
  188.                 <div class="btnCerrar"></div>
  189.             </div>
  190.         </div>
  191.     </div>
  192. </div>
  193. <!-- /div -->
  195. {% block javascripts %}
  196.     <script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
  197.     <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
  198.     <script>
  199.         $(document).ready(function () {
  200.             $('.search-marca').each(function(index, element) {
  201.                 if (!$(element).is('[readonly]')) {  // Only initialize if NOT readonly
  202.                     $(element).select2({
  203.                         placeholder: 'Seleccione una marca',
  204.                         allowClear: true
  205.                     });
  206.                 } else {
  207.                     let id = $(element).val();
  208.                     let text = $(element).find('option:selected').text();
  209.                     let option = new Option(text, id, true, true);
  210.                     $(element).prop('readonly', 'readonly');
  211.                     $(element).next('.select2').find('.select2-selection').addClass('select2-disabled');
  212.                     $(element).append(option).trigger('change');
  213.                 }
  214.             });
  215.             $('.search-material').select2({
  216.                 placeholder: 'Seleccione un material',
  217.                 allowClear: true
  218.             });
  219.             comportamientoCampos(document.getElementById('equipo_allinone').checked)
  220.         })
  222.         document.getElementById('equipo_allinone').addEventListener('click', function(event) {
  223.             comportamientoCampos(event.target.checked);
  224.         })
  226.         function editarInfoEquipoAjax(url){
  227.             let send = $("#btn_equipo_guardar");
  228.             $('#btn_equipo_guardar').on('click', function (e) {
  229.                 let formData = new FormData(document.getElementById("form-editar-equipo"));
  230.                 let dataObj = Object.fromEntries(formData.entries());
  231.                 let form = document.getElementById("form-editar-equipo");
  232.                 console.log(form);
  234.                 let hasError = false;
  236.                 let labels = document.querySelectorAll("label");
  237.                 // Validar monitorMarca
  238.                 let monitorMarca = $(`#${labels[25].getAttribute("for")}`);
  239.                 if($(`#${labels[25].getAttribute("for")}`).val() === '' && document.getElementById('equipo_allinone').checked === false){
  240.                     $(`#${labels[25].getAttribute("for")}`).addClass('is-invalid');
  241.                     e.preventDefault();
  242.                     let select = document.querySelector(`#${labels[25].getAttribute("for")}`);
  244. // Obtener el contenedor select2 generado
  245.                     let select2Container = select.nextElementSibling;
  246.                     let selection = select2Container.querySelector('.select2-selection');
  248. // Agregar clase de error
  249.                     selection.classList.add('is-invalid');
  250.                     let existingMessage = labels[25].querySelector('.custom-invalid-message');
  252.                     if (!existingMessage) {
  253.                         let message = document.createElement('span');
  254.                         message.className = 'custom-invalid-message'; // clase para poder identificarlo y evitar duplicados
  256.                         // Agregar el HTML interno
  257.                         message.innerHTML = `
  258.                             <span class="invalid-feedback d-block">
  259.                                 <span class="d-block">
  260.                                     <span class="form-error-icon badge badge-danger text-uppercase">Error</span>
  261.                                     <span class="form-error-message">El campo "Marca" no debe estar vacío.</span>
  262.                                 </span>
  263.                             </span>
  264.                         `;
  266.                         labels[25].appendChild(message);
  267.                     }
  269.                     return false;
  270.                 }
  272.                 var html = "";
  273.                 var btnCerrar = "";
  274.                 var tituloE= "";
  275.                 $.ajax({
  276.                     type: "POST",
  277.                     url: url,
  278.                     data: formData, // Adjuntar los campos del formulario enviado.
  279.                     dataType: "json",
  280.                     cache: false,
  281.                     contentType: false,
  282.                     processData: false,
  283.                     beforeSend: function () {
  284.                         send.text("Actualizando "); // Para input de tipo button
  285.                         send.append("<i class='fa fa-spinner fa-spin' style='font-size:16px'></i>");
  286.                         send.prop("disabled", true);
  287.                     },
  288.                     success: function (data) {
  289.                         let datos = data;
  290.                         let row = $('#idEqu-' + datos.idEqu);
  291.                         row.find('.marbete').html(datos.marbete);
  292.                         row.find('.descripcion').html(datos.descripcion);
  293.                         row.find('.marca').html(datos.marca);
  294.                         row.find('.modelo').html(datos.modelo);
  295.                         /*row.find('.serie').html(datos.serie);
  296.                         row.find('.tipo').html(datos.tipo);
  297.                         row.find('.uso').html(datos.uso);*/
  298.                         //row.find('.uso').html(datos.unidad.getNombre);
  299.                         //row.find('.activo').html(datos.estatus);
  301.                         if (datos.estatus === "En operacion") {
  302.                             row.find('.estatus').html('<div class="badge bg-gradient-green d-block" style="width: 8rem;">' + datos.estatus + '</div>');
  303.                         }
  304.                         if(datos.estatus === "Descompuesto") {
  305.                             row.find('.estatus').html('<div class="badge bg-gradient-orange d-block" style="width: 8rem;">' + datos.estatus + '</div>');
  306.                         }
  307.                         if (datos.estatus === "Sin instalar") {
  308.                             row.find('.estatus').html('<div class="badge bg-gradient-primary d-block" style="width: 8rem;">' + datos.estatus + '</div>');
  309.                         }
  310.                         if(datos.estatus === "En proceso de baja") {
  311.                             row.find('.estatus').html('<div class="badge bg-gradient-yellow d-block" style="width: 8rem;">' + datos.estatus + '</div>');
  312.                         }
  313.                         if(datos.estatus === "Baja") {
  314.                             row.find('.estatus').html('<div class="badge bg-gradient-danger d-block" style="width: 8rem;">' + datos.estatus + '</div>');
  315.                         }
  317.                         row.find('.emhv').html(datos.emhv);
  318.                         row.find('.usuario').html(datos.usuario);
  319.                         row.find('.ubicacion').html(datos.ubicacion);
  321.                         if(datos.solicitudes.idSolicitud === 0){
  322.                             $('#editar-equipo').removeClass('show');
  323.                             $('#editar-equipo').fadeOut();
  324.                             $('body').removeClass('modal-open');
  325.                             $('.modal-backdrop').remove();
  326.                         }else{
  327.                             $('.infoEquipo').html('').fadeOut();
  328.                             $('.tituloEquipo').html('').fadeOut();
  329.                             tituloE = `<h5 class="modal-title" id="exampleModalLabel"><b>Modificación  <small class="text-secondary">de Usuario a las solicitudes</small></b></h5>`;
  330.                             html += `<p>Se a modificado el usuario de las siguientes solicitudes que pertenecen al marbete: <strong>${datos.marbete}</strong></p><br>
  331.                                     <table class="table table-hover">
  332.                                         <thead>
  333.                                             <tr><th>Número de solicitud</th><th>Estatus</th><th>Usuario anterior</th><th>Usuario nuevo</th></tr>
  334.                                         </thead>
  335.                                         <tbody>`;
  336.                             for(let i = 0; i < datos.solicitudes.length; i++){
  337.                                 html += `
  338.                                         <tr><td>${datos.solicitudes[i].idSolicitud}</td>
  339.                                         <td>${datos.solicitudes[i].estatus}</td>
  340.                                         <td>${datos.solicitudes[i].usuAnterior}</td>
  341.                                         <td>${datos.solicitudes[i].usuNuevo}</td></tr>
  342.                                     `;
  343.                             }
  344.                             html += `</tbody>
  345.                                             </table>`;
  346.                             btnCerrar = `
  347.                                         <div class="row">
  348.                                             <div class="col" style="text-align: right;">
  349.                                                 <button type="button" class="btn btn-outline-primary" data-dismiss="modal" aria-label="Close">
  350.                                                     Cerrar
  351.                                                 </button>
  352.                                             </div>
  353.                                         </div>
  354.                                     `;
  355.                             $(".tituloSolicitudes").html(tituloE);
  356.                             $(".infoSolicitudes").html(html);
  357.                             $(".btnCerrar").html(btnCerrar);
  358.                         }
  359.                     },
  360.                     error: function (data, text, error) {
  361.                         let datos = data.responseJSON;
  362.                         $("#editar-equipo").html(datos.form);
  363.                         editarInfoEquipoAjax(url);
  364.                     },
  365.                     complete: function (data) {
  366.                         // Se ejecuta al termino de la petición
  367.                     }
  368.                 });
  370.                 return false; // Evitar ejecutar el submit del formulario.
  372.             });
  373.         }
  375.         function comportamientoCampos(status){
  376.             if(status) {
  377.                 document.getElementById('equipo_monitorMarbete').readOnly = true;
  378.                 document.getElementById('equipo_monitorMarca').disabled = true;
  379.                 document.getElementById('equipo_monitorModelo').readOnly = true;
  380.                 document.getElementById('equipo_monitorSerie').readOnly = true;
  381.                 document.getElementById('equipo_monitorTipo').readOnly = true;
  382.                 document.getElementById('equipo_monitorPulgadas').readOnly = true;
  383.             } else {
  384.                 document.getElementById('equipo_monitorMarbete').readOnly = false;
  385.                 document.getElementById('equipo_monitorMarca').disabled = false;
  386.                 document.getElementById('equipo_monitorMarca').required = true;
  387.                 document.getElementById('equipo_monitorModelo').readOnly = false;
  388.                 document.getElementById('equipo_monitorSerie').readOnly = false;
  389.                 document.getElementById('equipo_monitorTipo').readOnly = false;
  390.                 document.getElementById('equipo_monitorPulgadas').readOnly = false;
  391.             }
  392.         }
  394.         function validacionCampo(id){
  395.             console.log(id);
  396.         }
  397.     </script>
  398. {% endblock %}