QA page
This commit is contained in:
Tykayn
tykayn
parent
dea71fc6b3
commit
11cd3236c5
13 changed files with 1952 additions and 71 deletions
501
oedb/resources/demo/static/event-types.js
Normal file
501
oedb/resources/demo/static/event-types.js
Normal file
|
|
@ -0,0 +1,501 @@
|
|||
// Configuration partagée des types d'événements avec leurs emojis et descriptions
|
||||
window.EVENT_TYPES = {
|
||||
// Community / OSM
|
||||
'community.osm.event': {
|
||||
emoji: '🗺️',
|
||||
label: 'Événement OpenStreetMap',
|
||||
category: 'Communauté',
|
||||
description: 'Événement lié à la communauté OpenStreetMap'
|
||||
},
|
||||
|
||||
// Culture / Arts
|
||||
'culture.arts': {
|
||||
emoji: '🎨',
|
||||
label: 'Arts et culture',
|
||||
category: 'Culture',
|
||||
description: 'Événement artistique et culturel'
|
||||
},
|
||||
'culture.geek': {
|
||||
emoji: '🤓',
|
||||
label: 'Culture geek',
|
||||
category: 'Culture',
|
||||
description: 'Événement geek, technologie, gaming'
|
||||
},
|
||||
'culture.music': {
|
||||
emoji: '🎵',
|
||||
label: 'Musique',
|
||||
category: 'Culture',
|
||||
description: 'Événement musical général'
|
||||
},
|
||||
|
||||
// Music specific
|
||||
'music.festival': {
|
||||
emoji: '🎪',
|
||||
label: 'Festival de musique',
|
||||
category: 'Musique',
|
||||
description: 'Festival musical'
|
||||
},
|
||||
|
||||
// Power / Energy
|
||||
'power.production.unavail': {
|
||||
emoji: '⚡',
|
||||
label: 'Production électrique indisponible',
|
||||
category: 'Énergie',
|
||||
description: 'Arrêt ou réduction de production électrique'
|
||||
},
|
||||
|
||||
// Sale / Commerce
|
||||
'sale': {
|
||||
emoji: '🛒',
|
||||
label: 'Vente / Commerce',
|
||||
category: 'Commerce',
|
||||
description: 'Événement commercial, vente, marché'
|
||||
},
|
||||
|
||||
// Time / Temporal
|
||||
'time.daylight.summer': {
|
||||
emoji: '☀️',
|
||||
label: 'Heure d\'été',
|
||||
category: 'Temps',
|
||||
description: 'Passage à l\'heure d\'été'
|
||||
},
|
||||
|
||||
// Tourism
|
||||
'tourism.exhibition': {
|
||||
emoji: '🖼️',
|
||||
label: 'Exposition',
|
||||
category: 'Tourisme',
|
||||
description: 'Exposition, salon, foire'
|
||||
},
|
||||
|
||||
// Traffic / Transportation
|
||||
'traffic.accident': {
|
||||
emoji: '💥',
|
||||
label: 'Accident',
|
||||
category: 'Circulation',
|
||||
description: 'Accident de la circulation'
|
||||
},
|
||||
'traffic.incident': {
|
||||
emoji: '⚠️',
|
||||
label: 'Incident de circulation',
|
||||
category: 'Circulation',
|
||||
description: 'Incident sur la route'
|
||||
},
|
||||
'traffic.obstacle': {
|
||||
emoji: '🚧',
|
||||
label: 'Obstacle',
|
||||
category: 'Circulation',
|
||||
description: 'Obstacle sur la voie'
|
||||
},
|
||||
'traffic.partially_closed': {
|
||||
emoji: '🚦',
|
||||
label: 'Voie partiellement fermée',
|
||||
category: 'Circulation',
|
||||
description: 'Fermeture partielle de voie'
|
||||
},
|
||||
'traffic.roadwork': {
|
||||
emoji: '⛑️',
|
||||
label: 'Travaux routiers',
|
||||
category: 'Circulation',
|
||||
description: 'Travaux sur la chaussée'
|
||||
}
|
||||
};
|
||||
|
||||
// Fonction pour obtenir les suggestions d'autocomplétion
|
||||
function getEventTypeSuggestions(input) {
|
||||
const inputLower = input.toLowerCase();
|
||||
const suggestions = [];
|
||||
|
||||
for (const [key, config] of Object.entries(window.EVENT_TYPES)) {
|
||||
// Recherche dans la clé, le label et la catégorie
|
||||
const searchableText = `${key} ${config.label} ${config.category}`.toLowerCase();
|
||||
|
||||
if (searchableText.includes(inputLower)) {
|
||||
suggestions.push({
|
||||
value: key,
|
||||
label: `${config.emoji} ${config.label}`,
|
||||
category: config.category,
|
||||
fullText: `${key} - ${config.label}`
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Trier par pertinence (correspondance exacte en premier)
|
||||
suggestions.sort((a, b) => {
|
||||
const aExact = a.value.toLowerCase().startsWith(inputLower);
|
||||
const bExact = b.value.toLowerCase().startsWith(inputLower);
|
||||
|
||||
if (aExact && !bExact) return -1;
|
||||
if (!aExact && bExact) return 1;
|
||||
|
||||
return a.value.localeCompare(b.value);
|
||||
});
|
||||
|
||||
return suggestions.slice(0, 10); // Limiter à 10 suggestions
|
||||
}
|
||||
|
||||
// Fonction pour initialiser l'autocomplétion sur un champ
|
||||
function initializeEventTypeAutocomplete(inputElement, onSelect) {
|
||||
if (!inputElement) return;
|
||||
|
||||
let suggestionsContainer = null;
|
||||
let currentSuggestions = [];
|
||||
let selectedIndex = -1;
|
||||
let selectorButton = null;
|
||||
|
||||
// Créer le bouton de sélection
|
||||
function createSelectorButton() {
|
||||
selectorButton = document.createElement('button');
|
||||
selectorButton.type = 'button';
|
||||
selectorButton.className = 'event-type-selector-btn';
|
||||
selectorButton.innerHTML = '📋 Types d\'événements';
|
||||
selectorButton.style.cssText = `
|
||||
margin-top: 5px;
|
||||
padding: 6px 12px;
|
||||
background-color: #0078ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
`;
|
||||
|
||||
selectorButton.addEventListener('click', function() {
|
||||
showAllEventTypes();
|
||||
});
|
||||
|
||||
const parent = inputElement.parentElement;
|
||||
parent.appendChild(selectorButton);
|
||||
}
|
||||
|
||||
// Créer le conteneur de suggestions
|
||||
function createSuggestionsContainer() {
|
||||
suggestionsContainer = document.createElement('div');
|
||||
suggestionsContainer.className = 'autocomplete-suggestions';
|
||||
suggestionsContainer.style.cssText = `
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
margin-top: 2px;
|
||||
`;
|
||||
|
||||
// Positionner le conteneur parent en relatif
|
||||
const parent = inputElement.parentElement;
|
||||
if (parent.style.position !== 'relative') {
|
||||
parent.style.position = 'relative';
|
||||
}
|
||||
parent.appendChild(suggestionsContainer);
|
||||
}
|
||||
|
||||
// Afficher tous les types d'événements dans un beau sélecteur
|
||||
function showAllEventTypes() {
|
||||
const allTypes = Object.entries(window.EVENT_TYPES).map(([key, config]) => ({
|
||||
value: key,
|
||||
emoji: config.emoji,
|
||||
label: config.label,
|
||||
category: config.category,
|
||||
description: config.description || '',
|
||||
fullText: `${key} - ${config.label}`
|
||||
}));
|
||||
|
||||
showEventTypeSelector(allTypes);
|
||||
}
|
||||
|
||||
// Afficher le sélecteur de types d'événements
|
||||
function showEventTypeSelector(types) {
|
||||
if (!suggestionsContainer) return;
|
||||
|
||||
currentSuggestions = types;
|
||||
selectedIndex = -1;
|
||||
|
||||
// Grouper par catégorie
|
||||
const groupedTypes = {};
|
||||
types.forEach(type => {
|
||||
if (!groupedTypes[type.category]) {
|
||||
groupedTypes[type.category] = [];
|
||||
}
|
||||
groupedTypes[type.category].push(type);
|
||||
});
|
||||
|
||||
let html = `
|
||||
<div style="padding: 10px; border-bottom: 1px solid #eee; background-color: #f8f9fa; border-radius: 8px 8px 0 0;">
|
||||
<strong style="color: #0078ff;">🏷️ Types d'événements disponibles</strong>
|
||||
<button onclick="this.parentElement.parentElement.style.display='none'" style="float: right; background: none; border: none; font-size: 16px; cursor: pointer;">✕</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Afficher chaque catégorie
|
||||
Object.entries(groupedTypes).forEach(([category, categoryTypes]) => {
|
||||
html += `
|
||||
<div style="padding: 8px 0;">
|
||||
<div style="padding: 6px 12px; background-color: #e9ecef; font-weight: bold; color: #495057; font-size: 13px;">
|
||||
${category}
|
||||
</div>
|
||||
`;
|
||||
|
||||
categoryTypes.forEach((type, index) => {
|
||||
const globalIndex = types.indexOf(type);
|
||||
html += `
|
||||
<div class="suggestion-item" data-index="${globalIndex}" style="
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f1f3f4;
|
||||
transition: background-color 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
" onmouseover="this.style.backgroundColor='#f0f8ff'" onmouseout="this.style.backgroundColor='white'">
|
||||
<span style="font-size: 20px; min-width: 25px;">${type.emoji}</span>
|
||||
<div style="flex: 1;">
|
||||
<div style="font-weight: 500; color: #212529;">${type.label}</div>
|
||||
<div style="font-size: 12px; color: #6c757d; font-family: monospace;">${type.value}</div>
|
||||
${type.description ? `<div style="font-size: 11px; color: #868e96; font-style: italic;">${type.description}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
suggestionsContainer.innerHTML = html;
|
||||
suggestionsContainer.style.display = 'block';
|
||||
|
||||
// Ajouter les gestionnaires d'événements
|
||||
const suggestionItems = suggestionsContainer.querySelectorAll('.suggestion-item');
|
||||
suggestionItems.forEach((item, index) => {
|
||||
const dataIndex = parseInt(item.dataset.index);
|
||||
item.addEventListener('click', () => selectSuggestion(dataIndex));
|
||||
});
|
||||
}
|
||||
|
||||
// Afficher les suggestions
|
||||
function showSuggestions(suggestions) {
|
||||
if (!suggestionsContainer) return;
|
||||
|
||||
currentSuggestions = suggestions;
|
||||
selectedIndex = -1;
|
||||
|
||||
if (suggestions.length === 0) {
|
||||
suggestionsContainer.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
suggestionsContainer.innerHTML = suggestions.map((suggestion, index) => `
|
||||
<div class="suggestion-item" data-index="${index}" style="
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #eee;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
">
|
||||
<span style="font-size: 16px;">${suggestion.label.split(' ')[0]}</span>
|
||||
<span style="flex: 1;">${suggestion.fullText}</span>
|
||||
<small style="color: #666;">${suggestion.category}</small>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
suggestionsContainer.style.display = 'block';
|
||||
|
||||
// Ajouter les gestionnaires d'événements aux suggestions
|
||||
const suggestionItems = suggestionsContainer.querySelectorAll('.suggestion-item');
|
||||
suggestionItems.forEach((item, index) => {
|
||||
item.addEventListener('click', () => selectSuggestion(index));
|
||||
item.addEventListener('mouseenter', () => highlightSuggestion(index));
|
||||
});
|
||||
}
|
||||
|
||||
// Mettre en surbrillance une suggestion
|
||||
function highlightSuggestion(index) {
|
||||
const items = suggestionsContainer.querySelectorAll('.suggestion-item');
|
||||
items.forEach((item, i) => {
|
||||
item.style.backgroundColor = i === index ? '#f0f8ff' : 'white';
|
||||
});
|
||||
selectedIndex = index;
|
||||
}
|
||||
|
||||
// Sélectionner une suggestion
|
||||
function selectSuggestion(index) {
|
||||
if (index >= 0 && index < currentSuggestions.length) {
|
||||
const suggestion = currentSuggestions[index];
|
||||
inputElement.value = suggestion.value;
|
||||
suggestionsContainer.style.display = 'none';
|
||||
|
||||
if (onSelect) {
|
||||
onSelect(suggestion);
|
||||
}
|
||||
|
||||
// Déclencher l'événement input pour les validations
|
||||
inputElement.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
}
|
||||
}
|
||||
|
||||
// Masquer les suggestions
|
||||
function hideSuggestions() {
|
||||
if (suggestionsContainer) {
|
||||
suggestionsContainer.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Créer le conteneur de suggestions et le bouton
|
||||
createSuggestionsContainer();
|
||||
createSelectorButton();
|
||||
|
||||
// Gestionnaire d'événements pour l'input
|
||||
inputElement.addEventListener('input', function(e) {
|
||||
const value = e.target.value.trim();
|
||||
|
||||
if (value.length === 0) {
|
||||
showAllEventTypes();
|
||||
return;
|
||||
}
|
||||
|
||||
if (value.length < 2) {
|
||||
hideSuggestions();
|
||||
return;
|
||||
}
|
||||
|
||||
const suggestions = getEventTypeSuggestions(value);
|
||||
showFilteredSuggestions(suggestions);
|
||||
});
|
||||
|
||||
// Afficher l'autocomplétion au focus
|
||||
inputElement.addEventListener('focus', function(e) {
|
||||
const value = e.target.value.trim();
|
||||
|
||||
if (value.length === 0) {
|
||||
showAllEventTypes();
|
||||
} else if (value.length >= 2) {
|
||||
const suggestions = getEventTypeSuggestions(value);
|
||||
showFilteredSuggestions(suggestions);
|
||||
}
|
||||
});
|
||||
|
||||
// Afficher l'autocomplétion au keyup
|
||||
inputElement.addEventListener('keyup', function(e) {
|
||||
// Ignorer les touches de navigation
|
||||
if (['ArrowDown', 'ArrowUp', 'Enter', 'Escape'].includes(e.key)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const value = e.target.value.trim();
|
||||
|
||||
if (value.length === 0) {
|
||||
showAllEventTypes();
|
||||
} else if (value.length >= 2) {
|
||||
const suggestions = getEventTypeSuggestions(value);
|
||||
showFilteredSuggestions(suggestions);
|
||||
}
|
||||
});
|
||||
|
||||
// Fonction pour afficher les suggestions filtrées
|
||||
function showFilteredSuggestions(suggestions) {
|
||||
if (!suggestionsContainer) return;
|
||||
|
||||
currentSuggestions = suggestions;
|
||||
selectedIndex = -1;
|
||||
|
||||
if (suggestions.length === 0) {
|
||||
suggestionsContainer.innerHTML = `
|
||||
<div style="padding: 15px; text-align: center; color: #6c757d;">
|
||||
Aucun type d'événement trouvé
|
||||
</div>
|
||||
`;
|
||||
suggestionsContainer.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<div style="padding: 8px 12px; border-bottom: 1px solid #eee; background-color: #f8f9fa; font-size: 12px; color: #6c757d;">
|
||||
${suggestions.length} résultat${suggestions.length > 1 ? 's' : ''} trouvé${suggestions.length > 1 ? 's' : ''}
|
||||
</div>
|
||||
`;
|
||||
|
||||
suggestions.forEach((suggestion, index) => {
|
||||
const config = window.EVENT_TYPES[suggestion.value] || {};
|
||||
html += `
|
||||
<div class="suggestion-item" data-index="${index}" style="
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f1f3f4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
" onmouseover="this.style.backgroundColor='#f0f8ff'" onmouseout="this.style.backgroundColor='white'">
|
||||
<span style="font-size: 20px;">${config.emoji || '📍'}</span>
|
||||
<div style="flex: 1;">
|
||||
<div style="font-weight: 500;">${config.label || suggestion.value}</div>
|
||||
<div style="font-size: 12px; color: #6c757d; font-family: monospace;">${suggestion.value}</div>
|
||||
</div>
|
||||
<small style="color: #6c757d;">${config.category || ''}</small>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
suggestionsContainer.innerHTML = html;
|
||||
suggestionsContainer.style.display = 'block';
|
||||
|
||||
// Ajouter les gestionnaires d'événements aux suggestions
|
||||
const suggestionItems = suggestionsContainer.querySelectorAll('.suggestion-item');
|
||||
suggestionItems.forEach((item, index) => {
|
||||
item.addEventListener('click', () => selectSuggestion(index));
|
||||
});
|
||||
}
|
||||
|
||||
// Gestionnaire d'événements pour le clavier
|
||||
inputElement.addEventListener('keydown', function(e) {
|
||||
if (!suggestionsContainer || suggestionsContainer.style.display === 'none') {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
const nextIndex = selectedIndex < currentSuggestions.length - 1 ? selectedIndex + 1 : 0;
|
||||
highlightSuggestion(nextIndex);
|
||||
break;
|
||||
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
const prevIndex = selectedIndex > 0 ? selectedIndex - 1 : currentSuggestions.length - 1;
|
||||
highlightSuggestion(prevIndex);
|
||||
break;
|
||||
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (selectedIndex >= 0) {
|
||||
selectSuggestion(selectedIndex);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'Escape':
|
||||
hideSuggestions();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Masquer les suggestions quand on clique ailleurs
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!inputElement.contains(e.target) && !suggestionsContainer?.contains(e.target)) {
|
||||
hideSuggestions();
|
||||
}
|
||||
});
|
||||
|
||||
// Masquer les suggestions quand le champ perd le focus
|
||||
inputElement.addEventListener('blur', function() {
|
||||
// Délai pour permettre le clic sur une suggestion
|
||||
setTimeout(hideSuggestions, 200);
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue