{% extends 'navbar.html.twig' %}{% block title %}Pedidos Reparacion{% endblock %}{% block content_user %} <h5>Pedidos Reparacion</h5> <hr> {{ form_start(form, { 'attr' : { 'novalidate' : 'novalidate' }}) }} <div class="form-row pt-2"> <div class="col col-lg-3"> {{ form_label(form.sector) }} {{ form_widget(form.sector, { 'attr' : { 'class' : 'form-control form-control inherit form-select'} }) }} {{ form_errors(form.sector) }} </div> <div class="col col-lg-3"> {{ form_label(form.departamento) }} {{ form_widget(form.departamento, { 'attr' : { 'class' : 'form-control form-control inherit form-select'} }) }} {{ form_errors(form.departamento) }} </div> <div class="col col-lg-3"> {{ form_label(form.equipo) }} {{ form_widget(form.equipo, { 'attr' : { 'class' : 'form-control form-control inherit form-select'} }) }} {{ form_errors(form.equipo) }} </div> <div class="col col-lg-3"> {{ form_label(form.solicitante) }} {{ form_widget(form.solicitante, { 'attr' : { 'class' : 'form-control form-control inherit form-select'} }) }} {{ form_errors(form.solicitante) }} </div> </div> <div class="form-row pt-2"> <div class="col col-lg-3"> {{ form_label(form.desde) }} {{ form_widget(form.desde, { 'attr' : { 'class' : 'form-control form-control inherit'} }) }} {{ form_errors(form.desde) }} </div> <div class="col col-lg-3"> {{ form_label(form.hasta) }} {{ form_widget(form.hasta, { 'attr' : { 'class' : 'form-control form-control inherit'} }) }} {{ form_errors(form.hasta) }} </div> <div class="col col-lg-2"> {{ form_label(form.diagramado) }} {{ form_widget(form.diagramado, { 'attr' : { 'class' : 'form-control form-control inherit form-select'} }) }} {{ form_errors(form.diagramado) }} </div> <div class="col col-lg-2"> {{ form_label(form.realizado) }} {{ form_widget(form.realizado, { 'attr' : { 'class' : 'form-control form-control inherit form-select'} }) }} {{ form_errors(form.realizado) }} </div> <div class="col col-lg-2 pt-4 mt-4"> <input type="submit" class="btn btn-info btn-block" value="Aplicar Filtro" /> </div> </div> {{ form_end(form) }} <hr> <br> <br> <table id="example" class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Fecha</th> <th>Solicitante</th> <th>Sector</th> <th>Detalle</th> <th>Departamento</th> <th>Equipo</th> <th>Diagramada</th> <th>Realizada</th> <th></th> </tr> </thead> <tbody> {% for pedido_reparacion in pedido_reparacions %} <tr> <td>{{ pedido_reparacion.fecha ? pedido_reparacion.fecha|date('d/m/Y') : '' }}</td> <td>{{ pedido_reparacion.solicitante }}</td> <td>{{ pedido_reparacion.sector}}</td> <td>{{ pedido_reparacion.detalle }}</td> <td>{{ pedido_reparacion.departamento }}</td> <td>{{ pedido_reparacion.equipo }}</td> <td>{{ pedido_reparacion.diagramada ? 'Si' : 'No' }}</td> <td>{{ pedido_reparacion.realizada ? 'Si' : 'No' }}</td> <td> <a href="{{ path('app_mantenimiento_pedido_reparacion_edit', {'id': pedido_reparacion.id}) }}" class="btn btn-sm btn-warning">Modificar</a> {% if app.user.id == 1 or app.user.id == 11 %} <a href="#" data-url="{{ path('app_mantenimiento_pedido_reparacion_delete', {'id': pedido_reparacion.id}) }}" class="btn btn-sm btn-danger btn-delete">Eliminar</a> {% endif %} {% if pedido_reparacion.nombreArchivoImagen %} <button type="button" class="btn btn-sm btn-info btn-ver-imagen" data-bs-toggle="modal" data-bs-target="#imageModal" data-imagen-url="{{ asset('/uploads/images/pedidos/' ~ pedido_reparacion.nombreArchivoImagen) }}" data-pedido-id="{{ pedido_reparacion.id }}" > Ver Imagen </button> {% endif %} </td> </tr> {% endfor %} </tbody> </table> <a href="{{ path('app_mantenimiento_pedido_reparacion_new') }}" class="btn btn-success">Nuevo Pedido</a>{# Modal de Bootstrap para mostrar la imagen #}<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="imageModalLabel">Imagen del Pedido de Reparación #<span id="pedido-id-display"></span></h5> <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body text-center"> {# Aquí es donde jQuery inyectará la imagen #} <img id="modal-image-display" src="" class="img-fluid" alt="Imagen adjunta al pedido"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button> </div> </div> </div></div>{% endblock %}{% block javascripts_footer %} {{ parent() }} <script type="text/javascript">$(document).ready(function() { $('.btn-delete').on('click', function(e) { e.preventDefault(); e.stopPropagation(); const url = $(this).data('url'); if (confirm('¿Estás seguro de que deseas eliminar este pedido de reparación?')) { $.ajax({ url: url, type: 'DELETE', success: function(response) { if (response.ok) { alert('Pedido eliminado exitosamente.'); location.reload(); // Recargar la página para reflejar los cambios } else { alert('Error al eliminar el pedido: ' + response.message); } }, error: function() { alert('Ocurrió un error al intentar eliminar el pedido.'); } }); } }); // 1. Escuchamos el evento click en cualquier botón con la clase .btn-ver-imagen $('.btn-ver-imagen').on('click', function(e) { e.preventDefault(); // 2. Leemos la URL de la imagen y el ID del pedido del atributo data- const imageUrl = $(this).data('imagen-url'); const pedidoId = $(this).data('pedido-id'); // 3. Establecemos la URL de la imagen y el ID en el modal $('#modal-image-display').attr('src', imageUrl); $('#pedido-id-display').text(pedidoId); // 4. (Opcional) Abrimos el modal si no se abre automáticamente con los atributos data-bs-toggle // $('#imageModal').modal('show'); }); // Opcional: Limpiar el modal cuando se cierra para evitar que la imagen se quede cargada $('#imageModal').on('hidden.bs.modal', function () { $('#modal-image-display').attr('src', ''); }); $('#example').DataTable({ fixedHeader: true, paging: true, responsive: true, searching: false, order: [[ 0, 'desc' ]], language: { url: "{{ asset('i18n/spanish.json') }}" } });});</script>{% endblock %}