Primera iteración de nuevo diseño
This commit is contained in:
Your Name
@@ -21,11 +21,12 @@ try {
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
|
||||
|
||||
$data = $db
|
||||
->where('registro_fecha_ideal', $_GET['registro_fecha_ideal'])
|
||||
->where('horario_id', $_GET['horario_id'])
|
||||
->where('profesor_id', $_GET['profesor_id'])
|
||||
->getOne('auditoria_mat');
|
||||
// Print the JSON file
|
||||
echo json_encode($data);
|
||||
echo json_encode(array_merge($data, ['query' => $db->getLastQuery(), 'get' => $_GET]));
|
||||
} else {
|
||||
http_response_code(405);
|
||||
echo json_encode(['error' => 'method not allowed']);
|
||||
|
||||
225
auditoria.php
225
auditoria.php
@@ -13,6 +13,7 @@
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/auditoria-ux.css">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/jquery-ui.js"></script>
|
||||
<script src="js/bootstrap/bootstrap.min.js"></script>
|
||||
@@ -266,19 +267,20 @@
|
||||
<strong>{{ registro.profesor_clave }}</strong>
|
||||
{{ registro.profesor_nombre }}
|
||||
<button type="button" class="ml-3 btn btn-sm btn-outline-primary"
|
||||
@click="store.current.clase_vista = registro; detalle.obtener_detalle(registro.horario_id, registro.profesor_id)" data-toggle="modal"
|
||||
data-target="#ver-detalle">
|
||||
@click="store.current.clase_vista = registro; detalle.obtener_detalle(registro.horario_id, registro.profesor_id, registro.registro_fecha_ideal)"
|
||||
data-toggle="modal" data-target="#ver-detalle">
|
||||
<i class="ing-ojo"></i> detalle
|
||||
</button>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="text-center align-middle px-2">{{ registro.horario_hora?.slice(0,5) }} -
|
||||
{{registro.horario_fin?.slice(0,5) }}</td>
|
||||
<td class="text-center align-middle px-2">
|
||||
{{ `${registro.horario_hora?.slice(0,5)} - ${registro.horario_fin?.slice(0,5)}` }}
|
||||
</td>
|
||||
<td class="text-center align-middle px-2">
|
||||
<div v-if="registro.registro_fecha">
|
||||
<div class="col-12" :class="registro.color">
|
||||
Registro <small>{{ registro.registro_fecha?.slice(11,19) }}</small>
|
||||
Registro <small>{{ `${registro.registro_fecha?.slice(11,19)}` }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
@@ -298,21 +300,22 @@
|
||||
<span class="mr-2" :class="`text-${registro.estado_color}`">
|
||||
<i :class="`${registro.estado_icon} ing-2x`"></i>
|
||||
</span>
|
||||
<strong v-if="registro.usuario_nombre">{{ registro.usuario_nombre
|
||||
}}</strong>
|
||||
<strong v-if="registro.usuario_nombre">
|
||||
{{ registro.usuario_nombre }}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="col-12" v-if="registro.registro_fecha_supervisor">
|
||||
Hora
|
||||
<small>{{ registro.registro_fecha_supervisor?.slice(11,19) }}</small>
|
||||
<small>{{ `${registro.registro_fecha_supervisor?.slice(11,19)}` }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 "
|
||||
@click="store.registros.mostrarComentario(registro.registro_id)"
|
||||
v-if="registro.comentario" style="cursor: pointer;">
|
||||
<strong class="badge border border-primary">Observaciones:</strong>
|
||||
<small
|
||||
class="text-truncate">{{registro.comentario?.slice(0,25)}}{{registro.comentario.length
|
||||
> 10 ? '...' : ''}}</small>
|
||||
<small class="text-truncate">{{`${registro.comentario?.slice(0,25)}
|
||||
${registro.comentario.length
|
||||
> 10 ? '...' : ''}`}}</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@@ -388,165 +391,75 @@
|
||||
<div class="modal" tabindex="-1" id="ver-detalle">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl" v-if="clase_vista">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title" :data-id="clase_vista.horario_id">Detalle de la clase</h2>
|
||||
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<section class="col-12 col-md-6">
|
||||
<h4 class="h4">Profesor</h4>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<strong>Nombre:</strong>
|
||||
{{ clase_vista.profesor_nombre }}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<strong>Correo:</strong>
|
||||
<a :href="`mailto:${clase_vista.profesor_correo}`"><strong>{{
|
||||
detalle.correo }}</strong></a>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<strong>Clave:</strong>
|
||||
{{ clase_vista.profesor_clave }}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<strong>Facultad:</strong>
|
||||
{{ detalle.facultad }}
|
||||
<div class="modal-body detalle">
|
||||
<section class="profesor">
|
||||
<img class="profesor-icon" src="fonts/svg/portrait.svg" alt="profesor">
|
||||
<div>
|
||||
<span class="profesor-nombre">
|
||||
{{clase_vista.profesor_nombre}}
|
||||
</span>
|
||||
<div class="profesor-datos">
|
||||
<a :href="`mailto:${clase_vista.profesor_correo}`" class="profesor-correo">
|
||||
{{clase_vista.profesor_correo}}
|
||||
</a>
|
||||
<i class="pipe"></i>
|
||||
<span class="profesor-clave">
|
||||
{{clase_vista.profesor_clave}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="col-12 col-md-6">
|
||||
<h4 class="h4">Clase</h4>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<strong>Materia:</strong>
|
||||
{{ detalle.materia }}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<strong>Carrera:</strong>
|
||||
{{ detalle.carrera }}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<strong>Nivel:</strong>
|
||||
{{ detalle.nivel}}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<strong>Grupo:</strong>
|
||||
{{ detalle.horario_grupo }}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<strong>Horario:</strong>
|
||||
{{ clase_vista.horario_hora?.slice(0, 5) }} -
|
||||
{{clase_vista.horario_fin?.slice(0, 5) }}
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<strong>Salón:</strong>
|
||||
{{ clase_vista.salon }}
|
||||
|
||||
<main class="my-5">
|
||||
<div class="pp-card" style="grid-row: span 5;">
|
||||
<div :class="`bg-${clase_vista.estado_color}`" class="text-white pp-card-icon ">
|
||||
<span>{{clase_vista.nombre}}</span>
|
||||
<i :class="clase_vista.estado_icon" class="mx-3"></i>
|
||||
</div>
|
||||
<main>
|
||||
<span class="supervisor">{{clase_vista.usuario_nombre}}</span>
|
||||
<span class="supervisor_hora">{{clase_vista.registro_fecha_supervisor}}</span>
|
||||
<footer>Supervisor</footer>
|
||||
</main>
|
||||
</div>
|
||||
<div class="pp-card" style="grid-row: span 8">
|
||||
<div class="bg-primary text-white">{{clase_vista.carrera}}</div>
|
||||
<main>
|
||||
<span class="materia">{{clase_vista.materia}}</span>
|
||||
<span class="horario">
|
||||
<section>
|
||||
{{clase_vista.horario_hora}}
|
||||
{{clase_vista.horario_fin}}
|
||||
</section>
|
||||
<section>
|
||||
{{clase_vista.horario_grupo}}
|
||||
</section>
|
||||
</div>
|
||||
<div class="row">
|
||||
<section class="col-12">
|
||||
<h4 class="h4 mt-4">Registro</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-center" v-if="!clase_vista.registro_fecha">
|
||||
<strong><span class="badge border border-dark"><i
|
||||
class="ing-cancelar"></i></span>
|
||||
Sin registro del profesor</strong>
|
||||
</div>
|
||||
<div class="col-md-6 text-center" v-else>
|
||||
El profesor registró su asistencia a las
|
||||
<code>{{clase_vista.registro_fecha?.slice(11, 19)}}</code>
|
||||
<hr>
|
||||
<p v-if="!clase_vista.registro_retardo" class="text-center">
|
||||
<span class="badge border border-success"><i
|
||||
class="ing-aceptar"></i></span>
|
||||
A tiempo
|
||||
</p>
|
||||
<p v-else class="text-center">
|
||||
<span class="badge border border-warning"><i
|
||||
class="ing-retardo"></i></span>
|
||||
Con retardo
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6 text-center" v-if="clase_vista.registro_justificada">
|
||||
<strong>
|
||||
<span class="badge badge-success mr-2">
|
||||
<i class="ing-finalistas"></i>
|
||||
</span>
|
||||
Justificada
|
||||
</strong>
|
||||
<span class="text-muted">
|
||||
por
|
||||
{{clase_vista.justificador_nombre}} de
|
||||
<strong>{{clase_vista.justificador_rol}}</strong>
|
||||
<span v-if="clase_vista.justificador_facultad"> de
|
||||
<strong>{{clase_vista.justificador_facultad}}</strong>
|
||||
</span>
|
||||
|
||||
el día {{clase_vista.registro_fecha_justificacion?.slice(0, 10)}} a
|
||||
las
|
||||
{{clase_vista.registro_fecha_justificacion?.slice(11, 16)}}
|
||||
</span>
|
||||
<div v-if="clase_vista.justificacion">
|
||||
<hr>
|
||||
<p class="text-center">
|
||||
<strong>Observación:</strong>
|
||||
{{clase_vista.justificacion}}
|
||||
</p>
|
||||
<span class="salon">{{clase_vista.salon}}</span>
|
||||
<footer>{{clase_vista.nivel}}</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div class="pp-card" style="grid-row: span 3">
|
||||
<div class="bg-warning text-white"
|
||||
v-if="clase_vista.registro_fecha && clase_vista.registro_retardo">
|
||||
<span>Con retardo</span>
|
||||
<i class="ing-retardo"></i>
|
||||
</div>
|
||||
<div class="col-md-6 text-center"
|
||||
v-else-if="clase_vista.registro_fecha_justificacion">
|
||||
<strong>
|
||||
<span class="badge border border-dark">
|
||||
<div class="bg-success text-white" v-else-if="clase_vista.registro_fecha">
|
||||
<span>A tiempo</span>
|
||||
<i class="ing-autorizar"></i>
|
||||
</div>
|
||||
<div class="bg-dark text-white" v-else>
|
||||
Sin registro
|
||||
<i class="ing-cancelar"></i>
|
||||
</span>
|
||||
Sin justificar, <span class="text-muted">
|
||||
{{clase_vista.justificador_nombre}}
|
||||
({{clase_vista.justificador_rol}}{{clase_vista.justificador_facultad
|
||||
? ' de ' + clase_vista.justificador_facultad : ''}})
|
||||
</span> borró la justificación, el día
|
||||
{{clase_vista.registro_fecha_justificacion?.slice(0, 10)}} a las
|
||||
{{clase_vista.registro_fecha_justificacion?.slice(11, 16)}}
|
||||
</strong>
|
||||
</div>
|
||||
<div class="col-md-6 text-center" v-else>
|
||||
<strong>
|
||||
<span class="badge border border-dark">
|
||||
<i class="ing-cancelar"></i>
|
||||
</span>
|
||||
Sin justificar
|
||||
</strong>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<section class="col-12" v-if="clase_vista.reposicion_id">
|
||||
<h4 class="h4 mt-4">Reposición</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
Esta clase se reprogramó para el día
|
||||
{{ clase_vista.reposicion_fecha }} a las
|
||||
{{ clase_vista.reposicion_hora?.slice(0, 5) }} -
|
||||
{{clase_vista.reposicion_hora_fin?.slice(0, 5) }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<!-- botón aceptar -->
|
||||
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">
|
||||
<i class="ing-aceptar"></i>
|
||||
Aceptar
|
||||
</button>
|
||||
<footer class="facultad">
|
||||
{{clase_vista.facultad}}
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
139
css/auditoria-ux.css
Normal file
139
css/auditoria-ux.css
Normal file
@@ -0,0 +1,139 @@
|
||||
@font-face {
|
||||
font-family: 'La Salle Display Regular';
|
||||
src: url('../fonts/indivisaFont/woff/IndivisaDisplaySans-Regular.woff');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'La Salle Display Heavy';
|
||||
src: url('../fonts/indivisaFont/woff/IndivisaDisplaySans-Heavy.woff');
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.detalle {
|
||||
padding: 2rem;
|
||||
padding-inline: 8rem;
|
||||
}
|
||||
|
||||
.profesor {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profesor-icon {
|
||||
height: 6rem;
|
||||
fill: #001d68;
|
||||
}
|
||||
|
||||
.profesor-nombre {
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
font-family: 'La Salle Display Regular';
|
||||
color: black;
|
||||
}
|
||||
|
||||
.profesor-clave {
|
||||
font-weight: 900;
|
||||
font-size: 1.2rem;
|
||||
font-family: 'La Salle Display Regular';
|
||||
}
|
||||
|
||||
.profesor-datos {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
gap: .75rem;
|
||||
color: #969696;
|
||||
}
|
||||
|
||||
.profesor-datos .profesor-correo {
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
color: #969696;
|
||||
}
|
||||
|
||||
.profesor-datos .profesor-correo:hover {
|
||||
color: #3f3f3f;
|
||||
transition-timing-function: ease-in;
|
||||
transition-duration: .2s;
|
||||
}
|
||||
|
||||
.pipe::after {
|
||||
content: '';
|
||||
width: .1rem;
|
||||
height: 1.4rem;
|
||||
|
||||
display: block;
|
||||
|
||||
background-color: #969696;
|
||||
}
|
||||
|
||||
.detalle main {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.pp-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pp-card-icon {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pp-card div {
|
||||
border-start-start-radius: 1rem;
|
||||
border-start-end-radius: 1rem;
|
||||
padding-inline: 1.5rem;
|
||||
padding-block: .5rem;
|
||||
font-family: 'La Salle Display Heavy';
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.pp-card main {
|
||||
background-color: #e1e1e1;
|
||||
height: 100%;
|
||||
|
||||
border-end-start-radius: 1rem;
|
||||
border-end-end-radius: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pp-card footer {
|
||||
font-style: italic;
|
||||
color: #969696;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.pp-card:not(:has(main)) {
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
|
||||
border-end-start-radius: 1rem;
|
||||
border-end-end-radius: 1rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.facultad {
|
||||
font-family: 'La Salle Display Heavy';
|
||||
font-size: 1.4rem;
|
||||
color: #e1e1e1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 1rem;
|
||||
}
|
||||
@@ -48,16 +48,16 @@ $data = $db->query(
|
||||
(auditoria->>'estado_supervisor_id')::integer as estado_id,
|
||||
auditoria->>'registro_retardo' as registro_retardo
|
||||
FROM last_auditoria
|
||||
JOIN BLOQUE_HORARIO ON ((auditoria->>'horario_hora')::TIME, (auditoria->>'horario_fin')::TIME) OVERLAPS (HORA_INICIO, HORA_FIN)
|
||||
-- JOIN BLOQUE_HORARIO ON ((auditoria->>'horario_hora')::TIME, (auditoria->>'horario_fin')::TIME) OVERLAPS (HORA_INICIO, HORA_FIN)
|
||||
WHERE USUARIO_ID = :usuario_id
|
||||
AND auditoria->>'facultad_id' = COALESCE(:facultad_id, auditoria->>'facultad_id')
|
||||
AND auditoria->>'profesor_clave' = COALESCE(:profesor_clave, auditoria->>'profesor_clave')
|
||||
AND BLOQUE_HORARIO.ID = COALESCE(:bloque_horario_id, BLOQUE_HORARIO.ID)",
|
||||
--AND BLOQUE_HORARIO.ID = COALESCE(:bloque_horario_id, BLOQUE_HORARIO.ID)",
|
||||
[
|
||||
'usuario_id' => $user->user['id'],
|
||||
'facultad_id' => $params['facultad_id'],
|
||||
'profesor_clave' => $profesor_clave,
|
||||
'bloque_horario_id' => $params['bloque_horario']
|
||||
/* 'bloque_horario_id' => $params['bloque_horario'] */
|
||||
]
|
||||
);
|
||||
|
||||
|
||||
2
fonts/svg/portrait.svg
Normal file
2
fonts/svg/portrait.svg
Normal file
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="Bold" viewBox="0 0 24 24" width="512" height="512"><path d="M18.5,0H5.5A5.506,5.506,0,0,0,0,5.5v13A5.506,5.506,0,0,0,5.5,24h13A5.506,5.506,0,0,0,24,18.5V5.5A5.506,5.506,0,0,0,18.5,0ZM21,18.5A2.5,2.5,0,0,1,18.5,21H18V20A6,6,0,0,0,6,20v1H5.5A2.5,2.5,0,0,1,3,18.5V5.5A2.5,2.5,0,0,1,5.5,3h13A2.5,2.5,0,0,1,21,5.5Z" fill="#001d68"/><circle cx="12" cy="8.5" r="3.5" fill="#001d68"/></svg>
|
||||
|
After Width: | Height: | Size: 466 B |
@@ -337,12 +337,12 @@ const detalle = reactive({
|
||||
this.horario_grupo = null
|
||||
},
|
||||
|
||||
async obtener_detalle(horario_id, profesor_id) {
|
||||
async obtener_detalle(horario_id, profesor_id, registro_fecha_ideal) {
|
||||
detalle.reset();
|
||||
|
||||
$('div.modal#cargando').modal('show');
|
||||
try {
|
||||
const resultado = await (await fetch(`action/action_auditoria_detalle.php?${new URLSearchParams({ horario_id, profesor_id })}`)).json();
|
||||
const resultado = await (await fetch(`action/action_auditoria_detalle.php?${new URLSearchParams({ horario_id, profesor_id, registro_fecha_ideal })}`)).json();
|
||||
|
||||
this.correo = resultado.profesor_correo;
|
||||
this.facultad = resultado.facultad;
|
||||
@@ -350,6 +350,9 @@ const detalle = reactive({
|
||||
this.carrera = resultado.carrera;
|
||||
this.nivel = resultado.nivel;
|
||||
this.horario_grupo = resultado.horario_grupo;
|
||||
|
||||
this.registro_fecha =
|
||||
store.current.clase_vista = resultado
|
||||
}
|
||||
catch (error) {
|
||||
console.log('Error:', error)
|
||||
|
||||
Reference in New Issue
Block a user