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

fix contract

Browse Source
This commit is contained in:
Alejandro Vazquez
2026-04-09 22:31:33 -03:00
parent 18f1d3a8c3
commit 0e39bf28e8
14 changed files with 2594 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/genetic_optimizer.html
+434
View File
@@ -0,0 +1,434 @@
{% extends "base.html" %}
{% block title %}AI Room Reservation Optimizer{% endblock %}
{% block extra_css %}
<style>
.optimization-card {
transition: transform 0.2s ease-in-out;
}
.optimization-card:hover {
transform: translateY(-2px);
}
.commission-item {
border-left: 4px solid #007bff;
transition: all 0.2s ease;
}
.commission-item:hover {
border-left-color: #0056b3;
background-color: #f8f9fa;
}
.commission-item.selected {
border-left-color: #28a745;
background-color: #d4edda;
}
.algorithm-status {
position: sticky;
top: 20px;
}
.loading-spinner {
display: none;
}
.spinner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
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;
}
</style>
{% endblock %}
{% block content %}
<div class="container-fluid">
<!-- Header -->
<div class="row mb-4">
<div class="col-12">
<div class="card bg-primary text-white">
<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>
</div>
</div>
</div>
<!-- Algorithm Status Card -->
<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
</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>
<span class="badge bg-success" id="available-classrooms">--</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span>Active Commissions</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>
<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>
<span class="text-muted">50</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span>Generations</span>
<span class="text-muted">100</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span>Mutation Rate</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
</button>
</div>
</div>
</div>
<!-- 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
</h5>
</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>
</div>
</div>
</div>
</div>
</div>
<!-- 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
</h5>
</div>
<div class="card-body">
<div class="row align-items-center">
<div class="col-md-6">
<div class="mb-3">
<label for="start-date" class="form-label">Start Date Range</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>
<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>
<button class="btn btn-success" id="optimize-assignments-btn">
<i class="fas fa-rocket me-2"></i>
Run Full Optimization
</button>
<button class="btn btn-warning" id="apply-optimization-btn" style="display: none;">
<i class="fas fa-check me-2"></i>
Apply Reservations
</button>
<button class="btn btn-secondary" onclick="resetOptimization()">
<i class="fas fa-undo me-2"></i>
Reset
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 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>
</div>
<!-- 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>
</div>
<!-- Details Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1" aria-labelledby="detailsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="detailsModalLabel">Reservation Details</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 -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="downloadReservations()">
<i class="fas fa-download me-2"></i>
Download
</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% 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 => {
cb.checked = true;
updateCommissionCard(cb.value, true);
});
}
function deselectAllCommissions() {
const checkboxes = document.querySelectorAll('input[name="commission_ids"]');
checkboxes.forEach(cb => {
cb.checked = false;
updateCommissionCard(cb.value, false);
});
}
function updateCommissionCard(commissionId, selected) {
const card = document.querySelector(`[data-commission-id="${commissionId}"]`);
if (card) {
if (selected) {
card.classList.add('selected');
} else {
card.classList.remove('selected');
}
}
}
function filterCommissions() {
// Implement filtering logic
console.log('Filter commissions feature not implemented yet');
}
function resetOptimization() {
deselectAllCommissions();
geneticManager.clearResults();
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();
});
async function loadCommissions() {
try {
const response = await fetch('/api/commissions');
const data = await response.json();
const commissionsList = document.getElementById('commissions-list');
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-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>
<br>
<small class="text-muted">${commission.subject?.name || 'Unknown Subject'}</small>
<br>
<span class="badge bg-info">${commission.current_students || 0}/${commission.max_students} students</span>
${commission.teacher_name ? `<span class="badge bg-secondary ms-2">${commission.teacher_name}</span>` : ''}
</label>
</div>
</div>
</div>
</div>
`).join('');
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>
`;
}
} 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>
`;
}
}
// 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 %}