ruscomap/public/js/eventHandler.js

import { basicElements } from "./getHtmlElements.js";
import { createMarkerTemp } from "./markerHandler.js";
import { mapInit } from "./mapInit.js";

export function initEvents(map) {

    let editMode = false
    let isTmpMarkerSet = false
    let tmpMarkerSet = {}


    const [addMarkerBtn, markerFormContainer, markerForm, noticeCoordsPicker, remainingForm] = basicElements()

    markerForm.addEventListener("submit", processForm);

    function setStyleForEditing(){
        markerFormContainer.style.display = 'flex';
        noticeCoordsPicker.style.display = 'block'; //messaggio inserimento
        remainingForm.style.display = 'none'; // form dati
        // imposta una X rossa come icona pulsante, come icona cursore un marker e entra nella modalità inserimento.
        document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/xred20.png" alt="Button Image" />';
        document.getElementById('map').style = 'cursor: url("js/dist/images/marker-icon.png") 13 41, auto;';
    }

    function setStyleNotEditing() {
        markerForm.reset();
        document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon18.png" alt="Button Image" />';
        document.getElementById('map').style = 'cursor: auto;';
        noticeCoordsPicker.style.display = 'none'; //messaggio inserimento
        remainingForm.style.display = 'none'; // form dati
        markerFormContainer.style.display = 'none';
    }

    addMarkerBtn.onclick = function (event) {
        event.stopPropagation();
        if (!editMode) {
            setStyleForEditing()
            editMode = true;
            isTmpMarkerSet = false;
            tmpMarkerSet = {};
            document.querySelector('.file-chosen').textContent = '';
        } else {
            setStyleNotEditing();
            editMode = false;
            map.removeLayer(tmpMarkerSet)
            isTmpMarkerSet = false;
            tmpMarkerSet = {};
        }
    };


    //event listener onclick on map, inserisce marker il temporaneo e mostra il remainingForm
    map.on("click", function (e) {
        if (editMode && !isTmpMarkerSet) {
            let formInputCoordY = document.getElementById('formInputCoordY')
            let formInputCoordX = document.getElementById('formInputCoordX')
            formInputCoordY.value = e.latlng.lat
            formInputCoordX.value = e.latlng.lng
            noticeCoordsPicker.style.display = 'none';
            remainingForm.style.display = 'block';
            map.getContainer().style.cursor = 'auto';
            const formattedDate = new Date().toISOString();
            const tmpMarker = {
                coordinate: { x: formInputCoordX.value, y: formInputCoordY.value },
                name: "",
                description: "Compila il form per aggiungere un marker qui. Oppure annulla l'inserimento del marker cliccando sulla X in alto a destra",
                filename: "../img/trashw.png",
                ts: formattedDate,
            }
            tmpMarkerSet = createMarkerTemp(tmpMarker, L, map, true)
            isTmpMarkerSet = true
        }
    })

    function handleSentFormStyle() {
        document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon18.png" alt="Button Image" />';
        document.getElementById('map').style = 'cursor: auto;';
        markerFormContainer.style.display = 'none'; //tutto
        const remainingForm = document.getElementById("remainingForm")
        remainingForm.style.display = 'none';
        document.getElementById("addMarkerBtn").innerHTML = '<img src="../img/marker-icon18.png" alt="Button Image" />';
        document.getElementById("markerFormContainer").style.display = 'none';
    }

    async function processForm(e) {
        e.preventDefault();
        handleSentFormStyle()
        // imposta un marker come icona pulsante, icona cursore normale e esce dalla modalità inserimento.
        editMode = false;
        isTmpMarkerSet = false;
        const markerForm = document.getElementById("markerForm")
        const formData = new FormData(markerForm)
        markerForm.reset();

        await fetch('/uploadMarker', {
            method: 'POST',
            body: formData,
        }).then(async () => {
            await map.fetchNewMarkers().then( () =>
                map.removeLayer(tmpMarkerSet)
            );
        }
        )
    };

}

document.getElementById('file-input').addEventListener('change', function () {
    const fileName = this.files[0] ? this.files[0].name : 'No file chosen';
    const truncatedFileName = fileName.length > 21 ? fileName.slice(0, 21) + '...' : fileName;
    document.querySelector('.file-chosen').textContent = truncatedFileName;
});