diff --git a/templates/assessment_grading.html b/templates/assessment_grading.html index 020f44f..06193d7 100644 --- a/templates/assessment_grading.html +++ b/templates/assessment_grading.html @@ -23,7 +23,7 @@
F1 : Afficher/Masquer cette aide
-
+
@@ -34,29 +34,6 @@
- {% if not grading_elements %} -
-
-
- - - -
-
-

Aucun élément de notation

-
-

Cette évaluation n'a pas encore d'éléments de notation configurés. Vous devez d'abord créer des exercices et leurs éléments de notation.

-
-
- - Configurer l'évaluation → - -
-
-
-
- {% else %} -
@@ -88,7 +65,44 @@
-
+
+
+ + + {% if not grading_elements %} +
+
+
+ + + +
+
+

Aucun élément de notation

+
+

Cette évaluation n'a pas encore d'éléments de notation configurés. Vous devez d'abord créer des exercices et leurs éléments de notation.

+
+
+ + Configurer l'évaluation → + +
+
+
+
+ {% else %} + + +
+
+

Grille de notation

+
+ @@ -98,49 +112,11 @@
-
- - -
-
-
-

Filtrer les élèves

- {{ students|length }} élève(s) -
-
-
-
- -
- - - -
- -
-
-
- - -
-
-

Grille de notation

-
-
- - - +
+
+ + - + {% set current_exercise = '' %} {% for element in grading_elements %} @@ -309,6 +307,61 @@ + + + {% endif %} @@ -409,7 +462,11 @@ function setupKeyboardNavigation() { // Ctrl+S : Sauvegarder if (e.ctrlKey && e.key === 's') { e.preventDefault(); - saveForm(); + if (isFullscreen) { + saveFormFromFullscreen(); + } else { + saveForm(); + } } // Ctrl+Z : Annuler dernière modification @@ -785,6 +842,75 @@ function saveForm() { }, 500); } +// Sauvegarder depuis le mode plein écran +function saveFormFromFullscreen() { + const form = document.getElementById('grading-form'); + const saveButtonFs = document.getElementById('save-button-fs'); + const saveTextFs = document.getElementById('save-text-fs'); + const saveSpinnerFs = document.getElementById('save-spinner-fs'); + + if (!form) { + console.error('Formulaire non trouvé'); + showToast('Erreur : formulaire non trouvé', 'error'); + return; + } + + // Animation de sauvegarde en mode plein écran + if (saveButtonFs) { + saveButtonFs.disabled = true; + if (saveTextFs) saveTextFs.textContent = 'Sauvegarde...'; + if (saveSpinnerFs) saveSpinnerFs.classList.remove('hidden'); + } + + // Synchroniser les données du mode plein écran vers le formulaire original + syncDataFromFullscreenToOriginal(); + + // Soumettre le formulaire original + setTimeout(() => { + form.submit(); + }, 500); +} + +// Synchroniser les données entre le mode plein écran et le formulaire original +function syncDataFromFullscreenToOriginal() { + if (!isFullscreen || !fullscreenOverlay) return; + + // Synchroniser tous les champs de saisie + const fsInputs = fullscreenOverlay.querySelectorAll('.grading-input, .comment-input'); + + fsInputs.forEach(fsInput => { + const name = fsInput.name; + if (name) { + const originalInput = document.querySelector(`[name="${name}"]`); + if (originalInput) { + originalInput.value = fsInput.value; + } + } + }); + + console.log('Données synchronisées du plein écran vers le formulaire original'); +} + +// Synchroniser les données du formulaire original vers le mode plein écran +function syncDataFromOriginalToFullscreen() { + if (!isFullscreen || !fullscreenOverlay) return; + + // Synchroniser tous les champs de saisie + const originalInputs = document.querySelectorAll('#grading-form .grading-input, #grading-form .comment-input'); + + originalInputs.forEach(originalInput => { + const name = originalInput.name; + if (name) { + const fsInput = fullscreenOverlay.querySelector(`[name="${name}"]`); + if (fsInput) { + fsInput.value = originalInput.value; + } + } + }); + + console.log('Données synchronisées du formulaire original vers le plein écran'); +} + // Afficher/Masquer l'aide clavier function toggleKeyboardHelp() { const help = document.getElementById('keyboard-help'); @@ -1031,6 +1157,192 @@ function clearStudentFilter() { } } +// Gestion du mode plein écran +let isFullscreen = false; +let fullscreenOverlay = null; + +function toggleFullscreen() { + const btn = document.getElementById('fullscreen-btn'); + const btnText = btn.querySelector('span'); + const btnIcon = btn.querySelector('svg path'); + const tableContainer = document.querySelector('.bg-white.shadow.rounded-lg'); + + if (!isFullscreen) { + // Créer l'overlay plein écran + fullscreenOverlay = document.createElement('div'); + fullscreenOverlay.className = 'fullscreen-overlay'; + + // Créer la structure plein écran optimisée + fullscreenOverlay.innerHTML = ` +
+ +
+
+

Grille de notation

+
+ + +
+
Progression :
+
0 / {{ (students|length * grading_elements|length) }} champs
+
+
+
+
+ + +
+ +
+ + +
+
+
+
+ + Non sauvegardé +
+
+
+ + +
+
+
+
+ `; + + // Cloner seulement le contenu du tableau (table) + const originalTable = tableContainer.querySelector('table'); + const tableClone = originalTable.cloneNode(true); + const fsTableContainer = fullscreenOverlay.querySelector('.grading-table-container'); + fsTableContainer.appendChild(tableClone); + + // Synchroniser les valeurs actuelles du formulaire vers le clone + syncDataFromOriginalToFullscreen(); + + // Ajouter l'overlay au body + document.body.appendChild(fullscreenOverlay); + document.body.classList.add('fullscreen-mode'); + + // Masquer le conteneur original + tableContainer.style.display = 'none'; + + // Mettre à jour le bouton + btnText.textContent = 'Quitter'; + btnIcon.setAttribute('d', 'M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3'); + btn.title = 'Quitter le plein écran'; + btn.classList.remove('bg-purple-100', 'hover:bg-purple-200', 'text-purple-800'); + btn.classList.add('bg-red-100', 'hover:bg-red-200', 'text-red-800'); + + // Réinitialiser les événements JavaScript sur la copie + setupFullscreenEvents(); + + isFullscreen = true; + } else { + // Supprimer l'overlay + if (fullscreenOverlay) { + document.body.removeChild(fullscreenOverlay); + fullscreenOverlay = null; + } + document.body.classList.remove('fullscreen-mode'); + + // Réafficher le conteneur original + const tableContainer = document.querySelector('.bg-white.shadow.rounded-lg'); + tableContainer.style.display = ''; + + // Mettre à jour le bouton + btnText.textContent = 'Plein écran'; + btnIcon.setAttribute('d', 'M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4'); + btn.title = 'Passer en plein écran'; + btn.classList.remove('bg-red-100', 'hover:bg-red-200', 'text-red-800'); + btn.classList.add('bg-purple-100', 'hover:bg-purple-200', 'text-purple-800'); + + isFullscreen = false; + } +} + +function setupFullscreenEvents() { + if (!fullscreenOverlay) return; + + // Réattacher les événements nécessaires + const filterInput = fullscreenOverlay.querySelector('#student-filter'); + if (filterInput) { + setupStudentFilterForOverlay(filterInput); + } + + // Synchroniser l'indicateur de progression + const originalIndicator = document.getElementById('progress-indicator'); + const fsIndicator = fullscreenOverlay.querySelector('#progress-indicator-fs'); + if (originalIndicator && fsIndicator) { + fsIndicator.textContent = originalIndicator.textContent; + fsIndicator.className = originalIndicator.className; + } + + // Réattacher les événements sur les champs de saisie en mode plein écran + const fsInputs = fullscreenOverlay.querySelectorAll('.grading-input, .comment-input'); + fsInputs.forEach(input => { + if (input.classList.contains('grading-input')) { + // Événements pour les champs de notation + input.addEventListener('input', function() { handleGradeChange(this); }); + input.addEventListener('change', function() { handleGradeChange(this); }); + input.addEventListener('focus', function() { handleGradeFocus(this); }); + input.addEventListener('keydown', function(e) { handleGradeKeydown(e, this); }); + } else if (input.classList.contains('comment-input')) { + // Événements pour les commentaires + input.addEventListener('keydown', function(e) { handleCommentKeydown(e, this); }); + } + }); + + // Appliquer les couleurs initiales aux champs pré-remplis + applyInitialColors(); +} + +function setupStudentFilterForOverlay(filterInput) { + // Réimplémentation simplifiée du filtre pour l'overlay + filterInput.addEventListener('input', function() { + const searchTerm = this.value.toLowerCase().trim(); + const rows = fullscreenOverlay.querySelectorAll('.student-row'); + let visibleCount = 0; + + rows.forEach(row => { + const studentName = row.dataset.studentName; + const isVisible = !searchTerm || studentName.includes(searchTerm); + row.style.display = isVisible ? '' : 'none'; + if (isVisible) visibleCount++; + }); + + const studentCount = fullscreenOverlay.querySelector('#student-count'); + if (studentCount) { + studentCount.textContent = `${visibleCount} / ${rows.length} élève(s)`; + } + }); +} + +// Raccourci clavier pour le plein écran (F11 ou Échap pour quitter) +document.addEventListener('keydown', function(e) { + if (e.key === 'F11') { + e.preventDefault(); + toggleFullscreen(); + } else if (e.key === 'Escape' && isFullscreen) { + e.preventDefault(); + toggleFullscreen(); + } +}); + // Gestion de la fermeture de la page avec modifications non sauvegardées window.addEventListener('beforeunload', function(e) { if (unsavedChanges.size > 0) { @@ -1039,4 +1351,4 @@ window.addEventListener('beforeunload', function(e) { } }); -{% endblock %} \ No newline at end of file +{% endblock %}
Élève @@ -164,10 +140,32 @@
- + +
+ +
+ + + +
+ +
+
+ {{ students|length }} élève(s) +