155 lines
7.0 KiB
HTML
155 lines
7.0 KiB
HTML
<!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> |