PAAD
/
paad


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auditoría asistencial</title>
    <?php
    include 'import/html_css_files.php';
    ?>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.0/dist/trix.css">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
</head>

<body>
    <?
    $redirect = $_SERVER['PHP_SELF'];
    include "import/html_header.php";
    global $user;

    html_header(
        "Avisos del checador",
        "Sistema de gestión de checador",
    );
    ?>

    <main class="container-fluid px-4 mt-4" id="app" v-cloak @vue:mounted="mounted" style="min-height: 70vh;">
        <!-- btn open modal -->
        <? include_once 'import/periodo.php' ?>
        <div class="row mb-4">
            <div class="col-4">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#avisos-modal">
                    <div class="ing-mas"></div>
                    Nuevo aviso
                </button>
            </div>
        </div>
        <div class="table-responsive row" v-if="avisos.length">
            <table class="table table-hover table-striped table-bordered table-sm">
                <thead class="thead-dark">
                    <tr>
                        <th class="text-center" style="width: 20%;">Fecha</th>
                        <th class="text-center" style="width: 70%;">Aviso</th>
                        <th class="text-center" style="width: 10%;">Eliminar</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="aviso in avisos" :key="aviso.aviso_id" @click="aviso_shown = aviso">
                        <td class="text-center" data-toggle="modal" data-target="#aviso-extender">{{
                            aviso.aviso_fecha_inicial }} - {{ aviso.aviso_fecha_final }}</td>
                        <td class="text-center" data-toggle="modal" data-target="#aviso-mostrar">{{ aviso.aviso_titulo
                            }}</td>
                        <td class="text-center" data-toggle="modal" data-target="#aviso-suspender-modal"
                            @click="aviso_suspendido = aviso.aviso_id">
                            <span class="badge badge-pill badge-danger">
                                <div class="ing-borrar"></div>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div v-else class="alert alert-info" role="alert">
            No hay avisos registrados
        </div>

        <div class="modal" tabindex="-1" role="dialog" accesskey="a" id="avisos-modal">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header text-white">
                        <h5 class="modal-title">Crear nuevo aviso</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" class="text-white">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <div class="form-box">

                                <div class="form-group row">
                                    <label for="fechaInicio" class="col-4 col-form-label">Fecha de inicio</label>
                                    <div class="col-6">
                                        <input type="text" class="form-control date-picker" id="fechaInicio"
                                            name="fecha" v-model="new_aviso.fechaInicio" readonly
                                            placeholder="aaaa-mm-dd">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="fechaFin" class="col-4 col-form-label">Fecha fin</label>
                                    <div class="col-6">
                                        <input type="text" class="form-control date-picker" id="fechaFin" name="fecha"
                                            v-model="new_aviso.fechaFin" readonly placeholder="aaaa-mm-dd">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-6">
                                        <label for="dlCarreras" class="col-4 col-form-label">Carreras</label>
                                        <hr>

                                        <div class="col-12 my-2" v-if="relevant_carreras.length">
                                            <div id="dlCarreras" class="datalist datalist-select mb-1 w-100">
                                                <div class="datalist-input">
                                                    Selecciona una carrera
                                                </div>
                                                <span class="icono ing-buscar"></span>
                                                <ul style="display:none">
                                                    <!--
                                                    <li class="datalist-option" data-id="0"
                                                        @click="new_aviso.carreras = carreras">
                                                        Todas las carreras
                                                    </li>
                                                -->
                                                    <li class="datalist-option" v-for="carrera in relevant_carreras"
                                                        :key="carrera.carrera_id" :data-id="carrera.carrera_id"
                                                        @click="new_aviso.carreras.push(carrera)"
                                                        style=" white-space: nowrap;">
                                                        (<small> {{carrera.clave_carrera}} </small>) {{
                                                        carrera.carrera_nombre }}
                                                    </li>
                                                </ul>
                                                <input type="hidden" id="carrera_id" name="id">
                                            </div>
                                        </div>
                                        <ul class="list-group overflow-auto col-12" style="max-height: 200px;">
                                            <li class="list-group-item list-group-item-action"
                                                v-for="(carrera, index) in new_aviso.carreras" :key="carrera.carrera_id"
                                                @click="new_aviso.carreras.splice(index, 1)">
                                                <span class="icono ing-borrar text-danger"></span>
                                                (<small> {{carrera.clave_carrera}} </small>) {{ carrera.carrera_nombre
                                                }}
                                            </li>
                                        </ul>
                                        <div class="col-4 my-2">
                                            <button type="button" class="btn btn-danger btn-block"
                                                @click="new_aviso.carreras = []">
                                                <span class="icono ing-borrar"></span>
                                                Limpiar
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label for="profesor" class="col-4 col-form-label">Profesores</label>
                                        <hr>
                                        <div class="col-12" v-if="relevant_profesores.length">
                                            <div class="form-row justify-content-around align-items-center">
                                                <input id="profesor" name="profesor"
                                                    class="form-control col-11 mr-1 px-2"
                                                    placeholder="Seleccione una profesor" list="dlProfesor"
                                                    v-model="profesor" @input="addProfesor">
                                                <button type="button"
                                                    class="btn btn-outline-danger btn-sm form-control col ml-auto"
                                                    @click="profesor = null">
                                                    <i class="ing-borrar"></i>
                                                </button>
                                            </div>
                                            <datalist id="dlProfesor">
                                                <option v-for="profesor in relevant_profesores"
                                                    :key="profesor.profesor_id" :value="formatProfesor(profesor)">
                                            </datalist>
                                        </div>
                                        <ul class="list-group overflow-auto my-2 col-12" style="max-height: 200px;">
                                            <li class="list-group-item list-group-item-action"
                                                v-for="(profesor, index) in new_aviso.profesores"
                                                :key="profesor.profesor_id"
                                                @click="new_aviso.profesores.splice(index, 1)">
                                                <span class="icono ing-borrar text-danger"></span>
                                                (<small> {{profesor.profesor_clave}} </small>) {{
                                                profesor.profesor_nombre }}
                                            </li>
                                        </ul>
                                        <div class="col-4 my-2">
                                            <button type="button" class="btn btn-danger btn-block"
                                                @click="new_aviso.profesores = []">
                                                <span class="icono ing-borrar"></span>
                                                Limpiar
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="aviso" class="col-4 col-form-label">Etiqueta</label>
                                    <div class="col-6">
                                        <input type="text" class="form-control" id="aviso" name="aviso"
                                            v-model="new_aviso.titulo" placeholder="Etiqueta del aviso">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="aviso" class="col-4 col-form-label">Aviso</label>
                                    <!-- always use relative units -->
                                    <div class="col-6">
                                        <input id="x" type="hidden" name="content">
                                        <trix-editor input="x" class="form-control" id="descripcion" name="descripcion"
                                            v-model="new_aviso.descripcion"
                                            placeholder="Aviso que se mostrará en el checador"
                                            style="min-height: 7em; max-height: 10em; overflow-y: auto;"></trix-editor>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger" data-dismiss="modal"
                            @click="new_aviso.reset()">Cancelar</button>
                        <button type="button" class="btn btn-primary" @click="createAviso()"
                            :disabled="!new_aviso.isValid" :class="{'disabled': !new_aviso.isValid}">
                            Guardar cambios
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" tabindex="-1" role="dialog" accesskey="a" id="aviso-suspender-modal">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header text-white">
                        <h5 class="modal-title">Eliminar aviso</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" class="text-white">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <h1>¿Está seguro que desea eliminar el aviso?</h1>
                            <em class="text-center">
                                <p>Esta acción no se puede deshacer</p>
                            </em>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal"
                            @click="suspenderAviso()">Eliminar</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" tabindex="-1" role="dialog" accesskey="a" id="aviso-mostrar">
            <div class="modal-dialog modal-dialog-centered" role="document" v-if="aviso_shown">
                <div class="modal-content">
                    <div class="modal-header text-white">
                        <h5 class="modal-title">{{ aviso_shown.aviso_titulo }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" class="text-white">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <div class="row mb-2">
                                <div class="col-12">
                                    <fieldset>
                                        <legend>Fecha</legend>
                                        <p class="text-center">{{ aviso_shown.aviso_fecha_inicial }} - {{
                                            aviso_shown.aviso_fecha_final }}</p>
                                    </fieldset>
                                    <fieldset>
                                        <legend>Aviso</legend>
                                        <p class="text-center text-justify border rounded p-2 border-primary"
                                            v-html="aviso_shown.aviso_texto"></p>
                                    </fieldset>

                                    <fieldset v-if="aviso_shown.profesores.length">
                                        <legend>Profesores</legend>
                                        <ul v-if="aviso_shown.profesores.length" class="list-group">
                                            <li v-for="profesor in aviso_shown.profesores" :key="profesor.profesor_id"
                                                class="list-group-item list-group-item-light">
                                                {{ profesor.profesor_nombre }}
                                            </li>
                                        </ul>
                                    </fieldset>

                                    <fieldset v-if="aviso_shown.carreras.length">
                                        <legend>Carreras</legend>
                                        <ul class="list-group" v-if="aviso_shown.carreras.length">
                                            <li v-for="carrera in aviso_shown.carreras" :key="carrera.carrera_id"
                                                class="list-group-item list-group-item-light">
                                                {{ carrera.carrera_nombre }}
                                            </li>
                                        </ul>
                                    </fieldset>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" tabindex="-1" role="dialog" accesskey="a" id="aviso-extender">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header text-white">
                        <h5 class="modal-title">Extender aviso</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" class="text-white">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container" v-if="aviso_shown">
                            <fieldset>
                                <legend>{{ aviso_shown.aviso_titulo}}</legend>
                                <div class="form-group row">
                                    <label for="uFechaFin" class="col-4 col-form-label">Fecha fin</label>
                                    <div class="col-6">
                                        <input v-effect="initializeDatepickers($el)" type="text"
                                            class="form-control date-picker" id="uFechaFin" name="fecha" readonly
                                            placeholder="aaaa-mm-dd" v-model="aviso_shown.aviso_fecha_final">
                                    </div>
                                </div>
                            </fieldset>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"
                            @click="updateAviso(aviso_shown)">Extender</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <? 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/datepicker-es.js"></script>
    <script src="js/avisos.js?<?= rand(0, 2) ?>" type="module"></script>
    <script src="js/scrollables.js"></script>
    <script type="text/javascript" src="https://unpkg.com/trix@2.0.0/dist/trix.umd.min.js"></script>
    <script>
        document.addEventListener("trix-file-accept", function (event) {
            event.preventDefault()
        })
    </script>

</body>

</html>