Format and fix date

public/index.html

@@ -98,6 +98,7 @@
       setTimeout(closePopup, 13000);
 
       window.addEventListener('load', () => {
+        /*
         // Add a click event listener to the button
         const gpsButton = document.getElementById("gps-button");
         gpsButton.addEventListener("click", function () {
@@ -107,9 +108,12 @@
             lc.start();
           }
         });
+        */
       });
     </script>
-    <script src="./js/dist/L.Control.Locate.min.js"></script>
-    <script type="module" type="text/javascript" src="/js/map.js"></script>
+
+    <script defer src="./js/dayjs/dayjs.min.js"></script>
+    <script defer src="./js/dist/L.Control.Locate.min.js"></script>
+    <script defer type="module" type="text/javascript" src="/js/map.js"></script>
   </body>
 </html>

public/js/map.js

@@ -3,21 +3,15 @@ import { initEvents } from "./eventHandler.js";
 import { mapInit } from "./mapInit.js";
 
 let editMode = false;
+const lastUpdateCheck = new Date().getTime();
 
-let map = mapInit();
-let lastUpdateCheck = new Date().getTime();
-
-// initMarkers(markerPopupExample, L, map);
+const map = mapInit();
+    
 initEvents(map);
 
-await fetchAllMarkers();
-
-setInterval(fetchNewMarkers, 5000);
 
 async function fetchAllMarkers() {
-  let response = await fetch("/fetchMarkers", {
-    method: "GET",
-  });
+  const response = await fetch("/fetchMarkers");
 
   let markers = await response.json();
   console.log(markers);
@@ -26,16 +20,13 @@ async function fetchAllMarkers() {
   });
 }
 
-export async function fetchNewMarkers() {
-  let response = await fetch(
-    "/updateMarkers?" + new URLSearchParams({ fromDate: lastUpdateCheck }),
-    {
-      method: "GET",
-    }
-  );
 
-  let markers = await response.json();
-  console.log(markers);
+export async function fetchNewMarkers() {
+  const searchParams = new URLSearchParams({ fromDate: lastUpdateCheck });
+
+  const response = await fetch(`/updateMarkers?${searchParams.toString()}`);
+
+  const markers = await response.json();
 
   markers.forEach((marker) => {
     createMarker(marker, L, map);
@@ -43,3 +34,13 @@ export async function fetchNewMarkers() {
 
   lastUpdateCheck = new Date().getTime();
 }
+
+const main = async () => {
+    await fetchAllMarkers();
+    
+    setInterval(fetchNewMarkers, 5000);   
+}
+
+main().then(() => {
+    console.log("Completed")
+}).catch(console.error)

public/js/mapInit.js

@@ -4,8 +4,7 @@
 
 export function mapInit() {
   const coordsPiazzaMaggiore = [44.49385, 11.34316];
-
-  var map = L.map("map").setView(coordsPiazzaMaggiore, 13);
+  const map = L.map("map").setView(coordsPiazzaMaggiore, 13);
 
   L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
     maxZoom: 19,

public/js/markerHandler.js

@@ -1,17 +1,28 @@
+const formatDate = (date) => {
+  const day = date.getDate();
+  const month = date.getMonth() + 1;
+  const year = date.getFullYear();
+
+  return `${day}/${month}/${year}`;
+};
+const formatTime = (date) => {
+  return date.toTimeString().split(" ")[0];
+};
+
 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 =
+    const marker = L.marker([customMarker.x, customMarker.y]).addTo(map);
+    const popUpContentTitle = "<h1>" + customMarker.title + "</h1>";
+    const popUpContentdescription = "<p>" + customMarker.description + "</p>";
+    const popUpContentImage =
       "<img src='/img/" + customMarker.imgName + "'</img>";
-    let popUpContentDate =
+    const popUpContentDate =
       "<br><p>Inserito il: " +
       markerData.ts.substring(0, 10) +
       "<br>alle " +
       markerData.ts.substring(11, 16) +
       "</p>";
-    let popUpContent =
+    const popUpContent =
       popUpContentTitle +
       popUpContentdescription +
       popUpContentImage +
@@ -21,21 +32,22 @@ export function initMarkers(markerList, L, map) {
 }
 
 export function createMarker(markerData, L, map, returnMarker = false) {
-  var marker = L.marker([
+  const 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 =
+  const date = new Date(markerData.ts);
+
+  const popUpContentTitle = "<h1>" + markerData.name + "</h1>";
+  const popUpContentdescription = "<p>" + markerData.description + "</p>";
+  const popUpContentImage =
+    "<img src='/imgs/" + markerData.filename + "'</img>";
+  const popUpContentDate = `<br><p>Inserito il: ${formatDate(
+    date
+  )} <br>alle: ${formatTime(date)}</p>`;
+
+  //const popUpContentHour = "<p>" + "alle: " + markerData.ts.substring(11, 16) + "</p>";
+  const popUpContent =
     popUpContentTitle +
     popUpContentdescription +
     popUpContentImage +
@@ -47,12 +59,12 @@ export function createMarker(markerData, L, map, returnMarker = false) {
 }
 
 export function createMarkerTemp(markerData, L, map, returnMarker = false) {
-  var marker = L.marker([
+  const marker = L.marker([
     markerData.coordinate.y,
     markerData.coordinate.x,
   ]).addTo(map);
-  let popUpContentdescription = "<p>" + markerData.description + "</p>";
-  let popUpContent = popUpContentdescription;
+  const popUpContentdescription = "<p>" + markerData.description + "</p>";
+  const popUpContent = popUpContentdescription;
   marker.bindPopup(popUpContent);
   if (returnMarker) {
     return marker;
@@ -60,12 +72,15 @@ export function createMarkerTemp(markerData, L, map, returnMarker = false) {
 }
 
 export function updateMarkers(markerList, L, map) {
-  var layers = L.LayerGroup(), //layers contains all markers..
-    contained = []; //makers in map boundingbox
+  const layers = L.LayerGroup(); //layers contains all markers..
+  const contained = []; //makers in map boundingbox
 
   layers.eachLayer(function (l) {
-    if (l instanceof L.Marker && map.getBounds().contains(l.getLatLng()))
-      contained.push(l);
+    if (
+      layer instanceof L.Marker &&
+      map.getBounds().contains(layer.getLatLng())
+    )
+      contained.push(layer);
   });
   console.log(contained);
 }

server/dbHandler.js

@@ -9,19 +9,18 @@ const pool = mysql.createPool({
 });
 
 function addMarker(marker) {
-  let insertQuery = "INSERT INTO markers VALUES (?,?,?,POINT(?,?),?)";
-  const date = new Date().toISOString();
-  const datePart = date.slice(0, 10); // '2024-09-06'
-  const timePart = date.slice(11, 19); // '21:33:44'
-  const formattedDate = `${datePart} ${timePart}`;
-  let query = mysql.format(insertQuery, [
+  const insertQuery = "INSERT INTO markers VALUES (?,?,?,POINT(?,?),?)";
+  const date = new Date();
+  
+  const query = mysql.format(insertQuery, [
     marker.name,
     marker.description,
     marker.filename,
     marker.long,
     marker.lat,
-    formattedDate,
+    date,
   ]);
+  
   pool.query(query, (err, response) => {
     if (err) {
       console.error(err);