125 lines
7.8 KiB
HTML
125 lines
7.8 KiB
HTML
{# Composant pour carte de classe dans la liste #}
|
|
|
|
{% macro class_card(class) %}
|
|
{# Extraire le niveau de classe du nom (ex: "6ème A" -> 6, "Terminale S" -> "T") #}
|
|
{% set class_level = class.name[0] | int if class.name[0].isdigit() else ('T' if class.name.startswith('T') or class.name.startswith('t') else 'unknown') %}
|
|
{% set year_colors = {
|
|
6: {'bg': 'from-blue-500 to-blue-600', 'accent': 'blue', 'icon_bg': 'bg-blue-100', 'icon_text': 'text-blue-600'},
|
|
5: {'bg': 'from-green-500 to-green-600', 'accent': 'green', 'icon_bg': 'bg-green-100', 'icon_text': 'text-green-600'},
|
|
4: {'bg': 'from-purple-500 to-purple-600', 'accent': 'purple', 'icon_bg': 'bg-purple-100', 'icon_text': 'text-purple-600'},
|
|
3: {'bg': 'from-orange-500 to-orange-600', 'accent': 'orange', 'icon_bg': 'bg-orange-100', 'icon_text': 'text-orange-600'},
|
|
2: {'bg': 'from-red-500 to-red-600', 'accent': 'red', 'icon_bg': 'bg-red-100', 'icon_text': 'text-red-600'},
|
|
1: {'bg': 'from-pink-500 to-pink-600', 'accent': 'pink', 'icon_bg': 'bg-pink-100', 'icon_text': 'text-pink-600'},
|
|
'T': {'bg': 'from-indigo-500 to-indigo-600', 'accent': 'indigo', 'icon_bg': 'bg-indigo-100', 'icon_text': 'text-indigo-600'},
|
|
'unknown': {'bg': 'from-gray-500 to-gray-600', 'accent': 'gray', 'icon_bg': 'bg-gray-100', 'icon_text': 'text-gray-600'}
|
|
} %}
|
|
{% set year_config = year_colors.get(class_level, year_colors['unknown']) %}
|
|
|
|
<div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 overflow-hidden flex flex-col">
|
|
<!-- Header avec nom de classe et année (couleur selon niveau) -->
|
|
<div class="bg-gradient-to-r {{ year_config.bg }} p-4 text-white">
|
|
<div class="flex items-center justify-between">
|
|
<!-- Nom de classe (élément principal) -->
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
|
|
<span class="text-lg font-black">{{ class.name[:2] }}</span>
|
|
</div>
|
|
<div>
|
|
<div class="text-xl md:text-2xl font-black">{{ class.name }}</div>
|
|
<div class="text-sm opacity-90">{{ class.year }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Indicateur nombre d'élèves -->
|
|
<div class="bg-white/20 px-3 py-2 rounded-full">
|
|
<div class="flex items-center space-x-2 text-sm font-medium">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
|
|
</svg>
|
|
<span>{{ class.students|length }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contenu principal -->
|
|
<div class="p-4 flex flex-col justify-between flex-1">
|
|
<!-- Description (si présente) -->
|
|
{% if class.description %}
|
|
<p class="text-sm text-gray-600 mb-4 line-clamp-2 italic">{{ class.description }}</p>
|
|
{% else %}
|
|
<p class="text-sm text-gray-400 mb-4 italic">Aucune description</p>
|
|
{% endif %}
|
|
|
|
<div class="flex flex-col">
|
|
<!-- Meta informations -->
|
|
<div class="flex flex-wrap items-center gap-3 text-xs font-medium text-gray-600 mb-4">
|
|
<div class="flex items-center space-x-1">
|
|
<span class="w-2 h-2 bg-{{ year_config.accent }}-400 rounded-full"></span>
|
|
{% if class_level == 'T' %}
|
|
<span>Terminale</span>
|
|
{% elif class_level == 'unknown' %}
|
|
<span>Non reconnu</span>
|
|
{% else %}
|
|
<span>Niveau {{ class_level }}ème</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex items-center space-x-1">
|
|
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"/>
|
|
</svg>
|
|
<span>{{ class.students|length }} élève{{ 's' if class.students|length != 1 else '' }}</span>
|
|
</div>
|
|
{% if class.students|length > 0 %}
|
|
<div class="bg-{{ year_config.accent }}-100 text-{{ year_config.accent }}-800 px-2 py-1 rounded-full">
|
|
<span>Active</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="bg-gray-100 text-gray-600 px-2 py-1 rounded-full">
|
|
<span>Vide</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Actions principales -->
|
|
<div class="grid grid-cols-2 gap-2 mb-3">
|
|
<a href="{{ url_for('students') }}?class_id={{ class.id }}"
|
|
class="bg-{{ year_config.accent }}-50 hover:bg-{{ year_config.accent }}-100 text-{{ year_config.accent }}-700 hover:text-{{ year_config.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="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
|
|
</svg>
|
|
{{ class.students|length }} Élèves
|
|
</a>
|
|
|
|
<a href="{{ url_for('assessments.list') }}?class={{ class.id }}"
|
|
class="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="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>
|
|
Évaluations
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Actions secondaires -->
|
|
<div class="pt-2 border-t border-gray-100 flex gap-2">
|
|
<a href="{{ url_for('classes.edit', id=class.id) }}"
|
|
class="flex-1 text-center text-gray-600 hover:text-blue-700 text-xs font-medium transition-colors flex items-center justify-center py-2 hover:bg-blue-50 rounded-lg">
|
|
<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>
|
|
Modifier
|
|
</a>
|
|
|
|
<button onclick="confirmDeleteClass('{{ class.id }}', '{{ class.name }}', {{ class.students|length }}, {{ class.assessments|length }})"
|
|
class="flex-1 text-center text-gray-500 hover:text-red-700 text-xs font-medium transition-colors flex items-center justify-center py-2 hover:bg-red-50 rounded-lg">
|
|
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
|
</svg>
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %} |