geoguessr/static/admin.js

let map;
let drawingManager;
let lastDrawnShape = null;
let displayedShapes = [];

const difficultyColors = {
    easy: '#34A853',
    medium: '#F9AB00',
    hard: '#EA4335'
};

function api(path) {
    return path.startsWith('/') ? path.slice(1) : path;
}

function initAdminMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 20, lng: 0 },
        zoom: 2,
    });

    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [google.maps.drawing.OverlayType.RECTANGLE],
        },
        rectangleOptions: {
            fillColor: '#F97316',
            fillOpacity: 0.3,
            strokeWeight: 1,
            clickable: true,
            editable: true,
            zIndex: 1,
        },
    });

    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
        if (lastDrawnShape) {
            lastDrawnShape.setMap(null);
        }
        lastDrawnShape = event.overlay;
        drawingManager.setDrawingMode(null);
        document.getElementById('save-zone').disabled = false;
    });

    document.getElementById('save-zone').addEventListener('click', saveLastZone);
    document.getElementById('new-zone-btn').addEventListener('click', () => {
        drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
        document.getElementById('save-zone').disabled = true;
    });

    loadExistingZones();
}

function saveLastZone() {
    if (!lastDrawnShape) {
        alert('Please draw a zone first.');
        return;
    }

    const difficulty = document.getElementById('difficulty-select').value;
    const bounds = lastDrawnShape.getBounds().toJSON();

    const zoneData = { type: 'rectangle', bounds: bounds };

    fetch(api('/api/zones'), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ difficulty: difficulty, zone: zoneData }),
    })
    .then(response => response.json())
    .then(data => {
        const statusMsg = document.getElementById('status-message');
        statusMsg.textContent = data.message || `Error: ${data.error}`;
        setTimeout(() => statusMsg.textContent = '', 3000);
        if (lastDrawnShape) {
            lastDrawnShape.setMap(null);
            lastDrawnShape = null;
        }
        document.getElementById('save-zone').disabled = true;
        loadExistingZones();
    });
}

function loadExistingZones() {
    displayedShapes.forEach(shape => shape.setMap(null));
    displayedShapes = [];

    fetch(api('/api/zones'))
        .then(response => response.json())
        .then(zones => {
            for (const difficulty in zones) {
                zones[difficulty].forEach(zone => {
                    if (zone.type === 'rectangle') {
                        const rectangle = new google.maps.Rectangle({
                            bounds: zone.bounds,
                            map: map,
                            fillColor: difficultyColors[difficulty],
                            fillOpacity: 0.35,
                            strokeColor: difficultyColors[difficulty],
                            strokeWeight: 2,
                            editable: false,
                            clickable: true,
                        });
                        rectangle.zoneId = zone.id;
                        google.maps.event.addListener(rectangle, 'click', function() {
                            if (confirm('Are you sure you want to delete this zone?')) {
                                deleteZone(this.zoneId, this);
                            }
                        });
                        displayedShapes.push(rectangle);
                    }
                });
            }
        });
}

function deleteZone(zoneId, shape) {
    fetch(api('/api/zones'), {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ zone_id: zoneId })
    })
    .then(response => response.json())
    .then(data => {
        const statusMsg = document.getElementById('status-message');
        statusMsg.textContent = data.message || `Error: ${data.error}`;
        setTimeout(() => statusMsg.textContent = '', 3000);
        if (data.message) {
            shape.setMap(null);
        }
    });
}