PAAD
/
paad


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cliente REST</title>
    <script type="module" src="../js/client.js" defer></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/indivisa.css">
</head>

<body>
    <header class="container-fluid bg-dark text-white text-center">
        Página de Cliente REST
    </header>
    <main class="container" @vue:mounted="mounted">
        <div v-for="error in store.errors" class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong>Error!</strong> {{error}}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        <div class="row">
            <div class="col-12">
                <h1>Periodos activos</h1>
            </div>
        </div>
        <ul class="list-group">

            <li href="#" class="list-group-item" v-for="(periodo, index) in store.periodosV1" :key="periodo.IdPeriodo">
                <!-- v1
                IdNivel: number;
                IdPeriodo: number;
                NombreNivel: string;
                NombrePeriodo: string;
                -->
                <div class="row">
                    <span class="badge bg-secondary">{{index}}</span>
                    <h2 class="text-center">
                        Información
                    </h2>
                    <div class="col-md-3">
                        <strong>ID Nivel:</strong> {{periodo.IdNivel}}
                    </div>
                    <div class="col-md-3">
                        <strong>ID Periodo:</strong> {{periodo.IdPeriodo}}
                    </div>
                    <div class="col-md-3">
                        <strong>Nombre Nivel:</strong> {{periodo.NombreNivel}}
                    </div>
                    <div class="col-md-3">
                        <strong>Nombre Periodo:</strong> {{periodo.NombrePeriodo}}
                    </div>
                </div>
                <!--
                    FechaFin: string;
                    FechaInicio: string;
                    IdPeriodo: number;
                    -- info(IdPeriodo) --
                -->
                <div class="row mt-2" v-if="complete(periodo.IdPeriodo)">
                    <h2 class="text-center">
                        Fechas
                    </h2>
                    <div class="col-md-2">
                        <strong>Fecha Inicio:</strong> {{info(periodo.IdPeriodo).FechaInicio}}
                    </div>
                    <div class="col-md-2">
                        <strong>Fecha Fin:</strong> {{info(periodo.IdPeriodo).FechaFin}}
                    </div>
                </div>
                <div v-if="!periodo.in_db" class="row mt-2">
                    <!-- 
                        PeriodoV2
                                ClaveCarrera: string;
                                NombreCarrera: string;
                        PeriodoV1
                                IdNivel: number;
                    -->
                    <div class="col-md-12">
                        <button class="btn btn-primary float-end" @click="store.addPeriodo(periodo)"
                            :disabled="!complete(periodo.IdPeriodo)">
                            Agregar
                            <i class="ing ing-mas"></i>
                        </button>
                    </div>
                </div>
                <div v-else class="row mt-2">
                    <div class="col-md-12">
                        <button class="btn btn-success float-end disabled">
                            Agregado
                            <i class="ing-aceptar"></i>
                        </button>
                    </div>
                </div>

                <div class="row mt-2">
                    <div class="col-md-12">
                        <button class="btn btn-secondary float-end" @click="store.addCarreras(periodo.IdPeriodo)">
                            Sincronizar Carreras
                            <i class="ing ing-link"></i>
                        </button>
                    </div>
                </div>
                <div class="accordion mt-2">
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" data-bs-toggle="collapse"
                                :data-bs-target="`#collapse-${periodo.IdPeriodo}`">
                                Horarios del periodo
                            </button>
                        </h2>
                        <div :id="`collapse-${periodo.IdPeriodo}`" class="accordion-collapse collapse">
                            <div class="accordion-body">
                                <ul class="list-group">
                                    <li class="list-group-item"
                                        v-for="periodo in store.periodosV2.filter(periodov2 => periodov2.IdPeriodo === periodo.IdPeriodo)">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <strong>Clave Carrera:</strong> {{periodo.ClaveCarrera}}
                                            </div>
                                            <div class="col-md-6">
                                                <strong>Nombre Carrera:</strong> {{periodo.NombreCarrera}}
                                            </div>

                                            <div class="col-md-3">
                                                <span class="badge float-end mx-1"
                                                    :class="periodo.linked ?'bg-success':'bg-secondary'">
                                                    <i class="ing-link"></i>
                                                </span>
                                                <span class="badge float-end mx-1"
                                                    :class="periodo.in_db ?'bg-success':'bg-secondary'">
                                                    <i class="ing-aceptar"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </main>
    <footer>

    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>

</body>

</html>