feat: Permettre la saisie manuelle d'un poste téléphonique personnalisé

- Ajout de addItems et addChoices dans Choices.js pour permettre la saisie manuelle
- Remplacement de la validation stricte par une validation de format numérique
- Ajout d'un avertissement visuel temporaire (5s) si le poste n'est pas dans la liste officielle
- Amélioration des textes UX pour guider l'utilisateur
- Le serveur accepte maintenant tout numéro de poste valide (numérique)
This commit is contained in:
Pierre Marx
2025-10-17 11:39:13 -04:00
parent 739cd65681
commit faaa0e9739

View File

@@ -157,17 +157,38 @@ async function handleLogin(e) {
const loginBtn = document.querySelector('#loginForm button[type="submit"]'); const loginBtn = document.querySelector('#loginForm button[type="submit"]');
// Vérifier que le terminal est sélectionné et valide // Vérifier que le terminal est sélectionné et valide
if (!terminal) { if (!terminal || terminal.trim() === '') {
errorDiv.textContent = 'Veuillez sélectionner un poste téléphonique'; errorDiv.textContent = 'Veuillez sélectionner ou saisir un poste téléphonique';
return; return;
} }
// Valider que le terminal existe dans la liste // Valider le format du terminal (doit être numérique)
if (!/^\d+$/.test(terminal)) {
errorDiv.textContent = 'Le poste doit être un numéro (ex: 3001)';
return;
}
// Avertir si le poste n'est pas dans la liste officielle
if (!validateTerminal(terminal)) { if (!validateTerminal(terminal)) {
errorDiv.textContent = 'Poste téléphonique invalide. Veuillez choisir un poste de la liste.'; console.log(`⚠️ Avertissement : Le poste ${terminal} n'est pas dans la liste officielle`);
return;
// Afficher un avertissement visuel temporaire
const warningDiv = document.createElement('div');
warningDiv.className = 'warning-message';
warningDiv.style.cssText = 'color: #ff9800; font-size: 0.9em; margin-top: 5px;';
warningDiv.textContent = `⚠️ Attention : Le poste ${terminal} n'est pas dans la liste officielle`;
// Insérer l'avertissement avant le message d'erreur
errorDiv.parentNode.insertBefore(warningDiv, errorDiv);
// Supprimer l'avertissement après 5 secondes
setTimeout(() => {
if (warningDiv.parentNode) {
warningDiv.remove();
}
}, 5000);
} }
// Sauvegarder le terminal sélectionné pour la prochaine fois // Sauvegarder le terminal sélectionné pour la prochaine fois
localStorage.setItem('last-terminal', terminal); localStorage.setItem('last-terminal', terminal);
@@ -841,15 +862,20 @@ async function loadTerminals() {
// Créer une nouvelle instance Choices.js // Créer une nouvelle instance Choices.js
terminalChoices = new window.Choices(terminalSelect, { terminalChoices = new window.Choices(terminalSelect, {
searchEnabled: true, searchEnabled: true,
searchPlaceholderValue: 'Rechercher un poste...', addItems: true, // Permet l'ajout d'items
itemSelectText: '', addChoices: true, // IMPORTANT: Pour les <select>, permet d'ajouter des choices personnalisés
noResultsText: 'Aucun poste trouvé', searchPlaceholderValue: 'Rechercher ou saisir un poste...',
itemSelectText: 'Appuyez sur Entrée pour sélectionner',
noResultsText: 'Aucun poste trouvé. Appuyez sur Entrée pour utiliser ce numéro.',
noChoicesText: 'Aucun poste disponible', noChoicesText: 'Aucun poste disponible',
addItemText: (value) => {
return `Utiliser le poste personnalisé : <b>${value}</b>`;
},
shouldSort: false, shouldSort: false,
searchResultLimit: 20, searchResultLimit: 20,
renderChoiceLimit: -1, renderChoiceLimit: -1,
placeholder: true, placeholder: true,
placeholderValue: 'Sélectionner un poste téléphonique', placeholderValue: 'Sélectionner ou saisir un poste téléphonique',
choices: choicesData.length > 0 ? choicesData : [{value: '', label: 'Aucun poste disponible', disabled: true}], choices: choicesData.length > 0 ? choicesData : [{value: '', label: 'Aucun poste disponible', disabled: true}],
searchFields: ['label', 'value'], searchFields: ['label', 'value'],
fuseOptions: { fuseOptions: {