data+img_mrk_temp+bug_mrk_infiniti

public/css/map.css

@@ -1,135 +1,157 @@
-body {
+/*BODY*/
-    margin: 0px !important;
+    body {
-}
+        margin: 0px !important;
+    }
 
 
-#container {
+/*CONTAINER*/
-    display: flexbox;
+    #container {
-}
+        display: flexbox;
+    }
 
 
-#map {
+/*MAP*/
-    height: 100vh;
+    #map {
-    width: 100vw;
+        height: 100vh;
-}
+        width: 100vw;
+    }
 
 
-.button-image {
+/*BOTTONE ALTO DX*/
-    width: 5px; 
+
-    height: auto; 
+    #addMarkerBtn {
-}
+        z-index: 1000;
+        background: rgb(255, 255, 255);
+        width: 40px;
+        height: 38px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        margin-top: 10px;
+        margin-right: 10px;
+    }
+
+    .button-image {
+        width: 5px; 
+        height: auto; 
+    }
 
 
-.leaflet-popup-content>img {
+/*FORM INSERIMENTO MARKER*/
-    width: 100%;
+
-    height: 100%;
+    /*CONTENITORE DEL FORM*/
-}
+    #markerFormContainer {
+        display: none;
+        z-index: 999;
+        position: absolute;
+        margin-left: auto;
+        margin-right: auto;
+        left:42px;
+        right: 42px;
+        text-align: center;
+        width: fit-content;
+        background-color: white;
+    }
+
+    /*FORM*/
+    #markerForm {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        align-items: flex-start;
+        gap: 10px;
+        margin: 23px 20px;
+    }
+
+    /*OGEETTI DEL FORM*/
+    #remainingForm {
+        display: none;
+    }
+
+    /*BOH*/
+    #markerForm > button {
+        margin-left: auto;
+    }
+
+    /*AREA NOME MARKER*/
+    input[type='file'] {
+        color: transparent;
+      }
+
+    /*AREA DESCRIZIONE MARKER*/
+    textarea[name="description"] {
+        width: 200px;
+        height: 50px;
+      }
+
+    /*
+    .image {
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+    }*/
+
+    /*BOTTONE SCEGLI IMMAGINE*/
+    .file-input {
+        display: none; /* Hide the file input */
+    }
+
+    /*BOTTONE SCEGLI IMMAGINE*/
+    .file-label {
+        background-color: #e9e9ed; /* Button color */
+        color: rgb(0, 0, 0);
+        border: 100cm;
+        border-color: black;
+        padding: 10px 20px;
+        border-radius: 50px;
+        cursor: pointer;
+        margin-bottom: 10px; /* Space between button and file name */
+    }
+
+    /*EFFETTO BOTTONE SCEGLI IMMAGINE*/
+    .file-label:hover {
+        background-color: #bec3c9; /* Background color on hover */
+    }
+
+    /*NOME FILE SCELTO*/
+    .file-chosen {
+        font-size: 14px;
+        color: #555;
+    }
 
 
-#addMarkerBtn {
+/*POPUP MARKER*/
-    z-index: 1000;
-    background: rgb(255, 255, 255);
-    width: 40px;
-    height: 38px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin-top: 10px;
-    margin-right: 10px;
-}
 
+    .leaflet-popup-content-wrapper {
+        width: 100%;
+        height: auto;  
+    }
 
-#markerFormContainer {
+    .leaflet-popup-content>img {
-    display: none;
+        max-width: 230px;
-    z-index: 999;
+        max-height: 230px;
-    position: absolute;
+        width: 100%;
-    margin-left: auto;
+        height: 100%;
-    margin-right: auto;
+    }
-    left:42px;
-    right: 42px;
-    text-align: center;
-    width: fit-content;
-    background-color: white;
-}
 
-input[type='file'] {
+    .leaflet-popup-content p {
-    color: transparent;
+        margin: 0;                   
-  }
+        padding: 5px;           
-  
+        word-wrap: break-word; 
-textarea[name="description"] {
+        overflow-wrap: break-word;   
-    width: 200px;
+        white-space: normal;     
-    height: 50px;
+        text-align: center;    
-  }
+    }
 
+    .leaflet-popup-content h1 {
+        margin: 0;                   
+        padding: 5px;           
+        word-wrap: break-word; 
+        overflow-wrap: break-word;   
+        white-space: normal;     
+        text-align: center;    
+    }
 
-
+    .leaflet-popup-content-wrapper {
-.image {
+        text-align: center;
-  display: flex;
+    }      
-  flex-direction: column;
-  align-items: center;
-}
-
-.file-input {
-    display: none; /* Hide the file input */
-}
-
-.file-label {
-    background-color: #e9e9ed; /* Button color */
-    color: rgb(0, 0, 0);
-    border: 100cm;
-    border-color: black;
-    padding: 10px 20px;
-    border-radius: 50px;
-    cursor: pointer;
-    margin-bottom: 10px; /* Space between button and file name */
-}
-
-.file-label:hover {
-    background-color: #bec3c9; /* Background color on hover */
-}
-
-
-.file-chosen {
-    font-size: 14px;
-    color: #555;
-}
-
-
-
-.leaflet-popup-content p {
-    margin: 0;                   /* Remove default margin */
-    padding: 5px;                /* Optional: Add some padding */
-    word-wrap: break-word;       /* Allow long words to break */
-    overflow-wrap: break-word;   /* Recommended for modern browsers */
-    white-space: normal;         /* Ensure normal text wrapping */
-    text-align: center;          /* Optional: Center the text */
-}
-
-.leaflet-popup-content h1 {
-    margin: 0;                   /* Remove default margin */
-    padding: 5px;                /* Optional: Add some padding */
-    word-wrap: break-word;       /* Allow long words to break */
-    overflow-wrap: break-word;   /* Recommended for modern browsers */
-    white-space: normal;         /* Ensure normal text wrapping */
-    text-align: center;          /* Optional: Center the text */
-}
-
-
-#markerForm {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    align-items: flex-start;
-    gap: 10px;
-    margin: 23px 20px;
-}
-
-
-#markerForm > button {
-    margin-left: auto;
-}
-
-
-#remainingForm {
-    display: none;
-}

public/index.html

@@ -9,7 +9,7 @@
       integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
       crossorigin=""
     />
-    <link rel="icon" type="image/png" sizes="16x16" href="../img/garbage64.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="../img/trashw.png">
     <script
       src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
       integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="

public/js/eventHandler.js

@@ -51,7 +51,7 @@ export function initEvents(map) {
     };
 
 
-    //event listener onclick on map, display #remainingForm
+    //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')
@@ -63,14 +63,14 @@ export function initEvents(map) {
             map.getContainer().style.cursor = 'auto';
             const tmpMarker = {
                 coordinate: { x: formInputCoordX.value, y: formInputCoordY.value },
-                name: '',
+                name: null,
-                description: '',
+                description: "Compila il form per aggiungere un marker qui. Oppure annulla l'inserimento del marker cliccando sulla X in alto a destra",
-                filename: '',
+                filename: null,
+                ts: null,
             }
+            console.log(tmpMarker); 
             tmpMarkerSet = createMarker(tmpMarker, L, map, true)
             isTmpMarkerSet = true
-            // Va creata la logica di eliminazione del marker tmp
-            //localStorage.setItem("tmpMarkerId", marker._leaflet_id);
         }
     })
 
@@ -113,4 +113,4 @@ 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/markerHandler.js

@@ -4,7 +4,8 @@ export function initMarkers(markerList, L, map){
         let popUpContentTitle = "<h1>"+ customMarker.title +"</h1>";
         let popUpContentdescription = "<p>"+ customMarker.description +"</p>";
         let popUpContentImage = "<img src='/img/"+ customMarker.imgName+"'</img>";
-        let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage
+        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(); 
     });    
 }
@@ -14,7 +15,8 @@ export function createMarker(markerData, L, map, returnMarker = false){
         let popUpContentTitle = "<h1>"+ markerData.name +"</h1>";
         let popUpContentdescription = "<p>"+ markerData.description +"</p>";
         let popUpContentImage = "<img src='/imgs/"+ markerData.filename +"'</img>";
-        let popUpContent = popUpContentTitle + popUpContentdescription + popUpContentImage
+        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);
         if(returnMarker) {
             return marker;

tutorial.txt

@@ -3,13 +3,15 @@ RuscoMap
 <br>
 RuscoMap è una mappa della propria città dove utenti in anonimo possono inserire dei marker con nome, descrizione e foto dell'oggetto abbandonato, segnalandolo a tutti i visitatori della mappa._ 
 <br> 
-Si può trovare o inserire la qualunque purchlaè ci sia una vaga speranza di riutilizzo, trasformazione o riparazione.
+Si può trovare o inserire la qualunque purchè ci sia una vaga speranza di riutilizzo, trasformazione o riparazione.
 <br>
 Sulla falsa riga del "_te lo regalo se vieni a prenderlo_", questo è più il "_segnalo che c'è sta roba lì, è tua se te la vai a prendere_"
 <br>
 
 Navigazione
-Quando sei sulla mappa, puoi liberamente curiosare tra gli oggetti inseriti oppure cercare con con il form SOMEWHERE una parola chiave (esempio: divano).
+Quando sei sulla mappa, puoi liberamente curiosare tra gli oggetti inseriti
+oppure cercare con il form $SOMEWHERE una parola chiave 
+esempio ricerca: divano. Spariranno tutti i marker rimanendo solo quelli che nel nome o nella descrizione contengono la parola "divano".
 
 Inserimento
 Cliccando il pulsante in alto a destra (icona marker blu) entri in modalità inserimento.
@@ -17,3 +19,7 @@ A questo punto cliccando su un punto della mappa inserisci la posizione del nuov
 Si aprirà un form dove inserire nome dell'oggetto, una breve descrizione e una foto.
 Cliccando "Aggiungi marker" il nuovo oggetto comparirà automagicamente sula mappa. 
 
+                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: null,