114 lines
4.6 KiB
JavaScript
114 lines
4.6 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;
|
|
});
|
|
|