99 lines
3.6 KiB
JavaScript
99 lines
3.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
// Mode switching
|
|
const modeCreateBtn = document.getElementById('mode-create');
|
|
const modeViewBtn = document.getElementById('mode-view');
|
|
const createPanel = document.getElementById('create-panel');
|
|
const viewPanel = document.getElementById('view-panel');
|
|
const markersContainer = document.getElementById('markers-container');
|
|
const emptyMarkers = document.getElementById('empty-markers');
|
|
|
|
function switchMode(mode) {
|
|
if (mode === 'create') {
|
|
modeCreateBtn.classList.add('active');
|
|
modeViewBtn.classList.remove('active');
|
|
createPanel.classList.add('active-panel');
|
|
viewPanel.classList.remove('active-panel');
|
|
// Enable marker adding
|
|
window.isCreatingJourney = true;
|
|
} else { // view mode
|
|
modeCreateBtn.classList.remove('active');
|
|
modeViewBtn.classList.add('active');
|
|
createPanel.classList.remove('active-panel');
|
|
viewPanel.classList.add('active-panel');
|
|
// Disable marker adding
|
|
window.isCreatingJourney = false;
|
|
}
|
|
}
|
|
|
|
modeCreateBtn.addEventListener('click', () => switchMode('create'));
|
|
modeViewBtn.addEventListener('click', () => switchMode('view'));
|
|
|
|
// Journey save handler
|
|
document.getElementById('save-journey').addEventListener('click', function() {
|
|
const title = document.getElementById('journey-title').value;
|
|
const description = document.getElementById('journey-description').value;
|
|
|
|
if (!title.trim()) {
|
|
alert('Journey title cannot be empty');
|
|
return;
|
|
}
|
|
|
|
window.currentJourney.name = title;
|
|
window.currentJourney.description = description;
|
|
|
|
// Add the current journey to the journeys array if not already added
|
|
const existingJourneyIndex = window.journeys.findIndex(j => j.id === window.currentJourney.id);
|
|
if (existingJourneyIndex === -1) {
|
|
window.journeys.push({
|
|
id: window.currentJourney.id,
|
|
name: window.currentJourney.name,
|
|
description: window.currentJourney.description,
|
|
markers: window.currentJourney.markers.map(marker => ({
|
|
id: marker.id,
|
|
lngLat: marker.getLngLat(),
|
|
content: marker.content
|
|
}))
|
|
});
|
|
} else {
|
|
window.journeys[existingJourneyIndex] = {
|
|
...window.journeys[existingJourneyIndex],
|
|
name: window.currentJourney.name,
|
|
description: window.currentJourney.description,
|
|
markers: window.currentJourney.markers.map(marker => ({
|
|
id: marker.id,
|
|
lngLat: marker.getLngLat(),
|
|
content: marker.content
|
|
}))
|
|
};
|
|
}
|
|
|
|
window.saveJourneyToLocalStorage();
|
|
|
|
// Show notification
|
|
document.getElementById('toast-message').textContent = 'Journey saved successfully!';
|
|
document.getElementById('toast').classList.add('show');
|
|
setTimeout(() => {
|
|
document.getElementById('toast').classList.remove('show');
|
|
}, 3000);
|
|
});
|
|
|
|
// Clear markers
|
|
document.getElementById('clear-markers').addEventListener('click', function() {
|
|
if (window.currentJourney.markers.length > 0 && confirm('Are you sure you want to clear all markers?')) {
|
|
window.currentJourney.markers.forEach(marker => marker.remove());
|
|
window.currentJourney.markers = [];
|
|
markersContainer.innerHTML = '';
|
|
emptyMarkers.style.display = 'block';
|
|
window.updateJourneyPath();
|
|
}
|
|
});
|
|
|
|
// Toggle sidebar
|
|
document.getElementById('toggle-sidebar').addEventListener('click', function() {
|
|
document.querySelector('.sidebar').classList.toggle('collapsed');
|
|
});
|
|
|
|
// Initialize in create mode
|
|
switchMode('create');
|
|
});
|