QA page
This commit is contained in:
Tykayn
tykayn
parent
dea71fc6b3
commit
11cd3236c5
13 changed files with 1952 additions and 71 deletions
|
|
@ -487,19 +487,25 @@ class DemoMainResource:
|
|||
const properties = feature.properties;
|
||||
|
||||
// Extraire les informations principales
|
||||
const title = properties.title || 'Événement sans titre';
|
||||
const title = properties.label || properties.title || 'Événement sans titre';
|
||||
const what = properties.what || 'Non spécifié';
|
||||
const when = properties.when ? formatDate(properties.when) : 'Date inconnue';
|
||||
const description = properties.description || 'Aucune description disponible';
|
||||
|
||||
// Créer le HTML de la popup
|
||||
// Créer le HTML de la popup avec titre cliquable pour édition
|
||||
const editLink = properties.id ? `/demo/edit/${properties.id}` : '#';
|
||||
|
||||
return `
|
||||
<div class="event-popup">
|
||||
<h3 style="margin-top: 0; color: #0078ff;">${title}</h3>
|
||||
<h3 style="margin-top: 0;">
|
||||
<a href="${editLink}" style="color: #0078ff; text-decoration: none;" title="Cliquer pour modifier cet événement">
|
||||
${title}
|
||||
</a>
|
||||
</h3>
|
||||
<p><strong>Type:</strong> ${what}</p>
|
||||
<p><strong>Date:</strong> ${when}</p>
|
||||
<p><strong>Description:</strong> ${description}</p>
|
||||
<p><a href="/demo/view/${properties.id}" style="color: #0078ff; font-weight: bold;">Voir détails</a></p>
|
||||
${properties.id ? `<p><a href="/demo/edit/${properties.id}" style="color: #0078ff; font-weight: bold;">✏️ Modifier l'événement</a></p>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
@ -786,7 +792,9 @@ class DemoMainResource:
|
|||
|
||||
// Create popup content
|
||||
let popupContent = '<div class="event-popup">';
|
||||
popupContent += `<h3>${properties.label || 'Event'}</h3>`;
|
||||
const eventTitle = properties.label || 'Event';
|
||||
const editLink = properties.id ? `/demo/edit/${properties.id}` : '#';
|
||||
popupContent += `<h3><a href="${editLink}" style="color: #0078ff; text-decoration: none;" title="Cliquer pour modifier cet événement">${eventTitle}</a></h3>`;
|
||||
|
||||
// Display all properties
|
||||
popupContent += '<div style="max-height: 300px; overflow-y: auto;">';
|
||||
|
|
|
|||
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);
|
||||
});
|
||||
}
|
||||
|
|
@ -12,11 +12,30 @@
|
|||
<script src="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/@mapbox/mapbox-gl-draw@1.4.3/dist/mapbox-gl-draw.css" type="text/css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<script src="/static/event-types.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}Edit Event{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="properties-section" style="margin-bottom: 30px;">
|
||||
<h3>Propriétés actuelles de l'événement</h3>
|
||||
<div class="properties-table-container" style="max-height: 300px; overflow-y: auto; border: 1px solid #ddd; border-radius: 4px;">
|
||||
<table id="propertiesTable" class="properties-table" style="width: 100%; border-collapse: collapse; font-family: monospace; font-size: 14px;">
|
||||
<thead style="background-color: #f8f9fa; position: sticky; top: 0;">
|
||||
<tr>
|
||||
<th style="padding: 8px; text-align: left; border-bottom: 1px solid #ddd; font-weight: bold;">Propriété</th>
|
||||
<th style="padding: 8px; text-align: left; border-bottom: 1px solid #ddd; font-weight: bold;">Valeur</th>
|
||||
<th style="padding: 8px; text-align: left; border-bottom: 1px solid #ddd; font-weight: bold;">Type</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="propertiesTableBody">
|
||||
<!-- Les propriétés seront ajoutées par JavaScript -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="eventForm">
|
||||
<input type="hidden" id="eventId" value="{{ id }}">
|
||||
|
||||
|
|
@ -38,7 +57,10 @@
|
|||
<div class="form-group">
|
||||
<label for="what" class="required">What</label>
|
||||
<input type="text" id="what" name="what" placeholder="e.g., sport.match.football" required>
|
||||
<div class="note">Category of the event (e.g., sport.match.football, culture.festival)</div>
|
||||
<div class="note">
|
||||
Category of the event (e.g., sport.match.football, culture.festival)<br>
|
||||
<small style="color: #0078ff;">💡 Tapez au moins 2 caractères pour voir les suggestions avec emojis</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -72,6 +94,14 @@
|
|||
<label class="required">Location</label>
|
||||
<div id="map"></div>
|
||||
<div class="note">Click on the map to set the event location</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<button type="button" id="swapCoordinatesButton" style="background-color: #17a2b8; font-size: 14px; padding: 6px 12px;">
|
||||
🔄 Inverser coordonnées (lat ↔ lon)
|
||||
</button>
|
||||
<small style="color: #666; margin-left: 10px;">
|
||||
Utile si les coordonnées longitude/latitude ont été inversées
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 10px;">
|
||||
|
|
|
|||
|
|
@ -23,4 +23,3 @@
|
|||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>
|
||||
<link rel="stylesheet" href="/static/traffic.css">
|
||||
<script src="/static/demo_auth.js"></script>
|
||||
<script src="/static/event-types.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
@ -187,11 +188,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<button id="geolocateBtn" class="geolocation-btn">
|
||||
<span id="geolocateSpinner" class="loading" style="display: none;"></span>
|
||||
Obtenir ma position actuelle
|
||||
</button>
|
||||
<span id="gpsStatus" class="gps-status" title="État GPS">GPS: inconnu</span>
|
||||
|
||||
<form id="trafficForm">
|
||||
<div class="form-group">
|
||||
|
|
@ -269,7 +265,13 @@
|
|||
<div class="form-group">
|
||||
<label class="required">Location</label>
|
||||
<div id="map"></div>
|
||||
<div class="note">Cliquez sur la carte pour définir la localisation du problème ou utilisez le bouton "Obtenir ma position actuelle"</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<button type="button" id="geolocateMapBtn" class="geolocation-btn" style="background-color: #28a745; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">
|
||||
📍 Obtenir ma position actuelle
|
||||
</button>
|
||||
<span id="geolocateStatus" class="gps-status" style="margin-left: 10px; font-size: 0.9em; color: #666;">Cliquez pour vous géolocaliser</span>
|
||||
</div>
|
||||
<div class="note">Cliquez sur la carte pour définir la localisation du problème ou utilisez le bouton de géolocalisation</div>
|
||||
</div>
|
||||
|
||||
<button id="report_issue_button" type="submit" disabled>Signaler le problème</button>
|
||||
|
|
@ -622,10 +624,14 @@
|
|||
}
|
||||
|
||||
// Handle geolocation button click
|
||||
document.getElementById('geolocateBtn').addEventListener('click', function() {
|
||||
// Show loading spinner
|
||||
document.getElementById('geolocateSpinner').style.display = 'inline-block';
|
||||
document.getElementById('geolocateMapBtn').addEventListener('click', function() {
|
||||
// Update button text and disable it
|
||||
const originalText = this.textContent;
|
||||
this.textContent = '📍 Localisation en cours...';
|
||||
this.disabled = true;
|
||||
|
||||
const statusElement = document.getElementById('geolocateStatus');
|
||||
statusElement.textContent = 'Localisation en cours...';
|
||||
|
||||
// Check if geolocation is available
|
||||
if (navigator.geolocation) {
|
||||
|
|
@ -644,12 +650,17 @@
|
|||
zoom: 14
|
||||
});
|
||||
|
||||
// Hide loading spinner
|
||||
document.getElementById('geolocateSpinner').style.display = 'none';
|
||||
document.getElementById('geolocateBtn').disabled = false;
|
||||
|
||||
// Reset button
|
||||
document.getElementById('geolocateMapBtn').textContent = '📍 Position obtenue';
|
||||
document.getElementById('geolocateMapBtn').disabled = false;
|
||||
document.getElementById('geolocateMapBtn').style.backgroundColor = '#28a745';
|
||||
|
||||
const statusElement = document.getElementById('geolocateStatus');
|
||||
statusElement.textContent = `Position: ${lat.toFixed(4)}, ${lng.toFixed(4)}`;
|
||||
statusElement.style.color = '#28a745';
|
||||
|
||||
// Show success message
|
||||
showResult('Current location detected successfully', 'success');
|
||||
showResult('Position actuelle détectée avec succès', 'success');
|
||||
|
||||
// Validate form after setting marker
|
||||
validateForm();
|
||||
|
|
@ -684,26 +695,34 @@
|
|||
},
|
||||
// Error callback
|
||||
function(error) {
|
||||
// Hide loading spinner
|
||||
document.getElementById('geolocateSpinner').style.display = 'none';
|
||||
document.getElementById('geolocateBtn').disabled = false;
|
||||
|
||||
// Reset button
|
||||
document.getElementById('geolocateMapBtn').textContent = '📍 Réessayer la géolocalisation';
|
||||
document.getElementById('geolocateMapBtn').disabled = false;
|
||||
document.getElementById('geolocateMapBtn').style.backgroundColor = '#dc3545';
|
||||
|
||||
const statusElement = document.getElementById('geolocateStatus');
|
||||
|
||||
// Show error message
|
||||
let errorMsg = 'Unable to get your location. ';
|
||||
let errorMsg = 'Impossible d\'obtenir votre position. ';
|
||||
switch(error.code) {
|
||||
case error.PERMISSION_DENIED:
|
||||
errorMsg += 'You denied the request for geolocation.';
|
||||
errorMsg += 'Vous avez refusé la demande de géolocalisation.';
|
||||
statusElement.textContent = 'Permission refusée';
|
||||
break;
|
||||
case error.POSITION_UNAVAILABLE:
|
||||
errorMsg += 'Location information is unavailable.';
|
||||
errorMsg += 'Les informations de position ne sont pas disponibles.';
|
||||
statusElement.textContent = 'Position indisponible';
|
||||
break;
|
||||
case error.TIMEOUT:
|
||||
errorMsg += 'The request to get your location timed out.';
|
||||
errorMsg += 'La demande de géolocalisation a expiré.';
|
||||
statusElement.textContent = 'Temps dépassé';
|
||||
break;
|
||||
case error.UNKNOWN_ERROR:
|
||||
errorMsg += 'An unknown error occurred.';
|
||||
errorMsg += 'Une erreur inconnue s\'est produite.';
|
||||
statusElement.textContent = 'Erreur inconnue';
|
||||
break;
|
||||
}
|
||||
statusElement.style.color = '#dc3545';
|
||||
showResult(errorMsg, 'error');
|
||||
},
|
||||
// Options
|
||||
|
|
@ -714,12 +733,17 @@
|
|||
}
|
||||
);
|
||||
} else {
|
||||
// Hide loading spinner
|
||||
document.getElementById('geolocateSpinner').style.display = 'none';
|
||||
document.getElementById('geolocateBtn').disabled = false;
|
||||
|
||||
// Reset button
|
||||
document.getElementById('geolocateMapBtn').textContent = '📍 Non supporté';
|
||||
document.getElementById('geolocateMapBtn').disabled = true;
|
||||
document.getElementById('geolocateMapBtn').style.backgroundColor = '#6c757d';
|
||||
|
||||
const statusElement = document.getElementById('geolocateStatus');
|
||||
statusElement.textContent = 'Géolocalisation non supportée';
|
||||
statusElement.style.color = '#dc3545';
|
||||
|
||||
// Show error message
|
||||
showResult('Geolocation is not supported by your browser', 'error');
|
||||
showResult('La géolocalisation n\'est pas supportée par votre navigateur', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -260,7 +260,7 @@
|
|||
<div class="note">Cliquez sur la carte pour définir la localisation du problème ou utilisez le bouton "Obtenir ma position actuelle"</div>
|
||||
</div>
|
||||
|
||||
<button id="report_issue_button" type="submit">Signaler le problème</button>
|
||||
<button id="report_issue_button" type="submit" disabled>Signaler le problème</button>
|
||||
</form>
|
||||
|
||||
<div id="result"></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue