870 lines
53 KiB
HTML
870 lines
53 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{% trans %}Comisiones y Cursadas{% endtrans %} - Edu-Space{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid pt-5 mt-4">
|
|
<!-- Header -->
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
|
|
<div>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb mb-1 small">
|
|
<li class="breadcrumb-item"><a href="{{ url_for('main.dashboard') }}">{% trans %}Dashboard{% endtrans %}</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">{% trans %}Comisiones{% endtrans %}</li>
|
|
</ol>
|
|
</nav>
|
|
<h1 class="h3 fw-bold mb-1">
|
|
<i class="bi bi-diagram-3 text-primary me-2"></i>{% trans %}Gestión de Comisiones y Cursadas{% endtrans %}
|
|
</h1>
|
|
<p class="text-muted mb-0 small">
|
|
{% trans %}Administración de comisiones académicas, enlaces a aulas virtuales (Zoom/Teams/Meet) e hitos de evaluación.{% endtrans %}
|
|
</p>
|
|
</div>
|
|
<div class="d-flex flex-wrap gap-2">
|
|
{% if can_edit_commissions %}
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAddCommission">
|
|
<i class="bi bi-plus-lg me-1"></i>{% trans %}Nueva Comisión{% endtrans %}
|
|
</button>
|
|
{% endif %}
|
|
<a href="{{ url_for('schedule.add_reservation') }}" class="btn btn-outline-success">
|
|
<i class="bi bi-calendar-plus me-1"></i>{% trans %}Nueva Reserva{% endtrans %}
|
|
</a>
|
|
<a href="{{ url_for('schedule.today_schedule') }}" class="btn btn-outline-secondary">
|
|
<i class="bi bi-calendar-day me-1"></i>{% trans %}Hoy{% endtrans %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-6 col-md-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body d-flex align-items-center">
|
|
<div class="badge bg-primary-subtle text-primary p-3 rounded-3 me-3 fs-4">
|
|
<i class="bi bi-journal-bookmark"></i>
|
|
</div>
|
|
<div>
|
|
<div class="h3 fw-bold mb-0">{{ subjects|length }}</div>
|
|
<div class="text-muted small">{% trans %}Materias Activas{% endtrans %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body d-flex align-items-center">
|
|
<div class="badge bg-info-subtle text-info p-3 rounded-3 me-3 fs-4">
|
|
<i class="bi bi-diagram-3"></i>
|
|
</div>
|
|
<div>
|
|
<div class="h3 fw-bold mb-0">{{ total_commissions }}</div>
|
|
<div class="text-muted small">{% trans %}Total Comisiones{% endtrans %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body d-flex align-items-center">
|
|
<div class="badge bg-success-subtle text-success p-3 rounded-3 me-3 fs-4">
|
|
<i class="bi bi-people"></i>
|
|
</div>
|
|
<div>
|
|
<div class="h3 fw-bold mb-0">{{ total_capacity }}</div>
|
|
<div class="text-muted small">{% trans %}Capacidad Total{% endtrans %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-body d-flex align-items-center">
|
|
<div class="badge bg-warning-subtle text-warning p-3 rounded-3 me-3 fs-4">
|
|
<i class="bi bi-camera-video"></i>
|
|
</div>
|
|
<div>
|
|
{% set ns = namespace(virtual_count=0) %}
|
|
{% for s in subjects %}
|
|
{% for c in s.commissions %}
|
|
{% if c.virtual_link %}{% set ns.virtual_count = ns.virtual_count + 1 %}{% endif %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
<div class="h3 fw-bold mb-0">{{ ns.virtual_count }}</div>
|
|
<div class="text-muted small">{% trans %}Aulas Virtuales Config.{% endtrans %}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search / Filter Bar -->
|
|
<div class="card border-0 shadow-sm mb-4">
|
|
<div class="card-body py-2">
|
|
<div class="row g-2 align-items-center">
|
|
<div class="col-md-5">
|
|
<div class="input-group">
|
|
<span class="input-group-text bg-body-tertiary border-0"><i class="bi bi-search"></i></span>
|
|
<input type="text" id="filterInput" class="form-control border-0 bg-body-tertiary" placeholder="{% trans %}Filtrar por asignatura, código de comisión o docente...{% endtrans %}">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-7 text-md-end text-muted small">
|
|
<i class="bi bi-info-circle me-1"></i>{% trans %}Profesores, Bedelía y Administradores pueden actualizar el enlace de videollamada y agendar hitos de examen.{% endtrans %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Subjects & Commissions List -->
|
|
<div class="row g-4" id="commissionsListContainer">
|
|
{% for subject in subjects %}
|
|
<div class="col-12 subject-card" data-subject-name="{{ subject.name|lower }}" data-subject-code="{{ subject.code|lower }}">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-body-tertiary border-0 py-3">
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
|
|
<div class="d-flex align-items-center">
|
|
<span class="badge bg-primary fs-6 me-2 font-monospace">{{ subject.code }}</span>
|
|
<div>
|
|
<h5 class="fw-bold mb-0 text-dark-emphasis">{{ subject.name }}</h5>
|
|
<small class="text-muted">
|
|
<i class="bi bi-building me-1"></i>{{ subject.department or 'UniCABA' }}
|
|
{% if subject.career %} • <i class="bi bi-mortarboard me-1"></i>{{ subject.career }}{% endif %}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="badge bg-body-secondary text-secondary border">
|
|
{{ subject.commissions|length }} {% trans %}comisiones{% endtrans %}
|
|
</span>
|
|
{% if can_edit_commissions %}
|
|
<button type="button" class="btn btn-sm btn-outline-primary btn-add-comm-subject"
|
|
data-subject-id="{{ subject.id }}"
|
|
data-subject-name="{{ subject.name }} ({{ subject.code }})"
|
|
title="{% trans %}Agregar comisión a esta materia{% endtrans %}">
|
|
<i class="bi bi-plus-circle me-1"></i>{% trans %}Comisión{% endtrans %}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body p-0">
|
|
{% if subject.commissions %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="bg-body-tertiary table-light">
|
|
<tr>
|
|
<th class="ps-4" style="min-width: 140px;">{% trans %}Comisión / Turno{% endtrans %}</th>
|
|
<th style="min-width: 130px;">{% trans %}Ciclo Lectivo{% endtrans %}</th>
|
|
<th style="min-width: 160px;">{% trans %}Docente{% endtrans %}</th>
|
|
<th style="min-width: 220px;">{% trans %}Aula Virtual{% endtrans %}</th>
|
|
<th style="min-width: 240px;">{% trans %}Hitos Académicos{% endtrans %}</th>
|
|
<th class="text-center" style="min-width: 110px;">{% trans %}Cupo{% endtrans %}</th>
|
|
<th class="text-end pe-4" style="min-width: 130px;">{% trans %}Acciones{% endtrans %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for commission in subject.commissions %}
|
|
<tr class="commission-row" data-search-text="{{ commission.code|lower }} {{ commission.teacher_name|lower }} {{ subject.name|lower }}">
|
|
<td class="ps-4">
|
|
<div class="fw-bold fs-6 text-primary">{{ commission.code }}</div>
|
|
<div class="d-flex gap-1 mt-1">
|
|
{% if commission.shift %}
|
|
<span class="badge bg-secondary-subtle text-secondary border" style="font-size: 0.70rem;">
|
|
<i class="bi bi-clock me-1"></i>{{ commission.shift }}
|
|
</span>
|
|
{% endif %}
|
|
{% if commission.schedule %}
|
|
<span class="badge bg-body-tertiary text-dark border" style="font-size: 0.70rem;" title="{{ commission.schedule }}">
|
|
{{ commission.schedule|truncate(15) }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-light text-dark border">
|
|
{{ commission.semester }} {{ commission.year }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
{% if commission.teacher %}
|
|
<div class="fw-semibold small"><i class="bi bi-person me-1 text-secondary"></i>{{ commission.teacher.name }}</div>
|
|
<div class="text-muted small font-monospace" style="font-size: 0.75rem;">{{ commission.teacher.email }}</div>
|
|
{% else %}
|
|
<span class="badge bg-warning-subtle text-warning border border-warning-subtle small">
|
|
<i class="bi bi-question-circle me-1"></i>{% trans %}Sin asignar{% endtrans %}
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<!-- Enlace a Aula Virtual (Zoom, Teams, Meet) -->
|
|
<div class="d-flex align-items-center gap-1">
|
|
{% if commission.virtual_link %}
|
|
<a href="{{ commission.virtual_link }}" target="_blank" class="btn btn-sm btn-outline-success text-truncate d-inline-flex align-items-center" style="max-width: 150px;" title="{{ commission.virtual_link }}">
|
|
<i class="bi bi-camera-video me-1"></i>{% trans %}Unirse{% endtrans %}
|
|
</a>
|
|
{% else %}
|
|
<span class="text-muted small fst-italic me-1">{% trans %}Sin enlace{% endtrans %}</span>
|
|
{% endif %}
|
|
|
|
{% if can_manage_milestones %}
|
|
<button type="button" class="btn btn-sm btn-outline-secondary btn-virtual-link"
|
|
data-id="{{ commission.id }}"
|
|
data-name="{{ commission.get_full_code() }}"
|
|
data-link="{{ commission.virtual_link or '' }}"
|
|
title="{% trans %}Configurar enlace Zoom/Teams/Meet{% endtrans %}">
|
|
<i class="bi bi-link-45deg"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<!-- Hitos Académicos (Parciales, TPs) -->
|
|
<div class="d-flex flex-wrap align-items-center gap-1">
|
|
{% for m in commission.academic_milestones %}
|
|
<span class="badge shadow-xs text-white d-inline-flex align-items-center py-1 px-2"
|
|
style="background-color: {{ m.color }}; font-size: 0.72rem;"
|
|
title="{{ m.title }} - {{ m.date.strftime('%d/%m/%Y %H:%M') if m.date else '' }} ({{ m.classroom or 'Campus Virtual' }})">
|
|
<i class="bi bi-flag-fill me-1" style="font-size: 0.65rem;"></i>
|
|
{{ m.title or m.tipo }}
|
|
<span class="ms-1 opacity-75">({{ m.date.strftime('%d/%m') if m.date else '' }})</span>
|
|
{% if can_manage_milestones %}
|
|
<form action="{{ url_for('schedule.commission_milestone_delete', commission_id=commission.id, milestone_id=m.id) }}" method="POST" class="d-inline ms-1" onsubmit="return confirm('¿Eliminar este hito?');">
|
|
<button type="submit" class="btn btn-link text-white p-0 m-0 border-0" style="line-height: 1; text-decoration: none;" title="Eliminar hito">×</button>
|
|
</form>
|
|
{% endif %}
|
|
</span>
|
|
{% else %}
|
|
<span class="text-muted small fst-italic">{% trans %}Sin hitos{% endtrans %}</span>
|
|
{% endfor %}
|
|
|
|
{% if can_manage_milestones %}
|
|
<button type="button" class="btn btn-sm btn-outline-warning py-0 px-2 btn-add-milestone"
|
|
data-id="{{ commission.id }}"
|
|
data-name="{{ commission.get_full_code() }}"
|
|
data-subject-code="{{ subject.code }}"
|
|
data-virtual-link="{{ commission.virtual_link or '' }}"
|
|
title="{% trans %}Agregar Hito de Evaluación{% endtrans %}"
|
|
style="font-size: 0.72rem; line-height: 1.5;">
|
|
<i class="bi bi-plus-lg me-1"></i>{% trans %}Hito{% endtrans %}
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<div class="small fw-semibold">{{ commission.current_students }}/{{ commission.max_students }}</div>
|
|
{% set fill_pct = (commission.current_students / commission.max_students * 100) if commission.max_students > 0 else 0 %}
|
|
<div class="progress mt-1 mx-auto" style="height: 4px; width: 50px;">
|
|
<div class="progress-bar {% if fill_pct > 90 %}bg-danger{% elif fill_pct > 70 %}bg-warning{% else %}bg-success{% endif %}"
|
|
style="width: {{ [fill_pct, 100]|min }}%;"></div>
|
|
</div>
|
|
</td>
|
|
<td class="text-end pe-4">
|
|
<div class="btn-group btn-group-sm">
|
|
<button type="button" class="btn btn-outline-primary quick-reserve-btn"
|
|
data-commission-id="{{ commission.id }}"
|
|
data-max-students="{{ commission.max_students }}"
|
|
data-commission-name="{{ commission.get_full_code() }}"
|
|
data-subject-name="{{ subject.name }}"
|
|
title="{% trans %}Reserva Rápida de Aula{% endtrans %}">
|
|
<i class="bi bi-calendar-plus"></i>
|
|
</button>
|
|
{% if can_edit_commissions %}
|
|
<button type="button" class="btn btn-outline-secondary btn-edit-comm"
|
|
data-id="{{ commission.id }}"
|
|
data-code="{{ commission.code }}"
|
|
data-semester="{{ commission.semester }}"
|
|
data-year="{{ commission.year }}"
|
|
data-teacher-id="{{ commission.teacher_id or '' }}"
|
|
data-max-students="{{ commission.max_students }}"
|
|
data-schedule="{{ commission.schedule or '' }}"
|
|
data-shift="{{ commission.shift or 'Tarde' }}"
|
|
data-virtual-link="{{ commission.virtual_link or '' }}"
|
|
data-active="{{ 'true' if commission.active else 'false' }}"
|
|
title="{% trans %}Editar Comisión{% endtrans %}">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-danger btn-delete-comm"
|
|
data-id="{{ commission.id }}"
|
|
data-name="{{ commission.get_full_code() }}"
|
|
data-action-url="{{ url_for('schedule.commission_delete', id=commission.id) }}"
|
|
title="{% trans %}Eliminar Comisión{% endtrans %}">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center text-muted py-4">
|
|
<i class="bi bi-inbox fs-2 d-block mb-1 text-secondary"></i>
|
|
{% trans %}No hay comisiones registradas para esta asignatura.{% endtrans %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 1: Nueva Comisión -->
|
|
{% if can_edit_commissions %}
|
|
<div class="modal fade" id="modalAddCommission" tabindex="-1" aria-labelledby="modalAddCommissionLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content border-0 shadow">
|
|
<div class="modal-header bg-body-tertiary">
|
|
<h5 class="modal-title fw-bold" id="modalAddCommissionLabel">
|
|
<i class="bi bi-plus-circle text-primary me-2"></i>{% trans %}Nueva Comisión de Cursada{% endtrans %}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form action="{{ url_for('schedule.commission_add') }}" method="POST">
|
|
<div class="modal-body p-4">
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-7">
|
|
<label for="add_subject_id" class="form-label fw-semibold">{% trans %}Asignatura{% endtrans %} <span class="text-danger">*</span></label>
|
|
<select class="form-select" id="add_subject_id" name="subject_id" required>
|
|
<option value="">{% trans %}Seleccione la materia...{% endtrans %}</option>
|
|
{% for s in subjects %}
|
|
<option value="{{ s.id }}">{{ s.code }} - {{ s.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label for="add_code" class="form-label fw-semibold">{% trans %}Código de Comisión{% endtrans %} <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="add_code" name="code" placeholder="Ej: A, B, N1, Única" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-4">
|
|
<label for="add_semester" class="form-label fw-semibold">{% trans %}Cuatrimestre{% endtrans %}</label>
|
|
<select class="form-select" id="add_semester" name="semester">
|
|
<option value="1C" selected>1C (Primer Cuatrimestre)</option>
|
|
<option value="2C">2C (Segundo Cuatrimestre)</option>
|
|
<option value="Anual">Anual</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="add_year" class="form-label fw-semibold">{% trans %}Año{% endtrans %}</label>
|
|
<input type="number" class="form-control" id="add_year" name="year" value="2026" min="2020" max="2035">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="add_shift" class="form-label fw-semibold">{% trans %}Turno{% endtrans %}</label>
|
|
<select class="form-select" id="add_shift" name="shift">
|
|
<option value="Mañana">Mañana (08:00 - 12:00)</option>
|
|
<option value="Tarde" selected>Tarde / Noche (17:30 - 21:30)</option>
|
|
<option value="Vespertino">Vespertino</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-8">
|
|
<label for="add_teacher_id" class="form-label fw-semibold">{% trans %}Docente a Cargo{% endtrans %}</label>
|
|
<select class="form-select" id="add_teacher_id" name="teacher_id">
|
|
<option value="">-- {% trans %}Sin asignar{% endtrans %} --</option>
|
|
{% for t in teachers %}
|
|
<option value="{{ t.id }}">{{ t.name }} ({{ t.email }})</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="add_max_students" class="form-label fw-semibold">{% trans %}Cupo Máximo{% endtrans %}</label>
|
|
<input type="number" class="form-control" id="add_max_students" name="max_students" value="40" min="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="add_schedule" class="form-label fw-semibold">{% trans %}Días y Horarios{% endtrans %}</label>
|
|
<input type="text" class="form-control" id="add_schedule" name="schedule" placeholder="Ej: Lun y Mié 17:30 a 21:30 hs">
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label for="add_virtual_link" class="form-label fw-semibold">
|
|
<i class="bi bi-camera-video text-primary me-1"></i>{% trans %}Enlace de Aula Virtual (Zoom, Meet, Teams, Moodle){% endtrans %}
|
|
</label>
|
|
<input type="url" class="form-control" id="add_virtual_link" name="virtual_link" placeholder="https://meet.google.com/... o https://teams.microsoft.com/...">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-body-tertiary">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans %}Cancelar{% endtrans %}</button>
|
|
<button type="submit" class="btn btn-primary px-4">
|
|
<i class="bi bi-save me-1"></i>{% trans %}Crear Comisión{% endtrans %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 2: Editar Comisión -->
|
|
<div class="modal fade" id="modalEditCommission" tabindex="-1" aria-labelledby="modalEditCommissionLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content border-0 shadow">
|
|
<div class="modal-header bg-body-tertiary">
|
|
<h5 class="modal-title fw-bold" id="modalEditCommissionLabel">
|
|
<i class="bi bi-pencil-square text-primary me-2"></i>{% trans %}Editar Comisión{% endtrans %}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form id="formEditCommission" method="POST">
|
|
<div class="modal-body p-4">
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-6">
|
|
<label for="edit_code" class="form-label fw-semibold">{% trans %}Código de Comisión{% endtrans %} <span class="text-danger">*</span></label>
|
|
<input type="text" class="form-control" id="edit_code" name="code" required>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="edit_semester" class="form-label fw-semibold">{% trans %}Cuatrimestre{% endtrans %}</label>
|
|
<select class="form-select" id="edit_semester" name="semester">
|
|
<option value="1C">1C</option>
|
|
<option value="2C">2C</option>
|
|
<option value="Anual">Anual</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="edit_year" class="form-label fw-semibold">{% trans %}Año{% endtrans %}</label>
|
|
<input type="number" class="form-control" id="edit_year" name="year" min="2020" max="2035">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-8">
|
|
<label for="edit_teacher_id" class="form-label fw-semibold">{% trans %}Docente a Cargo{% endtrans %}</label>
|
|
<select class="form-select" id="edit_teacher_id" name="teacher_id">
|
|
<option value="">-- {% trans %}Sin asignar{% endtrans %} --</option>
|
|
{% for t in teachers %}
|
|
<option value="{{ t.id }}">{{ t.name }} ({{ t.email }})</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="edit_shift" class="form-label fw-semibold">{% trans %}Turno{% endtrans %}</label>
|
|
<select class="form-select" id="edit_shift" name="shift">
|
|
<option value="Mañana">Mañana</option>
|
|
<option value="Tarde">Tarde / Noche</option>
|
|
<option value="Vespertino">Vespertino</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-8">
|
|
<label for="edit_schedule" class="form-label fw-semibold">{% trans %}Días y Horarios{% endtrans %}</label>
|
|
<input type="text" class="form-control" id="edit_schedule" name="schedule">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="edit_max_students" class="form-label fw-semibold">{% trans %}Cupo Máximo{% endtrans %}</label>
|
|
<input type="number" class="form-control" id="edit_max_students" name="max_students" min="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="edit_virtual_link" class="form-label fw-semibold">
|
|
<i class="bi bi-camera-video text-primary me-1"></i>{% trans %}Enlace de Aula Virtual{% endtrans %}
|
|
</label>
|
|
<input type="url" class="form-control" id="edit_virtual_link" name="virtual_link">
|
|
</div>
|
|
|
|
<div class="form-check form-switch pt-2">
|
|
<input class="form-check-input" type="checkbox" id="edit_active" name="active" value="1">
|
|
<label class="form-check-label fw-semibold" for="edit_active">{% trans %}Comisión Activa{% endtrans %}</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-body-tertiary">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans %}Cancelar{% endtrans %}</button>
|
|
<button type="submit" class="btn btn-primary px-4">
|
|
<i class="bi bi-check-circle me-1"></i>{% trans %}Guardar Cambios{% endtrans %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 3: Configurar Aula Virtual (Zoom, Teams, Meet) -->
|
|
<div class="modal fade" id="modalVirtualLink" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 shadow-lg">
|
|
<div class="modal-header bg-body-tertiary">
|
|
<h5 class="modal-title fw-bold">
|
|
<i class="bi bi-camera-video text-primary me-2"></i>{% trans %}Aula Virtual / Videoconferencia{% endtrans %}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form id="formVirtualLink" method="POST">
|
|
<div class="modal-body p-4">
|
|
<p class="small text-muted mb-3">
|
|
{% trans %}Asigna o actualiza el enlace de acceso directo al aula virtual para la comisión{% endtrans %} <strong id="virtualLinkCommName" class="text-primary"></strong>:
|
|
</p>
|
|
<div class="mb-3">
|
|
<label for="inputVirtualLink" class="form-label fw-semibold">URL de la reunión / sala</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text"><i class="bi bi-link-45deg"></i></span>
|
|
<input type="url" class="form-control" id="inputVirtualLink" name="virtual_link" placeholder="https://meet.google.com/... o https://teams.microsoft.com/...">
|
|
</div>
|
|
</div>
|
|
<div class="alert alert-light border small text-muted mb-0">
|
|
<i class="bi bi-lightbulb text-warning me-1"></i>
|
|
{% trans %}Soporta enlaces de Zoom, Google Meet, Microsoft Teams, Webex o Campus Virtual Moodle.{% endtrans %}
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-body-tertiary">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans %}Cancelar{% endtrans %}</button>
|
|
<button type="submit" class="btn btn-primary px-4">
|
|
<i class="bi bi-check-circle me-1"></i>{% trans %}Guardar Enlace{% endtrans %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 4: Agregar Hito Académico a Comisión -->
|
|
<div class="modal fade" id="modalAddMilestone" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 shadow-lg">
|
|
<div class="modal-header bg-body-tertiary">
|
|
<h5 class="modal-title fw-bold">
|
|
<i class="bi bi-flag text-warning me-2"></i>{% trans %}Programar Hito Académico{% endtrans %}
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<form id="formAddMilestone" method="POST">
|
|
<div class="modal-body p-4">
|
|
<div class="alert alert-info border-0 py-2 small mb-3">
|
|
{% trans %}Agendando evento de evaluación para la comisión{% endtrans %} <strong id="milestoneCommName" class="text-primary"></strong>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="milestone_type_id" class="form-label fw-semibold">{% trans %}Tipo de Hito / Categoría{% endtrans %} <span class="text-danger">*</span></label>
|
|
<select class="form-select" id="milestone_type_id" name="milestone_type_id" required>
|
|
<option value="">{% trans %}Seleccionar tipificación...{% endtrans %}</option>
|
|
{% for mt in milestone_types %}
|
|
<option value="{{ mt.id }}" data-color="{{ mt.color }}">{{ mt.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="milestone_title" class="form-label fw-semibold">{% trans %}Título Específico (Opcional){% endtrans %}</label>
|
|
<input type="text" class="form-control" id="milestone_title" name="title" placeholder="Ej: Parcial 1 - Unidades 1 a 4">
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-7">
|
|
<label for="milestone_date" class="form-label fw-semibold">{% trans %}Fecha{% endtrans %} <span class="text-danger">*</span></label>
|
|
<input type="date" class="form-control" id="milestone_date" name="date" required>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label for="milestone_time" class="form-label fw-semibold">{% trans %}Hora Inicio{% endtrans %}</label>
|
|
<input type="time" class="form-control" id="milestone_time" name="time" value="18:00">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="milestone_classroom" class="form-label fw-semibold">{% trans %}Espacio / Aula Física o Virtual{% endtrans %}</label>
|
|
<select class="form-select" id="milestone_classroom" name="classroom">
|
|
<option value="Campus Virtual">🌐 Campus Virtual / Remoto</option>
|
|
{% for room in classrooms %}
|
|
<option value="{{ room.code }} - {{ room.name }} (Piso {{ room.floor }})">📍 {{ room.code }} - {{ room.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="milestone_link" class="form-label fw-semibold">{% trans %}Enlace de Conexión (si aplica){% endtrans %}</label>
|
|
<input type="url" class="form-control" id="milestone_link" name="link" placeholder="https://zoom.us/... o https://meet.google.com/...">
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label for="milestone_notes" class="form-label fw-semibold">{% trans %}Consignas o Temario{% endtrans %}</label>
|
|
<textarea class="form-control" id="milestone_notes" name="notes" rows="2" placeholder="Temas evaluados, requisitos, material permitido..."></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-body-tertiary">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans %}Cancelar{% endtrans %}</button>
|
|
<button type="submit" class="btn btn-primary px-4">
|
|
<i class="bi bi-save me-1"></i>{% trans %}Registrar Hito{% endtrans %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 5: Eliminar Comisión (fuera de la tabla) -->
|
|
<div class="modal fade" id="deleteCommissionModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-0 shadow-lg" style="border-radius: 14px;">
|
|
<div class="modal-header border-0 pb-0">
|
|
<div class="d-flex align-items-center">
|
|
<div class="badge bg-danger-subtle text-danger p-2 rounded-circle me-2">
|
|
<i class="bi bi-exclamation-triangle-fill fs-5"></i>
|
|
</div>
|
|
<h5 class="modal-title fw-bold text-danger mb-0">{% trans %}Confirmar Eliminación{% endtrans %}</h5>
|
|
</div>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body text-start py-3">
|
|
<p class="mb-2">{% trans %}¿Está seguro de que desea eliminar permanentemente la comisión{% endtrans %} <strong id="deleteCommName" class="text-primary"></strong>?</p>
|
|
<p class="text-muted small mb-0"><i class="bi bi-info-circle me-1"></i>{% trans %}Esta acción eliminará sus reservas e hitos académicos asociados.{% endtrans %}</p>
|
|
</div>
|
|
<div class="modal-footer border-0 pt-0">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans %}Cancelar{% endtrans %}</button>
|
|
<form id="deleteCommForm" method="POST" class="d-inline">
|
|
<button type="submit" class="btn btn-danger px-3">
|
|
<i class="bi bi-trash me-1"></i>{% trans %}Eliminar Comisión{% endtrans %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Reservation Modal -->
|
|
<div class="modal fade" id="quickReservationModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content border-0 shadow">
|
|
<div class="modal-header bg-body-tertiary">
|
|
<h5 class="modal-title fw-bold"><i class="bi bi-calendar-plus text-primary me-2"></i>{% trans %}Reserva Rápida de Aula{% endtrans %}</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body p-4">
|
|
<form id="quick-reservation-form">
|
|
<input type="hidden" id="quick-commission-id" name="commission_id">
|
|
|
|
<div class="alert alert-info py-2 mb-3" id="commission-details"></div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-6">
|
|
<label for="quick-date" class="form-label fw-semibold">{% trans %}Fecha{% endtrans %}</label>
|
|
<input type="date" class="form-control" id="quick-date" required>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="quick-start-time" class="form-label fw-semibold">{% trans %}Inicio{% endtrans %}</label>
|
|
<input type="time" class="form-control" id="quick-start-time" required>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label for="quick-end-time" class="form-label fw-semibold">{% trans %}Fin{% endtrans %}</label>
|
|
<input type="time" class="form-control" id="quick-end-time" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="quick-purpose" class="form-label fw-semibold">{% trans %}Propósito{% endtrans %}</label>
|
|
<input type="text" class="form-control" id="quick-purpose" placeholder="Clase habitual, parcial, recuperatorio, etc." required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label fw-semibold">{% trans %}Seleccionar Aula Disponible{% endtrans %}</label>
|
|
<select class="form-select" id="quick-classroom-select" required>
|
|
<option value="">{% trans %}Elige fecha y horarios primero{% endtrans %}</option>
|
|
{% for c in classrooms %}
|
|
<option value="{{ c.id }}">{{ c.code }} - {{ c.name }} (Cap: {{ c.capacity }}) - Piso {{ c.floor }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer bg-body-tertiary">
|
|
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans %}Cancelar{% endtrans %}</button>
|
|
<button type="button" class="btn btn-success px-4" id="create-reservation-btn">
|
|
<i class="bi bi-calendar-check me-1"></i>{% trans %}Confirmar Reserva{% endtrans %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Search Filter
|
|
var filterInput = document.getElementById('filterInput');
|
|
if (filterInput) {
|
|
filterInput.addEventListener('input', function() {
|
|
var q = this.value.toLowerCase().trim();
|
|
document.querySelectorAll('.subject-card').forEach(function(card) {
|
|
var sName = card.getAttribute('data-subject-name') || '';
|
|
var sCode = card.getAttribute('data-subject-code') || '';
|
|
var rowMatches = 0;
|
|
card.querySelectorAll('.commission-row').forEach(function(row) {
|
|
var text = row.getAttribute('data-search-text') || '';
|
|
if (q === '' || text.indexOf(q) !== -1 || sName.indexOf(q) !== -1 || sCode.indexOf(q) !== -1) {
|
|
row.style.display = '';
|
|
rowMatches++;
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
card.style.display = (q === '' || rowMatches > 0 || sName.indexOf(q) !== -1 || sCode.indexOf(q) !== -1) ? '' : 'none';
|
|
});
|
|
});
|
|
}
|
|
|
|
// Modal Edit Commission
|
|
var modalEditEl = document.getElementById('modalEditCommission');
|
|
var modalEdit = modalEditEl ? new bootstrap.Modal(modalEditEl) : null;
|
|
var formEdit = document.getElementById('formEditCommission');
|
|
|
|
document.querySelectorAll('.btn-edit-comm').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var id = this.getAttribute('data-id');
|
|
if (formEdit) {
|
|
formEdit.action = "/schedule/commissions/" + id + "/edit";
|
|
document.getElementById('edit_code').value = this.getAttribute('data-code');
|
|
document.getElementById('edit_semester').value = this.getAttribute('data-semester');
|
|
document.getElementById('edit_year').value = this.getAttribute('data-year');
|
|
document.getElementById('edit_teacher_id').value = this.getAttribute('data-teacher-id');
|
|
document.getElementById('edit_max_students').value = this.getAttribute('data-max-students');
|
|
document.getElementById('edit_schedule').value = this.getAttribute('data-schedule');
|
|
document.getElementById('edit_shift').value = this.getAttribute('data-shift');
|
|
document.getElementById('edit_virtual_link').value = this.getAttribute('data-virtual-link');
|
|
document.getElementById('edit_active').checked = this.getAttribute('data-active') === 'true';
|
|
if (modalEdit) modalEdit.show();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Modal Add Commission to Specific Subject
|
|
var modalAddEl = document.getElementById('modalAddCommission');
|
|
var modalAdd = modalAddEl ? new bootstrap.Modal(modalAddEl) : null;
|
|
document.querySelectorAll('.btn-add-comm-subject').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var subjectId = this.getAttribute('data-subject-id');
|
|
var selectSubj = document.getElementById('add_subject_id');
|
|
if (selectSubj) selectSubj.value = subjectId;
|
|
if (modalAdd) modalAdd.show();
|
|
});
|
|
});
|
|
|
|
// Modal Virtual Link
|
|
var modalVirtualEl = document.getElementById('modalVirtualLink');
|
|
var modalVirtual = modalVirtualEl ? new bootstrap.Modal(modalVirtualEl) : null;
|
|
var formVirtual = document.getElementById('formVirtualLink');
|
|
var virtualNameEl = document.getElementById('virtualLinkCommName');
|
|
var inputVirtual = document.getElementById('inputVirtualLink');
|
|
|
|
document.querySelectorAll('.btn-virtual-link').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var id = this.getAttribute('data-id');
|
|
var name = this.getAttribute('data-name');
|
|
var link = this.getAttribute('data-link');
|
|
if (formVirtual) formVirtual.action = "/schedule/commissions/" + id + "/virtual-link";
|
|
if (virtualNameEl) virtualNameEl.textContent = name;
|
|
if (inputVirtual) inputVirtual.value = link;
|
|
if (modalVirtual) modalVirtual.show();
|
|
});
|
|
});
|
|
|
|
// Modal Add Milestone
|
|
var modalMilestoneEl = document.getElementById('modalAddMilestone');
|
|
var modalMilestone = modalMilestoneEl ? new bootstrap.Modal(modalMilestoneEl) : null;
|
|
var formMilestone = document.getElementById('formAddMilestone');
|
|
var milestoneCommName = document.getElementById('milestoneCommName');
|
|
var milestoneLink = document.getElementById('milestone_link');
|
|
|
|
document.querySelectorAll('.btn-add-milestone').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var id = this.getAttribute('data-id');
|
|
var name = this.getAttribute('data-name');
|
|
var vLink = this.getAttribute('data-virtual-link');
|
|
if (formMilestone) formMilestone.action = "/schedule/commissions/" + id + "/milestones/add";
|
|
if (milestoneCommName) milestoneCommName.textContent = name;
|
|
if (milestoneLink) milestoneLink.value = vLink || '';
|
|
if (modalMilestone) modalMilestone.show();
|
|
});
|
|
});
|
|
|
|
// Modal Delete Commission
|
|
var modalDeleteEl = document.getElementById('deleteCommissionModal');
|
|
var modalDelete = modalDeleteEl ? new bootstrap.Modal(modalDeleteEl) : null;
|
|
var deleteCommName = document.getElementById('deleteCommName');
|
|
var deleteCommForm = document.getElementById('deleteCommForm');
|
|
|
|
document.querySelectorAll('.btn-delete-comm').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var name = this.getAttribute('data-name');
|
|
var actionUrl = this.getAttribute('data-action-url');
|
|
if (deleteCommName) deleteCommName.textContent = name;
|
|
if (deleteCommForm) deleteCommForm.action = actionUrl;
|
|
if (modalDelete) modalDelete.show();
|
|
});
|
|
});
|
|
|
|
// Quick Reservation
|
|
var quickModalEl = document.getElementById('quickReservationModal');
|
|
var quickModal = quickModalEl ? new bootstrap.Modal(quickModalEl) : null;
|
|
|
|
document.querySelectorAll('.quick-reserve-btn').forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
var commId = this.getAttribute('data-commission-id');
|
|
var maxStudents = this.getAttribute('data-max-students');
|
|
var commName = this.getAttribute('data-commission-name');
|
|
var subjName = this.getAttribute('data-subject-name');
|
|
|
|
document.getElementById('quick-commission-id').value = commId;
|
|
document.getElementById('commission-details').innerHTML =
|
|
'<strong>' + commName + '</strong> - ' + subjName + ' <span class="badge bg-secondary ms-2">' + maxStudents + ' alumnos</span>';
|
|
|
|
// Set today's date by default
|
|
var today = new Date().toISOString().split('T')[0];
|
|
document.getElementById('quick-date').value = today;
|
|
document.getElementById('quick-start-time').value = '17:30';
|
|
document.getElementById('quick-end-time').value = '21:30';
|
|
document.getElementById('quick-purpose').value = 'Clase Cursada';
|
|
|
|
if (quickModal) quickModal.show();
|
|
});
|
|
});
|
|
|
|
var createResBtn = document.getElementById('create-reservation-btn');
|
|
if (createResBtn) {
|
|
createResBtn.addEventListener('click', function() {
|
|
var commId = document.getElementById('quick-commission-id').value;
|
|
var roomId = document.getElementById('quick-classroom-select').value;
|
|
var date = document.getElementById('quick-date').value;
|
|
var start = document.getElementById('quick-start-time').value;
|
|
var end = document.getElementById('quick-end-time').value;
|
|
var purpose = document.getElementById('quick-purpose').value;
|
|
|
|
if (!date || !start || !end || !roomId) {
|
|
alert('Por favor complete la fecha, los horarios y seleccione un aula.');
|
|
return;
|
|
}
|
|
|
|
var formData = new FormData();
|
|
formData.append('commission_id', commId);
|
|
formData.append('classroom_id', roomId);
|
|
formData.append('purpose', purpose);
|
|
formData.append('start_time', date + ' ' + start);
|
|
formData.append('end_time', date + ' ' + end);
|
|
|
|
fetch('/schedule/reservation/add', {
|
|
method: 'POST',
|
|
body: formData
|
|
}).then(function(res) {
|
|
if (res.ok) {
|
|
if (quickModal) quickModal.hide();
|
|
window.location.reload();
|
|
} else {
|
|
return res.json().then(function(data) {
|
|
alert(data.error || 'Error al crear la reserva');
|
|
});
|
|
}
|
|
}).catch(function(err) {
|
|
window.location.reload();
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |