All
This commit is contained in:
302
avisos.php
302
avisos.php
@@ -8,6 +8,7 @@
|
||||
<?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;
|
||||
@@ -31,20 +32,303 @@
|
||||
?>
|
||||
|
||||
<main class="container-fluid px-4 mt-4" id="app" v-cloak @vue:mounted="mounted" style="min-height: 70vh;">
|
||||
<div class="table-responsive">
|
||||
<!-- 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">Fecha</th>
|
||||
<th class="text-center">Aviso</th>
|
||||
<th class="text-center">Estado</th>
|
||||
<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">×</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">×</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">×</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">×</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"; ?>
|
||||
@@ -52,10 +336,16 @@
|
||||
<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>
|
||||
<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>
|
||||
Reference in New Issue
Block a user