carlostellocba/admin-edu-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(i18n & ux): auditoria, traduccion completa, correcciones ux y gestion de idioma en perfil

Browse Source
This commit is contained in:
Carlos Tello
2026-09-02 23:45:13 -03:00
parent 3d4e9992f8
commit d1d4be0428
31 changed files with 2356 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/genetic_optimizer.html
+115 -197
View File
@@ -1,6 +1,6 @@
{% extends "base.html" %}
{% block title %}AI Room Reservation Optimizer{% endblock %}
{% block title %}{% trans %}AI Room Reservation Optimizer{% endtrans %} - Edu-Space Admin{% endblock %}
{% block extra_css %}
<style>
@@ -13,27 +13,24 @@
}
.commission-item {
border-left: 4px solid #007bff;
border-left: 4px solid var(--bs-primary);
transition: all 0.2s ease;
background-color: var(--bs-body-bg);
}
.commission-item:hover {
border-left-color: #0056b3;
background-color: #f8f9fa;
border-left-color: var(--bs-info);
background-color: rgba(var(--bs-primary-rgb), 0.05);
}
.commission-item.selected {
border-left-color: #28a745;
background-color: #d4edda;
border-left-color: var(--bs-success);
background-color: rgba(var(--bs-success-rgb), 0.1);
}
.algorithm-status {
position: sticky;
top: 20px;
}
.loading-spinner {
display: none;
top: 90px;
}
.spinner-overlay {
@@ -42,99 +39,93 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.fitness-meter {
height: 20px;
background: linear-gradient(to right, #dc3545, #ffc107, #28a745);
border-radius: 10px;
position: relative;
}
.fitness-indicator {
position: absolute;
top: -5px;
width: 30px;
height: 30px;
background: white;
border: 3px solid #007bff;
border-radius: 50%;
transform: translateX(-50%);
transition: left 0.5s ease;
.hero-banner {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 41, 59, 0.9) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
}
</style>
{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="container-fluid pt-5 mt-4">
<!-- Header -->
<div class="row mb-4">
<div class="col-12">
<div class="card bg-primary text-white">
<div class="card hero-banner border-0 shadow-sm p-3">
<div class="card-body">
<h1 class="card-title mb-3">
<i class="fas fa-brain me-2"></i>
AI Room Reservation Optimizer
</h1>
<p class="card-text mb-0">
Use genetic algorithms to automatically optimize room assignments based on capacity, availability, and student enrollment.
</p>
<div class="d-flex align-items-center mb-2">
<div class="bg-primary bg-opacity-25 rounded-3 p-3 me-3 text-primary">
<i class="bi bi-cpu fs-2"></i>
</div>
<div>
<h1 class="h3 mb-1 fw-bold">
{% trans %}AI Room Reservation Optimizer{% endtrans %}
</h1>
<p class="text-muted mb-0">
{% trans %}Use genetic algorithms to automatically optimize room assignments based on capacity, availability, and student enrollment.{% endtrans %}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Algorithm Status Card -->
<!-- Algorithm Status & Commission Selection -->
<div class="row mb-4">
<div class="col-lg-4">
<div class="card algorithm-status">
<div class="card-header bg-info text-white">
<h5 class="mb-0">
<i class="fas fa-cogs me-2"></i>
Algorithm Status
<!-- Algorithm Status Card -->
<div class="col-lg-4 mb-4">
<div class="card border-0 shadow-sm algorithm-status">
<div class="card-header bg-body-tertiary border-0 py-3">
<h5 class="mb-0 h6 fw-bold">
<i class="bi bi-gear-wide-connected text-primary me-2"></i>
{% trans %}Algorithm Status{% endtrans %}
</h5>
</div>
<div class="card-body">
<div class="mb-3">
<small class="text-muted">System Status</small>
<div class="d-flex justify-content-between align-items-center">
<span>Available Classrooms</span>
<div class="mb-4">
<small class="text-muted text-uppercase fw-semibold d-block mb-2">{% trans %}System Status{% endtrans %}</small>
<div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
<span>{% trans %}Available Classrooms{% endtrans %}</span>
<span class="badge bg-success" id="available-classrooms">--</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span>Active Commissions</span>
<div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
<span>{% trans %}Active Commissions{% endtrans %}</span>
<span class="badge bg-info" id="active-commissions">--</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span>Existing Reservations</span>
<div class="d-flex justify-content-between align-items-center py-1">
<span>{% trans %}Existing Reservations{% endtrans %}</span>
<span class="badge bg-secondary" id="existing-reservations">--</span>
</div>
</div>
<div class="mb-3">
<small class="text-muted">Algorithm Configuration</small>
<div class="d-flex justify-content-between align-items-center">
<span>Population Size</span>
<div class="mb-4">
<small class="text-muted text-uppercase fw-semibold d-block mb-2">{% trans %}Algorithm Configuration{% endtrans %}</small>
<div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
<span>{% trans %}Population Size{% endtrans %}</span>
<span class="text-muted">50</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span>Generations</span>
<div class="d-flex justify-content-between align-items-center py-1 border-bottom border-body-secondary">
<span>{% trans %}Generations{% endtrans %}</span>
<span class="text-muted">100</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span>Mutation Rate</span>
<div class="d-flex justify-content-between align-items-center py-1">
<span>{% trans %}Mutation Rate{% endtrans %}</span>
<span class="text-muted">10%</span>
</div>
</div>
<button class="btn btn-sm btn-outline-primary w-100" onclick="geneticManager.getAlgorithmStatus()">
<i class="fas fa-sync-alt me-1"></i>
Refresh Status
<i class="bi bi-arrow-clockwise me-1"></i>
{% trans %}Refresh Status{% endtrans %}
</button>
</div>
</div>
@@ -142,34 +133,27 @@
<!-- Commission Selection -->
<div class="col-lg-8">
<div class="card">
<div class="card-header bg-light">
<h5 class="mb-0">
<i class="fas fa-list-check me-2"></i>
Select Commissions to Optimize
<div class="card border-0 shadow-sm">
<div class="card-header bg-body-tertiary border-0 py-3 d-flex justify-content-between align-items-center">
<h5 class="mb-0 h6 fw-bold">
<i class="bi bi-list-check text-primary me-2"></i>
{% trans %}Select Commissions to Optimize{% endtrans %}
</h5>
<div class="d-flex gap-2">
<button class="btn btn-sm btn-outline-primary" onclick="selectAllCommissions()">
{% trans %}Select All{% endtrans %}
</button>
<button class="btn btn-sm btn-outline-secondary" onclick="deselectAllCommissions()">
{% trans %}Deselect All{% endtrans %}
</button>
</div>
</div>
<div class="card-body">
<div class="mb-3">
<div class="d-flex gap-2 mb-2">
<button class="btn btn-sm btn-outline-primary" onclick="selectAllCommissions()">
Select All
</button>
<button class="btn btn-sm btn-outline-secondary" onclick="deselectAllCommissions()">
Deselect All
</button>
<button class="btn btn-sm btn-outline-info" onclick="filterCommissions()">
<i class="fas fa-filter me-1"></i>
Filter
</button>
</div>
</div>
<div id="commissions-list" class="row">
<!-- Commissions will be loaded here -->
<div class="col-12 text-center text-muted">
<i class="fas fa-spinner fa-spin me-2"></i>
Loading commissions...
<div class="col-12 text-center text-muted py-5">
<div class="spinner-border spinner-border-sm me-2 text-primary" role="status"></div>
{% trans %}Loading commissions...{% endtrans %}
</div>
</div>
</div>
@@ -180,45 +164,45 @@
<!-- Optimization Controls -->
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">
<i class="fas fa-play-circle me-2"></i>
Optimization Controls
<div class="card border-0 shadow-sm">
<div class="card-header bg-body-tertiary border-0 py-3">
<h5 class="mb-0 h6 fw-bold">
<i class="bi bi-sliders text-primary me-2"></i>
{% trans %}Optimization Controls{% endtrans %}
</h5>
</div>
<div class="card-body">
<div class="row align-items-center">
<div class="row align-items-center mb-3">
<div class="col-md-6">
<div class="mb-3">
<label for="start-date" class="form-label">Start Date Range</label>
<label for="start-date" class="form-label">{% trans %}Start Date Range{% endtrans %}</label>
<input type="datetime-local" class="form-control" id="start-date" name="start_date">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="end-date" class="form-label">End Date Range</label>
<label for="end-date" class="form-label">{% trans %}End Date Range{% endtrans %}</label>
<input type="datetime-local" class="form-control" id="end-date" name="end_date">
</div>
</div>
</div>
<div class="d-flex gap-2 flex-wrap">
<button class="btn btn-info" id="preview-optimization-btn">
<i class="fas fa-eye me-2"></i>
Preview Optimization
<button class="btn btn-info text-white" id="preview-optimization-btn">
<i class="bi bi-eye me-1"></i>
{% trans %}Preview Optimization{% endtrans %}
</button>
<button class="btn btn-success" id="optimize-assignments-btn">
<i class="fas fa-rocket me-2"></i>
Run Full Optimization
<i class="bi bi-play-circle me-1"></i>
{% trans %}Run Full Optimization{% endtrans %}
</button>
<button class="btn btn-warning" id="apply-optimization-btn" style="display: none;">
<i class="fas fa-check me-2"></i>
Apply Reservations
<i class="bi bi-check-circle me-1"></i>
{% trans %}Apply Reservations{% endtrans %}
</button>
<button class="btn btn-secondary" onclick="resetOptimization()">
<i class="fas fa-undo me-2"></i>
Reset
<button class="btn btn-outline-secondary" onclick="resetOptimization()">
<i class="bi bi-arrow-counterclockwise me-1"></i>
{% trans %}Reset{% endtrans %}
</button>
</div>
</div>
@@ -229,13 +213,8 @@
<!-- Results Section -->
<div class="row mb-4">
<div class="col-12">
<!-- Preview Results -->
<div id="preview-results"></div>
<!-- Optimization Results -->
<div id="optimization-results"></div>
<!-- Alert Container -->
<div id="alert-container"></div>
</div>
</div>
@@ -244,11 +223,9 @@
<!-- Loading Spinner Overlay -->
<div class="spinner-overlay" id="loading-spinner">
<div class="text-center text-white">
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Optimizing...</span>
</div>
<p class="mt-3 mb-0">Running genetic algorithm optimization...</p>
<small class="d-block mt-2">This may take a few moments</small>
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status"></div>
<p class="mt-3 mb-1 fw-bold fs-5">{% trans %}Running genetic algorithm optimization...{% endtrans %}</p>
<small class="text-white-50">{% trans %}This may take a few moments{% endtrans %}</small>
</div>
</div>
@@ -257,17 +234,17 @@
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="detailsModalLabel">Reservation Details</h5>
<h5 class="modal-title" id="detailsModalLabel">{% trans %}Reservation Details{% endtrans %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- Content will be populated dynamically -->
<!-- Content populated dynamically -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans %}Close{% endtrans %}</button>
<button type="button" class="btn btn-primary" onclick="downloadReservations()">
<i class="fas fa-download me-2"></i>
Download
<i class="bi bi-download me-1"></i>
{% trans %}Download{% endtrans %}
</button>
</div>
</div>
@@ -278,7 +255,6 @@
{% block extra_js %}
<script src="{{ url_for('static', filename='js/genetic-algorithm.js') }}"></script>
<script>
// Additional utility functions for the genetic optimizer interface
function selectAllCommissions() {
const checkboxes = document.querySelectorAll('input[name="commission_ids"]');
checkboxes.forEach(cb => {
@@ -306,78 +282,45 @@ function updateCommissionCard(commissionId, selected) {
}
}
function filterCommissions() {
// Implement filtering logic
console.log('Filter commissions feature not implemented yet');
}
function resetOptimization() {
deselectAllCommissions();
geneticManager.clearResults();
geneticManager.clearPreview();
if (window.geneticManager) {
geneticManager.clearResults && geneticManager.clearResults();
geneticManager.clearPreview && geneticManager.clearPreview();
}
document.getElementById('start-date').value = '';
document.getElementById('end-date').value = '';
}
function downloadReservations() {
const reservations = geneticManager.getPendingReservations();
if (!reservations || reservations.length === 0) {
alert('No reservations to download');
return;
}
// Create CSV content
const headers = ['Commission ID', 'Classroom ID', 'Purpose', 'Start Time', 'End Time', 'Expected Attendees'];
const csvContent = [
headers.join(','),
...reservations.map(res => [
res.commission_id,
res.classroom_id,
`"${res.purpose}"`,
new Date(res.start_time).toISOString(),
new Date(res.end_time).toISOString(),
res.expected_attendees
].join(','))
].join('\n');
// Download file
const blob = new Blob([csvContent], { type: 'text/csv' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `optimization_results_${new Date().toISOString().split('T')[0]}.csv`;
a.click();
URL.revokeObjectURL(url);
}
// Load commissions on page load
document.addEventListener('DOMContentLoaded', async function() {
await loadCommissions();
await geneticManager.getAlgorithmStatus();
if (window.geneticManager) {
await geneticManager.getAlgorithmStatus();
}
});
async function loadCommissions() {
try {
const response = await fetch('/api/genetic/commissions');
const response = await fetch('/api/genetic/commissions');
const data = await response.json();
const commissionsList = document.getElementById('commissions-list');
const isSpanish = '{{ session.get("language", "es") }}' === 'es';
if (data.success && data.commissions && data.commissions.length > 0) {
const commissionsHtml = data.commissions.map(commission => `
<div class="col-md-6 mb-3">
<div class="card commission-item" data-commission-id="${commission.id}">
<div class="card commission-item border-0 shadow-sm" data-commission-id="${commission.id}">
<div class="card-body">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="commission_ids"
value="${commission.id}" id="commission-${commission.id}"
onchange="updateCommissionCard('${commission.id}', this.checked)">
<label class="form-check-label" for="commission-${commission.id}">
<strong>${commission.get_full_code || commission.code}</strong>
<strong class="text-primary">${commission.get_full_code || commission.code}</strong>
<br>
<small class="text-muted">${commission.subject?.name || 'Unknown Subject'}</small>
<small class="text-muted">${commission.subject?.name || (isSpanish ? 'Materia Desconocida' : 'Unknown Subject')}</small>
<br>
<span class="badge bg-info">${commission.current_students || 0}/${commission.max_students} students</span>
<span class="badge bg-info mt-1">${commission.current_students || 0}/${commission.max_students} ${isSpanish ? 'estudiantes' : 'students'}</span>
${commission.teacher_name ? `<span class="badge bg-secondary ms-2">${commission.teacher_name}</span>` : ''}
</label>
</div>
@@ -389,46 +332,21 @@ const response = await fetch('/api/genetic/commissions');
commissionsList.innerHTML = commissionsHtml;
} else {
commissionsList.innerHTML = `
<div class="col-12 text-center text-muted">
<i class="fas fa-info-circle me-2"></i>
No active commissions found.
<div class="col-12 text-center text-muted py-5">
<i class="bi bi-inbox fs-1 d-block mb-2"></i>
${isSpanish ? 'No se encontraron comisiones activas.' : 'No active commissions found.'}
</div>
`;
}
} catch (error) {
console.error('Error loading commissions:', error);
document.getElementById('commissions-list').innerHTML = `
<div class="col-12 text-center text-danger">
<i class="fas fa-exclamation-triangle me-2"></i>
Error loading commissions: ${error.message}
<div class="col-12 text-center text-danger py-4">
<i class="bi bi-exclamation-triangle fs-2 d-block mb-2"></i>
Error al cargar comisiones: ${error.message}
</div>
`;
}
}
// Override the genetic algorithm status handler
const originalGetAlgorithmStatus = geneticManager.getAlgorithmStatus;
geneticManager.getAlgorithmStatus = async function() {
try {
const result = await originalGetAlgorithmStatus.call(this);
if (result.success) {
const data = result.data;
document.getElementById('available-classrooms').textContent = data.system_status.available_classrooms;
document.getElementById('active-commissions').textContent = data.system_status.active_commissions;
document.getElementById('existing-reservations').textContent = data.system_status.confirmed_reservations;
}
} catch (error) {
console.error('Error updating algorithm status:', error);
}
};
// Override the loading function to use our custom spinner
geneticManager.showLoading = function(show) {
const spinner = document.getElementById('loading-spinner');
if (spinner) {
spinner.style.display = show ? 'flex' : 'none';
}
};
</script>
{% endblock %}