feat: gestion RBAC granular, importacion sheets, filtrado de aulas virtuales y pisos, capacidad infinita y traduccion
This commit is contained in:
Carlos Tello
@@ -1,6 +1,6 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Add Reservation - Edu-Space Admin{% endblock %}
|
||||
{% block title %}{% trans %}New Reservation{% endtrans %} - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
@@ -8,10 +8,10 @@
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="h3">
|
||||
<i class="bi bi-calendar-plus text-success"></i> New Reservation
|
||||
<i class="bi bi-calendar-plus text-success"></i> {% trans %}New Reservation{% endtrans %}
|
||||
</h1>
|
||||
<a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Back to Reservations
|
||||
<a href="{{ url_for('schedule.today_schedule') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-arrow-left"></i> {% trans %}Back to Reservations{% endtrans %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -20,9 +20,9 @@
|
||||
<div class="row">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-0">
|
||||
<div class="card-header border-0 py-3">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-calendar3 text-success"></i> Reservation Details
|
||||
<i class="bi bi-calendar3 text-success"></i> {% trans %}Reservation Details{% endtrans %}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@@ -38,7 +38,7 @@
|
||||
{{ form.classroom_id.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<small class="text-muted">Select a classroom for your reservation</small>
|
||||
<small class="text-muted">{% trans %}Select a classroom for your reservation{% endtrans %}</small>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
@@ -49,7 +49,7 @@
|
||||
{{ form.commission_id.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<small class="text-muted">Select the subject/commission</small>
|
||||
<small class="text-muted">{% trans %}Select the subject/commission{% endtrans %}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
{{ form.start_time.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<small class="text-muted">When will the class start?</small>
|
||||
<small class="text-muted">{% trans %}When will the class start?{% endtrans %}</small>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
@@ -73,14 +73,14 @@
|
||||
{{ form.end_time.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<small class="text-muted">When will the class end?</small>
|
||||
<small class="text-muted">{% trans %}When will the class end?{% endtrans %}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-8 mb-3">
|
||||
{{ form.purpose.label(class="form-label") }}
|
||||
{{ form.purpose(class="form-control", placeholder="Regular class, exam, study session, etc.") }}
|
||||
{{ form.purpose(class="form-control", placeholder=_("Regular class, exam, study session, etc.")) }}
|
||||
{% if form.purpose.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.purpose.errors[0] }}
|
||||
@@ -96,13 +96,13 @@
|
||||
{{ form.expected_attendees.errors[0] }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<small class="text-muted">Number of expected attendees</small>
|
||||
<small class="text-muted">{% trans %}Number of expected attendees{% endtrans %}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
{{ form.notes.label(class="form-label") }}
|
||||
{{ form.notes(class="form-control", rows="3", placeholder="Any additional notes or special requirements...") }}
|
||||
{{ form.notes(class="form-control", rows="3", placeholder=_("Any additional notes or special requirements...")) }}
|
||||
{% if form.notes.errors %}
|
||||
<div class="text-danger small mt-1">
|
||||
{{ form.notes.errors[0] }}
|
||||
@@ -113,27 +113,27 @@
|
||||
<!-- Summary Section -->
|
||||
<div class="alert alert-info" id="reservation-summary">
|
||||
<h6 class="alert-heading">
|
||||
<i class="bi bi-info-circle"></i> Reservation Summary
|
||||
<i class="bi bi-info-circle"></i> {% trans %}Reservation Summary{% endtrans %}
|
||||
</h6>
|
||||
<div id="summary-content">
|
||||
<p class="mb-2">
|
||||
<strong>Selected Classroom:</strong>
|
||||
<span id="summary-classroom">Not selected</span>
|
||||
<strong>{% trans %}Selected Classroom:{% endtrans %}</strong>
|
||||
<span id="summary-classroom">{% trans %}Not selected{% endtrans %}</span>
|
||||
</p>
|
||||
<p class="mb-2">
|
||||
<strong>Duration:</strong>
|
||||
<span id="summary-duration">Not calculated</span>
|
||||
<strong>{% trans %}Duration:{% endtrans %}</strong>
|
||||
<span id="summary-duration">{% trans %}Not calculated{% endtrans %}</span>
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
<strong>Commission:</strong>
|
||||
<span id="summary-commission">Not selected</span>
|
||||
<strong>{% trans %}Commission:{% endtrans %}</strong>
|
||||
<span id="summary-commission">{% trans %}Not selected{% endtrans %}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between">
|
||||
<a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-x-circle"></i> Cancel
|
||||
<a href="{{ url_for('schedule.today_schedule') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-x-circle"></i> {% trans %}Cancel{% endtrans %}
|
||||
</a>
|
||||
{{ form.submit(class="btn btn-success") }}
|
||||
</div>
|
||||
@@ -147,29 +147,29 @@
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-8 mx-auto">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-0">
|
||||
<div class="card-header border-0 py-3">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-question-circle text-info"></i> Reservation Guidelines
|
||||
<i class="bi bi-question-circle text-info"></i> {% trans %}Reservation Guidelines{% endtrans %}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-primary">📅 Booking Rules</h6>
|
||||
<h6 class="text-primary">📅 {% trans %}Booking Rules{% endtrans %}</h6>
|
||||
<ul class="small">
|
||||
<li>Reservations can be made up to 3 months in advance</li>
|
||||
<li>Cannot book in the past</li>
|
||||
<li>Maximum duration: 8 hours per reservation</li>
|
||||
<li>Cancellations must be 24 hours before start time</li>
|
||||
<li>{% trans %}Reservations can be made up to 3 months in advance{% endtrans %}</li>
|
||||
<li>{% trans %}Cannot book in the past{% endtrans %}</li>
|
||||
<li>{% trans %}Maximum duration: 8 hours per reservation{% endtrans %}</li>
|
||||
<li>{% trans %}Cancellations must be 24 hours before start time{% endtrans %}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-warning">🚨 Important Notes</h6>
|
||||
<h6 class="text-warning">🚨 {% trans %}Important Notes{% endtrans %}</h6>
|
||||
<ul class="small">
|
||||
<li>Check classroom capacity before booking</li>
|
||||
<li>Pending reservations require approval</li>
|
||||
<li>Time slots must not overlap</li>
|
||||
<li>System automatically detects conflicts</li>
|
||||
<li>{% trans %}Check classroom capacity before booking{% endtrans %}</li>
|
||||
<li>{% trans %}Pending reservations require approval{% endtrans %}</li>
|
||||
<li>{% trans %}Time slots must not overlap{% endtrans %}</li>
|
||||
<li>{% trans %}System automatically detects conflicts{% endtrans %}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -181,17 +181,55 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script type="application/json" id="classroom-data">
|
||||
{
|
||||
{% for classroom in classroom_list %}
|
||||
"{{ classroom.id }}": {
|
||||
"capacity": {{ classroom.capacity }},
|
||||
"code_display": {{ classroom.code_display|tojson }},
|
||||
"name": {{ classroom.name|tojson }}
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="application/json" id="i18n-strings">
|
||||
{
|
||||
"not_selected": "{% trans %}Not selected{% endtrans %}",
|
||||
"not_calculated": "{% trans %}Not calculated{% endtrans %}",
|
||||
"invalid_time": "{% trans %}Invalid time range{% endtrans %}",
|
||||
"hour": "{% trans %}hour{% endtrans %}",
|
||||
"hours": "{% trans %}hours{% endtrans %}",
|
||||
"minute": "{% trans %}minute{% endtrans %}",
|
||||
"minutes": "{% trans %}minutes{% endtrans %}",
|
||||
"capacity": "{% trans %}Capacity{% endtrans %}",
|
||||
"capacity_exceeded": "{% trans %}Expected attendees exceeds classroom capacity{% endtrans %}"
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Classroom data for capacity checking
|
||||
const classroomData = {};
|
||||
{% for classroom in classroom_list %}
|
||||
classroomData[{{ classroom.id }}] = {
|
||||
capacity: {{ classroom.capacity }},
|
||||
code_display: "{{ classroom.code_display }}",
|
||||
name: "{{ classroom.name }}"
|
||||
};
|
||||
{% endfor %}
|
||||
// Classroom data for capacity checking
|
||||
let classroomData = {};
|
||||
try {
|
||||
const rawData = document.getElementById('classroom-data')?.textContent;
|
||||
if (rawData) {
|
||||
classroomData = JSON.parse(rawData);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error parsing classroomData:', err);
|
||||
}
|
||||
|
||||
// I18n strings
|
||||
let i18n = {};
|
||||
try {
|
||||
const rawI18n = document.getElementById('i18n-strings')?.textContent;
|
||||
if (rawI18n) {
|
||||
i18n = JSON.parse(rawI18n);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error parsing i18n:', err);
|
||||
}
|
||||
|
||||
function updateSummary() {
|
||||
const classroomId = $('#classroom-select').val();
|
||||
@@ -199,11 +237,12 @@ $(document).ready(function() {
|
||||
const startTime = $('#start-time').val();
|
||||
const endTime = $('#end-time').val();
|
||||
|
||||
// Update classroom summary
|
||||
// Update classroom summary
|
||||
if (classroomId && classroomData[classroomId]) {
|
||||
$('#summary-classroom').text(`${classroomData[classroomId].code_display} - ${classroomData[classroomId].name} (Capacity: ${classroomData[classroomId].capacity})`);
|
||||
const capLabel = i18n.capacity || 'Capacidad';
|
||||
$('#summary-classroom').text(`${classroomData[classroomId].code_display} - ${classroomData[classroomId].name} (${capLabel}: ${classroomData[classroomId].capacity})`);
|
||||
} else {
|
||||
$('#summary-classroom').text('Not selected');
|
||||
$('#summary-classroom').text(i18n.not_selected || 'No seleccionada');
|
||||
}
|
||||
|
||||
// Update commission summary
|
||||
@@ -211,7 +250,7 @@ $(document).ready(function() {
|
||||
const commissionText = $('#commission-select option:selected').text();
|
||||
$('#summary-commission').text(commissionText);
|
||||
} else {
|
||||
$('#summary-commission').text('Not selected');
|
||||
$('#summary-commission').text(i18n.not_selected || 'No seleccionada');
|
||||
}
|
||||
|
||||
// Calculate duration
|
||||
@@ -226,19 +265,21 @@ $(document).ready(function() {
|
||||
|
||||
let durationText = '';
|
||||
if (diffHours > 0) {
|
||||
durationText += `${diffHours} hour${diffHours > 1 ? 's' : ''}`;
|
||||
const hLabel = diffHours > 1 ? (i18n.hours || 'horas') : (i18n.hour || 'hora');
|
||||
durationText += `${diffHours} ${hLabel}`;
|
||||
}
|
||||
if (diffMins > 0) {
|
||||
if (durationText) durationText += ' ';
|
||||
durationText += `${diffMins} minute${diffMins > 1 ? 's' : ''}`;
|
||||
const mLabel = diffMins > 1 ? (i18n.minutes || 'minutos') : (i18n.minute || 'minuto');
|
||||
durationText += `${diffMins} ${mLabel}`;
|
||||
}
|
||||
|
||||
$('#summary-duration').text(durationText);
|
||||
$('#summary-duration').text(durationText || '0 min');
|
||||
} else {
|
||||
$('#summary-duration').text('Invalid time range');
|
||||
$('#summary-duration').text(i18n.invalid_time || 'Rango horario inválido');
|
||||
}
|
||||
} else {
|
||||
$('#summary-duration').text('Not calculated');
|
||||
$('#summary-duration').text(i18n.not_calculated || 'No calculada');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -252,9 +293,10 @@ $(document).ready(function() {
|
||||
|
||||
if (attendees > capacity) {
|
||||
$('#expected_attendees').addClass('is-invalid');
|
||||
const msg = i18n.capacity_exceeded || 'Los asistentes esperados superan la capacidad del aula';
|
||||
$('#expected_attendees').after(`
|
||||
<div class="invalid-feedback">
|
||||
Expected attendees (${attendees}) exceeds classroom capacity (${capacity})
|
||||
${msg} (${attendees} > ${capacity})
|
||||
</div>
|
||||
`);
|
||||
} else {
|
||||
|
||||
@@ -4,93 +4,374 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid pt-5 mt-4">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<h1 class="h3 mb-0">
|
||||
<i class="bi bi-calendar3 text-primary"></i> {% trans %}Reservations Calendar{% endtrans %}
|
||||
<small class="text-muted ms-2">{% trans %}View & Manage Reservations{% endtrans %}</small>
|
||||
</h1>
|
||||
<!-- Header -->
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col-md-7">
|
||||
<h1 class="h3 mb-1">
|
||||
<i class="bi bi-calendar3 text-primary me-2"></i>{% trans %}Reservations Calendar{% endtrans %}
|
||||
</h1>
|
||||
<p class="text-muted small mb-0">{% trans %}View & Manage Reservations{% endtrans %} — {% trans %}Horarios de cursada y asignación de aulas UniCABA{% 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-primary me-2">
|
||||
<i class="bi bi-plus-circle me-1"></i>{% trans %}Add Reservation{% endtrans %}
|
||||
</a>
|
||||
{% endif %}
|
||||
<a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-list me-1"></i>{% trans %}List View{% endtrans %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-6">
|
||||
<h5 class="mb-0 h6 fw-bold">
|
||||
<i class="bi bi-calendar-week text-info me-2"></i> {% trans %}Reservations Calendar{% endtrans %}
|
||||
</h5>
|
||||
<!-- Filters Toolbar (Classroom & Subject Filters to prevent overlapping) -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body p-3">
|
||||
<div class="row g-2 align-items-center">
|
||||
<!-- Filter by Classroom -->
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<label for="filterClassroom" class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-door-open text-success me-1"></i>{% trans %}Aula{% endtrans %}
|
||||
</label>
|
||||
<select id="filterClassroom" class="form-select form-select-sm">
|
||||
<option value="">{% trans %}Todas las aulas{% endtrans %}</option>
|
||||
{% for c in classrooms %}
|
||||
<option value="{{ c.id }}">{{ c.code }} ({{ c.building }})</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filter by Subject -->
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<label for="filterSubject" class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-book text-primary me-1"></i>{% trans %}Materia{% endtrans %}
|
||||
</label>
|
||||
<select id="filterSubject" class="form-select form-select-sm">
|
||||
<option value="">{% trans %}Todas las materias{% endtrans %}</option>
|
||||
{% for s in subjects %}
|
||||
<option value="{{ s.id }}">{{ s.name }} [{{ s.code }}]</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filter by Career -->
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<label for="filterCareer" class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-mortarboard text-info me-1"></i>{% trans %}Carrera{% endtrans %}
|
||||
</label>
|
||||
<select id="filterCareer" class="form-select form-select-sm">
|
||||
<option value="">{% trans %}Todas las carreras{% endtrans %}</option>
|
||||
{% for cr in careers %}
|
||||
<option value="{{ cr.id }}">{{ cr.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Filter by Turno (Mañana / Tarde) -->
|
||||
<div class="col-lg-3 col-md-6">
|
||||
<label for="filterShift" 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 id="filterShift" class="form-select form-select-sm">
|
||||
<option value="">{% trans %}Todos los turnos{% endtrans %}</option>
|
||||
<option value="Mañana">{% trans %}Turno Mañana{% endtrans %}</option>
|
||||
<option value="Tarde">{% trans %}Turno Tarde / Vespertino{% endtrans %}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 text-end">
|
||||
<a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle"></i> {% trans %}Add Reservation{% endtrans %}
|
||||
</a>
|
||||
<a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-list"></i> {% trans %}List View{% endtrans %}
|
||||
</a>
|
||||
|
||||
<!-- Second row of filters: Floor & Hide Virtual -->
|
||||
<div class="row g-2 align-items-center mt-2 pt-2 border-top">
|
||||
<!-- Filter by Floor -->
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<label for="filterFloor" class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-layers text-secondary me-1"></i>{% trans %}Filtrar por Piso{% endtrans %}
|
||||
</label>
|
||||
<select id="filterFloor" class="form-select form-select-sm">
|
||||
<option value="">{% trans %}Todos los pisos{% endtrans %}</option>
|
||||
{% for f in available_floors %}
|
||||
<option value="{{ f }}">{% if f == 0 %}{% trans %}Planta Baja (Piso 0){% endtrans %}{% else %}{% trans %}Piso{% endtrans %} {{ f }}{% endif %}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Hide Virtual Classrooms Toggle -->
|
||||
<div class="col-lg-6 col-md-5 pt-md-3">
|
||||
<div class="form-check form-switch pt-1">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="filterHideVirtual">
|
||||
<label class="form-check-label fw-semibold small text-dark" for="filterHideVirtual">
|
||||
<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>
|
||||
|
||||
<!-- Reset Filters Button -->
|
||||
<div class="col-lg-3 col-md-3 text-md-end pt-md-3">
|
||||
<button type="button" id="btnResetFilters" class="btn btn-outline-secondary btn-sm px-3" title="{% trans %}Restablecer filtros{% endtrans %}">
|
||||
<i class="bi bi-arrow-counterclockwise me-1"></i>{% trans %}Limpiar Filtros{% endtrans %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active filter indicator & counter -->
|
||||
<div class="d-flex align-items-center flex-wrap gap-2 mt-2 pt-2 border-top">
|
||||
<small class="text-muted fw-semibold">
|
||||
<i class="bi bi-funnel-fill text-secondary me-1"></i>{% trans %}Estado{% endtrans %}:
|
||||
</small>
|
||||
<span id="activeFilterBadge" class="badge bg-secondary-subtle text-secondary border small">
|
||||
{% trans %}Mostrando todas las aulas y materias{% endtrans %}
|
||||
</span>
|
||||
<span class="badge badge-brand ms-auto small">
|
||||
<i class="bi bi-calendar-check me-1"></i><span id="eventCountNumber">0</span> {% trans %}clases visibles{% endtrans %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<!-- Legend -->
|
||||
<div class="mb-3">
|
||||
<div class="d-flex gap-3 flex-wrap">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="badge bg-success me-2" style="width: 20px; height: 20px;"></span>
|
||||
<small class="text-muted">{% trans %}Confirmed{% endtrans %}</small>
|
||||
|
||||
<!-- Calendar Card -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-body-tertiary border-0 py-3">
|
||||
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<span class="fw-bold small text-secondary text-uppercase tracking-wide">
|
||||
<i class="bi bi-info-circle me-1"></i>{% trans %}Referencia{% endtrans %}:
|
||||
</span>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="badge badge-brand me-1" style="width: 14px; height: 14px; border-radius: 4px;"></span>
|
||||
<small class="text-muted">{% trans %}Clase Confirmada{% endtrans %}</small>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="badge bg-warning me-1" style="width: 14px; height: 14px; border-radius: 4px;"></span>
|
||||
<small class="text-muted">{% trans %}Pendiente{% endtrans %}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="badge bg-warning me-2" style="width: 20px; height: 20px;"></span>
|
||||
<small class="text-muted">{% trans %}Pending{% endtrans %}</small>
|
||||
<div class="text-muted small">
|
||||
<i class="bi bi-lightning-charge-fill text-warning me-1"></i>{% trans %}Haz clic en cualquier clase para ver los detalles completos{% endtrans %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Calendar -->
|
||||
<div id="calendar"></div>
|
||||
<div class="card-body p-3">
|
||||
<!-- FullCalendar Container -->
|
||||
<div id="calendar"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reservation Details Modal -->
|
||||
<div class="modal fade" id="reservationModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{% trans %}Reservation Details{% endtrans %}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="reservationDetails">
|
||||
<!-- Content will be loaded dynamically -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans %}Close{% endtrans %}</button>
|
||||
<!-- Reservation Details Modal -->
|
||||
<div class="modal fade" id="reservationModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-lg">
|
||||
<div class="modal-content border-0 shadow-lg">
|
||||
<div class="modal-header border-0 pb-0">
|
||||
<div>
|
||||
<span id="modalCategoryBadge" class="badge badge-brand mb-1">Clase Académica</span>
|
||||
<h4 class="modal-title fw-bold text-primary" id="modalSubjectTitle">Detalle de la Clase</h4>
|
||||
</div>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body pt-3" id="reservationDetails">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<div class="p-3 rounded bg-body-tertiary h-100">
|
||||
<h6 class="text-muted small text-uppercase fw-bold mb-2">
|
||||
<i class="bi bi-book text-primary me-1"></i>{% trans %}Materia y Código{% endtrans %}
|
||||
</h6>
|
||||
<p class="h6 fw-bold mb-1" id="modalSubjectName">-</p>
|
||||
<p class="mb-2">
|
||||
<span class="badge bg-dark bg-opacity-75 font-monospace text-white" id="modalSubjectCode">-</span>
|
||||
</p>
|
||||
<p class="small text-muted mb-0" id="modalCareerWrap">
|
||||
<i class="bi bi-mortarboard me-1"></i><span id="modalCareer">-</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="p-3 rounded bg-body-tertiary h-100">
|
||||
<h6 class="text-muted small text-uppercase fw-bold mb-2">
|
||||
<i class="bi bi-door-open text-success me-1"></i>{% trans %}Espacio Asignado{% endtrans %}
|
||||
</h6>
|
||||
<p class="h5 fw-bold text-success mb-1" id="modalClassroom">-</p>
|
||||
<p class="small text-muted mb-0" id="modalBuilding">-</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="p-3 rounded bg-body-tertiary h-100">
|
||||
<h6 class="text-muted small text-uppercase fw-bold mb-2">
|
||||
<i class="bi bi-clock text-warning me-1"></i>{% trans %}Horario Programado{% endtrans %}
|
||||
</h6>
|
||||
<p class="h6 fw-bold mb-0" id="modalTimeRange">-</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="p-3 rounded bg-body-tertiary h-100">
|
||||
<h6 class="text-muted small text-uppercase fw-bold mb-2">
|
||||
<i class="bi bi-shield-check text-info me-1"></i>{% trans %}Estado y Capacidad{% endtrans %}
|
||||
</h6>
|
||||
<p class="mb-1">
|
||||
<span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1" id="modalStatus">-</span>
|
||||
</p>
|
||||
<small class="text-muted" id="modalAttendees">-</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer border-0 pt-0">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans %}Close{% endtrans %}</button>
|
||||
<a href="#" id="modalFullLink" class="btn btn-primary">
|
||||
<i class="bi bi-box-arrow-up-right me-1"></i>{% trans %}Ver Ficha Completa{% endtrans %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css" rel="stylesheet">
|
||||
<style>
|
||||
/* FullCalendar Modern Overrides */
|
||||
#calendar {
|
||||
margin-top: 20px;
|
||||
font-family: inherit;
|
||||
min-height: 700px;
|
||||
}
|
||||
|
||||
.fc .fc-toolbar-title {
|
||||
font-size: 1.25rem !important;
|
||||
font-weight: 700 !important;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.fc .fc-button-primary {
|
||||
background: var(--gradient-primary, linear-gradient(135deg, #B43E8E 0%, #9E367D 100%)) !important;
|
||||
border: none !important;
|
||||
border-radius: 6px !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 0.85rem !important;
|
||||
padding: 0.35rem 0.75rem !important;
|
||||
box-shadow: 0 2px 4px rgba(180, 62, 142, 0.25) !important;
|
||||
}
|
||||
|
||||
.fc .fc-button-primary:hover {
|
||||
background: linear-gradient(135deg, #9E367D 0%, #832765 100%) !important;
|
||||
}
|
||||
|
||||
.fc .fc-button-primary:disabled {
|
||||
background: #94A3B8 !important;
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
.fc-theme-standard td, .fc-theme-standard th {
|
||||
border-color: var(--card-border, #E2E8F0) !important;
|
||||
}
|
||||
|
||||
.fc .fc-col-header-cell-cushion {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
padding: 8px 4px !important;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.fc .fc-timegrid-slot-label-cushion {
|
||||
color: var(--text-secondary, #64748B);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
/* Event Card Visual Hierarchy */
|
||||
.fc-event {
|
||||
cursor: pointer;
|
||||
border: none !important;
|
||||
padding: 2px 6px !important;
|
||||
font-size: 12px !important;
|
||||
border-radius: 8px !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease !important;
|
||||
}
|
||||
.fc-event-pending {
|
||||
background-color: #ffc107 !important;
|
||||
|
||||
.fc-event:hover {
|
||||
transform: translateY(-2px) scale(1.01);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22) !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.fc-event-confirmed {
|
||||
background-color: #28a745 !important;
|
||||
background: linear-gradient(135deg, #B43E8E 0%, #832765 100%) !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
.fc-daygrid-day.fc-day-today {
|
||||
background-color: rgba(102, 126, 234, 0.1) !important;
|
||||
|
||||
.fc-event-pending {
|
||||
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.fc-event-custom-container {
|
||||
padding: 5px 7px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.fc-event-time-pill {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
margin-bottom: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* High Visual Hierarchy for Subject Name */
|
||||
.fc-event-subject-title {
|
||||
font-size: 0.88rem !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1.22 !important;
|
||||
color: #FFFFFF !important;
|
||||
letter-spacing: -0.15px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-word;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Secondary Badges */
|
||||
.fc-event-badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 3px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.fc-badge-code {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
color: #FFFFFF !important;
|
||||
font-size: 0.70rem !important;
|
||||
font-weight: 600 !important;
|
||||
padding: 2px 5px !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.fc-badge-room {
|
||||
background-color: rgba(255, 255, 255, 0.28) !important;
|
||||
color: #FFFFFF !important;
|
||||
font-size: 0.70rem !important;
|
||||
font-weight: 700 !important;
|
||||
padding: 2px 5px !important;
|
||||
border-radius: 4px !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Month View Optimization */
|
||||
.fc-daygrid-event .fc-event-custom-container {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.fc-daygrid-event .fc-event-subject-title {
|
||||
font-size: 0.78rem !important;
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -102,10 +383,52 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var calendarEl = document.getElementById('calendar');
|
||||
var currentLang = '{{ session.get("language", "es") }}';
|
||||
var todayDate = '{{ today_date or "2026-09-03" }}';
|
||||
|
||||
var filterRoom = document.getElementById('filterClassroom');
|
||||
var filterSubj = document.getElementById('filterSubject');
|
||||
var filterCar = document.getElementById('filterCareer');
|
||||
var filterShift = document.getElementById('filterShift');
|
||||
var filterFloor = document.getElementById('filterFloor');
|
||||
var filterHideVirtual = document.getElementById('filterHideVirtual');
|
||||
var activeBadge = document.getElementById('activeFilterBadge');
|
||||
var countEl = document.getElementById('eventCountNumber');
|
||||
|
||||
function updateFilterSummaryBadge() {
|
||||
var parts = [];
|
||||
if (filterRoom.value && filterRoom.selectedOptions[0]) {
|
||||
parts.push('Aula: ' + filterRoom.selectedOptions[0].text.split('(')[0].trim());
|
||||
}
|
||||
if (filterSubj.value && filterSubj.selectedOptions[0]) {
|
||||
parts.push('Materia: ' + filterSubj.selectedOptions[0].text.split('[')[0].trim());
|
||||
}
|
||||
if (filterCar.value && filterCar.selectedOptions[0]) {
|
||||
parts.push('Carrera: ' + filterCar.selectedOptions[0].text.trim());
|
||||
}
|
||||
if (filterShift && filterShift.value) {
|
||||
parts.push('Turno ' + filterShift.value);
|
||||
}
|
||||
if (filterFloor && filterFloor.value) {
|
||||
parts.push(filterFloor.value === '0' ? 'Planta Baja' : 'Piso ' + filterFloor.value);
|
||||
}
|
||||
if (filterHideVirtual && filterHideVirtual.checked) {
|
||||
parts.push('Sin Virtuales');
|
||||
}
|
||||
|
||||
if (parts.length > 0) {
|
||||
activeBadge.className = 'badge bg-primary text-white border small';
|
||||
activeBadge.textContent = parts.join(' | ');
|
||||
} else {
|
||||
activeBadge.className = 'badge bg-secondary-subtle text-secondary border small';
|
||||
activeBadge.textContent = 'Mostrando todas las aulas y materias';
|
||||
}
|
||||
}
|
||||
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
locale: currentLang,
|
||||
initialView: 'timeGridWeek',
|
||||
initialDate: todayDate,
|
||||
allDaySlot: false,
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
@@ -116,61 +439,147 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
},
|
||||
slotMinTime: '07:00:00',
|
||||
slotMaxTime: '22:00:00',
|
||||
slotMinTime: '07:30:00',
|
||||
slotMaxTime: '22:30:00',
|
||||
height: 'auto',
|
||||
eventClick: function(info) {
|
||||
if (info.event.url) {
|
||||
loadReservationDetails(info.event.url);
|
||||
return false;
|
||||
}
|
||||
slotEventOverlap: true,
|
||||
|
||||
/* Dynamic Server-Side Filtered Events */
|
||||
events: function(info, successCallback, failureCallback) {
|
||||
var params = new URLSearchParams({
|
||||
start: info.startStr,
|
||||
end: info.endStr,
|
||||
classroom_id: filterRoom.value || '',
|
||||
subject_id: filterSubj.value || '',
|
||||
career_id: filterCar.value || '',
|
||||
shift: (filterShift ? filterShift.value : '') || '',
|
||||
floor: (filterFloor ? filterFloor.value : '') || '',
|
||||
hide_virtual: (filterHideVirtual && filterHideVirtual.checked) ? '1' : ''
|
||||
});
|
||||
|
||||
updateFilterSummaryBadge();
|
||||
|
||||
fetch('{{ url_for("schedule.calendar_data") }}?' + params.toString())
|
||||
.then(function(response) {
|
||||
if (!response.ok) throw new Error('Network error');
|
||||
return response.json();
|
||||
})
|
||||
.then(function(eventsData) {
|
||||
if (countEl) {
|
||||
countEl.textContent = eventsData.length;
|
||||
}
|
||||
successCallback(eventsData);
|
||||
})
|
||||
.catch(function(err) {
|
||||
console.error('Error loading calendar events:', err);
|
||||
failureCallback(err);
|
||||
});
|
||||
},
|
||||
events: '{{ url_for("schedule.calendar_data") }}',
|
||||
loading: function(bool) {
|
||||
|
||||
/* Custom Card Render with Visual Hierarchy */
|
||||
eventContent: function(arg) {
|
||||
var ext = arg.event.extendedProps || {};
|
||||
var subjectName = ext.subject_name || arg.event.title || '';
|
||||
var subjectCode = ext.subject_code || '';
|
||||
var classroom = ext.classroom || '';
|
||||
var timeText = arg.timeText || '';
|
||||
|
||||
var container = document.createElement('div');
|
||||
container.className = 'fc-event-custom-container';
|
||||
|
||||
var timeHtml = timeText ? `<div class="fc-event-time-pill"><i class="bi bi-clock me-1"></i>${timeText}</div>` : '';
|
||||
var titleHtml = `<div class="fc-event-subject-title" title="${subjectName}">${subjectName}</div>`;
|
||||
var badgesHtml = `
|
||||
<div class="fc-event-badges">
|
||||
${subjectCode ? `<span class="fc-badge-code font-monospace">${subjectCode}</span>` : ''}
|
||||
${classroom ? `<span class="fc-badge-room"><i class="bi bi-door-open me-1"></i>${classroom}</span>` : ''}
|
||||
</div>`;
|
||||
|
||||
container.innerHTML = timeHtml + titleHtml + badgesHtml;
|
||||
return { domNodes: [container] };
|
||||
},
|
||||
|
||||
/* Interactive Instant Modal */
|
||||
eventClick: function(info) {
|
||||
info.jsEvent.preventDefault();
|
||||
var ext = info.event.extendedProps || {};
|
||||
var subjectName = ext.subject_name || info.event.title || '';
|
||||
var subjectCode = ext.subject_code || '-';
|
||||
var classroom = ext.classroom || 'Sin Aula';
|
||||
var building = ext.building || 'Edificio Central';
|
||||
var career = ext.career || 'General';
|
||||
var status = ext.status || 'CONFIRMED';
|
||||
var attendees = ext.attendees || 0;
|
||||
|
||||
var startStr = info.event.start ? info.event.start.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', hour12: false}) : '';
|
||||
var endStr = info.event.end ? info.event.end.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit', hour12: false}) : '';
|
||||
var dateStr = info.event.start ? info.event.start.toLocaleDateString([], {weekday: 'long', day: 'numeric', month: 'long'}) : '';
|
||||
|
||||
document.getElementById('modalSubjectTitle').textContent = subjectName;
|
||||
document.getElementById('modalSubjectName').textContent = subjectName;
|
||||
document.getElementById('modalSubjectCode').textContent = subjectCode;
|
||||
document.getElementById('modalCareer').textContent = career;
|
||||
document.getElementById('modalClassroom').textContent = classroom;
|
||||
document.getElementById('modalBuilding').textContent = building;
|
||||
document.getElementById('modalTimeRange').textContent = `${dateStr} (${startStr} a ${endStr} hs)`;
|
||||
document.getElementById('modalStatus').textContent = status;
|
||||
document.getElementById('modalAttendees').textContent = `${attendees} estudiantes esperados`;
|
||||
|
||||
if (info.event.url) {
|
||||
var btn = document.getElementById('modalFullLink');
|
||||
btn.href = info.event.url;
|
||||
btn.classList.remove('d-none');
|
||||
} else {
|
||||
document.getElementById('modalFullLink').classList.add('d-none');
|
||||
}
|
||||
|
||||
var modal = new bootstrap.Modal(document.getElementById('reservationModal'));
|
||||
modal.show();
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
|
||||
function loadReservationDetails(url) {
|
||||
$.get(url)
|
||||
.done(function(data) {
|
||||
var isEs = currentLang === 'es';
|
||||
var html = `
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">${isEs ? 'Aula' : 'Classroom'}</h6>
|
||||
<p class="fw-bold">${data.classroom.code} - ${data.classroom.name || ''}</p>
|
||||
<p><i class="bi bi-building text-primary"></i> ${data.classroom.building} - ${isEs ? 'Piso' : 'Floor'} ${data.classroom.floor}</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">${isEs ? 'Materia' : 'Subject'}</h6>
|
||||
<p class="fw-bold">${data.commission.subject.code} - ${data.commission.subject.name}</p>
|
||||
<p><i class="bi bi-person text-info"></i> ${data.commission.teacher_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">${isEs ? 'Horario' : 'Schedule'}</h6>
|
||||
<p><i class="bi bi-clock text-warning"></i> ${new Date(data.start_time).toLocaleString()}</p>
|
||||
<p><i class="bi bi-clock text-success"></i> ${new Date(data.end_time).toLocaleString()}</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6 class="text-muted mb-2">${isEs ? 'Detalles' : 'Details'}</h6>
|
||||
<p><i class="bi bi-people text-primary"></i> ${data.expected_attendees} ${isEs ? 'asistentes' : 'attendees'}</p>
|
||||
<p><span class="badge bg-${data.status === 'CONFIRMED' ? 'success' : 'warning'}">${data.status}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
${data.notes ? `<div class="row mt-3"><div class="col-12"><h6 class="text-muted mb-2">${isEs ? 'Notas' : 'Notes'}</h6><p>${data.notes}</p></div></div>` : ''}
|
||||
`;
|
||||
$('#reservationDetails').html(html);
|
||||
$('#reservationModal').modal('show');
|
||||
})
|
||||
.fail(function() {
|
||||
$('#reservationDetails').html('<p class="text-danger">${isEs ? "Error al cargar los detalles de la reserva." : "Error loading reservation details."}</p>');
|
||||
$('#reservationModal').modal('show');
|
||||
});
|
||||
|
||||
// Event listeners to trigger immediate calendar refetch on filter change
|
||||
filterRoom.addEventListener('change', function() {
|
||||
calendar.refetchEvents();
|
||||
});
|
||||
|
||||
filterSubj.addEventListener('change', function() {
|
||||
calendar.refetchEvents();
|
||||
});
|
||||
|
||||
filterCar.addEventListener('change', function() {
|
||||
calendar.refetchEvents();
|
||||
});
|
||||
|
||||
if (filterShift) {
|
||||
filterShift.addEventListener('change', function() {
|
||||
calendar.refetchEvents();
|
||||
});
|
||||
}
|
||||
|
||||
if (filterFloor) {
|
||||
filterFloor.addEventListener('change', function() {
|
||||
calendar.refetchEvents();
|
||||
});
|
||||
}
|
||||
|
||||
if (filterHideVirtual) {
|
||||
filterHideVirtual.addEventListener('change', function() {
|
||||
calendar.refetchEvents();
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('btnResetFilters').addEventListener('click', function() {
|
||||
filterRoom.value = '';
|
||||
filterSubj.value = '';
|
||||
filterCar.value = '';
|
||||
if (filterShift) filterShift.value = '';
|
||||
if (filterFloor) filterFloor.value = '';
|
||||
if (filterHideVirtual) filterHideVirtual.checked = false;
|
||||
calendar.refetchEvents();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -65,7 +65,7 @@
|
||||
{% for subject in subjects %}
|
||||
<div class="col-lg-6 mb-4">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-0">
|
||||
<div class="card-header border-0 py-3">
|
||||
<div class="d-flex justify-content-between align-items-start">
|
||||
<div>
|
||||
<h5 class="mb-1">
|
||||
|
||||
+226
-264
@@ -1,291 +1,253 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Reservations List - Edu-Space Admin{% endblock %}
|
||||
{% block title %}{% trans %}Listado de Reservas{% endtrans %} - Edu-Space Admin{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h1 class="h3 mb-0">
|
||||
<i class="bi bi-calendar-list text-primary"></i> Reservations
|
||||
<small class="text-muted ms-2">Manage & View All Reservations</small>
|
||||
<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>{% trans %}Listado de Reservas{% endtrans %}
|
||||
</h1>
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ url_for('schedule.calendar_view') }}" class="btn btn-outline-primary">
|
||||
<i class="bi bi-calendar3"></i> Calendar View
|
||||
</a>
|
||||
<a href="{{ url_for('schedule.today_schedule') }}" class="btn btn-outline-info">
|
||||
<i class="bi bi-calendar-day"></i> Today
|
||||
</a>
|
||||
<a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle"></i> Add Reservation
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-muted small mb-0">{% trans %}Registro histórico y programación completa de clases y asignación de aulas{% 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.today_schedule') }}" class="btn btn-outline-info">
|
||||
<i class="bi bi-calendar-day me-1"></i>{% trans %}Cartelera de Hoy{% endtrans %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<form method="GET" class="row g-3">
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">Status</label>
|
||||
<select name="status" class="form-select">
|
||||
<option value="all" {% if status_filter == 'all' %}selected{% endif %}>All Status</option>
|
||||
<option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>Pending</option>
|
||||
<option value="confirmed" {% if status_filter == 'confirmed' %}selected{% endif %}>Confirmed</option>
|
||||
<option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">From Date</label>
|
||||
<input type="date" name="date_from" class="form-control" value="{{ date_from or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label">To Date</label>
|
||||
<input type="date" name="date_to" class="form-control" value="{{ date_to or '' }}">
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
<label class="form-label"> </label>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-outline-primary">
|
||||
<i class="bi bi-funnel"></i> Filter
|
||||
<!-- Filters Card -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-body p-3">
|
||||
<form method="GET" action="{{ url_for('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>{% trans %}Buscar{% endtrans %}
|
||||
</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>{% trans %}Estado{% endtrans %}
|
||||
</label>
|
||||
<select name="status" class="form-select form-select-sm">
|
||||
<option value="all" {% if status_filter == 'all' or not status_filter %}selected{% endif %}>{% trans %}Todos los estados{% endtrans %}</option>
|
||||
<option value="confirmed" {% if status_filter == 'confirmed' %}selected{% endif %}>{% trans %}Confirmadas{% endtrans %}</option>
|
||||
<option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>{% trans %}Pendientes{% endtrans %}</option>
|
||||
<option value="cancelled" {% if status_filter == 'cancelled' %}selected{% endif %}>{% trans %}Canceladas{% endtrans %}</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>{% trans %}Piso{% endtrans %}
|
||||
</label>
|
||||
<select name="floor" 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{% endtrans %}{% else %}{% trans %}Piso{% endtrans %} {{ f }}{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Shift Filter -->
|
||||
<div class="col-lg-2 col-md-4">
|
||||
<label 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" 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{% endtrans %}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Date Range -->
|
||||
<div class="col-lg-3 col-md-4">
|
||||
<label class="form-label small fw-bold text-muted mb-1">
|
||||
<i class="bi bi-calendar-event me-1"></i>{% trans %}Desde Fecha{% endtrans %}
|
||||
</label>
|
||||
<input type="date" name="date_from" class="form-control form-control-sm" value="{{ date_from 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>{% 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>
|
||||
|
||||
<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>{% trans %}Filtrar{% endtrans %}
|
||||
</button>
|
||||
<a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-x-circle"></i> Clear
|
||||
<a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-secondary btn-sm px-3">
|
||||
<i class="bi bi-arrow-counterclockwise me-1"></i>{% trans %}Limpiar{% endtrans %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reservations List -->
|
||||
{% if reservations and reservations.items %}
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th class="border-0">Classroom</th>
|
||||
<th class="border-0">Commission</th>
|
||||
<th class="border-0">Date & Time</th>
|
||||
<th class="border-0">Purpose</th>
|
||||
<th class="border-0">Attendees</th>
|
||||
<th class="border-0">Status</th>
|
||||
<th class="border-0">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for reservation in reservations.items %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar avatar-sm bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-2">
|
||||
<i class="bi bi-door-open"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="fw-bold">{{ reservation.classroom.code_display }}</div>
|
||||
<small class="text-muted">Capacity: {{ reservation.classroom.capacity }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div>
|
||||
<div class="fw-bold">
|
||||
{% if reservation.commission %}
|
||||
{{ reservation.commission.get_full_code() or 'N/A' }}
|
||||
{% else %}
|
||||
No Commission
|
||||
{% endif %}
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
{% if reservation.commission and reservation.commission.teacher_name %}
|
||||
{{ reservation.commission.teacher_name }}
|
||||
{% else %}
|
||||
No Teacher
|
||||
{% endif %}
|
||||
</small>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div>
|
||||
<div class="fw-bold">{{ reservation.start_time.strftime('%b %d, %Y') }}</div>
|
||||
<small class="text-muted">
|
||||
{{ reservation.start_time.strftime('%I:%M %p') }} - {{ reservation.end_time.strftime('%I:%M %p') }}
|
||||
</small>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="text-truncate" style="max-width: 150px; display: inline-block;">
|
||||
{{ reservation.purpose or 'No purpose specified' }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="bi bi-people text-muted me-1"></i>
|
||||
{{ reservation.expected_attendees }}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{% if reservation.status.value == 'confirmed' %}
|
||||
<span class="badge bg-success">Confirmed</span>
|
||||
{% elif reservation.status.value == 'pending' %}
|
||||
<span class="badge bg-warning">Pending</span>
|
||||
{% elif reservation.status.value == 'cancelled' %}
|
||||
<span class="badge bg-danger">Cancelled</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">{{ reservation.status.value }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
{% if reservation.status.value == 'pending' %}
|
||||
<form method="POST" action="{{ url_for('schedule.confirm_reservation', id=reservation.id) }}" style="display: inline;">
|
||||
<button type="submit" class="btn btn-outline-success btn-sm" title="Confirm">
|
||||
<i class="bi bi-check-circle"></i>
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
{% if reservation.status.value in ['pending', 'confirmed'] %}
|
||||
<form method="POST" action="{{ url_for('schedule.cancel_reservation', id=reservation.id) }}" style="display: inline;">
|
||||
<button type="submit" class="btn btn-outline-danger btn-sm" title="Cancel">
|
||||
<i class="bi bi-x-circle"></i>
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
{% if reservation.notes %}
|
||||
<button type="button" class="btn btn-outline-info btn-sm"
|
||||
title="{{ reservation.notes }}" data-bs-toggle="tooltip">
|
||||
<i class="bi bi-info-circle"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if reservations.pages > 1 %}
|
||||
<div class="card-footer bg-white border-0">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="text-muted small">
|
||||
Showing {{ reservations.items|length }} of {{ reservations.total }} reservations
|
||||
</span>
|
||||
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm mb-0">
|
||||
{% if reservations.has_prev %}
|
||||
|
||||
<!-- Reservations Table -->
|
||||
{% if reservations and reservations.items %}
|
||||
<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-table text-primary me-2"></i>{% trans %}Registros Encontrados{% endtrans %}
|
||||
<span class="badge bg-secondary-subtle text-secondary border ms-2">{{ reservations.total }} {% trans %}reservas{% endtrans %}</span>
|
||||
</h5>
|
||||
<small class="text-muted">{% trans %}Página{% endtrans %} {{ reservations.page }} {% trans %}de{% endtrans %} {{ 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">{% trans %}Fecha y Horario{% endtrans %}</th>
|
||||
<th>{% trans %}Aula / Piso{% endtrans %}</th>
|
||||
<th>{% trans %}Asignatura / Código{% endtrans %}</th>
|
||||
<th>{% trans %}Turno / Comisión{% endtrans %}</th>
|
||||
<th>{% trans %}Capacidad{% endtrans %}</th>
|
||||
<th>{% trans %}Estado{% endtrans %}</th>
|
||||
<th class="text-end pe-3">{% trans %}Acciones{% endtrans %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for reservation in reservations.items %}
|
||||
<tr>
|
||||
<td class="ps-3">
|
||||
<div class="fw-bold">{{ reservation.start_time.strftime('%d/%m/%Y') }}</div>
|
||||
<small class="text-muted font-monospace">{{ reservation.start_time.strftime('%H:%M') }} - {{ reservation.end_time.strftime('%H:%M') }} 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>{% trans %}Confirmada{% endtrans %}
|
||||
</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>{% trans %}Pendiente{% endtrans %}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger-subtle">
|
||||
{% trans %}Cancelada{% endtrans %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="text-end pe-3">
|
||||
<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>
|
||||
{% if current_user.has_permission('reservations', 'read_write') and (reservation.status == 'PENDING' or reservation.status.value == 'PENDING') %}
|
||||
<a href="{{ url_for('schedule.confirm_reservation', id=reservation.id) }}"
|
||||
class="btn btn-sm btn-outline-success py-0 px-2 ms-1" title="{% trans %}Confirmar{% endtrans %}">
|
||||
<i class="bi bi-check-lg"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
{% if reservations.pages > 1 %}
|
||||
<div class="card-footer bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">{% trans %}Mostrando 20 registros por página{% endtrans %}</small>
|
||||
<nav>
|
||||
<ul class="pagination pagination-sm mb-0">
|
||||
{% if reservations.has_prev %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ url_for('schedule.list_reservations', page=reservations.prev_num, status=status_filter, date_from=date_from, date_to=date_to) }}">
|
||||
<a class="page-link" href="{{ url_for('schedule.list_reservations', page=reservations.prev_num, status=status_filter, date_from=date_from, date_to=date_to, floor=floor_filter, shift=shift_filter, hide_virtual='1' if hide_virtual else '', search=search) }}">
|
||||
<i class="bi bi-chevron-left"></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
||||
{% for page_num in reservations.iter_pages() %}
|
||||
{% if page_num %}
|
||||
{% if page_num != reservations.page %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="{{ url_for('schedule.list_reservations', page=page_num, status=status_filter, date_from=date_from, date_to=date_to) }}">
|
||||
{{ 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 reservations.has_next %}
|
||||
|
||||
{% 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="{{ url_for('schedule.list_reservations', page=p, status=status_filter, date_from=date_from, date_to=date_to, floor=floor_filter, shift=shift_filter, hide_virtual='1' if hide_virtual else '', search=search) }}">{{ 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="{{ url_for('schedule.list_reservations', page=reservations.next_num, status=status_filter, date_from=date_from, date_to=date_to) }}">
|
||||
<a class="page-link" href="{{ url_for('schedule.list_reservations', page=reservations.next_num, status=status_filter, date_from=date_from, date_to=date_to, floor=floor_filter, shift=shift_filter, hide_virtual='1' if hide_virtual else '', search=search) }}">
|
||||
<i class="bi bi-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% 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">{% trans %}No se encontraron reservas{% endtrans %}</h5>
|
||||
<p class="text-muted small mb-3">{% trans %}No hay registros que coincidan con los criterios de búsqueda o filtros seleccionados.{% endtrans %}</p>
|
||||
<a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-arrow-counterclockwise me-1"></i>{% trans %}Restablecer Todos los Filtros{% endtrans %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center py-5">
|
||||
<div class="mb-4">
|
||||
<i class="bi bi-calendar-x display-1 text-muted"></i>
|
||||
</div>
|
||||
<h5 class="text-muted">No reservations found</h5>
|
||||
<p class="text-muted">
|
||||
{% if status_filter != 'all' or date_from or date_to %}
|
||||
No reservations match your current filters.
|
||||
<a href="{{ url_for('schedule.list_reservations') }}">Clear filters</a> to see all reservations.
|
||||
{% else %}
|
||||
There are no reservations in the system yet.
|
||||
<a href="{{ url_for('schedule.add_reservation') }}">Create your first reservation</a>.
|
||||
{% endif %}
|
||||
</p>
|
||||
<div class="d-flex justify-content-center gap-2 mt-3">
|
||||
<a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-primary">
|
||||
<i class="bi bi-plus-circle"></i> Add Reservation
|
||||
</a>
|
||||
<a href="{{ url_for('schedule.today_schedule') }}" class="btn btn-outline-info">
|
||||
<i class="bi bi-calendar-day"></i> Today's Schedule
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
// Initialize tooltips
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
});
|
||||
|
||||
// Form submission confirmation
|
||||
document.querySelectorAll('form[action*="cancel"]').forEach(function(form) {
|
||||
form.addEventListener('submit', function(e) {
|
||||
if (!confirm('Are you sure you want to cancel this reservation?')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('form[action*="confirm"]').forEach(function(form) {
|
||||
form.addEventListener('submit', function(e) {
|
||||
if (!confirm('Are you sure you want to confirm this reservation?')) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
+307
-352
@@ -1,403 +1,358 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Today's Schedule - Edu-Space Admin{% endblock %}
|
||||
{% block title %}{% trans %}Cartelera de Hoy{% endtrans %} - 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-today text-info"></i> {% trans %}Today's Schedule{% endtrans %}
|
||||
<small class="text-muted ms-2">{{ today.strftime('%B %d, %Y') }}</small>
|
||||
<!-- 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>
|
||||
<div>
|
||||
<a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-success">
|
||||
<i class="bi bi-plus-circle"></i> {% trans %}New Reservation{% endtrans %}
|
||||
</a>
|
||||
<a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-primary ms-2">
|
||||
<i class="bi bi-list"></i> {% trans %}All Reservations{% endtrans %}
|
||||
</a>
|
||||
{% if current_user and current_user.role in ['admin', 'teacher'] %}
|
||||
<a href="{{ url_for('genetic_algorithm_web.genetic_optimizer') }}" class="btn btn-info text-white ms-2">
|
||||
<i class="bi bi-cpu"></i> {% trans %}AI Room Optimizer{% endtrans %}
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<!-- 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>
|
||||
<h6 class="text-muted mb-2">{% trans %}Total Reservations{% endtrans %}</h6>
|
||||
<h2 class="mb-0">{{ stats.total_reservations }}</h2>
|
||||
<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">
|
||||
<i class="bi bi-calendar3 text-info fs-4"></i>
|
||||
<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>
|
||||
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="text-muted mb-2">{% trans %}Confirmed{% endtrans %}</h6>
|
||||
<h2 class="mb-0">{{ stats.confirmed }}</h2>
|
||||
</div>
|
||||
<div class="bg-success bg-opacity-10 rounded-circle p-3">
|
||||
<i class="bi bi-check-circle text-success fs-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="text-muted mb-2">{% trans %}Pending{% endtrans %}</h6>
|
||||
<h2 class="mb-0">{{ stats.pending }}</h2>
|
||||
</div>
|
||||
<div class="bg-warning bg-opacity-10 rounded-circle p-3">
|
||||
<i class="bi bi-clock text-warning fs-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 mb-3">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h6 class="text-muted mb-2">{% trans %}Active Classrooms{% endtrans %}</h6>
|
||||
<h2 class="mb-0">{{ stats.occupied_classrooms }}/{{ stats.total_classrooms }}</h2>
|
||||
</div>
|
||||
<div class="bg-primary bg-opacity-10 rounded-circle p-3">
|
||||
<i class="bi bi-door-open text-primary fs-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 bg-white border-0">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-clock-history text-info"></i> Timeline View
|
||||
</h5>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-outline-primary" id="refresh-btn">
|
||||
<i class="bi bi-arrow-clockwise"></i> Refresh
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-secondary ms-1" id="toggle-view-btn">
|
||||
<i class="bi bi-grid"></i> Grid View
|
||||
</button>
|
||||
<!-- 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>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="timeline-view">
|
||||
{% for hour in range(7, 22) %}
|
||||
<div class="row border-bottom py-3 align-items-start">
|
||||
<div class="col-md-2 col-3">
|
||||
<div class="text-center">
|
||||
<strong>{{ "%02d:00"|format(hour) }}</strong>
|
||||
<br>
|
||||
<small class="text-muted">{{ hour+1 }}:00</small>
|
||||
</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 class="col-md-10 col-9">
|
||||
{% if time_blocks[hour] %}
|
||||
<div class="row">
|
||||
{% for item in time_blocks[hour] %}
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<div>
|
||||
<h6 class="card-title mb-1">
|
||||
{{ item.commission.get_full_code() }}
|
||||
</h6>
|
||||
<p class="text-muted small mb-2 mb-md-0">
|
||||
<i class="bi bi-geo-alt"></i> {{ item.classroom.code }}
|
||||
<br class="d-md-none">
|
||||
<i class="bi bi-person ms-md-2"></i> {{ item.user.first_name }} {{ item.user.last_name }}
|
||||
</p>
|
||||
</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>
|
||||
<span class="badge bg-{% if item.reservation.status.value == 'CONFIRMED' %}success{% elif item.reservation.status.value == 'PENDING' %}warning{% else %}secondary{% endif %}">
|
||||
{{ item.reservation.status.value }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="row small">
|
||||
<div class="col-md-6">
|
||||
<i class="bi bi-clock"></i>
|
||||
{{ item.reservation.start_time.strftime('%H:%M') }} - {{ item.reservation.end_time.strftime('%H:%M') }}
|
||||
|
||||
<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="col-md-6">
|
||||
<i class="bi bi-people"></i>
|
||||
{{ item.reservation.expected_attendees }} attendees
|
||||
|
||||
<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>
|
||||
<a href="{{ url_for('schedule.view_reservation', id=item.reservation.id) }}" class="btn btn-sm btn-outline-secondary py-0 px-2">
|
||||
<i class="bi bi-eye me-1"></i>{% trans %}Detalles{% endtrans %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if item.reservation.purpose %}
|
||||
<p class="card-text small text-muted mt-2">
|
||||
{{ item.reservation.purpose }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<div class="mt-2">
|
||||
<a href="{{ url_for('schedule.view_reservation', id=item.reservation.id) }}" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-eye"></i> Details
|
||||
</a>
|
||||
{% if item.reservation.status.value == 'PENDING' %}
|
||||
<a href="{{ url_for('schedule.confirm_reservation', id=item.reservation.id) }}"
|
||||
class="btn btn-sm btn-outline-success ms-1"
|
||||
onclick="return confirm('Confirm this reservation?')">
|
||||
<i class="bi bi-check-circle"></i> Confirm
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center text-muted py-3">
|
||||
<i class="bi bi-circle"></i> No reservations scheduled
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Grid View (hidden by default) -->
|
||||
<div id="grid-view" style="display: none;">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Classroom</th>
|
||||
<th>Subject</th>
|
||||
<th>Teacher</th>
|
||||
<th>Purpose</th>
|
||||
<th>Attendees</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for reservation in reservations %}
|
||||
<tr>
|
||||
<td>
|
||||
{{ reservation.start_time.strftime('%H:%M') }} -
|
||||
{{ reservation.end_time.strftime('%H:%M') }}
|
||||
</td>
|
||||
<td>
|
||||
<i class="bi bi-geo-alt"></i>
|
||||
{{ reservation.classroom.code }}
|
||||
</td>
|
||||
<td>{{ reservation.commission.get_full_code() }}</td>
|
||||
<td>{{ reservation.user.first_name }} {{ reservation.user.last_name }}</td>
|
||||
<td>{{ reservation.purpose }}</td>
|
||||
<td>{{ reservation.expected_attendees }}</td>
|
||||
<td>
|
||||
<span class="badge bg-{% if reservation.status.value == 'CONFIRMED' %}success{% elif reservation.status.value == 'PENDING' %}warning{% else %}secondary{% endif %}">
|
||||
{{ reservation.status.value }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ url_for('schedule.view_reservation', id=reservation.id) }}"
|
||||
class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
{% if reservation.status.value == 'PENDING' %}
|
||||
<a href="{{ url_for('schedule.confirm_reservation', id=reservation.id) }}"
|
||||
class="btn btn-sm btn-outline-success ms-1"
|
||||
onclick="return confirm('Confirm this reservation?')">
|
||||
<i class="bi bi-check-circle"></i>
|
||||
</a>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Daily Summary -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-0">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-graph-up text-warning"></i> Daily Analytics
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="text-center">
|
||||
<div class="mb-2">
|
||||
<i class="bi bi-door-open-fill text-success" style="font-size: 2rem;"></i>
|
||||
</div>
|
||||
<h6>Most Active Hours</h6>
|
||||
<!-- Calculate peak hours from data -->
|
||||
{% set peak_hours = [] %}
|
||||
{% for item in reservations %}
|
||||
{% set slot = item.start_time.hour %}
|
||||
{% if slot not in peak_hours %}
|
||||
{% set _ = peak_hours.append(slot) %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<p class="text-muted">
|
||||
{% if peak_hours %}
|
||||
{% for hour in peak_hours[:3]|sort %}
|
||||
{{ "%02d:00"|format(hour) }}{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
No data available
|
||||
<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 %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-center">
|
||||
<div class="mb-2">
|
||||
<i class="bi bi-building text-info" style="font-size: 2rem;"></i>
|
||||
</div>
|
||||
<h6>Busiest Classrooms</h6>
|
||||
<p class="text-muted">
|
||||
{% if reservations %}
|
||||
{% set classroom_codes = [] %}
|
||||
{% for item in reservations %}
|
||||
{% if item.classroom.code not in classroom_codes %}
|
||||
{% set _ = classroom_codes.append(item.classroom.code) %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for code in classroom_codes[:3] %}
|
||||
{{ code }}{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
No data available
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-center">
|
||||
<div class="mb-2">
|
||||
<i class="bi bi-clock-fill text-primary" style="font-size: 2rem;"></i>
|
||||
</div>
|
||||
<h6>Total Hours Booked</h6>
|
||||
<p class="text-muted">
|
||||
{% set total_hours = 0 %}
|
||||
{% for item in reservations %}
|
||||
{% set duration = (item.end_time - item.start_time).total_seconds() / 3600 %}
|
||||
{% set total_hours = (total_hours + duration) %}
|
||||
{% endfor %}
|
||||
{{ total_hours|round(1) }} hours total
|
||||
</p>
|
||||
|
||||
<!-- 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">
|
||||
<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>
|
||||
</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 reservations scheduled for today{% endtrans %}</h4>
|
||||
<p class="text-muted">
|
||||
{% trans %}There are no classroom reservations for today.{% endtrans %}
|
||||
</p>
|
||||
<div class="mt-3">
|
||||
<a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-success">
|
||||
<i class="bi bi-plus-circle"></i> {% trans %}Schedule First Class{% endtrans %}
|
||||
</a>
|
||||
<a href="{{ url_for('schedule.list_reservations') }}" class="btn btn-outline-primary ms-2">
|
||||
<i class="bi bi-calendar-week"></i> {% trans %}View Week Schedule{% endtrans %}
|
||||
</a>
|
||||
{% if current_user and current_user.role in ['admin', 'teacher'] %}
|
||||
<a href="{{ url_for('genetic_algorithm_web.genetic_optimizer') }}" class="btn btn-info text-white ms-2">
|
||||
<i class="bi bi-cpu"></i> {% trans %}AI Room Optimizer{% endtrans %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% 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>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
// Toggle between timeline and grid view
|
||||
$('#toggle-view-btn').on('click', function() {
|
||||
const timelineView = $('#timeline-view');
|
||||
const gridView = $('#grid-view');
|
||||
const btn = $(this);
|
||||
|
||||
if (timelineView.is(':visible')) {
|
||||
timelineView.hide();
|
||||
gridView.show();
|
||||
btn.html('<i class="bi bi-list"></i> Timeline View');
|
||||
} else {
|
||||
timelineView.show();
|
||||
gridView.hide();
|
||||
btn.html('<i class="bi bi-grid"></i> Grid View');
|
||||
}
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var toggleBtn = document.getElementById('toggle-view-btn');
|
||||
var timelineView = document.getElementById('timeline-view');
|
||||
var gridView = document.getElementById('grid-view');
|
||||
|
||||
// Refresh the page
|
||||
$('#refresh-btn').on('click', function() {
|
||||
location.reload();
|
||||
});
|
||||
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 %}';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-refresh every 5 minutes
|
||||
setInterval(function() {
|
||||
location.reload();
|
||||
}, 300000); // 5 minutes = 300000 milliseconds
|
||||
|
||||
// Highlight current time
|
||||
const currentHour = new Date().getHours();
|
||||
if (currentHour >= 7 && currentHour < 22) {
|
||||
const timeBlockIndex = currentHour - 7;
|
||||
$('.row.border-bottom').eq(timeBlockIndex).addClass('bg-primary bg-opacity-10');
|
||||
var refreshBtn = document.getElementById('refresh-btn');
|
||||
if (refreshBtn) {
|
||||
refreshBtn.addEventListener('click', function() {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<!-- Main Reservation Info -->
|
||||
<div class="col-lg-8 mb-4">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-0">
|
||||
<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
|
||||
@@ -54,7 +54,7 @@
|
||||
<label class="text-muted small">Date & Time</label>
|
||||
<p class="mb-0">
|
||||
<i class="bi bi-clock"></i>
|
||||
{{ reservation.start_time.strftime('%B %d, %Y') }}<br>
|
||||
{{ format_date(reservation.start_time, format='long')|capitalize }}<br>
|
||||
{{ reservation.start_time.strftime('%H:%M') }} - {{ reservation.end_time.strftime('%H:%M') }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -86,7 +86,7 @@
|
||||
|
||||
<!-- Classroom Details -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-0">
|
||||
<div class="card-header border-0 py-3">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-building text-info"></i> Classroom Information
|
||||
</h5>
|
||||
@@ -124,7 +124,7 @@
|
||||
<div class="col-lg-4">
|
||||
<!-- Subject & Commission -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white border-0">
|
||||
<div class="card-header border-0 py-3">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-book text-warning"></i> Subject & Commission
|
||||
</h5>
|
||||
@@ -149,7 +149,7 @@
|
||||
|
||||
<!-- Attendees -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white border-0">
|
||||
<div class="card-header border-0 py-3">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-people text-success"></i> Attendance
|
||||
</h5>
|
||||
@@ -162,7 +162,8 @@
|
||||
<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 %}"
|
||||
style="width: {{ percentage }}%"></div>
|
||||
role="progressbar"
|
||||
style="{{ 'width: ' ~ (percentage|round(1)|string) ~ '%;' }}"></div>
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
{{ reservation.expected_attendees }} / {{ reservation.classroom.capacity }} capacity
|
||||
@@ -174,7 +175,7 @@
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-0">
|
||||
<div class="card-header border-0 py-3">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-gear text-secondary"></i> Actions
|
||||
</h5>
|
||||
|
||||
Reference in New Issue
Block a user