PAAD/paad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update code with changes from git diff

Browse Source
This commit is contained in:
Alejandro Rosales
2023-11-10 18:15:14 +00:00
parent 2e00fbec20
commit 2173869717
33 changed files with 7013 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
periodos.php
View File

@@ -8,15 +8,11 @@
<?php
include 'import/html_css_files.php';
?>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.0/dist/trix.css">
<style>
[v-cloak] {
display: none;
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</head>
<body>
@@ -25,182 +21,178 @@
include "import/html_header.php";
global $user;
html_header("Periodos", "Sistema de gestión de checador");
html_header("Periodos");
?>
<main class="container-fluid px-4 my-4" id="app" v-cloak @vue:mounted="mounted" style="min-height: 70vh;">
<section class="row mt-4">
<div class="col-12 position-relative">
<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"
style="position: fixed; top: 15%; right: 1%; max-width: 300px;" role="alert" aria-live="assertive"
aria-atomic="true"
@vue:mounted="$('.toast').toast({delay: 5000}).toast('show').on('hidden.bs.toast', () => { message.text = '' })"
v-if="message.text">
<div class="toast-header">
<strong class="mr-auto text-primary text-uppercase text-center w-100 px-4">
<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-muted">{{ message.timestamp }}</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"
@click="message.text = ''">
<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">
<div :class="message.type == 'success' ? 'text-success' : 'text-danger'"><i
:class="message.type == 'success' ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
{{ message.text }}
</div>
{{ message.text }}
</div>
</div>
</div>
</section>
</div>
<div class="container">
<div class="d-flex flex-wrap justify-content-around">
<div class="accordion col-8 mb-4" id="puestos"
v-scope="{selected_carrera_id: -1, current_materia: null, current_encargado: null}"
v-if="puestos.length">
<div class="card" v-for="(puesto, index) in puestos" :key="puesto.puesto_id">
<div class="card-header bg-primary" :id="`puesto-${puesto.nombre}`">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left text-light" type="button"
data-toggle="collapse" :data-target="`#puesto-${puesto.puesto_id}`" aria-expanded="true"
:aria-controls="`puesto-${puesto.puesto_id}`">
{{puesto.nombre}}
<button type="button" class="btn btn-outline-danger float-right"
data-target="#eliminar-puesto" data-toggle="modal" @click="to_delete = puesto">
<span class="icono ing-basura"></span>
<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>
</h2>
</div>
<div :id="`puesto-${puesto.puesto_id}`" class="collapse" :class="{'show': index == 0}"
:aria-labelledby="`puesto-${puesto.nombre}`" data-parent="#puestos">
<div class="card-body">
<!-- Encargado -->
<div class="form-row justify-content-around align-items-center mb-2">
<label :for="`encargado-${puesto.puesto_id}`" class="col-3">
Encargado del área
</label>
<div id="encargados" class="datalist datalist-select mb-1 col-9">
<div class="datalist-input" v-if="puesto.encargado">
({{puesto.encargado.usuario_clave}}) {{ puesto.encargado.usuario_nombre }}
</div>
<div class="datalist-input" v-else>
Selecciona un encargado
</div>
<span class="icono ing-buscar"></span>
<ul style="display:none">
<li class="datalist-option" v-for="usuario in usuarios"
:key="usuario.usuario_id" :data-id="usuario.usuario_id"
style=" white-space: nowrap;" @click="puesto.encargado = usuario"
:class="{'selected': puesto.encargado?.usuario_id == usuario.usuario_id}">
(<small> {{usuario.usuario_clave}} </small>) {{ usuario.usuario_nombre }}
</li>
</ul>
<input type="hidden" id="encargado_id" name="id">
</div>
</div>
<hr>
<div class="form-row justify-content-around align-items-center mb-2"
v-show="carreras.length">
<label :for="`carrera-${puesto.puesto_id}`" class="col-3">
Carrera
</label>
<div id="dlCarreras" class="datalist datalist-select mb-1 col-9">
<div class="datalist-input">
Selecciona una carrera
</div>
<span class="icono ing-buscar"></span>
<ul style="display:none">
<li class="datalist-option" data-id="0" @click="selected_carrera_id = 0">
Todas las carreras
</li>
<li class="datalist-option" v-for="carrera in carreras"
:key="carrera.carrera_id" :data-id="carrera.carrera_id"
style=" white-space: nowrap;"
@click="selected_carrera_id = carrera.carrera_id">
(<small> {{carrera.clave_carrera}} </small>) {{ carrera.carrera_nombre }}
</li>
</ul>
<input type="hidden" id="carrera_id" name="id">
</div>
</div>
<div class="form-row justify-content-around align-items-center"
v-scope="{to_add_materia: null}">
<label :for="`materias-${puesto.puesto_id}`" class="col-3">
Materias
</label>
<input name="materia" placeholder="Seleccione una materia" list="datalist-materias"
class="form-control col-9 " v-model="current_materia" @input="to_add_materia = materias.find(m => current_materia == `${m.clave_materia} - ${m.materia_nombre}`);
if (to_add_materia) {
if (puesto.materias.find(p => p.materia_id == to_add_materia.materia_id)) {
console.log('La materia ya está asignada');
current_materia = null;
return;
}
puesto.materias.push(to_add_materia);
materias.splice(materias.indexOf(to_add_materia), 1);
current_materia = null;
}" :disabled="selected_carrera_id == -1" v-model="current_materia"
:id="`materias-${puesto.puesto_id}`" autocomplete="off">
</div>
<datalist id="datalist-materias">
<option
v-for="materia in materias.filter(m => selected_carrera_id == 0 || m.carrera_id == selected_carrera_id).filter(m => !puesto.materias.find(p => p.materia_id == m.materia_id))"
:value="`${materia.clave_materia} - ${materia.materia_nombre}`">
</datalist>
<hr>
<fieldset class="container d-flex flex-column justify-content-center align-items-center">
<legend>Materias Asignadas <span
class="badge badge-secondary">{{puesto.materias.length}}</span></legend>
<ul class="list-group overflow-auto col-10" v-if="puesto.materias.length"
style="max-height: 200px; overflow-y: auto;">
<li class="list-group-item list-group-item-action"
v-for="materia in puesto.materias" :key="materia.materia_id"
@click="puesto.materias.splice(puesto.materias.indexOf(materia), 1); materias.push(materia)"
style="cursor: pointer;">
<div class="d-flex justify-content-center">
<div class="col-2 text-center">
<span class="icono ing-borrar text-danger"></span>
</div>
<div class="col-10 text-left">
{{materia.clave_materia}} - {{materia.materia_nombre}}
</div>
</div>
</li>
</ul>
<div class="alert alert-light" role="alert" v-else>
No hay materias asignadas
</div>
</fieldset>
</div>
<div class="card-footer text-muted">
<!-- scroll to top -->
<button type="button" class="btn btn-outline-primary btn-lg btn-block"
@click="actualizarPuesto(puesto.puesto_id, puesto.materias, puesto.encargado?.usuario_id)"
onclick="window.scrollTo(0, 0);">
{{ puesto.encargado ? 'Guardar cambios' : 'Guardar sin encargado' }}
<button type="button" class="btn btn-outline-danger" @click="deletePeriodo(periodo)">
<i class="ing-basura"></i>
</button>
</div>
</div>
</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">&times;</span>
</button>
</div>
</div>
<div v-else>
<div class="alert alert-dark" role="alert">
No hay puestos registrados
<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"
@@ -212,7 +204,6 @@
<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/datalist.js"></script>
<script src="js/periodos.js?<?= rand(0, 2) ?>" type="module"></script>
<script src="js/scrollables.js"></script>
</body>