feat: improve scale configuration
This commit is contained in:
@@ -69,41 +69,126 @@
|
||||
|
||||
<form method="POST" action="{{ url_for('config.update_scale') }}" class="p-6">
|
||||
|
||||
<!-- Configuration du dégradé de couleurs pour les notes -->
|
||||
<div class="mb-8">
|
||||
<div class="mb-4">
|
||||
<h4 class="text-lg font-medium text-gray-900">🎨 Dégradé de couleurs pour les notes</h4>
|
||||
<p class="text-sm text-gray-500 mt-1">Définissez les couleurs min et max, le dégradé sera calculé automatiquement pour toutes les valeurs intermédiaires</p>
|
||||
</div>
|
||||
|
||||
<!-- Interface sur une ligne : Min - Dégradé - Max -->
|
||||
<div class="bg-white border border-gray-200 rounded-lg p-6">
|
||||
<div class="flex items-center justify-between space-x-6">
|
||||
|
||||
<!-- Couleur minimum (0) -->
|
||||
<div class="flex flex-col items-center space-y-3 min-w-0">
|
||||
<div class="text-center">
|
||||
<div class="text-sm font-medium text-gray-700 mb-1">Note 0</div>
|
||||
<div class="text-xs text-gray-500">Échec</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<input
|
||||
type="color"
|
||||
id="notes_gradient_color_min"
|
||||
name="notes_gradient_color_min"
|
||||
value="{{ notes_gradient.min_color }}"
|
||||
class="w-16 h-16 border-2 border-gray-300 rounded-lg cursor-pointer shadow-sm hover:border-gray-400"
|
||||
onchange="updateNotesGradientPreview()"
|
||||
title="Couleur pour note 0"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="notes_gradient_color_min_text"
|
||||
value="{{ notes_gradient.min_color }}"
|
||||
class="w-20 px-2 py-1 text-xs text-center border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500"
|
||||
pattern="#[0-9a-fA-F]{6}"
|
||||
onchange="syncNotesGradientColor('min')"
|
||||
title="Code couleur hexadécimal"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dégradé visuel -->
|
||||
<div class="flex-1 flex flex-col space-y-3">
|
||||
<div class="text-center">
|
||||
<div class="text-sm font-medium text-gray-700 mb-1">Dégradé automatique</div>
|
||||
<div class="text-xs text-gray-500">Exemples de notes</div>
|
||||
</div>
|
||||
|
||||
<!-- Barre de dégradé -->
|
||||
<div class="w-full">
|
||||
<div id="gradient-bar" class="h-8 rounded-lg shadow-inner bg-gray-200"></div>
|
||||
</div>
|
||||
|
||||
<!-- Exemples de notes positionnés sur le dégradé -->
|
||||
<div class="relative w-full">
|
||||
<!-- Note 5/20 à 25% -->
|
||||
<div class="absolute flex flex-col items-center" style="left: 25%; transform: translateX(-50%);">
|
||||
<div id="notes-preview-25" class="w-8 h-8 rounded border-2 border-white shadow-sm flex items-center justify-center text-white text-xs font-bold">5</div>
|
||||
<span class="text-xs text-gray-600 mt-1">5/20</span>
|
||||
</div>
|
||||
<!-- Note 10/20 à 50% -->
|
||||
<div class="absolute flex flex-col items-center" style="left: 50%; transform: translateX(-50%);">
|
||||
<div id="notes-preview-50" class="w-8 h-8 rounded border-2 border-white shadow-sm flex items-center justify-center text-white text-xs font-bold">10</div>
|
||||
<span class="text-xs text-gray-600 mt-1">10/20</span>
|
||||
</div>
|
||||
<!-- Note 15/20 à 75% -->
|
||||
<div class="absolute flex flex-col items-center" style="left: 75%; transform: translateX(-50%);">
|
||||
<div id="notes-preview-75" class="w-8 h-8 rounded border-2 border-white shadow-sm flex items-center justify-center text-white text-xs font-bold">15</div>
|
||||
<span class="text-xs text-gray-600 mt-1">15/20</span>
|
||||
</div>
|
||||
<!-- Espacement pour les labels -->
|
||||
<div class="h-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Couleur maximum (max) -->
|
||||
<div class="flex flex-col items-center space-y-3 min-w-0">
|
||||
<div class="text-center">
|
||||
<div class="text-sm font-medium text-gray-700 mb-1">Note max</div>
|
||||
<div class="text-xs text-gray-500">Réussite</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<input
|
||||
type="color"
|
||||
id="notes_gradient_color_max"
|
||||
name="notes_gradient_color_max"
|
||||
value="{{ notes_gradient.max_color }}"
|
||||
class="w-16 h-16 border-2 border-gray-300 rounded-lg cursor-pointer shadow-sm hover:border-gray-400"
|
||||
onchange="updateNotesGradientPreview()"
|
||||
title="Couleur pour note maximale"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
id="notes_gradient_color_max_text"
|
||||
value="{{ notes_gradient.max_color }}"
|
||||
class="w-20 px-2 py-1 text-xs text-center border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-purple-500 focus:border-purple-500"
|
||||
pattern="#[0-9a-fA-F]{6}"
|
||||
onchange="syncNotesGradientColor('max')"
|
||||
title="Code couleur hexadécimal"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Échelle numérique -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h4 class="text-lg font-medium text-gray-900">🔢 Échelle numérique</h4>
|
||||
|
||||
<!-- Contrôle d'étendue -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<label for="scale_max" class="text-sm font-medium text-gray-700">
|
||||
Étendue :
|
||||
</label>
|
||||
<select id="scale_max" onchange="updateScaleRange()" class="px-3 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500">
|
||||
{% set current_max = 3 %}
|
||||
{% for value in competence_scale.keys() %}
|
||||
{% if value in [0, 1, 2, 3, 4, 5] %}
|
||||
{% if value > current_max %}
|
||||
{% set current_max = value %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for i in range(2, 6) %}
|
||||
<option value="{{ i }}" {% if i == current_max %}selected{% endif %}>0 à {{ i }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<h4 class="text-lg font-medium text-gray-900">🔢 Échelle numérique (0 à 3)</h4>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-4 mb-4">
|
||||
<p class="text-sm text-gray-600">
|
||||
Configurez chaque niveau de l'échelle numérique. L'étendue actuelle va de 0 à {{ current_max }}.
|
||||
Configurez chaque niveau de l'échelle numérique fixe de 0 à 3.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="numeric-scale" class="space-y-4">
|
||||
{% for value, config in competence_scale.items() %}
|
||||
{% if value in [0, 1, 2, 3, 4, 5] %}
|
||||
{% if value in ['0', '1', '2', '3'] %}
|
||||
<div class="border border-gray-200 rounded-lg p-4" data-numeric-value="{{ value }}">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
@@ -203,7 +288,7 @@
|
||||
|
||||
<div class="space-y-4">
|
||||
{% for value, config in competence_scale.items() %}
|
||||
{% if value not in [0, 1, 2, 3, 4, 5] %}
|
||||
{% if value not in ['0', '1', '2', '3'] %}
|
||||
<div class="border border-gray-200 rounded-lg p-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
@@ -340,7 +425,7 @@
|
||||
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Enregistrer l'échelle
|
||||
Enregistrer les paramètres
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -366,28 +451,256 @@ document.getElementById('scale_{{ value }}_color').addEventListener('input', fun
|
||||
});
|
||||
{% endfor %}
|
||||
|
||||
// Mettre à jour l'étendue de l'échelle
|
||||
function updateScaleRange() {
|
||||
const newMax = parseInt(document.getElementById('scale_max').value);
|
||||
const currentElements = document.querySelectorAll('#numeric-scale [data-numeric-value]');
|
||||
// === GESTION DU DÉGRADÉ DE COULEURS POUR LES NOTES ===
|
||||
|
||||
// Synchroniser les champs de couleur du dégradé des notes
|
||||
function syncNotesGradientColor(type) {
|
||||
const colorPicker = document.getElementById(`notes_gradient_color_${type}`);
|
||||
const colorText = document.getElementById(`notes_gradient_color_${type}_text`);
|
||||
|
||||
// Masquer les éléments au-dessus du nouveau maximum
|
||||
currentElements.forEach(element => {
|
||||
const value = parseInt(element.getAttribute('data-numeric-value'));
|
||||
if (value > newMax) {
|
||||
element.style.display = 'none';
|
||||
} else {
|
||||
element.style.display = 'block';
|
||||
}
|
||||
});
|
||||
|
||||
// Cette fonction pourrait être étendue pour créer dynamiquement de nouveaux éléments
|
||||
if (confirm(`Changer l'étendue à 0-${newMax} ? Cela nécessite une sauvegarde pour créer les nouveaux niveaux.`)) {
|
||||
// Vous pourriez ajouter ici une requête AJAX pour créer les nouveaux niveaux
|
||||
alert('Fonctionnalité à implémenter : création dynamique des nouveaux niveaux');
|
||||
if (colorText.value.match(/^#[0-9a-fA-F]{6}$/)) {
|
||||
colorPicker.value = colorText.value;
|
||||
updateNotesGradientPreview();
|
||||
}
|
||||
}
|
||||
|
||||
// Synchroniser les color pickers avec leurs champs texte
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const minPicker = document.getElementById('notes_gradient_color_min');
|
||||
const maxPicker = document.getElementById('notes_gradient_color_max');
|
||||
|
||||
if (minPicker) {
|
||||
minPicker.addEventListener('input', function() {
|
||||
document.getElementById('notes_gradient_color_min_text').value = this.value;
|
||||
updateNotesGradientPreview();
|
||||
});
|
||||
}
|
||||
|
||||
if (maxPicker) {
|
||||
maxPicker.addEventListener('input', function() {
|
||||
document.getElementById('notes_gradient_color_max_text').value = this.value;
|
||||
updateNotesGradientPreview();
|
||||
});
|
||||
}
|
||||
|
||||
// Initialiser la prévisualisation au chargement
|
||||
updateNotesGradientPreview();
|
||||
});
|
||||
|
||||
// Convertir une couleur hex en RGB
|
||||
function hexToRgb(hex) {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null;
|
||||
}
|
||||
|
||||
// Convertir RGB en hex
|
||||
function rgbToHex(r, g, b) {
|
||||
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
||||
}
|
||||
|
||||
// Convertir RGB vers HSL
|
||||
function rgbToHsl(r, g, b) {
|
||||
r /= 255;
|
||||
g /= 255;
|
||||
b /= 255;
|
||||
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
let h, s, l = (max + min) / 2;
|
||||
|
||||
if (max === min) {
|
||||
h = s = 0; // achromatic
|
||||
} else {
|
||||
const d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
|
||||
switch (max) {
|
||||
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
|
||||
case g: h = (b - r) / d + 2; break;
|
||||
case b: h = (r - g) / d + 4; break;
|
||||
}
|
||||
h /= 6;
|
||||
}
|
||||
|
||||
return { h: h * 360, s: s * 100, l: l * 100 };
|
||||
}
|
||||
|
||||
// Convertir HSL vers RGB
|
||||
function hslToRgb(h, s, l) {
|
||||
h /= 360;
|
||||
s /= 100;
|
||||
l /= 100;
|
||||
|
||||
const hue2rgb = (p, q, t) => {
|
||||
if (t < 0) t += 1;
|
||||
if (t > 1) t -= 1;
|
||||
if (t < 1/6) return p + (q - p) * 6 * t;
|
||||
if (t < 1/2) return q;
|
||||
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
|
||||
let r, g, b;
|
||||
|
||||
if (s === 0) {
|
||||
r = g = b = l; // achromatic
|
||||
} else {
|
||||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
const p = 2 * l - q;
|
||||
r = hue2rgb(p, q, h + 1/3);
|
||||
g = hue2rgb(p, q, h);
|
||||
b = hue2rgb(p, q, h - 1/3);
|
||||
}
|
||||
|
||||
return {
|
||||
r: Math.round(r * 255),
|
||||
g: Math.round(g * 255),
|
||||
b: Math.round(b * 255)
|
||||
};
|
||||
}
|
||||
|
||||
// Interpoler entre deux couleurs en HSL pour un rendu plus naturel
|
||||
function interpolateColorHSL(color1, color2, factor) {
|
||||
const rgb1 = hexToRgb(color1);
|
||||
const rgb2 = hexToRgb(color2);
|
||||
|
||||
if (!rgb1 || !rgb2) return color1;
|
||||
|
||||
const hsl1 = rgbToHsl(rgb1.r, rgb1.g, rgb1.b);
|
||||
const hsl2 = rgbToHsl(rgb2.r, rgb2.g, rgb2.b);
|
||||
|
||||
// Interpolation en HSL
|
||||
let h1 = hsl1.h;
|
||||
let h2 = hsl2.h;
|
||||
|
||||
// Gérer la transition des teintes (éviter le long chemin autour du cercle)
|
||||
let deltaH = h2 - h1;
|
||||
if (deltaH > 180) {
|
||||
h2 -= 360;
|
||||
} else if (deltaH < -180) {
|
||||
h2 += 360;
|
||||
}
|
||||
|
||||
const h = h1 + (h2 - h1) * factor;
|
||||
const s = hsl1.s + (hsl2.s - hsl1.s) * factor;
|
||||
const l = hsl1.l + (hsl2.l - hsl1.l) * factor;
|
||||
|
||||
// Normaliser la teinte
|
||||
const normalizedH = ((h % 360) + 360) % 360;
|
||||
|
||||
const rgb = hslToRgb(normalizedH, s, l);
|
||||
return rgbToHex(rgb.r, rgb.g, rgb.b);
|
||||
}
|
||||
|
||||
// Fonction de compatibilité (utilise maintenant HSL)
|
||||
function interpolateColor(color1, color2, factor) {
|
||||
return interpolateColorHSL(color1, color2, factor);
|
||||
}
|
||||
|
||||
// Calculer la couleur d'une note selon sa valeur relative
|
||||
function calculateNoteColor(note, maxPoints, minColor, maxColor) {
|
||||
if (!minColor || !maxColor || maxPoints <= 0) return '#6b7280'; // Gris par défaut
|
||||
|
||||
const factor = Math.max(0, Math.min(1, note / maxPoints)); // Borner entre 0 et 1
|
||||
return interpolateColor(minColor, maxColor, factor);
|
||||
}
|
||||
|
||||
// Mettre à jour la prévisualisation du dégradé des notes
|
||||
function updateNotesGradientPreview() {
|
||||
const minColor = document.getElementById('notes_gradient_color_min')?.value;
|
||||
const maxColor = document.getElementById('notes_gradient_color_max')?.value;
|
||||
|
||||
if (!minColor || !maxColor) return;
|
||||
|
||||
// Créer une barre de dégradé avec plusieurs stops HSL pour éviter le gris CSS
|
||||
const gradientBar = document.getElementById('gradient-bar');
|
||||
if (gradientBar) {
|
||||
// Créer 10 stops pour un dégradé fluide en HSL
|
||||
const stops = [];
|
||||
for (let i = 0; i <= 10; i++) {
|
||||
const factor = i / 10;
|
||||
const color = interpolateColorHSL(minColor, maxColor, factor);
|
||||
stops.push(`${color} ${factor * 100}%`);
|
||||
}
|
||||
|
||||
gradientBar.style.background = `linear-gradient(to right, ${stops.join(', ')})`;
|
||||
}
|
||||
|
||||
// Exemples sur 20 points (25%, 50%, 75% seulement car 0% et 100% sont déjà visibles)
|
||||
const examples = [
|
||||
{ percent: 0.25, note: 5, id: 'notes-preview-25' },
|
||||
{ percent: 0.5, note: 10, id: 'notes-preview-50' },
|
||||
{ percent: 0.75, note: 15, id: 'notes-preview-75' }
|
||||
];
|
||||
|
||||
examples.forEach(example => {
|
||||
const preview = document.getElementById(example.id);
|
||||
if (preview) {
|
||||
const color = interpolateColorHSL(minColor, maxColor, example.percent);
|
||||
preview.style.backgroundColor = color;
|
||||
|
||||
// Ajuster la couleur du texte pour la lisibilité
|
||||
const rgb = hexToRgb(color);
|
||||
if (rgb) {
|
||||
const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
|
||||
preview.style.color = brightness > 128 ? '#000000' : '#ffffff';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Sauvegarder la configuration du dégradé des notes
|
||||
function saveNotesGradientConfig() {
|
||||
const minColor = document.getElementById('notes_gradient_color_min').value;
|
||||
const maxColor = document.getElementById('notes_gradient_color_max').value;
|
||||
|
||||
if (!minColor || !maxColor) {
|
||||
alert('Veuillez sélectionner les couleurs minimum et maximum');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm('Sauvegarder cette configuration de dégradé pour les notes ?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Créer un formulaire pour envoyer les données
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.action = '{{ url_for("config.save_notes_gradient") }}';
|
||||
|
||||
const minInput = document.createElement('input');
|
||||
minInput.type = 'hidden';
|
||||
minInput.name = 'notes_gradient_min_color';
|
||||
minInput.value = minColor;
|
||||
|
||||
const maxInput = document.createElement('input');
|
||||
maxInput.type = 'hidden';
|
||||
maxInput.name = 'notes_gradient_max_color';
|
||||
maxInput.value = maxColor;
|
||||
|
||||
form.appendChild(minInput);
|
||||
form.appendChild(maxInput);
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
|
||||
// Fonction globale pour calculer la couleur d'une note (utilisable ailleurs)
|
||||
window.getNotesGradientColor = function(note, maxPoints) {
|
||||
// Récupérer les couleurs configurées
|
||||
const minColor = '{{ notes_gradient.min_color }}';
|
||||
const maxColor = '{{ notes_gradient.max_color }}';
|
||||
const enabled = {{ notes_gradient.enabled|tojson }};
|
||||
|
||||
// Si le dégradé n'est pas activé, retourner une couleur neutre
|
||||
if (!enabled) return '#6b7280';
|
||||
|
||||
return calculateNoteColor(note, maxPoints, minColor, maxColor);
|
||||
};
|
||||
|
||||
// Réinitialiser aux valeurs par défaut
|
||||
function resetToDefaults() {
|
||||
if (confirm('Êtes-vous sûr de vouloir restaurer l\'échelle par défaut ? Toutes vos modifications seront perdues.')) {
|
||||
|
||||
Reference in New Issue
Block a user