{% extends 'base.html.twig' %}
{% block title %} - Consulta y Reporte de Solicitudes{% endblock %}
{% if form is defined %}
{% form_theme form 'bootstrap_4_layout.html.twig' %}
{% endif %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{ asset('plugins/toastr/toastr.min.css') }}">
<link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<style>
label {
margin: 0 5px;
}
.form-group {
margin-right: 10px;
}
</style>
{% endblock %}
{% block body %}
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="card">
<div class="card-header">
<h1 class="card-title">Consulta y Reporte de Solicitudes</h1>
<div class="card-tools">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="#">Inicio</a></li>
<li class="breadcrumb-item active"><b>Consulta y Reporte Solicitudes</b></li>
</ol>
</div>
</div>
</div>
</section>
<!-- Main content -->
<section class="content">
<!-- Indicadores -->
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<div id="estatusA" class="info-box">
<span class="info-box-icon bg-warning elevation-1"><i class="fas fa-info-circle text-white"></i></span>
<div class="info-box-content">
<span class="info-box-text">Pendientes</span>
<span class="info-box-number">0</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div id="estatusB" class="info-box mb-3">
<span class="info-box-icon bg-danger elevation-1"><i class="fas fa-cog"></i></span>
<div class="info-box-content">
<span class="info-box-text">En proceso</span>
<span class="info-box-number">0</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div id="estatusC" class="info-box mb-3">
<span class="info-box-icon bg-success elevation-1"><i class="fas fa-thumbs-up"></i></span>
<div class="info-box-content">
<span class="info-box-text">Atendidas (por evaluar)</span>
<span class="info-box-number">0</span>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div id="estatusD" class="info-box mb-3">
<span class="info-box-icon bg-info elevation-1"><i class="fas fa-check-circle"></i></span>
<div class="info-box-content">
<span class="info-box-text">Evaluadas</span>
<span class="info-box-number">0</span>
</div>
</div>
</div>
</div>
<!-- Indicadores -->
<!-- Default box -->
<div class="card">
<div class="card-header">
<div class="row">
{% if form is defined %}
{{ form_start(form, {'attr': {'class': 'form-inline col-md-auto', 'id': 'form_dashboard_filtro'}}) }}
{{ form_row(form.finicio) }}
{{ form_row(form.ftermino) }}
{% if form.unidad is defined %}
<div class="ml-3">{{ form_row(form.unidad) }}</div>
{% endif %}
{{ form_end(form) }}
{% endif %}
<div class="col text-right">
<button id="consultar" type="button" class="btn btn-outline-success mr-2" onclick="aplicarFiltro()">
<i class="fas fa-search mr-2"></i> Consultar
</button>
</div>
</div>
</div>
</div>
<!-- /.card -->
<div class="row justify-content-center">
<div class="col-12">
<!-- Default box -->
<div class="card card-outline card-teal p-3">
<div class="card-header row">
<h3>Solicitudes de <small class="text-success">Mantenimientos</small></h3>
<div class="col text-right">
<button id="descargar_excel" class="btn btn-outline-primary" onclick="descargarExcel()">
<i class="fas fa-file-excel mr-2"></i> Descargar reporte Excel
</button>
</div>
</div>
<div class="card-body">
<table id="solicitud" class="table table-hover w-100">
<thead>
<tr>
<th>No. Solicitud</th>
<th>Marbete</th>
<th>Descripción</th>
<th>Acción a realizar</th>
<th>MC/MP/ST</th>
<th>Estatus</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
{% for s in solicitudes %}
<tr id="s-{{ s.id_sol }}">
<th class="id">{{ s.id_sol }}</th>
<th class="marbete">{{ s.marbete }}</th>
<td class="marca"> Marca: <b>{{ s.marca }}</b><br>Modelo: <b>{{ s.modelo }}</b></td>
<td class="falla">{{ s.falla }}</td>
<td>{{ s.tipo_mantenimiento }}</td>
<td class="estatus">
</td>
<td>
<a href="#modal-vista-solicitud" class="text-info btn-sm" data-toggle="modal" onclick="vistaModalSolicitud('{{ path('consulta_solicitud_vista_solicitud', {'id': s.id_sol}) }}')">
<i class="fa fa-eye" data-toggle="tooltip" title="Ver"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- Modal vista de informacion de solicitud -->
<div class="modal hide" id="modal-vista-solicitud"></div>
<!-- /.modal vista de informacion de solicitud -->
<!-- Modal de evaluación de mantenimiento correctivo -->
<div class="modal hide" id="modal-solicitud-evaluacion"></div>
<!-- /.modal de evaluacion de mantenimiento preventivo correctivo -->
</div>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
<script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/gijgo@1.9.14/js/messages/messages.es-es.js" type="text/javascript"></script>
<script src="{{ asset('plugins/toastr/toastr.min.js') }}"></script>
<script type="text/javascript">
$("#reporte-mtto").addClass("active");
$(function() {
let firstDayYear = new Date().getFullYear() + '-01-01';
let today = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate();
$('#dashboard_filtro_finicio').datepicker({
showOtherMonths: true,
uiLibrary: 'bootstrap4',
modal: true,
header: true,
footer: true,
iconsLibrary: 'fontawesome',
locale: 'es-es',
format: 'yyyy-mm-dd',
value: firstDayYear,
maxDate: function () {
return $('#dashboard_filtro_ftermino').val();
}
});
$('#dashboard_filtro_ftermino').datepicker({
showOtherMonths: true,
uiLibrary: 'bootstrap4',
modal: true,
header: true,
footer: true,
iconsLibrary: 'fontawesome',
locale: 'es-es',
value: today,
format: 'yyyy-mm-dd',
minDate: function () {
return $('#dashboard_filtro_finicio').val();
}
});
});
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$('#solicitud').DataTable({
"aaSorting": [],
orderCellsTop: true,
{# Define un valor predeterminado para LengthChange #}
"pageLength": 50,
"scrollX": true,
{# sDom: 'lrtip', #}
"bLengthChange" : true,
language: {
url: 'https://cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json'
}
});
vistaDashboard();
var datos_estatus = {{ solicitudes|json_encode|raw }};
vistaInformacionTabla(datos_estatus);
});
function vistaInformacionTabla(data){
let dash = ({
'pendiente': 0,
'proceso': 0,
'atendido': 0,
'evaluado': 0
})
$.each(data, function (key, s) {
row = $('#s-' + s.id_sol);
if (s.estatus === '1') {
dash.pendiente = dash.pendiente + 1;
$('#estatusA').find('.info-box-number').text(dash.pendiente);
row.find('.estatus').html('<div class="badge bg-gradient-warning text-white" style="width: 6rem;">Pendiente</div>');
}
if (s.estatus === '2') {
dash.proceso = dash.proceso + 1;
$('#estatusB').find('.info-box-number').text(dash.proceso);
row.find('.estatus').html('<div class="badge bg-gradient-danger" style="width: 6rem;">En proceso</div>');
}
if (s.estatus === '3') {
dash.atendido = dash.atendido + 1;
$('#estatusC').find('.info-box-number').text(dash.atendido);
row.find('.estatus').html('<div class="badge bg-gradient-primary" style="width: 6rem;">Atendido</div>');
row.find('.evaluacion').css('display', 'inline-block');
}
if (s.estatus === '4') {
dash.evaluado = dash.evaluado + 1;
$('#estatusD').find('.info-box-number').text(dash.evaluado);
row.find('.estatus').html('<div class="badge bg-gradient-success" style="width: 6rem;">Evaluado</div>');
row.find('.evaluacion').css('display', 'inline-block');
}
});
}
function aplicarFiltro() {
$("#solicitud").find($("tbody")).html("<tr><td colspan='8' class='text-center'><i class='fas fa-spinner fa-pulse'></i></td></tr>");
let formData = new FormData(document.getElementById("form_dashboard_filtro"));
//let formData = new FormData(document.getElementById("form_filtro"));
$.ajax({
type: "POST",
url: '{{ path('consulta_solicitud_index') }}',
data: formData, // Adjuntar los campos del formulario enviado.
dataType: "html",
cache: false,
contentType: false,
processData: false,
success: function (data) {
let datos = jQuery.parseJSON(data);
actualizarTabla(datos);
vistaInformacionTabla(datos);
},
error: function (data, text, error) {
let datos = jQuery.parseJSON(data.responseText);
console.log("error: " + datos);
}
});
}
<!-- Actualizar tabla de bitácora -->
function actualizarTabla(data) {
$("#solicitud").dataTable().fnClearTable();
$("#solicitud").dataTable().fnDestroy();
var edit = "";
var html = "";
$.each(data, function (key, s) {
html += '<tr id="s-' + s.id_sol + '">' +
'<th class="id">' + s.id_sol + '</th>' +
'<th class="marbete">' + s.marbete + '</th>' +
'<td class="marca"> Marca: <b>' + s.marca + '</b><br>Modelo: <b>' + s.modelo + '</b></td>' +
'<td class="falla">' + s.falla + '</td>' +
'<td>' + s.tipo_mantenimiento + '</td>' +
'<td class="estatus">' +
'<div style="width: 5rem; height: 0.4rem;">' + s.estatus + '</div>' +
'</td>' +
'<td>' +
'<a href="#modal-vista-solicitud" class="text-info btn-sm" data-toggle="modal" onclick="vistaModalSolicitud(\'' + s.ver + '\')">' +
'<i class="fa fa-eye" data-toggle="tooltip" title="Ver"></i>' +
'</a>';
if (s.estatus === '4') {
html += ' ' +
'<a href="#modal-solicitud-evaluacion" class="evaluacion btn-sm" style="display: none" data-toggle="modal" onclick="evaluacion(\'' + s.evaluacion + '\')">' +
'<i class="fas fa-clipboard-check text-primary" data-toggle="tooltip" title="Ver evaluacion"></i>' +
'</a>';
}
{% if app.user.rol.idRol != 3 %}
if (s.estatus !== '4') {
html += ' ' +
'<a href="#modal-solicitud-evaluacion" class="evaluacion btn-sm" style="display: none" data-toggle="modal" onclick="evaluacion(\'' + s.evaluacion + '\')">' +
'<i class="fa fa-check-circle text-primary" data-toggle="tooltip" title="Realizar evaluacion"></i>' +
'</a>';
}
{% endif %}
/*if (s.estatus !== '4') {
html += ' ' +
'<a href="#modal-solicitud-evaluacion" class="evaluacion" style="display: none" data-toggle="modal" onclick="evaluacion(\'' + s.evaluacion + '\')">' +
'<i class="fa fa-check-circle text-primary" data-toggle="tooltip" title="Realizar evaluacion"></i>' +
'</a>';
}else if (s.estatus === '4'){
html += ' ' +
'<a href="#modal-solicitud-evaluacion" class="evaluacion" style="display: none" data-toggle="modal" onclick="evaluacion(\'' + s.evaluacion + '\')">' +
'<i class="fas fa-clipboard-check text-primary" data-toggle="tooltip" title="Ver evaluacion"></i>' +
'</a>';
}*/
html += '</td>' +
'</tr>';
});
$("#solicitud").find($("tbody")).html(html);
$('#solicitud').DataTable({
"aaSorting": [],
orderCellsTop: true,
{# Define un valor predeterminado para LengthChange #}
"pageLength": 50,
"scrollX": true,
{# sDom: 'lrtip', #}
"bLengthChange" : true,
language: {
url: 'https://cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json'
},
});
}
function vistaDashboard()
{
$.ajax({
type: "POST",
url: '{{ path('consulta_solicitud_vista') }}',
dataType: "json",
cache: false,
contentType: false,
processData: false,
success: function (data) {
let datos = data;
if(datos.data[1]){
row = $('#estatusA');
row.find('.info-box-number').text(datos.data[1].solicitudCont);
}
if(datos.data[2]){
row = $('#estatusB');
row.find('.info-box-number').text(datos.data[2].solicitudCont);
}
if(datos.data[3]){
row = $('#estatusC');
row.find('.info-box-number').text(datos.data[3].solicitudCont);
}
if(datos.data[4]){
row = $('#estatusD');
row.find('.info-box-number').text(datos.data[4].solicitudCont);
}
},
error: function (data, text, error) {
$(document).Toasts('create', {
autohide: true,
delay: 3000,
class: 'bg-danger',
title: 'Actualización de Dashboard',
subtitle: 'Ocurrio un error',
body: data.responseJSON.mensaje
});
},
complete: function () {
}
});
}
function descargarExcel() {
let data_usuario = {{ app.user.idUsu }};
let data_rol = {{ app.user.rol.idRol }};
let data_unidad = {{ app.user.unidad.idUni }};
{# let form_unidad = $("#form_unidad").val(); #}
let form_finicio = $("#form_finicio").val();
let form_ftermino = $("#form_ftermino").val();
var url = "{{ path("consulta_solicitud_reporte_excel", {'id': 'id', 'finicio': 'finicio', 'ftermino': 'ftermino'}) }}";
if (form_finicio != "" && form_ftermino != ""){
if (data_rol === 3){
url = url.replace("id", data_unidad);
}
if (data_rol === 4){
url = url.replace("id", data_usuario);
}
url = url.replace("finicio", form_finicio);
url = url.replace("ftermino", form_ftermino);
}
let btn = $("#descargar_excel");
$.ajax({
type: "POST",
url: url,
cache: false,
contentType: false,
processData: false,
xhrFields: {
responseType: 'blob'
},
beforeSend: function () {
btn.prop('disabled', true);
btn.html("<i class='fas fa-spinner fa-pulse'></i> Descargar reporte Excel");
},
success: function (data) {
let a = document.createElement('a');
a.href = window.URL.createObjectURL(data);
a.download = "ReporteSolicitud.xlsx"
a.click();
},
error: function (data, text, error) {
$(document).Toasts('create', {
autohide: true,
delay: 3000,
class: 'bg-danger',
title: 'Descarga de Excel',
subtitle: 'Ocurrio un error',
body: data.responseJSON.mensaje
});
},
complete: function () {
btn.prop('disabled', false);
btn.html("<i class='fas fa-file-excel mr-2'></i> Descargar reporte Excel");
}
});
}
function vistaSolicitud(data)
{
let datos = data;
row = $('#solicitud-' + datos.id);
row.find('.evaluacion').css('display', 'inline-block');
row.find('.estatus').html(datos.estatus);
vistaDashboard();
}
function vistaModalSolicitud(url)
{
$('#modal-vista-solicitud').load(url, function ()
{
// configuración del Modal
$("#modal-vista-solicitud").on('hide.bs.modal', function () {
$(this).html('Cargando');
});
$(".modal-dialog").draggable;
vistaModalSolicitudAjax(url);
})
}
function vistaModalSolicitudAjax(url)
{
$.ajax({
type: "POST",
url: url,
dataType: "json",
cache: false,
contentType: false,
processData: false,
success: function (data){
},
error: function (data, text, error) {
},
complete: function () {
}
});
}
function evaluacion(url)
{
$('#modal-solicitud-evaluacion').load(url, function ()
{
// configuración del Modal
$("#modal-solicitud-evaluacion").on('hide.bs.modal', function () {
$(this).html('Cargando');
});
$(".modal-dialog").draggable;
evaluacionAjax(url)
})
}
function evaluacionAjax(url)
{
let send = $("#evaluacion_correctivo_guardar");
$('#evaluacion_correctivo_guardar').on('click', function () {
let formData = new FormData(document.getElementById("form-evaluacion-solicitud"));
$.ajax({
type: "POST",
url: url,
data: formData, // Adjuntar los campos del formulario enviado.
dataType: "json",
cache: false,
contentType: false,
processData: false,
beforeSend: function () {
send.text("Actualizando "); // Para input de tipo button
send.append("<i class='fa fa-spinner fa-spin' style='font-size:16px'></i>");
send.prop("disabled", true);
},
success: function (data) {
closeModal('modal-solicitud-evaluacion');
vistaSolicitud(data);
$(document).Toasts('create', {
autohide: true,
delay: 3000,
class: 'bg-success',
title: 'Éxito',
subtitle: 'Evaluación de solicitud de mantenimiento',
body: data.mensaje
});
},
error: function (data, text, error) {
let datos = data.responseJSON;
$("#modal-solicitud-evaluacion").html(datos.form);
evaluacionAjax(url);
},
complete: function () {
}
});
return false; // Evitar ejecutar el submit del formulario.
});
}
</script>
{% endblock %}