tykayn/oedb-backend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add live page

Browse source
This commit is contained in:
Tykayn 2025-09-26 11:57:54 +02:00 • committed by tykayn
parent 114bcca24e
commit eb8c42d0c0
19 changed files with 2759 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

48
oedb/resources/demo/static/traffic.js
View file

@ -7,6 +7,23 @@ let existingMarkers = [];
const PANORAMAX_TOKEN_STORAGE_KEY = 'oedb_panoramax_token';
let mediaStream = null;
// Fonction pour créer un marqueur personnalisé avec emoji
function createCustomMarker(emoji, backgroundColor) {
const markerElement = document.createElement('div');
markerElement.className = 'custom-marker';
markerElement.style.width = '30px';
markerElement.style.height = '30px';
markerElement.style.borderRadius = '50%';
markerElement.style.backgroundColor = backgroundColor;
markerElement.style.display = 'flex';
markerElement.style.justifyContent = 'center';
markerElement.style.alignItems = 'center';
markerElement.style.fontSize = '16px';
markerElement.style.boxShadow = '0 2px 4px rgba(0,0,0,0.3)';
markerElement.innerHTML = emoji;
return markerElement;
}
function setDefaultDates() {
const now = new Date();
const nowISO = now.toISOString().slice(0, 16);
@ -70,8 +87,22 @@ function fetchExistingTrafficEvents() {
if (event.geometry && event.geometry.type === 'Point') {
const coords = event.geometry.coordinates;
const needsRealityCheck = checkIfNeedsRealityCheck(event);
const markerColor = needsRealityCheck ? '#ff9800' : '#888888';
const em = new maplibregl.Marker({ color: markerColor }).setLngLat(coords).addTo(map);
let markerColor = needsRealityCheck ? '#ff9800' : '#888888';
let markerOptions = { color: markerColor };
// Check if event title contains "vélo" or "travaux"
const eventTitle = event.properties.label || '';
if (eventTitle.toLowerCase().includes('vélo')) {
markerOptions = {
element: createCustomMarker('🚲', markerColor)
};
} else if (eventTitle.toLowerCase().includes('travaux')) {
markerOptions = {
element: createCustomMarker('🚧', markerColor)
};
}
const em = new maplibregl.Marker(markerOptions).setLngLat(coords).addTo(map);
let popupContent = `\n<h3>${event.properties.label || 'Traffic Event'}</h3>\n<p>Type: ${event.properties.what || 'Unknown'}</p>\n<p>Start: ${event.properties.start || 'Unknown'}</p>\n<p>End: ${event.properties.stop || 'Unknown'}</p>`;
if (needsRealityCheck) {
popupContent += `\n<div class="reality-check">\n<p>Is this traffic event still present?</p>\n<div class="reality-check-buttons">\n<button class="confirm-btn" onclick="confirmEvent('${event.properties.id}', true)">Yes, still there</button>\n<button class="deny-btn" onclick="confirmEvent('${event.properties.id}', false)">No, it's gone</button>\n</div>\n</div>`;
@ -590,11 +621,24 @@ function updateUserInfoDisplay() {
userInfoPanel.innerHTML = `\n<h3>User Information</h3>\n<p>Username: <strong>${username}</strong></p>\n<p>Points: <span class="user-points">${points}</span></p>`;
}
// Initialize collapsible panels
function initCollapsiblePanels() {
const headers = document.querySelectorAll('.collapsible-header');
headers.forEach(header => {
header.addEventListener('click', function() {
this.classList.toggle('active');
const content = this.nextElementSibling;
content.classList.toggle('active');
});
});
}
document.addEventListener('DOMContentLoaded', function() {
setDefaultDates();
initTabs();
initMap();
updateUserInfoDisplay();
initCollapsiblePanels();
});
// Contrôles Caméra