feat: Include map for selecting weather station or creating new poi

cerealblotchmodels/templates/cerealblotchmodels/barleynetblotchform.html

@@ -27,6 +27,8 @@
 <!--[if lte IE 9]>
   <style type="text/css">#oldIEWarning{display: block !important;}</style>
 <![endif]-->
+<link type="text/css" rel="stylesheet" href="https://logic.testvips.nibio.no/css/3rdparty/leaflet.css" />
+<link type="text/css" rel="stylesheet" href="https://logic.testvips.nibio.no/css/mapModal.css" />
 
 {% endblock %}
 {% block content %}
@@ -47,8 +49,14 @@
 				<input type="hidden" name="timeZone" value="Europe/Oslo"/>
 				<div class="form-group">
 					<label for="weatherStationId">{% trans "Weather station" %}</label>
-					<select name="weatherStationId" id="weatherStationId" class="form-control" onblur="validateField(this);">
-					</select>
+					<div class="input-group">
+						<select name="weatherStationId" id="weatherStationId" class="form-control" onblur="validateField(this);">
+						</select>
+						<span class="input-group-addon" style="background-color: transparent; border: none;">
+							<i id="open-map-modal-icon" class="fa fa-map-marker" onclick="openPoiMap()"></i>
+						</span>
+					</div>
+					<div id="poi-map" class="map-modal"></div>
 					<span class="help-block" id="{{ form_id }}_weatherStationId_validation"></span>
 				</div>
 				<div class="form-group">
@@ -141,8 +149,54 @@
 <script type="text/javascript" src="{% static "js/validateForm.js" %}"></script>
 <script type="text/javascript" src="{% static "organisms/organismsUtil.js" %}"></script>
 <script type="text/javascript" src="{% static "forecasts/js/forecasts.js" %}"></script>
-<script type="text/javascript">
+<script type="module">
+	import MapModal from 'https://logic.testvips.nibio.no/js/mapModal.js';
+	//import MapModal from settings.vipslogicProtocol + "://" + settings.vipslogicServerName + "/js/mapModal.js"
+	const selectPoiElement = document.getElementById("weatherStationId");
+	let poiIdList = []
+
+	function getSelectedPoiId() {
+		const value = selectPoiElement.value;
+		const parsedValue = parseInt(value, 10);
+		return (!isNaN(parsedValue) && parsedValue > 0) ? parsedValue : undefined;
+	}
+
+	function selectPoi(poiData) {
+		const selectedId = poiData ? poiData.pointOfInterestId : undefined;
+		if (selectedId) {
+			console.info("Point selected", poiData.pointOfInterestId);
+			const optionIndex = Array.from(selectPoiElement.options).findIndex(option => option.value == selectedId);
+			if (optionIndex !== -1) {
+				selectPoiElement.selectedIndex = optionIndex;
+			} else {
+				console.error(`No matching option found for poi.id=${selectedId}`);
+			}
+		} else {
+			console.info("New point selected", poiData);
+		}
+	}
 
+	window.openPoiMap = () => {
+        const typeNameMap = {1: "Målestasjon", 2: "Gård", 5: "Felle", 3: "Felt"};
+		fetch(settings.vipslogicProtocol + "://" + settings.vipslogicServerName + "/rest/poi/geojson", {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                },
+                body: JSON.stringify(poiIdList)
+            })
+            .then(response => response.json())
+            .then(geoJson => {
+				const poiMapInstance = new MapModal('poi-map', typeNameMap, geoJson, 'nb', true, selectPoi);
+                const selectedPoiId = getSelectedPoiId();
+                poiMapInstance.openModal(selectedPoiId);
+            })
+            .catch(error => {
+                console.error('Unable to open map', error);
+            });
+	}
+	
 	function validateFormExtra()
 	{
 		var theForm = document.getElementById("{{ form_id }}");
@@ -164,8 +218,6 @@
 		return true;
 	}
 
-	
-
 	var VIPSOrganizationId = {{vips_organization_id}};
 	function runModel()
 	{
@@ -283,6 +335,7 @@
 	            	for(var i in data)
 	            	{
 	            		var ws = data[i];
+						poiIdList.push(ws["pointOfInterestId"]);
 	            		wsHTML.push("<option value=\"" + ws["pointOfInterestId"] + "\">" + ws["name"] + "</option>");
 	            	}
 	            	document.getElementById("weatherStationId").innerHTML = wsHTML.join("");
@@ -370,4 +423,5 @@
 		loadFormDefinition("{{ form_id }}","/static/cerealblotchmodels/formdefinitions/");
 	});
 </script>
+
 {% endblock %}
\ No newline at end of file