PAAD
/
paad


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<?php
require_once 'class/c_login.php';
$user = Login::get_user();

$user->access();
if (in_array($user->acceso, ['n']))
    die(header('Location: main.php?error=1'));

$user->print_to_log('Consultar horario');

$write = $user->admin || in_array($user->acceso, ['r']);
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Consultar horario |
        <?= $user->facultad['facultad'] ?>
    </title>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/plain; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <?php include_once "import/html_css_files.php"; ?>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<!--  -->

<body style="display: block;">
    <?php
    include('include/constantes.php');
    include("import/html_header.php");
    html_header("Consultar horario", "Sistema de gestión de checador");
    ?>
    <main class="container px-4 mt-4 h-100" id="app" v-cloak @vue:mounted="mounted" style="min-height: 60vh;"
        v-scope="">
        <section id="message"></section>
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home"
                    type="button" role="tab" aria-controls="nav-home" aria-selected="true" @click="horarios.data = []">
                    Horario por profesor
                </button>
                <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button"
                    role="tab" aria-controls="nav-profile" aria-selected="false" @click="horarios.data = []">
                    Horario por grupo
                </button>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                <div class="form-box">
                    <div class="form-group row">
                        <label for="profesor" class="col-4 col-form-label">Seleccionar profesor</label>
                        <div class="col-6">
                            <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 un profesor" list="dlProfesor" v-model="profesores.search"
                                    @input="horarios.fetch(null)">
                                <button type="button" class="btn btn-outline-danger btn-sm form-control col ml-auto"
                                    @click="profesores.search = null; horarios.data = []">
                                    <i class="ing-borrar"></i>
                                </button>
                            </div>
                            <datalist id="dlProfesor">
                                <option v-for="profesor in profesores.data" :key="profesor.profesor_id"
                                    :value="`(${profesor.profesor_clave}) ${profesor.profesor_nombre}`">
                            </datalist>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab"
                v-scope="{facultad_id: null, carrera_id: null, grupo: null}">
                <?
                require('import/periodo.php');
                ?>
                <div class="form-box" v-show="facultades.data.every(facultad => facultad.carreras.length > 0)">
                    <div class="form-group row">
                        <label for="carrera_id" class="col-4 col-form-label">Carrera</label>
                        <div class="col-6">
                            <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">
                                    <div v-for="facultad in facultades.data">
                                        <li class="not-selectable">
                                            {{ facultad.facultad_nombre }}
                                        </li>
                                        <li v-for="carrera in facultad.carreras" :key="carrera.carrera_id"
                                            @click="carrera_id = carrera.carrera_id; facultad_id = facultad.facultad_id; grupo = null">
                                            {{ carrera.carrera_nombre }}
                                        </li>
                                    </div>
                                </ul>
                                <input type="hidden" id="carrera_id" name="id">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-box" v-if="carrera_id">
                    <div class="form-group row">
                        <label for="grupo" class="col-4 col-form-label">Grupo</label>
                        <div class="col-6">
                            <div id="dlGrupo" class="datalist datalist-select mb-1 w-100">
                                <div class="datalist-input">
                                    Selecciona un grupo
                                </div>
                                <span class="icono ing-buscar"></span>
                                <ul style="display:none">
                                    <li v-for="grupo in facultades.data.find(facultad => facultad.facultad_id === facultad_id).carreras.find(carrera => carrera.carrera_id === carrera_id).grupos"
                                        @click="grupo = grupo; horarios.fetch(grupo, carrera_id)">
                                        {{ grupo }}
                                    </li>
                                </ul>
                                <input type="hidden" id="grupo" name="grupo">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        </div>

        <hr>
        <div id="btn-excel-horario" class="mb-2 float-right hidden" v-if="horarios.data.length > 0">
            <button class="btn btn-outline-secondary " title="Imprimir PDF" @click="
            // hide all not the table
            Array.from(document.body.children).forEach(child => {
                if (child.id !== 'app') {
                    child.classList.add('d-none');
                }
                // hide this button
                document.getElementById('btn-excel-horario').classList.add('d-none');
            });
            
            window.print()

            // show all
            Array.from(document.body.children).forEach(child => {
                child.classList.remove('d-none');
            });
            // show this button
            document.getElementById('btn-excel-horario').classList.remove('d-none');
            
            ">
                <span class="ing-descarga ing-fw"></span> Exportar
            </button>
        </div>
        <div class="table-responsive" v-if="horarios.data.length > 0">
            <table class="table table-bordered table-sm table-responsive-sm" id="table-horario">
                <thead class="thead-dark">
                    <tr id="headers">
                        <th scope="col" class="text-center">Hora</th>
                        <th scope="col" class="text-center">Lunes</th>
                        <th scope="col" class="text-center">Martes</th>
                        <th scope="col" class="text-center">Miércoles</th>
                        <th scope="col" class="text-center">Jueves</th>
                        <th scope="col" class="text-center">Viernes</th>
                        <th scope="col" class="text-center" v-if="horarios.structure?.sábado">Sábado</th>
                    </tr>
                </thead>
                <tbody id="horario">
                    <tr v-for="{ hour, block } in horarios.blocks" style="height: 2em;">
                        <th v-if="block === 0" rowspan="4" scope="row" class="text-center align-middle"
                            style="width: 6%;">
                            {{ hour.toString().padStart(2, '0') }}:{{ block === 0 ? '00' :
                            block.toString().padStart(2,'0') }}
                        </th>

                        <td :rowspan="horarios.getHorarioData(hour, block, día)?.bloques ?? 1"
                            v-for="día in [...Array(horarios.structure?.sábado ? 6 : 5).keys()].map(i => i + 1).filter(día =>  !horarios.isOccupied(hour, block, día))"
                            :key="`${hour}-${block}-${día}`"
                            :class="horarios.getHorarioData(hour, block, día) ? 'bg-light' : ''"
                            class="align-middle h-100"
                            :style="`width: ${(100 - 6) / (horarios.structure?.sábado ? 6 : 5)}%;`" :data-id="horarios.getHorarioData(hour, block, día)?.horario_id">
                            <!-- Content Container -->
                            <div class="overflow-auto" :style="`max-height: ${horarios.getHorarioData(hour, block, día)?.bloques * 2}em;
                                min-height: 2em;
                                `">
                                <div v-if="horarios.getHorarioData(hour, block, día)" class="text-center">
                                    <small class="font-weight-bolder font-weight-lighter text-muted">
                                        {{horarios.getHorarioData(hour, block, día)?.facultad}}
                                    </small>
                                    <br>
                                    <div class="my-2">
                                        <small class="text-muted">
                                            {{horarios.getHorarioData(hour, block, día)?.horario_hora.slice(0, 5)}}
                                        </small>
                                        <b style="line-height: 80%;">
                                            {{horarios.getHorarioData(hour, block, día)?.materia}}
                                        </b>
                                    </div>
                                    <small class="text-muted">
                                        {{horarios.getHorarioData(hour, block, día)?.carrera}}
                                    </small>
                                    <br>
                                    <span>Salón: </span>
                                    <small class="font-weight-lighter text-muted">
                                        {{horarios.getHorarioData(hour, block, día)?.salon}}
                                    </small>
                                </div>
                                <div v-else> &nbsp; </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>
</body>
<? require_once "import/html_footer.php" ?>
<script src="js/scrollables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="js/horario.js" type="module" defer></script>

</html>