feat: improve assessments page
This commit is contained in:
@@ -11,8 +11,43 @@ bp = Blueprint('assessments', __name__, url_prefix='/assessments')
|
|||||||
@handle_db_errors
|
@handle_db_errors
|
||||||
def list():
|
def list():
|
||||||
from sqlalchemy.orm import joinedload
|
from sqlalchemy.orm import joinedload
|
||||||
assessments = Assessment.query.options(joinedload(Assessment.class_group)).order_by(Assessment.date.desc()).all()
|
|
||||||
return render_template('assessments.html', assessments=assessments)
|
# Récupérer les paramètres de filtrage
|
||||||
|
trimester_filter = request.args.get('trimester', '')
|
||||||
|
class_filter = request.args.get('class', '')
|
||||||
|
sort_by = request.args.get('sort', 'date_desc')
|
||||||
|
|
||||||
|
# Construire la requête de base
|
||||||
|
query = Assessment.query.options(joinedload(Assessment.class_group))
|
||||||
|
|
||||||
|
# Appliquer les filtres
|
||||||
|
if trimester_filter:
|
||||||
|
query = query.filter(Assessment.trimester == int(trimester_filter))
|
||||||
|
|
||||||
|
if class_filter:
|
||||||
|
query = query.filter(Assessment.class_group_id == int(class_filter))
|
||||||
|
|
||||||
|
# Appliquer le tri
|
||||||
|
if sort_by == 'date_desc':
|
||||||
|
query = query.order_by(Assessment.date.desc())
|
||||||
|
elif sort_by == 'date_asc':
|
||||||
|
query = query.order_by(Assessment.date.asc())
|
||||||
|
elif sort_by == 'title':
|
||||||
|
query = query.order_by(Assessment.title.asc())
|
||||||
|
elif sort_by == 'class':
|
||||||
|
query = query.join(ClassGroup).order_by(ClassGroup.name.asc())
|
||||||
|
|
||||||
|
assessments = query.all()
|
||||||
|
|
||||||
|
# Récupérer toutes les classes pour le filtre
|
||||||
|
classes = ClassGroup.query.order_by(ClassGroup.name.asc()).all()
|
||||||
|
|
||||||
|
return render_template('assessments.html',
|
||||||
|
assessments=assessments,
|
||||||
|
classes=classes,
|
||||||
|
current_trimester=trimester_filter,
|
||||||
|
current_class=class_filter,
|
||||||
|
current_sort=sort_by)
|
||||||
|
|
||||||
# Route obsolète supprimée - utiliser new_unified à la place
|
# Route obsolète supprimée - utiliser new_unified à la place
|
||||||
|
|
||||||
|
|||||||
@@ -3,76 +3,249 @@
|
|||||||
{% block title %}Évaluations - Gestion Scolaire{% endblock %}
|
{% block title %}Évaluations - Gestion Scolaire{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="space-y-6">
|
<div class="space-y-8">
|
||||||
<div class="flex justify-between items-center">
|
<!-- Hero Section -->
|
||||||
<h1 class="text-2xl font-bold text-gray-900">Gestion des évaluations</h1>
|
<div class="bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-xl p-8 shadow-lg">
|
||||||
<div>
|
<div class="flex items-center justify-between">
|
||||||
<a href="{{ url_for('assessments.new') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
<div>
|
||||||
✨ Nouvelle évaluation
|
<h1 class="text-4xl font-bold mb-2">Mes Évaluations 📚</h1>
|
||||||
</a>
|
<p class="text-xl opacity-90 mb-1">Gérez et organisez toutes vos évaluations</p>
|
||||||
|
<div class="flex items-center space-x-6 text-sm opacity-75 mt-3">
|
||||||
|
<span class="flex items-center">
|
||||||
|
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
|
||||||
|
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 102 0V3a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm2.5 2.5a.5.5 0 000 1h3a.5.5 0 000-1h-3z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
{{ assessments|length }} évaluations
|
||||||
|
</span>
|
||||||
|
<span class="flex items-center">
|
||||||
|
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
Année scolaire 2024-2025
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hidden md:block">
|
||||||
|
<a href="{{ url_for('assessments.new') }}"
|
||||||
|
class="bg-white/20 hover:bg-white/30 text-white px-6 py-3 rounded-xl transition-all duration-300 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 flex items-center">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
Nouvelle évaluation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Filtres et actions -->
|
||||||
|
<div class="bg-white rounded-lg shadow p-6">
|
||||||
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between space-y-4 lg:space-y-0">
|
||||||
|
<div class="flex flex-col md:flex-row md:items-center space-y-3 md:space-y-0 md:space-x-4">
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<label class="text-sm font-medium text-gray-700">Trimestre :</label>
|
||||||
|
<select id="trimester-filter" class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
|
||||||
|
<option value="">Tous</option>
|
||||||
|
<option value="1" {% if current_trimester == '1' %}selected{% endif %}>Trimestre 1</option>
|
||||||
|
<option value="2" {% if current_trimester == '2' %}selected{% endif %}>Trimestre 2</option>
|
||||||
|
<option value="3" {% if current_trimester == '3' %}selected{% endif %}>Trimestre 3</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<label class="text-sm font-medium text-gray-700">Classe :</label>
|
||||||
|
<select id="class-filter" class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
|
||||||
|
<option value="">Toutes</option>
|
||||||
|
{% for class_group in classes %}
|
||||||
|
<option value="{{ class_group.id }}" {% if current_class == class_group.id|string %}selected{% endif %}>
|
||||||
|
{{ class_group.name }}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center space-x-2">
|
||||||
|
<label class="text-sm font-medium text-gray-700">Tri :</label>
|
||||||
|
<select id="sort-filter" class="border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
|
||||||
|
<option value="date_desc" {% if current_sort == 'date_desc' %}selected{% endif %}>Plus récent</option>
|
||||||
|
<option value="date_asc" {% if current_sort == 'date_asc' %}selected{% endif %}>Plus ancien</option>
|
||||||
|
<option value="title" {% if current_sort == 'title' %}selected{% endif %}>Titre A-Z</option>
|
||||||
|
<option value="class" {% if current_sort == 'class' %}selected{% endif %}>Classe</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Compteur de résultats -->
|
||||||
|
<div class="text-sm text-gray-500 font-medium">
|
||||||
|
{{ assessments|length }} évaluation(s)
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="md:hidden">
|
||||||
|
<a href="{{ url_for('assessments.new') }}"
|
||||||
|
class="w-full bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-6 py-3 rounded-xl transition-all duration-300 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105 flex items-center justify-center">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
Nouvelle évaluation
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% if assessments %}
|
{% if assessments %}
|
||||||
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
<!-- Grille d'évaluations modernisée -->
|
||||||
<ul class="divide-y divide-gray-200">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{% for assessment in assessments %}
|
{% for assessment in assessments %}
|
||||||
<li>
|
{% set trimester_colors = {
|
||||||
<div class="px-4 py-4">
|
1: {'bg': 'from-blue-500 to-blue-600', 'accent': 'blue', 'icon_bg': 'bg-blue-100', 'icon_text': 'text-blue-600'},
|
||||||
<div class="flex items-center justify-between">
|
2: {'bg': 'from-green-500 to-green-600', 'accent': 'green', 'icon_bg': 'bg-green-100', 'icon_text': 'text-green-600'},
|
||||||
<div class="flex items-center">
|
3: {'bg': 'from-orange-500 to-orange-600', 'accent': 'orange', 'icon_bg': 'bg-orange-100', 'icon_text': 'text-orange-600'}
|
||||||
<div class="flex-shrink-0">
|
} %}
|
||||||
<div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
|
{% set colors = trimester_colors[assessment.trimester] %}
|
||||||
<svg class="w-5 h-5 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
|
||||||
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
|
<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 overflow-hidden">
|
||||||
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 102 0V3a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm2.5 2.5a.5.5 0 000 1h3a.5.5 0 000-1h-3z" clip-rule="evenodd"/>
|
<!-- Header avec gradient thématique -->
|
||||||
</svg>
|
<div class="bg-gradient-to-r {{ colors.bg }} p-4 text-white">
|
||||||
</div>
|
<div class="flex items-center justify-between">
|
||||||
</div>
|
<div class="flex items-center space-x-3">
|
||||||
<div class="ml-4">
|
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
|
||||||
<div class="text-sm font-medium text-gray-900">{{ assessment.title }}</div>
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<div class="text-sm text-gray-500">
|
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
|
||||||
{{ assessment.class_group.name }} - {{ assessment.date.strftime('%d/%m/%Y') }}
|
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 102 0V3a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm2.5 2.5a.5.5 0 000 1h3a.5.5 0 000-1h-3z" clip-rule="evenodd"/>
|
||||||
- Trimestre {{ assessment.trimester }} - Coefficient {{ assessment.coefficient }}
|
</svg>
|
||||||
</div>
|
|
||||||
{% if assessment.description %}
|
|
||||||
<div class="text-sm text-gray-500 mt-1">{{ assessment.description[:100] }}{% if assessment.description|length > 100 %}...{% endif %}</div>
|
|
||||||
{% endif %}
|
|
||||||
<div class="text-xs text-gray-400 mt-1">
|
|
||||||
{{ assessment.exercises|length }} exercice(s)
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex space-x-2">
|
<div class="text-sm font-semibold">Trimestre {{ assessment.trimester }}</div>
|
||||||
<a href="{{ url_for('assessments.detail', id=assessment.id) }}" class="text-indigo-600 hover:text-indigo-900 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-1 rounded-sm px-1 py-1" aria-label="Voir détails de {{ assessment.title }}">
|
</div>
|
||||||
👁️ Voir détails
|
<div class="text-xs opacity-75">{{ assessment.date.strftime('%d/%m/%Y') }}</div>
|
||||||
</a>
|
</div>
|
||||||
<a href="{{ url_for('grading.assessment_grading', assessment_id=assessment.id) }}" class="text-green-600 hover:text-green-900 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-1 rounded-sm px-1 py-1" aria-label="Saisir notes pour {{ assessment.title }}">
|
</div>
|
||||||
📝 Saisir notes
|
|
||||||
</a>
|
<!-- Contenu principal -->
|
||||||
<a href="{{ url_for('assessments.edit', id=assessment.id) }}" class="text-gray-600 hover:text-gray-900 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-1 rounded-sm px-1 py-1" aria-label="Modifier {{ assessment.title }}">
|
<div class="p-6">
|
||||||
✏️ Modifier
|
<h3 class="text-lg font-bold text-gray-900 mb-2 line-clamp-2">{{ assessment.title }}</h3>
|
||||||
</a>
|
|
||||||
|
<!-- Informations clés -->
|
||||||
|
<div class="space-y-3 mb-4">
|
||||||
|
<div class="flex items-center text-sm text-gray-600">
|
||||||
|
<svg class="w-4 h-4 mr-2 {{ colors.icon_text }}" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||||
|
</svg>
|
||||||
|
<span class="font-medium">{{ assessment.class_group.name }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div class="flex items-center text-sm text-gray-600">
|
||||||
|
<svg class="w-4 h-4 mr-2 {{ colors.icon_text }}" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/>
|
||||||
|
</svg>
|
||||||
|
<span>{{ assessment.exercises|length }} exercice(s)</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-{{ colors.accent }}-100 text-{{ colors.accent }}-800 text-xs px-2 py-1 rounded-full font-medium">
|
||||||
|
Coeff. {{ assessment.coefficient }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
|
||||||
{% endfor %}
|
{% if assessment.description %}
|
||||||
</ul>
|
<p class="text-sm text-gray-600 mb-4 line-clamp-2">{{ assessment.description }}</p>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Actions -->
|
||||||
|
<div class="flex space-x-2">
|
||||||
|
<a href="{{ url_for('assessments.detail', id=assessment.id) }}"
|
||||||
|
class="flex-1 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-900 px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
|
||||||
|
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
Détails
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="{{ url_for('grading.assessment_grading', assessment_id=assessment.id) }}"
|
||||||
|
class="flex-1 bg-{{ colors.accent }}-50 hover:bg-{{ colors.accent }}-100 text-{{ colors.accent }}-700 hover:text-{{ colors.accent }}-900 px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"/>
|
||||||
|
</svg>
|
||||||
|
Noter
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="{{ url_for('assessments.edit', id=assessment.id) }}"
|
||||||
|
class="flex-1 bg-gray-50 hover:bg-gray-100 text-gray-700 hover:text-gray-900 px-3 py-2 rounded-lg text-xs font-medium transition-colors flex items-center justify-center">
|
||||||
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"/>
|
||||||
|
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
Modifier
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="text-center py-12">
|
<!-- État vide amélioré -->
|
||||||
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
|
<div class="bg-white rounded-xl shadow-lg p-12 text-center">
|
||||||
<path d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8m9-16v20m5-14H9m1 4h8m1 2h8m-8 6h8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<div class="w-24 h-24 bg-gradient-to-br from-purple-100 to-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
</svg>
|
<svg class="w-12 h-12 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<h3 class="mt-2 text-sm font-medium text-gray-900">Aucune évaluation</h3>
|
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/>
|
||||||
<p class="mt-1 text-sm text-gray-500">Commencez par créer votre première évaluation.</p>
|
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2v1a1 1 0 102 0V3a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm2.5 2.5a.5.5 0 000 1h3a.5.5 0 000-1h-3z" clip-rule="evenodd"/>
|
||||||
<div class="mt-6">
|
</svg>
|
||||||
<a href="{{ url_for('assessments.new') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md transition-colors text-sm font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
</div>
|
||||||
✨ Créer votre première évaluation
|
|
||||||
|
<h3 class="text-xl font-bold text-gray-900 mb-2">Aucune évaluation créée</h3>
|
||||||
|
<p class="text-gray-600 mb-6 max-w-md mx-auto">
|
||||||
|
Commencez votre gestion d'évaluations en créant votre première évaluation.
|
||||||
|
Vous pourrez y ajouter des exercices et définir le barème directement.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<a href="{{ url_for('assessments.new') }}"
|
||||||
|
class="inline-flex items-center bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white px-6 py-3 rounded-xl transition-all duration-300 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105">
|
||||||
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
Créer ma première évaluation
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<div class="text-sm text-gray-500">
|
||||||
|
<p>💡 <strong>Astuce :</strong> Une évaluation peut contenir plusieurs exercices avec des barèmes différents</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Gestion des filtres
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
const trimesterFilter = document.getElementById('trimester-filter');
|
||||||
|
const classFilter = document.getElementById('class-filter');
|
||||||
|
const sortFilter = document.getElementById('sort-filter');
|
||||||
|
|
||||||
|
function applyFilters() {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
|
||||||
|
if (trimesterFilter.value) {
|
||||||
|
params.set('trimester', trimesterFilter.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (classFilter.value) {
|
||||||
|
params.set('class', classFilter.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sortFilter.value) {
|
||||||
|
params.set('sort', sortFilter.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rediriger avec les nouveaux paramètres
|
||||||
|
const url = new URL(window.location);
|
||||||
|
url.search = params.toString();
|
||||||
|
window.location.href = url.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Écouter les changements sur tous les filtres
|
||||||
|
[trimesterFilter, classFilter, sortFilter].forEach(filter => {
|
||||||
|
filter.addEventListener('change', applyFilters);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
Reference in New Issue
Block a user