// Logique JavaScript spécifique à /demo/traffic
// Variables globales faibles (map, marker)
let map;
let marker;
let existingMarkers = [];
const PANORAMAX_TOKEN_STORAGE_KEY = 'oedb_panoramax_token';
let mediaStream = null;
function setDefaultDates() {
const now = new Date();
const nowISO = now.toISOString().slice(0, 16);
document.getElementById('start').value = nowISO;
const sixHoursLater = new Date(now.getTime() + 6 * 60 * 60 * 1000);
document.getElementById('stop').value = sixHoursLater.toISOString().slice(0, 16);
}
function initTabs() {
const tabItems = document.querySelectorAll('.tab-item');
tabItems.forEach(tab => {
tab.addEventListener('click', function() {
tabItems.forEach(item => item.classList.remove('active'));
this.classList.add('active');
const tabName = this.getAttribute('data-tab');
document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
document.getElementById(tabName + '-tab').classList.add('active');
localStorage.setItem('activeTab', tabName);
});
});
const activeTab = localStorage.getItem('activeTab');
if (activeTab) {
const tabItem = document.querySelector(`.tab-item[data-tab="${activeTab}"]`);
if (tabItem) tabItem.click();
}
}
function initMap() {
map = new maplibregl.Map({
container: 'map',
style: 'https://tiles.openfreemap.org/styles/liberty',
center: [2.2137, 46.2276],
zoom: 5
});
map.addControl(new maplibregl.NavigationControl());
marker = new maplibregl.Marker({ draggable: true, color: '#ff3860' });
map.on('load', fetchExistingTrafficEvents);
map.on('click', function(e) {
marker.setLngLat(e.lngLat).addTo(map);
setTimeout(validateForm, 100);
});
}
function setGpsStatus(text, ok = null) {
const el = document.getElementById('gpsStatus');
if (!el) return;
el.textContent = `GPS: ${text}`;
if (ok === true) { el.style.color = '#2e7d32'; }
else if (ok === false) { el.style.color = '#c62828'; }
else { el.style.color = '#555'; }
}
function fetchExistingTrafficEvents() {
existingMarkers.forEach(m => m.remove());
existingMarkers = [];
fetch('https://api.openeventdatabase.org/event?what=traffic')
.then(r => { if (!r.ok) throw new Error('Failed to fetch existing traffic events'); return r.json(); })
.then(data => {
if (!data || !Array.isArray(data.features)) return;
data.features.forEach(event => {
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 popupContent = `\n${event.properties.label || 'Traffic Event'}
\nType: ${event.properties.what || 'Unknown'}
\nStart: ${event.properties.start || 'Unknown'}
\nEnd: ${event.properties.stop || 'Unknown'}
`;
if (needsRealityCheck) {
popupContent += `\n\n
Is this traffic event still present?
\n
\n\n\n
\n
\n
Reality check: ${event.properties['reality_check']}
\n
\nView Report on Server |\nView Saved Reports |\nBack to Map\n
`;
document.getElementById('trafficForm').reset();
setDefaultDates();
marker.remove();
fetchExistingTrafficEvents();
})
.catch(error => { showResult(`Error reporting issue: ${error.message}`, 'error'); });
});
function saveEventToLocalStorage(event) {
let savedEvents = JSON.parse(localStorage.getItem('oedb_events') || '[]');
event.timestamp = new Date().toISOString();
savedEvents.push(event);
localStorage.setItem('oedb_events', JSON.stringify(savedEvents));
}
function updateEventInLocalStorage(event, serverId) {
let savedEvents = JSON.parse(localStorage.getItem('oedb_events') || '[]');
const eventIndex = savedEvents.findIndex(e => e.timestamp === event.timestamp && e.geometry.coordinates[0] === event.geometry.coordinates[0] && e.geometry.coordinates[1] === event.geometry.coordinates[1]);
if (eventIndex !== -1) {
savedEvents[eventIndex].properties.id = serverId;
localStorage.setItem('oedb_events', JSON.stringify(savedEvents));
}
}
function showResult(message, type) {
const resultElement = document.getElementById('result');
resultElement.textContent = message;
resultElement.className = type;
resultElement.style.display = 'block';
resultElement.scrollIntoView({ behavior: 'smooth' });
}
function confirmEvent(eventId, isConfirmed) {
let username = localStorage.getItem('oedb_username');
if (!username) {
username = promptForUsername();
if (!username) return;
}
const now = new Date();
const dateTimeString = now.toISOString();
const realityCheckStatus = isConfirmed ? 'confirmed' : 'not confirmed';
const realityCheckValue = `${dateTimeString} | ${username} | ${realityCheckStatus}`;
fetch(`https://api.openeventdatabase.org/event/${eventId}`)
.then(r => { if (!r.ok) throw new Error(`Failed to fetch event ${eventId}`); return r.json(); })
.then(event => {
event.properties['reality_check'] = realityCheckValue;
return fetch(`https://api.openeventdatabase.org/event/${eventId}`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(event) });
})
.then(r => { if (!r.ok) throw new Error('Failed to update event'); saveContribution(eventId, isConfirmed); awardPoints(3); showResult(`Thank you for your contribution! You've earned 3 points.`, 'success'); updateUserInfoDisplay(); fetchExistingTrafficEvents(); })
.catch(err => { console.error('Error updating event:', err); showResult(`Error: ${err.message}`, 'error'); });
}
function promptForUsername() {
const username = prompt('Please enter your username:');
if (username) { localStorage.setItem('oedb_username', username); return username; }
return null;
}
function saveContribution(eventId, isConfirmed) {
let contributions = JSON.parse(localStorage.getItem('oedb_contributions') || '[]');
contributions.push({ eventId, timestamp: new Date().toISOString(), isConfirmed });
localStorage.setItem('oedb_contributions', JSON.stringify(contributions));
}
function awardPoints(points) {
let currentPoints = parseInt(localStorage.getItem('oedb_points') || '0');
currentPoints += points;
localStorage.setItem('oedb_points', currentPoints.toString());
}
function updateUserInfoDisplay() {
const username = localStorage.getItem('oedb_username') || 'Anonymous';
const points = localStorage.getItem('oedb_points') || '0';
let userInfoPanel = document.getElementById('user-info-panel');
if (!userInfoPanel) {
userInfoPanel = document.createElement('div');
userInfoPanel.id = 'user-info-panel';
userInfoPanel.className = 'user-info-panel';
const navLinks = document.querySelector('.nav-links');
navLinks.parentNode.insertBefore(userInfoPanel, navLinks.nextSibling);
}
userInfoPanel.innerHTML = `\nUser Information
\nUsername: ${username}
\nPoints: ${points}
`;
}
document.addEventListener('DOMContentLoaded', function() {
setDefaultDates();
initTabs();
initMap();
updateUserInfoDisplay();
});
// Contrôles Caméra
const startCameraBtn = document.getElementById('startCameraBtn');
const capturePhotoBtn = document.getElementById('capturePhotoBtn');
const stopCameraBtn = document.getElementById('stopCameraBtn');
const cameraVideo = document.getElementById('cameraVideo');
const cameraCanvas = document.getElementById('cameraCanvas');
async function startCamera() {
try {
mediaStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' }, audio: false });
cameraVideo.srcObject = mediaStream;
capturePhotoBtn.disabled = false;
stopCameraBtn.disabled = false;
startCameraBtn.disabled = true;
} catch (e) {
showResult(`Impossible d'accéder à la caméra: ${e.message}`, 'error');
}
}
function stopCamera() {
if (mediaStream) {
mediaStream.getTracks().forEach(t => t.stop());
mediaStream = null;
}
cameraVideo.srcObject = null;
capturePhotoBtn.disabled = true;
stopCameraBtn.disabled = true;
startCameraBtn.disabled = false;
}
function dataURLToFile(dataUrl, filename) {
const arr = dataUrl.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) { u8arr[n] = bstr.charCodeAt(n); }
return new File([u8arr], filename, { type: mime });
}
function capturePhoto() {
try {
const width = cameraVideo.videoWidth;
const height = cameraVideo.videoHeight;
if (!width || !height) { showResult('Vidéo non prête', 'error'); return; }
cameraCanvas.width = width;
cameraCanvas.height = height;
const ctx = cameraCanvas.getContext('2d');
ctx.drawImage(cameraVideo, 0, 0, width, height);
const dataUrl = cameraCanvas.toDataURL('image/jpeg', 0.92);
const file = dataURLToFile(dataUrl, 'camera_capture.jpg');
// Remplit le file input pour réutiliser le flux existant
const dt = new DataTransfer();
dt.items.add(file);
const input = document.getElementById('photo');
input.files = dt.files;
// Déclenche l’aperçu
const url = URL.createObjectURL(file);
const img = document.getElementById('photoPreview');
img.src = url;
document.getElementById('photoPreviewContainer').style.display = 'block';
showResult('Photo capturée depuis la caméra', 'success');
} catch (e) {
showResult(`Échec capture photo: ${e.message}`, 'error');
}
}
if (startCameraBtn && capturePhotoBtn && stopCameraBtn) {
startCameraBtn.addEventListener('click', startCamera);
capturePhotoBtn.addEventListener('click', capturePhoto);
stopCameraBtn.addEventListener('click', stopCamera);
}
// Expose functions used in inline HTML popups
window.fillForm = fillForm;
window.confirmEvent = confirmEvent;