209 lines
10 KiB
HTML
209 lines
10 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ title }} - Gestion Scolaire{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="mb-6">
|
|
<a href="{{ url_for('classes') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
|
|
← Retour aux classes
|
|
</a>
|
|
</div>
|
|
|
|
<div class="bg-white shadow rounded-lg">
|
|
<div class="px-6 py-4 border-b border-gray-200">
|
|
<h1 class="text-xl font-semibold text-gray-900">{{ title }}</h1>
|
|
{% if is_edit %}
|
|
<p class="text-sm text-gray-600 mt-1">Modifiez les informations de votre classe</p>
|
|
{% else %}
|
|
<p class="text-sm text-gray-600 mt-1">Créez une nouvelle classe pour vos élèves</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<form method="POST"
|
|
action="{% if is_edit %}{{ url_for('classes.update', id=class_group.id) }}{% else %}{{ url_for('classes.create') }}{% endif %}"
|
|
class="px-6 py-6 space-y-8" novalidate>
|
|
{{ form.hidden_tag() }}
|
|
|
|
<!-- Messages flash -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="space-y-3">
|
|
{% for category, message in messages %}
|
|
<div class="p-4 rounded-lg border-l-4 {% if category == 'error' %}bg-red-50 border-red-500 text-red-800{% else %}bg-green-50 border-green-500 text-green-800{% endif %}">
|
|
<div class="flex items-start">
|
|
{% if category == 'error' %}
|
|
<svg class="w-5 h-5 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{% else %}
|
|
<svg class="w-5 h-5 mt-0.5 mr-3 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{% endif %}
|
|
<p class="font-medium">{{ message }}</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Section Informations de la classe -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
|
|
<h2 class="text-lg font-medium text-blue-900 mb-4">🏫 Informations de la classe</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label for="{{ form.name.id }}" class="block text-sm font-medium text-gray-700 mb-1">
|
|
{{ form.name.label.text }}
|
|
</label>
|
|
{{ form.name(class="block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500", placeholder="Ex: 6ème A, 5ème B, Terminale S1...") }}
|
|
{% if form.name.errors %}
|
|
<div class="mt-1 text-sm text-red-600">
|
|
{% for error in form.name.errors %}
|
|
<p>{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="{{ form.year.id }}" class="block text-sm font-medium text-gray-700 mb-1">
|
|
{{ form.year.label.text }}
|
|
</label>
|
|
{{ form.year(class="block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500", placeholder="Ex: 2024-2025") }}
|
|
{% if form.year.errors %}
|
|
<div class="mt-1 text-sm text-red-600">
|
|
{% for error in form.year.errors %}
|
|
<p>{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<label for="{{ form.description.id }}" class="block text-sm font-medium text-gray-700 mb-1">
|
|
{{ form.description.label.text }}
|
|
<span class="text-gray-500 font-normal">(optionnel)</span>
|
|
</label>
|
|
{{ form.description(class="block w-full border border-gray-300 rounded-md px-3 py-2 focus:ring-blue-500 focus:border-blue-500", rows="3", placeholder="Description de la classe, remarques particulières...") }}
|
|
{% if form.description.errors %}
|
|
<div class="mt-1 text-sm text-red-600">
|
|
{% for error in form.description.errors %}
|
|
<p>{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions du formulaire -->
|
|
<div class="flex items-center justify-between pt-6 border-t border-gray-200">
|
|
<a href="{{ url_for('classes') }}"
|
|
class="inline-flex items-center px-6 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 transition-colors">
|
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
|
</svg>
|
|
Annuler
|
|
</a>
|
|
|
|
<button type="submit"
|
|
class="inline-flex items-center px-8 py-3 bg-blue-600 hover:bg-blue-700 text-base font-medium rounded-lg text-white hover:shadow-lg transition-all duration-200">
|
|
{% if is_edit %}
|
|
<svg class="w-5 h-5 mr-2" 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 la classe
|
|
{% else %}
|
|
<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 la classe
|
|
{% endif %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript pour validation côté client -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.querySelector('form');
|
|
const nameField = document.getElementById('{{ form.name.id }}');
|
|
const yearField = document.getElementById('{{ form.year.id }}');
|
|
|
|
// Validation en temps réel du nom de classe
|
|
nameField.addEventListener('blur', function() {
|
|
if (this.value.length < 2) {
|
|
showFieldError(this, 'Le nom de la classe doit contenir au moins 2 caractères');
|
|
} else {
|
|
clearFieldError(this);
|
|
}
|
|
});
|
|
|
|
// Validation du format de l'année scolaire
|
|
yearField.addEventListener('blur', function() {
|
|
const yearPattern = /^\d{4}-\d{4}$/;
|
|
if (!yearPattern.test(this.value)) {
|
|
showFieldError(this, 'Format attendu: YYYY-YYYY (ex: 2024-2025)');
|
|
} else {
|
|
clearFieldError(this);
|
|
}
|
|
});
|
|
|
|
function showFieldError(field, message) {
|
|
clearFieldError(field);
|
|
field.classList.add('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
|
|
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'text-sm text-red-600 flex items-center mt-1 field-error';
|
|
errorDiv.innerHTML = `
|
|
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
|
</svg>
|
|
${message}
|
|
`;
|
|
field.parentNode.appendChild(errorDiv);
|
|
}
|
|
|
|
function clearFieldError(field) {
|
|
field.classList.remove('border-red-500', 'focus:border-red-500', 'focus:ring-red-500');
|
|
const existingError = field.parentNode.querySelector('.field-error');
|
|
if (existingError) {
|
|
existingError.remove();
|
|
}
|
|
}
|
|
|
|
// Soumission du formulaire avec validation
|
|
form.addEventListener('submit', function(e) {
|
|
let hasErrors = false;
|
|
|
|
// Validation du nom
|
|
if (nameField.value.length < 2) {
|
|
showFieldError(nameField, 'Le nom de la classe est obligatoire');
|
|
hasErrors = true;
|
|
}
|
|
|
|
// Validation de l'année
|
|
const yearPattern = /^\d{4}-\d{4}$/;
|
|
if (!yearPattern.test(yearField.value)) {
|
|
showFieldError(yearField, 'Format d\'année invalide (ex: 2024-2025)');
|
|
hasErrors = true;
|
|
}
|
|
|
|
if (hasErrors) {
|
|
e.preventDefault();
|
|
// Scroll vers le premier champ en erreur
|
|
const firstError = form.querySelector('.border-red-500');
|
|
if (firstError) {
|
|
firstError.focus();
|
|
firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |