feat: Newly created points available in dropdown and map

src/main/webapp/js/mapModal.js

@@ -2,9 +2,8 @@
 import {
     map,
     tileLayer,
-    marker,
     geoJSON,
-    circleMarker,
+    circleMarker, GeoJSON,
     DomEvent
 } from 'https://unpkg.com/leaflet/dist/leaflet-src.esm.js';
 
@@ -14,18 +13,29 @@ import {
  */
 class MapModal {
 
-    constructor(mapContainerId, typeNameMap, geoJsonData, allowNewPoints = false, callback = null) {
+    /**
+     * @param mapContainerId    The id of the HTML element to which the map should be added
+     * @param typeNameMap   A mapping from pointOfInterestTypeIds to their localized names
+     * @param geoJsonData   GeoJson containing all features which should be displayed on the map
+     * @param allowNewPoints    Whether or not the user should be allowed to add new points
+     * @param callbackOnPersistNew  Callback function for persisting newly created point
+     * @param callbackOnClose   Callback function to call when closing the modal
+     */
+    constructor(mapContainerId, typeNameMap, geoJsonData, allowNewPoints = false, callbackOnPersistNew = null, callbackOnClose = null) {
         this.mapContainerId = mapContainerId;
         this.typeNameMap = typeNameMap;
-        this.geojsonData = geoJsonData;
+        this.geoJsonData = geoJsonData;
         this.allowNewPoints = allowNewPoints;
+        this.callbackOnPersistNew = callbackOnPersistNew;
+        this.callbackOnClose = callbackOnClose;
+
         this.map = null;
         this.isMapInitialized = false;
         this.selectedPointLayer = null;
         this.createdPointLayer = null;
         this.createdPoints = [];
-        this.callback = callback;
 
+        // Colours for the available types of pois
         this.typeColorMap = {
             0: "#B3CDE0",  // Light blue
             1: "#FBB4AE",  // Soft pink
@@ -42,7 +52,6 @@ class MapModal {
         if (!this.isMapInitialized) {
             // Initialize the map centered on Norway
             this.map = map(this.mapContainerId).setView([63.4226, 10.3951], 5);
-            // Add a tile layer
             tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 maxZoom: 19
             }).addTo(this.map);
@@ -50,7 +59,7 @@ class MapModal {
             this.createSelectedPointInfo();
 
             // Add points to the map
-            geoJSON(this.geojsonData, {
+            geoJSON(this.geoJsonData, {
                 filter: (feature) => feature.geometry.type === "Point",
                 pointToLayer: (feature, latlng) => {
                     const color = this.typeColorMap[feature.properties.pointOfInterestTypeId] || "#3498DB";
@@ -78,19 +87,25 @@ class MapModal {
         }
     }
 
+    /**
+     * Create information panel for selected point, initially hidden.
+     */
     createSelectedPointInfo() {
-        console.debug("Create information panel for selected point, initially hidden");
         const selectedPointInfoHtml = `
         <div id="selectedPointInfo" style="display: none;">
             <div id="infoMessage"></div>
-            <button id="confirmButton" class="btn btn-primary">OK</button>
-        </div>
-    `   ;
+            <button id="confirmButton" class="btn btn-primary">Velg sted</button>
+        </div>`;
         document.getElementById(this.mapContainerId).insertAdjacentHTML('beforeend', selectedPointInfoHtml);
     }
 
-    updateSelectedPointInfo(feature) {
+    /**
+     * Display the panel which contains information about the currently selected point,
+     * and a button to bring you back to the original page.
+     */
+    displaySelectedPointInfo(feature) {
         const name = feature.properties.pointOfInterestName;
+        console.info("Display selected point " + name);
         const type = this.typeNameMap[feature.properties.pointOfInterestTypeId];
         const coordinates = feature.geometry.coordinates[1].toFixed(5) + ", " + feature.geometry.coordinates[0].toFixed(5);
 
@@ -107,7 +122,43 @@ class MapModal {
         };
     }
 
-    selectPoint(feature, layer) {
+    selectPointById(pointOfInterestId) {
+        const selectedFeature = this.getFeatureById(pointOfInterestId);
+        const selectedLayer = this.getLayerById(pointOfInterestId);
+        this.selectPoint(selectedFeature, selectedLayer, true);
+    }
+
+    getFeatureById(pointOfInterestId) {
+        let feature = this.geoJsonData.features.find(feature => feature.properties.pointOfInterestId == pointOfInterestId);
+        if (!feature) {
+            console.info("Feature with id=" + pointOfInterestId + " not found, assume that the user wants the newly created", this.createdPoints[0]);
+            return this.createdPoints.length > 0 ? this.createdPoints[0] : null;
+        }
+        return feature;
+    }
+
+    getLayerById(pointOfInterestId) {
+        let result = null;
+        this.map.eachLayer(layer => {
+            if (layer instanceof GeoJSON) {
+                layer.eachLayer(l => {
+                    if (l.feature && l.feature.properties.pointOfInterestId == pointOfInterestId) {
+                        result = l;
+                    }
+                });
+            }
+        });
+        if (!result) {
+            console.info("Layer with id=" + pointOfInterestId + " not found, assume that the user wants the newly created", this.createdPointLayer);
+            this.createdPointLayer.eachLayer((layer) => {
+                result = layer;
+            });
+        }
+        return result;
+    }
+
+    selectPoint(feature, layer, zoomInToSelected = false) {
+        console.info("Select point", feature);
         // Deselect previously selected point, if any
         if (this.selectedPointLayer) {
             const color = this.typeColorMap[feature.properties.pointOfInterestTypeId] || "#3498DB";
@@ -127,35 +178,41 @@ class MapModal {
             color: '#f00'
         });
 
-        this.updateSelectedPointInfo(feature)
+        if (zoomInToSelected) {
+            const latLng = layer.getLatLng();
+            this.map.setView(latLng, 10);
+        }
+
+        this.displaySelectedPointInfo(feature)
         this.selectedPointLayer = layer;
     }
 
     confirmSelection(feature) {
-        console.info("Save pointData", feature);
-        const pointData = {
-            id: feature.properties.pointOfInterestId,
-            name: feature.properties.pointOfInterestName,
-            typeId: feature.properties.pointOfInterestTypeId,
-            altitude: feature.properties.pointOfInterestAltitude,
-            longitude: feature.geometry.coordinates[0],
-            latitude: feature.geometry.coordinates[1]
-        };
-        if (typeof this.callback === 'function') {
-            console.info("Callback!", pointData);
-            this.callback(pointData);
+        console.info("Confirm selection", feature);
+        let poiId = feature.properties.pointOfInterestId;
+        if (!poiId && typeof this.callbackOnPersistNew === 'function') {
+            const pointData = {
+                name: feature.properties.pointOfInterestName,
+                typeId: feature.properties.pointOfInterestTypeId,
+                longitude: feature.geometry.coordinates[0],
+                latitude: feature.geometry.coordinates[1]
+            };
+            console.info("Persist new", pointData);
+            this.callbackOnPersistNew(pointData);
+        }
+        if (typeof this.callbackOnClose === 'function') {
+            this.callbackOnClose(poiId);
+            console.info("Goodbye from map modal!")
         }
         this.closeModal();
     }
 
     enablePointCreation() {
         this.map.on('click', (e) => {
-            console.log("Map clicked, enabling point creation...");
             const latlng = e.latlng;
 
             // If a form already exists, remove it
             this.closeNewPointFormIfOpen();
-
             // Calculate the pixel position from the map's click event
             const containerPoint = this.map.latLngToContainerPoint(latlng);
 
@@ -168,15 +225,15 @@ class MapModal {
                 <div class="panel-body">
                     <div class="form-group">
                         <label for="name">Name:</label>
-                        <input type="text" class="form-control" id="name" name="name">
-                    </div>
-                    <div class="form-group">
-                        <label for="altitude">Altitude:</label>
-                        <input type="text" class="form-control" id="altitude" name="altitude">
+                        <input type="text" class="form-control" id="name" name="name" autofocus>
                     </div>
                     <div class="form-group">
                         <label for="poiTypeSelect">Type:</label>
-                        <select class="form-control" id="poiTypeSelect" name="poiTypeSelect"></select>
+                        <select class="form-control" id="poiTypeSelect" name="poiTypeSelect">
+                            <option value="2">${this.typeNameMap[2]}</option>
+                            <option value="3">${this.typeNameMap[3]}</option>
+                            <option value="5">${this.typeNameMap[5]}</option>
+                        </select>
                     </div>
                     <div class="form-group text-right">
                         <button id="savePointButton" class="btn btn-primary">Save</button>
@@ -185,15 +242,6 @@ class MapModal {
             </div>`;
             document.getElementById(this.mapContainerId).insertAdjacentHTML('beforeend', formHtml);
 
-            const typeSelectElement = document.getElementById("poiTypeSelect");
-            typeSelectElement.innerHTML = '';
-            for (const [id, name] of Object.entries(this.typeNameMap)) {
-                const option = document.createElement('option');
-                option.value = id;
-                option.textContent = name;
-                typeSelectElement.appendChild(option);
-            }
-
             const formElement = document.getElementById('pointForm');
             DomEvent.disableClickPropagation(formElement);
 
@@ -225,53 +273,59 @@ class MapModal {
         document.removeEventListener('click', this.handleClickOutsidePointForm.bind(this), true);
     }
 
+    createFeatureForPoint(lng, lat, poiName, poiType) {
+        return {
+            "type": "Feature",
+            "geometry": {
+                "type": "Point",
+                "coordinates": [lng, lat]
+            },
+            "properties": {
+                "pointOfInterestName": poiName,
+                "pointOfInterestTypeId": poiType
+            }
+        };
+    }
+
+    addNewPointToMap(point) {
+        console.info("Add new point to map", point);
+        return geoJSON(point, {
+            pointToLayer: (feature, latlng) => {
+                return circleMarker(latlng, {
+                    radius: 8,
+                    fillColor: 'green',
+                    color: '#000',
+                    weight: 1,
+                    opacity: 1,
+                    fillOpacity: 0.8
+                });
+            },
+            onEachFeature: (feature, layer) => {
+                layer.bindPopup(this.popupContent(feature));
+                layer.on('click', () => this.selectPoint(feature, layer));
+            }
+        }).addTo(this.map);
+    }
+
     savePoint(lat, lng) {
-        const nameElement = document.getElementById('name');
-        const altitudeElement = document.getElementById('altitude');
-        const poiTypeSelectElement = document.getElementById("poiTypeSelect")
+        const poiNameElement = document.getElementById('name');
+        const poiTypeElement = document.getElementById("poiTypeSelect")
 
-        if (nameElement && poiTypeSelectElement) {
-            const poiName = nameElement.value;
-            const poiAltitude = altitudeElement.value;
-            const poiType = poiTypeSelectElement.value;
+        if (poiNameElement && poiTypeElement) {
+            const poiName = poiNameElement.value;
+            const poiType = parseInt(poiTypeElement.value, 10);
 
+            // There should only be one newly created point available
             if (this.createdPointLayer) {
                 this.map.removeLayer(this.createdPointLayer);
             }
-
-            const newPoint = {
-                "type": "Feature",
-                "geometry": {
-                    "type": "Point",
-                    "coordinates": [lng, lat]
-                },
-                "properties": {
-                    "pointOfInterestName": poiName,
-                    "pointOfInterestAltitude": poiAltitude,
-                    "pointOfInterestTypeId": poiType
-                }
-            };
             if (this.createdPoints.length > 0) {
-                this.createdPoints.pop(); // Remove the last created point from the list
+                this.createdPoints.pop();
             }
-            this.createdPoints.push(newPoint);
-            this.createdPointLayer = geoJSON(newPoint, {
-                pointToLayer: (feature, latlng) => {
-                    return circleMarker(latlng, {
-                        radius: 8,
-                        fillColor: 'green',
-                        color: '#000',
-                        weight: 1,
-                        opacity: 1,
-                        fillOpacity: 0.8
-                    });
-                },
-                onEachFeature: (feature, layer) => {
-                    layer.bindPopup(this.popupContent(feature));
-                    layer.on('click', () => this.selectPoint(feature, layer));
-                }
-            }).addTo(this.map);
 
+            const newPoint = this.createFeatureForPoint(lng, lat, poiName, poiType);
+            this.createdPoints.push(newPoint);
+            this.createdPointLayer = this.addNewPointToMap(newPoint);
             this.createdPointLayer.eachLayer((layer) => {
                 this.selectPoint(newPoint, layer);
             });
@@ -291,6 +345,33 @@ class MapModal {
                 </div>`;
     }
 
+    /**
+     * Function is called when newly created point of interest is successfully persisted to database.
+     * @param pointOfInterestId
+     */
+    saveSuccess(pointOfInterestId) {
+        if (this.createdPoints.length < 1 || !this.createdPointLayer) {
+            console.error('No newly created points, unable to update with pointOfInterestId=' + pointOfInterestId);
+            return;
+        }
+        let latestCreatedFeature = this.createdPoints[0];
+        latestCreatedFeature.properties.pointOfInterestId = pointOfInterestId;
+        this.geoJsonData.features.push(latestCreatedFeature);
+        this.createdPoints = [];
+
+        this.map.removeLayer(this.createdPointLayer);
+        this.addNewPointToMap(latestCreatedFeature);
+        this.createdPointLayer = null;
+
+        console.info("this.createdPoints", this.createdPoints);
+        console.info("this.createdPointLayer", this.createdPointLayer);
+        console.info("this.geoJsonData.features", this.geoJsonData.features);
+    }
+
+    setSelectedLocation(selectedValue) {
+        this.selectPointById(selectedValue);
+    }
+
     openModal(points) {
         document.getElementById('mapModal').style.display = 'block';
         this.initMap();

src/main/webapp/templates/forecastConfigurationForm.ftl

@@ -36,57 +36,80 @@
     </script>
     <script type="module">
         import MapModal from '/js/mapModal.js';
-        function callbackUpdateLocationPointOfInterest(pointData) {
+        function callbackPersistNewPoint(pointData) {
+            const userId = ${user.userId};
+            const params = {
+                'name': pointData.name,
+                'typeId': pointData.typeId,
+                'longitude': pointData.longitude,
+                'latitude': pointData.latitude,
+                'altitude': '0', // default value - populate using a service for getting altitude for coordinates?
+                'userId': userId,
+            }
+            $.ajax({
+                url: "/rest/poi",
+                type: "POST",
+                contentType: "application/json",
+                data: JSON.stringify(params),
+                success: function(response) {
+                    addOption(response.pointOfInterestId, response.name);
+                    mapModalInstance.saveSuccess(response.pointOfInterestId);
+                    console.info("Success:", response);
+                },
+                error: function(jqXHR, textStatus, errorThrown) {
+                    console.error("Error:", textStatus, errorThrown);
+                }
+            });
+        }
+        function callbackUpdateLocationPointOfInterest(pointOfInterestId) {
             const selectBox = document.querySelector('select[name="locationPointOfInterestId"]');
-            if(pointData.id) {
+            if(pointOfInterestId) {
                 let optionFound = false;
                 for (let i = 0; i < selectBox.options.length; i++) {
-                    if (selectBox.options[i].value == pointData.id) {
+                    if (selectBox.options[i].value == pointOfInterestId) {
                         selectBox.selectedIndex = i; // Select the matching option
                         optionFound = true;
                         break;
                     }
                 }
                 if (!optionFound) {
-                    console.error("No matching option found for feature.id:", pointData.id);
-                }
-            } else {
-                const userId = ${user.userId};
-                const params = {
-                    'name': pointData.name,
-                    'typeId': pointData.typeId,
-                    'longitude': pointData.longitude,
-                    'latitude': pointData.latitude,
-                    'altitude': pointData.altitude,
-                    'userId': userId,
+                    console.error("No matching option found for poi.id:", pointOfInterestId);
                 }
-                $.ajax({
-                    url: "/rest/poi",
-                    type: "POST",
-                    contentType: "application/json",
-                    data: JSON.stringify(params),
-                    success: function(response) {
-                        console.info("Success:", response);
-
-                    },
-                    error: function(jqXHR, textStatus, errorThrown) {
-                        console.error("Error:", textStatus, errorThrown);
-                    }
-                });
             }
         }
+        // TODO Ensure options are sorted alphabetically..?
+        function addOption(pointOfInterestId, name) {
+            let selectElement = document.querySelector('select[name="locationPointOfInterestId"]');
+            let newOption = document.createElement("option");
+            newOption.value = pointOfInterestId;
+            newOption.text = name;
+            selectElement.insertBefore(newOption, selectElement.firstChild);
+            selectElement.value = pointOfInterestId;
+        }
         const typeNameMap = {
+            0: "${i18nBundle["pointOfInterestType_0"]}",
+            1: "${i18nBundle["pointOfInterestType_1"]}",
             2: "${i18nBundle["pointOfInterestType_2"]}",
             3: "${i18nBundle["pointOfInterestType_3"]}",
-            5: "${i18nBundle["pointOfInterestType_5"]}"
+            5: "${i18nBundle["pointOfInterestType_5"]}",
+            6: "${i18nBundle["pointOfInterestType_6"]}",
+            7: "${i18nBundle["pointOfInterestType_7"]}"
         };
 
         const poiGeoJson = JSON.parse('${locationPointOfInterestsGeoJson?json_string}');
         const stationGeoJson = JSON.parse('${weatherStationPointOfInterestsGeoJson?json_string}')
-        const mapModalInstance = new MapModal('mapContainer', typeNameMap, poiGeoJson, true, callbackUpdateLocationPointOfInterest);
+        const mapModalInstance = new MapModal('mapContainer', typeNameMap, poiGeoJson, true, callbackPersistNewPoint, callbackUpdateLocationPointOfInterest);
         window.mapModalInstance = mapModalInstance;
 
-        window.openModal = () => window.mapModalInstance && window.mapModalInstance.openModal();
+        window.openModal = () => {
+            const selectElement = document.querySelector('select[name="locationPointOfInterestId"]');
+            const selectedOption = selectElement.options[selectElement.selectedIndex];
+            if(selectedOption.value && selectedOption.value !== '-1') {
+                window.mapModalInstance.setSelectedLocation(selectedOption.value);
+            }
+            window.mapModalInstance.openModal();
+        };
+
         window.closeModal = () => window.mapModalInstance && window.mapModalInstance.closeModal();
     </script>
 	<script type="text/javascript">