|
@@ -0,0 +1,1608 @@
|
|
|
+ <?php
|
|
|
+ require_once 'class/c_login.php';
|
|
|
+ if (!isset($_SESSION['user']))
|
|
|
+ die(header('Location: index.php'));
|
|
|
+
|
|
|
+ $user = unserialize($_SESSION['user']);
|
|
|
+ $user->access();
|
|
|
+ if (!$user->admin && in_array($user->acceso, ['n']))
|
|
|
+ die(header('Location: main.php?error=1'));
|
|
|
+
|
|
|
+ $user->print_to_log('Consultar horario');
|
|
|
+
|
|
|
+ $write = $user->admin || in_array($user->acceso, ['w']);
|
|
|
+ // var_dump($user);
|
|
|
+ ?>
|
|
|
+ <!DOCTYPE html>
|
|
|
+ <html lang="en">
|
|
|
+
|
|
|
+ <head>
|
|
|
+ <title>Consultar horario | <?= $user->facultad['facultad'] ?? 'General' ?></title>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta http-equiv="content-type" content="text/plain; charset=UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
+ <?php include_once "import/html_css_files.php"; ?>
|
|
|
+ </head>
|
|
|
+ <!-- -->
|
|
|
+
|
|
|
+ <body style="display: block;">
|
|
|
+ <?php
|
|
|
+ include('include/constantes.php');
|
|
|
+ include("import/html_header.php");
|
|
|
+ html_header("Consultar horario", "Sistema de gestión de checador");
|
|
|
+ ?>
|
|
|
+ <?= "<!-- $user -->" ?>
|
|
|
+ <main class="container content marco content-margin" id="local-app">
|
|
|
+ <section id="message"></section>
|
|
|
+ <?php require('import/periodo.php') ?>
|
|
|
+
|
|
|
+ <!-- Nuevo horario -->
|
|
|
+ <form>
|
|
|
+ <div class="form-group">
|
|
|
+ <div class="form-box">
|
|
|
+ <?php
|
|
|
+ #$carreras = query("SELECT * FROM FS_CARRERA WHERE FACULTAD = :fac AND PERIODO = COALESCE(:per, PERIODO) ORDER BY CARRERA", [":fac" => $user->facultad['facultad_id'], ":per" => $user->periodo], single: false);
|
|
|
+ // repliaction of the query in the database with database class
|
|
|
+ $nivel = $db->where('id', $user->periodo)->getOne('fs_periodo');
|
|
|
+ $carreras = $db
|
|
|
+ ->orderBy('carrera')
|
|
|
+ ->where('facultad', $nivel['facultad_id'])
|
|
|
+ ->where('nivel', $nivel['nivel_id'])
|
|
|
+ ->get('fs_carrera', 100, 'id, carrera');
|
|
|
+
|
|
|
+ ?>
|
|
|
+ <div class="form-group row">
|
|
|
+ <label for="filter_carrera" class="col-4 col-form-label">Carrera</label>
|
|
|
+ <div class="col-6 ">
|
|
|
+ <div id="dlcarrera" class="datalist datalist-select mb-1 w-100">
|
|
|
+ <div class="datalist-input">Seleccionar carrera</div>
|
|
|
+ <span class="ing-buscar icono"></span>
|
|
|
+ <ul style="display:none">
|
|
|
+ <?php
|
|
|
+ foreach ($carreras as $carrera) {
|
|
|
+ ?>
|
|
|
+ <li data-id="<?= $carrera['id'] ?>">
|
|
|
+ <?= $carrera['carrera'] ?>
|
|
|
+ </li>
|
|
|
+ <?php
|
|
|
+ }
|
|
|
+ ?>
|
|
|
+ </ul>
|
|
|
+ <input type="hidden" id="filter_carrera" name="carrera" value="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Grupo -->
|
|
|
+
|
|
|
+ <div class="form-group row">
|
|
|
+ <label for="filter_grupo" class="col-4 col-form-label">Grupo</label>
|
|
|
+ <div class="col-6 ">
|
|
|
+ <div id="dlgrupo" class="datalist datalist-select mb-1 w-100">
|
|
|
+ <div class="datalist-input">Seleccionar grupo</div>
|
|
|
+ <span class="ing-buscar icono"></span>
|
|
|
+ <ul style="display:none">
|
|
|
+ </ul>
|
|
|
+ <input type="hidden" id="filter_grupo" name="grupo" value="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group mt-4 row justify-content-center">
|
|
|
+ <?php if ($write) { ?>
|
|
|
+ <button type="button" id="nuevo" class="btn btn-outline-primary ml-4 d-none" title="Nuevo horario" data-toggle="modal" data-target="#modal-editar">
|
|
|
+ <span class="ing-mas ing-fw"></span> Nuevo
|
|
|
+ </button>
|
|
|
+ <?php } ?>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </form>
|
|
|
+ <!-- Horario is a (table with one a cell) within a table
|
|
|
+ 7:15 - 8:45, 8:45 - 10:15, 10:30 - 12:00, 12:00 - 13:30
|
|
|
+ de lunes a viernes, a excepción de que tenga sábado
|
|
|
+ -->
|
|
|
+ <div id="btn-excel-horario" class="mb-2 float-right hidden">
|
|
|
+ <button class="btn btn-outline-secondary " title="Exportar a Excel">
|
|
|
+ <span class="ing-descarga ing-fw"></span> Exportar a Excel
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <!-- Table responsive -->
|
|
|
+ <div class="table-responsive">
|
|
|
+ <table class="table table-bordered table-sm table-responsive-sm" id="table-horario">
|
|
|
+ <thead class="thead-dark">
|
|
|
+ <tr id="headers">
|
|
|
+ <th scope="col" class="text-center">Hora</th>
|
|
|
+ <th scope="col" class="text-center">Lunes</th>
|
|
|
+ <th scope="col" class="text-center">Martes</th>
|
|
|
+ <th scope="col" class="text-center">Miércoles</th>
|
|
|
+ <th scope="col" class="text-center">Jueves</th>
|
|
|
+ <th scope="col" class="text-center">Viernes</th>
|
|
|
+ <th scope="col" class="text-center">Sábado</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="horario"></tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="modal fade" id="modal-editar" tabindex="-1" aria-labelledby="modal-editar" aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
|
|
+ <div class="modal-dialog modal-dialog-centered modal-lg">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h5 class="col-12 modal-title text-center">Horario
|
|
|
+ <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
|
+ <span aria-hidden="true">×</span>
|
|
|
+ </button>
|
|
|
+ </h5>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <section id="message_editar"></section>
|
|
|
+
|
|
|
+ <!-- Hora inicio CLOCKPICKER -->
|
|
|
+ <div class="form-box">
|
|
|
+ <div class="form-group row">
|
|
|
+ <label for="dli-grupo" class="col-4 col-form-label">Grupo</label>
|
|
|
+ <div class="col-6">
|
|
|
+ <div id="grupoModal" class="datalist datalist-select mb-1 w-100">
|
|
|
+ <div class="datalist-input text-center"></div>
|
|
|
+ <span class="ing-buscar icono"></span>
|
|
|
+ <ul style="display:none">
|
|
|
+ <li data-id="" class="text-center">Nuevo grupo</li>
|
|
|
+ </ul>
|
|
|
+ <input type="hidden" name="dli-grupo" id="dli-grupo" value="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-grupo row mb-3">
|
|
|
+ <div class="col-4"></div>
|
|
|
+ <div class="col-6">
|
|
|
+ <input type="text" id="grupo" name="grupo" value="" class="form-control" placeholder="Grupo" required="required" hidden>
|
|
|
+ <div class="invalid-feedback">
|
|
|
+ Por favor, ingrese un grupo.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group row">
|
|
|
+ <label for="materia" class="col-4 col-form-label">Materia</label>
|
|
|
+ <div class="col-6">
|
|
|
+ <input list="lista_materias" name="dlMateria" id="dlMateria" class="form-control text-center" placeholder="Materia" required="required">
|
|
|
+ <datalist id="lista_materias"></datalist>
|
|
|
+ <input type="hidden" id="materia" name="materia" value="">
|
|
|
+ <div class="invalid-feedback">
|
|
|
+ Por favor, seleccione una materia.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-group row">
|
|
|
+ <label for="editor_hora" class="col-4 col-form-label">Hora</label>
|
|
|
+ <div class="col-3">
|
|
|
+ <div id="dlhora" class="datalist datalist-select mb-1">
|
|
|
+ <div class="datalist-input text-center"></div>
|
|
|
+ <span class="ing-buscar icono"></span>
|
|
|
+ <ul style="display:none">
|
|
|
+ <?php foreach (range(7, 21) as $hora) { ?>
|
|
|
+ <li data-id='<?= $hora ?>'><?= str_pad($hora, 2, "0", STR_PAD_LEFT) ?></li>
|
|
|
+ <?php } ?>
|
|
|
+ </ul>
|
|
|
+ <input type="hidden" id="selector_horas" name="horas" value="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-3">
|
|
|
+ <div id="dlminuto" class="datalist datalist-select mb-1">
|
|
|
+ <div class="datalist-input text-center"></div>
|
|
|
+ <span class="ing-buscar icono"></span>
|
|
|
+ <ul style="display:none">
|
|
|
+ <?php foreach (range(0, 45, 15) as $minuto) { ?>
|
|
|
+ <li data-id='<?= $minuto ?>'><?= str_pad($minuto, 2, "0", STR_PAD_LEFT) ?></li>
|
|
|
+ <?php } ?>
|
|
|
+ </ul>
|
|
|
+ <input type="hidden" id="selector_minutos" name="minutos" value="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Día -->
|
|
|
+ <div class="form-group row">
|
|
|
+ <label for="editor_dia" class="col-4 col-form-label">Día</label>
|
|
|
+ <div class="col-6 ">
|
|
|
+ <div id="dldia" class="datalist datalist-select mb-1 w-100">
|
|
|
+ <div class="datalist-input">Seleccionar día</div>
|
|
|
+ <span class="ing-buscar icono"></span>
|
|
|
+ <ul style="display:none">
|
|
|
+ <li data-id="1">Lunes</li>
|
|
|
+ <li data-id="2">Martes</li>
|
|
|
+ <li data-id="3">Miércoles</li>
|
|
|
+ <li data-id="4">Jueves</li>
|
|
|
+ <li data-id="5">Viernes</li>
|
|
|
+ <li data-id="6">Sábado</li>
|
|
|
+ </ul>
|
|
|
+ <input type="hidden" id="editor_dia" name="dia" value="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Duración -->
|
|
|
+ <div class="form-group row">
|
|
|
+ <label for="editor_duración" class="col-4 col-form-label">Duración</label>
|
|
|
+ <div class="col-6 ">
|
|
|
+ <div id="dlduración" class="datalist datalist-select mb-1 w-100">
|
|
|
+ <div class="datalist-input">Seleccionar duración</div>
|
|
|
+ <span class="ing-buscar icono"></span>
|
|
|
+ <ul style="display:none">
|
|
|
+ <?php
|
|
|
+ $duraciones = $db->orderBy('duracion_bloques')->get("duracion");
|
|
|
+ foreach ($duraciones as $duración) {
|
|
|
+ $nombre = $duración['duracion_nombre'];
|
|
|
+ $id = $duración['duracion_id'];
|
|
|
+ $bloques = $duración['duracion_bloques'];
|
|
|
+ ?>
|
|
|
+ <li data-id="<?= $id; ?>" data-bloques="<?= $bloques; ?>"><?= $nombre; ?></li>
|
|
|
+ <?php
|
|
|
+ }
|
|
|
+ ?>
|
|
|
+ </ul>
|
|
|
+ <input type="hidden" id="editor_duración" name="duración" value="">
|
|
|
+ </div>
|
|
|
+ <div class="invalid-feedback">
|
|
|
+ La duración supera el límite (22:00).
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Profesor -->
|
|
|
+ <div class="form-group row">
|
|
|
+ <label for="editor_profesor" class="col-4 col-form-label">Profesor</label>
|
|
|
+ <div class="col-6">
|
|
|
+ <input list="lista_profesores" name="dlProfesor" id="dlProfesor" class="form-control" placeholder="Profesor" required="required">
|
|
|
+ <div class="valid-feedback">
|
|
|
+ Profesor encontrado
|
|
|
+ </div>
|
|
|
+ <div class="invalid-feedback">
|
|
|
+ Profesor no encontrado
|
|
|
+ </div>
|
|
|
+ <datalist id="lista_profesores">
|
|
|
+ <?php
|
|
|
+ $profesores = $db->where('facultad_id', $user->facultad['facultad_id'])->get("fs_profesor");
|
|
|
+ foreach ($profesores as $profesor) {
|
|
|
+ extract($profesor);
|
|
|
+ ?>
|
|
|
+ <option data-grado="<?= $grado ?>" data-clave="<?= $clave ?>" data-profesor="<?= $profesor ?>" data-id="<?= $id; ?>" value="<?= "$clave | $grado $profesor" ?>"></option>
|
|
|
+ <?php
|
|
|
+ }
|
|
|
+ ?>
|
|
|
+ </datalist>
|
|
|
+ <ul class="list-group" id="profesores"></ul>
|
|
|
+ <input type="hidden" id="editor_profesor" name="profesor" value="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Salón -->
|
|
|
+ <div class="form-group row">
|
|
|
+ <label for="editor_salón" class="col-4 col-form-label">Salón</label>
|
|
|
+ <div class="col-6">
|
|
|
+ <input type="text" class="form-control" id="editor_salón" name="salón" placeholder="Salón" maxlength="10" required="required">
|
|
|
+ <div class="invalid-feedback">
|
|
|
+ El salón no puede estar vacío.
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button data-id="" type="button" class="btn btn-primary" id="btn-guardar"><i class="ing-guardar ing"></i> Guardar</button>
|
|
|
+ <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancelar</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal" id="modal-borrar" tabindex="-1" aria-labelledby="modal-borrar" aria-hidden="true">
|
|
|
+ <div class="modal-dialog modal-dialog-centered modal-lg">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h5 class="col-12 modal-title text-center">Horario
|
|
|
+ <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
|
+ <span aria-hidden="true">×</span>
|
|
|
+ </button>
|
|
|
+ </h5>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body text-center">
|
|
|
+ <h5>¿Está seguro de eliminar el horario?</h5>
|
|
|
+
|
|
|
+ <div class="form-group mt-4 row justify-content-center" style="gap: 1rem;">
|
|
|
+ <button id="btn-borrar" type="button" class="btn btn-danger">
|
|
|
+ <i class="ing-borrar ing"></i>
|
|
|
+ Borrar
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="modal fade" id="modal-choose" tabindex="-1" aria-labelledby="modal-choose" aria-hidden="true">
|
|
|
+ <div class="modal-dialog modal-dialog-centered modal-lg">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h5 class="col-12 modal-title text-center">Seleccionar horarios en conflicto
|
|
|
+ <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
|
+ <span aria-hidden="true">×</span>
|
|
|
+ </button>
|
|
|
+ </h5>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12">
|
|
|
+ <div class="alert alert-danger" role="alert">
|
|
|
+ <h4 class="alert-heading">
|
|
|
+ <i class="ing-importante ing"></i>
|
|
|
+ ¡Atención!
|
|
|
+ </h4>
|
|
|
+ <p>Los siguientes horarios tienen conflicto con el horario que intenta guardar.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-12">
|
|
|
+ <div class="table-responsive">
|
|
|
+ <table class="table table-striped table-hover">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th scope="col">Hora</th>
|
|
|
+ <th scope="col">Materia</th>
|
|
|
+ <th scope="col">Profesores</th>
|
|
|
+ <th scope="col">Salón</th>
|
|
|
+
|
|
|
+ <?php if ($write == "true") { ?>
|
|
|
+ <th class="text-center" scope="col">Editar</th>
|
|
|
+ <th class="text-center" scope="col">Borrar</th>
|
|
|
+ <?php } ?>
|
|
|
+
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="conflictos">
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ </body>
|
|
|
+ <?php
|
|
|
+ require_once("import/html_footer.php");
|
|
|
+ ?>
|
|
|
+ <script src="js/scrollables.js"></script>
|
|
|
+
|
|
|
+ <script src="js/bootstrap/bootstrap.min.js"></script>
|
|
|
+ <!-- use the latest version -->
|
|
|
+ <script src="js/moment.js"></script>
|
|
|
+ <!-- <script src="js/datalist.js"></script> -->
|
|
|
+ <script type="module">
|
|
|
+ import {
|
|
|
+ triggerMessage
|
|
|
+ } from './module/messages.js';
|
|
|
+ var gHorarios = [];
|
|
|
+ var datalists = {
|
|
|
+ día: [document.querySelector('#dldia div'), document.querySelector('#dldia div').innerText],
|
|
|
+ duración: [document.querySelector('#dlduración div'), document.querySelector('#dlduración div').innerText],
|
|
|
+ }
|
|
|
+
|
|
|
+ /**@Auxiliary functions */
|
|
|
+ function listProfesor({
|
|
|
+ id,
|
|
|
+ grado,
|
|
|
+ profesor,
|
|
|
+ clave
|
|
|
+ }) {
|
|
|
+ const lista = document.getElementById("dlProfesor");
|
|
|
+ lista.innerHTML = "";
|
|
|
+ lista.classList.remove("is-invalid");
|
|
|
+ const li = document.createElement('li');
|
|
|
+ li.setAttribute('data-id', id);
|
|
|
+ li.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
|
|
|
+ li.innerHTML = `${clave} | ${grado ?? ''} ${profesor}`
|
|
|
+
|
|
|
+ const btn = document.createElement('button');
|
|
|
+ btn.setAttribute('type', 'button');
|
|
|
+ btn.classList.add('badge', 'badge-danger', 'badge-pill', 'border-0');
|
|
|
+ btn.onclick = _ => li.remove();
|
|
|
+
|
|
|
+ const i = document.createElement('i');
|
|
|
+ i.classList.add('ing-cancelar');
|
|
|
+ btn.appendChild(i);
|
|
|
+ li.appendChild(btn);
|
|
|
+
|
|
|
+ document.getElementById("profesores").appendChild(li);
|
|
|
+ }
|
|
|
+
|
|
|
+ function compareHours(hora1, hora2) {
|
|
|
+ // parseInt each hour and minute
|
|
|
+ const [h1, m1, ] = hora1.split(":").map(x => parseInt(x));
|
|
|
+ const [h2, m2, ] = hora2.split(":").map(x => parseInt(x));
|
|
|
+
|
|
|
+ if (h1 > h2)
|
|
|
+ return 1;
|
|
|
+ else if (h1 < h2)
|
|
|
+ return -1;
|
|
|
+ else if (m1 > m2)
|
|
|
+ return 1;
|
|
|
+ else if (m1 < m2)
|
|
|
+ return -1;
|
|
|
+ else
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ async function buscarGrupo() {
|
|
|
+ const carrera = document.querySelector("#filter_carrera").value;
|
|
|
+ const grupo = document.querySelector("#filter_grupo").value;
|
|
|
+
|
|
|
+ if (carrera == "" || grupo == "") {
|
|
|
+ triggerMessage("El nombre del grupo y la carrera son requeridos", "Faltan campos");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const formData = new FormData();
|
|
|
+
|
|
|
+ formData.append("carrera", carrera);
|
|
|
+ formData.append("grupo", grupo);
|
|
|
+ formData.append("periodo", document.querySelector("#periodo").value);
|
|
|
+ formData.append('facultad', '<?= $user->facultad['facultad_id'] ?>');
|
|
|
+
|
|
|
+ try {
|
|
|
+ gHorarios = [];
|
|
|
+ const {
|
|
|
+ status,
|
|
|
+ horario: horarios,
|
|
|
+ } = await fetch("action/action_horario.php", {
|
|
|
+ method: "POST",
|
|
|
+ body: formData
|
|
|
+ }).then(res => res.json());
|
|
|
+
|
|
|
+ if (status != "success") {
|
|
|
+ triggerMessage(response.message, "Error");
|
|
|
+ }
|
|
|
+ // show the table
|
|
|
+ table.style.display = "table";
|
|
|
+ document.querySelectorAll('.hidden').forEach(element => element.style.display = "block");
|
|
|
+ // clear the table
|
|
|
+ table.innerHTML = empty_table;
|
|
|
+
|
|
|
+ if (horarios.length == 0) {
|
|
|
+ window.location.reload();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // fill the table
|
|
|
+ gHorarios = horarios;
|
|
|
+
|
|
|
+ function conflicts(horario1, horario2) {
|
|
|
+ const {
|
|
|
+ hora: hora_inicio1,
|
|
|
+ hora_final: hora_final1,
|
|
|
+ dia: dia1,
|
|
|
+ } = horario1;
|
|
|
+
|
|
|
+ const {
|
|
|
+ hora: hora_inicio2,
|
|
|
+ hora_final: hora_final2,
|
|
|
+ dia: dia2,
|
|
|
+ } = horario2;
|
|
|
+
|
|
|
+
|
|
|
+ // if the days are different, there is no conflict
|
|
|
+ if (dia1 != dia2) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+
|
|
|
+ const compareInicios = compareHours(hora_inicio1, hora_inicio2);
|
|
|
+ const compareFinales = compareHours(hora_final1, hora_final2);
|
|
|
+ const compareInicioFinal = compareHours(hora_inicio1, hora_final2);
|
|
|
+ const compareFinalInicio = compareHours(hora_final1, hora_inicio2);
|
|
|
+
|
|
|
+ // if the horario is inside the other
|
|
|
+ if (compareInicios === 0 || compareFinales === 0)
|
|
|
+ return true
|
|
|
+ if (compareInicios === 1 && compareInicioFinal === -1)
|
|
|
+ return true
|
|
|
+ if (compareFinales === -1 && compareFinalInicio === 1)
|
|
|
+ return true
|
|
|
+
|
|
|
+ // if the horario is outside the other
|
|
|
+ if (compareInicios === -1 && compareFinales === 1)
|
|
|
+ return true
|
|
|
+
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ // remove the next 5 cells
|
|
|
+ function removeNextCells(horas, minutos, dia, cells = 5) {
|
|
|
+ [...Array(cells).keys()].map(i => i + 1).forEach(i => {
|
|
|
+ const minute = (minutos + i * 15)
|
|
|
+ const next_minute = (minute % 60).toString().padStart(2, "0");
|
|
|
+ const next_hour = (horas + Math.floor(minute / 60))
|
|
|
+
|
|
|
+ document.getElementById(`hora-${next_hour}:${next_minute}-${dia}`).remove()
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function newBlock(horario, edit = false) {
|
|
|
+ function move(horario, cells) {
|
|
|
+ const {
|
|
|
+ hora: hora_inicio,
|
|
|
+ dia,
|
|
|
+ } = horario;
|
|
|
+
|
|
|
+ const [horas, minutos] = hora_inicio.split(":").map(x => parseInt(x));
|
|
|
+
|
|
|
+ const cell = document.getElementById(`hora-${horas}:${minutos.toString().padStart(2, "0")}-${dia}`);
|
|
|
+
|
|
|
+ const {
|
|
|
+ top,
|
|
|
+ left
|
|
|
+ } = cell.getBoundingClientRect();
|
|
|
+
|
|
|
+ const block = document.getElementById(`block-${horario.id}`);
|
|
|
+
|
|
|
+ block.style.top = `${top}px`;
|
|
|
+ block.style.left = `${left}px`;
|
|
|
+
|
|
|
+ removeNextCells(horas, minutos, dia, cells);
|
|
|
+ }
|
|
|
+ const {
|
|
|
+ id,
|
|
|
+ materia,
|
|
|
+ salon,
|
|
|
+ profesores,
|
|
|
+ hora: hora_inicio,
|
|
|
+ dia,
|
|
|
+ bloques
|
|
|
+ } = horario;
|
|
|
+
|
|
|
+ const [horas, minutos] = hora_inicio.split(":").map(x => parseInt(x));
|
|
|
+ const hora = `${horas}:${minutos.toString().padStart(2, "0")}`;
|
|
|
+ horario.hora = hora;
|
|
|
+
|
|
|
+ const cell = document.getElementById(`hora-${hora}-${dia}`);
|
|
|
+
|
|
|
+
|
|
|
+ cell.dataset.ids = id;
|
|
|
+
|
|
|
+ const float_menu = /*html*/
|
|
|
+ `<div class="menu-flotante p-2" style="opacity: .7;" >
|
|
|
+ <a class="mx-2" href="#" data-toggle="modal" data-target="#modal-editar">
|
|
|
+ <i class="ing-editar ing"></i>
|
|
|
+ </a>
|
|
|
+ <a class="mx-2" href="#" data-toggle="modal" data-target="#modal-borrar">
|
|
|
+ <i class="ing-basura ing" > </i>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ `
|
|
|
+
|
|
|
+ cell.innerHTML = /*html*/ `
|
|
|
+ <div style="overflow-y: auto; overflow-x: hidden; height: 100%;" id="block-${id}" class="position-absolute w-100 h-100">
|
|
|
+ <small class="text-gray">${hora}</small>
|
|
|
+ <b class="title">${materia}</b> <br>
|
|
|
+ <br><span>Salón: </span>${salon} <br>
|
|
|
+ <small class="my-2">
|
|
|
+ ${profesores.map(({grado, profesor}) => /*html*/ ` <span class="ing ing-formacion mx-1"></span>${grado ?? ''} ${profesor}`).join("<br>")}
|
|
|
+ </small>
|
|
|
+ </div>
|
|
|
+ ${edit && float_menu}`
|
|
|
+
|
|
|
+ cell.classList.add("bloque-clase", "position-relative");
|
|
|
+ cell.rowSpan = bloques;
|
|
|
+ // draggable
|
|
|
+ cell.draggable = <?= $write ? "true" : "false" ?>;
|
|
|
+
|
|
|
+ bloques > 0 ? removeNextCells(horas, minutos, dia, bloques - 1) : null;
|
|
|
+ }
|
|
|
+
|
|
|
+ function newConflictBlock(horarios, edit = false) {
|
|
|
+ const first_horario = horarios[0];
|
|
|
+ const [horas, minutos] = first_horario.hora.split(":").map(x => parseInt(x));
|
|
|
+ const hora = `${horas}:${minutos.toString().padStart(2, "0")}`;
|
|
|
+ const ids = horarios.map(horario => horario.id);
|
|
|
+ const cell = document.getElementById(`hora-${hora}-${first_horario.dia}`);
|
|
|
+ if (cell == null) {
|
|
|
+ console.error(`Error: No se encontró la celda: hora-${hora}-${first_horario.dia}`);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ cell.dataset.ids = ids.join(",");
|
|
|
+
|
|
|
+ // replace the content of the cell
|
|
|
+ cell.innerHTML = /* HTML */ `
|
|
|
+ <small class='text-danger'>
|
|
|
+ ${hora}
|
|
|
+ </small>
|
|
|
+ <div class="d-flex justify-content-center align-items-center mt-4">
|
|
|
+ <div class="d-flex flex-column justify-content-center align-items-center">
|
|
|
+ <span class="ing ing-importante text-danger" style="font-size: 2rem;"></span>
|
|
|
+ <b class='text-danger'>
|
|
|
+ Empalme de ${ids.length} horarios
|
|
|
+ </b>
|
|
|
+ <hr>
|
|
|
+ <i class="text-danger"> Ver horarios …</i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+
|
|
|
+ // the text must be centered
|
|
|
+ // cell.style.backgroundColor = "#f6cfd6";
|
|
|
+ cell.classList.add("conflict", "bloque-clase");
|
|
|
+ // add cursor clickable role = "button"
|
|
|
+ cell.setAttribute("role", "button");
|
|
|
+
|
|
|
+ // add the event listener for the cell
|
|
|
+ cell.addEventListener("click", () => {
|
|
|
+ $("#modal-choose").modal("show");
|
|
|
+ const ids = cell.getAttribute("data-ids").split(",").map(x => parseInt(x));
|
|
|
+ const horarios = gHorarios.filter(horario => ids.includes(horario.id));
|
|
|
+ const tbody = document.querySelector("#modal-choose tbody");
|
|
|
+ tbody.innerHTML = "";
|
|
|
+ horarios.sort((a, b) => compareHours(a.hora, b.hora)).forEach(horario => {
|
|
|
+ const {
|
|
|
+ materia,
|
|
|
+ dia,
|
|
|
+ hora,
|
|
|
+ hora_final,
|
|
|
+ profesores,
|
|
|
+ salon,
|
|
|
+ id,
|
|
|
+ } = horario;
|
|
|
+
|
|
|
+ // remove the last 00 of the hour
|
|
|
+ const [horaFmt, hora_finalFmt] = [hora, hora_final].map(hora => hora.slice(0, -3))
|
|
|
+ const buttons = /* HTML */ `
|
|
|
+ <td class="text-center">
|
|
|
+ <button class="btn btn-sm btn-primary dismiss-editar" data-toggle="modal" data-target="#modal-editar">
|
|
|
+ <i class="ing-editar ing"></i>
|
|
|
+ </button>
|
|
|
+ </td>
|
|
|
+ <td class="text-center">
|
|
|
+ <button class="btn btn-sm btn-danger dismiss-editar" data-toggle="modal" data-target="#modal-borrar">
|
|
|
+ <i class="ing-basura ing"></i>
|
|
|
+ </button>
|
|
|
+ </td>`
|
|
|
+
|
|
|
+ tbody.innerHTML += /* HTML */ `
|
|
|
+ <tr data-ids="${id}">
|
|
|
+ <td><small>${horaFmt}-${hora_finalFmt}</small></td>
|
|
|
+ <td>${materia}</td>
|
|
|
+ <td>
|
|
|
+ ${profesores.map(({ grado, profesor }) => `${grado ?? ''} ${profesor}`).join(", ")}
|
|
|
+ </td>
|
|
|
+ <td>${salon}</td>
|
|
|
+ ${edit ? buttons : ""}
|
|
|
+ </tr>`;
|
|
|
+ });
|
|
|
+
|
|
|
+ document.querySelectorAll(".dismiss-editar").forEach(btn => {
|
|
|
+ btn.addEventListener("click", () => $("#modal-choose").modal("hide"));
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ // blocks is (firsthour - lasthour) / 15 minutes
|
|
|
+ // sum the duracion_bloques of each horario
|
|
|
+ function getDuration(hora_i, hora_f) {
|
|
|
+ const [horas_i, minutos_i] = hora_i.split(":").map(x => parseInt(x));
|
|
|
+ const [horas_f, minutos_f] = hora_f.split(":").map(x => parseInt(x));
|
|
|
+ const date_i = new Date(0, 0, 0, horas_i, minutos_i);
|
|
|
+ const date_f = new Date(0, 0, 0, horas_f, minutos_f);
|
|
|
+ const diff = date_f - date_i;
|
|
|
+ return diff / (1000 * 60 * 15);
|
|
|
+ }
|
|
|
+
|
|
|
+ const lastHorario = horarios[horarios.length - 1];
|
|
|
+ // remove the next cells
|
|
|
+ // get the max hora_final
|
|
|
+ const maxHoraFinal = horarios.reduce((max, horario) => {
|
|
|
+ const [horas, minutos] = horario.hora_final.split(":").map(x => parseInt(x));
|
|
|
+ const date = new Date(0, 0, 0, horas, minutos);
|
|
|
+ return date > max ? date : max;
|
|
|
+ }, new Date(0, 0, 0, 0, 0));
|
|
|
+
|
|
|
+ const blocks = getDuration(first_horario.hora, `${maxHoraFinal.getHours()}:${maxHoraFinal.getMinutes()}`);
|
|
|
+ cell.rowSpan = blocks
|
|
|
+ removeNextCells(horas, minutos, first_horario.dia, blocks - 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ const conflictBlocks = horarios.filter((horario, index, arrayHorario) =>
|
|
|
+ arrayHorario.filter((_, i) => i != index).some(horario2 =>
|
|
|
+ conflicts(horario, horario2)))
|
|
|
+ .sort((a, b) => compareHours(a.hora, b.hora));
|
|
|
+
|
|
|
+ const classes = horarios.filter(horario => !conflictBlocks.includes(horario));
|
|
|
+
|
|
|
+ const conflictBlocksPacked = []; // array of sets
|
|
|
+ conflictBlocks.forEach(horario => {
|
|
|
+ const setIndex = conflictBlocksPacked.findIndex(set => set.some(horario2 => conflicts(horario, horario2)));
|
|
|
+ if (setIndex === -1) {
|
|
|
+ conflictBlocksPacked.push([horario]);
|
|
|
+ } else {
|
|
|
+ conflictBlocksPacked[setIndex].push(horario);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ classes.forEach(horario =>
|
|
|
+ newBlock(horario, <?= $write ?>)
|
|
|
+ )
|
|
|
+
|
|
|
+ conflictBlocksPacked.forEach(horarios =>
|
|
|
+ newConflictBlock(horarios, <?= $write ?>)
|
|
|
+ )
|
|
|
+
|
|
|
+ // remove the elements that are not in the limits
|
|
|
+ let max_hour = Math.max(...horarios.map(horario => {
|
|
|
+ const lastMoment = moment(horario.hora, "HH:mm").add(horario.bloques * 15, "minutes");
|
|
|
+ const lastHour = moment(`${lastMoment.hours()}:00`, "HH:mm");
|
|
|
+ const hourInt = parseInt(lastMoment.format("HH"));
|
|
|
+
|
|
|
+ return lastMoment.isSame(lastHour) ? hourInt - 1 : hourInt;
|
|
|
+ }));
|
|
|
+
|
|
|
+ let min_hour = Math.min(...horarios.map(horario => parseInt(horario.hora.split(":")[0])));
|
|
|
+
|
|
|
+ document.querySelectorAll("tbody#horario tr").forEach(hora => {
|
|
|
+ const hora_id = parseInt(hora.id.split("-")[1].split(":")[0]);
|
|
|
+ (hora_id < min_hour || hora_id > max_hour) ? hora.remove(): null;
|
|
|
+ })
|
|
|
+
|
|
|
+ // if there is no sábado, remove the column
|
|
|
+ if (!horarios.some(horario => horario.dia == "sábado")) {
|
|
|
+ document.querySelectorAll("tbody#horario td").forEach(td => {
|
|
|
+ if (td.id.split("-")[2] == "sábado") {
|
|
|
+ td.remove();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // remove the header (the last)
|
|
|
+ document.querySelector("#headers").lastElementChild.remove();
|
|
|
+ }
|
|
|
+ // adjust width
|
|
|
+ const ths = document.querySelectorAll("tr#headers th");
|
|
|
+ ths.forEach((th, key) =>
|
|
|
+ th.style.width = (key == 0) ? "5%" : `${95 / (ths.length - 1)}%`
|
|
|
+ );
|
|
|
+
|
|
|
+ // search item animation
|
|
|
+ const menúFlontantes = document.querySelectorAll(".menu-flotante");
|
|
|
+ menúFlontantes.forEach((element) => {
|
|
|
+ element.classList.add("d-none");
|
|
|
+ element.parentElement.addEventListener("mouseover", () =>
|
|
|
+ element.classList.remove("d-none")
|
|
|
+ );
|
|
|
+ element.parentElement.addEventListener("mouseout", (e) =>
|
|
|
+ element.classList.add("d-none")
|
|
|
+ );
|
|
|
+ });
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ triggerMessage("Error al cargar el horario", "Error");
|
|
|
+ triggerMessage(error, "Error");
|
|
|
+ }
|
|
|
+
|
|
|
+ // droppables
|
|
|
+ // forall the .bloque-elements add the event listeners for drag and drop
|
|
|
+ <?php if ($write) : ?>
|
|
|
+ document.querySelectorAll(".bloque-clase").forEach(element => {
|
|
|
+ function dragStart() {
|
|
|
+ this.classList.add("dragging");
|
|
|
+ }
|
|
|
+
|
|
|
+ function dragEnd() {
|
|
|
+ this.classList.remove("dragging");
|
|
|
+ }
|
|
|
+
|
|
|
+ element.addEventListener("dragstart", dragStart);
|
|
|
+ element.addEventListener("dragend", dragEnd);
|
|
|
+ });
|
|
|
+
|
|
|
+ // forall the cells that are not .bloque-clase add the event listeners for drag and drop
|
|
|
+ document.querySelectorAll("td:not(.bloque-clase)").forEach(element => {
|
|
|
+ function dragOver(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ this.classList.add("dragging-over");
|
|
|
+ }
|
|
|
+
|
|
|
+ function dragLeave() {
|
|
|
+ this.classList.remove("dragging-over");
|
|
|
+ }
|
|
|
+
|
|
|
+ function drop() {
|
|
|
+ this.classList.remove("dragging-over");
|
|
|
+ const dragging = document.querySelector(".dragging");
|
|
|
+
|
|
|
+ const id = /* for data-ids */ dragging.getAttribute("data-ids");
|
|
|
+ const hora = /* for data-hora */ this.id.split("-")[1];
|
|
|
+ const días = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado"];
|
|
|
+ let día = /* for data-dia */ this.id.split("-")[2];
|
|
|
+ día = días.indexOf(día) + 1;
|
|
|
+
|
|
|
+ // rowspan
|
|
|
+ const bloques = parseInt(dragging.getAttribute("rowspan"));
|
|
|
+ const horaMoment = moment(hora, "HH:mm");
|
|
|
+ const horaFin = horaMoment.add(bloques * 15, "minutes");
|
|
|
+
|
|
|
+ const limit = moment('22:00', 'HH:mm');
|
|
|
+
|
|
|
+ if (horaFin.isAfter(limit)) {
|
|
|
+ triggerMessage("No se puede mover el bloque a esa hora", "Error");
|
|
|
+
|
|
|
+ // scroll to the top
|
|
|
+ window.scrollTo(0, 0);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // get the horario
|
|
|
+ // remove the horario
|
|
|
+ const bloque = document.querySelector(`.bloque-clase[data-ids="${id}"]`);
|
|
|
+
|
|
|
+ // remove all children
|
|
|
+ while (bloque.firstChild) {
|
|
|
+ bloque.removeChild(bloque.firstChild);
|
|
|
+ }
|
|
|
+
|
|
|
+ // prepend a loading child
|
|
|
+ const loading = `<div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
|
|
|
+ <span class="sr-only">Loading...</span>
|
|
|
+ </div>`;
|
|
|
+ bloque.insertAdjacentHTML("afterbegin", loading);
|
|
|
+ // add style vertical-align: middle
|
|
|
+ bloque.style.verticalAlign = "middle";
|
|
|
+ bloque.classList.add("text-center");
|
|
|
+ // remove draggable
|
|
|
+ bloque.removeAttribute("draggable");
|
|
|
+
|
|
|
+ moveHorario(id, día, hora);
|
|
|
+ }
|
|
|
+
|
|
|
+ element.addEventListener("dragover", dragOver);
|
|
|
+ element.addEventListener("dragleave", dragLeave);
|
|
|
+ element.addEventListener("drop", drop);
|
|
|
+ });
|
|
|
+ <?php endif; ?>
|
|
|
+ }
|
|
|
+ async function guardar(id) {
|
|
|
+ const btn = document.querySelector("#btn-guardar");
|
|
|
+ const clone = btn.cloneNode(true);
|
|
|
+
|
|
|
+ const data = {
|
|
|
+ dia: document.querySelector("#editor_dia"),
|
|
|
+ salon: document.querySelector("#editor_salón"),
|
|
|
+ //vprofesor: document.querySelector("#editor_profesor"),
|
|
|
+ duración: document.querySelector("#editor_duración")
|
|
|
+ };
|
|
|
+
|
|
|
+ const dia = data.dia.value;
|
|
|
+ const salon = data.salon.value;
|
|
|
+
|
|
|
+ if (salon == "") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const hora = document.querySelector("#selector_horas").value;
|
|
|
+ const minutos = document.querySelector("#selector_minutos").value;
|
|
|
+ const bloques = document.querySelector("#dlduración li.selected")?.getAttribute("data-bloques");
|
|
|
+
|
|
|
+ if (bloques == null) {
|
|
|
+ document.querySelector("#dlduración").classList.add("is-invalid");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const start = moment(`${hora}:${minutos}`, "HH:mm").add(bloques * 15, "minutes");
|
|
|
+ const end = moment("22:00", "HH:mm");
|
|
|
+
|
|
|
+ if (start.isAfter(end)) {
|
|
|
+ document.querySelector("#dlduración").classList.add("is-invalid");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const profesoresList = [...document.querySelectorAll("#profesores li")];
|
|
|
+
|
|
|
+ if (profesoresList.length == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ // const id = btn.getAttribute("data-id");
|
|
|
+ formData.append("id", id);
|
|
|
+ formData.append("hora", `${hora}:${minutos}`);
|
|
|
+ formData.append("día", dia);
|
|
|
+ formData.append("salón", salon);
|
|
|
+ const profesores = profesoresList.map(li => li.getAttribute("data-id"));
|
|
|
+ formData.append("duración", data.duración.value);
|
|
|
+ formData.append("profesores", profesores.join(","));
|
|
|
+
|
|
|
+ // loading btn
|
|
|
+ btn.innerHTML = 'Guardando...';
|
|
|
+ // disable btn
|
|
|
+ btn.disabled = true;
|
|
|
+
|
|
|
+ const response = await fetch("action/action_horario_update.php", {
|
|
|
+ method: "POST",
|
|
|
+ body: formData
|
|
|
+ }).then(res => res.json());
|
|
|
+
|
|
|
+ if (response.status == "success") {
|
|
|
+ triggerMessage("Horario actualizado", "Éxito", "success");
|
|
|
+ btn.innerHTML = '<i class="ing-aceptar ing"></i> Guardado';
|
|
|
+ btn.classList.add("btn-success");
|
|
|
+ btn.classList.remove("btn-primary");
|
|
|
+
|
|
|
+ // return to the initial state
|
|
|
+ setTimeout(() => {
|
|
|
+ buscarGrupo();
|
|
|
+ btn.replaceWith(clone);
|
|
|
+ $("#modal-editar").modal("hide");
|
|
|
+ }, 100);
|
|
|
+ } else {
|
|
|
+ triggerMessage(response.message, "Error");
|
|
|
+ btn.replaceWith(clone);
|
|
|
+
|
|
|
+ $("#modal-editar").modal("hide");
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ async function borrarHorario(id) {
|
|
|
+ const btn = document.querySelector("#btn-borrar");
|
|
|
+ const clone = btn.cloneNode(true);
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("id", id);
|
|
|
+
|
|
|
+ const response = await fetch("action/action_horario_delete.php", {
|
|
|
+ method: "POST",
|
|
|
+ body: formData
|
|
|
+ }).then(res => res.json());
|
|
|
+
|
|
|
+ if (response.status == "success") {
|
|
|
+ triggerMessage('Horario borrado', "Éxito", "success");
|
|
|
+ btn.innerHTML = '<i class="ing-aceptar ing"></i> Borrado';
|
|
|
+ btn.classList.add("btn-success");
|
|
|
+ btn.classList.remove("btn-danger");
|
|
|
+
|
|
|
+ // return to the initial state
|
|
|
+ setTimeout(() => {
|
|
|
+ buscarGrupo();
|
|
|
+ btn.replaceWith(clone);
|
|
|
+ $("#modal-borrar").modal("hide");
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ triggerMessage(response.message, "Error");
|
|
|
+ btn.replaceWith(clone);
|
|
|
+
|
|
|
+ $("#modal-borrar").modal("hide");
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function guardarHorario() {
|
|
|
+ let goBack = false;
|
|
|
+ const data = {
|
|
|
+ grupo: document.querySelector("#grupo"),
|
|
|
+ dia: document.querySelector("#editor_dia"),
|
|
|
+ salon: document.querySelector("#editor_salón"),
|
|
|
+ profesor: document.querySelector("#new_profesor"),
|
|
|
+ duración: document.querySelector("#editor_duración"),
|
|
|
+ materia: document.querySelector("#dlMateria")
|
|
|
+ };
|
|
|
+
|
|
|
+ const dia = data.dia.value;
|
|
|
+ const salon = data.salon.value;
|
|
|
+ const profesor = data.profesor.value;
|
|
|
+ const materia = data.materia.value;
|
|
|
+ const duración = data.duración.value;
|
|
|
+
|
|
|
+ if (duración == "") {
|
|
|
+ invalidDatalist("#new_duración");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (profesor == "") {
|
|
|
+ data.profesor.classList.add("is-invalid");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (salon == "") {
|
|
|
+ data.salon.classList.add("is-invalid");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (dia == "") {
|
|
|
+ invalidDatalist("#new_dia");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (materia == "") {
|
|
|
+ data.materia.classList.add("is-invalid");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ const hora = document.querySelector("#new_horas").value;
|
|
|
+ if (hora == "") {
|
|
|
+ invalidDatalist("#new_horas");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+ const minutos = document.querySelector("#new_minutos").value;
|
|
|
+ if (minutos == "") {
|
|
|
+ invalidDatalist("#new_minutos");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ const bloques = document.querySelector("#dlNewDuración li.selected")?.getAttribute("data-bloques");
|
|
|
+ const start = moment(`${hora}:${minutos}`, "HH:mm").add(bloques * 15, "minutes");
|
|
|
+ const end = moment("22:00", "HH:mm");
|
|
|
+
|
|
|
+ if (start.isAfter(end)) {
|
|
|
+ document.querySelector("#dlNewDuración").classList.add("is-invalid");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (goBack) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("grupo", document.querySelector("#filter_grupo").value);
|
|
|
+ formData.append("hora", `${hora}:${minutos}`);
|
|
|
+ formData.append("día", dia);
|
|
|
+ formData.append("salón", salon);
|
|
|
+ formData.append("profesor", profesor);
|
|
|
+ formData.append("duración", data.duración.value);
|
|
|
+ formData.append("periodo", "<?= $user->periodo ?>");
|
|
|
+ formData.append("materia", materia);
|
|
|
+ formData.append("facultad", "<?= $user->facultad['facultad_id'] ?>");
|
|
|
+
|
|
|
+
|
|
|
+ fetch("action/action_horario_create.php", {
|
|
|
+ method: "POST",
|
|
|
+ body: formData
|
|
|
+ }).then(res => res.json()).then(response => {
|
|
|
+ const carrera = document.querySelector("#dlcarrera li.selected")
|
|
|
+ // call it's click event
|
|
|
+ carrera?.click();
|
|
|
+ if (response.status == "success") {
|
|
|
+ triggerMessage("Horario guardado", "Éxito", "success");
|
|
|
+ btn.innerHTML = /* html */ `<i class="ing-aceptar ing"></i> Guardado`;
|
|
|
+ btn.classList.add("btn-success");
|
|
|
+ btn.classList.remove("btn-primary");
|
|
|
+
|
|
|
+ // return to the initial state
|
|
|
+ setTimeout(() => {
|
|
|
+ btn.classList.remove("btn-success");
|
|
|
+ btn.classList.add("btn-primary");
|
|
|
+
|
|
|
+
|
|
|
+ // this modal
|
|
|
+ $("#modal-nuevo").modal("hide");
|
|
|
+ const modalNuevo = document.querySelector("#modal-nuevo");
|
|
|
+ modalNuevo.querySelectorAll("input").forEach(input => {
|
|
|
+ input.value = "";
|
|
|
+ });
|
|
|
+
|
|
|
+ // reset the datalist
|
|
|
+ modalNuevo.querySelectorAll(".datalist").forEach(datalist => {
|
|
|
+ const cloneDatalist = modalNuevoClone.querySelector(`#${datalist.id}`).cloneNode(true);
|
|
|
+ // log
|
|
|
+ datalist.replaceWith(cloneDatalist);
|
|
|
+ });
|
|
|
+ // remove all is-valid and is-invalid
|
|
|
+ modalNuevo.querySelectorAll(".is-valid, .is-invalid").forEach(el => {
|
|
|
+ el.classList.remove("is-valid", "is-invalid");
|
|
|
+ });
|
|
|
+
|
|
|
+ }, 100);
|
|
|
+ } else {
|
|
|
+ triggerMessage(response.message, "Error");
|
|
|
+ $("#modal-nuevo").modal("hide");
|
|
|
+ }
|
|
|
+ }).then(() => {
|
|
|
+ buscarGrupo();
|
|
|
+ }).catch(err => {
|
|
|
+ triggerMessage(err, "Error");
|
|
|
+
|
|
|
+ $("#modal-nuevo").modal("hide");
|
|
|
+ });
|
|
|
+
|
|
|
+ // buscarGrupo();
|
|
|
+ }
|
|
|
+
|
|
|
+ function moveHorario(id, día, hora) {
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+
|
|
|
+ formData.append("id", id);
|
|
|
+ formData.append("hora", hora);
|
|
|
+ formData.append("día", día);
|
|
|
+
|
|
|
+ fetch("action/action_horario_update.php", {
|
|
|
+ method: "POST",
|
|
|
+ body: formData
|
|
|
+ }).then(res => res.json()).then(response => {
|
|
|
+ if (response.status == "success") {
|
|
|
+ triggerMessage("Horario movido", "Éxito", "success");
|
|
|
+ } else {
|
|
|
+ triggerMessage(response.message, "Error");
|
|
|
+ }
|
|
|
+ }).then(() => {
|
|
|
+ buscarGrupo();
|
|
|
+ }).catch(err => {
|
|
|
+ triggerMessage(err, "Error");
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function extractFromModal() {
|
|
|
+ // remove all is-valid and is-invalid
|
|
|
+ document.querySelectorAll(".is-valid, .is-invalid").forEach(el =>
|
|
|
+ el.classList.remove("is-valid", "is-invalid")
|
|
|
+ );
|
|
|
+ let goBack = false;
|
|
|
+ const modalNuevo = document.querySelector("#modal-nuevo");
|
|
|
+ const data = {
|
|
|
+ dia: document.querySelector("#editor_dia"),
|
|
|
+ salon: document.querySelector("#editor_salón"),
|
|
|
+ duración: document.querySelector("#editor_duración")
|
|
|
+ };
|
|
|
+
|
|
|
+ const dia = data.dia.value;
|
|
|
+ const salon = data.salon.value;
|
|
|
+ const hora = document.querySelector("#selector_horas").value;
|
|
|
+ const minutos = document.querySelector("#selector_minutos").value;
|
|
|
+ const bloques = document.querySelector("#dlduración li.selected")?.getAttribute("data-bloques");
|
|
|
+ const materia = document.querySelector("#dlMateria");
|
|
|
+ const grupo = document.querySelector("input#grupo");
|
|
|
+
|
|
|
+ const start = moment(`${hora}:${minutos}`, "HH:mm").add(bloques * 15, "minutes");
|
|
|
+ const end = moment("22:00", "HH:mm");
|
|
|
+ const profesoresList = [...document.querySelectorAll("#profesores li")];
|
|
|
+
|
|
|
+ if (data.duración.value == "") {
|
|
|
+ invalidDatalist("#editor_duración");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (dia == "") {
|
|
|
+ invalidDatalist("#editor_dia");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (start.isAfter(end)) {
|
|
|
+ document.querySelector("#dlduración").classList.add("is-invalid");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (salon == "") {
|
|
|
+ data.salon.classList.add("is-invalid");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (profesoresList.length == 0) {
|
|
|
+ document.querySelector("#dlProfesor").classList.add("is-invalid");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (materia.value == "" || materia.classList.contains("is-invalid")) {
|
|
|
+ document.querySelector("#dlMateria").classList.add("is-invalid");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (grupo.value == "") {
|
|
|
+ grupo.classList.add("is-invalid");
|
|
|
+ goBack = true;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ if (goBack) return null;
|
|
|
+
|
|
|
+ const materia_id = document.querySelector(`#lista_materias option[value="${materia.value}"]`).getAttribute("data-id");
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("hora", `${hora}:${minutos}`);
|
|
|
+ formData.append("día", dia);
|
|
|
+ formData.append("salón", salon);
|
|
|
+ const profesores = profesoresList.map(li => li.getAttribute("data-id"));
|
|
|
+ formData.append("duración", data.duración.value);
|
|
|
+ formData.append("profesores", profesores.join(","));
|
|
|
+ formData.append("materia", materia_id);
|
|
|
+
|
|
|
+ return formData;
|
|
|
+ }
|
|
|
+
|
|
|
+ function resetFormModal() {
|
|
|
+ const modalNuevo = document.querySelector("#modal-editar");
|
|
|
+ modalNuevo.querySelectorAll("input").forEach(input => input.value = "");
|
|
|
+
|
|
|
+ // remove all is-valid and is-invalid
|
|
|
+ modalNuevo.querySelectorAll(".is-valid, .is-invalid").forEach(el => el.classList.remove("is-valid", "is-invalid"));
|
|
|
+ modalNuevo.querySelectorAll(".datalist-invalid").forEach(el => el.classList.remove("datalist-invalid"));
|
|
|
+ modalNuevo.querySelector("#profesores").innerHTML = "";
|
|
|
+
|
|
|
+ // reset the datalist
|
|
|
+ for (var key in datalists)
|
|
|
+ datalists[key][0].innerText = datalists[key][1];
|
|
|
+ // remove disabled attribute
|
|
|
+ modalNuevo.querySelectorAll("[disabled]").forEach(el => el.removeAttribute("disabled"));
|
|
|
+ // remove bg-info
|
|
|
+ modalNuevo.querySelectorAll(".bg-info").forEach(el => el.classList.remove("bg-info"));
|
|
|
+ }
|
|
|
+
|
|
|
+ function insertHorario(horario) {
|
|
|
+ const fetchOptions = {
|
|
|
+ method: "POST",
|
|
|
+ body: horario
|
|
|
+ };
|
|
|
+
|
|
|
+ return fetch("action/action_horario_create.php", fetchOptions).then(res => res.json()).then(response => {
|
|
|
+ if (response.status == "success") {
|
|
|
+ triggerMessage("Horario insertado", "Éxito", "success");
|
|
|
+ } else {
|
|
|
+ triggerMessage(response.message, "Error");
|
|
|
+ }
|
|
|
+ }).then(() => {
|
|
|
+ // if the table isn't displayed, just show a message
|
|
|
+ if (table.style.display == "none") {
|
|
|
+ triggerMessage("Horario insertado", "Éxito", "success");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ buscarGrupo();
|
|
|
+ }).catch(err => {
|
|
|
+ triggerMessage(err, "Error");
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // initial state
|
|
|
+ {
|
|
|
+ // fill the table with empty cells
|
|
|
+ [...Array(16).keys()].map(x => x + 7).forEach(hora => {
|
|
|
+ // add 7 rows for each hour
|
|
|
+ [0, 15, 30, 45].map(minute => minute.toString().padStart(2, '0')).forEach(minute => {
|
|
|
+ const tr = document.createElement("tr");
|
|
|
+ tr.id = `hora-${hora}:${minute}`;
|
|
|
+ tr.classList.add(hora > 13 ? "tarde" : "mañana");
|
|
|
+ if (minute == 0) {
|
|
|
+ const th = document.createElement("th");
|
|
|
+ th.classList.add("text-center");
|
|
|
+ th.scope = "row";
|
|
|
+ th.rowSpan = 4;
|
|
|
+ th.innerText = `${hora}:00`;
|
|
|
+ th.style.verticalAlign = "middle";
|
|
|
+ tr.appendChild(th);
|
|
|
+ }
|
|
|
+
|
|
|
+ ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado"].forEach(día => {
|
|
|
+ const td = document.createElement("td");
|
|
|
+ td.id = `hora-${hora}:${minute}-${día}`;
|
|
|
+ tr.appendChild(td);
|
|
|
+ });
|
|
|
+ document.querySelector("tbody#horario").appendChild(tr);
|
|
|
+ });
|
|
|
+ })
|
|
|
+
|
|
|
+ // add an inital height to the table cells
|
|
|
+ // query selector All tds and ths inside the tbody#horario
|
|
|
+ // previous query selector: "tbody#horario td, tbody#horario tr"
|
|
|
+ document.querySelectorAll("tbody#horario td, tbody#horario tr").forEach(element => element.style.height = "2.5rem");
|
|
|
+ document.getElementById('dlProfesor').addEventListener('input', function(e) {
|
|
|
+ var input = document.getElementById('dlProfesor');
|
|
|
+ var value = input.value;
|
|
|
+ var option = document.querySelector(`option[value="${value}"]`);
|
|
|
+
|
|
|
+ if (value == "") {
|
|
|
+ input.classList.remove("is-invalid");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!option) {
|
|
|
+ document.getElementById('editor_profesor').value = "";
|
|
|
+ // remove is valid class
|
|
|
+ input.classList.remove("is-valid");
|
|
|
+ // add is invalid class
|
|
|
+ input.classList.add("is-invalid");
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ var id = option.getAttribute('data-id');
|
|
|
+ if (!document.querySelector(`li[data-id="${id}"]`))
|
|
|
+ listProfesor({
|
|
|
+ id: id,
|
|
|
+ grado: option.getAttribute('data-grado'),
|
|
|
+ profesor: option.getAttribute('data-profesor'),
|
|
|
+ clave: option.getAttribute('data-clave')
|
|
|
+ });
|
|
|
+ e.target.value = "";
|
|
|
+ });
|
|
|
+ document.getElementById('dlMateria').addEventListener('input', function(e) {
|
|
|
+ var input = document.getElementById('dlMateria');
|
|
|
+ var value = input.value;
|
|
|
+ var option = document.querySelector(`option[value="${value}"]`);
|
|
|
+
|
|
|
+ if (value == "") {
|
|
|
+ input.classList.remove("is-invalid");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!option) {
|
|
|
+ // remove is valid class
|
|
|
+ input.classList.remove("is-valid");
|
|
|
+ // add is invalid class
|
|
|
+ input.classList.add("is-invalid");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ input.classList.remove("is-invalid");
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // state
|
|
|
+ const table = document.querySelector("table");
|
|
|
+ const empty_table = table.innerHTML;
|
|
|
+ document.querySelectorAll('.hidden').forEach(element => element.style.display = "none");
|
|
|
+ // hide the table
|
|
|
+ table.style.display = "none";
|
|
|
+ disableDatalist("#filter_grupo");
|
|
|
+
|
|
|
+ document.getElementById("btn-excel-horario").addEventListener("click", () => {
|
|
|
+ const formData = new FormData();
|
|
|
+ const grupo = document.getElementById("filter_grupo").value;
|
|
|
+ formData.append("grupo", grupo);
|
|
|
+ formData.append('sábado', gHorarios.some(horario => horario.dia == "sábado"));
|
|
|
+ formData.append("horarios", JSON.stringify(gHorarios));
|
|
|
+ // min and max hour
|
|
|
+ formData.append("min", gHorarios.reduce((min, horario) => {
|
|
|
+ const hora = horario.hora.split(":").map(x => parseInt(x))[0]
|
|
|
+ return Math.min(hora, min);
|
|
|
+ }, 24));
|
|
|
+ formData.append("max", gHorarios.reduce((max, horario) => {
|
|
|
+ const {
|
|
|
+ hora,
|
|
|
+ bloques
|
|
|
+ } = horario;
|
|
|
+ // after hour
|
|
|
+ const lastHour = moment(hora, "HH:mm").add(bloques * 15, "minutes");
|
|
|
+ const lastMoment = moment(`${lastHour.format("HH")}:00`, "HH:mm");
|
|
|
+ const intHour = parseInt(lastHour.format("HH"));
|
|
|
+
|
|
|
+ return Math.max(lastMoment.isSame(lastHour) ? intHour - 1 : intHour, max);
|
|
|
+ }, 0));
|
|
|
+
|
|
|
+ fetch("export/horario_excel.php", {
|
|
|
+ method: "POST",
|
|
|
+ body: formData
|
|
|
+ })
|
|
|
+ .then(response => response.blob())
|
|
|
+ .then(blob => {
|
|
|
+ const url = window.URL.createObjectURL(blob);
|
|
|
+ const a = document.createElement('a');
|
|
|
+ a.style.display = 'none';
|
|
|
+ a.setAttribute('href', url);
|
|
|
+ a.setAttribute('download', `horario-${grupo}.xlsx`);
|
|
|
+ document.body.appendChild(a);
|
|
|
+ a.click();
|
|
|
+ window.URL.revokeObjectURL(url);
|
|
|
+ })
|
|
|
+ .catch(() => triggerMessage("error", "Error al exportar el horario"));
|
|
|
+ });
|
|
|
+ // on click the li element, inside datalist #dlcarera
|
|
|
+ document.querySelectorAll("#dlcarrera li").forEach(async li => {
|
|
|
+ li.addEventListener("click", async () => {
|
|
|
+ // get the data-id from the li element
|
|
|
+ const carrera = li.getAttribute("data-id");
|
|
|
+ const facultad = '<?= $user->facultad['facultad_id'] ?>';
|
|
|
+ const periodo = '<?= $user->periodo ?>';
|
|
|
+
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("carrera", carrera);
|
|
|
+ formData.append("facultad", facultad);
|
|
|
+ formData.append("periodo", periodo);
|
|
|
+
|
|
|
+ const dlgrupo = document.querySelector("#dlgrupo ul");
|
|
|
+ const grupoModal = document.querySelector("#grupoModal ul");
|
|
|
+ const promptDL = document.querySelector("#dlgrupo .datalist-input");
|
|
|
+
|
|
|
+ try {
|
|
|
+ const {
|
|
|
+ status,
|
|
|
+ grupos
|
|
|
+ } = await fetch("action/action_grupo.php", {
|
|
|
+ method: "POST",
|
|
|
+ body: formData
|
|
|
+ }).then(res => res.json());
|
|
|
+
|
|
|
+ dlgrupo.innerHTML = "";
|
|
|
+
|
|
|
+ if (status != "success") {
|
|
|
+ throw new Error("Error al cargar los grupos");
|
|
|
+ } else if (grupos.length == 0) {
|
|
|
+ throw new Error("No hay grupos para esta carrera, puedes crear uno nuevo");
|
|
|
+ }
|
|
|
+
|
|
|
+ document.getElementById("message").innerHTML = "";
|
|
|
+ grupoModal.querySelectorAll("li:not(:first-child)").forEach(li => li.remove());
|
|
|
+ document.querySelector("#grupo").setAttribute("hidden", true);
|
|
|
+ grupos.forEach(grupo => {
|
|
|
+ const li = document.createElement("li");
|
|
|
+ // data-id is the id of the group
|
|
|
+ li.setAttribute("data-id", grupo);
|
|
|
+ li.textContent = grupo;
|
|
|
+ dlgrupo.appendChild(li);
|
|
|
+ li.addEventListener("click", async () => await setTimeout(buscarGrupo, 0))
|
|
|
+
|
|
|
+ // remove from grupoModal all the li elements except the first one
|
|
|
+ grupoModal.appendChild(li.cloneNode(true));
|
|
|
+ });
|
|
|
+
|
|
|
+ // on click the li element, inside datalist #grupoModal
|
|
|
+ document.querySelectorAll("#grupoModal li").forEach(li => {
|
|
|
+ li.addEventListener("click", () => {
|
|
|
+ const grupo = li.getAttribute("data-id");
|
|
|
+ const filter_grupo = document.querySelector("#grupo");
|
|
|
+ filter_grupo.classList.remove("is-invalid");
|
|
|
+ if (grupo == "")
|
|
|
+ filter_grupo.removeAttribute("hidden");
|
|
|
+ else
|
|
|
+ filter_grupo.setAttribute("hidden", true);
|
|
|
+ filter_grupo.value = grupo;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ disableDatalist("#filter_grupo", false);
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ // remove Error: from the error message
|
|
|
+ error = error.toString().replace("Error: ", "");
|
|
|
+ triggerMessage(error, "Error", "warning");
|
|
|
+ console.error(error);
|
|
|
+ disableDatalist("#filter_grupo", true);
|
|
|
+ } finally {
|
|
|
+ document.querySelector("#nuevo").classList.remove("d-none");
|
|
|
+ // write Seleccionar grupo
|
|
|
+ promptDL.textContent = "Seleccionar grupo";
|
|
|
+ console.log(promptDL);
|
|
|
+ // to #filter_grupo input value
|
|
|
+ const filter_grupo = document.querySelector("#filter_grupo");
|
|
|
+ filter_grupo.value = "";
|
|
|
+ table.style.display = "none";
|
|
|
+ }
|
|
|
+
|
|
|
+ const datalist = document.querySelector("#materias");
|
|
|
+ const materias = await fetch("action/action_materias.php", {
|
|
|
+ method: "POST",
|
|
|
+ body: formData
|
|
|
+ }).then(res => res.json());
|
|
|
+ });
|
|
|
+
|
|
|
+ })
|
|
|
+ // on modal edit, show the data
|
|
|
+ $("#modal-editar").on("show.bs.modal", async function(event) {
|
|
|
+ document.querySelectorAll("#modal-editar .is-invalid, #modal-editar .is-valid")?.forEach(element => element.classList.remove("is-invalid", "is-valid"));
|
|
|
+
|
|
|
+
|
|
|
+ const button = event.relatedTarget;
|
|
|
+ const parentId = button.parentElement.parentElement.getAttribute("data-ids");
|
|
|
+ const grupo = document.querySelector("#filter_grupo").value;
|
|
|
+ setDatalist("#dli-grupo", grupo);
|
|
|
+ document.querySelector("#grupo").value = grupo;
|
|
|
+ document.querySelector("#grupo").setAttribute("hidden", true);
|
|
|
+
|
|
|
+ if (parentId == null) {
|
|
|
+ resetFormModal();
|
|
|
+ disableDatalist("#dli-grupo", false);
|
|
|
+ setDatalist("#dli-grupo", grupo);
|
|
|
+ document.querySelector("#grupo").value = grupo;
|
|
|
+ if (grupo == "")
|
|
|
+ document.querySelector("#grupo").removeAttribute("hidden");
|
|
|
+
|
|
|
+ // search the data-id of the day and click it
|
|
|
+ setDatalistFirst("#selector_horas");
|
|
|
+ setDatalist("#selector_minutos", 15);
|
|
|
+ const input_materia = document.getElementById('dlMateria');
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("carrera", document.querySelector("#filter_carrera").value);
|
|
|
+
|
|
|
+ try {
|
|
|
+ const {
|
|
|
+ status,
|
|
|
+ materias,
|
|
|
+ } = await fetch("action/action_materias.php", {
|
|
|
+ method: "POST",
|
|
|
+ body: formData
|
|
|
+ }).then(res => res.json());
|
|
|
+
|
|
|
+ if (status != "success")
|
|
|
+ throw new Error("Error al cargar las materias");
|
|
|
+ else if (materias.length == 0)
|
|
|
+ throw new Error("No hay materias para esta carrera");
|
|
|
+
|
|
|
+ const dlMateria = document.querySelector("#lista_materias");
|
|
|
+ dlMateria.innerHTML = "";
|
|
|
+ materias.forEach(materia => {
|
|
|
+ const option = document.createElement("option");
|
|
|
+ option.setAttribute("data-id", materia.id);
|
|
|
+ option.setAttribute("value", materia.nombre);
|
|
|
+ dlMateria.appendChild(option);
|
|
|
+ });
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ // remove Error: from the error message
|
|
|
+ error = error.toString().replace("Error: ", "");
|
|
|
+ triggerMessage(error, "Error, no se pudo cargar las materias");
|
|
|
+ console.error(error);
|
|
|
+ }
|
|
|
+
|
|
|
+ const btnGuardar = document.getElementById('btn-guardar');
|
|
|
+ // btnGuardar.onclick = () => guardar(id);
|
|
|
+
|
|
|
+
|
|
|
+ btnGuardar.onclick = async () => {
|
|
|
+ const formData = extractFromModal();
|
|
|
+ if (formData == null)
|
|
|
+ return;
|
|
|
+ // check if a field is empty
|
|
|
+ for (const value of formData.values())
|
|
|
+ if (value == "")
|
|
|
+ return triggerMessage("Todos los campos son obligatorios", "Error", "danger", "message_editar", true);
|
|
|
+ formData.append("facultad", <?= $user->facultad['facultad_id'] ?>);
|
|
|
+ formData.append("periodo", <?= $user->periodo ?>);
|
|
|
+ formData.append("grupo", document.querySelector("input#grupo").value);
|
|
|
+
|
|
|
+ await insertHorario(formData);
|
|
|
+ resetFormModal();
|
|
|
+ $("#modal-editar").modal("hide");
|
|
|
+ };
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const {
|
|
|
+ id,
|
|
|
+ dia,
|
|
|
+ hora,
|
|
|
+ materia,
|
|
|
+ salon,
|
|
|
+ profesores,
|
|
|
+ duracion
|
|
|
+ } = gHorarios?.find(horario => horario.id == parentId);
|
|
|
+
|
|
|
+ // search the data-id of the day and click it
|
|
|
+ const númeroDía = ['domingo', 'lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado'].reduce((acc, curr, key) => (curr == dia) ? key : acc);
|
|
|
+ document.querySelector(`#dldia li[data-id="${númeroDía}"]`)?.click();
|
|
|
+ document.querySelector(`#dlduración li[data-id="${duracion}"]`)?.click();
|
|
|
+ const horas = hora.split(":")[0];
|
|
|
+ const minutos = hora.split(":")[1];
|
|
|
+ setDatalist("#selector_horas", horas);
|
|
|
+ setDatalist("#selector_minutos", minutos);
|
|
|
+ document.getElementById('editor_salón').value = salon;
|
|
|
+ const input_materia = document.getElementById('dlMateria');
|
|
|
+ input_materia.value = materia;
|
|
|
+ // disable the input
|
|
|
+ input_materia.setAttribute("disabled", true);
|
|
|
+ input_materia.classList.add("bg-info");
|
|
|
+
|
|
|
+ disableDatalist("#dli-grupo")
|
|
|
+
|
|
|
+ // get the option with data-id profesor
|
|
|
+ document.getElementById("profesores").innerHTML = "";
|
|
|
+ profesores.forEach(listProfesor);
|
|
|
+
|
|
|
+ const btnGuardar = document.getElementById('btn-guardar');
|
|
|
+ btnGuardar.onclick = () => guardar(id);
|
|
|
+ })
|
|
|
+ $("#modal-borrar").modal({
|
|
|
+ show: false,
|
|
|
+ backdrop: "static",
|
|
|
+ keyboard: false,
|
|
|
+ })
|
|
|
+ $("#modal-borrar").on("show.bs.modal", async function(event) {
|
|
|
+ const button = event.relatedTarget;
|
|
|
+ const id = button.parentElement.parentElement.getAttribute("data-ids");
|
|
|
+
|
|
|
+ const btnBorrar = document.getElementById('btn-borrar');
|
|
|
+ btnBorrar.onclick = () => borrarHorario(id);
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+
|
|
|
+ </html>
|