up emoji on demo map
This commit is contained in:
Tykayn
tykayn
parent
65956ff6be
commit
dea71fc6b3
7 changed files with 565 additions and 35 deletions
232
static/edit.js
Normal file
232
static/edit.js
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
// Variables globales
|
||||
let map;
|
||||
let draw;
|
||||
let currentMarker = null;
|
||||
|
||||
// Initialisation quand le DOM est chargé
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeForm();
|
||||
initializeMap();
|
||||
setupEventHandlers();
|
||||
});
|
||||
|
||||
function initializeForm() {
|
||||
if (!window.eventData) {
|
||||
console.error('Aucune donnée d\'événement disponible');
|
||||
return;
|
||||
}
|
||||
|
||||
const properties = window.eventData.properties || {};
|
||||
const geometry = window.eventData.geometry || {};
|
||||
|
||||
// Remplir les champs du formulaire
|
||||
document.getElementById('label').value = properties.label || '';
|
||||
document.getElementById('type').value = properties.type || 'scheduled';
|
||||
document.getElementById('what').value = properties.what || '';
|
||||
document.getElementById('what_series').value = properties['what:series'] || '';
|
||||
document.getElementById('where').value = properties.where || '';
|
||||
|
||||
// Convertir les dates pour les inputs datetime-local
|
||||
if (properties.start) {
|
||||
const startDate = new Date(properties.start);
|
||||
document.getElementById('start').value = formatDateTimeLocal(startDate);
|
||||
}
|
||||
if (properties.stop) {
|
||||
const stopDate = new Date(properties.stop);
|
||||
document.getElementById('stop').value = formatDateTimeLocal(stopDate);
|
||||
}
|
||||
|
||||
console.log('✅ Formulaire initialisé avec les données de l\'événement');
|
||||
}
|
||||
|
||||
function formatDateTimeLocal(date) {
|
||||
// Convertir une date en format compatible avec datetime-local
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
|
||||
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
function initializeMap() {
|
||||
if (!window.maplibregl) {
|
||||
console.error('MapLibre GL JS non disponible');
|
||||
return;
|
||||
}
|
||||
|
||||
const geometry = window.eventData?.geometry || {};
|
||||
const coordinates = geometry.coordinates || [2.3522, 48.8566]; // Paris par défaut
|
||||
|
||||
// Initialiser la carte
|
||||
map = new maplibregl.Map({
|
||||
container: 'map',
|
||||
style: 'https://tiles.openfreemap.org/styles/liberty',
|
||||
center: coordinates,
|
||||
zoom: coordinates[0] === 0 && coordinates[1] === 0 ? 2 : 12
|
||||
});
|
||||
|
||||
// Ajouter les contrôles
|
||||
map.addControl(new maplibregl.NavigationControl());
|
||||
map.addControl(new maplibregl.GeolocateControl({
|
||||
positionOptions: {
|
||||
enableHighAccuracy: true
|
||||
}
|
||||
}));
|
||||
|
||||
// Ajouter un marqueur pour la position actuelle
|
||||
if (coordinates[0] !== 0 || coordinates[1] !== 0) {
|
||||
currentMarker = new maplibregl.Marker()
|
||||
.setLngLat(coordinates)
|
||||
.addTo(map);
|
||||
}
|
||||
|
||||
// Gérer les clics sur la carte pour changer la position
|
||||
map.on('click', function(e) {
|
||||
const coords = [e.lngLat.lng, e.lngLat.lat];
|
||||
|
||||
// Supprimer l'ancien marqueur
|
||||
if (currentMarker) {
|
||||
currentMarker.remove();
|
||||
}
|
||||
|
||||
// Ajouter un nouveau marqueur
|
||||
currentMarker = new maplibregl.Marker()
|
||||
.setLngLat(coords)
|
||||
.addTo(map);
|
||||
|
||||
console.log('📍 Position mise à jour:', coords);
|
||||
});
|
||||
|
||||
console.log('✅ Carte initialisée');
|
||||
}
|
||||
|
||||
function setupEventHandlers() {
|
||||
// Gestionnaire de soumission du formulaire
|
||||
const form = document.getElementById('eventForm');
|
||||
if (form) {
|
||||
form.addEventListener('submit', handleFormSubmit);
|
||||
}
|
||||
|
||||
// Gestionnaire du bouton de suppression
|
||||
const deleteButton = document.getElementById('deleteButton');
|
||||
if (deleteButton) {
|
||||
deleteButton.addEventListener('click', handleDelete);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleFormSubmit(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const resultElement = document.getElementById('result');
|
||||
resultElement.innerHTML = '<div style="color: #0078ff;">⏳ Mise à jour en cours...</div>';
|
||||
resultElement.style.display = 'block';
|
||||
|
||||
try {
|
||||
// Récupérer les données du formulaire
|
||||
const formData = new FormData(e.target);
|
||||
const eventId = document.getElementById('eventId').value;
|
||||
|
||||
// Construire l'objet événement
|
||||
const updatedEvent = {
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Point',
|
||||
coordinates: currentMarker ?
|
||||
[currentMarker.getLngLat().lng, currentMarker.getLngLat().lat] :
|
||||
[0, 0]
|
||||
},
|
||||
properties: {
|
||||
...window.eventData.properties,
|
||||
label: formData.get('label'),
|
||||
type: formData.get('type'),
|
||||
what: formData.get('what'),
|
||||
'what:series': formData.get('what_series') || undefined,
|
||||
where: formData.get('where') || undefined,
|
||||
start: formData.get('start') ? new Date(formData.get('start')).toISOString() : undefined,
|
||||
stop: formData.get('stop') ? new Date(formData.get('stop')).toISOString() : undefined
|
||||
}
|
||||
};
|
||||
|
||||
// Nettoyer les propriétés undefined
|
||||
Object.keys(updatedEvent.properties).forEach(key => {
|
||||
if (updatedEvent.properties[key] === undefined) {
|
||||
delete updatedEvent.properties[key];
|
||||
}
|
||||
});
|
||||
|
||||
// Envoyer la mise à jour
|
||||
const response = await fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(updatedEvent)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
resultElement.innerHTML = `
|
||||
<div style="color: #28a745; padding: 15px; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px;">
|
||||
<i class="fas fa-check"></i>
|
||||
<strong>Succès:</strong> L'événement a été mis à jour avec succès.
|
||||
<br><a href="/demo/by_id/${eventId}">Voir l'événement</a>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
const errorData = await response.text();
|
||||
throw new Error(`HTTP ${response.status}: ${errorData}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la mise à jour:', error);
|
||||
resultElement.innerHTML = `
|
||||
<div style="color: #dc3545; padding: 15px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
<strong>Erreur:</strong> ${error.message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
const eventId = document.getElementById('eventId').value;
|
||||
const eventLabel = window.eventData?.properties?.label || 'cet événement';
|
||||
|
||||
if (!confirm(`Êtes-vous sûr de vouloir supprimer "${eventLabel}" ? Cette action est irréversible.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const resultElement = document.getElementById('result');
|
||||
resultElement.innerHTML = '<div style="color: #dc3545;">⏳ Suppression en cours...</div>';
|
||||
resultElement.style.display = 'block';
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://api.openeventdatabase.org/event/${eventId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
resultElement.innerHTML = `
|
||||
<div style="color: #28a745; padding: 15px; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 4px;">
|
||||
<i class="fas fa-check"></i>
|
||||
<strong>Succès:</strong> L'événement a été supprimé avec succès.
|
||||
<br><a href="/demo">Retour à la démo</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Désactiver le formulaire après suppression
|
||||
document.getElementById('eventForm').style.display = 'none';
|
||||
} else {
|
||||
const errorData = await response.text();
|
||||
throw new Error(`HTTP ${response.status}: ${errorData}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la suppression:', error);
|
||||
resultElement.innerHTML = `
|
||||
<div style="color: #dc3545; padding: 15px; background: #f8d7da; border: 1px solid #f5c6cb; border-radius: 4px;">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
<strong>Erreur:</strong> ${error.message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -30,6 +30,28 @@ window.EMOJI_CRITERIA = {
|
|||
criteria: (name, description, what) => {
|
||||
return (what || '').toLowerCase().includes('bike');
|
||||
}
|
||||
},
|
||||
// Emoji casque de chantier pour les travaux
|
||||
construction: {
|
||||
emoji: '🏗️️',
|
||||
criteria: (name, description, what) => {
|
||||
const text = (name + ' ' + description + ' ' + what).toLowerCase();
|
||||
return text.includes('travaux');
|
||||
}
|
||||
},
|
||||
// Emoji soleil pour les types contenant "daylight"
|
||||
daylight: {
|
||||
emoji: '☀️',
|
||||
criteria: (name, description, what) => {
|
||||
return (what || '').toLowerCase().includes('daylight');
|
||||
}
|
||||
},
|
||||
// Emoji carte pour les types contenant "community.osm"
|
||||
osm_community: {
|
||||
emoji: '🗺️',
|
||||
criteria: (name, description, what) => {
|
||||
return (what || '').toLowerCase().includes('community.osm');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -39,6 +61,11 @@ function getEventEmoji(properties) {
|
|||
const description = properties.description || '';
|
||||
const what = properties.what || '';
|
||||
|
||||
|
||||
if (what.includes('accident')) return 'PAF!';
|
||||
if (what.includes('incident')) return '⚠️';
|
||||
if (what.includes('traffic')) return '🚗';
|
||||
|
||||
// Parcourir les critères dans l'ordre de priorité
|
||||
for (const [key, config] of Object.entries(window.EMOJI_CRITERIA)) {
|
||||
if (config.criteria(name, description, what)) {
|
||||
|
|
@ -47,10 +74,8 @@ function getEventEmoji(properties) {
|
|||
}
|
||||
|
||||
// Emoji par défaut selon le type d'événement
|
||||
if (what.includes('traffic')) return '🚗';
|
||||
if (what.includes('weather')) return '🌤️';
|
||||
if (what.includes('gathering')) return '👥';
|
||||
if (what.includes('incident')) return '⚠️';
|
||||
|
||||
return ' '; // Emoji par défaut
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue