372 lines
24 KiB
HTML
372 lines
24 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{% trans %}Cartelera de Hoy{% endtrans %} - 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>{% trans %}Cartelera del Día{% endtrans %}
|
|
<small class="text-muted ms-2 fs-6">{{ format_date(today, format='full')|capitalize }}</small>
|
|
</h1>
|
|
<p class="text-muted small mb-0">{% trans %}Cronograma de clases y asignación de aulas activas para el día de hoy{% endtrans %}</p>
|
|
</div>
|
|
<div class="col-md-5 text-md-end mt-3 mt-md-0">
|
|
{% if current_user.has_permission('reservations', 'read_write') %}
|
|
<a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-success me-2">
|
|
<i class="bi bi-plus-circle me-1"></i>{% trans %}Nueva Reserva{% endtrans %}
|
|
</a>
|
|
{% endif %}
|
|
<a href="{{ url_for('schedule.calendar_view') }}" class="btn btn-outline-primary me-2">
|
|
<i class="bi bi-calendar3 me-1"></i>{% trans %}Ver Calendario{% endtrans %}
|
|
</a>
|
|
<a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-secondary">
|
|
<i class="bi bi-list me-1"></i>{% trans %}Todas las Reservas{% endtrans %}
|
|
</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">{% trans %}Total de Reservas{% endtrans %}</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">{% trans %}Confirmadas{% endtrans %}</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">{% trans %}Pendientes{% endtrans %}</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">{% trans %}Aulas Ocupadas{% endtrans %}</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="{{ url_for('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>{% trans %}Piso / Planta{% endtrans %}
|
|
</label>
|
|
<select name="floor" id="floorSelect" class="form-select form-select-sm">
|
|
<option value="">{% trans %}Todos los pisos{% endtrans %}</option>
|
|
{% for f in available_floors %}
|
|
<option value="{{ f }}" {% if floor_filter == f|string %}selected{% endif %}>
|
|
{% if f == 0 %}{% trans %}Planta Baja (Piso 0){% endtrans %}{% else %}{% trans %}Piso{% endtrans %} {{ 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>{% trans %}Turno{% endtrans %}
|
|
</label>
|
|
<select name="shift" id="shiftSelect" class="form-select form-select-sm">
|
|
<option value="">{% trans %}Todos los turnos{% endtrans %}</option>
|
|
<option value="Mañana" {% if shift_filter == 'Mañana' %}selected{% endif %}>{% trans %}Turno Mañana{% endtrans %}</option>
|
|
<option value="Tarde" {% if shift_filter == 'Tarde' %}selected{% endif %}>{% trans %}Turno Tarde / Vespertino{% endtrans %}</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>{% trans %}Ocultar Aulas Virtuales{% endtrans %}
|
|
<span class="badge bg-secondary-subtle text-secondary border ms-1" style="font-size: 0.72rem;">{% trans %}Capacidad ilimitada{% endtrans %}</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>{% trans %}Filtrar{% endtrans %}
|
|
</button>
|
|
<a href="{{ url_for('schedule.today_schedule') }}" class="btn btn-outline-secondary btn-sm" title="{% trans %}Limpiar Filtros{% endtrans %}">
|
|
<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>{% trans %}Vista Cronológica por Horario{% endtrans %}
|
|
</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>{% trans %}Actualizar{% endtrans %}
|
|
</button>
|
|
<button class="btn btn-sm btn-outline-secondary" id="toggle-view-btn">
|
|
<i class="bi bi-grid me-1"></i>{% trans %}Vista en Tabla{% endtrans %}
|
|
</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">{{ "%02d:00"|format(hour) }}</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' %}
|
|
{% trans %}Confirmada{% endtrans %}
|
|
{% else %}
|
|
{% trans %}Pendiente{% endtrans %}
|
|
{% 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.strftime('%H:%M') }} - {{ item.reservation.end_time.strftime('%H:%M') }} 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 }} {% trans %}estudiantes{% endtrans %}
|
|
</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="{% trans %}Unirse a Videollamada (Zoom / Meet){% endtrans %}">
|
|
<i class="bi bi-camera-video me-1"></i>Zoom/Meet
|
|
</a>
|
|
{% endif %}
|
|
<a href="{{ url_for('schedule.view_reservation', id=item.reservation.id) }}" class="btn btn-sm btn-outline-secondary py-0 px-2" title="{% trans %}Ver Ficha Detallada{% endtrans %}">
|
|
<i class="bi bi-eye me-1"></i>{% trans %}Detalles{% endtrans %}
|
|
</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>{% trans %}Sin clases programadas en este horario{% endtrans %}
|
|
</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">{% trans %}Horario{% endtrans %}</th>
|
|
<th>{% trans %}Aula / Piso{% endtrans %}</th>
|
|
<th>{% trans %}Asignatura / Código{% endtrans %}</th>
|
|
<th>{% trans %}Turno{% endtrans %}</th>
|
|
<th>{% trans %}Asistentes{% endtrans %}</th>
|
|
<th>{% trans %}Estado{% endtrans %}</th>
|
|
<th class="text-end pe-3">{% trans %}Acciones{% endtrans %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for reservation in reservations %}
|
|
<tr>
|
|
<td class="ps-3 font-monospace fw-bold">
|
|
{{ reservation.start_time.strftime('%H:%M') }} - {{ reservation.end_time.strftime('%H:%M') }} 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>{% trans %}Confirmada{% endtrans %}
|
|
</span>
|
|
{% else %}
|
|
<span class="badge bg-warning-subtle text-warning border border-warning-subtle">
|
|
<i class="bi bi-clock me-1"></i>{% trans %}Pendiente{% endtrans %}
|
|
</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="{% trans %}Unirse a Clase Virtual (Zoom/Meet){% endtrans %}">
|
|
<i class="bi bi-camera-video"></i>
|
|
</a>
|
|
{% endif %}
|
|
<a href="{{ url_for('schedule.view_reservation', id=reservation.id) }}"
|
|
class="btn btn-sm btn-outline-secondary py-0 px-2" title="{% trans %}Ver Ficha{% endtrans %}">
|
|
<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">{% trans %}No hay reservas programadas para hoy{% endtrans %}</h4>
|
|
<p class="text-muted">
|
|
{% trans %}No se encontraron clases para los filtros seleccionados.{% endtrans %}
|
|
</p>
|
|
<div class="mt-3">
|
|
{% if current_user.has_permission('reservations', 'read_write') %}
|
|
<a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-success">
|
|
<i class="bi bi-plus-circle me-1"></i>{% trans %}Crear Primera Reserva{% endtrans %}
|
|
</a>
|
|
{% endif %}
|
|
<a href="{{ url_for('schedule.calendar_view') }}" class="btn btn-outline-primary ms-2">
|
|
<i class="bi bi-calendar-week me-1"></i>{% trans %}Ver Calendario Semanal{% endtrans %}
|
|
</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>{% trans %}Vista en Tabla{% endtrans %}';
|
|
} else {
|
|
timelineView.style.display = 'none';
|
|
gridView.style.display = 'block';
|
|
toggleBtn.innerHTML = '<i class="bi bi-clock-history me-1"></i>{% trans %}Vista Cronológica{% endtrans %}';
|
|
}
|
|
});
|
|
}
|
|
|
|
var refreshBtn = document.getElementById('refresh-btn');
|
|
if (refreshBtn) {
|
|
refreshBtn.addEventListener('click', function() {
|
|
location.reload();
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |