diff --git a/cerealblotchmodels/templates/cerealblotchmodels/barleynetblotchform.html b/cerealblotchmodels/templates/cerealblotchmodels/barleynetblotchform.html index feb21cdcfc8c5dc90bdc6fd3fb2582076c8f2d8d..449414e4abdb44dd583387aa6c141fe831e1db83 100755 --- a/cerealblotchmodels/templates/cerealblotchmodels/barleynetblotchform.html +++ b/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