139 lines
4.7 KiB
HTML
139 lines
4.7 KiB
HTML
{#
|
|
EXEMPLE D'UTILISATION des composants class/
|
|
Ce fichier montre comment utiliser les macros class_stats_card et trimester_nav
|
|
#}
|
|
|
|
{# Importer les composants #}
|
|
{% from 'components/class/class_stats_card.html' import class_stats_card %}
|
|
{% from 'components/class/trimester_nav.html' import trimester_nav %}
|
|
|
|
{# EXEMPLE 1 : Navigation par trimestre avec badges #}
|
|
<section class="mb-8">
|
|
{{ trimester_nav(
|
|
class_id=42,
|
|
base_url=url_for('classes.class_detail', class_id=42),
|
|
selected_trimester=2,
|
|
badges={1: 4, 2: 3, 3: 2, 'global': 9}
|
|
) }}
|
|
</section>
|
|
|
|
{# EXEMPLE 2 : Grille de cards de statistiques #}
|
|
<section class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-6">
|
|
|
|
{# Card Évaluations (quantity) #}
|
|
{{ class_stats_card(
|
|
type='quantity',
|
|
data={
|
|
"total": 8,
|
|
"completed": 6,
|
|
"in_progress": 2,
|
|
"not_started": 0
|
|
},
|
|
expanded=False
|
|
) }}
|
|
|
|
{# Card Domaines (domains) #}
|
|
{{ class_stats_card(
|
|
type='domains',
|
|
data=[
|
|
{"name": "Nombres et calculs", "color": "#3B82F6", "total_points": 45.0, "elements_count": 12},
|
|
{"name": "Géométrie", "color": "#10B981", "total_points": 38.5, "elements_count": 9},
|
|
{"name": "Grandeurs et mesures", "color": "#F59E0B", "total_points": 22.0, "elements_count": 6},
|
|
{"name": "Organisation et gestion de données", "color": "#EF4444", "total_points": 15.5, "elements_count": 4}
|
|
],
|
|
expanded=True
|
|
) }}
|
|
|
|
{# Card Compétences (competences) #}
|
|
{{ class_stats_card(
|
|
type='competences',
|
|
data=[
|
|
{"name": "Chercher", "color": "#8B5CF6", "total_points": 25.0, "elements_count": 6},
|
|
{"name": "Modéliser", "color": "#06B6D4", "total_points": 20.0, "elements_count": 5},
|
|
{"name": "Représenter", "color": "#84CC16", "total_points": 18.0, "elements_count": 4},
|
|
{"name": "Calculer", "color": "#F97316", "total_points": 22.0, "elements_count": 7},
|
|
{"name": "Communiquer", "color": "#EC4899", "total_points": 16.0, "elements_count": 3}
|
|
]
|
|
) }}
|
|
|
|
{# Card Résultats (results) #}
|
|
{{ class_stats_card(
|
|
type='results',
|
|
data={
|
|
"mean": 14.2,
|
|
"median": 15.0,
|
|
"distribution": [0, 1, 3, 8, 12, 6, 2, 0],
|
|
"min": 8.0,
|
|
"max": 20.0
|
|
}
|
|
) }}
|
|
|
|
</section>
|
|
|
|
{# EXEMPLE 3 : Usage avancé avec trimestres colorés #}
|
|
<section class="mt-8">
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">Statistiques par trimestre</h2>
|
|
|
|
{% for trimester in [1, 2, 3] %}
|
|
<div class="mb-6">
|
|
{{ trimester_nav(
|
|
class_id=42,
|
|
base_url=url_for('classes.class_detail', class_id=42),
|
|
selected_trimester=trimester,
|
|
badges={1: 4, 2: 3, 3: 2, 'global': 9}
|
|
) }}
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
|
{{ class_stats_card(
|
|
type='quantity',
|
|
data={
|
|
"total": [4, 3, 2][loop.index0],
|
|
"completed": [3, 2, 1][loop.index0],
|
|
"in_progress": [1, 1, 1][loop.index0],
|
|
"not_started": [0, 0, 0][loop.index0]
|
|
}
|
|
) }}
|
|
|
|
{{ class_stats_card(
|
|
type='results',
|
|
data={
|
|
"mean": [13.5, 14.8, 15.1][loop.index0],
|
|
"median": [14.0, 15.5, 15.0][loop.index0],
|
|
"distribution": [[0, 2, 4, 6, 8, 4, 1, 0], [0, 1, 2, 5, 10, 7, 3, 0], [0, 0, 1, 3, 8, 9, 4, 1]][loop.index0],
|
|
"min": [7.0, 9.5, 10.0][loop.index0],
|
|
"max": [18.5, 19.0, 20.0][loop.index0]
|
|
}
|
|
) }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
|
|
{# JavaScript global requis #}
|
|
<script>
|
|
// JavaScript pour les interactions des composants
|
|
// (Déjà inclus dans chaque composant, mais peut être externalisé)
|
|
|
|
// Fonction globale pour gérer les stats cards
|
|
function initializeStatsCards() {
|
|
document.querySelectorAll('.stats-card').forEach(card => {
|
|
const expandBtn = card.querySelector('.expand-btn');
|
|
if (expandBtn) {
|
|
expandBtn.addEventListener('click', () => toggleStatsCard(expandBtn));
|
|
}
|
|
});
|
|
}
|
|
|
|
// Fonction globale pour gérer la navigation trimestre
|
|
function initializeTrimesterNav() {
|
|
document.querySelectorAll('.trimester-nav .tab-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => navigateToTrimester(btn));
|
|
});
|
|
}
|
|
|
|
// Initialisation au chargement de la page
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initializeStatsCards();
|
|
initializeTrimesterNav();
|
|
});
|
|
</script> |