Fix #8

baditaflorin · May 21, 2024 · a42bc44 · a42bc44
1 parent a6af836
commit a42bc44
Show file tree

Hide file tree

Showing 5 changed files with 146 additions and 33 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/drinking_water/static/addSource.js b/drinking_water/static/addSource.js
@@ -1,3 +1,5 @@
+// addSource.js
+
 const generateInitialFormHTML = () => {
     return `
         <style>
@@ -74,7 +76,6 @@ const generateInitialFormHTML = () => {
     `;
 };
 
-
 const generateAdditionalFieldsHTML = () => {
     return `
         <label for="fountain-type">Fountain Type:</label>
@@ -126,7 +127,7 @@ const handleFormSubmit = (event, lat, lon) => {
     optionalTags.forEach(tag => {
         const value = formData.get(tag);
         if (value) {
-            tags[tag] = value === 'yes' || value === 'no' ? value : formData.get(tag);
+            tags[tag] = value === 'yes' || 'no' ? value : formData.get(tag);
         }
     });
 
@@ -162,15 +163,32 @@ const addNewDrinkingSourceButton = () => {
 
             L.DomEvent.on(button, 'click', function(e) {
                 L.DomEvent.stopPropagation(e);  // Stop the click event from propagating to the map
-                map.getContainer().style.cursor = 'crosshair'; // Change cursor to crosshair
-                toastr.info('Click on the map to place a new source');
+                const hasSeenAddModal = Cookies.get('hasSeenAddModal');
+                if (!hasSeenAddModal) {
+                    showModal(() => {
+                        map.getContainer().style.cursor = 'crosshair'; // Change cursor to crosshair
+                        toastr.info('Click on the map to place a new source');
+
+                        map.on('click', onMapClick);
+
+                        // Change back to the default cursor after the user has clicked on the map
+                        map.once('click', function() {
+                            map.getContainer().style.cursor = ''; // Revert to default cursor
+                        });
 
-                map.on('click', onMapClick);
+                        Cookies.set('hasSeenAddModal', 'true', { expires: 365 });
+                    });
+                } else {
+                    map.getContainer().style.cursor = 'crosshair'; // Change cursor to crosshair
+                    toastr.info('Click on the map to place a new source');
 
-                // Change back to the default cursor after the user has clicked on the map
-                map.once('click', function() {
-                    map.getContainer().style.cursor = ''; // Revert to default cursor
-                });
+                    map.on('click', onMapClick);
+
+                    // Change back to the default cursor after the user has clicked on the map
+                    map.once('click', function() {
+                        map.getContainer().style.cursor = ''; // Revert to default cursor
+                    });
+                }
             });
 
             return container;
@@ -180,22 +198,45 @@ const addNewDrinkingSourceButton = () => {
     mymap.addControl(new addSourceControl({ position: 'bottomright' }));
 };
 
-toastr.options = {
-    "closeButton": false,
-    "debug": false,
-    "newestOnTop": false,
-    "progressBar": true,
-    "positionClass": "toast-top-right",
-    "preventDuplicates": false,
-    "onclick": null,
-    "showDuration": "300",
-    "hideDuration": "1000",
-    "timeOut": "5000",
-    "extendedTimeOut": "1000",
-    "showEasing": "swing",
-    "hideEasing": "linear",
-    "showMethod": "fadeIn",
-    "hideMethod": "fadeOut"
+const showModal = (onConfirm, isEdit = false, editUrl = '') => {
+    const modal = document.getElementById('source-modal');
+    modal.style.display = 'block';
+
+    const confirmButton = document.getElementById('confirm-add-source');
+    confirmButton.onclick = () => {
+        onConfirm();
+        hideModal();
+    };
+
+    const closeButton = document.getElementById('close-modal');
+    closeButton.onclick = hideModal;
+
+    window.onclick = (event) => {
+        if (event.target === modal) {
+            hideModal();
+        }
+    };
+
+    if (isEdit) {
+        confirmButton.textContent = 'Proceed to Edit';
+        confirmButton.onclick = () => {
+            window.open(editUrl, '_blank');
+            hideModal();
+            Cookies.set('hasSeenEditModal', 'true', { expires: 365 });
+        };
+    } else {
+        confirmButton.textContent = 'Proceed';
+        confirmButton.onclick = () => {
+            onConfirm();
+            hideModal();
+            Cookies.set('hasSeenAddModal', 'true', { expires: 365 });
+        };
+    }
+};
+
+const hideModal = () => {
+    const modal = document.getElementById('source-modal');
+    modal.style.display = 'none';
 };
 
 const addNodeToOSM = async (lat, lon, tags) => {
@@ -230,5 +271,8 @@ const addNodeToOSM = async (lat, lon, tags) => {
     }
 };
 
+// Event listener for closing the modal
+document.getElementById('close-modal').addEventListener('click', hideModal);
+
 // Initialize the add source button
-addNewDrinkingSourceButton();
+addNewDrinkingSourceButton();
diff --git a/drinking_water/static/data.js b/drinking_water/static/data.js
@@ -1,4 +1,4 @@
-//data.js
+// data.js
 
 const markers = L.markerClusterGroup();
 
@@ -91,17 +91,27 @@ const createPopupContent = (node, denumire) => {
             <b>${denumire}</b><br>
             ${formatTags(node.tags)}
             <div class="mapillary-thumbnail">${mapillaryLink}</div>
-            <a href="https://www.openstreetmap.org/edit?editor=id&node=${node.id}" target="_blank" class="edit-link">Edit this node</a>
+            <a href="#" class="edit-link" onclick="editNode('${node.id}'); return false;">Edit this node</a>
             <br>
             <button onclick="routeToNode(${node.lat.toFixed(6)},${node.lon.toFixed(6)})" class="route-button">Route to here</button>
         </div>`;
 };
 
+const editNode = (nodeId) => {
+    const hasSeenEditModal = Cookies.get('hasSeenEditModal');
+    const editUrl = `https://www.openstreetmap.org/edit?editor=id&node=${nodeId}`;
+
+    if (!hasSeenEditModal) {
+        showModal(() => {}, true, editUrl);
+    } else {
+        window.open(editUrl, '_blank');
+    }
+};
+
 const createMarker = async (node) => {
     const { type, icon } = getNodeTypeAndIcon(node) || {};
     if (!type || !icon) return null;
     const popupContent = createPopupContent(node, type);
-    // console.log(`Creating marker for node ID: ${node.id}`);
     return L.marker([node.lat, node.lon], { icon }).bindPopup(popupContent);
 };
 
@@ -155,4 +165,4 @@ const fetchDataAndAddMarkers = async () => {
     } catch (error) {
         console.error('Error fetching data and adding markers:', error);
     }
-};
+};
diff --git a/drinking_water/static/map.html b/drinking_water/static/map.html
@@ -41,6 +41,7 @@
     <div id="instructions"></div>
 </div>
 
+<!-- Project Info Section -->
 <div id="project-info-container">
     <button id="toggle-project-info">Show Project Info</button>
     <div id="project-info" style="display: none;">
@@ -61,6 +62,17 @@ <h3>Edit Existing Water Points</h3>
     </div>
 </div>
 
+<!-- Modal for Adding/Editing Source -->
+<div id="source-modal" class="modal">
+    <div class="modal-content">
+        <span class="close" id="close-modal">&times;</span>
+        <h2>Adding or Editing a Water Source</h2>
+        <p>To add a new water source, click on the map where the source is located, then fill out the form with the necessary details. Ensure you have an OpenStreetMap account to contribute.</p>
+        <p>If you are editing an existing source, click on the node and you will be redirected to the OpenStreetMap iD Editor where you can update the details.</p>
+        <button id="confirm-add-source">Proceed</button>
+    </div>
+</div>
+
 <script>
     // Utility functions are now in utils.js
 </script>

diff --git a/drinking_water/static/style.css b/drinking_water/static/style.css
@@ -227,3 +227,48 @@ html, body {
     margin: 10px 0;
     padding: 0;
 }
+
+
+
+
+
+/* Add these styles to style.css */
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
+    padding-top: 60px;
+}
+
+.modal-content {
+    background-color: #fefefe;
+    margin: 5% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 5px;
+    text-align: center;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}