Files
notytex/templates/config/scale.html

464 lines
27 KiB
HTML

{% extends "base.html" %}
{% block title %}Configuration de l'échelle - Notytex{% endblock %}
{% block content %}
<div class="space-y-8">
<!-- Breadcrumb -->
<nav class="flex" aria-label="Breadcrumb">
<ol class="flex items-center space-x-4">
<li>
<a href="{{ url_for('config.index') }}" class="text-gray-400 hover:text-gray-500">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
</svg>
<span class="sr-only">Configuration</span>
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
</svg>
<span class="ml-4 text-sm font-medium text-gray-500">Échelle de réussite</span>
</div>
</li>
</ol>
</nav>
<!-- En-tête -->
<div class="bg-gradient-to-r from-green-600 to-teal-600 text-white rounded-xl p-8 shadow-lg">
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold mb-2">📏 Échelle de réussite</h1>
<p class="text-xl opacity-90">Configurez l'échelle de réussite pour les compétences et domaines</p>
</div>
<div class="hidden md:block">
<div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center">
<svg class="w-10 h-10" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2a2 2 0 002-2V5a1 1 0 100-2H3zm6 2a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1zm1 5a1 1 0 100 2h6a1 1 0 100-2h-6zm0 4a1 1 0 100 2h6a1 1 0 100-2h-6z" clip-rule="evenodd"/>
</svg>
</div>
</div>
</div>
</div>
<!-- Information sur l'échelle actuelle -->
<div class="bg-blue-50 border border-blue-200 rounded-lg p-6">
<div class="flex items-start">
<svg class="w-6 h-6 text-blue-400 mt-0.5 mr-3" 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 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
</svg>
<div>
<h3 class="text-sm font-medium text-blue-800">Organisation de l'échelle</h3>
<ul class="text-sm text-blue-700 mt-2 space-y-1">
<li><strong>Échelle numérique :</strong> Valeurs de 0 à N avec progression continue</li>
<li><strong>Valeurs spéciales :</strong> "." pour non évalué et autres valeurs personnalisées</li>
<li><strong>Réglage de l'étendue :</strong> Vous pouvez étendre l'échelle jusqu'à 10</li>
</ul>
</div>
</div>
</div>
<!-- Formulaire de configuration -->
<div class="bg-white rounded-lg shadow-md">
<div class="px-6 py-4 border-b border-gray-200">
<h3 class="text-lg font-medium text-gray-900">🎚️ Configuration de l'échelle</h3>
<p class="text-sm text-gray-500 mt-1">{{ competence_scale|length }} valeur(s) configurée(s)</p>
</div>
<form method="POST" action="{{ url_for('config.update_scale') }}" class="p-6">
<!-- É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>
</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 }}.
</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] %}
<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">
<div
class="w-8 h-8 rounded-full border-2 border-white shadow-sm flex items-center justify-center text-white font-bold text-sm"
style="background-color: {{ config.color }}"
>
{{ value }}
</div>
<h5 class="font-medium text-gray-900">
{% if value == '0' %}
Niveau {{ value }} (minimum)
{% else %}
Niveau {{ value }}
{% endif %}
</h5>
</div>
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if config.included_in_total %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
{% if config.included_in_total %}✅ Inclus{% else %}❌ Exclu{% endif %}
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label for="scale_{{ value }}_label" class="block text-sm font-medium text-gray-700 mb-1">
Libellé
</label>
<input
type="text"
id="scale_{{ value }}_label"
name="scale_{{ value }}_label"
value="{{ config.label }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
required
>
</div>
<div>
<label for="scale_{{ value }}_color" class="block text-sm font-medium text-gray-700 mb-1">
Couleur
</label>
<div class="flex items-center space-x-2">
<input
type="color"
id="scale_{{ value }}_color"
name="scale_{{ value }}_color"
value="{{ config.color }}"
class="w-10 h-10 border border-gray-300 rounded-md cursor-pointer"
>
<input
type="text"
id="scale_{{ value }}_color_text"
value="{{ config.color }}"
class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
pattern="#[0-9a-fA-F]{6}"
onchange="syncColor('{{ value }}')"
>
</div>
</div>
<div>
<label for="scale_{{ value }}_included_in_total" class="block text-sm font-medium text-gray-700 mb-1">
Inclusion dans le total
</label>
<select
id="scale_{{ value }}_included_in_total"
name="scale_{{ value }}_included_in_total"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
>
<option value="true" {% if config.included_in_total %}selected{% endif %}>✅ Inclus dans le calcul</option>
<option value="false" {% if not config.included_in_total %}selected{% endif %}>❌ Exclu du calcul</option>
</select>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<!-- Valeurs spéciales -->
<div class="mb-8">
<div class="flex items-center justify-between mb-4">
<h4 class="text-lg font-medium text-gray-900">🔤 Valeurs spéciales</h4>
<button
type="button"
onclick="showAddSpecialValue()"
class="inline-flex items-center px-3 py-1 text-sm border border-gray-300 rounded-md shadow-sm text-gray-700 bg-white hover:bg-gray-50"
>
<svg class="w-4 h-4 mr-1" 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>
Ajouter
</button>
</div>
<div class="space-y-4">
{% for value, config in competence_scale.items() %}
{% if value not in [0, 1, 2, 3, 4, 5] %}
<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">
<div
class="w-8 h-8 rounded-full border-2 border-white shadow-sm flex items-center justify-center text-white font-bold text-sm"
style="background-color: {{ config.color }}"
>
{% if value == '.' %}
{% else %}
{{ value }}
{% endif %}
</div>
<h5 class="font-medium text-gray-900">
{% if value == '.' %}
Valeur "." (Non évalué)
{% else %}
Valeur "{{ value }}"
{% endif %}
</h5>
</div>
<div class="flex items-center space-x-2">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if config.included_in_total %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">
{% if config.included_in_total %}✅ Inclus{% else %}❌ Exclu{% endif %}
</span>
{% if value != '.' %}
<button
type="button"
onclick="deleteSpecialValue('{{ value }}', '{{ config.label }}')"
class="p-1 text-gray-400 hover:text-red-600 transition-colors"
title="Supprimer cette valeur"
>
<svg class="w-4 h-4" 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>
</button>
{% endif %}
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<label for="scale_{{ value }}_label" class="block text-sm font-medium text-gray-700 mb-1">
Libellé
</label>
<input
type="text"
id="scale_{{ value }}_label"
name="scale_{{ value }}_label"
value="{{ config.label }}"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
required
>
</div>
<div>
<label for="scale_{{ value }}_color" class="block text-sm font-medium text-gray-700 mb-1">
Couleur
</label>
<div class="flex items-center space-x-2">
<input
type="color"
id="scale_{{ value }}_color"
name="scale_{{ value }}_color"
value="{{ config.color }}"
class="w-10 h-10 border border-gray-300 rounded-md cursor-pointer"
>
<input
type="text"
id="scale_{{ value }}_color_text"
value="{{ config.color }}"
class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
pattern="#[0-9a-fA-F]{6}"
onchange="syncColor('{{ value }}')"
>
</div>
</div>
<div>
<label for="scale_{{ value }}_included_in_total" class="block text-sm font-medium text-gray-700 mb-1">
Inclusion dans le total
</label>
<select
id="scale_{{ value }}_included_in_total"
name="scale_{{ value }}_included_in_total"
class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500"
>
<option value="true" {% if config.included_in_total %}selected{% endif %}>✅ Inclus dans le calcul</option>
<option value="false" {% if not config.included_in_total %}selected{% endif %}>❌ Exclu du calcul</option>
</select>
{% if value == '.' %}
<p class="text-xs text-gray-500 mt-1">
Généralement inclus car compte dans le total possible
</p>
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<!-- Actions -->
<div class="flex justify-between items-center pt-8 border-t border-gray-200 mt-8">
<a
href="{{ url_for('config.index') }}"
class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
>
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0L2.586 11H13a1 1 0 110 2H2.586l3.707 3.707a1 1 0 01-1.414 1.414l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L2.586 9H13a1 1 0 110 2H7.707z" clip-rule="evenodd"/>
</svg>
Retour
</a>
<div class="flex space-x-3">
<button
type="button"
onclick="resetToDefaults()"
class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
>
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"/>
</svg>
Valeurs par défaut
</button>
<button
type="submit"
class="inline-flex items-center px-6 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
>
<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
</button>
</div>
</div>
</form>
</div>
</div>
<script>
// Synchroniser les champs de couleur
function syncColor(value) {
const colorPicker = document.getElementById(`scale_${value}_color`);
const colorText = document.getElementById(`scale_${value}_color_text`);
if (colorText.value.match(/^#[0-9a-fA-F]{6}$/)) {
colorPicker.value = colorText.value;
}
}
// Synchroniser tous les color pickers avec leurs champs texte
{% for value, config in competence_scale.items() %}
document.getElementById('scale_{{ value }}_color').addEventListener('input', function() {
document.getElementById('scale_{{ value }}_color_text').value = this.value;
});
{% 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]');
// 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');
}
}
// 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.')) {
fetch('{{ url_for("config.reset_scale") }}', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
}).then(response => {
if (response.ok) {
location.reload();
}
});
}
}
// Ajouter une valeur spéciale
function showAddSpecialValue() {
const value = prompt('Entrez la valeur spéciale (ex: NA, X, etc.) :');
if (value && value.trim()) {
const label = prompt('Entrez le libellé pour cette valeur :');
if (label && label.trim()) {
const color = prompt('Entrez la couleur (hex, ex: #ff0000) :', '#6b7280');
const included = confirm('Cette valeur doit-elle être incluse dans le calcul du total ?');
// Créer un formulaire temporaire pour envoyer les données
const form = document.createElement('form');
form.method = 'POST';
form.action = '{{ url_for("config.add_scale_value") }}';
const valueInput = document.createElement('input');
valueInput.type = 'hidden';
valueInput.name = 'value';
valueInput.value = value.trim();
const labelInput = document.createElement('input');
labelInput.type = 'hidden';
labelInput.name = 'label';
labelInput.value = label.trim();
const colorInput = document.createElement('input');
colorInput.type = 'hidden';
colorInput.name = 'color';
colorInput.value = color || '#6b7280';
const includedInput = document.createElement('input');
includedInput.type = 'hidden';
includedInput.name = 'included_in_total';
includedInput.value = included ? 'true' : 'false';
form.appendChild(valueInput);
form.appendChild(labelInput);
form.appendChild(colorInput);
form.appendChild(includedInput);
document.body.appendChild(form);
form.submit();
}
}
}
// Supprimer une valeur spéciale
function deleteSpecialValue(value, label) {
if (confirm(`Êtes-vous sûr de vouloir supprimer la valeur "${value}" (${label}) ?`)) {
const form = document.createElement('form');
form.method = 'POST';
form.action = `{{ url_for("config.delete_scale_value", value="PLACEHOLDER") }}`.replace('PLACEHOLDER', encodeURIComponent(value));
document.body.appendChild(form);
form.submit();
}
}
</script>
{% endblock %}