224 lines
11 KiB
PHP
224 lines
11 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Supervisor - Seleccionar rutas</title>
|
|
<?php
|
|
include 'import/html_css_files.php';
|
|
?>
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<?php
|
|
include "import/html_header.php";
|
|
html_header(
|
|
"Selecciona la ruta a supervisar",
|
|
"Sistema de gestión de checador",
|
|
);
|
|
?>
|
|
<main class="container-fluid px-4" id="app" v-cloak @vue:mounted="mounted">
|
|
<!-- filtros -->
|
|
<div class="card mt-4">
|
|
<div class="card-header bg-dark d-flex justify-content-between align-items-center flex-wrap text-white">
|
|
<h2 class="col-md-10 col-12 text-white font-weight-bold text-uppercase text-center">
|
|
Facultad de ingeniería: {{ store.rutas.data[store.rutas.selected]?.ruta ?? '' }}
|
|
</h2>
|
|
<button type="button" class="btn btn-success btn-sm" data-toggle="modal"
|
|
data-target="#editar-ubicaciones">
|
|
<i class="ing-editar"></i>
|
|
</button>
|
|
</div>
|
|
<div class="card-body bg-info">
|
|
<div class="container-fluid">
|
|
<div class="row flex-nowrap overflow-auto">
|
|
<!-- size big -->
|
|
<div class="col-9 col-sm-7 col-md-4 col-lg-3 col-xl-2 my-2"
|
|
v-for="(ruta, index) in store.rutas.data" :key="ruta.id">
|
|
<span class="shadow badge badge-pill py-2 px-4" @click="store.selectRuta(ruta.id)"
|
|
:class="{ 'badge-primary': store.rutas.selected == ruta.id, 'badge-light text-primary': store.rutas.selected != ruta.id, 'badge-dark text-muted disabled' : ruta.horarios.every(({estado}) => estado != 0) && store.rutas.selected != ruta.id }">
|
|
{{ ruta.ruta }}
|
|
<span class="badge mx-3" v-if="ruta.horarios.some(({estado}) => estado == 0)"
|
|
:class="{ 'badge-success': ruta.horarios.length > 0, 'badge-danger': ruta.horarios.length == 0 }">
|
|
{{ruta.horarios.filter(({estado}) => estado != 0).length}} / {{
|
|
ruta.horarios.length}}
|
|
</span>
|
|
<span v-else class="badge mx-3"
|
|
:class="{ 'badge-success': ruta.horarios.length > 0, 'badge-danger': ruta.horarios.length == 0 }">
|
|
|
|
<i class="ing-aceptar"></i>
|
|
</span>
|
|
<span class="sr-only">Faltan {{ruta.horarios.filter(({estado}) => estado == 0).length}}
|
|
horarios por registrar</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-dark d-flex justify-content-between align-items-center flex-wrap text-white">
|
|
<button class="btn btn-info" :disabled="store.bloquesHorario.selected == 0"
|
|
@click="store.selectBloque(store.bloquesHorario.selected - 1)">
|
|
<i class="ing-caret ing-rotate-90"></i>
|
|
<span class="d-none d-md-inline-block">
|
|
Bloque horario anterior
|
|
</span>
|
|
</button>
|
|
|
|
<h3 class="text-white font-weight-bold text-uppercase text-center">
|
|
{{ store.hora_inicio.slice(0, 5) }} - {{ store.hora_fin.slice(0, 5) }}
|
|
</h3>
|
|
|
|
<button class="btn btn-info" @click="store.selectBloque(store.bloquesHorario.selected + 1)"
|
|
:disabled="store.bloquesHorario.selected == store.bloquesHorario.data.length - 1">
|
|
<span class="d-none d-md-inline-block">
|
|
Bloque horario siguiente
|
|
</span>
|
|
<i class="ing-caret ing-rotate-270"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3 d-flex justify-content-center flex-wrap">
|
|
<!-- refresh -->
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-striped table-bordered table-sm">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th scope="col" class="text-center align-middle text-nowrap px-2">
|
|
<button @click="store.invertir" class="btn btn-info mr-3" v-if="clases.length > 0">
|
|
<i class="ing-cambiar ing-rotate-90"></i>
|
|
</button>
|
|
Salón
|
|
</th>
|
|
<th scope="col" class="text-center align-middle text-nowrap px-2">Profesor</th>
|
|
<th scope="col" class="text-center align-middle text-nowrap px-2">Horario</th>
|
|
<th scope="col" class="text-center align-middle text-nowrap px-2">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-if="clases.length == 0">
|
|
<td colspan="6" class="text-center">No hay clases en este horario</td>
|
|
</tr>
|
|
<tr v-for="clase in clases" :key="clase.id">
|
|
<td class="text-center align-middle">{{ clase.salon }}</td>
|
|
<td class="text-center align-middle">{{ clase.profesor }} {{ clase.materia }}
|
|
<td class="text-center align-middle">
|
|
{{ clase.hora_inicio }} - {{ clase.hora_fin }}
|
|
</td>
|
|
<td class="text-center align-middle text-nowrap">
|
|
<button class="btn btn-outline text-center mx-2" v-for="estado in estados"
|
|
:key="estado.id" @click="store.cambiarEstado(clase.id, estado.id)"
|
|
:class="[{'active': estado.id === clase.estado}, `btn-outline-${estado.color}`]">
|
|
<i :class="estado.icon"></i>
|
|
</button>
|
|
|
|
<button class="btn btn-outline-primary text-center mx-2" data-toggle="modal"
|
|
data-target="#editar-comentario" :class="{ 'active': clase.comentario != '' }"
|
|
@click="store.selectEditor(clase.id)">
|
|
<i class="ing-editar"></i>
|
|
<span class="badge badge-pill badge-primary"
|
|
v-if="clase.comentario != ''">...</span>
|
|
<span class="sr-only">Editar comentario</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL -->
|
|
<div class="modal" tabindex="-1" id="editar-ubicaciones">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Editar rutas</h5>
|
|
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="container">
|
|
<h2>Reordena las rutas</h2>
|
|
<ul id="sortable" class="list-group">
|
|
<li class="list-group-item" v-for="ruta in store.rutas.data" :key="ruta.id"
|
|
:id="'ruta-' + ruta.id"
|
|
:class="[ruta.horarios.every(horario => horario.estado != 0) ? ['disabled', 'bg-light', 'undraggable'] : '']">
|
|
{{ruta.ruta}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary btn-lg btn-block mb-4" @click="store.guardarCambios">
|
|
<i class="ing-guardar"></i>
|
|
Guardar cambios
|
|
</button>
|
|
|
|
<div class="modal" tabindex="-1" id="editar-comentario">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Añadir comentario</h5>
|
|
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="container">
|
|
<h2 class="text-center">Comentarios de la clase</h2>
|
|
<br>
|
|
<div class="input-group">
|
|
<div class="input-group-prepend">
|
|
<span class="input-group-text bg-primary text-white">Comentario
|
|
<button class="btn btn-light ml-2 text-primary"
|
|
@click="store.limpiarComentario">
|
|
<i class="ing-borrar"></i>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
<textarea class="form-control" aria-label="Comentarios de la clase"
|
|
v-model="store.editor.texto"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-danger" data-dismiss="modal">
|
|
<i class="ing-cancelar"></i>
|
|
Cancelar
|
|
</button>
|
|
<button type="button" class="btn btn-primary" data-dismiss="modal"
|
|
@click="store.guardarComentario">
|
|
Guardar comentario
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<?php
|
|
include "import/html_footer.php";
|
|
?>
|
|
<!-- filtro modal -->
|
|
<script src="js/jquery.min.js"></script>
|
|
<script src="js/jquery-ui.js"></script>
|
|
<script src="js/jquery-ui.touch-punch.min.js"></script>
|
|
<script src="js/bootstrap/bootstrap.min.js"></script>
|
|
<?php include_once 'js/messages.php'; ?>
|
|
<script src="https://unpkg.com/petite-vue"></script>
|
|
<script>
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|