choices.js pour la liste déroulante
This commit is contained in:
Pierre Marx
149
renderer.js
149
renderer.js
@@ -1,4 +1,5 @@
|
||||
const { ipcRenderer } = require('electron');
|
||||
// Choices est maintenant chargé via CDN dans index.html
|
||||
|
||||
// Variables globales
|
||||
let currentAgent = null;
|
||||
@@ -26,8 +27,8 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||
const initialStatus = await ipcRenderer.invoke('get-signalr-status');
|
||||
updateSignalRIndicator(initialStatus);
|
||||
|
||||
// Toujours charger les terminaux (simulation ou réels)
|
||||
loadTerminals();
|
||||
// Charger immédiatement les terminaux pour la page de login
|
||||
await loadTerminals();
|
||||
|
||||
// Vérifier si un agent est déjà connecté
|
||||
const agentData = await ipcRenderer.invoke('get-current-agent');
|
||||
@@ -438,53 +439,149 @@ async function saveNotes() {
|
||||
|
||||
// === GESTION DES TERMINAUX ===
|
||||
let availableTerminals = []; // Stocker les terminaux disponibles
|
||||
let terminalChoices = null; // Instance Choices.js
|
||||
|
||||
async function loadTerminals() {
|
||||
const terminalInput = document.getElementById('terminal');
|
||||
const terminalDatalist = document.getElementById('terminalList');
|
||||
if (!terminalInput || !terminalDatalist) return;
|
||||
const terminalSelect = document.getElementById('terminal');
|
||||
if (!terminalSelect) {
|
||||
console.log('Element terminal non trouvé');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Chargement des terminaux...');
|
||||
|
||||
try {
|
||||
// Récupérer les terminaux depuis le serveur SignalR
|
||||
const terminals = await ipcRenderer.invoke('get-terminal-list');
|
||||
availableTerminals = terminals || [];
|
||||
console.log(`${terminals.length} terminaux récupérés`);
|
||||
|
||||
// Préparer les options pour Choices.js
|
||||
const choicesData = [];
|
||||
if (terminals && terminals.length > 0) {
|
||||
// Vider la datalist
|
||||
terminalDatalist.innerHTML = '';
|
||||
|
||||
// Ajouter chaque terminal comme option
|
||||
// Afficher tous les terminaux sans groupement
|
||||
terminals.forEach(terminal => {
|
||||
const option = document.createElement('option');
|
||||
option.value = terminal;
|
||||
terminalDatalist.appendChild(option);
|
||||
choicesData.push({
|
||||
value: terminal.toString(),
|
||||
label: `Poste ${terminal}`
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Détruire l'instance existante si elle existe
|
||||
if (terminalChoices) {
|
||||
terminalChoices.destroy();
|
||||
terminalChoices = null;
|
||||
}
|
||||
|
||||
// Vider le select avant d'initialiser Choices
|
||||
terminalSelect.innerHTML = '';
|
||||
|
||||
// Attendre que Choices soit disponible (chargé via CDN)
|
||||
if (typeof window.Choices === 'undefined') {
|
||||
console.log('Choices.js pas encore chargé, utilisation du select natif');
|
||||
// Fallback : utiliser le select natif
|
||||
terminalSelect.innerHTML = '<option value="">Sélectionner un poste...</option>';
|
||||
if (terminals && terminals.length > 0) {
|
||||
terminals.forEach(terminal => {
|
||||
const option = document.createElement('option');
|
||||
option.value = terminal;
|
||||
option.textContent = `Poste ${terminal}`;
|
||||
terminalSelect.appendChild(option);
|
||||
});
|
||||
}
|
||||
// Réessayer après un court délai
|
||||
setTimeout(() => loadTerminals(), 500);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Initialisation de Choices.js avec', choicesData.length, 'options');
|
||||
|
||||
try {
|
||||
// Créer une nouvelle instance Choices.js
|
||||
terminalChoices = new window.Choices(terminalSelect, {
|
||||
searchEnabled: true,
|
||||
searchPlaceholderValue: 'Rechercher un poste...',
|
||||
itemSelectText: '',
|
||||
noResultsText: 'Aucun poste trouvé',
|
||||
noChoicesText: 'Aucun poste disponible',
|
||||
shouldSort: false,
|
||||
searchResultLimit: 20,
|
||||
renderChoiceLimit: -1,
|
||||
placeholder: true,
|
||||
placeholderValue: 'Sélectionner un poste téléphonique',
|
||||
choices: choicesData.length > 0 ? choicesData : [{value: '', label: 'Aucun poste disponible', disabled: true}],
|
||||
searchFields: ['label', 'value'],
|
||||
fuseOptions: {
|
||||
includeScore: true,
|
||||
threshold: 0.3
|
||||
},
|
||||
classNames: {
|
||||
containerOuter: ['choices', 'choices-terminal'],
|
||||
containerInner: 'choices__inner',
|
||||
input: 'choices__input',
|
||||
inputCloned: 'choices__input--cloned',
|
||||
list: 'choices__list',
|
||||
listItems: 'choices__list--multiple',
|
||||
listSingle: 'choices__list--single',
|
||||
listDropdown: 'choices__list--dropdown',
|
||||
item: 'choices__item',
|
||||
itemSelectable: 'choices__item--selectable',
|
||||
itemDisabled: 'choices__item--disabled',
|
||||
itemChoice: 'choices__item--choice',
|
||||
placeholder: 'choices__placeholder',
|
||||
group: 'choices__group',
|
||||
groupHeading: 'choices__heading',
|
||||
button: 'choices__button',
|
||||
activeState: 'is-active',
|
||||
focusState: 'is-focused',
|
||||
openState: 'is-open',
|
||||
disabledState: 'is-disabled',
|
||||
highlightedState: 'is-highlighted',
|
||||
hiddenState: 'is-hidden',
|
||||
flippedState: 'is-flipped',
|
||||
loadingState: 'is-loading',
|
||||
noResults: 'has-no-results',
|
||||
noChoices: 'has-no-choices'
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Choices.js initialisé avec succès');
|
||||
|
||||
// Restaurer la dernière sélection si disponible
|
||||
const lastTerminal = localStorage.getItem('last-terminal');
|
||||
if (lastTerminal && terminals.includes(lastTerminal)) {
|
||||
terminalInput.value = lastTerminal;
|
||||
if (lastTerminal && availableTerminals.map(t => t.toString()).includes(lastTerminal)) {
|
||||
terminalChoices.setChoiceByValue(lastTerminal.toString());
|
||||
}
|
||||
|
||||
// Activer l'input
|
||||
terminalInput.disabled = false;
|
||||
terminalInput.placeholder = 'Poste téléphonique (tapez pour filtrer)';
|
||||
} else {
|
||||
terminalDatalist.innerHTML = '';
|
||||
terminalInput.placeholder = 'Aucun poste disponible';
|
||||
terminalInput.disabled = true;
|
||||
} catch (choicesError) {
|
||||
console.error('Erreur lors de l\'initialisation de Choices.js:', choicesError);
|
||||
console.error('Stack:', choicesError.stack);
|
||||
// En cas d'erreur, utiliser le select natif
|
||||
terminalSelect.innerHTML = '<option value="">Erreur de chargement - voir console</option>';
|
||||
if (terminals && terminals.length > 0) {
|
||||
terminals.forEach(terminal => {
|
||||
const option = document.createElement('option');
|
||||
option.value = terminal;
|
||||
option.textContent = `Poste ${terminal}`;
|
||||
terminalSelect.appendChild(option);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur chargement des terminaux:', error);
|
||||
terminalDatalist.innerHTML = '';
|
||||
terminalInput.placeholder = 'Erreur de chargement';
|
||||
terminalInput.disabled = true;
|
||||
console.error('Erreur générale chargement des terminaux:', error);
|
||||
// En cas d'erreur, utiliser le select natif
|
||||
const terminalSelect = document.getElementById('terminal');
|
||||
if (terminalSelect) {
|
||||
terminalSelect.innerHTML = '<option value="">Erreur de chargement</option>';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Valider que le terminal saisi existe dans la liste
|
||||
function validateTerminal(terminal) {
|
||||
return availableTerminals.includes(terminal);
|
||||
return availableTerminals.map(t => t.toString()).includes(terminal.toString());
|
||||
}
|
||||
|
||||
// === GESTION INDICATEUR SIGNALR ===
|
||||
|
||||
Reference in New Issue
Block a user