PAAD
/
paad


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Supervisor - Seleccionar rutas</title>
    <?php
    include 'import/html_css_files.php';
    ?>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <?php
    include "import/html_header.php";
    html_header(    
        "Selecciona la ruta a supervisar",
        "Sistema de gestión de checador",
    );
    ?>
    <main class="container-fluid px-4" id="app" v-cloak @vue:mounted="mounted">
        <!-- filtros -->
        <div class="card mt-4">
            <div class="card-header bg-dark d-flex justify-content-between align-items-center flex-wrap text-white">
                <h2 class="col-md-10 col-12 text-white font-weight-bold text-uppercase text-center">
                    Facultad de ingeniería: {{ store.rutas.data[store.rutas.selected]?.ruta ?? '' }}
                </h2>
                <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                    data-target="#editar-ubicaciones">
                    <i class="ing-editar"></i>
                </button>
            </div>
            <div class="card-body bg-info">
                <div class="container-fluid">
                    <div class="row flex-nowrap overflow-auto">
                        <!-- size big -->
                        <div class="col-9 col-sm-7 col-md-4 col-lg-3 col-xl-2 my-2"
                            v-for="(ruta, index) in store.rutas.data" :key="ruta.id">
                            <span class="shadow badge badge-pill py-2 px-4" @click="store.selectRuta(ruta.id)"
                                :class="{ 'badge-primary': store.rutas.selected == ruta.id, 'badge-light text-primary': store.rutas.selected != ruta.id, 'badge-dark text-muted disabled' : ruta.horarios.every(({estado}) => estado != 0) && store.rutas.selected != ruta.id }">
                                {{ ruta.ruta }}
                                <span class="badge mx-3" v-if="ruta.horarios.some(({estado}) => estado == 0)"
                                    :class="{ 'badge-success': ruta.horarios.length > 0, 'badge-danger': ruta.horarios.length == 0 }">
                                    {{ruta.horarios.filter(({estado}) => estado != 0).length}} / {{
                                    ruta.horarios.length}}
                                </span>
                                <span v-else class="badge mx-3"
                                    :class="{ 'badge-success': ruta.horarios.length > 0, 'badge-danger': ruta.horarios.length == 0 }">

                                    <i class="ing-aceptar"></i>
                                </span>
                                <span class="sr-only">Faltan {{ruta.horarios.filter(({estado}) => estado == 0).length}}
                                    horarios por registrar</span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer bg-dark d-flex justify-content-between align-items-center flex-wrap text-white">
                <button class="btn btn-info" :disabled="store.bloquesHorario.selected == 0"
                    @click="store.selectBloque(store.bloquesHorario.selected - 1)">
                    <i class="ing-caret ing-rotate-90"></i>
                    <span class="d-none d-md-inline-block">
                        Bloque horario anterior
                    </span>
                </button>

                <h3 class="text-white font-weight-bold text-uppercase text-center">
                    {{ store.hora_inicio.slice(0, 5) }} - {{ store.hora_fin.slice(0, 5) }}
                </h3>

                <button class="btn btn-info" @click="store.selectBloque(store.bloquesHorario.selected + 1)"
                    :disabled="store.bloquesHorario.selected == store.bloquesHorario.data.length - 1">
                    <span class="d-none d-md-inline-block">
                        Bloque horario siguiente
                    </span>
                    <i class="ing-caret ing-rotate-270"></i>
                </button>
            </div>
        </div>

        <div class="mt-3 d-flex justify-content-center flex-wrap">
            <!-- refresh -->
            <div class="table-responsive">
                <table class="table table-hover table-striped table-bordered table-sm">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col" class="text-center align-middle text-nowrap px-2">
                                <button @click="store.invertir" class="btn btn-info mr-3" v-if="clases.length > 0">
                                    <i class="ing-cambiar ing-rotate-90"></i>
                                </button>
                                Salón
                            </th>
                            <th scope="col" class="text-center align-middle text-nowrap px-2">Profesor</th>
                            <th scope="col" class="text-center align-middle text-nowrap px-2">Horario</th>
                            <th scope="col" class="text-center align-middle text-nowrap px-2">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-if="clases.length == 0">
                            <td colspan="6" class="text-center">No hay clases en este horario</td>
                        </tr>
                        <tr v-for="clase in clases" :key="clase.id">
                            <td class="text-center align-middle">{{ clase.salon }}</td>
                            <td class="text-center align-middle">{{ clase.profesor }} {{ clase.materia }}
                            <td class="text-center align-middle">
                                {{ clase.hora_inicio }} - {{ clase.hora_fin }}
                            </td>
                            <td class="text-center align-middle text-nowrap">
                                <button class="btn btn-outline text-center mx-2" v-for="estado in estados"
                                    :key="estado.id" @click="store.cambiarEstado(clase.id, estado.id)"
                                    :class="[{'active': estado.id === clase.estado}, `btn-outline-${estado.color}`]">
                                    <i :class="estado.icon"></i>
                                </button>

                                <button class="btn btn-outline-primary text-center mx-2" data-toggle="modal"
                                    data-target="#editar-comentario" :class="{ 'active': clase.comentario != '' }"
                                    @click="store.selectEditor(clase.id)">
                                    <i class="ing-editar"></i>
                                    <span class="badge badge-pill badge-primary"
                                        v-if="clase.comentario != ''">...</span>
                                    <span class="sr-only">Editar comentario</span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- MODAL -->
        <div class="modal" tabindex="-1" id="editar-ubicaciones">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Editar rutas</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <h2>Reordena las rutas</h2>
                            <ul id="sortable" class="list-group">
                                <li class="list-group-item" v-for="ruta in store.rutas.data" :key="ruta.id"
                                    :id="'ruta-' + ruta.id"
                                    :class="[ruta.horarios.every(horario => horario.estado != 0) ? ['disabled', 'bg-light', 'undraggable'] : '']">
                                    {{ruta.ruta}}
                                </li>
                            </ul>
                        </div>

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

        <button class="btn btn-primary btn-lg btn-block mb-4" @click="store.guardarCambios">
            <i class="ing-guardar"></i>
            Guardar cambios
        </button>

        <div class="modal" tabindex="-1" id="editar-comentario">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Añadir comentario</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <h2 class="text-center">Comentarios de la clase</h2>
                            <br>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-primary text-white">Comentario
                                        <button class="btn btn-light ml-2 text-primary"
                                            @click="store.limpiarComentario">
                                            <i class="ing-borrar"></i>
                                        </button>
                                    </span>
                                </div>
                                <textarea class="form-control" aria-label="Comentarios de la clase"
                                    v-model="store.editor.texto"></textarea>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-danger" data-dismiss="modal">
                            <i class="ing-cancelar"></i>
                            Cancelar
                        </button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"
                            @click="store.guardarComentario">
                            Guardar comentario
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <?php
    include "import/html_footer.php";
    ?>
    <!-- filtro modal -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="js/jquery-ui.touch-punch.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <?php include_once 'js/messages.php'; ?>
    <script src="https://unpkg.com/petite-vue"></script>
    <script>
    </script>
</body>

</html>