// Admin panel JavaScript
let adminMap = null;
let startMarker = null;
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
checkAdminAuth();
initializeAdminMap();
loadCurrentStartLocation();
setupEventListeners();
});
// Check if user is authenticated as admin
async function checkAdminAuth() {
try {
const response = await fetch('/api/auth/check');
const data = await response.json();
if (!data.authenticated || !data.user?.isAdmin) {
window.location.href = '/login.html';
return;
}
// Display admin info
document.getElementById('admin-info').innerHTML = `
👤 ${escapeHtml(data.user.email)}
`;
document.getElementById('logout-btn').addEventListener('click', handleLogout);
} catch (error) {
console.error('Auth check failed:', error);
window.location.href = '/login.html';
}
}
// Initialize the admin map
function initializeAdminMap() {
adminMap = L.map('admin-map').setView([53.5461, -113.4938], 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
maxZoom: 19,
minZoom: 2
}).addTo(adminMap);
// Add click handler to set location
adminMap.on('click', handleMapClick);
// Update coordinates when map moves
adminMap.on('moveend', updateCoordinatesFromMap);
}
// Load current start location
async function loadCurrentStartLocation() {
try {
const response = await fetch('/api/admin/start-location');
const data = await response.json();
if (data.success) {
const { latitude, longitude, zoom } = data.location;
// Update form fields
document.getElementById('start-lat').value = latitude;
document.getElementById('start-lng').value = longitude;
document.getElementById('start-zoom').value = zoom;
// Update map
adminMap.setView([latitude, longitude], zoom);
updateStartMarker(latitude, longitude);
// Show source info
if (data.source) {
const sourceText = data.source === 'database' ? 'Loaded from database' :
data.source === 'environment' ? 'Using environment defaults' :
'Using system defaults';
showStatus(sourceText, 'info');
}
}
} catch (error) {
console.error('Failed to load start location:', error);
showStatus('Failed to load current start location', 'error');
}
}
// Handle map click
function handleMapClick(e) {
const { lat, lng } = e.latlng;
document.getElementById('start-lat').value = lat.toFixed(6);
document.getElementById('start-lng').value = lng.toFixed(6);
updateStartMarker(lat, lng);
}
// Update marker position
function updateStartMarker(lat, lng) {
if (startMarker) {
startMarker.setLatLng([lat, lng]);
} else {
startMarker = L.marker([lat, lng], {
draggable: true,
title: 'Start Location'
}).addTo(adminMap);
// Update coordinates when marker is dragged
startMarker.on('dragend', (e) => {
const position = e.target.getLatLng();
document.getElementById('start-lat').value = position.lat.toFixed(6);
document.getElementById('start-lng').value = position.lng.toFixed(6);
});
}
}
// Update coordinates from current map view
function updateCoordinatesFromMap() {
const center = adminMap.getCenter();
const zoom = adminMap.getZoom();
document.getElementById('start-zoom').value = zoom;
}
// Setup event listeners
function setupEventListeners() {
// Use current view button
document.getElementById('use-current-view').addEventListener('click', () => {
const center = adminMap.getCenter();
const zoom = adminMap.getZoom();
document.getElementById('start-lat').value = center.lat.toFixed(6);
document.getElementById('start-lng').value = center.lng.toFixed(6);
document.getElementById('start-zoom').value = zoom;
updateStartMarker(center.lat, center.lng);
showStatus('Captured current map view', 'success');
});
// Save button
document.getElementById('save-start-location').addEventListener('click', saveStartLocation);
// Coordinate input changes
document.getElementById('start-lat').addEventListener('change', updateMapFromInputs);
document.getElementById('start-lng').addEventListener('change', updateMapFromInputs);
document.getElementById('start-zoom').addEventListener('change', updateMapFromInputs);
}
// Update map from input fields
function updateMapFromInputs() {
const lat = parseFloat(document.getElementById('start-lat').value);
const lng = parseFloat(document.getElementById('start-lng').value);
const zoom = parseInt(document.getElementById('start-zoom').value);
if (!isNaN(lat) && !isNaN(lng) && !isNaN(zoom)) {
adminMap.setView([lat, lng], zoom);
updateStartMarker(lat, lng);
}
}
// Save start location
async function saveStartLocation() {
const lat = parseFloat(document.getElementById('start-lat').value);
const lng = parseFloat(document.getElementById('start-lng').value);
const zoom = parseInt(document.getElementById('start-zoom').value);
// Validate
if (isNaN(lat) || isNaN(lng) || isNaN(zoom)) {
showStatus('Please enter valid coordinates and zoom level', 'error');
return;
}
if (lat < -90 || lat > 90 || lng < -180 || lng > 180) {
showStatus('Coordinates out of valid range', 'error');
return;
}
if (zoom < 2 || zoom > 19) {
showStatus('Zoom level must be between 2 and 19', 'error');
return;
}
try {
const response = await fetch('/api/admin/start-location', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
latitude: lat,
longitude: lng,
zoom: zoom
})
});
const data = await response.json();
if (data.success) {
showStatus('Start location saved successfully!', 'success');
} else {
throw new Error(data.error || 'Failed to save');
}
} catch (error) {
console.error('Save error:', error);
showStatus(error.message || 'Failed to save start location', 'error');
}
}
// Handle logout
async function handleLogout() {
if (!confirm('Are you sure you want to logout?')) {
return;
}
try {
const response = await fetch('/api/auth/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
});
if (response.ok) {
window.location.href = '/login.html';
} else {
showStatus('Logout failed. Please try again.', 'error');
}
} catch (error) {
console.error('Logout error:', error);
showStatus('Logout failed. Please try again.', 'error');
}
}
// Show status message
function showStatus(message, type = 'info') {
const container = document.getElementById('status-container');
const messageDiv = document.createElement('div');
messageDiv.className = `status-message ${type}`;
messageDiv.textContent = message;
container.appendChild(messageDiv);
// Auto-remove after 5 seconds
setTimeout(() => {
messageDiv.remove();
}, 5000);
}
// Escape HTML
function escapeHtml(text) {
if (text === null || text === undefined) {
return '';
}
const div = document.createElement('div');
div.textContent = String(text);
return div.innerHTML;
}