211 lines
12 KiB
PHP
211 lines
12 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Auditoría asistencial</title>
|
|
<?php
|
|
include 'import/html_css_files.php';
|
|
?>
|
|
<style>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<?
|
|
$redirect = $_SERVER['PHP_SELF'];
|
|
include "import/html_header.php";
|
|
global $user;
|
|
|
|
html_header("Periodos");
|
|
?>
|
|
<main class="container-fluid px-4 my-4" id="app" v-cloak @vue:mounted="mounted" style="min-height: 70vh;"
|
|
v-scope="">
|
|
<div aria-live="polite" aria-atomic="true" style="position: relative">
|
|
<div style="position: fixed; bottom: 2%; right: 2%; z-index: 9999; min-width: 300px;">
|
|
|
|
<!-- Loop for messages -->
|
|
<div class="toast show shadow-sm mb-3 bg-white shadow-sm" role="alert" aria-live="assertive"
|
|
aria-atomic="true" v-for="(message, index) in messages"
|
|
@vue:mounted="$(`#toast-${message.timestamp.getTime()}`).toast({delay: 5000}).toast('show').on('hidden.bs.toast', () => messages.splice(index, 1))" " :key="
|
|
message.timestamp.getTime()" :id="`toast-${message.timestamp.getTime()}`">
|
|
<div class="toast-header" :class="`bg-primary text-white`">
|
|
<strong class="mr-auto text-uppercase text-center w-100 px-4">
|
|
<i
|
|
:class="`text-${message.type} fas fa-${message.type === 'danger' ? 'exclamation-triangle' : message.type === 'success' ? 'check-circle' : 'info-circle'} mr-2`"></i>
|
|
{{ message.title }}
|
|
</strong>
|
|
<small class="text-light">{{ message.timestamp.toLocaleString() }}</small>
|
|
<button type="button" class="ml-2 mb-1 close text-light" aria-label="Close"
|
|
@click="$(`#toast-${message.timestamp.getTime()}`).toast('hide')">
|
|
<span aria-hidden="true">
|
|
<i class="fas fa-times"></i>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="toast-body">
|
|
{{ message.text }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="d-flex flex-wrap flex-row-reverse align-items-center mb-3">
|
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createPeriodoModal">
|
|
<div class="ing-mas"></div>
|
|
Crear periodo
|
|
</button>
|
|
</div>
|
|
<div v-if="periodos.length">
|
|
<table class="table table-sm table-hover table-striped table-bordered">
|
|
<thead class="thead-dark">
|
|
<tr class="text-center text-uppercase">
|
|
<th scope="col" class="align-middle" style="width: 8%;">SGU</th>
|
|
<th scope="col" class="align-middle" style="width: 7%;">Clave</th>
|
|
<th scope="col" class="align-middle" style="width: 25%;">Nombre</th>
|
|
<th scope="col" class="align-middle" style="width: 20%;">Nivel</th>
|
|
<th scope="col" class="align-middle" style="width: 15%;">Fecha de inicio</th>
|
|
<th scope="col" class="align-middle" style="width: 15%;">Fecha de fin</th>
|
|
<th scope="col" class="align-middle" style="width: 10%;">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(periodo, index) in periodos" :key="periodo.periodo_id">
|
|
<td class="text-center align-middle">
|
|
{{ periodo.id_periodo_sgu }}
|
|
</td>
|
|
<td class="text-center align-middle">
|
|
{{ periodo.periodo_clave }}
|
|
</td>
|
|
<td class="align-middle">
|
|
<input type="text" name="periodo_nombre" id="" v-model="periodo.periodo_nombre" class="form-control"
|
|
required>
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<div class="dropdown">
|
|
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
|
|
id="nivelDropdown" data-toggle="dropdown" aria-haspopup="true"
|
|
aria-expanded="false">
|
|
{{ periodo.nivel }}
|
|
</button>
|
|
<div class="dropdown-menu dropdown-menu" aria-labelledby="nivelDropdown">
|
|
<a class="dropdown-item" v-for="nivel in niveles" :key="nivel.nivel_id"
|
|
href="#/" @vue:mounted="$('.dropdown-toggle').dropdown()"
|
|
@click="changeNivel(periodo, nivel.nivel_id)"
|
|
:class="{'active': nivel.nivel_id === periodo.nivel_id}">{{nivel.nivel_nombre}}</a>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="align-middle">
|
|
<input type="date" class="form-control" v-model="periodo.periodo_fecha_inicio" required
|
|
:max="periodo.periodo_fecha_fin"
|
|
@change="changeFechaInicio(periodo, periodo.periodo_fecha_inicio)">
|
|
</td>
|
|
<td class="align-middle">
|
|
<input type="date" class="form-control" v-model="periodo.periodo_fecha_fin" required
|
|
:min="periodo.periodo_fecha_inicio"
|
|
@change="changeFechaFin(periodo, periodo.periodo_fecha_fin)">
|
|
</td>
|
|
<td class="align-middle text-center">
|
|
<button type="button" class="btn btn-outline-primary" @click="updatePeriodo(periodo)"
|
|
:disabled="[periodo.id_periodo_sgu, periodo.periodo_clave, periodo.periodo_nombre].some(value => !value)">
|
|
<i class="ing-guardar"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-danger" @click="deletePeriodo(periodo)">
|
|
<i class="ing-basura"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="alert alert-info" role="alert" v-else>
|
|
No hay periodos registrados
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal to create periodo -->
|
|
<div class="modal fade" id="createPeriodoModal" tabindex="-1" role="dialog"
|
|
aria-labelledby="createPeriodoModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content"
|
|
v-scope="{newPeriodo: { periodo_nombre: null, nivel_id: '', periodo_fecha_inicio: null, periodo_fecha_fin: null, id_periodo_sgu: null, periodo_clave: null }}">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="createPeriodoModalLabel">Crear periodo</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- Form to create periodo -->
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="periodo_nombre">Nombre del periodo</label>
|
|
<input type="text" class="form-control" id="periodo_nombre" required
|
|
v-model="newPeriodo.periodo_nombre">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="nivel_id">Nivel</label>
|
|
<select class="form-control" id="nivel_id" required v-model="newPeriodo.nivel_id">
|
|
<option value="" selected disabled>Selecciona un nivel</option>
|
|
<option v-for="nivel in niveles" :key="nivel.nivel_id" :value="nivel.nivel_id">
|
|
{{ nivel.nivel_nombre }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="periodo_fecha_inicio">Fecha de inicio</label>
|
|
<input type="date" class="form-control" id="periodo_fecha_inicio" required
|
|
v-model="newPeriodo.periodo_fecha_inicio" :max="newPeriodo.periodo_fecha_fin">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="periodo_fecha_fin">Fecha de fin</label>
|
|
<input type="date" class="form-control" id="periodo_fecha_fin" required
|
|
v-model="newPeriodo.periodo_fecha_fin" :min="newPeriodo.periodo_fecha_inicio">
|
|
</div>
|
|
<!-- Newly added fields -->
|
|
<div class="form-group">
|
|
<label for="id_periodo_sgu">ID Periodo SGU</label>
|
|
<input type="text" class="form-control" id="id_periodo_sgu" required
|
|
v-model="newPeriodo.id_periodo_sgu" inputmode="numeric" pattern="[0-9]*" min="0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="periodo_id">Periodo Clave</label>
|
|
<input type="text" class="form-control" id="periodo_clave" required
|
|
v-model="newPeriodo.periodo_clave" inputmode="numeric" pattern="[0-9]*" min="0">
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-outline-danger" data-dismiss="modal"
|
|
@click="Object.keys(newPeriodo).forEach(key => newPeriodo[key] = null); newPeriodo.nivel_id = ''">Cerrar</button>
|
|
<button type="button" class="btn btn-primary" @click="createPeriodo(newPeriodo)">Crear
|
|
periodo</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<?
|
|
include "import/html_footer.php"; ?>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
|
|
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
|
|
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
|
|
crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
|
|
integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
|
|
crossorigin="anonymous"></script>
|
|
<script src="js/periodos.js?<?= rand(0, 2) ?>" type="module"></script>
|
|
<script src="js/scrollables.js"></script>
|
|
</body>
|
|
|
|
</html>
|