feat: implementacion de dashboards por rol, soporte de clases virtuales concurrentes en importador de sheets y cartelera del dia
This commit is contained in:
@@ -0,0 +1,254 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Gestión de Ciclo Lectivo - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
|
||||
<div>
|
||||
<h1 class="h3 fw-bold mb-1">
|
||||
<i class="bi bi-calendar-range text-primary me-2"></i>Gestión de Ciclo Lectivo y Períodos Académicos
|
||||
</h1>
|
||||
<p class="text-muted mb-0 small">
|
||||
Administración de cuatrimestres, años académicos, fechas de inicio/fin y selección del ciclo lectivo activo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
{% if can_edit %}
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAddTerm">
|
||||
<i class="bi bi-plus-lg me-1"></i>Nuevo Ciclo Lectivo
|
||||
</button>
|
||||
{% endif %}
|
||||
<a href="/schedule/commissions_view" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-diagram-3 me-1"></i>Ver Cursadas
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Academic Terms Table -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Código</th>
|
||||
<th>Nombre del Ciclo Lectivo</th>
|
||||
<th>Año</th>
|
||||
<th>Período / Modalidad</th>
|
||||
<th>Fechas del Período</th>
|
||||
<th>Comisiones</th>
|
||||
<th>Estado Institucional</th>
|
||||
{% if can_edit %}
|
||||
<th class="text-end">Acciones</th>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for term in terms %}
|
||||
{% set t_stat = stats[term.id] or {'commissions_count': 0} %}
|
||||
<tr class="{% if term.is_current %}table-primary-subtle{% endif %}">
|
||||
<td>
|
||||
<span class="badge font-monospace bg-primary-subtle text-primary border fs-6">{{ term.code }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-bold text-body">{{ term.name }}</div>
|
||||
<small class="text-muted">ID: #{{ term.id }}</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="fw-semibold text-body">{{ term.year }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary-subtle text-secondary border">
|
||||
{{ term.period_type }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if term.start_date and term.end_date %}
|
||||
<small class="text-body font-monospace">
|
||||
<i class="bi bi-calendar3 me-1 text-primary"></i>{{ term.start_date }} - {{ term.end_date }}
|
||||
</small>
|
||||
{% else %}
|
||||
<small class="text-muted">Sin fechas fijadas</small>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-info-subtle text-info border">
|
||||
<i class="bi bi-diagram-3 me-1"></i>{{ t_stat.commissions_count }} comisiones
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if term.is_current %}
|
||||
<span class="badge bg-success text-white px-2 py-1 shadow-sm">
|
||||
<i class="bi bi-check-circle-fill me-1"></i>Ciclo Activo Actual
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border">
|
||||
{% if term.is_active %}Habilitado{% else %}Archivado{% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
{% if can_edit %}
|
||||
<td class="text-end">
|
||||
<div class="btn-group btn-group-sm">
|
||||
{% if not term.is_current %}
|
||||
<form method="POST" action="/admin/academic_term_set_current" class="d-inline"
|
||||
onsubmit="return confirm('¿Desea establecer este ciclo lectivo como el Activo para todo el sistema?');">
|
||||
<input type="hidden" name="id" value="{{ term.id }}">
|
||||
<button type="submit" class="btn btn-outline-success py-0 px-2" title="Establecer como Ciclo Activo">
|
||||
<i class="bi bi-check2-circle me-1"></i>Activar
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
<button type="button" class="btn btn-outline-secondary py-0 px-2"
|
||||
data-bs-toggle="modal" data-bs-target="#modalEditTerm{{ term.id }}"
|
||||
title="Editar Ciclo Lectivo">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Editar Ciclo Lectivo -->
|
||||
<div class="modal fade text-start" id="modalEditTerm{{ term.id }}" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form method="POST" action="/admin/academic_term_edit">
|
||||
<input type="hidden" name="id" value="{{ term.id }}">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h6 fw-bold">
|
||||
<i class="bi bi-pencil-square text-primary me-2"></i>Editar Ciclo Lectivo
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-5">
|
||||
<label class="form-label small fw-semibold">Código *</label>
|
||||
<input type="text" name="code" class="form-control form-control-sm font-monospace" value="{{ term.code }}" required>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<label class="form-label small fw-semibold">Año Calendario *</label>
|
||||
<input type="number" name="year" class="form-control form-control-sm" value="{{ term.year }}" min="2020" max="2050" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Nombre Descriptivo *</label>
|
||||
<input type="text" name="name" class="form-control form-control-sm" value="{{ term.name }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Tipo de Período</label>
|
||||
<select name="period_type" class="form-select form-select-sm">
|
||||
<option value="Primer Cuatrimestre" {% if term.period_type == 'Primer Cuatrimestre' %}selected{% endif %}>Primer Cuatrimestre</option>
|
||||
<option value="Segundo Cuatrimestre" {% if term.period_type == 'Segundo Cuatrimestre' %}selected{% endif %}>Segundo Cuatrimestre</option>
|
||||
<option value="Anual" {% if term.period_type == 'Anual' %}selected{% endif %}>Anual</option>
|
||||
<option value="Curso de Verano" {% if term.period_type == 'Curso de Verano' %}selected{% endif %}>Curso de Verano</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small fw-semibold">Fecha Inicio</label>
|
||||
<input type="date" name="start_date" class="form-control form-control-sm" value="{{ term.start_date if term.start_date else '' }}">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small fw-semibold">Fecha Fin</label>
|
||||
<input type="date" name="end_date" class="form-control form-control-sm" value="{{ term.end_date if term.end_date else '' }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" name="is_current" id="isCurr{{ term.id }}" {% if term.is_current %}checked{% endif %}>
|
||||
<label class="form-check-label small fw-semibold text-primary" for="isCurr{{ term.id }}">
|
||||
Establecer como Ciclo Lectivo Activo Actual
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="is_active" id="isAct{{ term.id }}" {% if term.is_active %}checked{% endif %}>
|
||||
<label class="form-check-label small" for="isAct{{ term.id }}">Habilitado en el Sistema</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-sm btn-primary">Guardar Cambios</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="8" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-calendar-range fs-1 d-block mb-2"></i>
|
||||
No se encontraron ciclos lectivos registrados.
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Nuevo Ciclo Lectivo -->
|
||||
{% if can_edit %}
|
||||
<div class="modal fade" id="modalAddTerm" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form method="POST" action="/admin/academic_term_add">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h6 fw-bold">
|
||||
<i class="bi bi-calendar-plus text-primary me-2"></i>Nuevo Ciclo Lectivo / Período Académico
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-5">
|
||||
<label class="form-label small fw-semibold">Código *</label>
|
||||
<input type="text" name="code" class="form-control form-control-sm font-monospace" placeholder="ej. 2027-1" required>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<label class="form-label small fw-semibold">Año Calendario *</label>
|
||||
<input type="number" name="year" class="form-control form-control-sm" value="2026" min="2020" max="2050" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Nombre Descriptivo *</label>
|
||||
<input type="text" name="name" class="form-control form-control-sm" placeholder="ej. Ciclo Lectivo 2027 - 1º Cuatrimestre" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Tipo de Período</label>
|
||||
<select name="period_type" class="form-select form-select-sm">
|
||||
<option value="Primer Cuatrimestre">Primer Cuatrimestre</option>
|
||||
<option value="Segundo Cuatrimestre" selected>Segundo Cuatrimestre</option>
|
||||
<option value="Anual">Anual</option>
|
||||
<option value="Curso de Verano">Curso de Verano</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small fw-semibold">Fecha Inicio</label>
|
||||
<input type="date" name="start_date" class="form-control form-control-sm">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label small fw-semibold">Fecha Fin</label>
|
||||
<input type="date" name="end_date" class="form-control form-control-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="is_current" id="addIsCurr">
|
||||
<label class="form-check-label small fw-semibold text-primary" for="addIsCurr">
|
||||
Establecer de inmediato como Ciclo Lectivo Activo Actual
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-sm btn-primary">Crear Ciclo Lectivo</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,161 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Bitácora de Auditoría - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
|
||||
<div>
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-shield-check text-primary me-2"></i>Registro de Auditoría Institucional
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">Trazabilidad completa de operaciones, modificaciones y eventos de seguridad</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/main/dashboard" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bi bi-arrow-left me-1"></i>Volver al Panel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtros -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body p-3">
|
||||
<form method="GET" action="/admin/audit_logs" class="row g-2 align-items-center">
|
||||
<div class="col-md-4">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-transparent"><i class="bi bi-search"></i></span>
|
||||
<input type="text" name="search" class="form-control" placeholder="Buscar por email, IP o detalles..." value="{{ search }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select name="module" class="form-select form-select-sm">
|
||||
<option value="">Todos los módulos</option>
|
||||
{% for mod in modules %}
|
||||
<option value="{{ mod }}" {% if current_module == mod %}selected{% endif %}>{{ mod|capitalize }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select name="action" class="form-select form-select-sm">
|
||||
<option value="">Todas las acciones</option>
|
||||
{% for act in actions %}
|
||||
<option value="{{ act }}" {% if current_action == act %}selected{% endif %}>{{ act }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 d-flex gap-1">
|
||||
<button type="submit" class="btn btn-primary btn-sm flex-grow-1">
|
||||
<i class="bi bi-filter me-1"></i>Filtrar
|
||||
</button>
|
||||
{% if search or current_module or current_action %}
|
||||
<a href="/admin/audit_logs" class="btn btn-outline-secondary btn-sm" title="Limpiar filtros">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabla de Auditoría -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
{% if audit_logs %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light small text-uppercase">
|
||||
<tr>
|
||||
<th class="ps-3">Fecha / Hora</th>
|
||||
<th>Usuario</th>
|
||||
<th>Acción</th>
|
||||
<th>Módulo</th>
|
||||
<th>ID Entidad</th>
|
||||
<th>Detalles</th>
|
||||
<th class="pe-3">IP</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for log in audit_logs %}
|
||||
<tr>
|
||||
<td class="ps-3 text-nowrap">
|
||||
<span class="small font-monospace">{{ log.created_at }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold small">{{ log.user_email or 'Sistema' }}</div>
|
||||
</td>
|
||||
<td>
|
||||
{% if log.action == 'CREATE' %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle">{{ log.action }}</span>
|
||||
{% elif log.action == 'UPDATE' %}
|
||||
<span class="badge bg-primary-subtle text-primary border border-primary-subtle">{{ log.action }}</span>
|
||||
{% elif log.action == 'DELETE' %}
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger-subtle">{{ log.action }}</span>
|
||||
{% elif 'LOGIN' in log.action %}
|
||||
<span class="badge bg-info-subtle text-info border border-info-subtle">{{ log.action }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border">{{ log.action }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-body-secondary text-body border font-monospace small">{{ log.module }}</span>
|
||||
</td>
|
||||
<td class="font-monospace small text-muted">
|
||||
{{ log.entity_id or '-' }}
|
||||
</td>
|
||||
<td class="small text-muted" style="max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ log.details }}">
|
||||
{{ log.details or '-' }}
|
||||
</td>
|
||||
<td class="pe-3 font-monospace small text-muted">
|
||||
{{ log.ip_address or '-' }}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Paginación -->
|
||||
{% if pagination.pages > 1 %}
|
||||
<div class="p-3 border-top d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">
|
||||
Mostrando página {{ pagination.page }} de {{ pagination.pages }} ({{ pagination.total }} registros)
|
||||
</small>
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm mb-0">
|
||||
<li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
|
||||
<a class="page-link" href="/admin/audit_logs">
|
||||
«
|
||||
</a>
|
||||
</li>
|
||||
{% for p in pagination.iter_pages(left_edge=2, left_current=2, right_current=3, right_edge=2) %}
|
||||
{% if p %}
|
||||
<li class="page-item {% if p == pagination.page %}active{% endif %}">
|
||||
<a class="page-link" href="/admin/audit_logs">{{ p }}</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="page-item disabled"><span class="page-link">…</span></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
|
||||
<a class="page-link" href="/admin/audit_logs">
|
||||
»
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-shield-slash text-muted fs-1 d-block mb-2"></i>
|
||||
<h6 class="fw-bold">No se encontraron registros de auditoría</h6>
|
||||
<p class="text-muted small">Los eventos del sistema se registrarán automáticamente a medida que ocurran cambios.</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,210 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Gestión de Carreras - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
|
||||
<div>
|
||||
<h1 class="h3 fw-bold mb-1">
|
||||
<i class="bi bi-mortarboard text-primary me-2"></i>Gestión de Carreras y Titulaciones
|
||||
</h1>
|
||||
<p class="text-muted mb-0 small">
|
||||
Administración de programas académicos, tecnicaturas, licenciaturas y planes de estudio.
|
||||
</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
{% if can_edit %}
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAddCareer">
|
||||
<i class="bi bi-plus-lg me-1"></i>Nueva Carrera
|
||||
</button>
|
||||
{% endif %}
|
||||
<a href="/admin/subjects_list" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-book me-1"></i>Ver Asignaturas
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search & Filter Bar -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body py-2">
|
||||
<form method="GET" class="row g-2 align-items-center">
|
||||
<div class="col-md-6">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-body-tertiary"><i class="bi bi-search"></i></span>
|
||||
<input type="text" name="search" class="form-control"
|
||||
placeholder="Buscar carrera por nombre, código o descripción..."
|
||||
value="{{ search }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<button type="submit" class="btn btn-sm btn-primary me-1">
|
||||
<i class="bi bi-funnel me-1"></i>Filtrar
|
||||
</button>
|
||||
<a href="/admin/careers_list" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-x-circle me-1"></i>Limpiar
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Careers Table -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Carrera / Titulación</th>
|
||||
<th>Código</th>
|
||||
<th>Asignaturas</th>
|
||||
<th>Comisiones Activas</th>
|
||||
<th>Descripción</th>
|
||||
{% if can_edit %}
|
||||
<th class="text-end">Acciones</th>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for career in careers %}
|
||||
{% set c_stat = stats[career.id] or {'subjects_count': 0, 'commissions_count': 0} %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="rounded-circle p-2 bg-primary-subtle text-primary me-3">
|
||||
<i class="bi bi-mortarboard-fill"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="fw-bold text-body">{{ career.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{% if career.code %}
|
||||
<span class="badge font-monospace bg-secondary-subtle text-secondary border">{{ career.code }}</span>
|
||||
{% else %}
|
||||
<span class="text-muted small">-</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<a href="/admin/subjects_list" class="badge bg-info-subtle text-info border text-decoration-none">
|
||||
<i class="bi bi-book me-1"></i>{{ c_stat.subjects_count }} asignaturas
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-primary-subtle text-primary border">
|
||||
<i class="bi bi-diagram-3 me-1"></i>{{ c_stat.commissions_count }} comisiones
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="small text-muted text-truncate d-inline-block" style="max-width: 250px;">
|
||||
{{ career.description or '-' }}
|
||||
</span>
|
||||
</td>
|
||||
{% if can_edit %}
|
||||
<td class="text-end">
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-outline-secondary py-0 px-2"
|
||||
data-bs-toggle="modal" data-bs-target="#modalEditCareer{{ career.id }}"
|
||||
title="Editar Carrera">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
{% if c_stat.subjects_count == 0 %}
|
||||
<form method="POST" action="/admin/career_delete" class="d-inline"
|
||||
onsubmit="return confirm('¿Confirma que desea eliminar esta carrera permanentemente?');">
|
||||
<input type="hidden" name="id" value="{{ career.id }}">
|
||||
<button type="submit" class="btn btn-outline-danger py-0 px-2" title="Eliminar">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Modal Editar Carrera -->
|
||||
<div class="modal fade text-start" id="modalEditCareer{{ career.id }}" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form method="POST" action="/admin/career_edit">
|
||||
<input type="hidden" name="id" value="{{ career.id }}">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h6 fw-bold">
|
||||
<i class="bi bi-pencil-square text-primary me-2"></i>Editar Carrera
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Nombre de la Carrera *</label>
|
||||
<input type="text" name="name" class="form-control" value="{{ career.name }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Código / Sigla</label>
|
||||
<input type="text" name="code" class="form-control" value="{{ career.code or '' }}" placeholder="ej. LIC-SIS, PUEP">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Descripción</label>
|
||||
<textarea name="description" class="form-control" rows="3">{{ career.description or '' }}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-sm btn-primary">Guardar Cambios</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="6" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-mortarboard fs-1 d-block mb-2"></i>
|
||||
No se encontraron carreras registradas.
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Nueva Carrera -->
|
||||
{% if can_edit %}
|
||||
<div class="modal fade" id="modalAddCareer" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form method="POST" action="/admin/career_add">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h6 fw-bold">
|
||||
<i class="bi bi-mortarboard text-primary me-2"></i>Nueva Carrera / Titulación
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Nombre de la Carrera *</label>
|
||||
<input type="text" name="name" class="form-control" placeholder="ej. Licenciatura en Tecnologías Digitales" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Código / Sigla</label>
|
||||
<input type="text" name="code" class="form-control" placeholder="ej. TEC-DIG">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Descripción</label>
|
||||
<textarea name="description" class="form-control" rows="3" placeholder="Objetivos y alcance de la titulación..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-sm btn-primary">Crear Carrera</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,275 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Comisión {{ commission.full_code or commission.code }} — Edu-Space{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid py-4">
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<nav aria-label="breadcrumb" class="mb-3">
|
||||
<ol class="breadcrumb small">
|
||||
<li class="breadcrumb-item"><a href="/main/dashboard">Inicio</a></li>
|
||||
<li class="breadcrumb-item"><a href="/admin/commissions_list">Comisiones</a></li>
|
||||
<li class="breadcrumb-item active">{{ commission.full_code or commission.code }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- Flash Messages -->
|
||||
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Left: Commission Info + Teacher Assignment -->
|
||||
<div class="col-12 col-lg-4">
|
||||
|
||||
<!-- Commission Card -->
|
||||
<div class="card shadow-sm border-0 mb-4">
|
||||
<div class="card-header border-0 bg-primary text-white rounded-top py-3">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-diagram-3 fs-4"></i>
|
||||
<div>
|
||||
<div class="fw-bold font-monospace">{{ commission.full_code or commission.code }}</div>
|
||||
<small class="opacity-75">{{ commission.semester }} {{ commission.year }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="fw-bold mb-1">{{ commission.subject.name }}</h5>
|
||||
<p class="text-muted small mb-3">{{ commission.subject.code }}
|
||||
{% if commission.subject.career_obj %}— {{ commission.subject.career_obj.name }}{% endif %}
|
||||
</p>
|
||||
|
||||
<div class="d-flex flex-wrap gap-2 mb-3">
|
||||
{% if commission.shift %}
|
||||
{% set shift_colors = {'Mañana': 'warning', 'Tarde': 'info', 'Vespertino': 'secondary', 'Noche': 'dark'} %}
|
||||
<span class="badge bg-{{ shift_colors[commission.shift] or 'secondary' }}-subtle text-{{ shift_colors[commission.shift] or 'secondary' }} border border-{{ shift_colors[commission.shift] or 'secondary' }}-subtle">
|
||||
<i class="bi bi-clock me-1"></i>{{ commission.shift }}
|
||||
</span>
|
||||
{% endif %}
|
||||
<span class="badge {% if commission.active %}bg-success-subtle text-success{% else %}bg-secondary-subtle text-secondary{% endif %}">
|
||||
{{ 'Activa' if commission.active else 'Inactiva' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled small mb-0">
|
||||
<li class="d-flex justify-content-between py-1 border-bottom">
|
||||
<span class="text-muted">Cupo máximo</span>
|
||||
<strong>{{ commission.max_students }}</strong>
|
||||
</li>
|
||||
<li class="d-flex justify-content-between py-1 border-bottom">
|
||||
<span class="text-muted">Inscriptos</span>
|
||||
<strong class="{% if (commission.current_students or 0) >= commission.max_students %}text-danger{% else %}text-success{% endif %}">
|
||||
{{ commission.current_students or 0 }}
|
||||
</strong>
|
||||
</li>
|
||||
{% if commission.schedule %}
|
||||
<li class="d-flex justify-content-between py-1 border-bottom">
|
||||
<span class="text-muted">Horario</span>
|
||||
<span>{{ commission.schedule }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% if commission.virtual_link %}
|
||||
<li class="py-1">
|
||||
<a href="{{ commission.virtual_link }}" target="_blank" class="btn btn-sm btn-outline-info w-100">
|
||||
<i class="bi bi-camera-video me-1"></i>Acceso Virtual
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Teacher Assignment -->
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-header border-0 bg-transparent py-2 d-flex align-items-center gap-2">
|
||||
<i class="bi bi-person-video3 text-info"></i>
|
||||
<span class="fw-semibold">Docente Asignado</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if commission.teacher %}
|
||||
<div class="d-flex align-items-center gap-3 mb-3 p-2 rounded bg-info-subtle border border-info-subtle">
|
||||
<div class="avatar-sm bg-info rounded-circle d-flex align-items-center justify-content-center" style="width:40px;height:40px;flex-shrink:0;">
|
||||
<i class="bi bi-person-fill text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-semibold small">{{ commission.teacher.name }}</div>
|
||||
<div class="text-muted" style="font-size:.75rem;">{{ commission.teacher.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-warning py-2 small mb-3">
|
||||
<i class="bi bi-exclamation-triangle me-1"></i>Sin docente asignado
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if can_edit %}
|
||||
<form method="POST" action="/admin/commission_assign_teacher" id="assign-teacher-form">
|
||||
<input type="hidden" name="id" value="{{ commission.id }}">
|
||||
<div class="mb-2">
|
||||
<label class="form-label small fw-semibold mb-1">Cambiar / Asignar Docente</label>
|
||||
<select name="teacher_id" class="form-select form-select-sm" id="teacher-select">
|
||||
<option value="">— Sin asignar —</option>
|
||||
{% for teacher in teachers %}
|
||||
<option value="{{ teacher.id }}" {% if commission.teacher_id == teacher.id %}selected{% endif %}>
|
||||
{{ teacher.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-info btn-sm w-100" id="assign-teacher-btn">
|
||||
<i class="bi bi-person-check me-1"></i>Guardar Docente
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right: Students -->
|
||||
<div class="col-12 col-lg-8">
|
||||
|
||||
<!-- Enrolled Students -->
|
||||
<div class="card shadow-sm border-0 mb-4">
|
||||
<div class="card-header border-0 bg-transparent py-2 d-flex align-items-center justify-content-between">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-mortarboard text-success"></i>
|
||||
<span class="fw-semibold">Alumnos Inscriptos</span>
|
||||
<span class="badge bg-success-subtle text-success">{{ enrollments | length }}</span>
|
||||
</div>
|
||||
{% if can_edit %}
|
||||
<button class="btn btn-sm btn-success" data-bs-toggle="collapse" data-bs-target="#enroll-form" id="add-student-btn">
|
||||
<i class="bi bi-person-plus me-1"></i>Inscribir Alumno
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Enroll Student Form (collapsible) -->
|
||||
{% if can_edit %}
|
||||
<div class="collapse" id="enroll-form">
|
||||
<div class="card-body border-top bg-success-subtle py-3">
|
||||
<form method="POST" action="/admin/commission_enroll_student" id="enroll-student-form">
|
||||
<div class="row g-2 align-items-end">
|
||||
<div class="col-12 col-md-6">
|
||||
<label class="form-label small fw-semibold mb-1">Seleccionar Alumno</label>
|
||||
<select name="student_id" class="form-select form-select-sm" required id="student-select">
|
||||
<option value="">— Elegir alumno —</option>
|
||||
{% for student in students %}
|
||||
{% if student.id not in enrolled_ids %}
|
||||
<option value="{{ student.id }}">{{ student.name }} — {{ student.email }}</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<label class="form-label small fw-semibold mb-1">Observaciones (opcional)</label>
|
||||
<input type="text" name="notes" class="form-control form-control-sm" placeholder="Notas…" id="enroll-notes">
|
||||
</div>
|
||||
<div class="col-12 col-md-2">
|
||||
<button type="submit" class="btn btn-success btn-sm w-100" id="enroll-submit-btn">
|
||||
<i class="bi bi-plus-circle me-1"></i>Inscribir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card-body p-0">
|
||||
{% if enrollments %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0 align-middle" id="enrollments-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="ps-3">#</th>
|
||||
<th>Alumno</th>
|
||||
<th class="text-center">Estado</th>
|
||||
<th class="text-center">Fecha Inscripción</th>
|
||||
<th class="text-center">Notas</th>
|
||||
{% if can_edit %}<th class="text-end pe-3">Acciones</th>{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for e in enrollments %}
|
||||
<tr id="enrollment-row-{{ e.student_id }}">
|
||||
<td class="ps-3 text-muted small">{{ loop.index }}</td>
|
||||
<td>
|
||||
<div class="fw-semibold small">{{ e.student.name if e.student else '—' }}</div>
|
||||
<div class="text-muted" style="font-size:.75rem;">{{ e.student.email if e.student else '' }}</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% set st_colors = {'activo': 'success', 'retirado': 'danger', 'condicional': 'warning'} %}
|
||||
<span class="badge bg-{{ st_colors[e.status] or 'secondary' }}-subtle text-{{ st_colors[e.status] or 'secondary' }} border border-{{ st_colors[e.status] or 'secondary' }}-subtle">
|
||||
{{ e.status | capitalize }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center small text-muted">
|
||||
{{ e.enrolled_at if e.enrolled_at else '—' }}
|
||||
</td>
|
||||
<td class="text-center small text-muted">{{ e.notes or '—' }}</td>
|
||||
{% if can_edit %}
|
||||
<td class="text-end pe-3">
|
||||
<div class="d-flex gap-1 justify-content-end">
|
||||
<!-- Quick status update -->
|
||||
<form method="POST" action="/admin/commission_update_enrollment" class="d-inline">
|
||||
<select name="status" class="form-select form-select-sm d-inline-block w-auto"
|
||||
onchange="this.form.submit()" title="Cambiar estado"
|
||||
id="status-select-{{ e.student_id }}">
|
||||
<option value="activo" {% if e.status == 'activo' %}selected{% endif %}>Activo</option>
|
||||
<option value="condicional" {% if e.status == 'condicional' %}selected{% endif %}>Condicional</option>
|
||||
<option value="retirado" {% if e.status == 'retirado' %}selected{% endif %}>Retirado</option>
|
||||
</select>
|
||||
</form>
|
||||
<!-- Remove button -->
|
||||
{% set st_display = e.student.name if e.student else 'este alumno' %}
|
||||
<form method="POST" action="/admin/commission_unenroll_student"
|
||||
onsubmit="return confirm('¿Dar de baja a {{ st_display }} de la comisión?')">
|
||||
<button type="submit" class="btn btn-sm btn-outline-danger" title="Dar de baja"
|
||||
id="unenroll-btn-{{ e.student_id }}">
|
||||
<i class="bi bi-person-dash"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-people display-5 text-muted opacity-40"></i>
|
||||
<p class="text-muted mt-3 small">No hay alumnos inscriptos en esta comisión.</p>
|
||||
{% if can_edit %}
|
||||
<button class="btn btn-outline-success btn-sm" data-bs-toggle="collapse" data-bs-target="#enroll-form">
|
||||
<i class="bi bi-person-plus me-1"></i>Inscribir primer alumno
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Capacity Bar -->
|
||||
{% set enrolled_count = enrollments | length %}
|
||||
{% set max_students = commission.max_students or 1 %}
|
||||
{% set cap_pct = [((enrolled_count / max_students) * 100) | round | int, 100] | min %}
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-body py-3">
|
||||
<div class="d-flex justify-content-between small fw-semibold mb-1">
|
||||
<span><i class="bi bi-bar-chart-fill me-1 text-primary"></i>Ocupación del cupo</span>
|
||||
<span>{{ enrolled_count }} / {{ max_students }} ({{ cap_pct }}%)</span>
|
||||
</div>
|
||||
<div class="progress" style="height:10px;">
|
||||
<div class="progress-bar {% if cap_pct >= 90 %}bg-danger{% elif cap_pct >= 70 %}bg-warning{% else %}bg-success{% endif %}"
|
||||
{{ ("style=\"width:" ~ cap_pct ~ "%;\"") | safe }} role="progressbar"
|
||||
aria-valuenow="{{ cap_pct }}" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,200 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Gestión de Comisiones — Edu-Space{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid py-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
|
||||
<div>
|
||||
<h1 class="h3 fw-bold mb-1">
|
||||
<i class="bi bi-diagram-3 me-2 text-primary"></i>Gestión de Comisiones
|
||||
</h1>
|
||||
<p class="text-muted mb-0 small">Asignación de docentes e inscripción de alumnos por comisión</p>
|
||||
</div>
|
||||
<a href="/admin/subjects_list" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bi bi-book me-1"></i>Ver Asignaturas
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Flash Messages -->
|
||||
|
||||
|
||||
<!-- Filters Card -->
|
||||
<div class="card shadow-sm border-0 mb-4">
|
||||
<div class="card-body py-3">
|
||||
<form method="GET" class="row g-2 align-items-end" id="filter-form">
|
||||
<div class="col-12 col-md-3">
|
||||
<label class="form-label small fw-semibold mb-1">Buscar</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text"><i class="bi bi-search"></i></span>
|
||||
<input type="text" name="search" class="form-control" placeholder="Código o asignatura…"
|
||||
value="{{ search or '' }}" id="search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 col-md-3">
|
||||
<label class="form-label small fw-semibold mb-1">Asignatura</label>
|
||||
<select name="subject_id" class="form-select form-select-sm" id="subject-filter">
|
||||
<option value="">Todas</option>
|
||||
{% for subj in subjects %}
|
||||
<option value="{{ subj.id }}" {% if subject_filter == subj.id %}selected{% endif %}>
|
||||
{{ subj.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6 col-md-2">
|
||||
<label class="form-label small fw-semibold mb-1">Turno</label>
|
||||
<select name="shift" class="form-select form-select-sm" id="shift-filter">
|
||||
<option value="">Todos</option>
|
||||
{% for shift in ['Mañana', 'Tarde', 'Vespertino', 'Noche'] %}
|
||||
<option value="{{ shift }}" {% if shift_filter == shift %}selected{% endif %}>{{ shift }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6 col-md-2">
|
||||
<label class="form-label small fw-semibold mb-1">Estado</label>
|
||||
<select name="active" class="form-select form-select-sm" id="active-filter">
|
||||
<option value="true" {% if active_filter == 'true' %}selected{% endif %}>Activas</option>
|
||||
<option value="false" {% if active_filter == 'false' %}selected{% endif %}>Inactivas</option>
|
||||
<option value="" {% if not active_filter %}selected{% endif %}>Todas</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-6 col-md-2 d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary btn-sm flex-fill" id="filter-btn">
|
||||
<i class="bi bi-funnel me-1"></i>Filtrar
|
||||
</button>
|
||||
<a href="/admin/commissions_list" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bi bi-x"></i>
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Commissions Table -->
|
||||
<div class="card shadow-sm border-0">
|
||||
<div class="card-header bg-transparent border-bottom d-flex align-items-center justify-content-between py-2">
|
||||
<span class="fw-semibold small">
|
||||
<i class="bi bi-list-ul me-1 text-primary"></i>
|
||||
{{ pagination.total }} comisión(es) encontrada(s)
|
||||
</span>
|
||||
<span class="badge bg-primary-subtle text-primary">Página {{ pagination.page }} / {{ pagination.pages or 1 }}</span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
{% if commissions %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0 align-middle" id="commissions-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="ps-3">Comisión</th>
|
||||
<th>Asignatura</th>
|
||||
<th>Docente</th>
|
||||
<th class="text-center">Turno</th>
|
||||
<th class="text-center">Alumnos</th>
|
||||
<th class="text-center">Estado</th>
|
||||
<th class="text-end pe-3">Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for comm in commissions %}
|
||||
<tr>
|
||||
<td class="ps-3">
|
||||
<span class="badge bg-primary-subtle text-primary fw-semibold font-monospace">
|
||||
{{ comm.get_full_code() }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold">{{ comm.subject.name }}</div>
|
||||
<small class="text-muted">{{ comm.subject.code }} — {{ comm.semester }} {{ comm.year }}</small>
|
||||
</td>
|
||||
<td>
|
||||
{% if comm.teacher %}
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="avatar-xs bg-info-subtle rounded-circle d-flex align-items-center justify-content-center" style="width:28px;height:28px;">
|
||||
<i class="bi bi-person-video3 small text-info"></i>
|
||||
</div>
|
||||
<span class="small">{{ comm.teacher.name }}</span>
|
||||
</div>
|
||||
{% else %}
|
||||
<span class="text-muted small fst-italic"><i class="bi bi-exclamation-circle me-1 text-warning"></i>Sin asignar</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if comm.shift %}
|
||||
{% set shift_colors = {'Mañana': 'warning', 'Tarde': 'info', 'Vespertino': 'secondary', 'Noche': 'dark'} %}
|
||||
<span class="badge bg-{{ shift_colors[comm.shift] or 'secondary' }}-subtle text-{{ shift_colors[comm.shift] or 'secondary' }} border border-{{ shift_colors[comm.shift] or 'secondary' }}-subtle">
|
||||
{{ comm.shift }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="text-muted small">—</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="fw-semibold">{{ comm.current_students or 0 }}</span>
|
||||
<span class="text-muted small">/ {{ comm.max_students }}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if comm.active %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle">Activa</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Inactiva</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end pe-3">
|
||||
<a href="/admin/commission_detail?id={{ comm.id }}"
|
||||
class="btn btn-sm btn-outline-primary" title="Ver y gestionar comisión">
|
||||
<i class="bi bi-gear me-1"></i>Gestionar
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if pagination.pages > 1 %}
|
||||
<div class="d-flex justify-content-center py-3">
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm mb-0">
|
||||
{% if pagination.has_prev %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="/admin/commissions_list">
|
||||
<i class="bi bi-chevron-left"></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% for pg in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
|
||||
{% if pg %}
|
||||
<li class="page-item {% if pg == pagination.page %}active{% endif %}">
|
||||
<a class="page-link" href="/admin/commissions_list">{{ pg }}</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="page-item disabled"><span class="page-link">…</span></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if pagination.has_next %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="/admin/commissions_list">
|
||||
<i class="bi bi-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-diagram-3 display-4 text-muted opacity-50"></i>
|
||||
<p class="mt-3 text-muted">No se encontraron comisiones con los filtros aplicados.</p>
|
||||
<a href="/admin/commissions_list" class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-arrow-clockwise me-1"></i>Limpiar filtros
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,242 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Import from Google Sheets - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-file-earmark-spreadsheet text-success me-2"></i>Google Sheets Academic Sync
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">Extract and synchronize classrooms, careers, subjects, and weekly schedules directly from the official Google Sheet.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/main/dashboard" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metrics Cards -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-sm-6 col-xl-2">
|
||||
<div class="card border-0 shadow-sm text-center p-3 h-100">
|
||||
<div class="text-primary mb-1"><i class="bi bi-mortarboard fs-3"></i></div>
|
||||
<div class="h4 mb-0 fw-bold">{{ metrics.total_careers }}</div>
|
||||
<small class="text-muted">Careers</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-2">
|
||||
<div class="card border-0 shadow-sm text-center p-3 h-100">
|
||||
<div class="text-info mb-1"><i class="bi bi-book fs-3"></i></div>
|
||||
<div class="h4 mb-0 fw-bold">{{ metrics.total_subjects }}</div>
|
||||
<small class="text-muted">Subjects</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-2">
|
||||
<div class="card border-0 shadow-sm text-center p-3 h-100">
|
||||
<div class="text-success mb-1"><i class="bi bi-door-open fs-3"></i></div>
|
||||
<div class="h4 mb-0 fw-bold">{{ metrics.total_classrooms }}</div>
|
||||
<small class="text-muted">Classrooms</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card border-0 shadow-sm text-center p-3 h-100">
|
||||
<div class="text-warning mb-1"><i class="bi bi-people fs-3"></i></div>
|
||||
<div class="h4 mb-0 fw-bold">{{ metrics.total_commissions }}</div>
|
||||
<small class="text-muted">Commissions</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card border-0 shadow-sm text-center p-3 h-100">
|
||||
<div class="text-danger mb-1"><i class="bi bi-calendar-check fs-3"></i></div>
|
||||
<div class="h4 mb-0 fw-bold">{{ metrics.total_reservations }}</div>
|
||||
<small class="text-muted">Calendar Classes</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sync Action Banner -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body p-4">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 mb-3 mb-lg-0">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-1 me-2 fw-semibold">
|
||||
<i class="bi bi-cloud-check me-1"></i>Google Sheets Live Integration
|
||||
</span>
|
||||
<span class="badge bg-light text-muted border">UniCABA 2026</span>
|
||||
</div>
|
||||
<h4 class="h5 mb-2 fw-bold">Official Schedule Board (Cartelera de Aulas)</h4>
|
||||
<p class="text-muted small mb-2">
|
||||
Reads published CSV sheets for all 6 days of the week, automatically creating or updating academic careers, classrooms, subject codes, commissions, and weekly calendar entries without duplicating records.
|
||||
</p>
|
||||
<div class="d-flex flex-wrap gap-1">
|
||||
{% for s in metrics.sheets %}
|
||||
<span class="badge bg-body-tertiary text-secondary border small">
|
||||
<i class="bi bi-calendar-event me-1 text-primary"></i>{{ s.name }}
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 text-lg-end">
|
||||
<form method="POST" id="syncForm" onsubmit="startSync()">
|
||||
<button type="submit" id="syncBtn" class="btn btn-success btn-lg px-4 py-2 shadow fw-semibold">
|
||||
<i class="bi bi-arrow-repeat me-2"></i>Sync Data Now
|
||||
</button>
|
||||
</form>
|
||||
<div id="syncSpinner" class="d-none mt-2 text-muted small">
|
||||
<div class="spinner-border spinner-border-sm text-success me-1" role="status"></div>
|
||||
Connecting to Google Sheets and processing records...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sync Results (if just completed) -->
|
||||
{% if stats %}
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-success bg-opacity-10 text-success py-3">
|
||||
<h5 class="card-title h6 mb-0 fw-bold">
|
||||
<i class="bi bi-check-circle-fill me-2"></i>Synchronization Report
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3 text-center mb-3">
|
||||
<div class="col-md-2">
|
||||
<div class="p-2 border rounded bg-body-tertiary">
|
||||
<div class="fw-bold fs-5">{{ stats.total_rows_processed }}</div>
|
||||
<small class="text-muted">Rows Processed</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="p-2 border rounded bg-body-tertiary">
|
||||
<div class="fw-bold fs-5 text-primary">+{{ stats.careers_created }}</div>
|
||||
<small class="text-muted">Careers Created</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="p-2 border rounded bg-body-tertiary">
|
||||
<div class="fw-bold fs-5 text-success">+{{ stats.classrooms_created }}</div>
|
||||
<small class="text-muted">Classrooms Created</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="p-2 border rounded bg-body-tertiary">
|
||||
<div class="fw-bold fs-5 text-info">+{{ stats.subjects_created }}</div>
|
||||
<small class="text-muted">Subjects Created</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="p-2 border rounded bg-body-tertiary">
|
||||
<div class="fw-bold fs-5 text-warning">+{{ stats.commissions_created }}</div>
|
||||
<small class="text-muted">Commissions Created</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div class="p-2 border rounded bg-body-tertiary">
|
||||
<div class="fw-bold fs-5 text-danger">+{{ stats.reservations_created }}</div>
|
||||
<small class="text-muted">Reservations Created</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if stats.errors and (stats.errors|length > 0) %}
|
||||
<div class="alert alert-warning mb-0 small">
|
||||
<h6 class="alert-heading fw-bold mb-1">Warnings / Errors detected:</h6>
|
||||
<ul class="mb-0 ps-3">
|
||||
{% for err in stats.errors %}
|
||||
<li>{{ err }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Database Preview Table -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-body-tertiary d-flex justify-content-between align-items-center py-3">
|
||||
<h5 class="card-title h6 mb-0">
|
||||
<i class="bi bi-table text-primary me-2"></i>Recently Synchronized Subjects & Comissions
|
||||
</h5>
|
||||
<a href="/schedule/calendar_view" class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-calendar3 me-1"></i>View Calendar
|
||||
</a>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="bg-body-tertiary">
|
||||
<tr>
|
||||
<th class="ps-4">Code</th>
|
||||
<th>Subject Name</th>
|
||||
<th>Career</th>
|
||||
<th>Commissions</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for s in recent_subjects %}
|
||||
<tr>
|
||||
<td class="ps-4">
|
||||
<span class="badge bg-secondary-subtle text-secondary font-monospace border">
|
||||
{{ s.code }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold">{{ s.name }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge badge-brand small">
|
||||
{{ s.career_obj.name if s.career_obj else (s.department or _('General')) }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="small text-muted">
|
||||
{{ s.commissions|length }} commission(s)
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if s.is_active %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle small">
|
||||
<i class="bi bi-check-circle me-1"></i>Active
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary small">Inactive</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="5" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-cloud-arrow-down fs-1 d-block mb-2 text-secondary"></i>
|
||||
No subjects in database yet. Click "Sync Data Now" to import.
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
function startSync() {
|
||||
const btn = document.getElementById('syncBtn');
|
||||
const spinner = document.getElementById('syncSpinner');
|
||||
if (btn) {
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>Sincronizando...';
|
||||
}
|
||||
if (spinner) {
|
||||
spinner.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,343 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Gestión de Ocupación y Métricas - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.kpi-card {
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.07);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.kpi-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
|
||||
}
|
||||
.kpi-icon-circle {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.metric-bar-container {
|
||||
height: 10px;
|
||||
border-radius: 6px;
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
.metric-bar-fill {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
transition: width 0.6s ease;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
|
||||
<div>
|
||||
<h1 class="h3 fw-bold mb-1">
|
||||
<i class="bi bi-graph-up-arrow text-primary me-2"></i>Gestión de Ocupación y Métricas de Espacios
|
||||
</h1>
|
||||
<p class="text-muted mb-0 small">
|
||||
Analítica institucional de aprovechamiento de aulas físicas, demanda en Campus Virtual y distribución horaria.
|
||||
</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="/classrooms/list_classrooms" class="btn btn-outline-primary">
|
||||
<i class="bi bi-buildings me-1"></i>Aulas Físicas
|
||||
</a>
|
||||
<a href="/classrooms/list_classrooms" class="btn btn-outline-info">
|
||||
<i class="bi bi-globe2 me-1"></i>Campus Virtual (∞)
|
||||
</a>
|
||||
<a href="/schedule/calendar_view" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-calendar-week me-1"></i>Ver Calendario
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 1. Fila de KPIs Globales de Ocupación -->
|
||||
<div class="row g-3 mb-4">
|
||||
<!-- Ocupación Hoy -->
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card kpi-card border-0 shadow-sm p-3 h-100">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<span class="text-muted small text-uppercase fw-semibold" style="font-size: 0.72rem;">Tasa de Ocupación Hoy</span>
|
||||
<h2 class="h3 fw-bold mb-0 text-primary mt-1">{{ avg_day_pct }}%</h2>
|
||||
</div>
|
||||
<div class="kpi-icon-circle bg-primary-subtle text-primary">
|
||||
<i class="bi bi-clock-history"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-bar-container mt-3">
|
||||
<div class="metric-bar-fill bg-primary" data-width="{{ avg_day_pct }}%"></div>
|
||||
</div>
|
||||
<small class="text-muted mt-2 d-block" style="font-size: 0.72rem;">
|
||||
Promedio sobre 15 hs operativas ({{ physical_rooms_count }} aulas presenciales)
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ocupación Semana -->
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card kpi-card border-0 shadow-sm p-3 h-100">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<span class="text-muted small text-uppercase fw-semibold" style="font-size: 0.72rem;">Ocupación Semanal</span>
|
||||
<h2 class="h3 fw-bold mb-0 text-info mt-1">{{ avg_week_pct }}%</h2>
|
||||
</div>
|
||||
<div class="kpi-icon-circle bg-info-subtle text-info">
|
||||
<i class="bi bi-calendar-week"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-bar-container mt-3">
|
||||
<div class="metric-bar-fill bg-info" data-width="{{ avg_week_pct }}%"></div>
|
||||
</div>
|
||||
<small class="text-muted mt-2 d-block" style="font-size: 0.72rem;">
|
||||
Semana en curso (Lunes a Sábado)
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ocupación Mensual -->
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card kpi-card border-0 shadow-sm p-3 h-100">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<span class="text-muted small text-uppercase fw-semibold" style="font-size: 0.72rem;">Ocupación del Mes</span>
|
||||
<h2 class="h3 fw-bold mb-0 text-success mt-1">{{ avg_month_pct }}%</h2>
|
||||
</div>
|
||||
<div class="kpi-icon-circle bg-success-subtle text-success">
|
||||
<i class="bi bi-calendar3"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-bar-container mt-3">
|
||||
<div class="metric-bar-fill bg-success" data-width="{{ avg_month_pct }}%"></div>
|
||||
</div>
|
||||
<small class="text-muted mt-2 d-block" style="font-size: 0.72rem;">
|
||||
Total mes calendario activo
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clases Totales Dictadas -->
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card kpi-card border-0 shadow-sm p-3 h-100">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<span class="text-muted small text-uppercase fw-semibold" style="font-size: 0.72rem;">Total Clases en el Mes</span>
|
||||
<h2 class="h3 fw-bold mb-0 text-warning mt-1">{{ total_month_classes }}</h2>
|
||||
</div>
|
||||
<div class="kpi-icon-circle bg-warning-subtle text-warning">
|
||||
<i class="bi bi-mortarboard"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 mt-3 small font-monospace">
|
||||
<span class="badge bg-primary-subtle text-primary border">Físicas: {{ total_month_classes - v_month }}</span>
|
||||
<span class="badge bg-info-subtle text-info border">Virtuales: {{ v_month }}</span>
|
||||
</div>
|
||||
<small class="text-muted mt-2 d-block" style="font-size: 0.72rem;">
|
||||
Reservas y sesiones registradas en el período
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Detalle y Distribución Espacial -->
|
||||
<div class="row g-4 mb-4">
|
||||
<!-- Ocupación por Piso / Nivel -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title h6 fw-bold mb-0">
|
||||
<i class="bi bi-layers text-primary me-2"></i>Tasa de Ocupación por Piso / Nivel
|
||||
</h5>
|
||||
<span class="badge bg-secondary-subtle text-secondary border">Presencial</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-column gap-3">
|
||||
{% for fs in floor_summary %}
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span class="fw-semibold text-body small">
|
||||
{{ fs.floor }} ({{ fs.count }} aulas)
|
||||
</span>
|
||||
<span class="fw-bold font-monospace small {% if fs.avg_pct > 50 %}text-danger{% elif fs.avg_pct > 25 %}text-warning{% else %}text-success{% endif %}">
|
||||
{{ fs.avg_pct }}%
|
||||
</span>
|
||||
</div>
|
||||
<div class="metric-bar-container">
|
||||
<div class="metric-bar-fill {% if fs.avg_pct > 50 %}bg-danger{% elif fs.avg_pct > 25 %}bg-warning{% else %}bg-success{% endif %}"
|
||||
data-width="{{ fs.avg_pct }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Distribución por Turno -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title h6 fw-bold mb-0">
|
||||
<i class="bi bi-brightness-high text-warning me-2"></i>Distribución de Clases por Turno
|
||||
</h5>
|
||||
<span class="badge bg-secondary-subtle text-secondary border">Mes Completo</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-2 text-center mb-3">
|
||||
<div class="col-3">
|
||||
<div class="p-2 rounded bg-body-tertiary border">
|
||||
<div class="small text-muted text-uppercase fw-semibold" style="font-size: 0.68rem;">Mañana</div>
|
||||
<div class="h5 fw-bold text-primary mb-0">{{ shift_counts.Mañana }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="p-2 rounded bg-body-tertiary border">
|
||||
<div class="small text-muted text-uppercase fw-semibold" style="font-size: 0.68rem;">Tarde</div>
|
||||
<div class="h5 fw-bold text-warning mb-0">{{ shift_counts.Tarde }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="p-2 rounded bg-body-tertiary border">
|
||||
<div class="small text-muted text-uppercase fw-semibold" style="font-size: 0.68rem;">Vespertino</div>
|
||||
<div class="h5 fw-bold text-info mb-0">{{ shift_counts.Vespertino }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="p-2 rounded bg-body-tertiary border">
|
||||
<div class="small text-muted text-uppercase fw-semibold" style="font-size: 0.68rem;">Noche</div>
|
||||
<div class="h5 fw-bold text-danger mb-0">{{ shift_counts.Noche }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Campus Virtual Box -->
|
||||
<div class="p-3 rounded bg-primary-subtle border border-primary-subtle">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="fw-bold text-primary mb-1"><i class="bi bi-globe2 me-2"></i>Campus Virtual (A Demanda · ∞)</h6>
|
||||
<p class="small text-muted mb-0">Salas simultáneas sin límite físico de cupo ni colisión.</p>
|
||||
</div>
|
||||
<div class="text-end">
|
||||
<div class="badge bg-primary text-white fs-6">{{ v_month }} clases mes</div>
|
||||
<small class="d-block text-muted mt-1">{{ v_today }} hoy · {{ v_week }} semana</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Top Aulas de Mayor Demanda vs Menor Demanda -->
|
||||
<div class="row g-4">
|
||||
<!-- Mayor Demanda -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3">
|
||||
<h5 class="card-title h6 fw-bold mb-0 text-success">
|
||||
<i class="bi bi-arrow-up-circle-fill me-2"></i>Top Aulas con Mayor Demanda y Ocupación
|
||||
</h5>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0 small">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Aula</th>
|
||||
<th>Piso</th>
|
||||
<th>Capacidad</th>
|
||||
<th>Ocup. Mes</th>
|
||||
<th class="text-end">Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for rm in top_rooms %}
|
||||
<tr>
|
||||
<td class="fw-bold text-primary">{{ rm.classroom.code }}</td>
|
||||
<td>{{ rm.classroom.floor_display }}</td>
|
||||
<td>{{ rm.classroom.capacity }} asientos</td>
|
||||
<td>
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle font-monospace">
|
||||
{{ rm.month_pct }}% ({{ rm.month_count }} cl.)
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<a href="/schedule/list_reservations"
|
||||
class="btn btn-sm btn-outline-primary py-0 px-2" style="font-size: 0.72rem;">
|
||||
Ver Reservas
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menor Demanda / Oportunidades -->
|
||||
<div class="col-lg-6">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3">
|
||||
<h5 class="card-title h6 fw-bold mb-0 text-secondary">
|
||||
<i class="bi bi-arrow-down-circle-fill me-2"></i>Aulas con Mayor Disponibilidad (Menor Uso)
|
||||
</h5>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0 small">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Aula</th>
|
||||
<th>Piso</th>
|
||||
<th>Capacidad</th>
|
||||
<th>Ocup. Mes</th>
|
||||
<th class="text-end">Acción</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for rm in low_rooms %}
|
||||
<tr>
|
||||
<td class="fw-bold text-body">{{ rm.classroom.code }}</td>
|
||||
<td>{{ rm.classroom.floor_display }}</td>
|
||||
<td>{{ rm.classroom.capacity }} asientos</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary-subtle text-secondary border font-monospace">
|
||||
{{ rm.month_pct }}% ({{ rm.month_count }} cl.)
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<a href="/schedule/add_reservation?classroom_id={{ rm.classroom.id }}"
|
||||
class="btn btn-sm btn-outline-success py-0 px-2" style="font-size: 0.72rem;">
|
||||
Reservar
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('.metric-bar-fill[data-width]').forEach(function(bar) {
|
||||
bar.style.width = bar.getAttribute('data-width');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,405 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Tipificaciones de Hitos y Categorías - Edu-Space{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
|
||||
<div>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-1 small">
|
||||
<li class="breadcrumb-item"><a href="/main/dashboard">Dashboard</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Tipificaciones</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="h3 fw-bold mb-1">
|
||||
<i class="bi bi-tags text-warning me-2"></i>Tipificaciones de Hitos Académicos
|
||||
</h1>
|
||||
<p class="text-muted mb-0 small">
|
||||
Catálogo dinámico y configurable de tipos de evaluaciones, parciales, TPs y eventos para el calendario institucional.
|
||||
</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
{% if can_edit %}
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAddType">
|
||||
<i class="bi bi-plus-lg me-1"></i>Nueva Tipificación
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert / Help Info -->
|
||||
<div class="alert alert-info border-0 shadow-sm d-flex align-items-center mb-4 py-2 px-3">
|
||||
<i class="bi bi-info-circle-fill text-info fs-5 me-3"></i>
|
||||
<div class="small">
|
||||
Las tipificaciones activas aparecen de forma inmediata en el selector de tipo de evento/hito tanto en el portal web como en la app móvil. Puedes desactivar una tipificación sin eliminar registros históricos asociados.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Card -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="bg-body-tertiary">
|
||||
<tr>
|
||||
<th class="ps-4">Tipificación e Insignia</th>
|
||||
<th>Código / Slug</th>
|
||||
<th>Color Hex</th>
|
||||
<th>Descripción</th>
|
||||
<th class="text-center">Orden</th>
|
||||
<th class="text-center">Estado</th>
|
||||
<th class="text-end pe-4">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in types %}
|
||||
<tr id="row-{{ item.id }}">
|
||||
<td class="ps-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="rounded-circle shadow-xs me-3 flex-shrink-0 border"
|
||||
style="width: 22px; height: 22px; background-color: {{ item.color or '#0d6efd' }};"
|
||||
title="{{ item.color }}"></span>
|
||||
<div>
|
||||
<span class="fw-bold text-dark-emphasis">{{ item.name }}</span>
|
||||
<span class="badge rounded-pill text-white ms-2 shadow-xs" style="background-color: {{ item.color or '#0d6efd' }}; font-size: 0.70rem;">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<code class="text-primary fw-semibold">{{ item.code }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="font-monospace small text-muted">{{ item.color or '#0d6efd' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small">{{ item.description or '—' }}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<span class="badge bg-body-tertiary text-secondary border font-monospace">#{{ item.sort_order }}</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% if can_edit %}
|
||||
<form action="/admin/milestone_type_toggle" method="POST" class="d-inline">
|
||||
<input type="hidden" name="id" value="{{ item.id }}">
|
||||
<div class="form-check form-switch d-inline-block">
|
||||
<input class="form-check-input status-toggle" type="checkbox" role="switch"
|
||||
onchange="this.form.submit()"
|
||||
{% if item.is_active %}checked{% endif %}
|
||||
title="Cambiar estado">
|
||||
</div>
|
||||
</form>
|
||||
{% else %}
|
||||
{% if item.is_active %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle">Activo</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Inactivo</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end pe-4">
|
||||
<div class="btn-group btn-group-sm">
|
||||
{% if can_edit %}
|
||||
<button type="button" class="btn btn-outline-primary btn-edit"
|
||||
data-id="{{ item.id }}"
|
||||
data-name="{{ item.name }}"
|
||||
data-code="{{ item.code }}"
|
||||
data-color="{{ item.color or '#0d6efd' }}"
|
||||
data-description="{{ item.description or '' }}"
|
||||
data-sort-order="{{ item.sort_order }}"
|
||||
data-is-active="{{ 'true' if item.is_active else 'false' }}"
|
||||
title="Editar Tipificación">
|
||||
<i class="bi bi-pencil-square"></i>
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-danger btn-delete-type"
|
||||
data-id="{{ item.id }}"
|
||||
data-name="{{ item.name }}"
|
||||
data-action-url="/admin/milestone_type_delete"
|
||||
title="Eliminar Tipificación">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="text-muted small"><i class="bi bi-lock me-1"></i>Solo lectura</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="7" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-inbox fs-1 d-block mb-2"></i>
|
||||
No se han encontrado tipificaciones registradas.
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal: Nueva Tipificación -->
|
||||
{% if can_edit %}
|
||||
<div class="modal fade" id="modalAddType" tabindex="-1" aria-labelledby="modalAddTypeLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0 shadow">
|
||||
<div class="modal-header bg-body-tertiary">
|
||||
<h5 class="modal-title fw-bold" id="modalAddTypeLabel">
|
||||
<i class="bi bi-plus-circle text-primary me-2"></i>Nueva Tipificación de Hito
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<form action="/admin/milestone_type_add" method="POST">
|
||||
<div class="modal-body p-4">
|
||||
<div class="mb-3">
|
||||
<label for="add_name" class="form-label fw-semibold">Nombre Visible <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="add_name" name="name" placeholder="Ej: Parcial 3, TP Integrador" required>
|
||||
<div class="form-text small">Texto que se mostrará en los selectores y tarjetas.</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-7">
|
||||
<label for="add_code" class="form-label fw-semibold">Código / Identificador</label>
|
||||
<input type="text" class="form-control font-monospace" id="add_code" name="code" placeholder="ej. parcial_3">
|
||||
<div class="form-text small">Slug único (se autogenera si se deja vacío).</div>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label for="add_color" class="form-label fw-semibold">Color Distintivo</label>
|
||||
<input type="color" class="form-control form-control-color w-100" id="add_color" name="color" value="#B43E8E" title="Elegir color">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paleta rápida de colores UniCABA -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label small text-muted mb-1">Paleta Institucional Rápida:</label>
|
||||
<div class="d-flex flex-wrap gap-2" id="presetColorsAdd">
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #B43E8E;" data-color="#B43E8E" title="Magenta UniCABA"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #0d6efd;" data-color="#0d6efd" title="Azul Institucional"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #198754;" data-color="#198754" title="Verde TP"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #fd7e14;" data-color="#fd7e14" title="Naranja Recuperatorio"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #dc3545;" data-color="#dc3545" title="Rojo Final"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #6f42c1;" data-color="#6f42c1" title="Púrpura Especial"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #20c997;" data-color="#20c997" title="Turquesa Cursada"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #6c757d;" data-color="#6c757d" title="Gris Neutro"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="add_description" class="form-label fw-semibold">Descripción / Notas</label>
|
||||
<textarea class="form-control" id="add_description" name="description" rows="2" placeholder="Detalle o alcance de este tipo de evaluación..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-2">
|
||||
<div class="col-6">
|
||||
<label for="add_sort_order" class="form-label fw-semibold">Orden de Visualización</label>
|
||||
<input type="number" class="form-control" id="add_sort_order" name="sort_order" value="10" min="0">
|
||||
</div>
|
||||
<div class="col-6 d-flex align-items-center pt-3">
|
||||
<div class="form-check form-switch pt-2">
|
||||
<input class="form-check-input" type="checkbox" id="add_is_active" name="is_active" value="1" checked>
|
||||
<label class="form-check-label fw-semibold" for="add_is_active">Activo de inmediato</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-body-tertiary">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-primary px-4">
|
||||
<i class="bi bi-save me-1"></i>Crear Tipificación
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal: Editar Tipificación -->
|
||||
<div class="modal fade" id="modalEditType" tabindex="-1" aria-labelledby="modalEditTypeLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0 shadow">
|
||||
<div class="modal-header bg-body-tertiary">
|
||||
<h5 class="modal-title fw-bold" id="modalEditTypeLabel">
|
||||
<i class="bi bi-pencil-square text-primary me-2"></i>Editar Tipificación
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<form id="formEditType" method="POST">
|
||||
<div class="modal-body p-4">
|
||||
<div class="mb-3">
|
||||
<label for="edit_name" class="form-label fw-semibold">Nombre Visible <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="edit_name" name="name" required>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-7">
|
||||
<label for="edit_code" class="form-label fw-semibold">Código / Slug <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control font-monospace" id="edit_code" name="code" required>
|
||||
</div>
|
||||
<div class="col-md-5">
|
||||
<label for="edit_color" class="form-label fw-semibold">Color Distintivo</label>
|
||||
<input type="color" class="form-control form-control-color w-100" id="edit_color" name="color" title="Elegir color">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paleta rápida de colores en Edición -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label small text-muted mb-1">Paleta Institucional Rápida:</label>
|
||||
<div class="d-flex flex-wrap gap-2" id="presetColorsEdit">
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #B43E8E;" data-color="#B43E8E" title="Magenta UniCABA"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #0d6efd;" data-color="#0d6efd" title="Azul Institucional"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #198754;" data-color="#198754" title="Verde TP"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #fd7e14;" data-color="#fd7e14" title="Naranja Recuperatorio"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #dc3545;" data-color="#dc3545" title="Rojo Final"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #6f42c1;" data-color="#6f42c1" title="Púrpura Especial"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #20c997;" data-color="#20c997" title="Turquesa Cursada"></button>
|
||||
<button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #6c757d;" data-color="#6c757d" title="Gris Neutro"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="edit_description" class="form-label fw-semibold">Descripción</label>
|
||||
<textarea class="form-control" id="edit_description" name="description" rows="2"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-2">
|
||||
<div class="col-6">
|
||||
<label for="edit_sort_order" class="form-label fw-semibold">Orden</label>
|
||||
<input type="number" class="form-control" id="edit_sort_order" name="sort_order" min="0">
|
||||
</div>
|
||||
<div class="col-6 d-flex align-items-center pt-3">
|
||||
<div class="form-check form-switch pt-2">
|
||||
<input class="form-check-input" type="checkbox" id="edit_is_active" name="is_active" value="1">
|
||||
<label class="form-check-label fw-semibold" for="edit_is_active">Activo</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer bg-body-tertiary">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-primary px-4">
|
||||
<i class="bi bi-check-circle me-1"></i>Guardar Cambios
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Global de Eliminación de Tipificación (fuera de la tabla) -->
|
||||
<div class="modal fade" id="deleteMilestoneTypeModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0 shadow-lg" style="border-radius: 14px;">
|
||||
<div class="modal-header border-0 pb-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="badge bg-danger-subtle text-danger p-2 rounded-circle me-2">
|
||||
<i class="bi bi-exclamation-triangle-fill fs-5"></i>
|
||||
</div>
|
||||
<h5 class="modal-title fw-bold text-danger mb-0">Confirmar Eliminación</h5>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-start py-3">
|
||||
<p class="mb-2">¿Está seguro de que desea eliminar la tipificación <strong id="deleteMilestoneTypeName" class="text-primary"></strong>?</p>
|
||||
<p class="text-muted small mb-0"><i class="bi bi-info-circle me-1"></i>Si existen hitos vinculados a este tipo, el sistema lo desactivará automáticamente para preservar el historial.</p>
|
||||
</div>
|
||||
<div class="modal-footer border-0 pt-0">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<form id="deleteMilestoneTypeForm" method="POST" class="d-inline">
|
||||
<button type="submit" class="btn btn-danger px-3">
|
||||
<i class="bi bi-trash me-1"></i>Eliminar Tipificación
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Autogenerate code slug in Add Modal
|
||||
var addNameInput = document.getElementById('add_name');
|
||||
var addCodeInput = document.getElementById('add_code');
|
||||
if (addNameInput && addCodeInput) {
|
||||
addNameInput.addEventListener('input', function() {
|
||||
if (!addCodeInput.dataset.touched) {
|
||||
var slug = addNameInput.value.toLowerCase()
|
||||
.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
|
||||
.replace(/[^a-z0-9]+/g, '_')
|
||||
.replace(/^_+|_+$/g, '');
|
||||
addCodeInput.value = slug;
|
||||
}
|
||||
});
|
||||
addCodeInput.addEventListener('input', function() {
|
||||
addCodeInput.dataset.touched = "true";
|
||||
});
|
||||
}
|
||||
|
||||
// Color preset clicks for Add Modal
|
||||
document.querySelectorAll('#presetColorsAdd button').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var color = this.getAttribute('data-color');
|
||||
var input = document.getElementById('add_color');
|
||||
if (input) input.value = color;
|
||||
});
|
||||
});
|
||||
|
||||
// Color preset clicks for Edit Modal
|
||||
document.querySelectorAll('#presetColorsEdit button').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var color = this.getAttribute('data-color');
|
||||
var input = document.getElementById('edit_color');
|
||||
if (input) input.value = color;
|
||||
});
|
||||
});
|
||||
|
||||
// Edit modal bindings
|
||||
var modalEditEl = document.getElementById('modalEditType');
|
||||
var modalEdit = modalEditEl ? new bootstrap.Modal(modalEditEl) : null;
|
||||
var formEdit = document.getElementById('formEditType');
|
||||
|
||||
document.querySelectorAll('.btn-edit').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var id = this.getAttribute('data-id');
|
||||
var name = this.getAttribute('data-name');
|
||||
var code = this.getAttribute('data-code');
|
||||
var color = this.getAttribute('data-color');
|
||||
var description = this.getAttribute('data-description');
|
||||
var sortOrder = this.getAttribute('data-sort-order');
|
||||
var isActive = this.getAttribute('data-is-active') === 'true';
|
||||
|
||||
if (formEdit) {
|
||||
formEdit.action = "/admin/milestone_types_list/edit/" + id;
|
||||
document.getElementById('edit_name').value = name;
|
||||
document.getElementById('edit_code').value = code;
|
||||
document.getElementById('edit_color').value = color;
|
||||
document.getElementById('edit_description').value = description;
|
||||
document.getElementById('edit_sort_order').value = sortOrder;
|
||||
document.getElementById('edit_is_active').checked = isActive;
|
||||
if (modalEdit) modalEdit.show();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Delete modal bindings
|
||||
var deleteModalEl = document.getElementById('deleteMilestoneTypeModal');
|
||||
var deleteModal = deleteModalEl ? new bootstrap.Modal(deleteModalEl) : null;
|
||||
var deleteNameEl = document.getElementById('deleteMilestoneTypeName');
|
||||
var deleteFormEl = document.getElementById('deleteMilestoneTypeForm');
|
||||
|
||||
document.querySelectorAll('.btn-delete-type').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var name = this.getAttribute('data-name');
|
||||
var actionUrl = this.getAttribute('data-action-url');
|
||||
if (deleteNameEl) deleteNameEl.textContent = name;
|
||||
if (deleteFormEl) deleteFormEl.action = actionUrl;
|
||||
if (deleteModal) deleteModal.show();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,194 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{% if role %}Editar Rol: {{ role.name }}{% else %}Nuevo Rol{% endif %} - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
|
||||
<div>
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-shield-lock text-primary me-2"></i>
|
||||
{% if role %}Editar Rol y Permisos de Acceso{% else %}Crear Rol y Permisos de Acceso{% endif %}
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">Configure permisos granulares por módulo con la matriz de acceso estilo FortiGate.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/admin/roles_list" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Volver a Roles
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="POST">
|
||||
{% if role %}
|
||||
<input type="hidden" name="id" value="{{ role.id }}">
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
<!-- Left Column: Role Details -->
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-body-tertiary py-3">
|
||||
<h5 class="card-title h6 mb-0">
|
||||
<i class="bi bi-person-badge text-primary me-2"></i>Información del Rol
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label fw-semibold">Nombre del Rol <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" name="name"
|
||||
value="{{ role.name if role else '' }}" required
|
||||
placeholder="ej. Docente, Operador, Bedelía"
|
||||
{% if role and role.is_system %}readonly title="El nombre del rol del sistema no se puede modificar"{% endif %}>
|
||||
{% if role and role.is_system %}
|
||||
<small class="text-muted d-block mt-1">
|
||||
<i class="bi bi-info-circle me-1"></i>Rol del sistema protegido.
|
||||
</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label fw-semibold">Descripción</label>
|
||||
<textarea class="form-control" id="description" name="description" rows="3"
|
||||
placeholder="Describa las responsabilidades o alcance de este rol...">{{ role.description if role else '' }}</textarea>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary py-2 fw-semibold">
|
||||
<i class="bi bi-check-lg me-1"></i>Guardar Rol y Permisos
|
||||
</button>
|
||||
<a href="/admin/roles_list" class="btn btn-outline-secondary">
|
||||
Cancelar
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: FortiGate Permissions Matrix -->
|
||||
<div class="col-lg-8 mb-4">
|
||||
<div class="fg-permission-card">
|
||||
<!-- Matrix Header -->
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span class="fw-bold text-primary">
|
||||
<i class="bi bi-grid-3x3-gap-fill me-2"></i>Permisos de Acceso
|
||||
</span>
|
||||
|
||||
<!-- Set All Action Dropdown (FortiGate style) -->
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-fg-set-all dropdown-toggle" type="button" id="setAllDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="bi bi-lightning-charge me-1"></i>Establecer Todos
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="setAllDropdown">
|
||||
<li>
|
||||
<button type="button" class="dropdown-item py-2" onclick="setAllPermissions('none')">
|
||||
<i class="bi bi-slash-circle text-danger me-2"></i>Establecer Todos en Ninguno
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item py-2" onclick="setAllPermissions('read')">
|
||||
<i class="bi bi-eye text-info me-2"></i>Establecer Todos en Solo Lectura
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button type="button" class="dropdown-item py-2" onclick="setAllPermissions('read_write')">
|
||||
<i class="bi bi-pencil text-success me-2"></i>Establecer Todos en Lectura y Escritura
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Matrix Table -->
|
||||
<div class="table-responsive">
|
||||
<table class="fg-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 48%;">Módulo del Sistema</th>
|
||||
<th style="width: 52%;" class="text-end pe-4">Nivel de Permiso</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for mod in modules %}
|
||||
{% set cur_level = (current_perms[mod.id] if current_perms else (role.permissions[mod.id] if (role and role.permissions) else 'none')) or 'none' %}
|
||||
<tr data-module-row="{{ mod.id }}">
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="bg-primary bg-opacity-10 text-primary rounded p-2 me-3 d-inline-flex align-items-center justify-content-center" style="width: 36px; height: 36px;">
|
||||
<i class="bi {{ mod.icon }} fs-6"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-semibold">{{ mod.name }}</div>
|
||||
<small class="text-muted d-block">{{ mod.description }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-end pe-4">
|
||||
<!-- Hidden Input to submit via POST -->
|
||||
<input type="hidden" name="perm_{{ mod.id }}" id="input_perm_{{ mod.id }}" value="{{ cur_level }}">
|
||||
|
||||
<!-- FortiGate Segmented Control -->
|
||||
<div class="fg-segmented-control" role="group" aria-label="Nivel de permiso para {{ mod.name }}">
|
||||
<button type="button"
|
||||
class="fg-seg-btn {% if cur_level == 'none' %}active{% endif %}"
|
||||
data-val="none"
|
||||
data-target="input_perm_{{ mod.id }}"
|
||||
onclick="selectPerm(this, 'input_perm_{{ mod.id }}', 'none')">
|
||||
<i class="bi bi-slash-circle"></i> Ninguno
|
||||
</button>
|
||||
<button type="button"
|
||||
class="fg-seg-btn {% if cur_level == 'read' %}active{% endif %}"
|
||||
data-val="read"
|
||||
data-target="input_perm_{{ mod.id }}"
|
||||
onclick="selectPerm(this, 'input_perm_{{ mod.id }}', 'read')">
|
||||
<i class="bi bi-eye"></i> Lectura
|
||||
</button>
|
||||
<button type="button"
|
||||
class="fg-seg-btn {% if cur_level == 'read_write' %}active{% endif %}"
|
||||
data-val="read_write"
|
||||
data-target="input_perm_{{ mod.id }}"
|
||||
onclick="selectPerm(this, 'input_perm_{{ mod.id }}', 'read_write')">
|
||||
<i class="bi bi-pencil"></i> Lectura/Escritura
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
function selectPerm(btn, inputId, value) {
|
||||
const input = document.getElementById(inputId);
|
||||
if (input) {
|
||||
input.value = value;
|
||||
}
|
||||
|
||||
// Toggle active state in this segmented control
|
||||
const parentControl = btn.closest('.fg-segmented-control');
|
||||
if (parentControl) {
|
||||
parentControl.querySelectorAll('.fg-seg-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
function setAllPermissions(level) {
|
||||
document.querySelectorAll('.fg-segmented-control').forEach(control => {
|
||||
const targetBtn = control.querySelector(`button[data-val="${level}"]`);
|
||||
if (targetBtn) {
|
||||
targetBtn.click();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,153 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Roles y Grupos de Acceso - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
|
||||
<div>
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-person-badge text-primary me-2"></i>Roles y Grupos de Acceso
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">Administración de perfiles de usuario y matriz granular de permisos por módulo del sistema.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/admin/role_add" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-1"></i>Nuevo Rol
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roles Grid / Table -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="bg-body-tertiary">
|
||||
<tr>
|
||||
<th class="ps-4">Nombre del Rol</th>
|
||||
<th>Descripción</th>
|
||||
<th>Integrantes</th>
|
||||
<th>Resumen de Permisos</th>
|
||||
<th class="text-end pe-4">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for role in roles %}
|
||||
<tr>
|
||||
<td class="ps-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="badge-brand rounded-circle p-2 me-3 d-inline-flex align-items-center justify-content-center" style="width: 38px; height: 38px;">
|
||||
<i class="bi bi-shield-check fs-6 text-white"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-bold text-primary">{{ role.name }}</div>
|
||||
{% if role.is_system %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border small">Protegido del Sistema</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-muted small">{{ role.description or _('Sin descripción provista.') }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-primary-subtle text-primary border px-2 py-1">
|
||||
<i class="bi bi-people me-1"></i>{{ role.user_count or (role.users and role.users|length) or 0 }} usuarios
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex flex-wrap gap-1">
|
||||
{% for mod in modules %}
|
||||
{% set p_level = role.permissions[mod.id] if role.permissions else 'none' %}
|
||||
{% if p_level == 'read_write' %}
|
||||
<span class="badge bg-success-subtle text-success border small" title="{{ mod.name }}: Lectura y Escritura">
|
||||
<i class="bi {{ mod.icon }} me-1"></i>{{ mod.name }}: RW
|
||||
</span>
|
||||
{% elif p_level == 'read' %}
|
||||
<span class="badge bg-info-subtle text-info border small" title="{{ mod.name }}: Solo Lectura">
|
||||
<i class="bi {{ mod.icon }} me-1"></i>{{ mod.name }}: R
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-light text-muted border small opacity-75" title="{{ mod.name }}: Sin Acceso">
|
||||
<i class="bi {{ mod.icon }} me-1"></i>{{ mod.name }}: -
|
||||
</span>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-end pe-4">
|
||||
<div class="btn-group btn-group-sm">
|
||||
<a href="/admin/roles/edit/{{ role.id }}" class="btn btn-outline-primary" title="Configurar Permisos">
|
||||
<i class="bi bi-pencil-square me-1"></i>Permisos
|
||||
</a>
|
||||
{% if not role.is_system %}
|
||||
<button type="button" class="btn btn-outline-danger btn-delete-role"
|
||||
data-role-id="{{ role.id }}"
|
||||
data-role-name="{{ role.name }}"
|
||||
data-action-url="/admin/role_delete"
|
||||
title="Eliminar Rol"
|
||||
{% if (role.user_count or 0) > 0 or (role.users and role.users|length > 0) %}disabled{% endif %}>
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Global de Eliminación fuera de la tabla (evita desplazamientos visuales) -->
|
||||
<div class="modal fade" id="deleteRoleModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0 shadow-lg" style="border-radius: 14px;">
|
||||
<div class="modal-header border-0 pb-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="badge bg-danger-subtle text-danger p-2 rounded-circle me-2">
|
||||
<i class="bi bi-exclamation-triangle-fill fs-5"></i>
|
||||
</div>
|
||||
<h5 class="modal-title fw-bold text-danger mb-0">Confirmar Eliminación de Rol</h5>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-start py-3">
|
||||
<p class="mb-2">¿Está seguro de que desea eliminar el rol <strong id="deleteRoleName" class="text-primary"></strong>?</p>
|
||||
<p class="text-muted small mb-0"><i class="bi bi-info-circle me-1"></i>Esta acción no se puede deshacer.</p>
|
||||
</div>
|
||||
<div class="modal-footer border-0 pt-0">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<form id="deleteRoleForm" method="POST" class="d-inline">
|
||||
<button type="submit" class="btn btn-danger px-3">
|
||||
<i class="bi bi-trash me-1"></i>Eliminar Rol
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var deleteModalEl = document.getElementById('deleteRoleModal');
|
||||
var deleteModal = deleteModalEl ? new bootstrap.Modal(deleteModalEl) : null;
|
||||
var deleteRoleName = document.getElementById('deleteRoleName');
|
||||
var deleteRoleForm = document.getElementById('deleteRoleForm');
|
||||
|
||||
document.querySelectorAll('.btn-delete-role').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var roleName = this.getAttribute('data-role-name');
|
||||
var actionUrl = this.getAttribute('data-action-url');
|
||||
if (deleteRoleName) deleteRoleName.textContent = roleName;
|
||||
if (deleteRoleForm) deleteRoleForm.action = actionUrl;
|
||||
if (deleteModal) deleteModal.show();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,308 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Gestión de Asignaturas - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
|
||||
<div>
|
||||
<h1 class="h3 fw-bold mb-1">
|
||||
<i class="bi bi-book text-primary me-2"></i>Gestión de Asignaturas y Materias
|
||||
</h1>
|
||||
<p class="text-muted mb-0 small">
|
||||
Catálogo institucional de asignaturas, códigos, créditos académicos y carreras vinculadas.
|
||||
</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
{% if can_edit %}
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAddSubject">
|
||||
<i class="bi bi-plus-lg me-1"></i>Nueva Asignatura
|
||||
</button>
|
||||
{% endif %}
|
||||
<a href="/schedule/commissions_view" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-diagram-3 me-1"></i>Ver Comisiones
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Bar -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body py-2">
|
||||
<form method="GET" class="row g-2 align-items-center">
|
||||
<!-- Buscador -->
|
||||
<div class="col-md-4">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-body-tertiary"><i class="bi bi-search"></i></span>
|
||||
<input type="text" name="search" class="form-control"
|
||||
placeholder="Buscar por código, nombre o departamento..."
|
||||
value="{{ search }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtro Carrera -->
|
||||
<div class="col-md-4">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-body-tertiary"><i class="bi bi-mortarboard text-primary"></i></span>
|
||||
<select name="career_id" class="form-select form-select-sm" onchange="this.form.submit()">
|
||||
<option value="">Todas las carreras</option>
|
||||
{% for c in careers %}
|
||||
<option value="{{ c.id }}" {% if career_filter == c.id %}selected{% endif %}>{{ c.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtro Estado -->
|
||||
<div class="col-md-2">
|
||||
<select name="active" class="form-select form-select-sm" onchange="this.form.submit()">
|
||||
<option value="">Todos los estados</option>
|
||||
<option value="true" {% if active_filter == 'true' %}selected{% endif %}>Solo activas</option>
|
||||
<option value="false" {% if active_filter == 'false' %}selected{% endif %}>Solo inactivas</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 text-md-end">
|
||||
<button type="submit" class="btn btn-sm btn-primary me-1">
|
||||
<i class="bi bi-funnel me-1"></i>Filtrar
|
||||
</button>
|
||||
<a href="/admin/subjects_list" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-x-circle me-1"></i>Limpiar
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Subjects Table -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Código</th>
|
||||
<th>Nombre de la Asignatura</th>
|
||||
<th>Carrera</th>
|
||||
<th>Departamento</th>
|
||||
<th>Créditos</th>
|
||||
<th>Comisiones</th>
|
||||
<th>Estado</th>
|
||||
{% if can_edit %}
|
||||
<th class="text-end">Acciones</th>
|
||||
{% endif %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for s in subjects %}
|
||||
<tr>
|
||||
<td>
|
||||
<span class="badge font-monospace bg-primary-subtle text-primary border">{{ s.code }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="fw-bold text-body">{{ s.name }}</span>
|
||||
{% if s.description %}
|
||||
<small class="text-muted d-block text-truncate" style="max-width: 300px;">{{ s.description }}</small>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if s.career_obj %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border">
|
||||
<i class="bi bi-mortarboard me-1"></i>{{ s.career_obj.name }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="text-muted small">General</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<span class="small text-muted">{{ s.department or '-' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-light text-dark border">{{ s.credits }} cr.</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-info-subtle text-info border">
|
||||
<i class="bi bi-diagram-3 me-1"></i>{{ s.commissions|length if s.commissions else 0 }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge rounded-pill {% if s.is_active %}bg-success-subtle text-success border border-success-subtle{% else %}bg-secondary-subtle text-secondary border{% endif %}">
|
||||
{% if s.is_active %}Activa{% else %}Inactiva{% endif %}
|
||||
</span>
|
||||
</td>
|
||||
{% if can_edit %}
|
||||
<td class="text-end">
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button type="button" class="btn btn-outline-secondary py-0 px-2"
|
||||
data-bs-toggle="modal" data-bs-target="#modalEditSubject{{ s.id }}"
|
||||
title="Editar Asignatura">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
<form method="POST" action="/admin/subject_toggle" class="d-inline">
|
||||
<input type="hidden" name="id" value="{{ s.id }}">
|
||||
<button type="submit" class="btn btn-outline-warning py-0 px-2"
|
||||
title="{% if s.is_active %}Desactivar{% else %}Activar{% endif %}">
|
||||
<i class="bi {% if s.is_active %}bi-pause{% else %}bi-play{% endif %}"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Modal Editar Asignatura -->
|
||||
<div class="modal fade text-start" id="modalEditSubject{{ s.id }}" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form method="POST" action="/admin/subject_edit">
|
||||
<input type="hidden" name="id" value="{{ s.id }}">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h6 fw-bold">
|
||||
<i class="bi bi-pencil-square text-primary me-2"></i>Editar Asignatura
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-5">
|
||||
<label class="form-label small fw-semibold">Código *</label>
|
||||
<input type="text" name="code" class="form-control form-control-sm font-monospace" value="{{ s.code }}" required>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<label class="form-label small fw-semibold">Créditos</label>
|
||||
<input type="number" name="credits" class="form-control form-control-sm" value="{{ s.credits }}" min="1" max="20">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Nombre de la Asignatura *</label>
|
||||
<input type="text" name="name" class="form-control form-control-sm" value="{{ s.name }}" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Carrera Vinculada</label>
|
||||
<select name="career_id" class="form-select form-select-sm">
|
||||
<option value="">Sin carrera específica (General)</option>
|
||||
{% for c in careers %}
|
||||
<option value="{{ c.id }}" {% if s.career_id == c.id %}selected{% endif %}>{{ c.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Departamento / Área</label>
|
||||
<input type="text" name="department" class="form-control form-control-sm" value="{{ s.department or '' }}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Descripción / Objetivos</label>
|
||||
<textarea name="description" class="form-control form-control-sm" rows="2">{{ s.description or '' }}</textarea>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="is_active" id="activeSubj{{ s.id }}" {% if s.is_active %}checked{% endif %}>
|
||||
<label class="form-check-label small" for="activeSubj{{ s.id }}">Asignatura Activa</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-sm btn-primary">Guardar Cambios</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="8" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-book fs-1 d-block mb-2"></i>
|
||||
No se encontraron asignaturas con los criterios indicados.
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Paginación -->
|
||||
{% if pagination.pages > 1 %}
|
||||
<div class="card-footer bg-body-tertiary border-0 py-2">
|
||||
<nav aria-label="Subjects pagination">
|
||||
<ul class="pagination pagination-sm justify-content-center mb-0">
|
||||
{% if pagination.has_prev %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="/admin/subjects_list">Anterior</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% for p in pagination.iter_pages(left_edge=2, right_edge=2, left_current=2, right_current=2) %}
|
||||
{% if p %}
|
||||
<li class="page-item {% if p == pagination.page %}active{% endif %}">
|
||||
<a class="page-link" href="/admin/subjects_list">{{ p }}</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="page-item disabled"><span class="page-link">…</span></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if pagination.has_next %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="/admin/subjects_list">Siguiente</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Nueva Asignatura -->
|
||||
{% if can_edit %}
|
||||
<div class="modal fade" id="modalAddSubject" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<form method="POST" action="/admin/subject_add">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h6 fw-bold">
|
||||
<i class="bi bi-book text-primary me-2"></i>Nueva Asignatura
|
||||
</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-5">
|
||||
<label class="form-label small fw-semibold">Código *</label>
|
||||
<input type="text" name="code" class="form-control form-control-sm font-monospace" placeholder="ej. ASIG0015" required>
|
||||
</div>
|
||||
<div class="col-md-7">
|
||||
<label class="form-label small fw-semibold">Créditos</label>
|
||||
<input type="number" name="credits" class="form-control form-control-sm" value="4" min="1" max="20">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Nombre de la Asignatura *</label>
|
||||
<input type="text" name="name" class="form-control form-control-sm" placeholder="ej. Álgebra Lineal" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Carrera Vinculada</label>
|
||||
<select name="career_id" class="form-select form-select-sm">
|
||||
<option value="">Sin carrera específica (General)</option>
|
||||
{% for c in careers %}
|
||||
<option value="{{ c.id }}">{{ c.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Departamento / Área</label>
|
||||
<input type="text" name="department" class="form-control form-control-sm" placeholder="ej. Ciencias Exactas, Informática">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label small fw-semibold">Descripción</label>
|
||||
<textarea name="description" class="form-control form-control-sm" rows="2" placeholder="Programa de la materia..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<button type="submit" class="btn btn-sm btn-primary">Crear Asignatura</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,110 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{% if user %}Edit User: {{ user.name }}{% else %}New User{% endif %} - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-person-gear text-primary me-2"></i>
|
||||
{% if user %}Edit User Account{% else %}Create User Account{% endif %}
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">Configure user credentials, profile information, and role assignment.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/admin/users_list" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Back to Users
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mx-auto">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-body-tertiary py-3">
|
||||
<h5 class="card-title h6 mb-0">
|
||||
<i class="bi bi-person-vcard text-primary me-2"></i>Account Details
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<form method="POST">
|
||||
{% if user %}
|
||||
<input type="hidden" name="id" value="{{ user.id }}">
|
||||
{% endif %}
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label fw-semibold">Full Name <span class="text-danger">*</span></label>
|
||||
<input type="text" class="form-control" id="name" name="name"
|
||||
value="{{ user.name if user else '' }}" required
|
||||
placeholder="e.g. María González">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label fw-semibold">Email Address <span class="text-danger">*</span></label>
|
||||
<input type="email" class="form-control" id="email" name="email"
|
||||
value="{{ user.email if user else '' }}" required
|
||||
placeholder="e.g. mgonzalez@edu-space.com">
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label fw-semibold">
|
||||
Password {% if not user %}<span class="text-danger">*</span>{% endif %}
|
||||
</label>
|
||||
<input type="password" class="form-control" id="password" name="password"
|
||||
{% if not user %}required{% endif %}
|
||||
placeholder="{% if user %}Leave empty to keep current password{% else %}At least 6 characters{% endif %}">
|
||||
{% if user %}
|
||||
<small class="text-muted d-block mt-1">
|
||||
Only fill this in if you want to reset this user's password.
|
||||
</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="role_id" class="form-label fw-semibold">Role / Access Group <span class="text-danger">*</span></label>
|
||||
<select class="form-select" id="role_id" name="role_id" required>
|
||||
<option value="" disabled {% if not user or not user.role_id %}selected{% endif %}>Select a role...</option>
|
||||
{% for r in roles %}
|
||||
<option value="{{ r.id }}" {% if user and user.role_id == r.id %}selected{% endif %}>
|
||||
{{ r.name }} - {{ r.description or '' }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<small class="text-muted d-block mt-1">
|
||||
<a href="/admin/roles_list" target="_blank" class="text-decoration-none">
|
||||
<i class="bi bi-box-arrow-up-right me-1"></i>View or manage roles and permissions
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-4 form-check form-switch">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="is_active" name="is_active"
|
||||
{% if not user or user.is_active %}checked{% endif %}
|
||||
{% if user and user.id == user.id %}disabled{% endif %}>
|
||||
<label class="form-check-label fw-semibold" for="is_active">
|
||||
Active Account
|
||||
</label>
|
||||
<small class="text-muted d-block">
|
||||
Inactive users are prevented from signing in to the platform.
|
||||
</small>
|
||||
{% if user and user.id == user.id %}
|
||||
<input type="hidden" name="is_active" value="on">
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center pt-2">
|
||||
<a href="/admin/users_list" class="btn btn-outline-secondary">
|
||||
Cancel
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary px-4 fw-semibold">
|
||||
<i class="bi bi-check-lg me-1"></i>Save User
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,248 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}User Management - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-people text-primary me-2"></i>User Management
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">Manage user accounts, assign roles, and control active status.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/admin/user_add" class="btn btn-primary">
|
||||
<i class="bi bi-person-plus me-1"></i>New User
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters & Search -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body p-3">
|
||||
<form method="GET" class="row g-2 align-items-center">
|
||||
<div class="col-md-5">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-body-tertiary border-end-0">
|
||||
<i class="bi bi-search text-muted"></i>
|
||||
</span>
|
||||
<input type="text" name="search" class="form-control border-start-0"
|
||||
placeholder="Search by name or email..."
|
||||
value="{{ search }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select name="role" class="form-select form-select-sm">
|
||||
<option value="">All Roles</option>
|
||||
{% for r in roles %}
|
||||
<option value="{{ r.id }}" {% if role_filter == (r.id|string) %}selected{% endif %}>{{ r.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<select name="status" class="form-select form-select-sm">
|
||||
<option value="">All Statuses</option>
|
||||
<option value="active" {% if status_filter == 'active' %}selected{% endif %}>Active</option>
|
||||
<option value="inactive" {% if status_filter == 'inactive' %}selected{% endif %}>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary btn-sm w-100">
|
||||
<i class="bi bi-filter me-1"></i>Filter
|
||||
</button>
|
||||
{% if search or role_filter or status_filter %}
|
||||
<a href="/admin/users_list" class="btn btn-outline-secondary btn-sm" title="Clear filters">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Users Table -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="bg-body-tertiary">
|
||||
<tr>
|
||||
<th class="ps-4">User</th>
|
||||
<th>Email</th>
|
||||
<th>Role / Group</th>
|
||||
<th>Status</th>
|
||||
<th>Last Login</th>
|
||||
<th class="text-end pe-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for u in users %}
|
||||
<tr>
|
||||
<td class="ps-4">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="user-avatar-small me-2">
|
||||
{{ (u.first_name[0] if u.first_name else 'U')|upper }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-bold">{{ u.name }}</div>
|
||||
<small class="text-muted">ID: #{{ u.id }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="font-monospace small">{{ u.email }}</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if u.role_obj %}
|
||||
<span class="badge badge-brand">
|
||||
<i class="bi bi-shield-check me-1"></i>{{ u.role_obj.name }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">
|
||||
{{ u.role or _('No Role') }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if u.is_active %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">
|
||||
<i class="bi bi-check-circle me-1"></i>Active
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1">
|
||||
<i class="bi bi-dash-circle me-1"></i>Inactive
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-muted">
|
||||
{% if u.last_login %}
|
||||
{{ format_datetime(u.last_login, format='short') }}
|
||||
{% else %}
|
||||
Never
|
||||
{% endif %}
|
||||
</small>
|
||||
</td>
|
||||
<td class="text-end pe-4">
|
||||
<div class="btn-group btn-group-sm">
|
||||
<a href="/admin/users/edit/{{ u.id }}" class="btn btn-outline-primary" title="Edit User">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
{% if u.id != user.id %}
|
||||
<form action="/admin/user_toggle" method="POST" class="d-inline">
|
||||
<input type="hidden" name="id" value="{{ u.id }}">
|
||||
<button type="submit" class="btn {% if u.is_active %}btn-outline-warning{% else %}btn-outline-success{% endif %}"
|
||||
title="{% if u.is_active %}Deactivate User{% else %}Activate User{% endif %}">
|
||||
<i class="bi {% if u.is_active %}bi-person-x{% else %}bi-person-check{% endif %}"></i>
|
||||
</button>
|
||||
</form>
|
||||
<button type="button" class="btn btn-outline-danger btn-delete-user"
|
||||
data-user-id="{{ u.id }}"
|
||||
data-user-name="{{ u.name }}"
|
||||
data-user-email="{{ u.email }}"
|
||||
data-action-url="/admin/user_delete"
|
||||
title="Eliminar Usuario">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="6" class="text-center py-5 text-muted">
|
||||
<i class="bi bi-people fs-1 d-block mb-2 text-secondary"></i>
|
||||
No users found matching the criteria.
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if pagination.pages > 1 %}
|
||||
<div class="card-footer bg-body-tertiary d-flex justify-content-between align-items-center py-2 px-4">
|
||||
<small class="text-muted">
|
||||
Showing page {{ pagination.page }} of {{ pagination.pages }} ({{ pagination.total }} total)
|
||||
</small>
|
||||
<ul class="pagination pagination-sm mb-0">
|
||||
{% if pagination.has_prev %}
|
||||
<li class="page-item"><a class="page-link" href="/admin/users_list">«</a></li>
|
||||
{% endif %}
|
||||
{% for p in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
|
||||
{% if p %}
|
||||
<li class="page-item {% if p == pagination.page %}active{% endif %}">
|
||||
<a class="page-link" href="/admin/users_list">{{ p }}</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="page-item disabled"><span class="page-link">…</span></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if pagination.has_next %}
|
||||
<li class="page-item"><a class="page-link" href="/admin/users_list">»</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Global de Eliminación de Usuario (fuera de la tabla) -->
|
||||
<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0 shadow-lg" style="border-radius: 14px;">
|
||||
<div class="modal-header border-0 pb-0">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="badge bg-danger-subtle text-danger p-2 rounded-circle me-2">
|
||||
<i class="bi bi-person-x-fill fs-5"></i>
|
||||
</div>
|
||||
<h5 class="modal-title fw-bold text-danger mb-0">Confirmar Eliminación de Usuario</h5>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-start py-3">
|
||||
<p class="mb-2">¿Está seguro de que desea eliminar permanentemente al siguiente usuario?</p>
|
||||
<div class="p-2 rounded bg-body-tertiary mb-2">
|
||||
<div class="fw-bold text-primary" id="deleteUserName"></div>
|
||||
<div class="small text-muted font-monospace" id="deleteUserEmail"></div>
|
||||
</div>
|
||||
<p class="text-muted small mb-0"><i class="bi bi-exclamation-triangle me-1 text-warning"></i>Esta acción desvinculará sus comisiones y reservas asociadas. No se puede deshacer.</p>
|
||||
</div>
|
||||
<div class="modal-footer border-0 pt-0">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
|
||||
<form id="deleteUserForm" method="POST" class="d-inline">
|
||||
<button type="submit" class="btn btn-danger px-3">
|
||||
<i class="bi bi-trash me-1"></i>Eliminar Usuario
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var deleteModalEl = document.getElementById('deleteUserModal');
|
||||
var deleteModal = deleteModalEl ? new bootstrap.Modal(deleteModalEl) : null;
|
||||
var nameEl = document.getElementById('deleteUserName');
|
||||
var emailEl = document.getElementById('deleteUserEmail');
|
||||
var formEl = document.getElementById('deleteUserForm');
|
||||
|
||||
document.querySelectorAll('.btn-delete-user').forEach(function(btn) {
|
||||
btn.addEventListener('click', function() {
|
||||
var name = this.getAttribute('data-user-name');
|
||||
var email = this.getAttribute('data-user-email');
|
||||
var actionUrl = this.getAttribute('data-action-url');
|
||||
if (nameEl) nameEl.textContent = name;
|
||||
if (emailEl) emailEl.textContent = email;
|
||||
if (formEl) formEl.action = actionUrl;
|
||||
if (deleteModal) deleteModal.show();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,26 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Acceso Denegado (403) - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container pt-5 mt-5 text-center">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm p-5">
|
||||
<div class="text-danger mb-3" style="font-size: 4rem;">
|
||||
<i class="bi bi-shield-x"></i>
|
||||
</div>
|
||||
<h1 class="h2 mb-2">403 - Acceso Denegado</h1>
|
||||
<p class="text-muted mb-4">
|
||||
No tienes los permisos necesarios para acceder a este recurso. Esta sección está restringida exclusivamente a administradores.
|
||||
</p>
|
||||
<div>
|
||||
<a href="/main/dashboard" class="btn btn-primary">
|
||||
<i class="bi bi-house me-1"></i>Ir al Dashboard
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,62 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Cambiar Contraseña - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container pt-5 mt-4">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-6 col-md-8">
|
||||
<!-- Header -->
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h1 class="h3 mb-0">
|
||||
<i class="bi bi-shield-lock text-primary me-2"></i>Cambiar Contraseña
|
||||
</h1>
|
||||
<a href="/auth/profile" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bi bi-arrow-left me-1"></i>Volver al Perfil
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body p-4">
|
||||
<form method="POST" action="/auth/change_password">
|
||||
<div class="mb-3">
|
||||
<label for="current_password" class="form-label">Contraseña Actual</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-lock"></i></span>
|
||||
<input type="password" class="form-control" id="current_password" name="current_password" required placeholder="Ingresa tu contraseña actual">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="new_password" class="form-label">Nueva Contraseña</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-key"></i></span>
|
||||
<input type="password" class="form-control" id="new_password" name="new_password" required minlength="6" placeholder="Mínimo 6 caracteres">
|
||||
</div>
|
||||
<div class="form-text">Debe tener al menos 6 caracteres.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="confirm_password" class="form-label">Confirmar Nueva Contraseña</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text"><i class="bi bi-check2-circle"></i></span>
|
||||
<input type="password" class="form-control" id="confirm_password" name="confirm_password" required minlength="6" placeholder="Repite la nueva contraseña">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-save me-1"></i>Actualizar Contraseña
|
||||
</button>
|
||||
<a href="/auth/profile" class="btn btn-link text-muted">
|
||||
Cancelar
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,151 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - Edu-Space Admin</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
|
||||
<!-- Script Anti-Flicker para Modo Claro / Oscuro -->
|
||||
<script>
|
||||
(function() {
|
||||
const storedTheme = localStorage.getItem('theme');
|
||||
const theme = storedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<!-- Design System Theme -->
|
||||
<link href="/css/theme.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="auth-wrapper">
|
||||
<div class="auth-card">
|
||||
<!-- Header con Controles Superiores & Logo Oficial -->
|
||||
<div class="auth-header">
|
||||
<div class="auth-controls">
|
||||
<button class="theme-toggle-btn" type="button" aria-label="Cambiar tema" title="Modo Claro/Oscuro">
|
||||
<i class="bi bi-moon-stars-fill"></i>
|
||||
</button>
|
||||
<!-- Language Switcher could go here -->
|
||||
</div>
|
||||
|
||||
<img src="/img/logo_unicaba.png" alt="UniCABA" class="auth-logo">
|
||||
<h4 class="fw-bold mb-1">Edu-Space Admin</h4>
|
||||
<p class="text-muted small mb-0">Classroom Management System</p>
|
||||
</div>
|
||||
|
||||
<div class="px-4 pb-4 pt-2">
|
||||
<!-- Flash Messages -->
|
||||
{% if error %}
|
||||
<div class="alert alert-danger alert-dismissible fade show rounded-3 py-2 small" role="alert">
|
||||
{{ error }}
|
||||
<button type="button" class="btn-close py-2" data-bs-dismiss="alert"></button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form action="/auth/login" method="POST" novalidate>
|
||||
<div class="mb-3">
|
||||
<label for="username" class="form-label small fw-semibold text-muted">Correo Electrónico</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-body-tertiary border-end-0 text-muted">
|
||||
<i class="bi bi-envelope"></i>
|
||||
</span>
|
||||
<input type="email" class="form-control border-start-0 ps-0" id="username" name="username"
|
||||
required placeholder="Ingresa tu correo">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label small fw-semibold text-muted">Contraseña</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-body-tertiary border-end-0 text-muted">
|
||||
<i class="bi bi-lock"></i>
|
||||
</span>
|
||||
<input type="password" class="form-control border-start-0 border-end-0 ps-0" id="password" name="password"
|
||||
required placeholder="Ingresa tu contraseña">
|
||||
<button class="btn btn-outline-secondary border-start-0 bg-body-tertiary text-muted" type="button" id="togglePasswordBtn" title="Mostrar/Ocultar contraseña">
|
||||
<i class="bi bi-eye" id="togglePasswordIcon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid mb-3 mt-4">
|
||||
<button type="submit" class="btn btn-primary btn-lg fw-semibold py-2">
|
||||
<i class="bi bi-box-arrow-in-right me-1"></i> Iniciar Sesión
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Accesos Rápidos Institucionales (Demo) -->
|
||||
<div class="p-3 bg-body-tertiary rounded-3 border mt-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<small class="fw-bold text-muted text-uppercase" style="font-size: 0.7rem; letter-spacing: 0.5px;">
|
||||
<i class="bi bi-lightning-charge-fill text-warning me-1"></i>Acceso Rápido Demo (1 Clic)
|
||||
</small>
|
||||
<small class="text-muted font-monospace" style="font-size: 0.68rem;">Pass: admin123</small>
|
||||
</div>
|
||||
<div class="d-grid gap-1">
|
||||
<div class="btn-group btn-group-sm w-100" role="group">
|
||||
<button type="button" class="btn btn-outline-primary demo-fill-btn py-1" data-email="admin@edu-space.com" title="Ingresar como Administrador">
|
||||
<i class="bi bi-shield-check me-1"></i>Admin
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-warning demo-fill-btn py-1" data-email="bedelia@edu-space.com" title="Ingresar como Bedelía">
|
||||
<i class="bi bi-building-gear me-1"></i>Bedelía
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-info demo-fill-btn py-1" data-email="docente@edu-space.com" title="Ingresar como Docente">
|
||||
<i class="bi bi-person-video3 me-1"></i>Docente
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-success demo-fill-btn py-1" data-email="alumno@edu-space.com" title="Ingresar como Alumno">
|
||||
<i class="bi bi-mortarboard me-1"></i>Alumno
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-3">
|
||||
<small class="text-muted d-inline-flex align-items-center" style="font-size: 0.75rem;">
|
||||
<i class="bi bi-shield-check text-primary me-1"></i>
|
||||
Acceso institucional seguro • Actividad auditada
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="/js/theme-toggle.js"></script>
|
||||
<script>
|
||||
// Toggle password visibility
|
||||
document.getElementById('togglePasswordBtn').addEventListener('click', function() {
|
||||
const pwdInput = document.getElementById('password');
|
||||
const icon = document.getElementById('togglePasswordIcon');
|
||||
if (pwdInput.type === 'password') {
|
||||
pwdInput.type = 'text';
|
||||
icon.classList.replace('bi-eye', 'bi-eye-slash');
|
||||
} else {
|
||||
pwdInput.type = 'password';
|
||||
icon.classList.replace('bi-eye-slash', 'bi-eye');
|
||||
}
|
||||
});
|
||||
|
||||
// Demo login autofill buttons
|
||||
document.querySelectorAll('.demo-fill-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const email = this.getAttribute('data-email');
|
||||
document.getElementById('username').value = email;
|
||||
document.getElementById('password').value = 'admin123';
|
||||
// Highlight input briefly
|
||||
const emailInput = document.getElementById('username');
|
||||
emailInput.classList.add('is-valid');
|
||||
setTimeout(() => emailInput.classList.remove('is-valid'), 1500);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,188 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}User Profile - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container pt-5 mt-4">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<!-- Header -->
|
||||
<div class="d-flex align-items-center justify-content-between mb-4">
|
||||
<h1 class="h3 mb-0">
|
||||
<i class="bi bi-person-badge text-primary me-2"></i>My Profile
|
||||
</h1>
|
||||
<a href="/main/dashboard" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bi bi-arrow-left me-1"></i>Dashboard
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Profile Card -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body p-4">
|
||||
<div class="d-flex align-items-center mb-4">
|
||||
<div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 72px; height: 72px; font-size: 2rem;">
|
||||
<i class="bi bi-person"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="mb-1">{{ user.name }}</h4>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-primary">{{ user.role }}</span>
|
||||
{% if user.is_active %}
|
||||
<span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Active</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i>Inactive</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<!-- User Details Grid -->
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label text-muted small mb-1">Email</label>
|
||||
<div class="fw-semibold">{{ user.email }}</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label text-muted small mb-1">Full Name</label>
|
||||
<div class="fw-semibold">{{ user.name }}</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label text-muted small mb-1">Access Role</label>
|
||||
<div class="fw-semibold">{{ user.role }}</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label text-muted small mb-1">Last Login</label>
|
||||
<div class="fw-semibold">
|
||||
{% if user.last_login %}
|
||||
{{ user.last_login }}
|
||||
{% else %}
|
||||
<span class="text-muted">First login</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label text-muted small mb-1">Registration Date</label>
|
||||
<div class="fw-semibold">
|
||||
{% if user.created_at %}
|
||||
{{ user.created_at }}
|
||||
{% else %}
|
||||
<span class="text-muted">-</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<!-- Preferences Section -->
|
||||
<form method="POST" action="/auth/profile">
|
||||
<h5 class="fw-bold mb-3">
|
||||
<i class="bi bi-sliders text-primary me-2"></i>User Preferences
|
||||
</h5>
|
||||
|
||||
<div class="row g-3">
|
||||
<!-- Preferred Language -->
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="preferred_language" class="form-label fw-semibold">
|
||||
<i class="bi bi-translate text-primary me-1"></i>Interface Language
|
||||
</label>
|
||||
<select class="form-select" id="preferred_language" name="preferred_language">
|
||||
<option value="" {% if not user.preferred_language %}selected{% endif %}>
|
||||
Auto-detect from browser (Default)
|
||||
</option>
|
||||
<option value="es" {% if user.preferred_language == 'es' %}selected{% endif %}>
|
||||
Español
|
||||
</option>
|
||||
<option value="en" {% if user.preferred_language == 'en' %}selected{% endif %}>
|
||||
English
|
||||
</option>
|
||||
</select>
|
||||
<small class="text-muted d-block mt-1">
|
||||
If set, this language overrides the browser configuration for all your sessions.
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Theme Preference -->
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="theme_preference" class="form-label fw-semibold">
|
||||
<i class="bi bi-palette text-primary me-1"></i>Visual Theme
|
||||
</label>
|
||||
<select class="form-select" id="theme_preference" name="theme_preference">
|
||||
<option value="auto" {% if user.theme_preference == 'auto' or not user.theme_preference %}selected{% endif %}>
|
||||
Automatic (follow system)
|
||||
</option>
|
||||
<option value="light" {% if user.theme_preference == 'light' %}selected{% endif %}>
|
||||
Light Mode
|
||||
</option>
|
||||
<option value="dark" {% if user.theme_preference == 'dark' %}selected{% endif %}>
|
||||
Dark Mode
|
||||
</option>
|
||||
</select>
|
||||
<small class="text-muted d-block mt-1">
|
||||
Choose your preferred visual theme.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-end mt-2">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check-lg me-1"></i>Save Preferences
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer bg-body-tertiary px-4 py-3 d-flex justify-content-between align-items-center">
|
||||
<span class="text-muted small">Account Security</span>
|
||||
<a href="/auth/change_password" class="btn btn-primary btn-sm">
|
||||
<i class="bi bi-key me-1"></i>Change Password
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Reservations Overview (if any) -->
|
||||
{% if user.reservations %}
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-body-tertiary">
|
||||
<h5 class="card-title mb-0 h6">
|
||||
<i class="bi bi-calendar-event me-2"></i>My Recent Reservations
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Classroom</th>
|
||||
<th>Purpose</th>
|
||||
<th>Date & Time</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for res in (user.reservations or []).slice(0, 5) %}
|
||||
<tr>
|
||||
<td>
|
||||
<span class="badge bg-secondary">{{ res.classroom.code_display if res.classroom else 'N/A' }}</span>
|
||||
</td>
|
||||
<td>{{ res.purpose }}</td>
|
||||
<td>{{ res.start_time }}</td>
|
||||
<td>
|
||||
<span class="badge bg-{{ 'success' if res.status == 'CONFIRMED' else ('warning' if res.status == 'PENDING' else 'secondary') }}">
|
||||
{{ res.status }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,466 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ current_lang }}" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Edu-Space Admin{% endblock %}</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
|
||||
<!-- Script Anti-Flicker para Modo Claro / Oscuro -->
|
||||
<script>
|
||||
(function() {
|
||||
let userTheme = "{{ user.theme_preference if (user and user.is_authenticated) else '' }}";
|
||||
let theme = userTheme;
|
||||
if (!theme || theme === 'auto') {
|
||||
const storedTheme = localStorage.getItem('theme');
|
||||
theme = storedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||
}
|
||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Bootstrap 5 CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<!-- Design System & Custom Theme -->
|
||||
<link href="/css/theme.css" rel="stylesheet">
|
||||
<link href="/css/style.css" rel="stylesheet">
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
min-height: 100vh;
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
/* --- MODO CLARO ([data-bs-theme="light"]) --- */
|
||||
[data-bs-theme="light"] body {
|
||||
background: #F8FAFC !important;
|
||||
color: #1E293B !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar {
|
||||
background: rgba(255, 255, 255, 0.88) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar .nav-link {
|
||||
color: #334155 !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar .nav-link:hover,
|
||||
[data-bs-theme="light"] .glass-navbar .nav-link.active {
|
||||
color: #B43E8E !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar .dropdown-menu {
|
||||
background: #FFFFFF !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1) !important;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar .dropdown-item {
|
||||
color: #334155 !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar .dropdown-item:hover {
|
||||
background-color: #F1F5F9 !important;
|
||||
color: #B43E8E !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-card,
|
||||
[data-bs-theme="light"] .card {
|
||||
background: #FFFFFF !important;
|
||||
color: #1E293B !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
[data-bs-theme="light"] .table {
|
||||
--bs-table-color: #1E293B;
|
||||
--bs-table-bg: transparent;
|
||||
}
|
||||
[data-bs-theme="light"] .bg-body-tertiary {
|
||||
background-color: #F1F5F9 !important;
|
||||
color: #334155 !important;
|
||||
}
|
||||
[data-bs-theme="light"] .text-body {
|
||||
color: #1E293B !important;
|
||||
}
|
||||
[data-bs-theme="light"] .text-muted {
|
||||
color: #64748B !important;
|
||||
}
|
||||
[data-bs-theme="light"] .theme-toggle-btn {
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
color: #1E293B;
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
[data-bs-theme="light"] .theme-toggle-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* --- MODO OSCURO ([data-bs-theme="dark"]) --- */
|
||||
[data-bs-theme="dark"] body {
|
||||
background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%) !important;
|
||||
color: #F8FAFC !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar {
|
||||
background: rgba(15, 23, 42, 0.78) !important;
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar .nav-link {
|
||||
color: #CBD5E1 !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar .nav-link:hover,
|
||||
[data-bs-theme="dark"] .glass-navbar .nav-link.active {
|
||||
color: #FF8AB6 !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar .dropdown-menu {
|
||||
background: #1E293B !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar .dropdown-item {
|
||||
color: #CBD5E1 !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar .dropdown-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.08) !important;
|
||||
color: #FF8AB6 !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-card,
|
||||
[data-bs-theme="dark"] .card {
|
||||
background: rgba(30, 41, 59, 0.7) !important;
|
||||
color: #F8FAFC !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .table {
|
||||
--bs-table-color: #E2E8F0;
|
||||
--bs-table-bg: transparent;
|
||||
}
|
||||
[data-bs-theme="dark"] .bg-body-tertiary {
|
||||
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||
color: #CBD5E1 !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .text-body {
|
||||
color: #F8FAFC !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .text-muted {
|
||||
color: #94A3B8 !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .theme-toggle-btn {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #FFD54F;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
[data-bs-theme="dark"] .theme-toggle-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.navbar-brand span {
|
||||
background: linear-gradient(90deg, #B43E8E, #682CAD);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
<body data-user-authenticated="{{ 'true' if (user and user.is_authenticated) else 'false' }}">
|
||||
{% if user.is_authenticated %}
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg glass-navbar fixed-top">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/dashboard">
|
||||
<img src="/img/logo_unicaba_mini.png" alt="Logo UniCABA" class="navbar-logo me-2" height="30">
|
||||
<span>Edu-Space Admin</span>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
{% set user_role = 'admin' %}
|
||||
<ul class="navbar-nav me-auto">
|
||||
{% if user_role == 'admin' %}
|
||||
<!-- ================= ADMIN NAVIGATION ================= -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/dashboard">
|
||||
<i class="bi bi-speedometer2 me-1"></i>Panel General
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-door-open me-1"></i>Espacios & Sedes
|
||||
</a>
|
||||
<ul class="dropdown-menu shadow-sm">
|
||||
<li><a class="dropdown-item" href="/classrooms/list_classrooms?view_mode=physical"><i class="bi bi-door-open me-2 text-primary"></i>Aulas Presenciales</a></li>
|
||||
<li><a class="dropdown-item" href="/classrooms/list_classrooms?view_mode=virtual"><i class="bi bi-camera-video me-2 text-info"></i>Aulas Virtuales (Reunión)</a></li>
|
||||
<li><a class="dropdown-item" href="/classrooms/list_classrooms"><i class="bi bi-grid me-2 text-secondary"></i>Todas las Aulas</a></li>
|
||||
<li><a class="dropdown-item" href="/classrooms/add_classroom"><i class="bi bi-plus-circle me-2 text-success"></i>Nueva Aula</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/buildings/list_buildings"><i class="bi bi-buildings me-2 text-secondary"></i>Edificios y Sedes</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/occupancy_metrics"><i class="bi bi-graph-up-arrow me-2 text-success"></i>Métricas de Ocupación</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-calendar3 me-1"></i>Cronograma & Reservas
|
||||
</a>
|
||||
<ul class="dropdown-menu shadow-sm">
|
||||
<li><a class="dropdown-item" href="/schedule/calendar_view"><i class="bi bi-calendar-week me-2 text-primary"></i>Calendario General</a></li>
|
||||
<li><a class="dropdown-item" href="/schedule/today_schedule"><i class="bi bi-calendar-day me-2 text-info"></i>Cartelera del Día</a></li>
|
||||
<li><a class="dropdown-item" href="/schedule/list_reservations"><i class="bi bi-list-check me-2 text-warning"></i>Gestión de Reservas</a></li>
|
||||
<li><a class="dropdown-item" href="/schedule/add_reservation"><i class="bi bi-plus-circle me-2 text-success"></i>Nueva Reserva</a></li>
|
||||
<li><a class="dropdown-item" href="/schedule/commissions_view"><i class="bi bi-diagram-3 me-2 text-primary"></i>Comisiones y Cursadas</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/genetic_algorithm_web/genetic_optimizer"><i class="bi bi-cpu me-2 text-info"></i>Optimizador de Aulas (IA)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-mortarboard me-1"></i>Gestión Académica
|
||||
</a>
|
||||
<ul class="dropdown-menu shadow-sm">
|
||||
<li><a class="dropdown-item" href="/admin/careers_list"><i class="bi bi-mortarboard me-2 text-primary"></i>Carreras</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/subjects_list"><i class="bi bi-book me-2 text-info"></i>Asignaturas</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/commissions_list"><i class="bi bi-diagram-3 me-2 text-success"></i>Comisiones</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/academic_terms_list"><i class="bi bi-calendar-range me-2 text-warning"></i>Ciclo Lectivo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-shield-lock me-1"></i>Administración
|
||||
</a>
|
||||
<ul class="dropdown-menu shadow-sm">
|
||||
<li><a class="dropdown-item" href="/admin/users_list"><i class="bi bi-people me-2 text-primary"></i>Usuarios</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/roles_list"><i class="bi bi-person-badge me-2 text-info"></i>Roles y Permisos RBAC</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/milestone_types_list"><i class="bi bi-tags me-2 text-secondary"></i>Tipificaciones de Hitos</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/google_sheets_import"><i class="bi bi-file-earmark-spreadsheet me-2 text-success"></i>Sincronización Sheets</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/admin/audit_logs"><i class="bi bi-shield-check me-2 text-warning"></i>Registro de Auditoría</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
{% elif user_role == 'bedelia' %}
|
||||
<!-- ================= BEDELÍA NAVIGATION ================= -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/dashboard">
|
||||
<i class="bi bi-speedometer2 me-1"></i>Panel Bedelía
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-door-open me-1"></i>Espacios & Aulas
|
||||
</a>
|
||||
<ul class="dropdown-menu shadow-sm">
|
||||
<li><a class="dropdown-item" href="/classrooms/list_classrooms?view_mode=physical"><i class="bi bi-door-open me-2 text-primary"></i>Aulas Presenciales</a></li>
|
||||
<li><a class="dropdown-item" href="/classrooms/list_classrooms?view_mode=virtual"><i class="bi bi-camera-video me-2 text-info"></i>Aulas Virtuales (Reunión)</a></li>
|
||||
<li><a class="dropdown-item" href="/classrooms/list_classrooms"><i class="bi bi-grid me-2 text-secondary"></i>Todas las Aulas</a></li>
|
||||
<li><a class="dropdown-item" href="/classrooms/add_classroom"><i class="bi bi-plus-circle me-2 text-success"></i>Nueva Aula</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/buildings/list_buildings"><i class="bi bi-buildings me-2 text-secondary"></i>Edificios y Sedes</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/occupancy_metrics"><i class="bi bi-graph-up-arrow me-2 text-success"></i>Métricas de Ocupación</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-calendar3 me-1"></i>Operaciones & Reservas
|
||||
</a>
|
||||
<ul class="dropdown-menu shadow-sm">
|
||||
<li><a class="dropdown-item" href="/schedule/today_schedule"><i class="bi bi-calendar-day me-2 text-info"></i>Cartelera del Día</a></li>
|
||||
<li><a class="dropdown-item" href="/schedule/calendar_view"><i class="bi bi-calendar-week me-2 text-primary"></i>Calendario General</a></li>
|
||||
<li><a class="dropdown-item" href="/schedule/list_reservations"><i class="bi bi-list-check me-2 text-warning"></i>Gestión de Reservas</a></li>
|
||||
<li><a class="dropdown-item" href="/schedule/add_reservation"><i class="bi bi-plus-circle me-2 text-success"></i>Registrar Reserva</a></li>
|
||||
<li><a class="dropdown-item" href="/schedule/commissions_view"><i class="bi bi-diagram-3 me-2 text-primary"></i>Comisiones y Cursadas</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-mortarboard me-1"></i>Académica & Cursadas
|
||||
</a>
|
||||
<ul class="dropdown-menu shadow-sm">
|
||||
<li><a class="dropdown-item" href="/admin/careers_list"><i class="bi bi-mortarboard me-2 text-primary"></i>Carreras</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/subjects_list"><i class="bi bi-book me-2 text-info"></i>Asignaturas</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/commissions_list"><i class="bi bi-diagram-3 me-2 text-success"></i>Gestión de Comisiones</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/academic_terms_list"><i class="bi bi-calendar-range me-2 text-warning"></i>Ciclo Lectivo</a></li>
|
||||
<li><a class="dropdown-item" href="/admin/milestone_types_list"><i class="bi bi-tags me-2 text-secondary"></i>Tipificaciones de Hitos</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/admin/google_sheets_import"><i class="bi bi-file-earmark-spreadsheet me-2 text-success"></i>Sincronización Sheets</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
{% elif user_role == 'docente' %}
|
||||
<!-- ================= DOCENTE / PROFESOR NAVIGATION ================= -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/dashboard">
|
||||
<i class="bi bi-speedometer2 me-1"></i>Panel Docente
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-calendar-check me-1"></i>Mis Clases & Reservas
|
||||
</a>
|
||||
<ul class="dropdown-menu shadow-sm">
|
||||
<li><a class="dropdown-item" href="/schedule/list_reservations"><i class="bi bi-calendar2-check me-2 text-primary"></i>Mis Reservas de Aulas</a></li>
|
||||
<li><a class="dropdown-item" href="/schedule/add_reservation"><i class="bi bi-plus-circle me-2 text-success"></i>Solicitar Nueva Reserva</a></li>
|
||||
<li><a class="dropdown-item" href="/schedule/commissions_view"><i class="bi bi-diagram-3 me-2 text-info"></i>Mis Comisiones & Cursadas</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fw-semibold" href="/my_subjects/my_subjects_list">
|
||||
<i class="bi bi-mortarboard me-1 text-info"></i>Mis Materias
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-building me-1"></i>Campus & Horarios
|
||||
</a>
|
||||
<ul class="dropdown-menu shadow-sm">
|
||||
<li><a class="dropdown-item" href="/schedule/today_schedule"><i class="bi bi-calendar-day me-2 text-info"></i>Cartelera del Día (¿Dónde curso hoy?)</a></li>
|
||||
<li><a class="dropdown-item" href="/schedule/calendar_view"><i class="bi bi-calendar-week me-2 text-primary"></i>Calendario General de Aulas</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="/classrooms/list_classrooms"><i class="bi bi-camera-video me-2 text-info"></i>Aulas Virtuales (Reuniones)</a></li>
|
||||
<li><a class="dropdown-item" href="/classrooms/list_classrooms"><i class="bi bi-door-open me-2 text-secondary"></i>Consulta de Aulas Presenciales</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
{% else %}
|
||||
<!-- ================= ALUMNO / ESTUDIANTE NAVIGATION ================= -->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/dashboard">
|
||||
<i class="bi bi-house-door me-1"></i>Mi Portal
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link fw-semibold" href="/my_subjects/my_subjects_list">
|
||||
<i class="bi bi-mortarboard me-1 text-success"></i>Mis Materias
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/schedule/today_schedule">
|
||||
<i class="bi bi-geo-alt me-1"></i>Cartelera de Hoy
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/schedule/calendar_view">
|
||||
<i class="bi bi-calendar-week me-1"></i>Cronograma de Clases
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/classrooms/list_classrooms">
|
||||
<i class="bi bi-camera-video me-1"></i>Aulas Virtuales
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/classrooms/list_classrooms">
|
||||
<i class="bi bi-door-open me-1"></i>Espacios del Campus
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav align-items-center">
|
||||
<!-- Theme Mode Toggle Button -->
|
||||
<li class="nav-item me-2">
|
||||
<button class="theme-toggle-btn" type="button" aria-label="Cambiar tema" title="Modo Claro/Oscuro">
|
||||
<i class="bi bi-moon-stars-fill"></i>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
<!-- Language Switcher -->
|
||||
<li class="nav-item me-2">
|
||||
{% include 'partials/language_switcher.html' %}
|
||||
</li>
|
||||
|
||||
<!-- User Dropdown with Avatar and Institutional Role -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle d-flex align-items-center py-1" href="#" role="button" data-bs-toggle="dropdown">
|
||||
<span class="user-avatar-small">{{ user.name[0]|upper if user.name else 'U' }}</span>
|
||||
<div class="d-none d-lg-block text-start ms-2">
|
||||
<div class="lh-1 small fw-semibold">{{ user.first_name }}</div>
|
||||
<span class="badge {{ user.role_badge_display.class }} role-pill mt-1" style="font-size: 0.65rem; padding: 0.15rem 0.45rem;">
|
||||
<i class="bi {{ user.role_badge_display.icon }}"></i> {{ user.role_badge_display.label }}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end shadow-sm border-0">
|
||||
<li>
|
||||
<div class="px-3 py-2 border-bottom">
|
||||
<small class="text-muted d-block">Signed in as</small>
|
||||
<span class="fw-bold small d-block">{{ user.email }}</span>
|
||||
<span class="badge {{ user.role_badge_display.class }} role-pill mt-1">
|
||||
<i class="bi {{ user.role_badge_display.icon }}"></i> {{ user.role_badge_display.label }}
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="/auth/profile">
|
||||
<i class="bi bi-person me-2"></i> Profile
|
||||
</a></li>
|
||||
<li><a class="dropdown-item" href="/auth/change_password">
|
||||
<i class="bi bi-key me-2"></i> Change Password
|
||||
</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item text-danger" href="/auth/logout">
|
||||
<i class="bi bi-box-arrow-right me-2"></i> Logout
|
||||
</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
<!-- Flash Messages -->
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 1080;">
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
||||
<!-- Theme Toggle JS -->
|
||||
<script src="/js/theme-toggle.js"></script>
|
||||
<!-- Custom JS -->
|
||||
<script src="/js/main.js"></script>
|
||||
<!-- View Switcher JS -->
|
||||
<script src="/js/view_switcher.js"></script>
|
||||
|
||||
<!-- Show flash messages -->
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.toast').toast('show');
|
||||
});
|
||||
</script>
|
||||
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}
|
||||
{% if building %}Editar Edificio - {{ building.name }}{% else %}Nuevo Edificio{% endif %} - Edu-Space Admin
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="h3 mb-0">
|
||||
<i class="bi bi-buildings text-primary me-2"></i>
|
||||
{% if building %}Editar Edificio{% else %}Nuevo Edificio{% endif %}
|
||||
</h1>
|
||||
<a href="/buildings/list_buildings" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Volver a Edificios
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-info-circle text-primary me-2"></i>Información del Edificio / Sede
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<form method="POST" novalidate>
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-md-8">
|
||||
{{ form.name.label(class="form-label fw-semibold") }}
|
||||
{{ form.name(class="form-control" + (" is-invalid" if form.name.errors else ""), placeholder="ej. Edificio Central, Pabellón de Ciencias, Sede Norte") }}
|
||||
{% if form.name.errors %}
|
||||
<div class="invalid-feedback">{{ form.name.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
{{ form.code.label(class="form-label fw-semibold") }}
|
||||
{{ form.code(class="form-control" + (" is-invalid" if form.code.errors else ""), placeholder="ej. CENTRAL, VIRTUAL, PAB-A") }}
|
||||
{% if form.code.errors %}
|
||||
<div class="invalid-feedback">{{ form.code.errors[0] }}</div>
|
||||
{% endif %}
|
||||
<small class="text-muted">Código identificador corto</small>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
{{ form.address.label(class="form-label fw-semibold") }}
|
||||
{{ form.address(class="form-control" + (" is-invalid" if form.address.errors else ""), placeholder="ej. Av. Paseo Colón 255, CABA") }}
|
||||
{% if form.address.errors %}
|
||||
<div class="invalid-feedback">{{ form.address.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
{{ form.floors.label(class="form-label fw-semibold") }}
|
||||
{{ form.floors(class="form-control" + (" is-invalid" if form.floors.errors else ""), min=1, max=100) }}
|
||||
{% if form.floors.errors %}
|
||||
<div class="invalid-feedback">{{ form.floors.errors[0] }}</div>
|
||||
{% endif %}
|
||||
<small class="text-muted">Cantidad de plantas/pisos</small>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
{{ form.description.label(class="form-label fw-semibold") }}
|
||||
{{ form.description(class="form-control", rows=3, placeholder="Información relevante, accesos, comodidades o departamentos alojados...") }}
|
||||
{% if form.description.errors %}
|
||||
<div class="invalid-feedback">{{ form.description.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="form-check form-switch pt-2">
|
||||
{{ form.is_active(class="form-check-input", role="switch") }}
|
||||
{{ form.is_active.label(class="form-check-label fw-semibold") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
|
||||
<a href="/buildings/list_buildings" class="btn btn-outline-secondary">Cancelar</a>
|
||||
<button type="submit" class="btn btn-primary px-4">
|
||||
<i class="bi bi-check-circle me-1"></i>
|
||||
{% if building %}Guardar Cambios{% else %}Crear Edificio{% endif %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,223 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Gestión de Edificios - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-md-7">
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-buildings text-primary me-2"></i>Gestión de Edificios
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">Administra las sedes, edificios físicos y campus virtuales de UniCABA</p>
|
||||
</div>
|
||||
<div class="col-md-5 text-md-end mt-3 mt-md-0">
|
||||
{% if user.has_permission('classrooms', 'read_write') %}
|
||||
<a href="/buildings/add_building" class="btn btn-primary me-2">
|
||||
<i class="bi bi-plus-circle me-1"></i>Nuevo Edificio
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/classrooms/list_classrooms" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-door-open me-1"></i>Ver Aulas
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Cards -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="rounded-3 p-3 bg-primary bg-opacity-10 text-primary me-3">
|
||||
<i class="bi bi-buildings fs-3"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-muted small fw-semibold">Total Edificios</div>
|
||||
<h3 class="fw-bold mb-0">{{ buildings|length }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="rounded-3 p-3 bg-success bg-opacity-10 text-success me-3">
|
||||
<i class="bi bi-door-open fs-3"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-muted small fw-semibold">Aulas Activas</div>
|
||||
<h3 class="fw-bold mb-0 text-success">{{ total_classrooms }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="rounded-3 p-3 bg-info bg-opacity-10 text-info me-3">
|
||||
<i class="bi bi-people fs-3"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-muted small fw-semibold">Capacidad Total</div>
|
||||
<h3 class="fw-bold mb-0 text-info">{{ total_capacity }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="rounded-3 p-3 bg-warning bg-opacity-10 text-warning me-3">
|
||||
<i class="bi bi-layers fs-3"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-muted small fw-semibold">Pisos Disponibles</div>
|
||||
<h3 class="fw-bold mb-0 text-warning">{{ buildings|sum(attribute='floors') }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter & Search Toolbar -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body p-3">
|
||||
<form method="GET" class="row g-2 align-items-center">
|
||||
<div class="col-md-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-body-tertiary border-end-0">
|
||||
<i class="bi bi-search text-muted"></i>
|
||||
</span>
|
||||
<input type="text" name="search" value="{{ search }}" class="form-control border-start-0" placeholder="Buscar por nombre, código o dirección...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<select name="status" class="form-select" onchange="this.form.submit()">
|
||||
<option value="">Todos los estados</option>
|
||||
<option value="active" {% if status_filter == 'active' %}selected{% endif %}>Activos únicamente</option>
|
||||
<option value="inactive" {% if status_filter == 'inactive' %}selected{% endif %}>Inactivos</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2 d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary w-100">Buscar</button>
|
||||
{% if search or status_filter %}
|
||||
<a href="/buildings/list_buildings" class="btn btn-outline-secondary" title="Limpiar filtro">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buildings Cards List -->
|
||||
<div class="row g-3">
|
||||
{% for b in buildings %}
|
||||
<div class="col-lg-6">
|
||||
<div class="card border-0 shadow-sm h-100 position-relative">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="badge bg-secondary-subtle text-secondary font-monospace border mb-1">
|
||||
{{ b.code or 'EDIF' }}
|
||||
</span>
|
||||
<h5 class="card-title fw-bold mb-0">
|
||||
<a href="/buildings/view_building" class="text-decoration-none text-primary">
|
||||
{{ b.name }}
|
||||
</a>
|
||||
</h5>
|
||||
</div>
|
||||
<div>
|
||||
{% if b.is_active %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">
|
||||
<i class="bi bi-check-circle me-1"></i>Activo
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1">
|
||||
<i class="bi bi-x-circle me-1"></i>Inactivo
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if b.address %}
|
||||
<p class="text-muted small mb-3">
|
||||
<i class="bi bi-geo-alt-fill text-danger me-1"></i>{{ b.address }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if b.description %}
|
||||
<p class="small text-secondary mb-3">{{ b.description }}</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="row g-2 text-center pt-2 border-top">
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded bg-body-tertiary">
|
||||
<small class="text-muted d-block">Pisos</small>
|
||||
<span class="fw-bold fs-6">{{ b.floors }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded bg-body-tertiary">
|
||||
<small class="text-muted d-block">Aulas</small>
|
||||
<span class="fw-bold fs-6 text-primary">{{ b.classrooms_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="p-2 rounded bg-body-tertiary">
|
||||
<small class="text-muted d-block">Capacidad</small>
|
||||
<span class="fw-bold fs-6 text-success">{{ b.total_capacity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer bg-transparent border-0 py-3 d-flex justify-content-between align-items-center">
|
||||
<a href="/buildings/view_building" class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-eye me-1"></i>Ver Distribución de Aulas
|
||||
</a>
|
||||
|
||||
{% if user.has_permission('classrooms', 'read_write') %}
|
||||
<div class="btn-group">
|
||||
<a href="/buildings/edit_building" class="btn btn-outline-secondary btn-sm" title="Editar Edificio">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
<form method="POST" action="/buildings/toggle_building" class="d-inline">
|
||||
<button type="submit" class="btn btn-outline-secondary btn-sm" title="{% if b.is_active %}Desactivar{% else %}Activar{% endif %}">
|
||||
<i class="bi bi-power"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm p-5 text-center">
|
||||
<i class="bi bi-buildings text-muted fs-1 mb-3"></i>
|
||||
<h5 class="fw-bold">No se encontraron edificios</h5>
|
||||
<p class="text-muted mb-3">No hay edificios que coincidan con los criterios de búsqueda.</p>
|
||||
{% if user.has_permission('classrooms', 'read_write') %}
|
||||
<div>
|
||||
<a href="/buildings/add_building" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-1"></i>Crear Nuevo Edificio
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,177 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ building.name }} - Detalle del Edificio - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Breadcrumb & Header -->
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-md-7">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-1 small">
|
||||
<li class="breadcrumb-item"><a href="/buildings/list_buildings">Edificios</a></li>
|
||||
<li class="breadcrumb-item active">{{ building.name }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="h3 mb-0 d-flex align-items-center flex-wrap gap-2">
|
||||
<i class="bi bi-building text-primary"></i> {{ building.name }}
|
||||
<span class="badge bg-secondary-subtle text-secondary font-monospace border fs-6">{{ building.code or 'EDIF' }}</span>
|
||||
{% if building.is_active %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle fs-6">
|
||||
<i class="bi bi-check-circle me-1"></i>Activo
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger-subtle fs-6">
|
||||
<i class="bi bi-x-circle me-1"></i>Inactivo
|
||||
</span>
|
||||
{% endif %}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="col-md-5 text-md-end mt-3 mt-md-0">
|
||||
{% if user.has_permission('classrooms', 'read_write') %}
|
||||
<a href="/buildings/edit_building" class="btn btn-outline-secondary me-2">
|
||||
<i class="bi bi-pencil me-1"></i>Editar Edificio
|
||||
</a>
|
||||
<a href="/classrooms/add_classroom" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle me-1"></i>Nueva Aula
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overview Cards -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-3">
|
||||
<div class="text-muted small fw-semibold">Ubicación / Dirección</div>
|
||||
<p class="h6 fw-bold mb-2">
|
||||
<i class="bi bi-geo-alt text-danger me-1"></i>{{ building.address or 'Sin dirección especificada' }}
|
||||
</p>
|
||||
{% if building.description %}
|
||||
<small class="text-secondary">{{ building.description }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-4">
|
||||
<div class="card border-0 shadow-sm text-center p-3">
|
||||
<small class="text-muted text-uppercase fw-bold">Pisos</small>
|
||||
<span class="display-6 fw-bold text-primary">{{ building.floors }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card border-0 shadow-sm text-center p-3">
|
||||
<small class="text-muted text-uppercase fw-bold">Aulas Asociadas</small>
|
||||
<span class="display-6 fw-bold text-success">{{ classrooms|length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="card border-0 shadow-sm text-center p-3">
|
||||
<small class="text-muted text-uppercase fw-bold">Capacidad Total</small>
|
||||
<span class="display-6 fw-bold text-info">{{ building.total_capacity }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Classrooms by Floor -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-layers text-primary me-2"></i>Distribución de Aulas por Piso
|
||||
</h5>
|
||||
<span class="badge badge-brand">{{ classrooms|length }} aulas configuradas</span>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
{% if classrooms_by_floor %}
|
||||
{% for floor_num in classrooms_by_floor|sort %}
|
||||
<div class="mb-4">
|
||||
<div class="d-flex align-items-center mb-3">
|
||||
<span class="badge bg-dark bg-opacity-75 fs-6 px-3 py-2 me-2">
|
||||
<i class="bi bi-layer-forward me-1"></i>
|
||||
{% if floor_num == 0 %}Planta Baja{% else %}Piso {{ floor_num }}{% endif %}
|
||||
</span>
|
||||
<div class="border-bottom flex-grow-1"></div>
|
||||
<small class="text-muted ms-2">{{ classrooms_by_floor[floor_num]|length }} aulas</small>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
{% for c in classrooms_by_floor[floor_num] %}
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<div class="card border border-light-subtle shadow-sm h-100">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h6 class="fw-bold mb-0">
|
||||
<a href="/classrooms/view_classroom" class="text-decoration-none text-primary">
|
||||
<i class="bi bi-door-open me-1"></i>{{ c.code }}
|
||||
</a>
|
||||
</h6>
|
||||
{% if c.is_active %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle small">Activa</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger-subtle small">Inactiva</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="small text-muted mb-2">
|
||||
<i class="bi bi-people me-1"></i>Capacidad: <strong>{{ c.capacity }}</strong> estudiantes
|
||||
</div>
|
||||
|
||||
{% if c.description %}
|
||||
<p class="small text-secondary mb-2 text-truncate">{{ c.description }}</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
||||
<a href="/classrooms/view_classroom" class="btn btn-outline-primary btn-sm py-0 px-2">
|
||||
<small>Ver Ficha</small>
|
||||
</a>
|
||||
{% if user.has_permission('classrooms', 'read_write') %}
|
||||
<a href="/classrooms/edit_classroom" class="btn btn-outline-secondary btn-sm py-0 px-2">
|
||||
<small>Editar</small>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-door-closed text-muted fs-1 mb-2"></i>
|
||||
<h6 class="fw-bold">No hay aulas asignadas a este edificio</h6>
|
||||
<p class="text-muted small mb-3">Puedes crear aulas nuevas o editar las existentes para vincularlas aquí.</p>
|
||||
{% if user.has_permission('classrooms', 'read_write') %}
|
||||
<a href="/classrooms/add_classroom" class="btn btn-primary btn-sm">
|
||||
<i class="bi bi-plus-circle me-1"></i>Agregar Primera Aula
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Danger Zone (Delete) -->
|
||||
{% if user.has_permission('classrooms', 'read_write') %}
|
||||
<div class="card border-danger border-opacity-25 shadow-sm mb-4">
|
||||
<div class="card-body p-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
|
||||
<div>
|
||||
<h6 class="text-danger fw-bold mb-1">Eliminar Edificio</h6>
|
||||
<small class="text-muted">Solo es posible eliminar edificios que no tengan aulas asignadas.</small>
|
||||
</div>
|
||||
<form method="POST" action="/buildings/delete_building" onsubmit="return confirm('¿Estás seguro de que deseas eliminar este edificio?');">
|
||||
<button type="submit" class="btn btn-outline-danger btn-sm" {% if classrooms|length > 0 %}disabled title="Tiene aulas asociadas"{% endif %}>
|
||||
<i class="bi bi-trash me-1"></i>Eliminar Edificio
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,255 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Add Classroom - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-1 small">
|
||||
<li class="breadcrumb-item"><a href="/classrooms/list_classrooms">Classrooms</a></li>
|
||||
<li class="breadcrumb-item active">Add Classroom</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="h3 mb-0">
|
||||
<i class="bi bi-plus-circle text-primary me-2"></i>Add Classroom
|
||||
</h1>
|
||||
</div>
|
||||
<a href="/classrooms/list_classrooms" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Back to Classrooms
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-door-open text-primary me-2"></i>Classroom Information
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<form method="POST" id="classroom-form" novalidate>
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<!-- Selector de Edificio / Sede -->
|
||||
<div class="col-md-6">
|
||||
<label for="building_id" class="form-label fw-semibold">
|
||||
<i class="bi bi-buildings text-primary me-1"></i>Edificio / Sede <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.building_id(class="form-select", id="building_id") }}
|
||||
{% if form.building_id.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.building_id.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Input emergente si selecciona "+ Crear nuevo edificio" -->
|
||||
<div id="newBuildingContainer" class="mt-2 p-2 rounded bg-body-tertiary border border-success-subtle" style="display: none;">
|
||||
<label for="new_building_name" class="form-label small fw-bold text-success mb-1">
|
||||
<i class="bi bi-plus-circle me-1"></i>Nombre del Nuevo Edificio / Sede:
|
||||
</label>
|
||||
{{ form.new_building_name(class="form-control form-control-sm", id="new_building_name", placeholder="ej. Anexo Belgrano, Pabellón III") }}
|
||||
<div class="form-text small text-muted">Se registrará automáticamente en el catálogo de sedes.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Selector / Input de Piso con sugerencias -->
|
||||
<div class="col-md-3">
|
||||
<label for="floor" class="form-label fw-semibold">
|
||||
<i class="bi bi-layers text-secondary me-1"></i>Piso / Nivel <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.floor(class="form-control", id="floor", list="floorSuggestions", placeholder="ej. PB, 1, 2, 4°P") }}
|
||||
<datalist id="floorSuggestions">
|
||||
<!-- Poblado dinámicamente por JS según el edificio -->
|
||||
</datalist>
|
||||
<div class="form-text small text-muted">Sugerido o nuevo</div>
|
||||
{% if form.floor.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.floor.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Número / Nombre de Aula -->
|
||||
<div class="col-md-3">
|
||||
<label for="room_number" class="form-label fw-semibold">
|
||||
<i class="bi bi-door-open text-info me-1"></i>Aula / Sala <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.room_number(class="form-control", id="room_number", placeholder="ej. Aula 304, Lab 1") }}
|
||||
{% if form.room_number.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.room_number.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label for="capacity" class="form-label fw-semibold mb-0">Capacidad de Alumnos <span class="text-danger">*</span></label>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary py-0 px-2" id="btnInfinityAdd" style="font-size: 0.8rem;" title="Asignar capacidad ilimitada">
|
||||
<i class="bi bi-infinity me-1"></i>Ilimitada (∞)
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
{{ form.capacity(class="form-control", id="capacity", placeholder="ej. 35 o ∞") }}
|
||||
<span class="input-group-text bg-body-tertiary text-muted font-monospace"><i class="bi bi-people"></i></span>
|
||||
</div>
|
||||
<div class="form-text small text-muted mt-1">
|
||||
<i class="bi bi-info-circle text-info me-1"></i>Para aulas virtuales o sin límite de aforo, ingrese <strong>∞</strong> o <strong>0</strong>.
|
||||
</div>
|
||||
{% if form.capacity.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.capacity.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 d-flex align-items-center pt-md-3">
|
||||
<div class="form-check form-switch pt-2">
|
||||
{{ form.is_active(class="form-check-input", id="is_active") }}
|
||||
<label class="form-check-label fw-semibold" for="is_active">Aula Habilitada para Reservas</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
{{ form.description.label(class="form-label fw-semibold") }}
|
||||
{{ form.description(class="form-control", rows="3", placeholder=_("Opcional: Detalles adicionales de equipamiento, tomas de corriente, proyector...")) }}
|
||||
{% if form.description.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.description.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Preview Card -->
|
||||
<div class="card bg-body-tertiary border-0 shadow-xs mb-4">
|
||||
<div class="card-body py-3 px-4">
|
||||
<h6 class="card-subtitle mb-2 text-muted small fw-bold">
|
||||
<i class="bi bi-eye me-1"></i>Vista Previa de Ubicación
|
||||
</h6>
|
||||
<div class="row g-2">
|
||||
<div class="col-md-4">
|
||||
<small class="text-muted d-block">🏢 Edificio</small>
|
||||
<strong id="preview-building" class="text-primary">-</strong>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<small class="text-muted d-block">🪜 Piso</small>
|
||||
<strong id="preview-floor" class="text-secondary">-</strong>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<small class="text-muted d-block">🚪 Aula / Código</small>
|
||||
<strong id="preview-room" class="text-success">-</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="/classrooms/list_classrooms" class="btn btn-outline-secondary">
|
||||
Cancelar
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary px-4">
|
||||
<i class="bi bi-check-circle me-1"></i>Crear Aula
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Map of existing floors per building
|
||||
var buildingFloors = {{ building_floors|tojson }};
|
||||
|
||||
var buildingSelect = document.getElementById('building_id');
|
||||
var newBuildingContainer = document.getElementById('newBuildingContainer');
|
||||
var newBuildingNameInput = document.getElementById('new_building_name');
|
||||
var floorInput = document.getElementById('floor');
|
||||
var floorDatalist = document.getElementById('floorSuggestions');
|
||||
var roomInput = document.getElementById('room_number');
|
||||
|
||||
var previewBuilding = document.getElementById('preview-building');
|
||||
var previewFloor = document.getElementById('preview-floor');
|
||||
var previewRoom = document.getElementById('preview-room');
|
||||
|
||||
function updateFloorsDatalist(bId) {
|
||||
if (!floorDatalist) return;
|
||||
floorDatalist.innerHTML = '';
|
||||
var floors = buildingFloors[bId] || [];
|
||||
floors.forEach(function(f) {
|
||||
var opt = document.createElement('option');
|
||||
opt.value = f;
|
||||
opt.textContent = (f === '0' || f === 'PB') ? 'Planta Baja' : 'Piso ' + f;
|
||||
floorDatalist.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
function updatePreview() {
|
||||
var bText = '-';
|
||||
if (buildingSelect) {
|
||||
if (buildingSelect.value === '__new__') {
|
||||
bText = newBuildingNameInput.value.trim() || '{{ _("Nuevo Edificio") }}';
|
||||
} else if (buildingSelect.selectedIndex >= 0) {
|
||||
bText = buildingSelect.options[buildingSelect.selectedIndex].text;
|
||||
}
|
||||
}
|
||||
var fText = floorInput ? (floorInput.value.trim() || '-') : '-';
|
||||
var rText = roomInput ? (roomInput.value.trim() || '-') : '-';
|
||||
|
||||
if (previewBuilding) previewBuilding.textContent = bText;
|
||||
if (previewFloor) previewFloor.textContent = (fText === '0' || fText.toUpperCase() === 'PB') ? 'Planta Baja' : fText;
|
||||
if (previewRoom) previewRoom.textContent = rText;
|
||||
}
|
||||
|
||||
if (buildingSelect) {
|
||||
buildingSelect.addEventListener('change', function() {
|
||||
if (this.value === '__new__') {
|
||||
newBuildingContainer.style.display = 'block';
|
||||
if (newBuildingNameInput) newBuildingNameInput.focus();
|
||||
} else {
|
||||
newBuildingContainer.style.display = 'none';
|
||||
updateFloorsDatalist(this.value);
|
||||
}
|
||||
updatePreview();
|
||||
});
|
||||
// Initial call
|
||||
if (buildingSelect.value === '__new__') {
|
||||
newBuildingContainer.style.display = 'block';
|
||||
} else if (buildingSelect.value) {
|
||||
updateFloorsDatalist(buildingSelect.value);
|
||||
}
|
||||
}
|
||||
|
||||
if (newBuildingNameInput) newBuildingNameInput.addEventListener('input', updatePreview);
|
||||
if (floorInput) floorInput.addEventListener('input', updatePreview);
|
||||
if (roomInput) roomInput.addEventListener('input', updatePreview);
|
||||
|
||||
updatePreview();
|
||||
|
||||
// Infinity button
|
||||
var btnInf = document.getElementById('btnInfinityAdd');
|
||||
var capInput = document.getElementById('capacity');
|
||||
if (btnInf && capInput) {
|
||||
btnInf.addEventListener('click', function() {
|
||||
capInput.value = '∞';
|
||||
capInput.focus();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,246 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Edit Classroom - {{ classroom.code_display }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-md-7">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-1 small">
|
||||
<li class="breadcrumb-item"><a href="/classrooms/list_classrooms">Classrooms</a></li>
|
||||
<li class="breadcrumb-item"><a href="/classrooms/view_classroom">{{ classroom.code_display }}</a></li>
|
||||
<li class="breadcrumb-item active">Edit</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-pencil-square text-primary me-2"></i>Edit Classroom
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">{{ classroom.location_display }}</p>
|
||||
</div>
|
||||
<div class="col-md-5 text-md-end mt-3 mt-md-0">
|
||||
<a href="/classrooms/view_classroom" class="btn btn-outline-secondary me-2">
|
||||
<i class="bi bi-eye me-1"></i>Ver Detalle
|
||||
</a>
|
||||
<a href="/classrooms/list_classrooms" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Volver al Listado
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-door-open text-primary me-2"></i>Classroom Information
|
||||
</h5>
|
||||
<span class="badge bg-secondary-subtle text-secondary font-monospace border">ID #{{ classroom.id }}</span>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<form method="POST" id="classroom-form" novalidate>
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<!-- Edificio -->
|
||||
<div class="col-md-6">
|
||||
<label for="building_id" class="form-label fw-semibold">
|
||||
<i class="bi bi-buildings text-primary me-1"></i>Edificio / Sede <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.building_id(class="form-select", id="building_id") }}
|
||||
{% if form.building_id.errors %}
|
||||
<div class="text-danger small mt-1">{{ form.building_id.errors[0] }}</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="newBuildingContainer" class="mt-2 p-2 rounded bg-body-tertiary border border-success-subtle" style="display: none;">
|
||||
<label for="new_building_name" class="form-label small fw-bold text-success mb-1">
|
||||
<i class="bi bi-plus-circle me-1"></i>Nombre del Nuevo Edificio:
|
||||
</label>
|
||||
{{ form.new_building_name(class="form-control form-control-sm", id="new_building_name", placeholder="ej. Pabellón III") }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Piso -->
|
||||
<div class="col-md-3">
|
||||
<label for="floor" class="form-label fw-semibold">
|
||||
<i class="bi bi-layers text-secondary me-1"></i>Piso / Nivel <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.floor(class="form-control", id="floor", list="floorSuggestions", placeholder="ej. PB, 1, 2, 4°P") }}
|
||||
<datalist id="floorSuggestions">
|
||||
<!-- sugerencias dinámicas -->
|
||||
</datalist>
|
||||
<div class="form-text small text-muted">Sugerido o nuevo</div>
|
||||
{% if form.floor.errors %}
|
||||
<div class="text-danger small mt-1">{{ form.floor.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Aula -->
|
||||
<div class="col-md-3">
|
||||
<label for="room_number" class="form-label fw-semibold">
|
||||
<i class="bi bi-door-open text-info me-1"></i>Aula / Sala <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.room_number(class="form-control", id="room_number", placeholder="ej. Aula 304, Lab 1") }}
|
||||
{% if form.room_number.errors %}
|
||||
<div class="text-danger small mt-1">{{ form.room_number.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<label for="capacityInput" class="form-label fw-semibold mb-0">Capacidad de Alumnos <span class="text-danger">*</span></label>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary py-0 px-2" id="btnInfinity" style="font-size: 0.8rem;" title="Asignar capacidad ilimitada">
|
||||
<i class="bi bi-infinity me-1"></i>Ilimitada (∞)
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
{{ form.capacity(class="form-control" + (" is-invalid" if form.capacity.errors else ""), id="capacityInput", placeholder="ej. 35 o ∞") }}
|
||||
<span class="input-group-text bg-body-tertiary text-muted font-monospace"><i class="bi bi-people"></i></span>
|
||||
</div>
|
||||
<div class="form-text small text-muted mt-1">
|
||||
<i class="bi bi-info-circle text-info me-1"></i>Para aulas virtuales o eventos sin aforo restringido, ingrese <strong>∞</strong> o <strong>0</strong>.
|
||||
</div>
|
||||
{% if form.capacity.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.capacity.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 d-flex align-items-center pt-md-3">
|
||||
<div class="form-check form-switch pt-2">
|
||||
{{ form.is_active(class="form-check-input", id="is_active") }}
|
||||
<label class="form-check-label fw-semibold" for="is_active">
|
||||
Aula Habilitada para Reservas
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
{{ form.description.label(class="form-label fw-semibold") }}
|
||||
{{ form.description(class="form-control" + (" is-invalid" if form.description.errors else ""), rows="3", placeholder="Opcional: Detalles adicionales del equipamiento...") }}
|
||||
{% if form.description.errors %}
|
||||
<div class="invalid-feedback">{{ form.description.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Preview Card -->
|
||||
<div class="card bg-body-tertiary border-0 shadow-xs mb-4">
|
||||
<div class="card-body py-3 px-4">
|
||||
<h6 class="card-subtitle mb-2 text-muted small fw-bold">
|
||||
<i class="bi bi-eye me-1"></i>Vista Previa de Ubicación
|
||||
</h6>
|
||||
<div class="row g-2">
|
||||
<div class="col-md-4">
|
||||
<small class="text-muted d-block">🏢 Edificio</small>
|
||||
<strong id="preview-building" class="text-primary">{{ classroom.building_name }}</strong>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<small class="text-muted d-block">🪜 Piso</small>
|
||||
<strong id="preview-floor" class="text-secondary">{{ classroom.floor_display }}</strong>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<small class="text-muted d-block">🚪 Aula / Código</small>
|
||||
<strong id="preview-room" class="text-success">{{ classroom.code }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="/classrooms/view_classroom" class="btn btn-outline-secondary">
|
||||
Cancelar
|
||||
</a>
|
||||
<button type="submit" class="btn btn-primary px-4">
|
||||
<i class="bi bi-check-circle me-1"></i>Guardar Cambios
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var buildingFloors = {{ building_floors|tojson }};
|
||||
|
||||
var buildingSelect = document.getElementById('building_id');
|
||||
var newBuildingContainer = document.getElementById('newBuildingContainer');
|
||||
var newBuildingNameInput = document.getElementById('new_building_name');
|
||||
var floorInput = document.getElementById('floor');
|
||||
var floorDatalist = document.getElementById('floorSuggestions');
|
||||
var roomInput = document.getElementById('room_number');
|
||||
|
||||
var previewBuilding = document.getElementById('preview-building');
|
||||
var previewFloor = document.getElementById('preview-floor');
|
||||
var previewRoom = document.getElementById('preview-room');
|
||||
|
||||
function updateFloorsDatalist(bId) {
|
||||
if (!floorDatalist) return;
|
||||
floorDatalist.innerHTML = '';
|
||||
var floors = buildingFloors[bId] || [];
|
||||
floors.forEach(function(f) {
|
||||
var opt = document.createElement('option');
|
||||
opt.value = f;
|
||||
opt.textContent = (f === '0' || f === 'PB') ? 'Planta Baja' : 'Piso ' + f;
|
||||
floorDatalist.appendChild(opt);
|
||||
});
|
||||
}
|
||||
|
||||
function updatePreview() {
|
||||
var bText = '-';
|
||||
if (buildingSelect) {
|
||||
if (buildingSelect.value === '__new__') {
|
||||
bText = newBuildingNameInput.value.trim() || '{{ _("Nuevo Edificio") }}';
|
||||
} else if (buildingSelect.selectedIndex >= 0) {
|
||||
bText = buildingSelect.options[buildingSelect.selectedIndex].text;
|
||||
}
|
||||
}
|
||||
var fText = floorInput ? (floorInput.value.trim() || '-') : '-';
|
||||
var rText = roomInput ? (roomInput.value.trim() || '-') : '-';
|
||||
|
||||
if (previewBuilding) previewBuilding.textContent = bText;
|
||||
if (previewFloor) previewFloor.textContent = (fText === '0' || fText.toUpperCase() === 'PB') ? 'Planta Baja' : fText;
|
||||
if (previewRoom) previewRoom.textContent = rText;
|
||||
}
|
||||
|
||||
if (buildingSelect) {
|
||||
buildingSelect.addEventListener('change', function() {
|
||||
if (this.value === '__new__') {
|
||||
newBuildingContainer.style.display = 'block';
|
||||
if (newBuildingNameInput) newBuildingNameInput.focus();
|
||||
} else {
|
||||
newBuildingContainer.style.display = 'none';
|
||||
updateFloorsDatalist(this.value);
|
||||
}
|
||||
updatePreview();
|
||||
});
|
||||
if (buildingSelect.value === '__new__') {
|
||||
newBuildingContainer.style.display = 'block';
|
||||
} else if (buildingSelect.value) {
|
||||
updateFloorsDatalist(buildingSelect.value);
|
||||
}
|
||||
}
|
||||
|
||||
if (newBuildingNameInput) newBuildingNameInput.addEventListener('input', updatePreview);
|
||||
if (floorInput) floorInput.addEventListener('input', updatePreview);
|
||||
if (roomInput) roomInput.addEventListener('input', updatePreview);
|
||||
|
||||
updatePreview();
|
||||
|
||||
var btnInf = document.getElementById('btnInfinity');
|
||||
var capInput = document.getElementById('capacityInput');
|
||||
if (btnInf && capInput) {
|
||||
btnInf.addEventListener('click', function() {
|
||||
capInput.value = '∞';
|
||||
capInput.focus();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,959 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Aulas y Espacios - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.custom-space-pills .nav-link {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 1.1rem;
|
||||
border-radius: 0.5rem;
|
||||
color: var(--bs-body-color);
|
||||
background-color: var(--bs-tertiary-bg);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.custom-space-pills .nav-link.active {
|
||||
background-color: var(--bs-primary);
|
||||
color: #fff !important;
|
||||
border-color: var(--bs-primary);
|
||||
box-shadow: 0 4px 12px rgba(180, 62, 142, 0.25);
|
||||
}
|
||||
.custom-space-pills .nav-link:hover:not(.active) {
|
||||
background-color: var(--bs-secondary-bg);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.classroom-card, .virtual-room-card {
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
|
||||
border-radius: 0.65rem;
|
||||
}
|
||||
.classroom-card:hover, .virtual-room-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
|
||||
}
|
||||
|
||||
.virtual-banner {
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(180, 62, 142, 0.08) 100%);
|
||||
border: 1px solid rgba(99, 102, 241, 0.25) !important;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
[data-bs-theme="dark"] .virtual-banner {
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.16) 0%, rgba(180, 62, 142, 0.16) 100%);
|
||||
border: 1px solid rgba(99, 102, 241, 0.35) !important;
|
||||
}
|
||||
|
||||
.virtual-stat-box {
|
||||
background-color: var(--bs-body-bg);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.6rem 0.85rem;
|
||||
transition: transform 0.15s ease, border-color 0.15s ease;
|
||||
text-decoration: none !important;
|
||||
display: block;
|
||||
}
|
||||
.virtual-stat-box:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--bs-primary) !important;
|
||||
}
|
||||
|
||||
.metric-pill {
|
||||
padding: 0.35rem 0.2rem;
|
||||
border-radius: 0.45rem;
|
||||
transition: all 0.15s ease;
|
||||
cursor: pointer;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.metric-pill:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.06);
|
||||
}
|
||||
.metric-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.metric-val {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
/* Semantics light */
|
||||
.metric-high {
|
||||
background-color: #FEE2E2;
|
||||
border-color: #FCA5A5 !important;
|
||||
color: #991B1B !important;
|
||||
}
|
||||
.metric-medium {
|
||||
background-color: #FEF3C7;
|
||||
border-color: #FCD34D !important;
|
||||
color: #92400E !important;
|
||||
}
|
||||
.metric-low {
|
||||
background-color: #D1FAE5;
|
||||
border-color: #6EE7B7 !important;
|
||||
color: #065F46 !important;
|
||||
}
|
||||
.metric-zero {
|
||||
background-color: rgba(148, 163, 184, 0.1);
|
||||
border-color: rgba(148, 163, 184, 0.25) !important;
|
||||
color: #64748B !important;
|
||||
}
|
||||
|
||||
/* Semantics dark */
|
||||
[data-bs-theme="dark"] .metric-high {
|
||||
background-color: rgba(239, 68, 68, 0.18);
|
||||
border-color: rgba(239, 68, 68, 0.4) !important;
|
||||
color: #FCA5A5 !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .metric-medium {
|
||||
background-color: rgba(245, 158, 11, 0.18);
|
||||
border-color: rgba(245, 158, 11, 0.4) !important;
|
||||
color: #FCD34D !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .metric-low {
|
||||
background-color: rgba(16, 185, 129, 0.18);
|
||||
border-color: rgba(16, 185, 129, 0.4) !important;
|
||||
color: #6EE7B7 !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .metric-zero {
|
||||
background-color: rgba(148, 163, 184, 0.08);
|
||||
border-color: rgba(148, 163, 184, 0.18) !important;
|
||||
color: #94A3B8 !important;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
|
||||
<!-- 1. Encabezado y Selector de Entorno (Presencial vs Virtual) -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
|
||||
<div>
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-door-open text-primary me-2"></i>Aulas y Espacios de Aprendizaje
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">Administre las aulas físicas de sedes presenciales y las aulas virtuales a demanda del Campus Virtual.</p>
|
||||
</div>
|
||||
<div>
|
||||
{% if view_mode == 'virtual' %}
|
||||
<a href="/schedule/add_reservation?is_virtual=1" class="btn btn-success shadow-sm">
|
||||
<i class="bi bi-camera-video me-1"></i>Nueva Clase Virtual a Demanda
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="/classrooms/add_classroom" class="btn btn-primary shadow-sm">
|
||||
<i class="bi bi-plus-circle me-1"></i>Agregar Aula Física
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pestañas de Selección de Modalidad -->
|
||||
<div class="mt-3">
|
||||
<ul class="nav nav-pills custom-space-pills gap-2">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if view_mode == 'physical' %}active{% endif %}"
|
||||
href="/classrooms/list_classrooms?view_mode=physical">
|
||||
<i class="bi bi-buildings me-2"></i>Aulas Presenciales
|
||||
<span class="badge rounded-pill ms-2 {% if view_mode == 'physical' %}bg-light text-primary{% else %}bg-secondary-subtle text-secondary border{% endif %}">
|
||||
{{ physical_count }} aulas
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if view_mode == 'virtual' %}active{% endif %}"
|
||||
href="/classrooms/list_classrooms?view_mode=virtual">
|
||||
<i class="bi bi-globe2 me-2 text-info"></i>Campus Virtual & Aulas a Demanda
|
||||
<span class="badge rounded-pill ms-2 {% if view_mode == 'virtual' %}bg-light text-primary{% else %}bg-primary-subtle text-primary border{% endif %}">
|
||||
<i class="bi bi-infinity me-1"></i>{{ virtual_count }} salas activas
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================================================================= -->
|
||||
<!-- VISTA 1: AULAS FÍSICAS (PRESENCIALES) -->
|
||||
<!-- ========================================================================= -->
|
||||
{% if view_mode == 'physical' %}
|
||||
|
||||
<!-- Filtros de Aulas Físicas -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body py-2">
|
||||
<form method="GET" class="row g-2 align-items-center">
|
||||
<input type="hidden" name="view_mode" value="physical">
|
||||
<div class="col-md-3">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-body-tertiary"><i class="bi bi-search"></i></span>
|
||||
<input type="text" name="search" class="form-control"
|
||||
placeholder="Buscar aula, descripción..."
|
||||
value="{{ search }}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtro por Edificio Físico -->
|
||||
<div class="col-md-3">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-body-tertiary"><i class="bi bi-buildings text-primary"></i></span>
|
||||
<select name="building_id" class="form-select form-select-sm" onchange="this.form.submit()">
|
||||
<option value="">Todos los edificios presenciales</option>
|
||||
{% for b in buildings %}
|
||||
<option value="{{ b.id }}" {% if building_filter == (b.id|string) %}selected{% endif %}>{{ b.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtro por Piso Real -->
|
||||
<div class="col-md-2">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-body-tertiary"><i class="bi bi-layers text-secondary"></i></span>
|
||||
<select name="floor" class="form-select form-select-sm" onchange="this.form.submit()">
|
||||
<option value="">Todos los pisos</option>
|
||||
{% for f in floors %}
|
||||
<option value="{{ f }}" {% if floor_filter == (f|string) %}selected{% endif %}>
|
||||
{% if f == '0' or f == 'PB' %}Planta Baja{% else %}Piso {{ f }}{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2">
|
||||
<div class="form-check pt-1">
|
||||
<input class="form-check-input" type="checkbox" name="active_only" value="true"
|
||||
id="activeOnly" {% if active_only %}checked{% endif %} onchange="this.form.submit()">
|
||||
<label class="form-check-label small" for="activeOnly">
|
||||
Solo activas
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-2 text-md-end">
|
||||
<button type="submit" class="btn btn-sm btn-primary me-1">
|
||||
<i class="bi bi-filter"></i> Filtrar
|
||||
</button>
|
||||
<a href="/classrooms/list_classrooms" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-x-circle"></i> Limpiar
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra de Resumen y Selector de Vista -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
|
||||
<div class="small text-muted">
|
||||
<i class="bi bi-door-open me-1"></i>
|
||||
<span>Total: <strong class="text-body">{{ classrooms.total if classrooms else 0 }}</strong> aulas encontradas</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="small text-muted d-none d-sm-inline">Modo de visualización:</span>
|
||||
{% set context_id = 'classrooms' %}
|
||||
{% set default_view = 'cards' %}
|
||||
{% include 'partials/view_switcher.html' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grilla y Tabla de Aulas Físicas -->
|
||||
{% if classrooms and classrooms.items %}
|
||||
|
||||
<!-- 1. VISTA DE TARJETAS / MOSAICO -->
|
||||
<div data-view-context="classrooms" data-view-container="cards">
|
||||
<div class="row g-3 mt-1">
|
||||
{% for classroom in classrooms.items %}
|
||||
<div class="col-xxl-3 col-xl-3 col-lg-4 col-md-6 col-sm-12 mb-2">
|
||||
<div class="card classroom-card border shadow-sm h-100">
|
||||
<div class="card-body p-3 d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<!-- Encabezado con Código y Estado -->
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div class="text-truncate me-2">
|
||||
<h5 class="card-title mb-0 fw-bold text-primary text-truncate fs-6" title="{{ classroom.code }}">
|
||||
<i class="bi bi-door-open me-1"></i>{{ classroom.code }}
|
||||
</h5>
|
||||
</div>
|
||||
<span class="badge rounded-pill {% if classroom.is_active %}bg-success-subtle text-success border border-success-subtle{% else %}bg-secondary-subtle text-secondary border{% endif %}" style="font-size: 0.68rem;">
|
||||
{% if classroom.is_active %}Activa{% else %}Inactiva{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Ubicación: Edificio y Piso -->
|
||||
<div class="d-flex flex-wrap gap-1 mb-2">
|
||||
<span class="badge bg-primary-subtle text-primary border" style="font-size: 0.7rem;">
|
||||
<i class="bi bi-buildings me-1"></i>{{ classroom.building_name }}
|
||||
</span>
|
||||
<span class="badge bg-secondary-subtle text-secondary border" style="font-size: 0.7rem;">
|
||||
<i class="bi bi-layers me-1"></i>{{ classroom.floor_display }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Capacidad y Recursos -->
|
||||
<div class="d-flex justify-content-between align-items-center small py-1 px-2 bg-body-tertiary rounded mb-2" style="font-size: 0.75rem;">
|
||||
<div>
|
||||
<span class="text-muted">Capacidad:</span>
|
||||
<strong class="text-body ms-1">{{ classroom.capacity }} asientos</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted"><i class="bi bi-tools me-1"></i>{{ classroom.resources|length if classroom.resources else 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra de Métricas de Ocupación FÍSICA (%) -->
|
||||
{% set metrics = (occupancy_metrics[classroom.id] if occupancy_metrics else null) or {'day_pct': 0, 'day_count': 0, 'week_pct': 0, 'week_count': 0, 'month_pct': 0, 'month_count': 0} %}
|
||||
<div class="classroom-occupancy-bar p-2 rounded bg-body-tertiary border mb-2">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span class="small fw-semibold text-muted" style="font-size: 0.72rem;">
|
||||
<i class="bi bi-graph-up me-1 text-primary"></i>Ocupación
|
||||
</span>
|
||||
<span class="text-muted" style="font-size: 0.65rem;" title="Haz clic en cualquier métrica para ver las reservas de ese período">
|
||||
<i class="bi bi-info-circle me-1"></i>Ver reservas
|
||||
</span>
|
||||
</div>
|
||||
<div class="row g-1 text-center">
|
||||
<!-- Día -->
|
||||
<div class="col-4">
|
||||
<a href="/schedule/list_reservations"
|
||||
class="d-block p-1 text-decoration-none border metric-pill metric-{% if metrics.day_pct > 80 %}high{% elif metrics.day_pct > 40 %}medium{% elif metrics.day_pct > 0 %}low{% else %}zero{% endif %}"
|
||||
title="Ocupación Hoy: {{ metrics.day_count }} clases registradas">
|
||||
<div class="metric-label">Hoy</div>
|
||||
<div class="metric-val">{{ metrics.day_pct }}%</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Semana -->
|
||||
<div class="col-4">
|
||||
<a href="/schedule/list_reservations"
|
||||
class="d-block p-1 text-decoration-none border metric-pill metric-{% if metrics.week_pct > 80 %}high{% elif metrics.week_pct > 40 %}medium{% elif metrics.week_pct > 0 %}low{% else %}zero{% endif %}"
|
||||
title="Ocupación Semana: {{ metrics.week_count }} clases registradas">
|
||||
<div class="metric-label">Semana</div>
|
||||
<div class="metric-val">{{ metrics.week_pct }}%</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- Mes -->
|
||||
<div class="col-4">
|
||||
<a href="/schedule/list_reservations"
|
||||
class="d-block p-1 text-decoration-none border metric-pill metric-{% if metrics.month_pct > 80 %}high{% elif metrics.month_pct > 40 %}medium{% elif metrics.month_pct > 0 %}low{% else %}zero{% endif %}"
|
||||
title="Ocupación Mes: {{ metrics.month_count }} clases registradas">
|
||||
<div class="metric-label">Mes</div>
|
||||
<div class="metric-val">{{ metrics.month_pct }}%</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer con Botones Compactos -->
|
||||
<div class="pt-2 border-top d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group btn-group-sm">
|
||||
<a href="/classrooms/view_classroom"
|
||||
class="btn btn-outline-primary py-0 px-2" title="Ver Ficha" style="font-size: 0.75rem;">
|
||||
<i class="bi bi-eye me-1"></i>Ficha
|
||||
</a>
|
||||
<a href="/classrooms/edit_classroom"
|
||||
class="btn btn-outline-secondary py-0 px-2" title="Editar Aula" style="font-size: 0.75rem;">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
</div>
|
||||
<form method="POST" action="/classrooms/toggle_classroom" class="d-inline mb-0">
|
||||
<button type="submit" class="btn btn-sm py-0 px-2 {% if classroom.is_active %}btn-outline-warning{% else %}btn-outline-success{% endif %}"
|
||||
title="{% if classroom.is_active %}Desactivar{% else %}Activar{% endif %}" style="font-size: 0.75rem;">
|
||||
{% if classroom.is_active %}
|
||||
<i class="bi bi-pause"></i>
|
||||
{% else %}
|
||||
<i class="bi bi-play"></i>
|
||||
{% endif %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. VISTA DE TABLA / GRILLA (AULAS FÍSICAS) -->
|
||||
<div data-view-context="classrooms" data-view-container="table" class="d-none">
|
||||
<div class="card border-0 shadow-sm mt-1">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light small text-uppercase">
|
||||
<tr>
|
||||
<th class="ps-3">Aula / Código</th>
|
||||
<th>Edificio / Sede</th>
|
||||
<th>Piso</th>
|
||||
<th>Capacidad</th>
|
||||
<th>Equipamiento</th>
|
||||
<th>Ocupación (D / S / M)</th>
|
||||
<th>Estado</th>
|
||||
<th class="text-end pe-3">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for classroom in classrooms.items %}
|
||||
{% set metrics = (occupancy_metrics[classroom.id] if occupancy_metrics else null) or {'day_pct': 0, 'day_count': 0, 'week_pct': 0, 'week_count': 0, 'month_pct': 0, 'month_count': 0} %}
|
||||
<tr>
|
||||
<td class="ps-3">
|
||||
<a href="/classrooms/view_classroom" class="fw-bold text-primary text-decoration-none">
|
||||
<i class="bi bi-door-open me-1"></i>{{ classroom.code }}
|
||||
</a>
|
||||
{% if classroom.description %}
|
||||
<small class="text-muted d-block text-truncate" style="max-width: 200px;">{{ classroom.description }}</small>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-primary-subtle text-primary border">
|
||||
<i class="bi bi-buildings me-1"></i>{{ classroom.building_name }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary-subtle text-secondary border">
|
||||
{{ classroom.floor_display }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<strong class="text-body">{{ classroom.capacity }}</strong> <span class="small text-muted">asientos</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-body-tertiary text-body border">
|
||||
<i class="bi bi-tools me-1"></i>{{ classroom.resources|length if classroom.resources else 0 }} recursos
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-1">
|
||||
<span class="badge border {% if metrics.day_pct >= 80 %}metric-high{% elif metrics.day_pct >= 40 %}metric-medium{% else %}metric-low{% endif %}" title="Ocupación Día">
|
||||
D: {{ metrics.day_pct }}%
|
||||
</span>
|
||||
<span class="badge border {% if metrics.week_pct >= 80 %}metric-high{% elif metrics.week_pct >= 40 %}metric-medium{% else %}metric-low{% endif %}" title="Ocupación Semana">
|
||||
S: {{ metrics.week_pct }}%
|
||||
</span>
|
||||
<span class="badge border {% if metrics.month_pct >= 80 %}metric-high{% elif metrics.month_pct >= 40 %}metric-medium{% else %}metric-low{% endif %}" title="Ocupación Mes">
|
||||
M: {{ metrics.month_pct }}%
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge rounded-pill {% if classroom.is_active %}bg-success-subtle text-success border border-success-subtle{% else %}bg-secondary-subtle text-secondary border{% endif %}">
|
||||
{% if classroom.is_active %}Activa{% else %}Inactiva{% endif %}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end pe-3">
|
||||
<div class="btn-group btn-group-sm">
|
||||
<a href="/classrooms/view_classroom" class="btn btn-outline-primary" title="Ver Detalles">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
{% if user.has_permission('classrooms', 'read_write') %}
|
||||
<a href="/classrooms/edit_classroom" class="btn btn-outline-secondary" title="Editar">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
<form method="POST" action="/classrooms/toggle_classroom" class="d-inline mb-0">
|
||||
<button type="submit" class="btn btn-outline-{% if classroom.is_active %}warning{% else %}success{% endif %}"
|
||||
title="{% if classroom.is_active %}Desactivar{% else %}Activar{% endif %}">
|
||||
<i class="bi bi-{% if classroom.is_active %}pause{% else %}play{% endif %}"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paginación Aulas Físicas -->
|
||||
{% if classrooms.pages > 1 %}
|
||||
<nav aria-label="Classroom pagination" class="mt-4">
|
||||
<ul class="pagination pagination-sm justify-content-center">
|
||||
{% if classrooms.has_prev %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="/classrooms/list_classrooms">
|
||||
Anterior
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% for page_num in classrooms.iter_pages() %}
|
||||
{% if page_num %}
|
||||
{% if page_num != classrooms.page %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="/classrooms/list_classrooms">
|
||||
{{ page_num }}
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="page-item active">
|
||||
<span class="page-link">{{ page_num }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<li class="page-item disabled">
|
||||
<span class="page-link">…</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if classrooms.has_next %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="/classrooms/list_classrooms">
|
||||
Siguiente
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-door-open text-muted" style="font-size: 4rem;"></i>
|
||||
<h4 class="mt-3 text-muted">No se encontraron aulas físicas</h4>
|
||||
<p class="text-muted">
|
||||
{% if search %}
|
||||
Ningún aula coincide con los criterios de búsqueda.
|
||||
{% else %}
|
||||
No hay aulas físicas registradas en esta sede.
|
||||
{% endif %}
|
||||
</p>
|
||||
<a href="/classrooms/add_classroom" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle"></i> Agregar Primera Aula
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- ========================================================================= -->
|
||||
<!-- VISTA 2: CAMPUS VIRTUAL (AULAS A DEMANDA · INFINITAS) -->
|
||||
<!-- ========================================================================= -->
|
||||
{% else %}
|
||||
|
||||
<!-- Banner de Infraestructura Cloud y Concurrencia Ilimitada -->
|
||||
<div class="card virtual-banner p-3 mb-4 shadow-sm">
|
||||
<div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3">
|
||||
<div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="badge bg-primary text-white px-2 py-1"><i class="bi bi-cloud-check-fill me-1"></i>Cloud Infrastructure</span>
|
||||
<h5 class="mb-0 fw-bold text-primary">
|
||||
Campus Virtual UniCABA · Aulas a Demanda
|
||||
</h5>
|
||||
</div>
|
||||
<p class="small text-muted mb-0 mt-1">
|
||||
A diferencia de los espacios físicos, las aulas virtuales se crean y escalan de manera <strong>infinita y concurrente</strong> según la necesidad pedagógica de cada comisión.
|
||||
</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2 fs-6">
|
||||
<i class="bi bi-infinity me-1"></i>Capacidad Ilimitada
|
||||
</span>
|
||||
<a href="/schedule/add_reservation?is_virtual=1" class="btn btn-sm btn-primary">
|
||||
<i class="bi bi-plus-lg me-1"></i>Programar Clase Virtual
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Indicadores de Demanda Global -->
|
||||
<div class="row g-2">
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<a href="/schedule/today_schedule" class="virtual-stat-box">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-muted small text-uppercase fw-semibold" style="font-size: 0.7rem;">Sesiones Hoy</span>
|
||||
<h4 class="mb-0 fw-bold text-primary">{{ global_virtual_metrics.today_count }}</h4>
|
||||
</div>
|
||||
<div class="text-primary fs-4"><i class="bi bi-calendar-event"></i></div>
|
||||
</div>
|
||||
<small class="text-muted d-block mt-1" style="font-size: 0.72rem;">Clases virtuales programadas hoy</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<a href="/schedule/list_reservations" class="virtual-stat-box">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-muted small text-uppercase fw-semibold" style="font-size: 0.7rem;">Sesiones Semana</span>
|
||||
<h4 class="mb-0 fw-bold text-info">{{ global_virtual_metrics.week_count }}</h4>
|
||||
</div>
|
||||
<div class="text-info fs-4"><i class="bi bi-calendar-week"></i></div>
|
||||
</div>
|
||||
<small class="text-muted d-block mt-1" style="font-size: 0.72rem;">Clases virtuales esta semana</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<a href="/schedule/list_reservations" class="virtual-stat-box">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-muted small text-uppercase fw-semibold" style="font-size: 0.7rem;">Sesiones del Mes</span>
|
||||
<h4 class="mb-0 fw-bold text-success">{{ global_virtual_metrics.month_count }}</h4>
|
||||
</div>
|
||||
<div class="text-success fs-4"><i class="bi bi-calendar3"></i></div>
|
||||
</div>
|
||||
<small class="text-muted d-block mt-1" style="font-size: 0.72rem;">Total clases remotas en el mes</small>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-sm-6">
|
||||
<div class="virtual-stat-box">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-muted small text-uppercase fw-semibold" style="font-size: 0.7rem;">Salas Activas</span>
|
||||
<h4 class="mb-0 fw-bold text-warning">{{ global_virtual_metrics.commissions_count }}</h4>
|
||||
</div>
|
||||
<div class="text-warning fs-4"><i class="bi bi-diagram-3"></i></div>
|
||||
</div>
|
||||
<small class="text-muted d-block mt-1" style="font-size: 0.72rem;">Comisiones con entorno virtual</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra de Búsqueda de Salas Virtuales -->
|
||||
<div class="row mb-3">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body py-2">
|
||||
<form method="GET" class="row g-2 align-items-center">
|
||||
<input type="hidden" name="view_mode" value="virtual">
|
||||
<div class="col-md-6">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-body-tertiary"><i class="bi bi-search"></i></span>
|
||||
<input type="text" name="search" class="form-control"
|
||||
placeholder="Buscar sala virtual por asignatura, comisión o carrera..."
|
||||
value="{{ search }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 text-md-end">
|
||||
<button type="submit" class="btn btn-sm btn-primary me-1">
|
||||
<i class="bi bi-funnel me-1"></i>Buscar Salas
|
||||
</button>
|
||||
<a href="/classrooms/list_classrooms" class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-arrow-counterclockwise me-1"></i>Limpiar
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Catálogo de Aulas Virtuales por Comisión -->
|
||||
{% if virtual_rooms %}
|
||||
<div class="row g-3">
|
||||
{% for room in virtual_rooms %}
|
||||
<div class="col-xxl-3 col-xl-3 col-lg-4 col-md-6 col-sm-12 mb-2">
|
||||
<div class="card virtual-room-card border shadow-sm h-100">
|
||||
<div class="card-body p-3 d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<!-- Encabezado de la Sala Virtual -->
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div class="text-truncate me-2">
|
||||
<h5 class="card-title mb-0 fw-bold text-primary text-truncate fs-6" title="{{ room.subject_name }}">
|
||||
<i class="bi bi-laptop me-1 text-info"></i>{{ room.subject_name }}
|
||||
</h5>
|
||||
</div>
|
||||
<span class="badge rounded-pill bg-info-subtle text-info border border-info-subtle" style="font-size: 0.68rem;">
|
||||
<i class="bi bi-infinity me-1"></i>A Demanda
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Badges: Comisión, Carrera y Turno -->
|
||||
<div class="d-flex flex-wrap gap-1 mb-2">
|
||||
<span class="badge bg-primary-subtle text-primary border" style="font-size: 0.7rem;">
|
||||
<i class="bi bi-diagram-3 me-1"></i>Com. {{ room.commission_code }}
|
||||
</span>
|
||||
{% if room.subject_code %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border" style="font-size: 0.7rem;">
|
||||
{{ room.subject_code }}
|
||||
</span>
|
||||
{% endif %}
|
||||
<span class="badge bg-light text-dark border" style="font-size: 0.7rem;">
|
||||
{{ room.shift }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Cupo e Información Pedagógica -->
|
||||
<div class="d-flex justify-content-between align-items-center small py-1 px-2 bg-body-tertiary rounded mb-2" style="font-size: 0.75rem;">
|
||||
<div>
|
||||
<span class="text-muted">Alumnos:</span>
|
||||
<strong class="text-body ms-1">{{ room.max_students }}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-muted">Modalidad:</span>
|
||||
<strong class="text-info ms-1">Remoto ∞</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botón de Videollamada (Zoom / Meet / Teams) -->
|
||||
<div class="mb-2">
|
||||
{% if room.virtual_link %}
|
||||
<a href="{{ room.virtual_link }}" target="_blank"
|
||||
class="btn btn-sm btn-outline-success w-100 py-1 d-flex align-items-center justify-content-center"
|
||||
style="font-size: 0.75rem;" title="Abrir enlace de videollamada">
|
||||
<i class="bi bi-camera-video-fill me-1"></i>Unirse a Videollamada
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="p-1 rounded bg-body-tertiary border text-center small text-muted" style="font-size: 0.72rem;">
|
||||
<i class="bi bi-link-45deg me-1"></i>Enlace a demanda por clase
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Barra de Demanda de la Sala Virtual (Hoy, Semana, Mes) -->
|
||||
<div class="p-2 rounded bg-body-tertiary border mb-2">
|
||||
<div class="d-flex justify-content-between align-items-center mb-1">
|
||||
<span class="small fw-semibold text-muted" style="font-size: 0.72rem;">
|
||||
<i class="bi bi-calendar3 me-1 text-primary"></i>Clases a Demanda
|
||||
</span>
|
||||
<span class="text-muted" style="font-size: 0.65rem;">
|
||||
{{ room.total_count }} totales
|
||||
</span>
|
||||
</div>
|
||||
<div class="row g-1 text-center">
|
||||
<!-- Hoy -->
|
||||
<div class="col-4">
|
||||
<div class="p-1 border metric-pill {% if room.day_count > 0 %}metric-low{% else %}metric-zero{% endif %}"
|
||||
data-bs-toggle="modal" data-bs-target="#modalPreviewVirtual{{ room.commission_id }}"
|
||||
role="button" title="Ver vista previa de clases de hoy">
|
||||
<div class="metric-label">Hoy</div>
|
||||
<div class="metric-val">{{ room.day_count }} cl.</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Semana -->
|
||||
<div class="col-4">
|
||||
<div class="p-1 border metric-pill {% if room.week_count > 0 %}metric-medium{% else %}metric-zero{% endif %}"
|
||||
data-bs-toggle="modal" data-bs-target="#modalPreviewVirtual{{ room.commission_id }}"
|
||||
role="button" title="Ver vista previa de clases de la semana">
|
||||
<div class="metric-label">Semana</div>
|
||||
<div class="metric-val">{{ room.week_count }} cl.</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mes -->
|
||||
<div class="col-4">
|
||||
<div class="p-1 border metric-pill {% if room.month_count > 0 %}metric-high{% else %}metric-zero{% endif %}"
|
||||
data-bs-toggle="modal" data-bs-target="#modalPreviewVirtual{{ room.commission_id }}"
|
||||
role="button" title="Ver vista previa de clases del mes">
|
||||
<div class="metric-label">Mes</div>
|
||||
<div class="metric-val">{{ room.month_count }} cl.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer con Botones -->
|
||||
<div class="pt-2 border-top d-flex justify-content-between align-items-center gap-1">
|
||||
<button type="button" class="btn btn-sm btn-primary py-1 px-2 d-flex align-items-center"
|
||||
data-bs-toggle="modal" data-bs-target="#modalPreviewVirtual{{ room.commission_id }}"
|
||||
style="font-size: 0.75rem;" title="Vista previa y modificar sesiones">
|
||||
<i class="bi bi-eye me-1"></i>Vista Previa
|
||||
<span class="badge bg-white text-primary ms-1" style="font-size: 0.65rem;">{{ room.total_count }}</span>
|
||||
</button>
|
||||
<a href="/schedule/add_reservation?commission_id={{ room.commission_id }}&is_virtual=1"
|
||||
class="btn btn-sm btn-outline-success py-1 px-2" style="font-size: 0.75rem;" title="Programar clase en esta sala virtual">
|
||||
<i class="bi bi-plus-lg me-1"></i>Programar
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Vista Previa y Modificación de la Sala Virtual -->
|
||||
<div class="modal fade text-start" id="modalPreviewVirtual{{ room.commission_id }}" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div>
|
||||
<h5 class="modal-title h6 fw-bold mb-1">
|
||||
<i class="bi bi-laptop text-primary me-2"></i>{{ room.subject_name }}
|
||||
</h5>
|
||||
<div class="d-flex flex-wrap gap-1">
|
||||
<span class="badge bg-primary-subtle text-primary border" style="font-size: 0.7rem;">
|
||||
<i class="bi bi-diagram-3 me-1"></i>Comisión {{ room.commission_code }}
|
||||
</span>
|
||||
{% if room.subject_code %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border font-monospace" style="font-size: 0.7rem;">
|
||||
{{ room.subject_code }}
|
||||
</span>
|
||||
{% endif %}
|
||||
<span class="badge bg-info-subtle text-info border" style="font-size: 0.7rem;">
|
||||
<i class="bi bi-infinity me-1"></i>A Demanda · Capacidad Ilimitada
|
||||
</span>
|
||||
<span class="badge bg-light text-dark border" style="font-size: 0.7rem;">
|
||||
{{ room.shift }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<!-- 1. Enlace de Videollamada de la Comisión (Edición directa) -->
|
||||
<div class="card bg-body-tertiary border mb-3">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<span class="fw-semibold small text-body">
|
||||
<i class="bi bi-camera-video text-primary me-1"></i>Enlace de Videollamada (Zoom / Meet / Teams / Moodle)
|
||||
</span>
|
||||
{% if room.virtual_link %}
|
||||
<a href="{{ room.virtual_link }}" target="_blank" class="btn btn-sm btn-success py-0 px-2" style="font-size: 0.75rem;">
|
||||
<i class="bi bi-box-arrow-up-right me-1"></i>Abrir Reunión
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<form method="POST" action="/classrooms/update_virtual_link">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-body border"><i class="bi bi-link-45deg"></i></span>
|
||||
<input type="url" name="virtual_link" class="form-control"
|
||||
placeholder="Ingresar URL de Zoom, Google Meet, Teams, etc."
|
||||
value="{{ room.virtual_link or '' }}">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-save me-1"></i>Guardar Enlace
|
||||
</button>
|
||||
</div>
|
||||
<small class="text-muted d-block mt-1" style="font-size: 0.7rem;">
|
||||
Este enlace se aplicará a todas las clases y cursadas virtuales de esta comisión.
|
||||
</small>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Tabla de Clases / Sesiones Programadas -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<h6 class="fw-bold mb-0 text-body small">
|
||||
<i class="bi bi-calendar3 me-1 text-primary"></i>Sesiones Programadas en el Campus Virtual ({{ room.reservations|length }})
|
||||
</h6>
|
||||
<a href="/schedule/add_reservation?commission_id={{ room.commission_id }}&is_virtual=1" class="btn btn-sm btn-outline-success py-0 px-2" style="font-size: 0.72rem;">
|
||||
<i class="bi bi-plus-lg me-1"></i>Nueva Clase
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if room.reservations %}
|
||||
<div class="table-responsive border rounded mb-2">
|
||||
<table class="table table-sm table-hover align-middle mb-0 small" style="font-size: 0.78rem;">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>#ID</th>
|
||||
<th>Fecha y Horario</th>
|
||||
<th>Turno / Propósito</th>
|
||||
<th>Docente</th>
|
||||
<th>Videollamada</th>
|
||||
<th>Estado</th>
|
||||
<th class="text-end">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for r in room.reservations %}
|
||||
<tr>
|
||||
<td class="text-muted">#{{ r.id }}</td>
|
||||
<td>
|
||||
<span class="fw-bold text-body">{{ r.start_time }}</span>
|
||||
<span class="text-muted d-block font-monospace" style="font-size: 0.72rem;">
|
||||
{{ r.start_time }} - {{ r.end_time }} hs
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-light text-dark border">{{ r.shift or 'Tarde' }}</span>
|
||||
<small class="text-muted d-block text-truncate" style="max-width: 130px;">{{ r.purpose or 'Clase regular' }}</small>
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-body">{{ r.user.name if r.user else 'Docente Asignado' }}</small>
|
||||
</td>
|
||||
<td>
|
||||
{% if r.effective_virtual_link %}
|
||||
<a href="{{ r.effective_virtual_link }}" target="_blank" class="badge bg-success-subtle text-success border border-success-subtle text-decoration-none" title="{{ r.effective_virtual_link }}">
|
||||
<i class="bi bi-camera-video me-1"></i>Link Activo
|
||||
</a>
|
||||
{% else %}
|
||||
<span class="text-muted small">Hereda comisión</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle" style="font-size: 0.68rem;">
|
||||
{{ r.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<div class="btn-group btn-group-sm">
|
||||
<a href="/schedule/edit_reservation"
|
||||
class="btn btn-sm btn-primary py-0 px-2" style="font-size: 0.72rem;"
|
||||
title="Modificar Fecha, Horario, Aula o Detalles">
|
||||
<i class="bi bi-pencil me-1"></i>Modificar
|
||||
</a>
|
||||
<a href="/schedule/view_reservation"
|
||||
class="btn btn-sm btn-outline-secondary py-0 px-2" style="font-size: 0.72rem;"
|
||||
title="Ver Ficha Completa">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-info py-2 small mb-2">
|
||||
<i class="bi bi-info-circle me-1"></i>No hay clases programadas para esta sala virtual en el período actual.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="modal-footer d-flex justify-content-between">
|
||||
<a href="/schedule/list_reservations"
|
||||
class="btn btn-sm btn-outline-secondary">
|
||||
<i class="bi bi-list-check me-1"></i>Ver en Listado de Reservas (Filtrado)
|
||||
</a>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
||||
<a href="/schedule/add_reservation?commission_id={{ room.commission_id }}&is_virtual=1" class="btn btn-sm btn-success">
|
||||
<i class="bi bi-plus-lg me-1"></i>Programar Nueva Clase
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-globe text-muted" style="font-size: 4rem;"></i>
|
||||
<h4 class="mt-3 text-muted">No se encontraron salas virtuales</h4>
|
||||
<p class="text-muted">
|
||||
{% if search %}
|
||||
Ninguna sala virtual coincide con los términos de búsqueda.
|
||||
{% else %}
|
||||
No hay clases virtuales programadas en el Campus Virtual.
|
||||
{% endif %}
|
||||
</p>
|
||||
<a href="/schedule/add_reservation?is_virtual=1" class="btn btn-primary">
|
||||
<i class="bi bi-camera-video me-1"></i>Crear Primera Reserva Virtual
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,173 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}{{ classroom.code_display }} - Classroom Details - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Breadcrumb & Header -->
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-md-7">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-1 small">
|
||||
<li class="breadcrumb-item"><a href="/classrooms/list_classrooms">Classrooms</a></li>
|
||||
<li class="breadcrumb-item active">{{ classroom.code_display }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="h3 mb-0 d-flex align-items-center flex-wrap gap-2">
|
||||
<i class="bi bi-door-open text-primary"></i> {{ classroom.code_display }}
|
||||
{% if classroom.is_active %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle fs-6">
|
||||
<i class="bi bi-check-circle me-1"></i>Active
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger-subtle fs-6">
|
||||
<i class="bi bi-x-circle me-1"></i>Inactive
|
||||
</span>
|
||||
{% endif %}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="col-md-5 text-md-end mt-3 mt-md-0">
|
||||
{% if user.has_permission('classrooms', 'read_write') %}
|
||||
<a href="/classrooms/edit_classroom" class="btn btn-primary me-2">
|
||||
<i class="bi bi-pencil me-1"></i>Edit Classroom
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/classrooms/list_classrooms" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Back to Classrooms
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Classroom Details Cards -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-lg-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-info-circle text-primary me-2"></i>Ficha Técnica
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
|
||||
<span class="text-muted"><i class="bi bi-building me-2"></i>Edificio / Sede</span>
|
||||
<span class="fw-bold">
|
||||
{% if classroom.building_entity %}
|
||||
<a href="/buildings/view_building" class="text-decoration-none">
|
||||
{{ classroom.building_entity.name }}
|
||||
</a>
|
||||
{% else %}
|
||||
{{ classroom.building }}
|
||||
{% endif %}
|
||||
</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
|
||||
<span class="text-muted"><i class="bi bi-door-closed me-2"></i>Número / Nombre</span>
|
||||
<span class="fw-bold font-monospace">{{ classroom.code }}</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
|
||||
<span class="text-muted"><i class="bi bi-layers me-2"></i>Piso / Planta</span>
|
||||
<span class="fw-bold">{% if classroom.floor == 0 %}Planta Baja{% else %}Piso {{ classroom.floor }}{% endif %}</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center px-0">
|
||||
<span class="text-muted"><i class="bi bi-people me-2"></i>Capacidad Máxima</span>
|
||||
{% if classroom.is_unlimited %}
|
||||
<span class="badge bg-primary-subtle text-primary border px-2 py-1 fs-6">
|
||||
<i class="bi bi-infinity me-1"></i>Ilimitada (∞)
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="fw-bold text-success fs-6">{{ classroom.capacity }} estudiantes</span>
|
||||
{% endif %}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% if classroom.description %}
|
||||
<div class="mt-3 pt-3 border-top">
|
||||
<small class="text-muted fw-bold d-block mb-1">Descripción / Notas:</small>
|
||||
<p class="small text-secondary mb-0">{{ classroom.description }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<!-- Upcoming Schedule / Reservations -->
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-calendar-check text-primary me-2"></i>Próximas Clases y Reservas
|
||||
</h5>
|
||||
<a href="/schedule/calendar_view" class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-calendar-week me-1"></i>Ver en Calendario
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
{% if upcoming_reservations %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light small text-uppercase">
|
||||
<tr>
|
||||
<th class="ps-3">Fecha y Horario</th>
|
||||
<th>Materia / Motivo</th>
|
||||
<th>Comisión</th>
|
||||
<th>Asistentes</th>
|
||||
<th class="text-end pe-3">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for res in upcoming_reservations %}
|
||||
<tr>
|
||||
<td class="ps-3">
|
||||
<div class="fw-bold font-monospace text-primary fs-6 mb-1">
|
||||
<i class="bi bi-calendar-event text-primary me-1"></i>{{ res.start_time }}
|
||||
</div>
|
||||
<div class="small font-monospace text-body-secondary">
|
||||
<i class="bi bi-clock text-warning me-1"></i>{{ res.start_time }} - {{ res.end_time }} hs
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-bold text-primary">{{ res.subject_name }}</div>
|
||||
<small class="badge bg-secondary-subtle text-secondary font-monospace">{{ res.subject_code }}</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-info-subtle text-info border">
|
||||
{{ res.commission.code if res.commission else 'S/C' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="small">{{ res.expected_attendees }} / {{ classroom.capacity }}</span>
|
||||
</td>
|
||||
<td class="text-end pe-3">
|
||||
{% if res.effective_virtual_link %}
|
||||
<a href="{{ res.effective_virtual_link }}" target="_blank" class="btn btn-outline-success btn-sm py-0 px-2 me-1" title="Unirse a Clase Virtual (Zoom / Meet)">
|
||||
<i class="bi bi-camera-video"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/schedule/view_reservation" class="btn btn-outline-secondary btn-sm py-0 px-2" title="Ver Ficha">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-calendar-x text-muted fs-1 mb-2"></i>
|
||||
<h6 class="fw-bold">Sin reservas programadas próximamente</h6>
|
||||
<p class="text-muted small mb-3">Esta aula no tiene clases asignadas en las próximas fechas.</p>
|
||||
{% if user.has_permission('reservations', 'read_write') %}
|
||||
<a href="/schedule/add_reservation" class="btn btn-primary btn-sm">
|
||||
<i class="bi bi-plus-circle me-1"></i>Asignar Nueva Reserva
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,352 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}AI Room Reservation Optimizer - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.optimization-card {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.optimization-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.commission-item {
|
||||
border-left: 4px solid var(--bs-primary);
|
||||
transition: all 0.2s ease;
|
||||
background-color: var(--bs-body-bg);
|
||||
}
|
||||
|
||||
.commission-item:hover {
|
||||
border-left-color: var(--bs-info);
|
||||
background-color: rgba(var(--bs-primary-rgb), 0.05);
|
||||
}
|
||||
|
||||
.commission-item.selected {
|
||||
border-left-color: var(--bs-success);
|
||||
background-color: rgba(var(--bs-success-rgb), 0.1);
|
||||
}
|
||||
|
||||
.algorithm-status {
|
||||
position: sticky;
|
||||
top: 90px;
|
||||
}
|
||||
|
||||
.spinner-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.hero-banner {
|
||||
background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 41, 59, 0.9) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card hero-banner border-0 shadow-sm p-3">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="bg-primary bg-opacity-25 rounded-3 p-3 me-3 text-primary">
|
||||
<i class="bi bi-cpu fs-2"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="h3 mb-1 fw-bold">
|
||||
AI Room Reservation Optimizer
|
||||
</h1>
|
||||
<p class="text-muted mb-0">
|
||||
Use genetic algorithms to automatically optimize room assignments based on capacity, availability, and student enrollment.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Algorithm Status & Commission Selection -->
|
||||
<div class="row mb-4">
|
||||
<!-- Algorithm Status Card -->
|
||||
<div class="col-lg-4 mb-4">
|
||||
<div class="card border-0 shadow-sm algorithm-status">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-gear-wide-connected text-primary me-2"></i>
|
||||
Algorithm Status
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-4">
|
||||
<small class="text-muted text-uppercase fw-semibold d-block mb-2">System Status</small>
|
||||
<div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
|
||||
<span>Available Classrooms</span>
|
||||
<span class="badge bg-success" id="available-classrooms">--</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
|
||||
<span>Active Commissions</span>
|
||||
<span class="badge bg-info" id="active-commissions">--</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center py-1">
|
||||
<span>Existing Reservations</span>
|
||||
<span class="badge bg-secondary" id="existing-reservations">--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<small class="text-muted text-uppercase fw-semibold d-block mb-2">Algorithm Configuration</small>
|
||||
<div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
|
||||
<span>Population Size</span>
|
||||
<span class="text-muted">50</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
|
||||
<span>Generations</span>
|
||||
<span class="text-muted">100</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center py-1">
|
||||
<span>Mutation Rate</span>
|
||||
<span class="text-muted">10%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-sm btn-outline-primary w-100" onclick="geneticManager.getAlgorithmStatus()">
|
||||
<i class="bi bi-arrow-clockwise me-1"></i>
|
||||
Refresh Status
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Commission Selection -->
|
||||
<div class="col-lg-8">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-list-check text-primary me-2"></i>
|
||||
Select Commissions to Optimize
|
||||
</h5>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="selectAllCommissions()">
|
||||
Select All
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-secondary" onclick="deselectAllCommissions()">
|
||||
Deselect All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="commissions-list" class="row">
|
||||
<!-- Commissions will be loaded here -->
|
||||
<div class="col-12 text-center text-muted py-5">
|
||||
<div class="spinner-border spinner-border-sm me-2 text-primary" role="status"></div>
|
||||
Loading commissions...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Optimization Controls -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-sliders text-primary me-2"></i>
|
||||
Optimization Controls
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="start-date" class="form-label">Start Date Range</label>
|
||||
<input type="datetime-local" class="form-control" id="start-date" name="start_date">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="end-date" class="form-label">End Date Range</label>
|
||||
<input type="datetime-local" class="form-control" id="end-date" name="end_date">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 flex-wrap">
|
||||
<button class="btn btn-info text-white" id="preview-optimization-btn">
|
||||
<i class="bi bi-eye me-1"></i>
|
||||
Preview Optimization
|
||||
</button>
|
||||
<button class="btn btn-success" id="optimize-assignments-btn">
|
||||
<i class="bi bi-play-circle me-1"></i>
|
||||
Run Full Optimization
|
||||
</button>
|
||||
<button class="btn btn-warning" id="apply-optimization-btn" style="display: none;">
|
||||
<i class="bi bi-check-circle me-1"></i>
|
||||
Apply Reservations
|
||||
</button>
|
||||
<button class="btn btn-outline-secondary" onclick="resetOptimization()">
|
||||
<i class="bi bi-arrow-counterclockwise me-1"></i>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Section -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div id="preview-results"></div>
|
||||
<div id="optimization-results"></div>
|
||||
<div id="alert-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading Spinner Overlay -->
|
||||
<div class="spinner-overlay" id="loading-spinner">
|
||||
<div class="text-center text-white">
|
||||
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status"></div>
|
||||
<p class="mt-3 mb-1 fw-bold fs-5">Running genetic algorithm optimization...</p>
|
||||
<small class="text-white-50">This may take a few moments</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Details Modal -->
|
||||
<div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="detailsModalLabel">Reservation Details</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Content populated dynamically -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" onclick="downloadReservations()">
|
||||
<i class="bi bi-download me-1"></i>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="/js/genetic-algorithm.js"></script>
|
||||
<script>
|
||||
function selectAllCommissions() {
|
||||
const checkboxes = document.querySelectorAll('input[name="commission_ids"]');
|
||||
checkboxes.forEach(cb => {
|
||||
cb.checked = true;
|
||||
updateCommissionCard(cb.value, true);
|
||||
});
|
||||
}
|
||||
|
||||
function deselectAllCommissions() {
|
||||
const checkboxes = document.querySelectorAll('input[name="commission_ids"]');
|
||||
checkboxes.forEach(cb => {
|
||||
cb.checked = false;
|
||||
updateCommissionCard(cb.value, false);
|
||||
});
|
||||
}
|
||||
|
||||
function updateCommissionCard(commissionId, selected) {
|
||||
const card = document.querySelector(`[data-commission-id="${commissionId}"]`);
|
||||
if (card) {
|
||||
if (selected) {
|
||||
card.classList.add('selected');
|
||||
} else {
|
||||
card.classList.remove('selected');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resetOptimization() {
|
||||
deselectAllCommissions();
|
||||
if (window.geneticManager) {
|
||||
geneticManager.clearResults && geneticManager.clearResults();
|
||||
geneticManager.clearPreview && geneticManager.clearPreview();
|
||||
}
|
||||
document.getElementById('start-date').value = '';
|
||||
document.getElementById('end-date').value = '';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', async function() {
|
||||
await loadCommissions();
|
||||
if (window.geneticManager) {
|
||||
await geneticManager.getAlgorithmStatus();
|
||||
}
|
||||
});
|
||||
|
||||
async function loadCommissions() {
|
||||
try {
|
||||
const response = await fetch('/api/genetic/commissions');
|
||||
const data = await response.json();
|
||||
const commissionsList = document.getElementById('commissions-list');
|
||||
const isSpanish = '{{ session.language or "es" }}' === 'es';
|
||||
|
||||
if (data.success && data.commissions && data.commissions.length > 0) {
|
||||
const commissionsHtml = data.commissions.map(commission => `
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card commission-item border-0 shadow-sm" data-commission-id="${commission.id}">
|
||||
<div class="card-body">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="commission_ids"
|
||||
value="${commission.id}" id="commission-${commission.id}"
|
||||
onchange="updateCommissionCard('${commission.id}', this.checked)">
|
||||
<label class="form-check-label" for="commission-${commission.id}">
|
||||
<strong class="text-primary">${commission.get_full_code || commission.code}</strong>
|
||||
<br>
|
||||
<small class="text-muted">${commission.subject?.name || (isSpanish ? 'Materia Desconocida' : 'Unknown Subject')}</small>
|
||||
<br>
|
||||
<span class="badge bg-info mt-1">${commission.current_students || 0}/${commission.max_students} ${isSpanish ? 'estudiantes' : 'students'}</span>
|
||||
${commission.teacher_name ? `<span class="badge bg-secondary ms-2">${commission.teacher_name}</span>` : ''}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
commissionsList.innerHTML = commissionsHtml;
|
||||
} else {
|
||||
commissionsList.innerHTML = `
|
||||
<div class="col-12 text-center text-muted py-5">
|
||||
<i class="bi bi-inbox fs-1 d-block mb-2"></i>
|
||||
${isSpanish ? 'No se encontraron comisiones activas.' : 'No active commissions found.'}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading commissions:', error);
|
||||
document.getElementById('commissions-list').innerHTML = `
|
||||
<div class="col-12 text-center text-danger py-4">
|
||||
<i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
|
||||
Error al cargar comisiones: ${error.message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es" data-bs-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Edu-Space Admin{% endblock %}</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
|
||||
<!-- Google Fonts: Inter -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Bootstrap 5 & Icons -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
||||
|
||||
<!-- Design System Theme -->
|
||||
<link href="/css/theme.css" rel="stylesheet">
|
||||
<link href="/css/style.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
/* --- MODO CLARO ([data-bs-theme="light"]) --- */
|
||||
[data-bs-theme="light"] body {
|
||||
background: #F8FAFC !important;
|
||||
color: #1E293B !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar {
|
||||
background: rgba(255, 255, 255, 0.88) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar .nav-link {
|
||||
color: #334155 !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-navbar .nav-link:hover,
|
||||
[data-bs-theme="light"] .glass-navbar .nav-link.active {
|
||||
color: #B43E8E !important;
|
||||
}
|
||||
[data-bs-theme="light"] .glass-card,
|
||||
[data-bs-theme="light"] .card {
|
||||
background: #FFFFFF !important;
|
||||
color: #1E293B !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
|
||||
}
|
||||
|
||||
/* --- MODO OSCURO ([data-bs-theme="dark"]) --- */
|
||||
[data-bs-theme="dark"] body {
|
||||
background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%) !important;
|
||||
color: #F8FAFC !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar {
|
||||
background: rgba(15, 23, 42, 0.78) !important;
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar .nav-link {
|
||||
color: #CBD5E1 !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-navbar .nav-link:hover,
|
||||
[data-bs-theme="dark"] .glass-navbar .nav-link.active {
|
||||
color: #FF8AB6 !important;
|
||||
}
|
||||
[data-bs-theme="dark"] .glass-card,
|
||||
[data-bs-theme="dark"] .card {
|
||||
background: rgba(30, 41, 59, 0.7) !important;
|
||||
color: #F8FAFC !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.navbar-brand span {
|
||||
font-weight: 700;
|
||||
background: linear-gradient(90deg, #B43E8E, #682CAD);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<!-- Navbar -->
|
||||
<nav class="navbar navbar-expand-lg glass-navbar sticky-top">
|
||||
<div class="container-fluid px-4">
|
||||
<a class="navbar-brand d-flex align-items-center" href="/dashboard">
|
||||
<img src="/img/logo_unicaba_mini.png" alt="Logo UniCABA" class="navbar-logo me-2" height="30">
|
||||
<span>Edu-Space Admin</span>
|
||||
</a>
|
||||
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<i class="bi bi-list text-light fs-2"></i>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto align-items-center ms-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-3" href="/dashboard">
|
||||
<i class="bi bi-speedometer2 me-1"></i>Panel General
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-3" href="/classrooms/list_classrooms">
|
||||
<i class="bi bi-door-open me-1"></i>Espacios & Sedes
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-3" href="/schedule/calendar_view">
|
||||
<i class="bi bi-calendar3 me-1"></i>Cronograma & Reservas
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link px-3 active text-primary fw-semibold" href="/predictive">
|
||||
<i class="bi bi-cpu me-1"></i>Módulo Predictivo
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="navbar-nav ms-auto align-items-center">
|
||||
<li class="nav-item">
|
||||
<a class="btn btn-outline-danger btn-sm rounded-pill px-3 fw-medium" href="/auth/logout">
|
||||
<i class="bi bi-box-arrow-right me-1"></i> Cerrar Sesión
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container main-container">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Scripts base -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,262 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}{{ commission.subject.name }} — {{ commission.full_code or commission.code }} — Edu-Space{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid py-4">
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<nav aria-label="breadcrumb" class="mb-3">
|
||||
<ol class="breadcrumb small">
|
||||
<li class="breadcrumb-item"><a href="/main/dashboard">Inicio</a></li>
|
||||
<li class="breadcrumb-item"><a href="/my_subjects/my_subjects_list">Mis Materias</a></li>
|
||||
<li class="breadcrumb-item active">{{ commission.full_code or commission.code }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- Flash Messages -->
|
||||
|
||||
|
||||
<div class="row g-4">
|
||||
<!-- Left Column: Commission Info -->
|
||||
<div class="col-12 col-lg-4">
|
||||
|
||||
<!-- Header Card -->
|
||||
{% set shift_gradient = {
|
||||
'Mañana': 'linear-gradient(135deg, #f59e0b 0%, #fcd34d 100%)',
|
||||
'Tarde': 'linear-gradient(135deg, #3b82f6 0%, #93c5fd 100%)',
|
||||
'Vespertino':'linear-gradient(135deg, #8b5cf6 0%, #c4b5fd 100%)',
|
||||
'Noche': 'linear-gradient(135deg, #1e293b 0%, #475569 100%)'
|
||||
} %}
|
||||
{% set card_bg = shift_gradient[commission.shift] or 'linear-gradient(135deg, #6366f1, #a5b4fc)' %}
|
||||
<div class="card border-0 shadow-sm mb-4 overflow-hidden">
|
||||
<div {{ ("style=\"background:" ~ card_bg ~ "; padding:1.25rem 1.25rem .5rem; color:white;\"") | safe }}>
|
||||
<div class="d-flex align-items-center gap-2 mb-1">
|
||||
<i class="bi bi-book-fill fs-5 opacity-75"></i>
|
||||
<span class="fw-bold font-monospace">{{ commission.full_code or commission.code }}</span>
|
||||
</div>
|
||||
<h4 class="fw-bold mb-0">{{ commission.subject.name }}</h4>
|
||||
{% if commission.subject.career_obj %}
|
||||
<small class="opacity-75">{{ commission.subject.career_obj.name }}</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-body pt-3">
|
||||
|
||||
<div class="d-flex flex-wrap gap-2 mb-3">
|
||||
{% if commission.shift %}
|
||||
{% set shift_colors = {'Mañana': 'warning', 'Tarde': 'info', 'Vespertino': 'secondary', 'Noche': 'dark'} %}
|
||||
<span class="badge bg-{{ shift_colors[commission.shift] or 'secondary' }}-subtle text-{{ shift_colors[commission.shift] or 'secondary' }} border border-{{ shift_colors[commission.shift] or 'secondary' }}-subtle">
|
||||
<i class="bi bi-sun me-1"></i>{{ commission.shift }}
|
||||
</span>
|
||||
{% endif %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">
|
||||
<i class="bi bi-calendar3 me-1"></i>{{ commission.semester }} {{ commission.year }}
|
||||
</span>
|
||||
{% if commission.active %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle">Activa</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary-subtle text-secondary">Inactiva</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Details list -->
|
||||
<ul class="list-unstyled small">
|
||||
{% if commission.schedule %}
|
||||
<li class="d-flex align-items-start gap-2 py-2 border-bottom">
|
||||
<i class="bi bi-clock-history text-primary mt-1 flex-shrink-0"></i>
|
||||
<div>
|
||||
<div class="text-muted" style="font-size:.72rem;">Horario</div>
|
||||
<div class="fw-semibold">{{ commission.schedule }}</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
<li class="d-flex align-items-start gap-2 py-2 border-bottom">
|
||||
<i class="bi bi-person-video3 text-info mt-1 flex-shrink-0"></i>
|
||||
<div>
|
||||
<div class="text-muted" style="font-size:.72rem;">Docente</div>
|
||||
{% if commission.teacher %}
|
||||
<div class="fw-semibold">{{ commission.teacher.name }}</div>
|
||||
<div class="text-muted" style="font-size:.75rem;">{{ commission.teacher.email }}</div>
|
||||
{% else %}
|
||||
<div class="text-warning fst-italic">Sin asignar</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{% if role in ['docente', 'admin', 'bedelia'] %}
|
||||
<li class="d-flex align-items-start gap-2 py-2 border-bottom">
|
||||
<i class="bi bi-people text-success mt-1 flex-shrink-0"></i>
|
||||
<div>
|
||||
<div class="text-muted" style="font-size:.72rem;">Alumnos</div>
|
||||
<div class="fw-semibold">{{ enrollments | length }} / {{ commission.max_students }}</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if commission.subject.code %}
|
||||
<li class="d-flex align-items-start gap-2 py-2 border-bottom">
|
||||
<i class="bi bi-upc text-secondary mt-1 flex-shrink-0"></i>
|
||||
<div>
|
||||
<div class="text-muted" style="font-size:.72rem;">Código asignatura</div>
|
||||
<div class="fw-semibold font-monospace">{{ commission.subject.code }}</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if commission.subject.credits %}
|
||||
<li class="d-flex align-items-start gap-2 py-2">
|
||||
<i class="bi bi-star text-warning mt-1 flex-shrink-0"></i>
|
||||
<div>
|
||||
<div class="text-muted" style="font-size:.72rem;">Créditos</div>
|
||||
<div class="fw-semibold">{{ commission.subject.credits }}</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
{% if commission.virtual_link %}
|
||||
<a href="{{ commission.virtual_link }}" target="_blank"
|
||||
class="btn btn-outline-info btn-sm w-100 mt-2" id="virtual-link-detail">
|
||||
<i class="bi bi-camera-video me-1"></i>Acceso Virtual (Zoom / Meet / Teams)
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if role in ['admin', 'bedelia'] %}
|
||||
<div class="mt-3">
|
||||
<a href="/admin/commission_detail"
|
||||
class="btn btn-warning btn-sm w-100" id="manage-commission-btn">
|
||||
<i class="bi bi-gear me-1"></i>Gestionar Comisión
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Classroom Info -->
|
||||
{% if classroom %}
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header border-0 bg-transparent py-2">
|
||||
<i class="bi bi-door-open text-primary me-2"></i>
|
||||
<span class="fw-semibold small">Aula Asignada</span>
|
||||
</div>
|
||||
<div class="card-body py-3">
|
||||
<div class="fw-bold">{{ classroom.room_number }}</div>
|
||||
<div class="text-muted small">{{ classroom.building or '—' }}{% if classroom.floor %}, Piso {{ classroom.floor }}{% endif %}</div>
|
||||
{% if recent_reservation %}
|
||||
<div class="mt-2 small text-muted">
|
||||
<i class="bi bi-calendar-event me-1"></i>
|
||||
Próxima clase: {{ recent_reservation.start_time }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="d-flex gap-2 mt-2 flex-wrap">
|
||||
{% if classroom.capacity %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">
|
||||
<i class="bi bi-people me-1"></i>Capacidad: {{ classroom.capacity }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if classroom.has_projector %}
|
||||
<span class="badge bg-info-subtle text-info border border-info-subtle"><i class="bi bi-projector me-1"></i>Proyector</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Students list (for docente/admin/bedelia) or My info (for alumno) -->
|
||||
<div class="col-12 col-lg-8">
|
||||
|
||||
{% if role in ['docente', 'admin', 'bedelia'] and enrollments %}
|
||||
<!-- Students Table -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header border-0 bg-transparent py-2 d-flex align-items-center gap-2">
|
||||
<i class="bi bi-mortarboard text-success"></i>
|
||||
<span class="fw-semibold">Alumnos Inscriptos</span>
|
||||
<span class="badge bg-success-subtle text-success">{{ enrollments | length }}</span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0 align-middle" id="students-table">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="ps-3">#</th>
|
||||
<th>Alumno</th>
|
||||
<th class="text-center">Estado</th>
|
||||
<th class="text-center">Desde</th>
|
||||
<th>Notas</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for e in enrollments %}
|
||||
<tr>
|
||||
<td class="ps-3 text-muted small">{{ loop.index }}</td>
|
||||
<td>
|
||||
<div class="fw-semibold small">{{ e.student.name if e.student else '—' }}</div>
|
||||
<div class="text-muted" style="font-size:.75rem;">{{ e.student.email if e.student else '' }}</div>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{% set st_colors = {'activo': 'success', 'retirado': 'danger', 'condicional': 'warning'} %}
|
||||
<span class="badge bg-{{ st_colors[e.status] or 'secondary' }}-subtle text-{{ st_colors[e.status] or 'secondary' }} border border-{{ st_colors[e.status] or 'secondary' }}-subtle">
|
||||
{{ e.status | capitalize }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center small text-muted">
|
||||
{{ e.enrolled_at if e.enrolled_at else '—' }}
|
||||
</td>
|
||||
<td class="small text-muted">{{ e.notes or '—' }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% elif role in ['docente', 'admin', 'bedelia'] and not enrollments %}
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="bi bi-people display-4 text-muted opacity-40"></i>
|
||||
<p class="text-muted mt-3">No hay alumnos inscriptos en esta comisión todavía.</p>
|
||||
{% if role in ['admin', 'bedelia'] %}
|
||||
<a href="/admin/commission_detail" class="btn btn-outline-success btn-sm">
|
||||
<i class="bi bi-person-plus me-1"></i>Inscribir Alumnos
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% elif role == 'alumno' %}
|
||||
<!-- Alumno: show their own enrollment status -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header border-0 bg-transparent py-2">
|
||||
<i class="bi bi-person-check text-success me-2"></i>
|
||||
<span class="fw-semibold small">Tu inscripción</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center gap-3 p-3 rounded bg-success-subtle border border-success-subtle">
|
||||
<div class="rounded-circle bg-success d-flex align-items-center justify-content-center"
|
||||
style="width:48px;height:48px;flex-shrink:0;">
|
||||
<i class="bi bi-check-lg text-white fs-4"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-bold">Inscripto en esta comisión</div>
|
||||
<div class="text-muted small">{{ commission.subject.name }} — {{ commission.full_code or commission.code }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if commission.subject.description %}
|
||||
<div class="mt-4">
|
||||
<h6 class="fw-semibold mb-2">Sobre la asignatura</h6>
|
||||
<p class="text-muted small">{{ commission.subject.description }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,181 @@
|
||||
{% extends 'base.html' %}
|
||||
{% block title %}Mis Materias — Edu-Space{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid py-4">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
|
||||
<div>
|
||||
{% if role == 'docente' %}
|
||||
<h1 class="h3 fw-bold mb-1"><i class="bi bi-person-video3 me-2 text-info"></i>Mis Materias</h1>
|
||||
<p class="text-muted mb-0 small">Comisiones que tenés asignadas como docente este ciclo</p>
|
||||
{% elif role == 'alumno' %}
|
||||
<h1 class="h3 fw-bold mb-1"><i class="bi bi-mortarboard me-2 text-success"></i>Mis Materias</h1>
|
||||
<p class="text-muted mb-0 small">Comisiones en las que estás inscripto</p>
|
||||
{% else %}
|
||||
<h1 class="h3 fw-bold mb-1"><i class="bi bi-diagram-3 me-2 text-primary"></i>Todas las Comisiones</h1>
|
||||
<p class="text-muted mb-0 small">Vista global de comisiones activas</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if role in ['admin', 'bedelia'] %}
|
||||
<a href="/admin/commissions_list" class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-gear me-1"></i>Gestionar Comisiones
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Flash Messages -->
|
||||
|
||||
|
||||
{% if commissions %}
|
||||
<!-- Stats summary -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card border-0 shadow-sm text-center py-3">
|
||||
<div class="display-6 fw-bold text-primary">{{ commissions | length }}</div>
|
||||
<div class="text-muted small">Comisiones</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if role == 'docente' %}
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card border-0 shadow-sm text-center py-3">
|
||||
<div class="display-6 fw-bold text-info">
|
||||
{{ commissions | sum(attribute='current_students') or 0 }}
|
||||
</div>
|
||||
<div class="text-muted small">Alumnos totales</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-6 col-md-3">
|
||||
<div class="card border-0 shadow-sm text-center py-3">
|
||||
<div class="display-6 fw-bold text-success">
|
||||
{{ commissions | selectattr('active') | list | length }}
|
||||
</div>
|
||||
<div class="text-muted small">Activas</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Commission Cards Grid -->
|
||||
<div class="row g-3" id="commissions-grid">
|
||||
{% for comm in commissions %}
|
||||
<div class="col-12 col-md-6 col-xl-4">
|
||||
<div class="card border-0 shadow-sm h-100 commission-card" style="transition:transform .15s,box-shadow .15s;">
|
||||
<!-- Color top band based on shift -->
|
||||
{% set shift_gradient = {
|
||||
'Mañana': 'linear-gradient(135deg, #f59e0b, #fcd34d)',
|
||||
'Tarde': 'linear-gradient(135deg, #3b82f6, #93c5fd)',
|
||||
'Vespertino':'linear-gradient(135deg, #8b5cf6, #c4b5fd)',
|
||||
'Noche': 'linear-gradient(135deg, #1e293b, #475569)'
|
||||
} %}
|
||||
{% set top_bar_bg = shift_gradient[comm.shift] or 'linear-gradient(135deg, #6366f1, #a5b4fc)' %}
|
||||
<div {{ ("style=\"height:5px; background:" ~ top_bar_bg ~ "; border-radius:.5rem .5rem 0 0;\"") | safe }}></div>
|
||||
|
||||
<div class="card-body">
|
||||
<!-- Subject + commission code -->
|
||||
<div class="d-flex align-items-start justify-content-between mb-2">
|
||||
<div>
|
||||
<h6 class="fw-bold mb-0">{{ comm.subject.name }}</h6>
|
||||
<span class="badge bg-primary-subtle text-primary font-monospace small mt-1">
|
||||
{{ comm.full_code or comm.code }}
|
||||
</span>
|
||||
</div>
|
||||
{% if not comm.active %}
|
||||
<span class="badge bg-secondary-subtle text-secondary ms-2">Inactiva</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-wrap gap-2 mb-3">
|
||||
{% if comm.shift %}
|
||||
{% set shift_colors = {'Mañana': 'warning', 'Tarde': 'info', 'Vespertino': 'secondary', 'Noche': 'dark'} %}
|
||||
<span class="badge bg-{{ shift_colors[comm.shift] or 'secondary' }}-subtle text-{{ shift_colors[comm.shift] or 'secondary' }} border border-{{ shift_colors[comm.shift] or 'secondary' }}-subtle">
|
||||
<i class="bi bi-clock me-1"></i>{{ comm.shift }}
|
||||
</span>
|
||||
{% endif %}
|
||||
<span class="badge bg-secondary-subtle text-secondary">
|
||||
<i class="bi bi-calendar3 me-1"></i>{{ comm.semester }} {{ comm.year }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul class="list-unstyled small mb-3">
|
||||
{% if comm.teacher %}
|
||||
<li class="d-flex align-items-center gap-2 py-1">
|
||||
<i class="bi bi-person-video3 text-info flex-shrink-0"></i>
|
||||
<span>{{ comm.teacher.name }}</span>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="d-flex align-items-center gap-2 py-1 text-warning">
|
||||
<i class="bi bi-exclamation-circle flex-shrink-0"></i>
|
||||
<span class="fst-italic">Sin docente asignado</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if comm.schedule %}
|
||||
<li class="d-flex align-items-center gap-2 py-1">
|
||||
<i class="bi bi-clock-history text-muted flex-shrink-0"></i>
|
||||
<span class="text-muted">{{ comm.schedule }}</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% if role in ['docente', 'admin', 'bedelia'] %}
|
||||
<li class="d-flex align-items-center gap-2 py-1">
|
||||
<i class="bi bi-people text-muted flex-shrink-0"></i>
|
||||
<span class="text-muted">
|
||||
{{ comm.current_students or 0 }} / {{ comm.max_students }} alumnos
|
||||
</span>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
{% if comm.virtual_link %}
|
||||
<a href="{{ comm.virtual_link }}" target="_blank" class="btn btn-sm btn-outline-info w-100 mb-2"
|
||||
id="virtual-link-{{ comm.id }}">
|
||||
<i class="bi bi-camera-video me-1"></i>Acceso Virtual
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="card-footer border-0 bg-transparent pt-0 pb-3 px-3">
|
||||
<a href="/my_subjects/my_subject_detail"
|
||||
class="btn btn-primary btn-sm w-100" id="view-commission-{{ comm.id }}">
|
||||
<i class="bi bi-eye me-1"></i>Ver detalle
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<!-- Empty state -->
|
||||
<div class="text-center py-5 mt-4">
|
||||
<div class="mb-4">
|
||||
{% if role == 'docente' %}
|
||||
<i class="bi bi-person-video3 display-2 text-muted opacity-30"></i>
|
||||
<h5 class="mt-3 fw-semibold">No tenés comisiones asignadas</h5>
|
||||
<p class="text-muted small">Cuando Bedelía te asigne una comisión, aparecerá aquí.</p>
|
||||
{% elif role == 'alumno' %}
|
||||
<i class="bi bi-mortarboard display-2 text-muted opacity-30"></i>
|
||||
<h5 class="mt-3 fw-semibold">No estás inscripto en ninguna comisión</h5>
|
||||
<p class="text-muted small">Cuando Bedelía te inscriba en una comisión, aparecerá aquí.</p>
|
||||
{% else %}
|
||||
<i class="bi bi-diagram-3 display-2 text-muted opacity-30"></i>
|
||||
<h5 class="mt-3 fw-semibold">No hay comisiones activas</h5>
|
||||
{% endif %}
|
||||
</div>
|
||||
<a href="/main/dashboard" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bi bi-house me-1"></i>Volver al Inicio
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.commission-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.15) !important;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,34 @@
|
||||
{% if config.LANGUAGES|length > 1 %}
|
||||
<div class="dropdown language-switcher">
|
||||
<button class="btn btn-outline-secondary btn-sm dropdown-toggle d-flex align-items-center" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="bi bi-globe me-1"></i>
|
||||
<span>
|
||||
{% if current_lang == 'es' %}
|
||||
Español
|
||||
{% else %}
|
||||
English
|
||||
{% endif %}
|
||||
</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="languageDropdown">
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center justify-content-between {% if current_lang == 'es' %}active{% endif %}"
|
||||
href="/main/set_language">
|
||||
<span>Español</span>
|
||||
{% if current_lang == 'es' %}
|
||||
<i class="bi bi-check-lg ms-2 text-white"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item d-flex align-items-center justify-content-between {% if current_lang == 'en' %}active{% endif %}"
|
||||
href="/main/set_language">
|
||||
<span>English</span>
|
||||
{% if current_lang == 'en' %}
|
||||
<i class="bi bi-check-lg ms-2 text-white"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
@@ -0,0 +1,21 @@
|
||||
{# Componente reutilizable: Selector de vista (Tabla / Grilla vs. Tarjetas / Mosaico) #}
|
||||
<div class="btn-group btn-group-sm shadow-sm view-switcher-group"
|
||||
role="group"
|
||||
aria-label="Selector de Vista"
|
||||
data-context="{{ context_id|default('default') }}"
|
||||
data-default-view="{{ default_view|default('cards') }}">
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary view-switcher-btn"
|
||||
data-view="table"
|
||||
title="Vista de Tabla / Grilla (filas, columnas y análisis denso)">
|
||||
<i class="bi bi-table me-1"></i>
|
||||
<span class="d-none d-sm-inline">Tabla</span>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary view-switcher-btn"
|
||||
data-view="cards"
|
||||
title="Vista de Tarjetas / Mosaico (amigable, visual y responsive)">
|
||||
<i class="bi bi-grid-fill me-1"></i>
|
||||
<span class="d-none d-sm-inline">Tarjetas</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,216 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
|
||||
{% block title %}Dashboard Predictivo - Edu-Space{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.glass-card {
|
||||
background: rgba(30, 30, 45, 0.6);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 1.5rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(180, 62, 142, 0.3);
|
||||
}
|
||||
|
||||
.stat-icon-box {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(180, 62, 142, 0.15);
|
||||
color: #B43E8E;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Animation Delays */
|
||||
.delay-1 { animation-delay: 0.1s; }
|
||||
.delay-2 { animation-delay: 0.2s; }
|
||||
.delay-3 { animation-delay: 0.3s; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row mb-4 fade-in-up">
|
||||
<div class="col-12">
|
||||
<h2 class="fw-bold mb-1">Algoritmo Genético & Predicción</h2>
|
||||
<p class="text-muted">Optimización de asignación de espacios áulicos de UniCABA en tiempo real.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Row -->
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-md-4 fade-in-up delay-1">
|
||||
<div class="glass-card p-4 h-100">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="text-muted fw-semibold mb-0 text-uppercase tracking-wide" style="font-size: 0.8rem; letter-spacing: 1px;">Aulas Optimizadas</h6>
|
||||
<div class="stat-icon-box">
|
||||
<i class="bi bi-door-open-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="fw-bold mb-0">142 <span class="fs-6 text-success fw-normal"><i class="bi bi-arrow-up-short"></i>12%</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 fade-in-up delay-2">
|
||||
<div class="glass-card p-4 h-100">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="text-muted fw-semibold mb-0 text-uppercase tracking-wide" style="font-size: 0.8rem; letter-spacing: 1px;">Eficiencia Energética</h6>
|
||||
<div class="stat-icon-box" style="background: rgba(40, 167, 69, 0.15); color: #28a745;">
|
||||
<i class="bi bi-lightning-charge-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="fw-bold mb-0">87.4% <span class="fs-6 text-success fw-normal"><i class="bi bi-arrow-up-short"></i>3.2%</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 fade-in-up delay-3">
|
||||
<div class="glass-card p-4 h-100">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h6 class="text-muted fw-semibold mb-0 text-uppercase tracking-wide" style="font-size: 0.8rem; letter-spacing: 1px;">Colisiones Detectadas</h6>
|
||||
<div class="stat-icon-box" style="background: rgba(220, 53, 69, 0.15); color: #dc3545;">
|
||||
<i class="bi bi-exclamation-triangle-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="fw-bold mb-0">0 <span class="fs-6 text-muted fw-normal">Resueltas al vuelo</span></h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Chart Row -->
|
||||
<div class="row fade-in-up delay-3">
|
||||
<div class="col-12">
|
||||
<div class="glass-card p-4">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h5 class="fw-bold mb-0">Proyección de Ocupación por Sede</h5>
|
||||
<button class="btn btn-sm btn-outline-light rounded-pill px-3">
|
||||
<i class="bi bi-arrow-clockwise me-1"></i> Recalcular
|
||||
</button>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<canvas id="predictiveChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Configuramos los colores globales de Chart.js para Dark Mode
|
||||
Chart.defaults.color = 'rgba(255, 255, 255, 0.6)';
|
||||
Chart.defaults.font.family = "'Inter', sans-serif";
|
||||
|
||||
const ctx = document.getElementById('predictiveChart').getContext('2d');
|
||||
|
||||
// Gradiente para el área bajo la curva
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, 400);
|
||||
gradient.addColorStop(0, 'rgba(180, 62, 142, 0.5)'); // brand-primary translúcido
|
||||
gradient.addColorStop(1, 'rgba(180, 62, 142, 0.0)');
|
||||
|
||||
const gradient2 = ctx.createLinearGradient(0, 0, 0, 400);
|
||||
gradient2.addColorStop(0, 'rgba(104, 44, 173, 0.5)'); // accent-purple translúcido
|
||||
gradient2.addColorStop(1, 'rgba(104, 44, 173, 0.0)');
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sede Central (Proyectado)',
|
||||
data: [65, 82, 90, 85, 70, 30],
|
||||
borderColor: '#B43E8E',
|
||||
backgroundColor: gradient,
|
||||
borderWidth: 3,
|
||||
pointBackgroundColor: '#B43E8E',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 5,
|
||||
pointHoverRadius: 7,
|
||||
fill: true,
|
||||
tension: 0.4
|
||||
},
|
||||
{
|
||||
label: 'Sede Virtual (Equivalente)',
|
||||
data: [40, 45, 55, 48, 60, 20],
|
||||
borderColor: '#682CAD',
|
||||
backgroundColor: gradient2,
|
||||
borderWidth: 3,
|
||||
pointBackgroundColor: '#682CAD',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 5,
|
||||
pointHoverRadius: 7,
|
||||
fill: true,
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 20,
|
||||
font: { size: 13, weight: '500' }
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(20, 20, 30, 0.9)',
|
||||
titleFont: { size: 14, family: "'Inter', sans-serif" },
|
||||
bodyFont: { size: 13, family: "'Inter', sans-serif" },
|
||||
padding: 12,
|
||||
cornerRadius: 8,
|
||||
displayColors: true,
|
||||
borderColor: 'rgba(255,255,255,0.1)',
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(255, 255, 255, 0.05)',
|
||||
drawBorder: false,
|
||||
},
|
||||
ticks: {
|
||||
callback: function(value) { return value + '%' }
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false,
|
||||
drawBorder: false,
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
},
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,664 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}New Reservation - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1 class="h3 mb-0">
|
||||
<i class="bi bi-calendar-plus text-primary me-2"></i>New Reservation
|
||||
</h1>
|
||||
</div>
|
||||
<a href="/schedule/list_reservations" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Back to Reservations
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-10 mx-auto">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-calendar3 text-primary me-2"></i>Detalles de la Reserva y Espacio Físico
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<form method="POST" id="reservation-form" novalidate>
|
||||
|
||||
<!-- 1. SELECTORES EN CASCADA: Edificio -> Piso -> Aula -->
|
||||
<div class="mb-4">
|
||||
<div class="p-3 rounded bg-body-tertiary border">
|
||||
<label class="form-label fw-bold text-primary mb-2">
|
||||
<i class="bi bi-geo-alt-fill me-1"></i>Selección de Espacio Físico / Modalidad <span class="text-danger">*</span>
|
||||
</label>
|
||||
<div class="row g-3">
|
||||
<!-- Edificio / Sede -->
|
||||
<div class="col-md-4">
|
||||
<label for="cascade-building" class="form-label small fw-semibold text-muted mb-1">
|
||||
<i class="bi bi-buildings text-primary me-1"></i>1. Edificio / Sede
|
||||
</label>
|
||||
<select id="cascade-building" class="form-select form-select-sm">
|
||||
<option value="">-- Selecciona Edificio --</option>
|
||||
{% for b in buildings %}
|
||||
<option value="{{ b.id }}" data-virtual="{{ 'true' if b.code == 'VIRTUAL' or 'VIRTUAL' in (b.name|upper) else 'false' }}">
|
||||
{% if b.code == 'VIRTUAL' or 'VIRTUAL' in (b.name|upper) %}🌐{% else %}🏢{% endif %} {{ b.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<div class="form-text small text-muted">Sede física o Campus Virtual</div>
|
||||
</div>
|
||||
|
||||
<!-- Piso / Nivel -->
|
||||
<div class="col-md-4">
|
||||
<label for="cascade-floor" class="form-label small fw-semibold text-muted mb-1">
|
||||
<i class="bi bi-layers text-secondary me-1"></i>2. Piso / Nivel
|
||||
</label>
|
||||
<select id="cascade-floor" class="form-select form-select-sm" disabled>
|
||||
<option value="">-- Selecciona Piso --</option>
|
||||
</select>
|
||||
<div class="form-text small text-muted" id="floorHelpText">Filtra por planta o nivel</div>
|
||||
</div>
|
||||
|
||||
<!-- Aula / Espacio (Campo del Formulario) -->
|
||||
<div class="col-md-4">
|
||||
<label for="classroom-select" class="form-label small fw-semibold text-muted mb-1">
|
||||
<i class="bi bi-door-open text-success me-1"></i>3. Aula / Espacio <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.classroom_id(class="form-select form-select-sm", id="classroom-select") }}
|
||||
{% if form.classroom_id.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.classroom_id.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="form-text small text-muted">Capacidad y disponibilidad</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Comisión y Materia -->
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-12">
|
||||
{{ form.commission_id.label(class="form-label fw-semibold") }} <span class="text-danger">*</span>
|
||||
{{ form.commission_id(class="form-select", id="commission-select") }}
|
||||
{% if form.commission_id.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.commission_id.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="form-text small text-muted">Materia, código de comisión y cantidad de alumnos inscriptos</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Horario de Inicio y Fin -->
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-6">
|
||||
{{ form.start_time.label(class="form-label fw-semibold") }} <span class="text-danger">*</span>
|
||||
{{ form.start_time(class="form-control", id="start-time") }}
|
||||
{% if form.start_time.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.start_time.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<small class="text-muted">¿Cuándo comenzará la clase?</small>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
{{ form.end_time.label(class="form-label fw-semibold") }} <span class="text-danger">*</span>
|
||||
{{ form.end_time(class="form-control", id="end-time") }}
|
||||
{% if form.end_time.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.end_time.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<small class="text-muted">¿Cuándo finalizará la clase?</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. Propósito y Asistentes -->
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-8">
|
||||
{{ form.purpose.label(class="form-label fw-semibold") }} <span class="text-danger">*</span>
|
||||
{{ form.purpose(class="form-control", placeholder=_("Clase regular, examen, sesión de estudio, etc.")) }}
|
||||
{% if form.purpose.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.purpose.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
{{ form.expected_attendees.label(class="form-label fw-semibold") }} <span class="text-danger">*</span>
|
||||
{{ form.expected_attendees(class="form-control", id="expected_attendees", placeholder="30") }}
|
||||
{% if form.expected_attendees.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.expected_attendees.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<small class="text-muted">Cantidad de asistentes esperados</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 5. Notas -->
|
||||
<div class="mb-3">
|
||||
{{ form.notes.label(class="form-label fw-semibold") }}
|
||||
{{ form.notes(class="form-control", rows="2", placeholder=_("Cualquier nota adicional o requerimientos especiales...")) }}
|
||||
{% if form.notes.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.notes.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 6. Enlace de Aula Virtual (Zoom, Meet, Teams, Moodle) -->
|
||||
<div class="mb-4" id="virtual-link-container">
|
||||
<label for="virtual_link" class="form-label fw-semibold">
|
||||
<i class="bi bi-camera-video text-primary me-1"></i>Enlace de Aula Virtual (Zoom, Google Meet, Teams, Moodle)
|
||||
</label>
|
||||
{{ form.virtual_link(class="form-control", id="virtual_link", placeholder="https://zoom.us/j/... o https://meet.google.com/...") }}
|
||||
{% if form.virtual_link.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.virtual_link.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="form-text small text-muted">
|
||||
<i class="bi bi-info-circle me-1"></i>Obligatorio para Campus Virtual o clases remotas/híbridas. Se autocompleta con el enlace de la comisión seleccionada.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 7. TARJETA DE RESUMEN DESGLOSADA: Edificio, Piso, Aula, Modalidad -->
|
||||
<div class="card bg-body-tertiary border-0 shadow-xs mb-4" id="reservation-summary">
|
||||
<div class="card-body p-3">
|
||||
<h6 class="card-subtitle mb-2 text-muted small fw-bold">
|
||||
<i class="bi bi-info-circle text-info me-1"></i>Resumen de la Reserva
|
||||
</h6>
|
||||
|
||||
<!-- Badges desglosados de Ubicación -->
|
||||
<div class="row g-2 mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="p-2 rounded bg-body border">
|
||||
<small class="text-muted d-block">🏢 Edificio / Sede</small>
|
||||
<strong id="summary-building" class="text-primary">-</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-2 rounded bg-body border">
|
||||
<small class="text-muted d-block">🪜 Piso / Nivel</small>
|
||||
<strong id="summary-floor" class="text-secondary">-</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-2 rounded bg-body border">
|
||||
<small class="text-muted d-block">🚪 Aula Seleccionada</small>
|
||||
<strong id="summary-classroom" class="text-success">No seleccionada</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fila de Enlace Virtual -->
|
||||
<div class="row g-2 mb-3" id="summary-virtual-row">
|
||||
<div class="col-12">
|
||||
<div class="p-2 rounded bg-body border d-flex align-items-center justify-content-between">
|
||||
<div class="text-truncate me-2">
|
||||
<small class="text-muted d-block">🎥 Enlace Virtual (Videoconferencia)</small>
|
||||
<span id="summary-virtual-link" class="small font-monospace text-primary text-break">Sin enlace configurado</span>
|
||||
</div>
|
||||
<span class="badge bg-success-subtle text-success border" id="summary-virtual-badge" style="display:none;">
|
||||
<i class="bi bi-camera-video me-1"></i>Virtual
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Duración y Comisión -->
|
||||
<div class="row g-2 small">
|
||||
<div class="col-md-4">
|
||||
<span class="text-muted">⏱️ Duración:</span>
|
||||
<strong id="summary-duration" class="text-body ms-1">No calculada</strong>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<span class="text-muted">📚 Comisión:</span>
|
||||
<strong id="summary-commission" class="text-body ms-1">No seleccionada</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botones -->
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="/schedule/today_schedule" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-x-circle me-1"></i>Cancelar
|
||||
</a>
|
||||
<button type="submit" class="btn btn-success px-4">
|
||||
<i class="bi bi-calendar-check me-1"></i>Realizar Reserva
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script type="application/json" id="classroom-data">
|
||||
{
|
||||
{% for c in classroom_list %}
|
||||
"{{ c.id }}": {
|
||||
"id": {{ c.id }},
|
||||
"building_id": {{ (c.building_id or 0)|tojson }},
|
||||
"building_name": {{ c.building_name|tojson }},
|
||||
"floor": {{ c.floor|tojson }},
|
||||
"floor_display": {{ c.floor_display|tojson }},
|
||||
"code": {{ c.code|tojson }},
|
||||
"code_display": {{ c.code_display|tojson }},
|
||||
"location_display": {{ c.location_display|tojson }},
|
||||
"capacity": {{ c.capacity_display|tojson }},
|
||||
"capacity_num": {{ c.capacity }},
|
||||
"is_virtual": {{ c.is_virtual|tojson }}
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/json" id="commission-data">
|
||||
{
|
||||
{% for c in commission_list %}
|
||||
"{{ c.id }}": {
|
||||
"id": {{ c.id }},
|
||||
"code": {{ c.code|tojson }},
|
||||
"virtual_link": {{ (c.virtual_link or '')|tojson }},
|
||||
"max_students": {{ c.max_students }}
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/json" id="i18n-strings">
|
||||
{
|
||||
"not_selected": "No seleccionada",
|
||||
"not_calculated": "No calculada",
|
||||
"invalid_time": "Rango horario inválido",
|
||||
"hour": "hora",
|
||||
"hours": "horas",
|
||||
"minute": "minuto",
|
||||
"minutes": "minutos",
|
||||
"capacity": "Capacidad",
|
||||
"capacity_exceeded": "Los asistentes esperados superan la capacidad del aula",
|
||||
"no_virtual_link": "Sin enlace configurado (Clase presencial)"
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
let classroomData = {};
|
||||
try {
|
||||
const rawData = document.getElementById('classroom-data')?.textContent;
|
||||
if (rawData) classroomData = JSON.parse(rawData);
|
||||
} catch (err) {
|
||||
console.error('Error parsing classroomData:', err);
|
||||
}
|
||||
|
||||
let commissionData = {};
|
||||
try {
|
||||
const rawComm = document.getElementById('commission-data')?.textContent;
|
||||
if (rawComm) commissionData = JSON.parse(rawComm);
|
||||
} catch (err) {
|
||||
console.error('Error parsing commissionData:', err);
|
||||
}
|
||||
|
||||
let i18n = {};
|
||||
try {
|
||||
const rawI18n = document.getElementById('i18n-strings')?.textContent;
|
||||
if (rawI18n) i18n = JSON.parse(rawI18n);
|
||||
} catch (err) {
|
||||
console.error('Error parsing i18n:', err);
|
||||
}
|
||||
|
||||
const $building = $('#cascade-building');
|
||||
const $floor = $('#cascade-floor');
|
||||
const $classroom = $('#classroom-select');
|
||||
const $floorHelp = $('#floorHelpText');
|
||||
|
||||
// Guardar todas las opciones originales de aulas
|
||||
const originalClassroomOptions = [];
|
||||
$classroom.find('option').each(function() {
|
||||
originalClassroomOptions.push({
|
||||
value: $(this).val(),
|
||||
text: $(this).text()
|
||||
});
|
||||
});
|
||||
|
||||
// 1. Manejo del cambio de Edificio
|
||||
$building.on('change', function() {
|
||||
const selectedBuildingId = $(this).val();
|
||||
const isVirtual = $(this).find(':selected').data('virtual') === true || $(this).find(':selected').data('virtual') === 'true';
|
||||
|
||||
$floor.empty().append('<option value="">-- ' + (isVirtual ? 'No aplica (Campus Virtual)' : 'Selecciona Piso') + ' --</option>');
|
||||
$classroom.empty().append('<option value="">-- Selecciona Aula --</option>');
|
||||
|
||||
if (!selectedBuildingId) {
|
||||
$floor.prop('disabled', true);
|
||||
$classroom.prop('disabled', false);
|
||||
// Restaurar todas
|
||||
originalClassroomOptions.forEach(opt => {
|
||||
if (opt.value) $classroom.append($('<option>', { value: opt.value, text: opt.text }));
|
||||
});
|
||||
updateSummary();
|
||||
return;
|
||||
}
|
||||
|
||||
if (isVirtual) {
|
||||
$floor.prop('disabled', true);
|
||||
$floorHelp.text('Modalidad 100% remota sin piso asignado');
|
||||
|
||||
// Filtrar solo aulas virtuales
|
||||
let virtualCount = 0;
|
||||
let lastVirtualId = null;
|
||||
Object.values(classroomData).forEach(c => {
|
||||
if (c.is_virtual || c.building_id == selectedBuildingId) {
|
||||
$classroom.append($('<option>', {
|
||||
value: c.id,
|
||||
text: `${c.code_display} (Cap: ${c.capacity})`
|
||||
}));
|
||||
lastVirtualId = c.id;
|
||||
virtualCount++;
|
||||
}
|
||||
});
|
||||
|
||||
if (virtualCount === 1 && lastVirtualId) {
|
||||
$classroom.val(lastVirtualId);
|
||||
}
|
||||
updateSummary();
|
||||
return;
|
||||
}
|
||||
|
||||
// Edificio Físico
|
||||
$floor.prop('disabled', false);
|
||||
$floorHelp.text('Filtra por planta o nivel');
|
||||
|
||||
// Extraer pisos únicos de este edificio
|
||||
const buildingFloors = [];
|
||||
Object.values(classroomData).forEach(c => {
|
||||
if (c.building_id == selectedBuildingId && c.floor) {
|
||||
if (!buildingFloors.some(f => f.floor === c.floor)) {
|
||||
buildingFloors.push({
|
||||
floor: c.floor,
|
||||
floor_display: c.floor_display
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Ordenar pisos: PB primero, luego numérico
|
||||
buildingFloors.sort((a, b) => {
|
||||
if (a.floor === '0' || a.floor.toUpperCase() === 'PB') return -1;
|
||||
if (b.floor === '0' || b.floor.toUpperCase() === 'PB') return 1;
|
||||
return a.floor.localeCompare(b.floor, undefined, { numeric: true });
|
||||
});
|
||||
|
||||
buildingFloors.forEach(f => {
|
||||
$floor.append($('<option>', {
|
||||
value: f.floor,
|
||||
text: f.floor_display
|
||||
}));
|
||||
});
|
||||
|
||||
// Poblar aulas de este edificio inicialmente
|
||||
Object.values(classroomData).forEach(c => {
|
||||
if (c.building_id == selectedBuildingId) {
|
||||
$classroom.append($('<option>', {
|
||||
value: c.id,
|
||||
text: `${c.code} · ${c.floor_display} (Cap: ${c.capacity})`
|
||||
}));
|
||||
}
|
||||
});
|
||||
|
||||
updateSummary();
|
||||
});
|
||||
|
||||
// 2. Manejo del cambio de Piso
|
||||
$floor.on('change', function() {
|
||||
const selectedBuildingId = $building.val();
|
||||
const selectedFloor = $(this).val();
|
||||
|
||||
$classroom.empty().append('<option value="">-- Selecciona Aula --</option>');
|
||||
|
||||
let count = 0;
|
||||
let lastId = null;
|
||||
|
||||
Object.values(classroomData).forEach(c => {
|
||||
const matchesBuilding = !selectedBuildingId || c.building_id == selectedBuildingId;
|
||||
const matchesFloor = !selectedFloor || c.floor == selectedFloor;
|
||||
|
||||
if (matchesBuilding && matchesFloor) {
|
||||
$classroom.append($('<option>', {
|
||||
value: c.id,
|
||||
text: `${c.code} (Cap: ${c.capacity})`
|
||||
}));
|
||||
lastId = c.id;
|
||||
count++;
|
||||
}
|
||||
});
|
||||
|
||||
if (count === 1 && lastId) {
|
||||
$classroom.val(lastId);
|
||||
}
|
||||
|
||||
updateSummary();
|
||||
});
|
||||
|
||||
// 3. Manejo del cambio de Aula directo
|
||||
$classroom.on('change', function() {
|
||||
const cId = $(this).val();
|
||||
if (cId && classroomData[cId]) {
|
||||
const c = classroomData[cId];
|
||||
// Sincronizar selectores en cascada si no coinciden
|
||||
if ($building.val() != c.building_id) {
|
||||
$building.val(c.building_id);
|
||||
// Si no es virtual, sincronizar piso
|
||||
if (!c.is_virtual) {
|
||||
$floor.prop('disabled', false);
|
||||
$floor.val(c.floor);
|
||||
}
|
||||
} else if (!c.is_virtual && $floor.val() != c.floor) {
|
||||
$floor.val(c.floor);
|
||||
}
|
||||
}
|
||||
updateSummary();
|
||||
});
|
||||
|
||||
// Inicializar cascada si ya hay un aula seleccionada (ej. post-error o query string)
|
||||
const initialClassroomId = $classroom.val();
|
||||
if (initialClassroomId && classroomData[initialClassroomId]) {
|
||||
const c = classroomData[initialClassroomId];
|
||||
$building.val(c.building_id).trigger('change');
|
||||
if (!c.is_virtual) {
|
||||
$floor.val(c.floor).trigger('change');
|
||||
}
|
||||
$classroom.val(initialClassroomId);
|
||||
}
|
||||
|
||||
function updateSummary() {
|
||||
const classroomId = $classroom.val();
|
||||
const commissionId = $('#commission-select').val();
|
||||
const startTime = $('#start-time').val();
|
||||
const endTime = $('#end-time').val();
|
||||
|
||||
// Update classroom badges
|
||||
if (classroomId && classroomData[classroomId]) {
|
||||
const c = classroomData[classroomId];
|
||||
$('#summary-building').text(c.building_name);
|
||||
$('#summary-floor').text(c.is_virtual ? 'Remoto (Virtual)' : c.floor_display);
|
||||
$('#summary-classroom').text(`${c.code} (Cap: ${c.capacity})`);
|
||||
} else {
|
||||
$('#summary-building').text('-');
|
||||
$('#summary-floor').text('-');
|
||||
$('#summary-classroom').text(i18n.not_selected || 'No seleccionada');
|
||||
}
|
||||
|
||||
// Update commission summary and autofill virtual link if available
|
||||
if (commissionId) {
|
||||
const commissionText = $('#commission-select option:selected').text();
|
||||
$('#summary-commission').text(commissionText);
|
||||
} else {
|
||||
$('#summary-commission').text(i18n.not_selected || 'No seleccionada');
|
||||
}
|
||||
|
||||
// Update virtual link in summary
|
||||
const vLink = ($('#virtual_link').val() || '').trim();
|
||||
const isVirtual = (classroomId && classroomData[classroomId] && classroomData[classroomId].is_virtual);
|
||||
|
||||
if (vLink) {
|
||||
$('#summary-virtual-link').text(vLink);
|
||||
$('#summary-virtual-badge').show();
|
||||
} else if (isVirtual) {
|
||||
$('#summary-virtual-link').html('<span class="text-warning fw-semibold"><i class="bi bi-exclamation-triangle me-1"></i>Campus Virtual (Recomendado agregar enlace Zoom/Meet)</span>');
|
||||
$('#summary-virtual-badge').hide();
|
||||
} else {
|
||||
$('#summary-virtual-link').text(i18n.no_virtual_link || 'Sin enlace configurado (Clase presencial)');
|
||||
$('#summary-virtual-badge').hide();
|
||||
}
|
||||
|
||||
// Calculate duration
|
||||
if (startTime && endTime) {
|
||||
const start = new Date(startTime);
|
||||
const end = new Date(endTime);
|
||||
|
||||
if (end > start) {
|
||||
const diffMs = end - start;
|
||||
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
||||
const diffMins = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
|
||||
|
||||
let durationText = '';
|
||||
if (diffHours > 0) {
|
||||
const hLabel = diffHours > 1 ? (i18n.hours || 'horas') : (i18n.hour || 'hora');
|
||||
durationText += `${diffHours} ${hLabel}`;
|
||||
}
|
||||
if (diffMins > 0) {
|
||||
if (durationText) durationText += ' ';
|
||||
const mLabel = diffMins > 1 ? (i18n.minutes || 'minutos') : (i18n.minute || 'minuto');
|
||||
durationText += `${diffMins} ${mLabel}`;
|
||||
}
|
||||
|
||||
$('#summary-duration').text(durationText || '0 min');
|
||||
} else {
|
||||
$('#summary-duration').text(i18n.invalid_time || 'Rango horario inválido');
|
||||
}
|
||||
} else {
|
||||
$('#summary-duration').text(i18n.not_calculated || 'No calculada');
|
||||
}
|
||||
}
|
||||
|
||||
// Check capacity vs expected attendees
|
||||
function checkCapacity() {
|
||||
const classroomId = $classroom.val();
|
||||
const attendees = parseInt($('#expected_attendees').val()) || 0;
|
||||
|
||||
if (classroomId && classroomData[classroomId] && attendees > 0) {
|
||||
const c = classroomData[classroomId];
|
||||
// No validar si es virtual o capacidad ilimitada
|
||||
if (c.is_virtual || c.capacity === '∞' || c.capacity_num === 0) {
|
||||
$('#expected_attendees').removeClass('is-invalid');
|
||||
$('#expected_attendees').siblings('.invalid-feedback').remove();
|
||||
return;
|
||||
}
|
||||
|
||||
if (attendees > c.capacity_num) {
|
||||
$('#expected_attendees').addClass('is-invalid');
|
||||
const msg = i18n.capacity_exceeded || 'Los asistentes esperados superan la capacidad del aula';
|
||||
if ($('#expected_attendees').siblings('.invalid-feedback').length === 0) {
|
||||
$('#expected_attendees').after(`
|
||||
<div class="invalid-feedback">
|
||||
${msg} (${attendees} > ${c.capacity_num})
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
} else {
|
||||
$('#expected_attendees').removeClass('is-invalid');
|
||||
$('#expected_attendees').siblings('.invalid-feedback').remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$('#commission-select').on('change', function() {
|
||||
const cId = $(this).val();
|
||||
if (cId && commissionData[cId]) {
|
||||
const comm = commissionData[cId];
|
||||
if (comm.virtual_link && !$('#virtual_link').val().trim()) {
|
||||
$('#virtual_link').val(comm.virtual_link);
|
||||
}
|
||||
}
|
||||
updateSummary();
|
||||
});
|
||||
|
||||
$('#virtual_link').on('input change', updateSummary);
|
||||
$('#start-time, #end-time').on('change', updateSummary);
|
||||
$('#expected_attendees').on('input', function() {
|
||||
checkCapacity();
|
||||
updateSummary();
|
||||
});
|
||||
|
||||
updateSummary();
|
||||
|
||||
// Form validation
|
||||
$('#reservation-form').on('submit', function(e) {
|
||||
let isValid = true;
|
||||
|
||||
if (!$classroom.val()) {
|
||||
$classroom.addClass('is-invalid');
|
||||
isValid = false;
|
||||
} else {
|
||||
$classroom.removeClass('is-invalid');
|
||||
}
|
||||
|
||||
if (!$('#commission-select').val()) {
|
||||
$('#commission-select').addClass('is-invalid');
|
||||
isValid = false;
|
||||
} else {
|
||||
$('#commission-select').removeClass('is-invalid');
|
||||
}
|
||||
|
||||
if (!$('#start-time').val()) {
|
||||
$('#start-time').addClass('is-invalid');
|
||||
isValid = false;
|
||||
} else {
|
||||
$('#start-time').removeClass('is-invalid');
|
||||
}
|
||||
|
||||
if (!$('#end-time').val()) {
|
||||
$('#end-time').addClass('is-invalid');
|
||||
isValid = false;
|
||||
} else {
|
||||
$('#end-time').removeClass('is-invalid');
|
||||
}
|
||||
|
||||
const startTime = new Date($('#start-time').val());
|
||||
const endTime = new Date($('#end-time').val());
|
||||
|
||||
if (endTime <= startTime) {
|
||||
$('#end-time').addClass('is-invalid');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
checkCapacity();
|
||||
if ($('#expected_attendees').hasClass('is-invalid')) {
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
return isValid;
|
||||
});
|
||||
|
||||
// Set minimum datetime to current
|
||||
const now = new Date();
|
||||
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
|
||||
$('#start-time, #end-time').attr('min', now.toISOString().slice(0, 16));
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,481 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Modificar Reserva #{{ reservation.id }} - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb mb-1 small">
|
||||
<li class="breadcrumb-item"><a href="/schedule/today_schedule">Schedule</a></li>
|
||||
<li class="breadcrumb-item"><a href="/schedule/list_reservations">Reservas</a></li>
|
||||
<li class="breadcrumb-item"><a href="/schedule/view_reservation">#{{ reservation.id }}</a></li>
|
||||
<li class="breadcrumb-item active">Modificar</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<h1 class="h3 mb-0">
|
||||
<i class="bi bi-pencil-square text-warning me-2"></i>Modificar Reserva #{{ reservation.id }}
|
||||
</h1>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="/schedule/view_reservation" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Volver al Detalle
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-10 mx-auto">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-calendar3 text-warning me-2"></i>Editar Parámetros de la Reserva
|
||||
</h5>
|
||||
<span class="badge {% if reservation.status == 'CONFIRMED' %}bg-success{% elif reservation.status == 'PENDING' %}bg-warning{% else %}bg-secondary{% endif %}">
|
||||
{{ reservation.status }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<form method="POST" id="reservation-form" novalidate>
|
||||
|
||||
<!-- 1. SELECTORES EN CASCADA: Edificio -> Piso -> Aula -->
|
||||
<div class="mb-4">
|
||||
<div class="p-3 rounded bg-body-tertiary border">
|
||||
<label class="form-label fw-bold text-primary mb-2">
|
||||
<i class="bi bi-geo-alt-fill me-1"></i>Espacio Físico / Modalidad <span class="text-danger">*</span>
|
||||
</label>
|
||||
<div class="row g-3">
|
||||
<!-- Edificio / Sede -->
|
||||
<div class="col-md-4">
|
||||
<label for="cascade-building" class="form-label small fw-semibold text-muted mb-1">
|
||||
<i class="bi bi-buildings text-primary me-1"></i>1. Edificio / Sede
|
||||
</label>
|
||||
<select id="cascade-building" class="form-select form-select-sm">
|
||||
<option value="">-- Selecciona Edificio --</option>
|
||||
{% for b in buildings %}
|
||||
<option value="{{ b.id }}" data-virtual="{{ 'true' if b.code == 'VIRTUAL' or 'VIRTUAL' in (b.name|upper) else 'false' }}">
|
||||
{% if b.code == 'VIRTUAL' or 'VIRTUAL' in (b.name|upper) %}🌐{% else %}🏢{% endif %} {{ b.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Piso / Nivel -->
|
||||
<div class="col-md-4">
|
||||
<label for="cascade-floor" class="form-label small fw-semibold text-muted mb-1">
|
||||
<i class="bi bi-layers text-secondary me-1"></i>2. Piso / Nivel
|
||||
</label>
|
||||
<select id="cascade-floor" class="form-select form-select-sm" disabled>
|
||||
<option value="">-- Selecciona Piso --</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Aula / Espacio -->
|
||||
<div class="col-md-4">
|
||||
<label for="classroom_id" class="form-label small fw-semibold text-muted mb-1">
|
||||
<i class="bi bi-door-open text-success me-1"></i>3. Aula Final <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.classroom_id(class="form-select form-select-sm", id="classroom_id") }}
|
||||
{% if form.classroom_id.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.classroom_id.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card de Info Dinámica del Aula -->
|
||||
<div id="classroom-info-card" class="mt-3 p-2 rounded bg-body border" style="display: none;">
|
||||
<div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
|
||||
<div>
|
||||
<span class="badge bg-primary me-2" id="info-room-code">-</span>
|
||||
<small class="text-muted" id="info-room-location">-</small>
|
||||
</div>
|
||||
<div>
|
||||
<span class="badge bg-info-subtle text-info border me-1" id="info-room-capacity">Cap: -</span>
|
||||
<span class="badge bg-success-subtle text-success border" id="info-room-type">Presencial</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. DATOS ACADÉMICOS Y HORARIOS -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-6">
|
||||
<label for="commission_id" class="form-label fw-bold text-primary mb-1">
|
||||
<i class="bi bi-diagram-3 me-1"></i>Comisión Académica
|
||||
</label>
|
||||
{{ form.commission_id(class="form-select", id="commission_id") }}
|
||||
<div class="form-text small text-muted">Comisión y asignatura vinculada a esta reserva.</div>
|
||||
{% if form.commission_id.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.commission_id.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="start_time" class="form-label fw-bold text-primary mb-1">
|
||||
<i class="bi bi-clock me-1"></i>Inicio <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.start_time(class="form-control", id="start_time", type="datetime-local") }}
|
||||
{% if form.start_time.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.start_time.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label for="end_time" class="form-label fw-bold text-primary mb-1">
|
||||
<i class="bi bi-clock-fill me-1"></i>Fin <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.end_time(class="form-control", id="end_time", type="datetime-local") }}
|
||||
{% if form.end_time.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.end_time.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. PROPÓSITO Y ASISTENTES -->
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-8">
|
||||
<label for="purpose" class="form-label fw-bold text-primary mb-1">
|
||||
<i class="bi bi-journal-text me-1"></i>Propósito / Motivo <span class="text-danger">*</span>
|
||||
</label>
|
||||
{{ form.purpose(class="form-control", id="purpose", placeholder="ej. Cursada regular, Examen Parcial, Clase Especial") }}
|
||||
{% if form.purpose.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.purpose.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<label for="expected_attendees" class="form-label fw-bold text-primary mb-1">
|
||||
<i class="bi bi-people me-1"></i>Asistentes Estimados
|
||||
</label>
|
||||
{{ form.expected_attendees(class="form-control", id="expected_attendees", type="number", min="0") }}
|
||||
{% if form.expected_attendees.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.expected_attendees.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. ENLACE DE AULA VIRTUAL (Zoom, Meet, Teams, etc) -->
|
||||
<div class="mb-4">
|
||||
<div class="p-3 rounded bg-primary-subtle border border-primary-subtle">
|
||||
<label for="virtual_link" class="form-label fw-bold text-primary mb-1">
|
||||
<i class="bi bi-camera-video-fill me-1"></i>Enlace de Aula Virtual / Videoconferencia
|
||||
</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-body text-primary"><i class="bi bi-link-45deg"></i></span>
|
||||
{{ form.virtual_link(class="form-control font-monospace", id="virtual_link", placeholder="https://zoom.us/j/... o https://meet.google.com/...") }}
|
||||
<button type="button" class="btn btn-outline-primary" id="btn-test-link" title="Probar enlace en nueva pestaña">
|
||||
<i class="bi bi-box-arrow-up-right me-1"></i>Probar
|
||||
</button>
|
||||
</div>
|
||||
<div class="form-text small text-muted">
|
||||
Enlace directo a Zoom, Google Meet, Teams o Campus Virtual. Si se ingresa, se habilitará el botón de acceso directo en cartelera y cronograma.
|
||||
</div>
|
||||
{% if form.virtual_link.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.virtual_link.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 5. NOTAS ADICIONALES -->
|
||||
<div class="mb-4">
|
||||
<label for="notes" class="form-label fw-bold text-primary mb-1">
|
||||
<i class="bi bi-card-text me-1"></i>Observaciones / Notas Adicionales
|
||||
</label>
|
||||
{{ form.notes(class="form-control", id="notes", rows="3", placeholder="Observaciones sobre equipamiento, requerimientos o modalidad...") }}
|
||||
{% if form.notes.errors %}
|
||||
<div class="invalid-feedback d-block">{{ form.notes.errors[0] }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- 6. RESUMEN DINÁMICO DE MODIFICACIÓN -->
|
||||
<div class="card bg-body-tertiary border mb-4 shadow-none">
|
||||
<div class="card-header bg-transparent py-2 border-bottom">
|
||||
<h6 class="card-title mb-0 small fw-bold text-primary">
|
||||
<i class="bi bi-check2-circle me-1"></i>Resumen de Cambios
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<div class="row g-2 small mb-2">
|
||||
<div class="col-md-4">
|
||||
<span class="text-muted">🏢 Edificio:</span>
|
||||
<strong id="summary-building" class="text-body ms-1">-</strong>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<span class="text-muted">📍 Piso / Nivel:</span>
|
||||
<strong id="summary-floor" class="text-body ms-1">-</strong>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<span class="text-muted">🚪 Aula Seleccionada:</span>
|
||||
<strong id="summary-classroom" class="text-primary ms-1">-</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-2 small mb-2">
|
||||
<div class="col-md-4">
|
||||
<span class="text-muted">⏱️ Duración:</span>
|
||||
<strong id="summary-duration" class="text-body ms-1">-</strong>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<span class="text-muted">👥 Capacidad:</span>
|
||||
<strong id="summary-capacity" class="text-body ms-1">-</strong>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<span class="text-muted">📚 Comisión:</span>
|
||||
<strong id="summary-commission" class="text-body ms-1">-</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-2 rounded bg-body border d-flex align-items-center justify-content-between">
|
||||
<div class="text-truncate me-2">
|
||||
<small class="text-muted d-block">🎥 Enlace de Aula Virtual:</small>
|
||||
<span id="summary-virtual-link" class="small font-monospace text-primary text-break">Sin enlace configurado</span>
|
||||
</div>
|
||||
<span class="badge bg-success-subtle text-success border" id="summary-virtual-badge" style="display:none;">
|
||||
<i class="bi bi-camera-video me-1"></i>Virtual
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Botones -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<a href="/schedule/view_reservation" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-x-circle me-1"></i>Cancelar
|
||||
</a>
|
||||
<button type="submit" class="btn btn-warning px-4 fw-bold">
|
||||
<i class="bi bi-check-circle me-1"></i>Guardar Modificaciones
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script type="application/json" id="classroom-data">
|
||||
{
|
||||
{% for c in classroom_list %}
|
||||
"{{ c.id }}": {
|
||||
"id": {{ c.id }},
|
||||
"building_id": {{ (c.building_id or 0)|tojson }},
|
||||
"building_name": {{ c.building_name|tojson }},
|
||||
"floor": {{ c.floor|tojson }},
|
||||
"floor_display": {{ c.floor_display|tojson }},
|
||||
"code": {{ c.code|tojson }},
|
||||
"code_display": {{ c.code_display|tojson }},
|
||||
"location_display": {{ c.location_display|tojson }},
|
||||
"capacity": {{ c.capacity_display|tojson }},
|
||||
"capacity_num": {{ c.capacity }},
|
||||
"is_virtual": {{ c.is_virtual|tojson }}
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/json" id="commission-data">
|
||||
{
|
||||
{% for c in commission_list %}
|
||||
"{{ c.id }}": {
|
||||
"id": {{ c.id }},
|
||||
"code": {{ c.code|tojson }},
|
||||
"virtual_link": {{ (c.virtual_link or '')|tojson }},
|
||||
"max_students": {{ c.max_students }}
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
let classroomData = {};
|
||||
try {
|
||||
const rawData = document.getElementById('classroom-data')?.textContent;
|
||||
if (rawData) classroomData = JSON.parse(rawData);
|
||||
} catch (err) {
|
||||
console.error('Error parsing classroomData:', err);
|
||||
}
|
||||
|
||||
let commissionData = {};
|
||||
try {
|
||||
const rawComm = document.getElementById('commission-data')?.textContent;
|
||||
if (rawComm) commissionData = JSON.parse(rawComm);
|
||||
} catch (err) {
|
||||
console.error('Error parsing commissionData:', err);
|
||||
}
|
||||
|
||||
const $bldgSelect = $('#cascade-building');
|
||||
const $floorSelect = $('#cascade-floor');
|
||||
const $roomSelect = $('#classroom_id');
|
||||
const $commSelect = $('#commission_id');
|
||||
const $virtualLinkInput = $('#virtual_link');
|
||||
const $btnTestLink = $('#btn-test-link');
|
||||
|
||||
const initialRoomId = "{{ reservation.classroom_id }}";
|
||||
|
||||
// 1. Población de Pisos al cambiar Edificio
|
||||
$bldgSelect.on('change', function() {
|
||||
const selectedBldg = $(this).val();
|
||||
$floorSelect.empty().append('<option value="">-- Selecciona Piso --</option>');
|
||||
$roomSelect.empty().append('<option value="">-- Selecciona Aula --</option>');
|
||||
|
||||
if (!selectedBldg) {
|
||||
$floorSelect.prop('disabled', true);
|
||||
$roomSelect.prop('disabled', true);
|
||||
updateSummary();
|
||||
return;
|
||||
}
|
||||
|
||||
const floors = new Set();
|
||||
Object.values(classroomData).forEach(function(room) {
|
||||
if (String(room.building_id) === String(selectedBldg)) {
|
||||
floors.add(room.floor);
|
||||
}
|
||||
});
|
||||
|
||||
const sortedFloors = Array.from(floors).sort(function(a, b) {
|
||||
if (a === '0' || a === 'PB') return -1;
|
||||
if (b === '0' || b === 'PB') return 1;
|
||||
return String(a).localeCompare(String(b), undefined, {numeric: true});
|
||||
});
|
||||
|
||||
sortedFloors.forEach(function(fl) {
|
||||
let label = (fl === '0' || fl === 'PB') ? 'Planta Baja' : ('Piso ' + fl);
|
||||
$floorSelect.append($('<option>', { value: fl, text: label }));
|
||||
});
|
||||
|
||||
$floorSelect.prop('disabled', false);
|
||||
$roomSelect.prop('disabled', true);
|
||||
updateSummary();
|
||||
});
|
||||
|
||||
// 2. Población de Aulas al cambiar Piso
|
||||
$floorSelect.on('change', function() {
|
||||
const selectedBldg = $bldgSelect.val();
|
||||
const selectedFloor = $(this).val();
|
||||
$roomSelect.empty().append('<option value="">-- Selecciona Aula --</option>');
|
||||
|
||||
if (!selectedFloor) {
|
||||
$roomSelect.prop('disabled', true);
|
||||
updateSummary();
|
||||
return;
|
||||
}
|
||||
|
||||
const matchingRooms = Object.values(classroomData).filter(function(room) {
|
||||
return String(room.building_id) === String(selectedBldg) && String(room.floor) === String(selectedFloor);
|
||||
});
|
||||
|
||||
matchingRooms.sort(function(a, b) { return a.code.localeCompare(b.code); });
|
||||
|
||||
matchingRooms.forEach(function(room) {
|
||||
const capText = room.is_virtual ? '∞ Remoto' : ('Cap: ' + room.capacity);
|
||||
$roomSelect.append($('<option>', {
|
||||
value: room.id,
|
||||
text: room.code + ' (' + capText + ')'
|
||||
}));
|
||||
});
|
||||
|
||||
$roomSelect.prop('disabled', false);
|
||||
updateSummary();
|
||||
});
|
||||
|
||||
// 3. Cambio de Aula
|
||||
$roomSelect.on('change', function() {
|
||||
updateClassroomInfo();
|
||||
updateSummary();
|
||||
});
|
||||
|
||||
// 4. Preselección inicial de Aula actual
|
||||
if (initialRoomId && classroomData[initialRoomId]) {
|
||||
const initRoom = classroomData[initialRoomId];
|
||||
$bldgSelect.val(initRoom.building_id).trigger('change');
|
||||
$floorSelect.val(initRoom.floor).trigger('change');
|
||||
$roomSelect.val(initRoom.id).trigger('change');
|
||||
}
|
||||
|
||||
function updateClassroomInfo() {
|
||||
const roomId = $roomSelect.val();
|
||||
const room = classroomData[roomId];
|
||||
const $card = $('#classroom-info-card');
|
||||
if (!room) {
|
||||
$card.slideUp(150);
|
||||
return;
|
||||
}
|
||||
$('#info-room-code').text(room.code);
|
||||
$('#info-room-location').text(room.location_display);
|
||||
$('#info-room-capacity').text('Capacidad: ' + room.capacity);
|
||||
if (room.is_virtual) {
|
||||
$('#info-room-type').removeClass('bg-success-subtle text-success').addClass('bg-primary-subtle text-primary').text('🌐 Campus Virtual');
|
||||
} else {
|
||||
$('#info-room-type').removeClass('bg-primary-subtle text-primary').addClass('bg-success-subtle text-success').text('🏢 Presencial');
|
||||
}
|
||||
$card.slideDown(150);
|
||||
}
|
||||
|
||||
function updateSummary() {
|
||||
const bldgName = $bldgSelect.find('option:selected').text().trim();
|
||||
const floorName = $floorSelect.find('option:selected').text().trim();
|
||||
const roomId = $roomSelect.val();
|
||||
const room = classroomData[roomId];
|
||||
|
||||
$('#summary-building').text(bldgName && !$bldgSelect.val() ? '-' : (bldgName || '-'));
|
||||
$('#summary-floor').text(floorName && !$floorSelect.val() ? '-' : (floorName || '-'));
|
||||
$('#summary-classroom').text(room ? room.code : '-');
|
||||
$('#summary-capacity').text(room ? (room.is_virtual ? '∞ Ilimitada' : room.capacity) : '-');
|
||||
|
||||
const commText = $commSelect.find('option:selected').text().trim();
|
||||
$('#summary-commission').text(commText && $commSelect.val() ? commText : '-');
|
||||
|
||||
// Duración
|
||||
const st = $('#start_time').val();
|
||||
const et = $('#end_time').val();
|
||||
if (st && et) {
|
||||
const startDate = new Date(st);
|
||||
const endDate = new Date(et);
|
||||
const diffMs = endDate - startDate;
|
||||
if (diffMs > 0) {
|
||||
const diffHrs = Math.floor(diffMs / 3600000);
|
||||
const diffMins = Math.round((diffMs % 3600000) / 60000);
|
||||
let durText = '';
|
||||
if (diffHrs > 0) durText += diffHrs + ' hs ';
|
||||
if (diffMins > 0) durText += diffMins + ' min';
|
||||
$('#summary-duration').text(durText);
|
||||
} else {
|
||||
$('#summary-duration').text('Rango inválido');
|
||||
}
|
||||
}
|
||||
|
||||
// Enlace virtual
|
||||
const vLink = $virtualLinkInput.val() ? $virtualLinkInput.val().trim() : '';
|
||||
if (vLink) {
|
||||
$('#summary-virtual-link').html('<a href="' + vLink + '" target="_blank" class="text-decoration-none text-primary"><i class="bi bi-box-arrow-up-right me-1"></i>' + vLink + '</a>');
|
||||
$('#summary-virtual-badge').show();
|
||||
} else {
|
||||
$('#summary-virtual-link').text('Sin enlace configurado');
|
||||
$('#summary-virtual-badge').hide();
|
||||
}
|
||||
}
|
||||
|
||||
// Eventos reactivos
|
||||
$('#start_time, #end_time, #commission_id, #virtual_link').on('input change', updateSummary);
|
||||
|
||||
// Botón Probar enlace
|
||||
$btnTestLink.on('click', function() {
|
||||
const link = $virtualLinkInput.val() ? $virtualLinkInput.val().trim() : '';
|
||||
if (link) {
|
||||
window.open(link, '_blank');
|
||||
} else {
|
||||
alert('Por favor ingresa primero una URL para probar.');
|
||||
}
|
||||
});
|
||||
|
||||
updateSummary();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,402 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Listado de Reservas - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-md-7">
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-calendar-check text-primary me-2"></i>Listado de Reservas
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">Registro histórico y programación completa de clases y asignación de aulas</p>
|
||||
</div>
|
||||
<div class="col-md-5 text-md-end mt-3 mt-md-0">
|
||||
{% if user.has_permission('reservations', 'read_write') %}
|
||||
<a href="/schedule/add_reservation" class="btn btn-success me-2">
|
||||
<i class="bi bi-plus-circle me-1"></i>Nueva Reserva
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/schedule/calendar_view" class="btn btn-outline-primary me-2">
|
||||
<i class="bi bi-calendar3 me-1"></i>Ver Calendario
|
||||
</a>
|
||||
<a href="/schedule/today_schedule" class="btn btn-outline-info">
|
||||
<i class="bi bi-calendar-day me-1"></i>Cartelera de Hoy
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Card -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body p-3">
|
||||
<form method="GET" action="/schedule/list_reservations" class="row g-2 align-items-end">
|
||||
<!-- Search text -->
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<label class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-search me-1"></i>Buscar
|
||||
</label>
|
||||
<input type="text" name="search" class="form-control form-control-sm" placeholder="Materia, código o aula..." value="{{ search or '' }}">
|
||||
</div>
|
||||
|
||||
<!-- Status Filter -->
|
||||
<div class="col-lg-2 col-md-3">
|
||||
<label class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-shield-check me-1"></i>Estado
|
||||
</label>
|
||||
<select name="status" class="form-select form-select-sm">
|
||||
<option value="all" {% if status_filter == 'all' or not status_filter %}selected{% endif %}>Todos los estados</option>
|
||||
<option value="confirmed" {% if status_filter == 'confirmed' %}selected{% endif %}>Confirmadas</option>
|
||||
<option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Pendientes</option>
|
||||
<option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>Canceladas</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Floor Filter -->
|
||||
<div class="col-lg-2 col-md-3">
|
||||
<label class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-layers me-1"></i>Piso
|
||||
</label>
|
||||
<select name="floor" class="form-select form-select-sm">
|
||||
<option value="">Todos los pisos</option>
|
||||
{% for f in available_floors %}
|
||||
<option value="{{ f }}" {% if floor_filter == f|string %}selected{% endif %}>
|
||||
{% if f == 0 %}Planta Baja{% else %}Piso {{ f }}{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Aula Filter -->
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<label class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-door-open text-primary me-1"></i>Aula / Espacio
|
||||
</label>
|
||||
<select name="classroom_id" class="form-select form-select-sm">
|
||||
<option value="">Todas las aulas</option>
|
||||
{% for c in all_classrooms %}
|
||||
<option value="{{ c.id }}" {% if classroom_id == c.id %}selected{% endif %}>{{ c.building_name }} - {{ c.code }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Shift Filter -->
|
||||
<div class="col-lg-2 col-md-3">
|
||||
<label class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-brightness-high text-warning me-1"></i>Turno
|
||||
</label>
|
||||
<select name="shift" class="form-select form-select-sm">
|
||||
<option value="">Todos los turnos</option>
|
||||
<option value="Mañana" {% if shift_filter == 'Mañana' %}selected{% endif %}>Turno Mañana</option>
|
||||
<option value="Tarde" {% if shift_filter == 'Tarde' %}selected{% endif %}>Turno Tarde</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Date Range From -->
|
||||
<div class="col-lg-2 col-md-3">
|
||||
<label class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-calendar-event me-1"></i>Desde Fecha
|
||||
</label>
|
||||
<input type="date" name="date_from" class="form-control form-control-sm" value="{{ date_from or '' }}">
|
||||
</div>
|
||||
|
||||
<!-- Date Range To -->
|
||||
<div class="col-lg-2 col-md-3">
|
||||
<label class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-calendar-event me-1"></i>Hasta Fecha
|
||||
</label>
|
||||
<input type="date" name="date_to" class="form-control form-control-sm" value="{{ date_to or '' }}">
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Hide Virtual, Submit, Clear -->
|
||||
<div class="col-lg-6 col-md-6 pt-2">
|
||||
<div class="form-check form-switch pt-1">
|
||||
<input class="form-check-input" type="checkbox" role="switch" name="hide_virtual" value="1" id="hideVirtualList" {% if hide_virtual %}checked{% endif %}>
|
||||
<label class="form-check-label fw-semibold small text-dark" for="hideVirtualList">
|
||||
<i class="bi bi-laptop me-1 text-primary"></i>Ocultar Aulas Virtuales
|
||||
<span class="badge bg-secondary-subtle text-secondary border ms-1" style="font-size: 0.72rem;">Capacidad ilimitada</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-md-6 pt-2 text-md-end d-flex justify-content-md-end gap-2">
|
||||
<button type="submit" class="btn btn-primary btn-sm px-3">
|
||||
<i class="bi bi-funnel me-1"></i>Filtrar
|
||||
</button>
|
||||
<a href="/schedule/list_reservations" class="btn btn-outline-secondary btn-sm px-3">
|
||||
<i class="bi bi-arrow-counterclockwise me-1"></i>Limpiar
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header de Resumen y Selector de Vista -->
|
||||
{% if reservations and reservations.items %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
|
||||
<div class="small text-muted">
|
||||
<i class="bi bi-calendar-check text-primary me-1"></i>
|
||||
<span>Total: <strong class="text-body">{{ reservations.total }}</strong> reservas encontradas</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<span class="small text-muted d-none d-sm-inline">Modo de visualización:</span>
|
||||
{% set context_id = 'reservations' %}
|
||||
{% set default_view = 'table' %}
|
||||
{% include 'partials/view_switcher.html' %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 1. VISTA DE TABLA / GRILLA -->
|
||||
<div data-view-context="reservations" data-view-container="table">
|
||||
<div class="card border-0 shadow-sm mb-3">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-table text-primary me-2"></i>Registros en Formato Tabla
|
||||
</h5>
|
||||
<small class="text-muted">Página {{ reservations.page }} de {{ reservations.pages }}</small>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light small text-uppercase">
|
||||
<tr>
|
||||
<th class="ps-3">Fecha y Horario</th>
|
||||
<th>Aula / Piso</th>
|
||||
<th>Asignatura / Código</th>
|
||||
<th>Turno / Comisión</th>
|
||||
<th>Capacidad</th>
|
||||
<th>Estado</th>
|
||||
<th class="text-end pe-3">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for reservation in reservations.items %}
|
||||
<tr>
|
||||
<td class="ps-3">
|
||||
<div class="fw-bold">{{ reservation.start_time }}</div>
|
||||
<small class="text-muted font-monospace">{{ reservation.start_time }} - {{ reservation.end_time }} hs</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary-subtle text-secondary border font-monospace">
|
||||
{{ reservation.classroom.code if reservation.classroom else 'Sin Aula' }}
|
||||
</span>
|
||||
<small class="text-muted d-block">
|
||||
{% if reservation.classroom and reservation.classroom.floor == 0 %}PB{% elif reservation.classroom %}Piso {{ reservation.classroom.floor }}{% endif %}
|
||||
{% if reservation.classroom and reservation.classroom.building %} · {{ reservation.classroom.building }}{% endif %}
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-bold text-primary">{{ reservation.subject_name }}</div>
|
||||
<small class="badge bg-secondary-subtle text-secondary font-monospace">{{ reservation.subject_code }}</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-info-subtle text-info border me-1">
|
||||
{{ reservation.shift or 'Tarde' }}
|
||||
</span>
|
||||
<small class="text-muted">{{ reservation.commission.code if reservation.commission else 'C1' }}</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="small">{{ reservation.expected_attendees }} / {{ reservation.classroom.capacity if reservation.classroom else '-' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if reservation.status == 'CONFIRMED' or reservation.status.value == 'CONFIRMED' %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle">
|
||||
<i class="bi bi-check-circle me-1"></i>Confirmada
|
||||
</span>
|
||||
{% elif reservation.status == 'PENDING' or reservation.status.value == 'PENDING' %}
|
||||
<span class="badge bg-warning-subtle text-warning border border-warning-subtle">
|
||||
<i class="bi bi-clock me-1"></i>Pendiente
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger-subtle">
|
||||
Cancelada
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end pe-3">
|
||||
{% if reservation.effective_virtual_link %}
|
||||
<a href="{{ reservation.effective_virtual_link }}" target="_blank"
|
||||
class="btn btn-sm btn-outline-success py-0 px-2 me-1" title="Unirse a Clase Virtual (Zoom/Meet)">
|
||||
<i class="bi bi-camera-video"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if user.can_edit_reservation(reservation) %}
|
||||
<a href="/schedule/edit_reservation"
|
||||
class="btn btn-sm btn-outline-warning py-0 px-2 me-1" title="Modificar Reserva">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/schedule/view_reservation"
|
||||
class="btn btn-sm btn-outline-secondary py-0 px-2" title="Ver Ficha">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
{% if user.has_permission('reservations', 'read_write') and (reservation.status == 'PENDING' or reservation.status.value == 'PENDING') %}
|
||||
<a href="/schedule/confirm_reservation"
|
||||
class="btn btn-sm btn-outline-success py-0 px-2 ms-1" title="Confirmar">
|
||||
<i class="bi bi-check-lg"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. VISTA DE TARJETAS / MOSAICO -->
|
||||
<div data-view-context="reservations" data-view-container="cards" class="d-none">
|
||||
<div class="row g-3 mb-3">
|
||||
{% for reservation in reservations.items %}
|
||||
<div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6 col-sm-12">
|
||||
<div class="card border shadow-sm h-100 reservation-card">
|
||||
<div class="card-body p-3 d-flex flex-column justify-content-between">
|
||||
<div>
|
||||
<!-- Header de tarjeta -->
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<span class="badge bg-primary text-white font-monospace mb-1">
|
||||
<i class="bi bi-calendar-event me-1"></i>{{ reservation.start_time }}
|
||||
</span>
|
||||
<div class="small fw-bold text-muted font-monospace">
|
||||
<i class="bi bi-clock me-1"></i>{{ reservation.start_time }} - {{ reservation.end_time }} hs
|
||||
</div>
|
||||
</div>
|
||||
{% if reservation.status == 'CONFIRMED' or reservation.status.value == 'CONFIRMED' %}
|
||||
<span class="badge rounded-pill bg-success-subtle text-success border border-success-subtle">Confirmada</span>
|
||||
{% elif reservation.status == 'PENDING' or reservation.status.value == 'PENDING' %}
|
||||
<span class="badge rounded-pill bg-warning-subtle text-warning border border-warning-subtle">Pendiente</span>
|
||||
{% else %}
|
||||
<span class="badge rounded-pill bg-danger-subtle text-danger border border-danger-subtle">Cancelada</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Asignatura y código -->
|
||||
<h6 class="card-title fw-bold text-primary mb-1 text-truncate" title="{{ reservation.subject_name }}">
|
||||
{{ reservation.subject_name }}
|
||||
</h6>
|
||||
<div class="d-flex flex-wrap gap-1 mb-2">
|
||||
<span class="badge bg-secondary-subtle text-secondary font-monospace" style="font-size: 0.7rem;">
|
||||
{{ reservation.subject_code }}
|
||||
</span>
|
||||
<span class="badge bg-info-subtle text-info border" style="font-size: 0.7rem;">
|
||||
{{ reservation.shift or 'Tarde' }}
|
||||
</span>
|
||||
{% if reservation.commission %}
|
||||
<span class="badge bg-body-tertiary text-body border" style="font-size: 0.7rem;">
|
||||
{{ reservation.commission.name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Ubicación / Aula -->
|
||||
<div class="p-2 rounded bg-body-tertiary border mb-2 small">
|
||||
<div class="d-flex align-items-center justify-content-between mb-1">
|
||||
<span class="text-muted"><i class="bi bi-door-open text-primary me-1"></i>Espacio:</span>
|
||||
{% if reservation.classroom %}
|
||||
<span class="fw-bold font-monospace text-body">{{ reservation.classroom.code }}</span>
|
||||
{% else %}
|
||||
<span class="text-muted">Sin asignar</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="d-flex align-items-center justify-content-between small text-muted">
|
||||
<span>Sede: {{ reservation.classroom.building_name if reservation.classroom else '-' }}</span>
|
||||
<span>{{ reservation.classroom.floor_display if reservation.classroom else '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Docente y Asistentes -->
|
||||
<div class="small text-muted d-flex justify-content-between align-items-center mb-2">
|
||||
<span class="text-truncate me-1" title="{{ reservation.user.name if reservation.user else 'No asignado' }}">
|
||||
<i class="bi bi-person me-1"></i>{{ reservation.user.name if reservation.user else 'Sin docente' }}
|
||||
</span>
|
||||
<span>
|
||||
<i class="bi bi-people me-1"></i>{{ reservation.expected_attendees }} alumnos
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Acciones -->
|
||||
<div class="d-flex justify-content-end gap-1 pt-2 border-top">
|
||||
{% if reservation.effective_virtual_link %}
|
||||
<a href="{{ reservation.effective_virtual_link }}" target="_blank"
|
||||
class="btn btn-sm btn-outline-success py-1 px-2" title="Clase Virtual">
|
||||
<i class="bi bi-camera-video"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/schedule/view_reservation" class="btn btn-sm btn-outline-secondary py-1 px-2" title="Ver Ficha">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
{% if user.can_edit_reservation(reservation) %}
|
||||
<a href="/schedule/edit_reservation" class="btn btn-sm btn-outline-warning py-1 px-2" title="Modificar">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if user.has_permission('reservations', 'read_write') and (reservation.status == 'PENDING' or reservation.status.value == 'PENDING') %}
|
||||
<a href="/schedule/confirm_reservation" class="btn btn-sm btn-outline-success py-1 px-2" title="Confirmar">
|
||||
<i class="bi bi-check-lg"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paginación Compartida (visible en ambas vistas) -->
|
||||
{% if reservations.pages > 1 %}
|
||||
<div class="card border-0 shadow-sm py-2 px-3 d-flex flex-row justify-content-between align-items-center mb-3">
|
||||
<small class="text-muted">Página {{ reservations.page }} de {{ reservations.pages }} ({{ reservations.total }} reservas)</small>
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm mb-0">
|
||||
{% if reservations.has_prev %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="/schedule/list_reservations">
|
||||
<i class="bi bi-chevron-left"></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% for p in reservations.iter_pages(left_edge=2, left_current=2, right_current=2, right_edge=2) %}
|
||||
{% if p %}
|
||||
{% if p == reservations.page %}
|
||||
<li class="page-item active"><span class="page-link">{{ p }}</span></li>
|
||||
{% else %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="/schedule/list_reservations">{{ p }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<li class="page-item disabled"><span class="page-link">…</span></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% if reservations.has_next %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="/schedule/list_reservations">
|
||||
<i class="bi bi-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center py-5">
|
||||
<i class="bi bi-calendar-x text-muted fs-1 d-block mb-3"></i>
|
||||
<h5 class="fw-bold">No se encontraron reservas</h5>
|
||||
<p class="text-muted small mb-3">No hay registros que coincidan con los criterios de búsqueda o filtros seleccionados.</p>
|
||||
<a href="/schedule/list_reservations" class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-arrow-counterclockwise me-1"></i>Restablecer Todos los Filtros
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,383 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Cartelera de Hoy - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<!-- Header -->
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-md-7">
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-calendar-day text-info me-2"></i>Cartelera del Día
|
||||
<small class="text-muted ms-2 fs-6">{{ format_date(today, format='full')|capitalize }}</small>
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">Cronograma de clases y asignación de aulas activas para el día de hoy</p>
|
||||
</div>
|
||||
<div class="col-md-5 text-md-end mt-3 mt-md-0">
|
||||
{% if user.has_permission('reservations', 'read_write') %}
|
||||
<a href="/schedule/add_reservation" class="btn btn-success me-2">
|
||||
<i class="bi bi-plus-circle me-1"></i>Nueva Reserva
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/schedule/calendar_view" class="btn btn-outline-primary me-2">
|
||||
<i class="bi bi-calendar3 me-1"></i>Ver Calendario
|
||||
</a>
|
||||
<a href="/schedule/list_reservations" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-list me-1"></i>Todas las Reservas
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats Cards with Shortcuts -->
|
||||
<div class="row mb-4 g-3">
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-3 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-muted small fw-semibold text-uppercase">Total de Reservas</span>
|
||||
<h2 class="mb-0 fw-bold mt-1 text-info">{{ stats.total_reservations }}</h2>
|
||||
</div>
|
||||
<div class="bg-info bg-opacity-10 rounded-circle p-3 text-info">
|
||||
<i class="bi bi-calendar3 fs-3"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-3 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-muted small fw-semibold text-uppercase">Confirmadas</span>
|
||||
<h2 class="mb-0 fw-bold mt-1 text-success">{{ stats.confirmed }}</h2>
|
||||
</div>
|
||||
<div class="bg-success bg-opacity-10 rounded-circle p-3 text-success">
|
||||
<i class="bi bi-check-circle fs-3"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-3 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-muted small fw-semibold text-uppercase">Pendientes</span>
|
||||
<h2 class="mb-0 fw-bold mt-1 text-warning">{{ stats.pending }}</h2>
|
||||
</div>
|
||||
<div class="bg-warning bg-opacity-10 rounded-circle p-3 text-warning">
|
||||
<i class="bi bi-clock fs-3"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-3 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<span class="text-muted small fw-semibold text-uppercase">Aulas Ocupadas</span>
|
||||
<h2 class="mb-0 fw-bold mt-1 text-primary">{{ stats.occupied_classrooms }}/{{ stats.total_classrooms }}</h2>
|
||||
</div>
|
||||
<div class="bg-primary bg-opacity-10 rounded-circle p-3 text-primary">
|
||||
<i class="bi bi-door-open fs-3"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Toolbar (Piso, Turno y Ocultar Virtuales) -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body p-3">
|
||||
<form method="GET" action="/schedule/today_schedule" class="row g-2 align-items-center">
|
||||
<!-- Filter by Floor -->
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<label for="floorSelect" class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-layers text-secondary me-1"></i>Piso / Planta
|
||||
</label>
|
||||
<select name="floor" id="floorSelect" class="form-select form-select-sm">
|
||||
<option value="">Todos los pisos</option>
|
||||
{% for f in available_floors %}
|
||||
<option value="{{ f }}" {% if floor_filter == f|string %}selected{% endif %}>
|
||||
{% if f == 0 %}Planta Baja (Piso 0){% else %}Piso {{ f }}{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filter by Turno -->
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<label for="shiftSelect" class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-brightness-high text-warning me-1"></i>Turno
|
||||
</label>
|
||||
<select name="shift" id="shiftSelect" class="form-select form-select-sm">
|
||||
<option value="">Todos los turnos</option>
|
||||
<option value="Mañana" {% if shift_filter == 'Mañana' %}selected{% endif %}>Turno Mañana</option>
|
||||
<option value="Tarde" {% if shift_filter == 'Tarde' %}selected{% endif %}>Turno Tarde / Vespertino</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Hide Virtual Classrooms Toggle -->
|
||||
<div class="col-lg-4 col-md-4 pt-md-3">
|
||||
<div class="form-check form-switch pt-1">
|
||||
<input class="form-check-input" type="checkbox" role="switch" name="hide_virtual" value="1" id="hideVirtualToday" {% if hide_virtual %}checked{% endif %} onchange="this.form.submit()">
|
||||
<label class="form-check-label fw-semibold small text-dark" for="hideVirtualToday">
|
||||
<i class="bi bi-laptop me-1 text-primary"></i>Ocultar Aulas Virtuales
|
||||
<span class="badge bg-secondary-subtle text-secondary border ms-1" style="font-size: 0.72rem;">Capacidad ilimitada</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="col-lg-2 col-md-12 pt-md-3 text-lg-end d-flex gap-2">
|
||||
<button type="submit" class="btn btn-primary btn-sm flex-fill">
|
||||
<i class="bi bi-funnel me-1"></i>Filtrar
|
||||
</button>
|
||||
<a href="/schedule/today_schedule" class="btn btn-outline-secondary btn-sm" title="Limpiar Filtros">
|
||||
<i class="bi bi-arrow-counterclockwise"></i>
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today's Schedule -->
|
||||
{% if time_blocks %}
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header border-0 py-3 bg-body-tertiary">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-clock-history text-info me-2"></i>Vista Cronológica por Horario
|
||||
</h5>
|
||||
<div class="d-flex gap-2">
|
||||
<button class="btn btn-sm btn-outline-primary" id="refresh-btn">
|
||||
<i class="bi bi-arrow-clockwise me-1"></i>Actualizar
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-secondary" id="toggle-view-btn">
|
||||
<i class="bi bi-grid me-1"></i>Vista en Tabla
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<!-- Timeline View -->
|
||||
<div id="timeline-view">
|
||||
{% for hour in range(7, 22) %}
|
||||
<div class="row border-bottom py-3 align-items-start {% if time_blocks[hour] %}bg-light-subtle{% endif %}">
|
||||
<div class="col-md-2 col-3">
|
||||
<div class="text-center p-2 rounded bg-body-tertiary border">
|
||||
<strong class="h5 text-primary mb-0 font-monospace">{% if hour < 10 %}0{% endif %}{{ hour }}:00</strong>
|
||||
<div class="small text-muted font-monospace">{{ hour+1 }}:00 hs</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-10 col-9">
|
||||
{% if time_blocks[hour] %}
|
||||
<div class="row g-2">
|
||||
{% for item in time_blocks[hour] %}
|
||||
<div class="col-md-6">
|
||||
<div class="card border-0 shadow-sm h-100 border-start border-4 border-primary">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<h6 class="card-title fw-bold mb-1 text-primary">
|
||||
{{ item.reservation.subject_name }}
|
||||
</h6>
|
||||
<span class="badge bg-secondary-subtle text-secondary font-monospace border me-1">
|
||||
{{ item.reservation.subject_code }}
|
||||
</span>
|
||||
<span class="badge bg-info-subtle text-info border">
|
||||
{{ item.reservation.shift or 'Tarde' }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="badge bg-{% if item.reservation.status == 'CONFIRMED' or item.reservation.status.value == 'CONFIRMED' %}success-subtle text-success border border-success-subtle{% else %}warning-subtle text-warning border border-warning-subtle{% endif %}">
|
||||
{% if item.reservation.status == 'CONFIRMED' or item.reservation.status.value == 'CONFIRMED' %}
|
||||
Confirmada
|
||||
{% else %}
|
||||
Pendiente
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="small text-muted mb-2">
|
||||
<span class="fw-semibold text-dark me-2">
|
||||
<i class="bi bi-door-open me-1 text-success"></i>{{ item.classroom.code }}
|
||||
</span>
|
||||
<span class="me-2">
|
||||
<i class="bi bi-layers me-1"></i>{% if item.classroom.floor == 0 %}PB{% else %}Piso {{ item.classroom.floor }}{% endif %}
|
||||
</span>
|
||||
<span>
|
||||
<i class="bi bi-clock me-1 text-warning"></i>{{ item.reservation.start_time }} - {{ item.reservation.end_time }} hs
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center pt-2 border-top">
|
||||
<span class="small text-muted">
|
||||
<i class="bi bi-people me-1"></i>{{ item.reservation.expected_attendees }} estudiantes
|
||||
</span>
|
||||
<div class="d-flex gap-1">
|
||||
{% if item.reservation.effective_virtual_link %}
|
||||
<a href="{{ item.reservation.effective_virtual_link }}" target="_blank" class="btn btn-sm btn-outline-success py-0 px-2 d-inline-flex align-items-center" title="Unirse a Videollamada (Zoom / Meet)">
|
||||
<i class="bi bi-camera-video me-1"></i>Zoom/Meet
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if user.can_edit_reservation(item.reservation) %}
|
||||
<a href="/schedule/edit_reservation" class="btn btn-sm btn-outline-warning py-0 px-2" title="Modificar Reserva">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/schedule/view_reservation" class="btn btn-sm btn-outline-secondary py-0 px-2" title="Ver Ficha Detallada">
|
||||
<i class="bi bi-eye me-1"></i>Detalles
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-muted py-2 small ps-2">
|
||||
<i class="bi bi-dash-circle me-1"></i>Sin clases programadas en este horario
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Table / Grid View (hidden by default) -->
|
||||
<div id="grid-view" style="display: none;">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="table-light small text-uppercase">
|
||||
<tr>
|
||||
<th class="ps-3">Horario</th>
|
||||
<th>Aula / Piso</th>
|
||||
<th>Asignatura / Código</th>
|
||||
<th>Turno</th>
|
||||
<th>Asistentes</th>
|
||||
<th>Estado</th>
|
||||
<th class="text-end pe-3">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for reservation in reservations %}
|
||||
<tr>
|
||||
<td class="ps-3 font-monospace fw-bold">
|
||||
{{ reservation.start_time }} - {{ reservation.end_time }} hs
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-secondary-subtle text-secondary font-monospace border">
|
||||
{{ reservation.classroom.code if reservation.classroom else 'Sin Aula' }}
|
||||
</span>
|
||||
<small class="text-muted d-block">
|
||||
{% if reservation.classroom and reservation.classroom.floor == 0 %}Planta Baja{% elif reservation.classroom %}Piso {{ reservation.classroom.floor }}{% endif %}
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold text-primary">{{ reservation.subject_name }}</div>
|
||||
<small class="text-muted font-monospace">{{ reservation.subject_code }}</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-info-subtle text-info border">
|
||||
{{ reservation.shift or 'Tarde' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="small">{{ reservation.expected_attendees }} estudiantes</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if reservation.status == 'CONFIRMED' or reservation.status.value == 'CONFIRMED' %}
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle">
|
||||
<i class="bi bi-check-circle me-1"></i>Confirmada
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-warning-subtle text-warning border border-warning-subtle">
|
||||
<i class="bi bi-clock me-1"></i>Pendiente
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end pe-3">
|
||||
{% if reservation.effective_virtual_link %}
|
||||
<a href="{{ reservation.effective_virtual_link }}" target="_blank"
|
||||
class="btn btn-sm btn-outline-success py-0 px-2 me-1" title="Unirse a Clase Virtual (Zoom/Meet)">
|
||||
<i class="bi bi-camera-video"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% if user.can_edit_reservation(reservation) %}
|
||||
<a href="/schedule/edit_reservation"
|
||||
class="btn btn-sm btn-outline-warning py-0 px-2 me-1" title="Modificar Reserva">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/schedule/view_reservation"
|
||||
class="btn btn-sm btn-outline-secondary py-0 px-2" title="Ver Ficha">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-calendar-x text-muted" style="font-size: 4rem;"></i>
|
||||
<h4 class="mt-3 text-muted">No hay reservas programadas para hoy</h4>
|
||||
<p class="text-muted">
|
||||
No se encontraron clases para los filtros seleccionados.
|
||||
</p>
|
||||
<div class="mt-3">
|
||||
{% if user.has_permission('reservations', 'read_write') %}
|
||||
<a href="/schedule/add_reservation" class="btn btn-success">
|
||||
<i class="bi bi-plus-circle me-1"></i>Crear Primera Reserva
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/schedule/calendar_view" class="btn btn-outline-primary ms-2">
|
||||
<i class="bi bi-calendar-week me-1"></i>Ver Calendario Semanal
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var toggleBtn = document.getElementById('toggle-view-btn');
|
||||
var timelineView = document.getElementById('timeline-view');
|
||||
var gridView = document.getElementById('grid-view');
|
||||
|
||||
if (toggleBtn && timelineView && gridView) {
|
||||
toggleBtn.addEventListener('click', function() {
|
||||
if (timelineView.style.display === 'none') {
|
||||
timelineView.style.display = 'block';
|
||||
gridView.style.display = 'none';
|
||||
toggleBtn.innerHTML = '<i class="bi bi-grid me-1"></i>Vista en Tabla';
|
||||
} else {
|
||||
timelineView.style.display = 'none';
|
||||
gridView.style.display = 'block';
|
||||
toggleBtn.innerHTML = '<i class="bi bi-clock-history me-1"></i>Vista Cronológica';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var refreshBtn = document.getElementById('refresh-btn');
|
||||
if (refreshBtn) {
|
||||
refreshBtn.addEventListener('click', function() {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,290 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Reservation Details - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="h3">
|
||||
<i class="bi bi-calendar-check text-info"></i> Reservation Details
|
||||
</h1>
|
||||
<div class="d-flex gap-2">
|
||||
{% if user.can_edit_reservation(reservation) %}
|
||||
<a href="/schedule/edit_reservation" class="btn btn-warning">
|
||||
<i class="bi bi-pencil-square me-1"></i>Modificar Reserva
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="/schedule/list_reservations" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left me-1"></i>Back to List
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Main Reservation Info -->
|
||||
<div class="col-lg-8 mb-4">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header border-0 py-3">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-info-circle text-primary"></i> Reservation Information
|
||||
</h5>
|
||||
<span class="badge bg-{% if reservation.status.value == 'CONFIRMED' %}success{% elif reservation.status.value == 'PENDING' %}warning{% else %}secondary{% endif %}">
|
||||
{{ reservation.status.value }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="text-muted small">Reservation ID</label>
|
||||
<p class="mb-0"><strong>#{{ reservation.id }}</strong></p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="text-muted small">Created by</label>
|
||||
<p class="mb-0">
|
||||
<i class="bi bi-person"></i>
|
||||
{% if reservation.user %}
|
||||
{{ reservation.user.first_name }} {{ reservation.user.last_name }}
|
||||
{% else %}
|
||||
Unknown
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="text-muted small">Date & Time</label>
|
||||
<p class="mb-0">
|
||||
<i class="bi bi-clock"></i>
|
||||
{{ format_date(reservation.start_time, format='long')|capitalize }}<br>
|
||||
{{ reservation.start_time }} - {{ reservation.end_time }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label class="text-muted small">Duration</label>
|
||||
<p class="mb-0">
|
||||
<i class="bi bi-hourglass"></i>
|
||||
{% set duration = reservation.duration or 120 %}
|
||||
{{ (duration / 60) | round(1) }} hours
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if reservation.purpose %}
|
||||
<div class="mb-3">
|
||||
<label class="text-muted small">Purpose</label>
|
||||
<p class="mb-0">{{ reservation.purpose }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if reservation.notes %}
|
||||
<div class="mb-3">
|
||||
<label class="text-muted small">Notes</label>
|
||||
<p class="mb-0">{{ reservation.notes }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Classroom Details -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header border-0 py-3 bg-body-tertiary">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-geo-alt text-primary me-2"></i>Ubicación y Espacio Asignado
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
{% if reservation.classroom %}
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 rounded bg-body-tertiary border">
|
||||
<small class="text-muted d-block mb-1">🏢 Edificio / Sede</small>
|
||||
<h6 class="mb-0 fw-bold text-primary">{{ reservation.classroom.building_name }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 rounded bg-body-tertiary border">
|
||||
<small class="text-muted d-block mb-1">🪜 Piso / Nivel</small>
|
||||
<h6 class="mb-0 fw-bold text-secondary">
|
||||
{% if reservation.classroom.is_virtual %}
|
||||
<span class="badge bg-primary-subtle text-primary border">Campus Virtual</span>
|
||||
{% else %}
|
||||
{{ reservation.classroom.floor_display }}
|
||||
{% endif %}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="p-3 rounded bg-body-tertiary border">
|
||||
<small class="text-muted d-block mb-1">🚪 Aula</small>
|
||||
<h6 class="mb-0 fw-bold text-success">{{ reservation.classroom.code }}</h6>
|
||||
<small class="text-muted">Capacidad: <strong>{{ reservation.classroom.capacity_display }}</strong></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if reservation.classroom.description %}
|
||||
<div class="mt-2">
|
||||
<label class="text-muted small">Descripción del Aula</label>
|
||||
<p class="mb-0 small">{{ reservation.classroom.description }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Banner de Aula Virtual (Zoom, Meet, Teams) -->
|
||||
{% if reservation.effective_virtual_link or (reservation.classroom and reservation.classroom.is_virtual) %}
|
||||
<div class="mt-3 p-3 rounded bg-primary bg-opacity-10 border border-primary border-opacity-25 d-flex flex-column flex-sm-row justify-content-between align-items-sm-center gap-3">
|
||||
<div>
|
||||
<div class="fw-bold text-primary mb-1">
|
||||
<i class="bi bi-camera-video me-1"></i>Aula Virtual / Videoconferencia
|
||||
</div>
|
||||
{% if reservation.effective_virtual_link %}
|
||||
<small class="text-secondary text-break font-monospace d-block">{{ reservation.effective_virtual_link }}</small>
|
||||
{% else %}
|
||||
<small class="text-muted fst-italic">Modalidad remota sin enlace específico registrado</small>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if reservation.effective_virtual_link %}
|
||||
<a href="{{ reservation.effective_virtual_link }}" target="_blank" class="btn btn-success btn-sm px-3 text-nowrap">
|
||||
<i class="bi bi-box-arrow-up-right me-1"></i>Unirse a Clase (Zoom / Meet)
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p class="text-muted mb-0">Classroom information not available</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- Subject & Commission -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header border-0 py-3">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-book text-warning"></i> Subject & Commission
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if reservation.commission %}
|
||||
<div class="mb-3">
|
||||
<label class="text-muted small">Commission Code</label>
|
||||
<p class="mb-0"><strong>{{ reservation.commission.get_full_code() }}</strong></p>
|
||||
</div>
|
||||
{% if reservation.commission.subject %}
|
||||
<div class="mb-3">
|
||||
<label class="text-muted small">Subject</label>
|
||||
<p class="mb-0">{{ reservation.commission.subject.name }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p class="text-muted mb-0">No commission assigned</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attendees -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header border-0 py-3">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-people text-success"></i> Attendance
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="text-center">
|
||||
<h3 class="mb-1">{{ reservation.expected_attendees }}</h3>
|
||||
<p class="text-muted small">Expected Attendees</p>
|
||||
{% if reservation.classroom %}
|
||||
{% if reservation.classroom.capacity and reservation.classroom.capacity > 0 %}
|
||||
<div class="progress mt-3" style="height: 8px;">
|
||||
{% set percentage = (reservation.expected_attendees / reservation.classroom.capacity * 100) %}
|
||||
<div class="progress-bar bg-{% if percentage > 90 %}danger{% elif percentage > 75 %}warning{% else %}success{% endif %}"
|
||||
role="progressbar"
|
||||
style="{{ 'width: ' ~ ([percentage|round(1), 100]|min|string) ~ '%;' }}"></div>
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
{{ reservation.expected_attendees }} / {{ reservation.classroom.capacity }} capacidad
|
||||
</small>
|
||||
{% else %}
|
||||
<div class="mt-2">
|
||||
<span class="badge bg-primary-subtle text-primary border">
|
||||
{% if reservation.classroom.is_virtual %}🌐 Campus Virtual (Sin límite físico){% else %}Capacidad no definida{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header border-0 py-3">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-gear text-secondary"></i> Actions
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-grid gap-2">
|
||||
{% if user.can_edit_reservation(reservation) %}
|
||||
<a href="/schedule/edit_reservation" class="btn btn-warning">
|
||||
<i class="bi bi-pencil-square me-1"></i>Modificar Reserva
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if reservation.status.value == 'PENDING' %}
|
||||
<form method="POST" action="/schedule/confirm_reservation">
|
||||
<button type="submit" class="btn btn-success" onclick="return confirm('Confirm this reservation?')">
|
||||
<i class="bi bi-check-circle"></i> Confirm Reservation
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
{% if reservation.can_be_cancelled() %}
|
||||
<form method="POST" action="/schedule/cancel_reservation">
|
||||
<button type="submit" class="btn btn-danger" onclick="return confirm('Cancel this reservation?')">
|
||||
<i class="bi bi-x-circle"></i> Cancel Reservation
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<a href="/schedule/list_reservations" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-list"></i> View All Reservations
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timestamps -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="row text-muted small">
|
||||
<div class="col-md-4">
|
||||
<i class="bi bi-clock-history"></i>
|
||||
Created: {{ reservation.created_at }}
|
||||
</div>
|
||||
{% if reservation.updated_at %}
|
||||
<div class="col-md-4">
|
||||
<i class="bi bi-arrow-repeat"></i>
|
||||
Updated: {{ reservation.updated_at }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-md-4">
|
||||
<i class="bi bi-info-square"></i>
|
||||
Reservation ID: #{{ reservation.id }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user