118 lines
4.3 KiB
JavaScript
118 lines
4.3 KiB
JavaScript
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;
|
|
});
|