feat: Fix validation of location fields, add map button

cerealblotchmodels/static/cerealblotchmodels/formdefinitions/barleyNetBlotchForm.json

@@ -16,13 +16,23 @@
         "You should have received a copy of the NIBIO Open Source License ",
         "along with VIPSWeb.  If not, see <http://www.nibio.no/licenses/>. "
     ],
-    "_comment" : "Structure of the observationForm and how to validate it",
+    "_comment" : "Structure of the barleyNetBlotchForm and how to validate it",
     "fields": [
+        {
+            "name" : "latitude",
+            "dataType" : "DOUBLE",
+            "required" : false
+        },
+        {
+            "name" : "longitude",
+            "dataType" : "DOUBLE",
+            "required" : false
+        },
         {
             "name" : "weatherStationId",
             "dataType" : "INTEGER",
             "fieldType" : "SELECT_SINGLE",
-            "required" : true,
+            "required" : false,
             "nullValue" : "-1"
         },
         {

cerealblotchmodels/templates/cerealblotchmodels/barleynetblotchform.html

@@ -32,12 +32,12 @@
 
 <style type="text/css">
 	input#latitude, input#longitude {
-		width: 40%;
+		width: 30%;
 		display: inline-block;
 		margin: 10px 10px 10px 0px;
 	  }
 	  select#weatherStationId {
-		width: 80%;
+		width: 60%;
 		display: inline-block;
 		margin: 10px 10px 10px 0px;
 	  }
@@ -48,12 +48,13 @@
 	  .space {
 		margin-top: 40px;
 	  }
+
 	</style>
 {% endblock %}
 
 {% block content %}
 <div class="singleBlockContainer">
-	<h1>{% trans "Barley net blotch" %}</h1>
+	<h1>Elens modell</h1>
 	<div class="alert alert-danger" role="alert" id="oldIEWarning" style="display:none;">
 		Du bruker en gammel versjon av Internet Explorer. Den nye byggbrunflekkmodellen fungerer med 
 		de fleste moderne nettlesere, som Chrome, Firefox og Internet Explorer versjon 10 og nyere.
@@ -64,7 +65,7 @@
 				<p class="lead">
 				<a href="https://www.vips-landbruk.no/forecasts/models/BARLEYNETB/">Elens modell for byggbrunflekk</a> lager en tilvekstkurve for byggbrunflekk med værdata som grunnlag.
 				Du kan velge å kjøre modellen med værdata for et vilkårlig punkt i kartet, eller fra en værstasjon. Det er i tillegg nødvendig å legge inn informasjon om angrep av sjukdommen, samt 
-				sådato, sort, vekstskifte og jordarbeiding. Dersom du har en privat værstasjon som er registrert i Vips, vil denne være tilgjengelig i skjemaet under etter <a href="https://logic.vips.nibio.no/login">innlogging</a>.
+				sådato, sort, vekstskifte og jordarbeiding. Dersom du har en privat værstasjon som er registrert i Vips, vil denne være tilgjengelig i skjemaet etter <a href="https://logic.vips.nibio.no/login">innlogging</a>.
 			</p>
 			</div>
 		</div>
@@ -75,28 +76,30 @@
 					<label class="main-label" for="weatherdataType">Jeg vil bruke værdata</label>
 					<div class="radio">
 						<label>
-							<input type="radio" name="weatherdataType" id="weatherstation" value="weatherstation" checked onchange="displayCoordinatesInput()">
+							<input type="radio" name="weatherdataType" id="coordinates" value="coordinates" checked onchange="displayCoordinatesInput()">
 							for et spesifikt punkt (koordinater)
 						</label>
 						<div id="input-coordinates">
-							<input type="text" class="form-control" id="latitude" placeholder="Breddegrad" aria-label="Breddegrad">
-							<input type="text" class="form-control" id="longitude" placeholder="Lengdegrad" aria-label="Lengdegrad">
-							<i id="open-map-modal-icon" class="fa fa-map-marker" onclick="openCoordinatesMap()"></i>
+							<input type="text" class="form-control" name="latitude" id="latitude" placeholder="Breddegrad" aria-label="Breddegrad">
+							<input type="text" class="form-control" name="longitude" id="longitude" placeholder="Lengdegrad" aria-label="Lengdegrad">
+							<button type="button" class="btn btn-primary" onclick="openCoordinatesMap()"><i class="fa fa-map-marker fa-lg"></i> Velg i kart</button>
 						</div>
 						<div id="coordinates-map" class="map-modal"></div>
 					</div>
 					<div class="radio">
 						<label>
-						  <input type="radio" name="weatherdataType" id="coordinates" value="coordinates" onchange="displayWeatherstationInput()">
+						  <input type="radio" name="weatherdataType" id="weatherstation" value="weatherstation" onchange="displayWeatherstationInput()">
 						  fra en værstasjon
 						</label>
 						<div id="input-weatherstation" style="display: none;">
 							<select name="weatherStationId" id="weatherStationId" class="form-control" onblur="validateField(this);"></select>
-							<i id="open-map-modal-icon" class="fa fa-map-marker" onclick="openPoiMap()"></i>
+							<button type="button" class="btn btn-primary" onclick.prevent="openPoiMap()"><i class="fa fa-map-marker fa-lg"></i> Velg i kart</button>
 						</div>
 						<div id="poi-map" class="map-modal"></div>
 					</div>
+					<span class="help-block" id="{{ form_id }}_latitude_validation"></span>
 					<span class="help-block" id="{{ form_id }}_weatherStationId_validation"></span>
+					<span class="help-block" id="{{ form_id }}_longitude_validation"></span>
 				</div>
 				<div class="form-group space">
 					<label class="main-label" for="cropOrganismId">Jeg har dyrket</label>
@@ -110,17 +113,19 @@
 					<span class="help-block" id="{{ form_id }}_sowingDate_validation"></span>
 				</div>
 				<div class="form-group">
-					<input type="checkbox" name="sameCropAsLastSeason"/> Jeg dyrket samme sort på samme skifte i fjor<br/>
+					<label>Vekstskifte</label><br>
+					<input type="checkbox" name="sameCropAsLastSeason"/> Jeg dyrket bygg på samme skifte i fjor<br/>
 					<span class="help-block" id="{{ form_id }}_sameCropAsLastSeason_validation"></span>
 				</div>
 				<div class="form-group">
-					<input type="checkbox" name="plowed"/> Jeg har pløyet<br/>
+					<label>Jordarbeiding</label><br>
+					<input type="checkbox" name="plowed"/> Jeg har pløyd<br/>
 					<span class="help-block" id="{{ form_id }}_plowed_validation"></span>
 				</div>
 			</div>
 			<div class="col-md-6 form-group">
 				<div class="form-group">
-					<label class="main-label" for="observationDate">Observasjon utført</label>
+					<label class="main-label" for="observationDate">Observasjonsdato</label>
 					<input type="date" name="observationDate" class="form-control"/>
 					<span class="help-block" id="{{ form_id }}_observationDate_validation"></span>
 				</div>
@@ -130,7 +135,7 @@
 					<span class="help-block" id="{{ form_id }}_observationValue_validation"></span>
 				</div>
 				<div class="form-group space">
-					<label class="main-label" for="sprayingDate">Sprøyting utført</label>
+					<label class="main-label" for="sprayingDate">Sprøytedato</label>
 					<input type="date" name="sprayingDate" class="form-control"/>
 					<span class="help-block" id="{{ form_id }}_sprayingDate_validation"></span>
 				</div>
@@ -189,6 +194,7 @@
 <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 inputLatitudeElement = document.getElementById("latitude");
 	const inputLongitudeElement = document.getElementById("longitude");
 	const selectPoiElement = document.getElementById("weatherStationId");
@@ -240,7 +246,6 @@
 						},
 						"properties": {
 							"pointOfInterestId": selectedPoint,
-							"pointOfInterestName": "Punkt",
 						}
 					}]
 			};
@@ -249,12 +254,15 @@
 			selectedFeature = undefined;
 		}
 
-		const coordinatesMapInstance = new MapModal('coordinates-map', {}, selectedFeature, 'nb', true, selectCoordinates);
+		// TODO Open map with currently selected language! (not 'nb')
+
+		const isPoiMap = false; // Map should enable selection of coordinates (not pois)
+        const allowNewPoints = true; // User should be able to select new pois
+        const coordinatesMapInstance = new MapModal('coordinates-map', selectedFeature, 'nb', isPoiMap, allowNewPoints, selectCoordinates);
 		coordinatesMapInstance.openModal(selectedPoint);
 	}
 
 	window.openPoiMap = () => {
-        const typeNameMap = {1: "Værstasjon", 2: "Gård", 5: "Felle", 3: "Felt"};
 		fetch(settings.vipslogicProtocol + "://" + settings.vipslogicServerName + "/rest/poi/geojson", {
                 method: 'POST',
                 headers: {
@@ -265,7 +273,9 @@
             })
             .then(response => response.json())
             .then(geoJson => {
-				const poiMapInstance = new MapModal('poi-map', typeNameMap, geoJson, 'nb', false, selectPoi);
+				const isPoiMap = true; // Map should enable selection of pois
+		        const allowNewPoints = false; // User should not be able to create new pois
+				const poiMapInstance = new MapModal('poi-map', geoJson, 'nb', isPoiMap, allowNewPoints, selectPoi);
                 const selectedPoiId = getSelectedPoiId();
                 poiMapInstance.openModal(selectedPoiId);
             })
@@ -287,6 +297,20 @@
 
 	window.validateFormExtra = () => {
 		var theForm = document.getElementById("{{ form_id }}");
+		// Location: Either weatherStationId or latitude/longitude must be set
+		const selectedWeatherdataType = theForm.querySelector('input[name="weatherdataType"]:checked').value;
+		if( selectedWeatherdataType === "coordinates") {
+			const trimmedLat = theForm["latitude"].value.trim()
+			const trimmedLon = theForm["longitude"].value.trim()
+			if(trimmedLat === "" || trimmedLon === "" || isNaN(Number(trimmedLat)) || isNaN(Number(trimmedLon))) {
+				alert("Mangler gyldig punkt");
+				return false;
+			}
+		} 
+		if (selectedWeatherdataType === "weatherstation" && theForm["weatherStationId"].value === -1) {
+			alert("Mangler værstasjon")
+		}
+
 		// Observation: Either no fields or all fields must be set
 		if(theForm["observationDate"].value.trim() == "" ^  theForm["observationValue"].value.trim() == "")
 		{