frontend/script.js

// filepath: /gis-tools-app/gis-tools-app/frontend/script.js
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tool-specific functionalities
    if (document.getElementById('calculate-distance')) {
        setupDistanceCalculator();
    }
    if (document.getElementById('calculate-area')) {
        setupAreaCalculator();
    }
    if (document.getElementById('convert-coordinates')) {
        setupCoordinateConverter();
    }
    if (document.getElementById('extract-terrain')) {
        setupTerrainDataExtractor();
    }
    if (document.getElementById('calculate-elevation')) {
        setupElevationCalculator();
    }
});

function setupDistanceCalculator() {
    document.getElementById('calculate-distance').addEventListener('click', async function() {
        const lat1 = parseFloat(document.getElementById('latitude-1').value);
        const lon1 = parseFloat(document.getElementById('longitude-1').value);
        const lat2 = parseFloat(document.getElementById('latitude-2').value);
        const lon2 = parseFloat(document.getElementById('longitude-2').value);
        
        const response = await fetch('/api/distance', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ lat1, lon1, lat2, lon2 })
        });
        
        const data = await response.json();
        document.getElementById('distance-result').innerText = `Distance: ${data.distance} km`;
    });
}

function setupAreaCalculator() {
    document.getElementById('calculate-area').addEventListener('click', async function() {
        const coordinates = getPolygonCoordinates();
        
        const response = await fetch('/api/area', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ coordinates })
        });
        
        const data = await response.json();
        document.getElementById('area-result').innerText = `Area: ${data.area} sq km`;
    });
}

function getPolygonCoordinates() {
    const coords = [];
    const coordElements = document.querySelectorAll('.coordinate-input');
    coordElements.forEach(input => {
        const lat = parseFloat(input.querySelector('.latitude-input').value);
        const lon = parseFloat(input.querySelector('.longitude-input').value);
        if (!isNaN(lat) && !isNaN(lon)) {
            coords.push([lat, lon]);
        }
    });
    return coords;
}

function setupCoordinateConverter() {
    document.getElementById('convert-coordinates').addEventListener('click', async function() {
        const lat = parseFloat(document.getElementById('coordinate-lat').value);
        const lon = parseFloat(document.getElementById('coordinate-lon').value);
        const sourceCRS = document.getElementById('source-crs').value;
        const targetCRS = document.getElementById('target-crs').value;
        
        const response = await fetch('/api/coordinate-convert', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ lat, lon, sourceCRS, targetCRS })
        });
        
        const data = await response.json();
        document.getElementById('converted-coords').innerText = `Converted: ${data.lat}, ${data.lon}`;
    });
}

function setupTerrainDataExtractor() {
    document.getElementById('extract-terrain').addEventListener('click', async function() {
        const lat = parseFloat(document.getElementById('terrain-lat').value);
        const lon = parseFloat(document.getElementById('terrain-lon').value);
        
        const response = await fetch('/api/terrain', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ lat, lon })
        });
        
        const data = await response.json();
        document.getElementById('terrain-result').innerText = `Slope: ${data.slope}, Aspect: ${data.aspect}`;
    });
}

function setupElevationCalculator() {
    document.getElementById('calculate-elevation').addEventListener('click', async function() {
        const lat = parseFloat(document.getElementById('elevation-lat').value);
        const lon = parseFloat(document.getElementById('elevation-lon').value);
        
        const response = await fetch('/api/elevation', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ latitude: lat, longitude: lon })
        });
        
        const data = await response.json();
        document.getElementById('elevation-result').innerText = `Elevation: ${data.elevation} meters`;
    });
}