mostrando detalle de rol

src/main/webapp/js/pages/crearRolPolicia.js

@@ -92,7 +92,30 @@ function listarRolesPolicias() {
         }).then((datatable) => {
             $(datatable).on("click", ".ver-detalle", function () {
                 let data = $(datatable).DataTable().row($(this).parents("tr")).data();
-                debugger
+
+
+                axios.get("modals/policias/mantenimientoRol/detalleRol.jspf").then((response) => {
+                    debugger
+                    swal({
+                        title: '<strong>Detalle de rol</strong>',
+                        html: response.data,
+                        showCloseButton: true,
+                        showCancelButton: true,
+                        focusConfirm: false,
+                        confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
+                        confirmButtonAriaLabel: 'Thumbs up, great!',
+                        cancelButtonText: 'Cancelar',
+                        cancelButtonAriaLabel: 'Thumbs down',
+                        width: '30%',
+                        onOpen: () => {
+                            $("#spanNombres").html(data.policia_nombres);
+                            $("#spanSede").html(data.sede_descripcion);
+                            $("#spanHorario").html(`${data.tiporol_descripcion} ${data.frecuencia_descripcion}`);
+                            $("#spanRangoFechas").html(`${data.fecha_inicio} - ${data.fecha_fin}`);
+                        }
+                    });
+
+                });
             });
         });
 

src/main/webapp/vistas/modals/policias/mantenimientoRol/detalleRol.jspf

@@ -6,7 +6,7 @@
 
             <div class="form-group">
                 <label>Apellidos y Nombres</label>
-                <span class="label label-left border-left-primary label-striped form-control">DEZA CORREA OSCAR MIGUEL</span>
+                <span class="label label-left border-left-primary label-striped form-control" id="spanNombres"></span>
             </div>
 
         </div>
@@ -15,7 +15,7 @@
 
             <div class="form-group">
                 <label>Sede</label>
-                <span class="label label-left border-left-primary label-striped form-control">LINCE</span>
+                <span class="label label-left border-left-primary label-striped form-control" id="spanSede"></span>
             </div>
 
         </div>
@@ -23,14 +23,14 @@
         <div class="row">
             <div class="form-group">
                 <label>Horario</label>
-                <span class="label label-left border-left-primary label-striped form-control">AMANECIDA 24H IMPAR</span>
+                <span class="label label-left border-left-primary label-striped form-control" id="spanHorario"></span>
             </div>
         </div>
 
         <div class="row">
             <div class="form-group">
                 <label>Rango de fechas</label>
-                <span class="label label-left border-left-primary label-striped form-control">01/06/2018 - 15/06/2018</span>
+                <span class="label label-left border-left-primary label-striped form-control" id="spanRangoFechas"></span>
             </div>
         </div>