From 85991cf67482220fa2a53cd4aff4630354423758 Mon Sep 17 00:00:00 2001
From: Alejandro Rosales <alejandro.rosales@lasalle.mx>
Date: Thu, 31 Aug 2023 19:20:27 +0000
Subject: [PATCH] All

---
 action/action_avisos.php        |  52 ++++++
 action/action_avisos_delete.php |   9 --
 action/action_avisos_insert.php |  28 ----
 action/action_avisos_update.php |  52 ------
 auditoria.php                   | 203 ++++++++++++------------
 avisos.php                      | 272 ++++----------------------------
 js/avisos.js                    |   5 +
 ts/avisos.ts                    |   6 +
 8 files changed, 198 insertions(+), 429 deletions(-)
 create mode 100644 action/action_avisos.php
 delete mode 100644 action/action_avisos_delete.php
 delete mode 100644 action/action_avisos_insert.php
 delete mode 100644 action/action_avisos_update.php
 create mode 100644 js/avisos.js
 create mode 100644 ts/avisos.ts

diff --git a/action/action_avisos.php b/action/action_avisos.php
new file mode 100644
index 0000000..18c03ff
--- /dev/null
+++ b/action/action_avisos.php
@@ -0,0 +1,52 @@
+<?
+#input $_GET['id_espacio_sgu']
+#output rutas: [ ...ruta, salones: [{...salon}] ]
+header('Content-Type: application/json charset=utf-8');
+ini_set('display_errors', 1);
+ini_set('display_startup_errors', 1);
+error_reporting(E_ALL);
+
+$ruta = "../";
+require_once $ruta . "class/c_login.php";
+if (!isset($_SESSION['user'])) {
+    http_response_code(401);
+    die(json_encode(['error' => 'unauthorized']));
+}
+$user = unserialize($_SESSION['user']);
+
+// check method
+try {
+    if ($_SERVER['REQUEST_METHOD'] === 'GET') {
+        $data = $db->query(
+            'SELECT * FROM AVISO',
+            [
+                ':facultad_id' => $user->facultad['facultad_id'],
+                ':fecha_inicio' => $_GET['fecha'] ?? $_GET['fecha_inicio'] ?? null,
+                ':fecha_fin' => $_GET['fecha'] ?? $_GET['fecha_fin'] ?? null,
+            ]
+        );
+
+        $last_query = [
+            'query' => $db->getLastQuery(),
+        ];
+
+        echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
+    } else {
+        http_response_code(405);
+        echo json_encode(['error' => 'method not allowed']);
+        exit;
+    }
+} catch (PDOException $th) {
+    http_response_code(500);
+    echo json_encode([
+        'error' => $th->getMessage(),
+        'query' => $db->getLastQuery(),
+    ], JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_PARTIAL_OUTPUT_ON_ERROR);
+    exit;
+} catch (Exception $th) {
+    http_response_code(500);
+    echo json_encode([
+        'error' => $th->getMessage(),
+    ], JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
+    exit;
+}
\ No newline at end of file
diff --git a/action/action_avisos_delete.php b/action/action_avisos_delete.php
deleted file mode 100644
index e4409f6..0000000
--- a/action/action_avisos_delete.php
+++ /dev/null
@@ -1,9 +0,0 @@
-<?php
-$ruta = '../';
-require_once '../include/bd_pdo.php';
-global $pdo;
-
-$sql = "SELECT fu_update_estado_aviso(false, :id)";
-$params = [':id' => $_POST['id']];
-echo json_encode(query($sql, $params, false));
-?>
\ No newline at end of file
diff --git a/action/action_avisos_insert.php b/action/action_avisos_insert.php
deleted file mode 100644
index dfb6fec..0000000
--- a/action/action_avisos_insert.php
+++ /dev/null
@@ -1,28 +0,0 @@
-<?php
-$ruta = '../';
-require_once '../include/bd_pdo.php';
-global $pdo;
-
-$profesores = [];
-
-if(isset($_POST['tipo'])){
-    foreach($_POST['tipo'] as $tipo){
-        $profesores_carrera = query("SELECT profesor_id FROM fs_profesor_carrera(:carrera_id)", [':carrera_id' => $tipo], false);
-        foreach($profesores_carrera as $profesor){
-            array_push($profesores, $profesor['profesor_id']);
-        }
-
-    }
-}
-$sql = "SELECT fi_aviso(:fecha_inicial, :fecha_final, :texto, :facultad)";
-$params = [':fecha_inicial' => $_POST['fecha_inicial'], ':fecha_final' => $_POST['fecha_final'], ':texto' => $_POST['texto'], ':facultad' => $_POST['facultad']];
-$aviso_id = query($sql, $params, true);
-
-$sql = "SELECT fi_aviso_profesor(:aviso_id, :profesor_id)";
-foreach($profesores as $profesor_id){
-    $params = [':aviso_id' => $aviso_id['fi_aviso'], ':profesor_id' => $profesor_id];
-    query($sql, $params, false);
-}
-header("Location: ../avisos.php");
-exit();
-?>
\ No newline at end of file
diff --git a/action/action_avisos_update.php b/action/action_avisos_update.php
deleted file mode 100644
index 6f6bf24..0000000
--- a/action/action_avisos_update.php
+++ /dev/null
@@ -1,52 +0,0 @@
-<?php
-$ruta = '../';
-require_once '../include/bd_pdo.php';
-global $pdo;
-
-$aviso = query("SELECT * FROM fs_aviso(:id, null, null, null, 0, null)", [':id' => $_POST['aviso_id']], true);
-if(isset($_POST['fecha_final'])){
-    $fecha_fin = $_POST['fecha_final'];
-}else{
-    $fecha_fin = $aviso['aviso_fecha_final'];
-}
-if(isset($_POST['texto'])){
-    $texto = $_POST['texto'];
-}else{
-    $texto = $aviso['aviso_texto'];
-}
-if(isset($_POST['fecha_inicial'])){
-    $fecha_inicio = $_POST['fecha_inicial'];
-}else{
-    $fecha_inicio = $aviso['aviso_fecha_inicial'];
-}
-
-$sql = "SELECT fu_update_aviso(:id, :fecha_fin, :texto, :fecha_inicio)";
-$params = [':id' => $_POST['aviso_id'], ':fecha_fin' => $fecha_fin, ':texto' => $texto, ':fecha_inicio' => $fecha_inicio];
-query($sql, $params, true);
-
-query("SELECT fd_aviso_profesor(:aviso_id)", [':aviso_id' => $_POST['aviso_id']], false);
-
-$profesores = [];
-if(isset($_POST['tipo'])){
-    foreach($_POST['tipo'] as $tipo){
-        $profesores_carrera = query("SELECT profesor_id FROM fs_profesor_carrera(:carrera_id)", [':carrera_id' => $tipo], false);
-        foreach($profesores_carrera as $profesor){
-            array_push($profesores, $profesor['profesor_id']);
-        }
-
-    }
-}
-
-
-foreach($_POST['usuario'] as $profesor){
-    array_push($profesores, $profesor);
-}
-$sql = "SELECT fi_aviso_profesor(:aviso_id, :profesor_id)";
-foreach($profesores as $profesor_id){
-    $params = [':aviso_id' => $_POST['aviso_id'], ':profesor_id' => $profesor_id];
-    query($sql, $params, false);
-}
-
-header("Location: ../avisos.php");
-exit();
-?>
\ No newline at end of file
diff --git a/auditoria.php b/auditoria.php
index 0dec217..6bceb47 100644
--- a/auditoria.php
+++ b/auditoria.php
@@ -242,114 +242,114 @@
             </div>
 
             <!-- refresh -->
-            <div class="table-responsive">
-                <table class="table table-hover table-striped table-bordered table-sm">
-                    <thead class="thead-dark">
-                        <tr>
-                            <th scope="col"
-                                class="text-center align-middle px-2 d-flex align-items-center justify-content-center">
-                                <button @click="store.registros.invertir" class="btn btn-light btn-sm text-primary mr-3"
-                                    v-if="store.registros.relevant.length > 1">
-                                    <i class="ing-cambiar ing-rotate-90"></i>
-                                </button>
-                                <span style="white-space: nowrap;">Fecha</span>
-                            </th>
+                <div class="table-responsive">
+                    <table class="table table-hover table-striped table-bordered table-sm">
+                        <thead class="thead-dark">
+                            <tr>
+                                <th scope="col"
+                                    class="text-center align-middle px-2 d-flex align-items-center justify-content-center">
+                                    <button @click="store.registros.invertir" class="btn btn-light btn-sm text-primary mr-3"
+                                        v-if="store.registros.relevant.length > 1">
+                                        <i class="ing-cambiar ing-rotate-90"></i>
+                                    </button>
+                                    <span style="white-space: nowrap;">Fecha</span>
+                                </th>
 
-                            <th scope="col" class="text-center align-middle px-2" width="10%">Salón</th>
-                            <th scope="col" class="text-center align-middle px-2">Profesor</th>
+                                <th scope="col" class="text-center align-middle px-2" width="10%">Salón</th>
+                                <th scope="col" class="text-center align-middle px-2">Profesor</th>
 
-                            <th scope="col" class="text-center align-middle px-2" width="7%">Horario</th>
-                            <th scope="col" class="text-center align-middle px-2">Registro</th>
-                            <th scope="col" class="text-center align-middle px-2">Supervisor</th>
-                            <? if ($user->acceso == 'w') { ?>
-                                <th scope="col" class="text-center align-middle px-2" width="10%">Justificar</th>
-                            <? } ?>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-if="store.registros.relevant.length == 0">
-                            <td colspan="7" class="text-center">No hay clases en este horario</td>
-                        </tr>
-                        <tr v-for="registro in store.registros.relevant?.slice((store.current.page - 1) * store.current.perPage, store.current.page * store.current.perPage)"
-                            :key="`${registro.registro_id}-${registro.registro_fecha_ideal}-${registro.horario_id}-${registro.profesor_id}-${registro.salon_id}`">
-                            <td class="text-center align-middle px-2">{{ registro.registro_fecha_ideal }}
-                            </td>
-                            <td class="text-center align-middle px-2">{{ registro.salon }}</td>
-                            <td class="align-middle px-2">
-                                <strong>{{ registro.profesor_clave }}</strong>
-                                {{ registro.profesor_nombre }}
-                                <button type="button" class="ml-3 btn btn-sm btn-outline-primary"
-                                    @click="store.current.clase_vista = registro" data-toggle="modal"
-                                    data-target="#ver-detalle">
-                                    <i class="ing-ojo"></i>
-                                    Ver detalle
-                                </button>
-                            </td>
+                                <th scope="col" class="text-center align-middle px-2" width="7%">Horario</th>
+                                <th scope="col" class="text-center align-middle px-2">Registro</th>
+                                <th scope="col" class="text-center align-middle px-2">Supervisor</th>
+                                <? if ($user->acceso == 'w') { ?>
+                                    <th scope="col" class="text-center align-middle px-2" width="10%">Justificar</th>
+                                <? } ?>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-if="store.registros.relevant.length == 0">
+                                <td colspan="7" class="text-center">No hay clases en este horario</td>
+                            </tr>
+                            <tr v-for="registro in store.registros.relevant?.slice((store.current.page - 1) * store.current.perPage, store.current.page * store.current.perPage)"
+                                :key="`${registro.registro_id}-${registro.registro_fecha_ideal}-${registro.horario_id}-${registro.profesor_id}-${registro.salon_id}`">
+                                <td class="text-center align-middle px-2">{{ registro.registro_fecha_ideal }}
+                                </td>
+                                <td class="text-center align-middle px-2">{{ registro.salon }}</td>
+                                <td class="align-middle px-2">
+                                    <strong>{{ registro.profesor_clave }}</strong>
+                                    {{ registro.profesor_nombre }}
+                                    <button type="button" class="ml-3 btn btn-sm btn-outline-primary"
+                                        @click="store.current.clase_vista = registro" data-toggle="modal"
+                                        data-target="#ver-detalle">
+                                        <i class="ing-ojo"></i>
+                                        Ver detalle
+                                    </button>
+                                </td>
 
 
-                            <td class="text-center align-middle px-2">{{ registro.horario_hora?.slice(0,5) }} -
-                                {{registro.horario_fin?.slice(0,5) }}</td>
-                            <!--  -->
-                            <td class="text-center align-middle px-2">
-                                <div v-if="registro.registro_fecha">
-                                    <div class="col-12">
-                                        Registro <small>{{ registro.registro_fecha?.slice(11,19) }}</small>
-                                    </div>
-                                </div>
-                                <div v-else>
-                                    <strong>
-                                        <div class="col-12">
-                                            <span class="text-dark ing-2x"><i class="ing-cancelar"></i></span>
-                                        </div>
-                                    </strong>
-                                </div>
-                            </td>
-
-                            <!-- Sí checó supervisor -->
-                            <td class="text-center align-middle px-2">
-                                <div class="col-12">
-                                    <div class="row">
-                                        <div class="col-12">
-                                            <span class="mr-2" :class="`text-${registro.estado_color}`">
-                                                <i :class="`${registro.estado_icon} ing-2x`"></i>
-                                            </span>
-                                            <strong v-if="registro.usuario_nombre">{{ registro.usuario_nombre
-                                                }}</strong>
-                                        </div>
-                                        <div class="col-12" v-if="registro.registro_fecha_supervisor">
-                                            Hora
-                                            <small>{{ registro.registro_fecha_supervisor?.slice(11,19) }}</small>
-                                        </div>
-                                    </div>
-                                    <div class="col-12 "
-                                        @click="store.registros.mostrarComentario(registro.registro_id)"
-                                        v-if="registro.comentario" style="cursor: pointer;">
-                                        <strong class="badge border border-primary">Observaciones:</strong>
-                                        <small
-                                            class="text-truncate">{{registro.comentario?.slice(0,25)}}{{registro.comentario.length
-                                            > 10 ? '...' : ''}}</small>
-                                    </div>
-                                </div>
-                            </td>
-                            <? if ($user->acceso == 'w') { ?>
+                                <td class="text-center align-middle px-2">{{ registro.horario_hora?.slice(0,5) }} -
+                                    {{registro.horario_fin?.slice(0,5) }}</td>
+                                <!--  -->
                                 <td class="text-center align-middle px-2">
-                                    <div class="col-auto">
-                                        <button class="btn btn-link text-center mx-2 btn-sm" data-toggle="modal"
-                                            :class="`text-${registro.registro_justificada ? 'success' : 'primary'}`"
-                                            data-target="#justificar" :class="{ 'active': registro.comentario }"
-                                            @click="set_justificar(registro.horario_id, registro.profesor_id, registro.registro_fecha_ideal)">
-                                            <i :class="`ing-${registro.registro_justificada ? 'finalistas' : 'reporte-resultados'}`"
-                                                style="font-size: 2rem;"></i>
-                                            <span class="sr-only">{{ registro.registro_justificada ? 'Justificada' :
-                                                'Justificar' }}</span>
-                                        </button>
+                                    <div v-if="registro.registro_fecha">
+                                        <div class="col-12">
+                                            Registro <small>{{ registro.registro_fecha?.slice(11,19) }}</small>
+                                        </div>
+                                    </div>
+                                    <div v-else>
+                                        <strong>
+                                            <div class="col-12">
+                                                <span class="text-dark ing-2x"><i class="ing-cancelar"></i></span>
+                                            </div>
+                                        </strong>
                                     </div>
                                 </td>
-                            <? } ?>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+
+                                <!-- Sí checó supervisor -->
+                                <td class="text-center align-middle px-2">
+                                    <div class="col-12">
+                                        <div class="row">
+                                            <div class="col-12">
+                                                <span class="mr-2" :class="`text-${registro.estado_color}`">
+                                                    <i :class="`${registro.estado_icon} ing-2x`"></i>
+                                                </span>
+                                                <strong v-if="registro.usuario_nombre">{{ registro.usuario_nombre
+                                                    }}</strong>
+                                            </div>
+                                            <div class="col-12" v-if="registro.registro_fecha_supervisor">
+                                                Hora
+                                                <small>{{ registro.registro_fecha_supervisor?.slice(11,19) }}</small>
+                                            </div>
+                                        </div>
+                                        <div class="col-12 "
+                                            @click="store.registros.mostrarComentario(registro.registro_id)"
+                                            v-if="registro.comentario" style="cursor: pointer;">
+                                            <strong class="badge border border-primary">Observaciones:</strong>
+                                            <small
+                                                class="text-truncate">{{registro.comentario?.slice(0,25)}}{{registro.comentario.length
+                                                > 10 ? '...' : ''}}</small>
+                                        </div>
+                                    </div>
+                                </td>
+                                <? if ($user->acceso == 'w') { ?>
+                                    <td class="text-center align-middle px-2">
+                                        <div class="col-auto">
+                                            <button class="btn btn-link text-center mx-2 btn-sm" data-toggle="modal"
+                                                :class="`text-${registro.registro_justificada ? 'success' : 'primary'}`"
+                                                data-target="#justificar" :class="{ 'active': registro.comentario }"
+                                                @click="set_justificar(registro.horario_id, registro.profesor_id, registro.registro_fecha_ideal)">
+                                                <i :class="`ing-${registro.registro_justificada ? 'finalistas' : 'reporte-resultados'}`"
+                                                    style="font-size: 2rem;"></i>
+                                                <span class="sr-only">{{ registro.registro_justificada ? 'Justificada' :
+                                                    'Justificar' }}</span>
+                                            </button>
+                                        </div>
+                                    </td>
+                                <? } ?>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
 
             <!-- page -->
             <nav v-if="store.registros.relevant.length > 0" class="mt-3 col-12">
@@ -635,7 +635,6 @@
         setDatalistFirst('#bloque_id');
         setDatalistFirst('#facultad_id');
         setDatalistFirst('#estado_id');
-
     </script>
 </body>
 
diff --git a/avisos.php b/avisos.php
index e277d73..d2481b7 100644
--- a/avisos.php
+++ b/avisos.php
@@ -1,265 +1,61 @@
-<?php
-require_once 'class/c_login.php';
-require_once 'include/bd_pdo.php';
-include 'include/constantes.php';
-
-if(!isset($_SESSION['user'])){
-    header('Location: index.php');
-    exit;
-}
-else
-    $user = unserialize($_SESSION['user']);
-$user->access();
-if($user->acceso == null){
-    header('Location: main.php?error=1');
-}else{
-    $user->print_to_log('Avisos');
-}
-$fac = $user->facultad['facultad_id'];
-if($user->admin){
-    $fac = null;
-}
-$limit = 20;
-if(isset($_POST['filter_fecha']) && $_POST['filter_fecha'] != ""){
-    $filter_fecha = $_POST['filter_fecha'];
-}
-else{
-    $filter_fecha = null;
-}
-if(isset($_GET['pag'])){
-    $pag = $_GET['pag'] - 1;
-}else{
-    $pag = 0;
-}
-if($user->admin){
-    $count = query("SELECT count(1) FROM fs_aviso(null, :fecha, :facultad_id, null, 0, null)", [':fecha' => $filter_fecha, ':facultad_id' => $fac], true);
-    $fs_avisos = query("SELECT * FROM fs_aviso(null, :fecha, :facultad_id, :limite, :offset, null)", [':fecha' => $filter_fecha, ':facultad_id' => $fac, ':limite' => $limit, ':offset' => $pag * $limit], false);
-}else{
-    $count = query("SELECT count(1) FROM fs_aviso(null, :fecha, :facultad_id, null, 0, true)", [':fecha' => $filter_fecha, ':facultad_id' => $fac], true);
-    $fs_avisos = query("SELECT * FROM fs_aviso(null, :fecha, :facultad_id, :limite, :offset, true)", [':fecha' => $filter_fecha, ':facultad_id' => $fac, ':limite' => $limit, ':offset' => $pag * $limit], false);
-}
-$paginas = ceil($count['count'] / $limit);
-?>
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Avisos</title>
-    <link rel="stylesheet" href="css/jquery-ui.css">
-    <link rel="stylesheet" href="css/calendar.css">
+    <title>Auditoría asistencial</title>
     <?php
     include 'import/html_css_files.php';
     ?>
+    <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>
-    <?php
+    <?
+    $redirect = $_SERVER['PHP_SELF'];
     include "import/html_header.php";
+    global $user;
+
     html_header(
-        "Avisos",
-        "Gestión de Checador "
+        "Avisos del checador",
+        "Sistema de gestión de checador",
     );
-    $user->access();
     ?>
-    <main class="content marco">
-        <?php if($user->acceso == 'w') {?>
-        <div class="row">
-            <div class="col-12 text-right">
-                <a href="avisos_crear.php">
-                    <button type="button" class="btn btn-outline-secondary"><span class="ing-mas ing-fw"></span>Crear Aviso</button>
-                </a>
-            </div>
-        </div>
-        <?php } ?>
-        <!-- Filtro -->
-        <div class="row">
-            <div class="col-12">
-                <form action="avisos.php" method="post">
-                    <div class="form-box">
-                        <div class="form-group row">
-                            <label for="filter_fecha" class="col-4 con-form-label">Fecha</label>
-                            <div class="col-8 col-sm-4">
-                                <input id="filter_fecha" name="filter_fecha" type="text" class="form-control date-picker" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly="" value="<?php if(isset($filter_fecha)){ echo $filter_fecha; } ?>">
-                            </div>
-                        </div>
-                        <p class="offset-4">Se muestran los avisos posteriores a la fecha</p>
-                    </div>
-                    <div class="form-group">
-                        <div class="col-12 text-center">
-                            <button type="submit" class="btn btn-outline-primary">
-                                <span class="ing-buscar ing-fw"></span>
-                                Filtrar
-                            </button>
-                            <button type="button" class="btn btn-outline-danger btn-reset">
-                                <span class="ing-borrar ing-fw"></span>
-                                Limpiar
-                            </button>
-                        </div>
-                    </div>
-                </form>
-            </div>
-        </div>
-        <div id="message"></div>
-        <!-- Tabla -->
-        <div class="row">
-            <div class="col-12 table-responsive">
-                <table class="table table-sm table-striped table-white">
-                    <thead class="thead-dark">
-                        <tr>
-                            <th>Estado</th>
-                            <?php if($user->acceso == 'w') {?>
-                                <th>Facultad</th>
-                                <?php }?>
-                                <th>Fechas</th>
-                                <th>Mensaje</th>
-                            <?php if($user->acceso == 'w') {?>
-                            <th>Acciones</th>
-                            <?php }?>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <?php $today = date('Y-m-j');
-                            foreach($fs_avisos as $aviso){
-                            $color2 = 'danger';
-                            $title2 = 'Inactivo';
-                            $color = 'danger';
-                            $title = 'Fuera de tiempo';
-                            $icono = 'retardo';
-                            if($today >= $aviso['aviso_fecha_inicial'] && $today <= $aviso['aviso_fecha_final']){
-                                $color = 'success';
-                                $title = 'En tiempo';
-                                $icono = 'reloj';
-                            }else if($today < $aviso['aviso_fecha_inicial']){
-                                $color = 'warning';
-                                $title = 'Antes de tiempo';
-                            }
-                            if($aviso['aviso_estado'] == true){
-                                $color2 = 'success';
-                                $title2 = 'Activo';
-                            }
-                            $day = explode("-", $aviso['aviso_fecha_inicial']);
-                            $dia_inicial = $day['2'].'/'.$day['1'].'/'.$day[0];
-                            $day = explode("-", $aviso['aviso_fecha_final']);
-                            $dia_final = $day['2'].'/'.$day['1'].'/'.$day[0];
-                            ?>
-                            <tr data-id="<?= $aviso['aviso_id'] ?>" id="<?= $aviso['aviso_id'] ?>">
-                                <td class="text-center"><?php if($user->admin){ ?> <span class="ing-bullet text-<?= $color2 ?>" title="<?= $title2 ?>"></span> <?php } ?> <span class="ing-<?= $icono ?> text-<?= $color ?>" title="<?= $title ?>"></span></td>
-                                <?php if($user->acceso == 'w') {?>
-                                    <td><?= $aviso['facultad_nombre'] ?></td>
-                                <?php }?>
-                                <td><?= $dia_inicial ?> - <?= $dia_final ?></td>
-                                <td><?= $aviso['aviso_texto'] ?></td>
-                                <?php if($user->acceso == 'w') {?>
-                                    <td class="text-center">
-                                        <a href="avisos_editar.php?id=<?= $aviso['aviso_id'] ?>" title="Editar"><span class="ing-editar"></span></a>
-                                        <?php if($aviso['aviso_estado'] == true){ ?>
-                                            <a href="#" data-toggle="modal" data-target="#modal_confirm" title="Borrar"><span class="ing-basura"></span></a>
-                                        <?php } ?>
-                                    </td>
-                                <?php }?>
-                            </tr>
-                        <?php } ?>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        <nav aria-label="paginas">
-            <ul class="pagination justify-content-end">
-                <?php if($pag != 0){ ?>
-                    <li class="page-item">
-                    <a class="page-link" href="avisos.php?pag=<?= $pag ?>" aria-label="Previous">
-                        <span aria-hidden="true">&laquo;</span>
-                    </a>
-                    </li>
-                <?php } ?>
-                <?php for($i = 0; $i < $paginas; $i++){ ?>
-                    <li class="page-item <?php if($i == $pag){ echo"active"; } ?>" <?php if($i == $pag){ echo 'aria-current="page"'; } ?>><a class="page-link" href="avisos.php?pag=<?= $i+1 ?>"><?= $i+1 ?></a></li>
 
-                <?php }
-                if(($pag + 1) < $paginas){ ?>
-                    <li class="page-item">
-                    <a class="page-link" href="avisos.php?pag=<?= $pag + 2 ?>" aria-label="Next">
-                        <span aria-hidden="true">&raquo;</span>
-                    </a>
-                    </li>
-                <?php } ?>
-            </ul>
-        </nav>
+    <main class="container-fluid px-4 mt-4" id="app" v-cloak @vue:mounted="mounted" style="min-height: 70vh;">
+        <div class="table-responsive">
+            <table class="table table-hover table-striped table-bordered table-sm">
+                <thead class="thead-dark">
+                    <tr>
+                        <th class="text-center">Fecha</th>
+                        <th class="text-center">Aviso</th>
+                        <th class="text-center">Estado</th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                </tbody>
+            </table>
+        </div>
     </main>
-    <?php
-    include "import/html_footer.php";
-    ?>
 
-    <?php if($user->acceso == 'w') {?>
-    <div class="modal fade" id="modal_confirm" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered" role="document">
-            <div class="modal-content">
-                <div class="modal-body">
-                    <div class="row">
-                        <div class="col">
-                            <p class="font-weight-bold">¿Estás seguro de que quieres borrar el aviso?</p>
-                            <p>Esta acción no se puede deshacer.</p>
-                        </div>
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <input type="hidden" id="id_borrar" value="">
-                    <button type="button" class="btn btn-outline-primary btn-borrar"><?php echo $ICO["aceptar"];?> Borrar</button>
-                    <button type="button" class="btn btn-outline-danger" data-dismiss="modal" aria-label="Close"><?php echo $ICO["cancelar"];?> Cancelar</button>
-                </div>
-            </div>
-        </div>    
-    </div>
-    <?php } ?>
+    <? include "import/html_footer.php"; ?>
 
     <script src="js/jquery.min.js"></script>
     <script src="js/jquery-ui.js"></script>
     <script src="js/bootstrap/bootstrap.min.js"></script>
     <script src="js/datalist.js"></script>
     <script src="js/datepicker-es.js"></script>
-    <?php
-        require_once 'js/messages.php';
-    ?>
-    <script>
-        var today = new Date();
-        $(".date-picker").datepicker($.datepicker.regional["es"]);
-        $(".date-picker").datepicker({
-            dateFormat: "dd/mm/yyyy",
-            changeMonth: true,
-        });
-
-        $(document).on( "click", ".btn-reset", function(event){
-            var forma = $(this).parents("form");
-            forma.find("input[type=text]").val("");
-            forma.find("select").prop("selectedIndex",0);
-            forma.submit();
-        });
-
-        $('#modal_confirm').on('show.bs.modal', function (event) {
-            var button = $(event.relatedTarget); // Button that triggered the modal
-            var id = button.parents("tr").data("id");
-            $("#id_borrar").val(id);
-        });
-
-        $('.btn-borrar').click(function(){
-            var cid = $('#id_borrar').val();
-            $.ajax({
-                url: './action/action_avisos_delete.php',
-                type: 'POST',
-                dataType: 'json',
-                data: {id: cid},
-                success: function(result){
-                    console.log("bien");
-                },
-                error: function(){
-                    console.log(cid);
-                }
-            });
-            $('#modal_confirm').modal("hide");
-            location.reload();
-        });
-    </script>
+    <script src="js/avisos.js?<?= rand(0, 2) ?>" type="module"></script>
+    <script src="js/scrollables.js"></script>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/js/avisos.js b/js/avisos.js
new file mode 100644
index 0000000..db63a28
--- /dev/null
+++ b/js/avisos.js
@@ -0,0 +1,5 @@
+import { createApp } from 'https://unpkg.com/petite-vue?module';
+const app = createApp({
+    mounted() {
+    }
+}).mount('#app');
diff --git a/ts/avisos.ts b/ts/avisos.ts
new file mode 100644
index 0000000..3e2c2e4
--- /dev/null
+++ b/ts/avisos.ts
@@ -0,0 +1,6 @@
+import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'
+
+const app = createApp({
+    mounted() {
+    }
+}).mount('#app')
\ No newline at end of file