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;
});