Initial Commit
This commit is contained in:
Cloud User
211
periodos.php
Normal file
211
periodos.php
Normal file
@@ -0,0 +1,211 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user