feat: gestion RBAC granular, importacion sheets, filtrado de aulas virtuales y pisos, capacidad infinita y traduccion
This commit is contained in:
Carlos Tello
@@ -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 %}
|
||||
Reference in New Issue
Block a user