PAAD
/
paad


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							<!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';
    ?>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

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

    html_header("Periodos");
    ?>
    <main class="container-fluid px-4 my-4" id="app" v-cloak @vue:mounted="mounted" style="min-height: 70vh;"
        v-scope="">
        <div aria-live="polite" aria-atomic="true" style="position: relative">
            <div style="position: fixed; bottom: 2%; right: 2%; z-index: 9999; min-width: 300px;">

                <!-- Loop for messages -->
                <div class="toast show shadow-sm mb-3 bg-white shadow-sm" role="alert" aria-live="assertive"
                    aria-atomic="true" v-for="(message, index) in messages"
                    @vue:mounted="$(`#toast-${message.timestamp.getTime()}`).toast({delay: 5000}).toast('show').on('hidden.bs.toast', () => messages.splice(index, 1))" " :key="
                    message.timestamp.getTime()" :id="`toast-${message.timestamp.getTime()}`">
                    <div class="toast-header" :class="`bg-primary text-white`">
                        <strong class="mr-auto text-uppercase text-center w-100 px-4">
                            <i
                                :class="`text-${message.type} fas fa-${message.type === 'danger' ? 'exclamation-triangle' : message.type === 'success' ? 'check-circle' : 'info-circle'} mr-2`"></i>
                            {{ message.title }}
                        </strong>
                        <small class="text-light">{{ message.timestamp.toLocaleString() }}</small>
                        <button type="button" class="ml-2 mb-1 close text-light" aria-label="Close"
                            @click="$(`#toast-${message.timestamp.getTime()}`).toast('hide')">
                            <span aria-hidden="true">
                                <i class="fas fa-times"></i>
                            </span>
                        </button>
                    </div>
                    <div class="toast-body">
                        {{ message.text }}
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="d-flex flex-wrap flex-row-reverse align-items-center mb-3">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createPeriodoModal">
                    <div class="ing-mas"></div>
                    Crear periodo
                </button>
            </div>
            <div v-if="periodos.length">
                <table class="table table-sm table-hover table-striped table-bordered">
                    <thead class="thead-dark">
                        <tr class="text-center text-uppercase">
                            <th scope="col" class="align-middle" style="width: 8%;">SGU</th>
                            <th scope="col" class="align-middle" style="width: 7%;">Clave</th>
                            <th scope="col" class="align-middle" style="width: 25%;">Nombre</th>
                            <th scope="col" class="align-middle" style="width: 20%;">Nivel</th>
                            <th scope="col" class="align-middle" style="width: 15%;">Fecha de inicio</th>
                            <th scope="col" class="align-middle" style="width: 15%;">Fecha de fin</th>
                            <th scope="col" class="align-middle" style="width: 10%;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(periodo, index) in periodos" :key="periodo.periodo_id">
                            <td class="text-center align-middle">
                                {{ periodo.id_periodo_sgu }}
                            </td>
                            <td class="text-center align-middle">
                                {{ periodo.periodo_clave }}
                            </td>
                            <td class="align-middle">
                                <input type="text" name="periodo_nombre" id="" v-model="periodo.periodo_nombre" class="form-control"
                                    required>
                            </td>
                            <td class="align-middle text-center">
                                <div class="dropdown">
                                    <button class="btn btn-outline-secondary dropdown-toggle" type="button"
                                        id="nivelDropdown" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                        {{ periodo.nivel }}
                                    </button>
                                    <div class="dropdown-menu dropdown-menu" aria-labelledby="nivelDropdown">
                                        <a class="dropdown-item" v-for="nivel in niveles" :key="nivel.nivel_id"
                                            href="#/" @vue:mounted="$('.dropdown-toggle').dropdown()"
                                            @click="changeNivel(periodo, nivel.nivel_id)"
                                            :class="{'active': nivel.nivel_id === periodo.nivel_id}">{{nivel.nivel_nombre}}</a>
                                    </div>
                                </div>
                            </td>
                            <td class="align-middle">
                                <input type="date" class="form-control" v-model="periodo.periodo_fecha_inicio" required
                                    :max="periodo.periodo_fecha_fin"
                                    @change="changeFechaInicio(periodo, periodo.periodo_fecha_inicio)">
                            </td>
                            <td class="align-middle">
                                <input type="date" class="form-control" v-model="periodo.periodo_fecha_fin" required
                                    :min="periodo.periodo_fecha_inicio"
                                    @change="changeFechaFin(periodo, periodo.periodo_fecha_fin)">
                            </td>
                            <td class="align-middle text-center">
                                <button type="button" class="btn btn-outline-primary" @click="updatePeriodo(periodo)"
                                    :disabled="[periodo.id_periodo_sgu, periodo.periodo_clave, periodo.periodo_nombre].some(value => !value)">
                                    <i class="ing-guardar"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger" @click="deletePeriodo(periodo)">
                                    <i class="ing-basura"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="alert alert-info" role="alert" v-else>
                No hay periodos registrados
            </div>
        </div>

        <!-- Modal to create periodo -->
        <div class="modal fade" id="createPeriodoModal" tabindex="-1" role="dialog"
            aria-labelledby="createPeriodoModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content"
                    v-scope="{newPeriodo: { periodo_nombre: null, nivel_id: '', periodo_fecha_inicio: null, periodo_fecha_fin: null, id_periodo_sgu: null, periodo_clave: null }}">
                    <div class="modal-header">
                        <h5 class="modal-title" id="createPeriodoModalLabel">Crear periodo</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Form to create periodo -->
                        <form>
                            <div class="form-group">
                                <label for="periodo_nombre">Nombre del periodo</label>
                                <input type="text" class="form-control" id="periodo_nombre" required
                                    v-model="newPeriodo.periodo_nombre">
                            </div>
                            <div class="form-group">
                                <label for="nivel_id">Nivel</label>
                                <select class="form-control" id="nivel_id" required v-model="newPeriodo.nivel_id">
                                    <option value="" selected disabled>Selecciona un nivel</option>
                                    <option v-for="nivel in niveles" :key="nivel.nivel_id" :value="nivel.nivel_id">
                                        {{ nivel.nivel_nombre }}
                                    </option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="periodo_fecha_inicio">Fecha de inicio</label>
                                <input type="date" class="form-control" id="periodo_fecha_inicio" required
                                    v-model="newPeriodo.periodo_fecha_inicio" :max="newPeriodo.periodo_fecha_fin">
                            </div>
                            <div class="form-group">
                                <label for="periodo_fecha_fin">Fecha de fin</label>
                                <input type="date" class="form-control" id="periodo_fecha_fin" required
                                    v-model="newPeriodo.periodo_fecha_fin" :min="newPeriodo.periodo_fecha_inicio">
                            </div>
                            <!-- Newly added fields -->
                            <div class="form-group">
                                <label for="id_periodo_sgu">ID Periodo SGU</label>
                                <input type="text" class="form-control" id="id_periodo_sgu" required
                                    v-model="newPeriodo.id_periodo_sgu" inputmode="numeric" pattern="[0-9]*" min="0">
                            </div>
                            <div class="form-group">
                                <label for="periodo_id">Periodo Clave</label>
                                <input type="text" class="form-control" id="periodo_clave" required
                                    v-model="newPeriodo.periodo_clave" inputmode="numeric" pattern="[0-9]*" min="0">
                            </div>
                        </form>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger" data-dismiss="modal"
                            @click="Object.keys(newPeriodo).forEach(key => newPeriodo[key] = null); newPeriodo.nivel_id = ''">Cerrar</button>
                        <button type="button" class="btn btn-primary" @click="createPeriodo(newPeriodo)">Crear
                            periodo</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <?
    include "import/html_footer.php"; ?>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
        integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
        crossorigin="anonymous"></script>
    <script src="js/periodos.js?<?= rand(0, 2) ?>" type="module"></script>
    <script src="js/scrollables.js"></script>
</body>

</html>