lint and format client js

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
 uploads/
 config/default.json
-.vscode/
+.vscode/
+db_data/

compose.yml

@@ -0,0 +1,14 @@
+services:
+
+  db:
+    image: mariadb
+    restart: always
+    environment:
+      MARIADB_DATABASE: ruscomap
+      MYSQL_USER: ruscone
+      MYSQL_PASSWORD: password
+      MYSQL_RANDOM_ROOT_PASSWORD: '1'
+    ports:
+      - 3306:3306
+    volumes:
+      - ./db_data:/var/lib/mysql

public/js/eventHandler.js

@@ -1,114 +1,118 @@
-
 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 = {};
 
-    let editMode = false
-    let isTmpMarkerSet = false
-    let tmpMarkerSet = {}
+  const [
+    addMarkerBtn,
+    markerFormContainer,
+    markerForm,
+    noticeCoordsPicker,
+    remainingForm,
+  ] = basicElements();
 
+  markerForm.addEventListener("submit", processForm);
 
-    const [addMarkerBtn, markerFormContainer, markerForm, noticeCoordsPicker, remainingForm] = basicElements()
+  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;';
+  }
 
-    markerForm.addEventListener("submit", processForm);
+  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";
+  }
 
-    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;';
+  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 = {};
     }
+  };
 
-    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';
+  //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;
     }
+  });
 
-    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 = {};
-        }
-    };
+  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();
 
-    //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)
-            );
-        }
-        )
-    };
-
+    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;
+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;
 });
-

public/js/getHtmlElements.js

@@ -1,8 +1,14 @@
-export function basicElements(){
-    const addMarkerBtn = document.getElementById("addMarkerBtn")
-    const markerFormContainer = document.getElementById("markerFormContainer")
-    const markerForm = document.getElementById("markerForm")
-    const noticeCoordsPicker = document.getElementById("noticeCoordsPicker")
-    const remainingForm = document.getElementById("remainingForm")
-    return [addMarkerBtn, markerFormContainer, markerForm, noticeCoordsPicker, remainingForm]
-}
+export function basicElements() {
+  const addMarkerBtn = document.getElementById("addMarkerBtn");
+  const markerFormContainer = document.getElementById("markerFormContainer");
+  const markerForm = document.getElementById("markerForm");
+  const noticeCoordsPicker = document.getElementById("noticeCoordsPicker");
+  const remainingForm = document.getElementById("remainingForm");
+  return [
+    addMarkerBtn,
+    markerFormContainer,
+    markerForm,
+    noticeCoordsPicker,
+    remainingForm,
+  ];
+}

public/js/map.js

@@ -2,9 +2,9 @@ import { initMarkers, createMarker } from "./markerHandler.js";
 import { initEvents } from "./eventHandler.js";
 import { mapInit } from "./mapInit.js";
 
-let editMode = false
+let editMode = false;
 
-let map = mapInit()
+let map = mapInit();
 let lastUpdateCheck = new Date().getTime();
 
 // initMarkers(markerPopupExample, L, map);
@@ -12,32 +12,34 @@ initEvents(map);
 
 await fetchAllMarkers();
 
-setInterval(fetchNewMarkers, 5000)
+setInterval(fetchNewMarkers, 5000);
 
 async function fetchAllMarkers() {
-    let response = await fetch('/fetchMarkers', {
-        method: 'GET',
-    })
+  let response = await fetch("/fetchMarkers", {
+    method: "GET",
+  });
 
-    let markers = await response.json()
-    console.log(markers)
-    markers.forEach(marker => {
-        createMarker(marker, L, map);
-    });
+  let markers = await response.json();
+  console.log(markers);
+  markers.forEach((marker) => {
+    createMarker(marker, L, map);
+  });
 }
 
 export async function fetchNewMarkers() {
-    let response = await fetch('/updateMarkers?' + new URLSearchParams({ fromDate: lastUpdateCheck }), {
-        method: 'GET',
-    })
+  let response = await fetch(
+    "/updateMarkers?" + new URLSearchParams({ fromDate: lastUpdateCheck }),
+    {
+      method: "GET",
+    }
+  );
 
-    let markers = await response.json()
-    console.log(markers)
+  let markers = await response.json();
+  console.log(markers);
 
-    markers.forEach(marker => {
-        createMarker(marker, L, map);
-    });
+  markers.forEach((marker) => {
+    createMarker(marker, L, map);
+  });
 
-    lastUpdateCheck = new Date().getTime();
+  lastUpdateCheck = new Date().getTime();
 }
-

public/js/mapInit.js

@@ -2,19 +2,18 @@
 // import '../../node_modeules/leaflet.locatecontrol';  // Import the Locate Control plugin
 // import '../../node_modeules/leaflet.locatecontrol/dist/L.Control.Locate.min.css';  // Import styles
 
-export function mapInit(){
-const coordsPiazzaMaggiore = [44.49385, 11.34316]
+export function mapInit() {
+  const coordsPiazzaMaggiore = [44.49385, 11.34316];
 
-var map = L.map('map').setView(coordsPiazzaMaggiore, 13);
+  var map = L.map("map").setView(coordsPiazzaMaggiore, 13);
 
-L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
     maxZoom: 19,
-    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-}).addTo(map);
+    attribution:
+      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+  }).addTo(map);
 
-L.control.locate().addTo(map);
+  L.control.locate().addTo(map);
 
-return map;
+  return map;
 }
-
-

public/js/markerHandler.js

@@ -1,46 +1,71 @@
-export function initMarkers(markerList, L, map){
-    markerList.forEach(customMarker => {
-        var marker = L.marker([customMarker.x, customMarker.y]).addTo(map);
-        let popUpContentTitle = "<h1>"+ customMarker.title +"</h1>";
-        let popUpContentdescription = "<p>"+ customMarker.description +"</p>";
-        let popUpContentImage = "<img src='/img/"+ customMarker.imgName+"'</img>";
-        let popUpContentDate = "<br><p>Inserito il: " + markerData.ts.substring(0, 10) + "<br>alle " + markerData.ts.substring(11, 16) + "</p>";
-        let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage + popUpContentDate
-        marker.bindPopup(popUpContent).openPopup(); 
-    });    
+export function initMarkers(markerList, L, map) {
+  markerList.forEach((customMarker) => {
+    var marker = L.marker([customMarker.x, customMarker.y]).addTo(map);
+    let popUpContentTitle = "<h1>" + customMarker.title + "</h1>";
+    let popUpContentdescription = "<p>" + customMarker.description + "</p>";
+    let popUpContentImage =
+      "<img src='/img/" + customMarker.imgName + "'</img>";
+    let popUpContentDate =
+      "<br><p>Inserito il: " +
+      markerData.ts.substring(0, 10) +
+      "<br>alle " +
+      markerData.ts.substring(11, 16) +
+      "</p>";
+    let popUpContent =
+      popUpContentTitle +
+      popUpContentdescription +
+      popUpContentImage +
+      popUpContentDate;
+    marker.bindPopup(popUpContent).openPopup();
+  });
 }
 
-export function createMarker(markerData, L, map, returnMarker = false){
-        var marker = L.marker([markerData.coordinate.y, markerData.coordinate.x]).addTo(map);
-        let popUpContentTitle = "<h1>"+ markerData.name +"</h1>";
-        let popUpContentdescription = "<p>"+ markerData.description +"</p>";
-        let popUpContentImage = "<img src='/imgs/"+ markerData.filename +"'</img>";
-        let popUpContentDate = "<br><p>Inserito il: " + markerData.ts.substring(0, 10) + "<br>alle: " + markerData.ts.substring(11, 16) + "</p>";
-        //let popUpContentHour = "<p>" + "alle: " + markerData.ts.substring(11, 16) + "</p>";
-        let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage + popUpContentDate //+ popUpContentHour
-        marker.bindPopup(popUpContent);
-        if(returnMarker) {
-            return marker;
-        };
+export function createMarker(markerData, L, map, returnMarker = false) {
+  var marker = L.marker([
+    markerData.coordinate.y,
+    markerData.coordinate.x,
+  ]).addTo(map);
+  let popUpContentTitle = "<h1>" + markerData.name + "</h1>";
+  let popUpContentdescription = "<p>" + markerData.description + "</p>";
+  let popUpContentImage = "<img src='/imgs/" + markerData.filename + "'</img>";
+  let popUpContentDate =
+    "<br><p>Inserito il: " +
+    markerData.ts.substring(0, 10) +
+    "<br>alle: " +
+    markerData.ts.substring(11, 16) +
+    "</p>";
+  //let popUpContentHour = "<p>" + "alle: " + markerData.ts.substring(11, 16) + "</p>";
+  let popUpContent =
+    popUpContentTitle +
+    popUpContentdescription +
+    popUpContentImage +
+    popUpContentDate; //+ popUpContentHour
+  marker.bindPopup(popUpContent);
+  if (returnMarker) {
+    return marker;
+  }
 }
 
-export function createMarkerTemp(markerData, L, map, returnMarker = false){
-    var marker = L.marker([markerData.coordinate.y, markerData.coordinate.x]).addTo(map);
-    let popUpContentdescription = "<p>"+ markerData.description +"</p>";
-    let popUpContent = popUpContentdescription
-    marker.bindPopup(popUpContent);
-    if(returnMarker) {
-        return marker;
-    };
+export function createMarkerTemp(markerData, L, map, returnMarker = false) {
+  var marker = L.marker([
+    markerData.coordinate.y,
+    markerData.coordinate.x,
+  ]).addTo(map);
+  let popUpContentdescription = "<p>" + markerData.description + "</p>";
+  let popUpContent = popUpContentdescription;
+  marker.bindPopup(popUpContent);
+  if (returnMarker) {
+    return marker;
+  }
 }
 
-export function updateMarkers(markerList, L, map){
-    var layers = L.LayerGroup(), //layers contains all markers..
-    contained = [];          //makers in map boundingbox
+export function updateMarkers(markerList, L, map) {
+  var layers = L.LayerGroup(), //layers contains all markers..
+    contained = []; //makers in map boundingbox
 
-    layers.eachLayer(function(l) {
-    if( l instanceof L.Marker && map.getBounds().contains(l.getLatLng()) )
-        contained.push(l);
-    });
-    console.log(contained)
-}
+  layers.eachLayer(function (l) {
+    if (l instanceof L.Marker && map.getBounds().contains(l.getLatLng()))
+      contained.push(l);
+  });
+  console.log(contained);
+}

server/index.js

@@ -5,11 +5,13 @@ const config = require("config");
 const dbHandler = require("./dbHandler.js");
 const upload = multer({ dest: config.get("app.upload") });
 
+const PUBLIC_PATH = `${__dirname}/../public`;
+
 let server = undefined;
 
 const configureRoutes = (app) => {
   app.get("/", (req, res) => {
-    res.sendFile(__dirname + "./public/index.html");
+    res.sendFile(`${PUBLIC_PATH}/index.html`);
   });
   
   app.post("/uploadMarker", upload.single("image"), (req, res) => {
@@ -48,8 +50,7 @@ const configureExpress = () => {
   const app = express();
   const port = config.get("app.port");
 
-
-  app.use(express.static("public"));
+  app.use(express.static(PUBLIC_PATH));
   app.use("/imgs", express.static(config.get("app.upload")));
   app.use(express.json()); // for json
   app.use(