Initial Commit
This commit is contained in:
Cloud User
328
puestos.php
Normal file
328
puestos.php
Normal file
@@ -0,0 +1,328 @@
|
||||
<!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(
|
||||
is_null($user->facultad['facultad_id']) ? "Puestos" : "Puestos de la {$user->facultad['facultad']}",
|
||||
"Sistema de gestión de checador",
|
||||
);
|
||||
if (!is_null($user->facultad['facultad_id'])) {
|
||||
?>
|
||||
|
||||
<main class="container-fluid px-4 mt-4" id="app" v-cloak @vue:mounted="mounted" style="min-height: 70vh;"
|
||||
v-scope="{new_puesto: null}">
|
||||
<!-- {{modificado}} -->
|
||||
<div class="marco alert alert-success" role="alert" v-if="message">
|
||||
{{message}}
|
||||
</div>
|
||||
|
||||
<?
|
||||
if ($user->acceso == 'w') {
|
||||
?>
|
||||
<div class="marco text-right">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#nuevo-puesto">
|
||||
<span class="ing-mas"></span>
|
||||
Agregar puesto
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<?
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="d-flex flex-wrap marco justify-content-around">
|
||||
<div class="accordion col-10 mx-auto my-5" id="puestos"
|
||||
v-scope="{selected_carrera_id: 0, current_materia: null, current_encargado: null}"
|
||||
v-if="puestos.length">
|
||||
|
||||
<div class="card mb-3 shadow-lg" v-for="(puesto, index) in puestos" :key="puesto.puesto_id">
|
||||
<!-- Card Header -->
|
||||
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
|
||||
<button class="btn btn-link text-white flex-grow-1 text-left" type="button"
|
||||
data-toggle="collapse" :data-target="`#puesto-${puesto.puesto_id}`" aria-expanded="true"
|
||||
:aria-controls="`puesto-${puesto.puesto_id}`">
|
||||
{{puesto.nombre}}
|
||||
</button>
|
||||
<?php if ($user->acceso == 'w') { ?>
|
||||
<button type="button" class="btn btn-outline-light" data-target="#eliminar-puesto"
|
||||
data-toggle="modal" @click="to_delete = puesto">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
||||
<div :id="`puesto-${puesto.puesto_id}`" class="collapse"
|
||||
:aria-labelledby="`puesto-${puesto.nombre}`" data-parent="#puestos">
|
||||
<div class="card-body">
|
||||
<!-- Encargado -->
|
||||
|
||||
<div class="form-row justify-content-around align-items-center mb-2">
|
||||
<label :for="`encargado-${puesto.puesto_id}`" class="col-2 barra-right">
|
||||
Encargado del área
|
||||
<!-- $user->lectura && $user->escritura && $user->none -->
|
||||
</label>
|
||||
<div id="encargados" class="datalist datalist-select mb-1 col-9 <?php if ($user->acceso != 'w') { ?>disabled<?php } ?>">
|
||||
<div class="datalist-input" v-if="puesto.encargado">
|
||||
({{puesto.encargado.usuario_clave}}) {{ puesto.encargado.usuario_nombre }}
|
||||
</div>
|
||||
<div class="datalist-input" v-else>
|
||||
Selecciona un encargado
|
||||
</div>
|
||||
<span class="icono ing-buscar"></span>
|
||||
<ul style="display:none">
|
||||
<li class="datalist-option" v-for="usuario in usuarios"
|
||||
:key="usuario.usuario_id" :data-id="usuario.usuario_id"
|
||||
style=" white-space: nowrap;" @click="puesto.encargado = usuario"
|
||||
:class="{'selected': puesto.encargado?.usuario_id == usuario.usuario_id}">
|
||||
(<small> {{usuario.usuario_clave}} </small>) {{ usuario.usuario_nombre }}
|
||||
</li>
|
||||
</ul>
|
||||
<input type="hidden" id="encargado_id" name="id">
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<?php if ($user->acceso == 'w') { ?>
|
||||
<!-- <div class="form-row justify-content-around align-items-center mb-2"
|
||||
v-show="carreras.length">
|
||||
<label :for="`carrera-${puesto.puesto_id}`" class="col-2 barra-right">
|
||||
Carrera
|
||||
</label>
|
||||
<div id="dlCarreras" class="datalist datalist-select mb-1 col-9">
|
||||
<div class="datalist-input">
|
||||
Selecciona una carrera
|
||||
</div>
|
||||
<span class="icono ing-buscar"></span>
|
||||
<ul style="display:none">
|
||||
<li class="datalist-option" data-id="0" @click="selected_carrera_id = 0">
|
||||
Todas las carreras
|
||||
</li>
|
||||
<li class="datalist-option" v-for="carrera in carreras"
|
||||
:key="carrera.carrera_id" :data-id="carrera.carrera_id"
|
||||
style=" white-space: nowrap;"
|
||||
@click="selected_carrera_id = carrera.carrera_id">
|
||||
(<small> {{carrera.clave_carrera}} </small>) {{ carrera.carrera_nombre }}
|
||||
</li>
|
||||
</ul>
|
||||
<input type="hidden" id="carrera_id" name="id">
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="form-row justify-content-around align-items-center"
|
||||
v-scope="{to_add_materia: null}">
|
||||
<label :for="`materias-${puesto.puesto_id}`" class="col-2 barra-right">
|
||||
Materias
|
||||
</label>
|
||||
<input name="materia" placeholder="Seleccione una materia" list="datalist-materias"
|
||||
class="form-control col-9 " v-model="current_materia" @input="to_add_materia = materias.find(m => current_materia == `${m.clave_materia} - ${m.materia_nombre}`);
|
||||
if (to_add_materia) {
|
||||
if (puesto.materias.find(p => p.materia_id == to_add_materia.materia_id)) {
|
||||
console.log('La materia ya está asignada');
|
||||
current_materia = null;
|
||||
return;
|
||||
}
|
||||
puesto.materias.push(to_add_materia);
|
||||
materias.splice(materias.indexOf(to_add_materia), 1);
|
||||
current_materia = null;
|
||||
}" :disabled="selected_carrera_id == -1" v-model="current_materia"
|
||||
:id="`materias-${puesto.puesto_id}`" autocomplete="off">
|
||||
</div>
|
||||
<datalist id="datalist-materias">
|
||||
<option
|
||||
v-for="materia in materias.filter(m => selected_carrera_id == 0 || m.carrera_id == selected_carrera_id).filter(m => !puesto.materias.find(p => p.materia_id == m.materia_id))"
|
||||
:value="`${materia.clave_materia} - ${materia.materia_nombre}`">
|
||||
</datalist>
|
||||
<?php } ?>
|
||||
|
||||
<hr>
|
||||
<style>
|
||||
.list-group-item-action:hover {
|
||||
<?php if ($user->acceso == 'w') { ?>
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
<?php } else { ?>
|
||||
background-color: rgba(0, 0, 255, 0.1);
|
||||
<?php } ?>
|
||||
}
|
||||
|
||||
.list-group-item-action:active {
|
||||
<?php if ($user->acceso == 'w') { ?>
|
||||
background-color: rgba(255, 0, 0, 0.2);
|
||||
<?php } else { ?>
|
||||
background-color: rgba(0, 0, 255, 0.2);
|
||||
<?php } ?>
|
||||
}
|
||||
</style>
|
||||
<fieldset class="container mt-4">
|
||||
<legend class="text-center mb-3">
|
||||
Materias Asignadas <span class="badge badge-info">{{puesto.materias.length}}</span>
|
||||
</legend>
|
||||
|
||||
<!-- Assigned Subjects List -->
|
||||
<ul class="list-group shadow-sm" v-if="puesto.materias.length"
|
||||
style="max-height: 250px; overflow-y: auto;">
|
||||
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
|
||||
v-for="materia in puesto.materias" :key="materia.materia_id"
|
||||
<?php if ($user->acceso == 'w') { ?>
|
||||
@click="modificado = true; puesto.materias.splice(puesto.materias.indexOf(materia), 1); materias.push(materia)"
|
||||
<?php } ?>
|
||||
style="cursor: pointer; transition: background-color 0.3s ease;">
|
||||
<span class="flex-grow-1">
|
||||
{{materia.clave_materia}} - {{materia.materia_nombre}}
|
||||
</span>
|
||||
<?php if ($user->acceso == 'w') { ?>
|
||||
<!-- Delete icon - assuming using FontAwesome, replace with your icon system if different -->
|
||||
<i class="fas fa-trash-alt text-danger ml-3" style="cursor: pointer;"></i>
|
||||
<?php } ?>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Empty State Alert -->
|
||||
<div class="alert alert-light text-center" role="alert" v-else>
|
||||
No hay materias asignadas
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
|
||||
</div>
|
||||
<?php if ($user->acceso == 'w') { ?>
|
||||
<div class="card-footer d-flex justify-content-between align-items-center">
|
||||
<!-- <small class="text-muted">Última actualización: {{ puesto.lastUpdate | formatDate }}</small> -->
|
||||
<button type="button" class="btn btn-primary"
|
||||
@click="actualizarPuesto(puesto.puesto_id, puesto.materias, puesto.encargado?.usuario_id); window.scrollTo(0, 0); setTimeout(() => window.scrollTo(0, 0), 100);">
|
||||
{{ puesto.encargado ? 'Guardar cambios' : 'Guardar sin encargado' }}
|
||||
</button>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="alert alert-dark" role="alert">
|
||||
No hay puestos registrados
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal" tabindex="-1" role="dialog" accesskey="a" id="nuevo-puesto">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header text-white">
|
||||
<h5 class="modal-title">Agregar un nuevo puesto</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">
|
||||
<fieldset>
|
||||
<legend>Nombre del puesto</legend>
|
||||
<div class="form-row">
|
||||
<input type="text" class="form-control" v-model="new_puesto"
|
||||
placeholder="Área del puesto">
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-danger" data-dismiss="modal"
|
||||
@click="new_puesto = null">Cancelar</button>
|
||||
<button type="button" class="btn btn-primary" data-dismiss="modal"
|
||||
@click="nuevoPuesto(new_puesto); new_puesto = null">Guardar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal" tabindex="-1" role="dialog" accesskey="a" id="eliminar-puesto">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document" v-if="to_delete">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header text-white">
|
||||
<h5 class="modal-title">Eliminar puesto</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">
|
||||
<fieldset>
|
||||
<legend>¿Estás seguro de que deseas eliminar el puesto?</legend>
|
||||
<p>Esta acción no se puede deshacer. Se perderán las asignaciones de materias y de
|
||||
encargado.</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-danger" data-dismiss="modal"
|
||||
@click="new_puesto = null">Cancelar</button>
|
||||
<button type="button" class="btn btn-danger" data-dismiss="modal"
|
||||
@click="eliminarPuesto(to_delete.puesto_id)">Eliminar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?
|
||||
} else {
|
||||
?>
|
||||
<main class="container mt-5" style="min-height: 70vh;">
|
||||
<div class="row">
|
||||
<div class="col-md-8 offset-md-2">
|
||||
<div class="card">
|
||||
<div class="card-header text-white bg-danger">
|
||||
Sin Facultad Asociada
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Atención</h5>
|
||||
<p class="card-text">No tienes una facultad asociada a tu perfil. El rol
|
||||
<?= $user->rol['rol'] ?> no tiene acceso a esta sección.
|
||||
</p>
|
||||
</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/datalist.js"></script>
|
||||
<script src="js/puestos.js?<?= rand(0, 2) ?>" type="module"></script>
|
||||
<script src="js/scrollables.js"></script>
|
||||
<script>
|
||||
let modificado = false;
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.collapse').collapse
|
||||
|
||||
window.onbeforeunload = function () {
|
||||
if (modificado) {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user