From 9f45c0cad3d30c61731f66227d05b7794a1938f6 Mon Sep 17 00:00:00 2001
From: Lene Wasskog <lene.wasskog@nibio.no>
Date: Tue, 22 Oct 2024 14:37:20 +0200
Subject: [PATCH] feat: Add map for coordinates, adjust styling
---
.../barleynetblotchform.html | 151 ++++++++++++++----
1 file changed, 116 insertions(+), 35 deletions(-)
diff --git a/cerealblotchmodels/templates/cerealblotchmodels/barleynetblotchform.html b/cerealblotchmodels/templates/cerealblotchmodels/barleynetblotchform.html
index 449414e4..03f5b297 100755
--- a/cerealblotchmodels/templates/cerealblotchmodels/barleynetblotchform.html
+++ b/cerealblotchmodels/templates/cerealblotchmodels/barleynetblotchform.html
@@ -30,7 +30,27 @@
<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" />
+<style type="text/css">
+ input#latitude, input#longitude {
+ width: 40%;
+ display: inline-block;
+ margin: 10px 10px 10px 0px;
+ }
+ select#weatherStationId {
+ width: 80%;
+ display: inline-block;
+ margin: 10px 10px 10px 0px;
+ }
+ label {
+ font-size: 1.5rem;
+ font-weight: 600;
+ }
+ .space {
+ margin-top: 40px;
+ }
+ </style>
{% endblock %}
+
{% block content %}
<div class="singleBlockContainer">
<h1>{% trans "Barley net blotch" %}</h1>
@@ -40,50 +60,67 @@
</div>
<form role="form" id="{{ form_id }}">
<div class="row">
- <div class="col-md-12">
- <h2>{% trans "Background data for the barley net blotch model" %}</h2>
+ <div class="col-md-12 mb-3">
+ <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>.
+ </p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<input type="hidden" name="timeZone" value="Europe/Oslo"/>
<div class="form-group">
- <label for="weatherStationId">{% trans "Weather station" %}</label>
- <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;">
+ <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()">
+ 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>
+ </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()">
+ 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>
- </span>
+ </div>
+ <div id="poi-map" class="map-modal"></div>
</div>
- <div id="poi-map" class="map-modal"></div>
<span class="help-block" id="{{ form_id }}_weatherStationId_validation"></span>
</div>
- <div class="form-group">
- <label for="sowingDate">{% trans "Sowing date" %}</label>
- <input type="date" name="sowingDate" class="form-control" max="{{max_sowing_date|date:'Y-m-d'}}" onblur="validateField(this);"/>
- <span class="help-block" id="{{ form_id }}_sowingDate_validation"></span>
- </div>
- <div class="form-group">
- <label for="cropOrganismId">{% trans "Crop" %}</label>
+ <div class="form-group space">
+ <label for="cropOrganismId">Jeg har dyrket</label>
<select name="cropOrganismId" id="cropOrganismId" class="form-control" onblur="validateField(this);">
</select>
<span class="help-block" id="{{ form_id }}_cropOrganismId_validation"></span>
</div>
<div class="form-group">
- <input type="checkbox" name="sameCropAsLastSeason"/>
- <label for="sameCropAsLastSeason">{% trans "Same crop as last season" %}</label><br/>
+ <label for="sowingDate">{% trans "Sowing date" %}</label>
+ <input type="date" name="sowingDate" class="form-control" max="{{max_sowing_date|date:'Y-m-d'}}" onblur="validateField(this);" placeholder="Sådato"/>
+ <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/>
<span class="help-block" id="{{ form_id }}_sameCropAsLastSeason_validation"></span>
</div>
<div class="form-group">
- <input type="checkbox" name="plowed"/>
- <label for="plowed"><span>{% trans "Plowed" %}</span></label><br/>
+ <input type="checkbox" name="plowed"/> Jeg har pløyet<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 for="observationDate">{% trans "Observation date" %}</label>
+ <label for="observationDate">Observasjon utført</label>
<input type="date" name="observationDate" class="form-control"/>
<span class="help-block" id="{{ form_id }}_observationDate_validation"></span>
</div>
@@ -92,19 +129,19 @@
<input type="number" name="observationValue" class="form-control" min="0" max="100"/>
<span class="help-block" id="{{ form_id }}_observationValue_validation"></span>
</div>
- <div class="form-group">
- <label for="sprayingDate">{% trans "Spraying date" %}</label>
+ <div class="form-group space">
+ <label for="sprayingDate">Sprøyting utført</label>
<input type="date" name="sprayingDate" class="form-control"/>
<span class="help-block" id="{{ form_id }}_sprayingDate_validation"></span>
</div>
<div class="form-group">
- <label for="preparationId">{% trans "Preparation" %}</label>
+ <label for="preparationId">med preparat</label>
<select name="preparationId" id="preparationId" class="form-control">
</select>
<span class="help-block" id="{{ form_id }}_preparationId_validation"></span>
</div>
<div class="form-group">
- <label for="preparationDose">{% trans "Preparation dose" %} (ml/daa)</label>
+ <label for="preparationDose">og preparatdose (ml/daa)</label>
<input type="number" name="preparationDose" class="form-control"/>
<span class="help-block" id="{{ form_id }}_preparationDose_validation"></span>
</div>
@@ -112,8 +149,8 @@
</div>
</div>
<div class="row">
- <div class="col-md-6 form-group">
- <button type="button" class="btn btn-primary" onclick="if(validateForm(document.getElementById('{{ form_id }}')) & validateFormExtra()){runModel();}">{% trans "Run model" %}</button>
+ <div class="col-md-12 form-group">
+ <button type="button" class="btn btn-primary pull-right" onclick="if(validateForm(document.getElementById('{{ form_id }}')) & validateFormExtra()){runModel();}">{% trans "Run model" %}</button>
</div>
</div>
@@ -152,19 +189,49 @@
<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");
let poiIdList = []
+ let selectedPoint = null;
+ let selectedFeature = undefined;
+
function getSelectedPoiId() {
const value = selectPoiElement.value;
const parsedValue = parseInt(value, 10);
return (!isNaN(parsedValue) && parsedValue > 0) ? parsedValue : undefined;
}
+ function selectCoordinates(coordinatesData) {
+ const selectedLatitude = coordinatesData ? coordinatesData.latitude : undefined;
+ const selectedLongitude = coordinatesData ? coordinatesData.longitude : undefined;
+
+ if(selectedLatitude && selectedLongitude) {
+ inputLatitudeElement.value = selectedLatitude;
+ inputLongitudeElement.value = selectedLongitude;
+ }
+
+ selectedPoint = 1;
+ selectedFeature = {
+ "type": "FeatureCollection", "features": [
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [selectedLongitude, selectedLatitude]
+ },
+ "properties": {
+ "pointOfInterestId": selectedPoint,
+ "pointOfInterestName": coordinatesData.name,
+ }
+ }]
+ };
+ }
+
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;
@@ -176,8 +243,13 @@
}
}
+ window.openCoordinatesMap = () => {
+ const coordinatesMapInstance = new MapModal('coordinates-map', {}, selectedFeature, 'nb', true, selectCoordinates);
+ coordinatesMapInstance.openModal(selectedPoint);
+ }
+
window.openPoiMap = () => {
- const typeNameMap = {1: "Målestasjon", 2: "Gård", 5: "Felle", 3: "Felt"};
+ const typeNameMap = {1: "Værstasjon", 2: "Gård", 5: "Felle", 3: "Felt"};
fetch(settings.vipslogicProtocol + "://" + settings.vipslogicServerName + "/rest/poi/geojson", {
method: 'POST',
headers: {
@@ -188,7 +260,7 @@
})
.then(response => response.json())
.then(geoJson => {
- const poiMapInstance = new MapModal('poi-map', typeNameMap, geoJson, 'nb', true, selectPoi);
+ const poiMapInstance = new MapModal('poi-map', typeNameMap, geoJson, 'nb', false, selectPoi);
const selectedPoiId = getSelectedPoiId();
poiMapInstance.openModal(selectedPoiId);
})
@@ -196,9 +268,19 @@
console.error('Unable to open map', error);
});
}
-
- function validateFormExtra()
- {
+
+
+ window.displayWeatherstationInput = () => {
+ document.getElementById('input-weatherstation').style.display="block";
+ document.getElementById('input-coordinates').style.display="none";
+ }
+
+ window.displayCoordinatesInput = (id) => {
+ document.getElementById('input-weatherstation').style.display="none";
+ document.getElementById('input-coordinates').style.display="block";
+ }
+
+ window.validateFormExtra = () => {
var theForm = document.getElementById("{{ form_id }}");
// Observation: Either no fields or all fields must be set
if(theForm["observationDate"].value.trim() == "" ^ theForm["observationValue"].value.trim() == "")
@@ -219,8 +301,7 @@
}
var VIPSOrganizationId = {{vips_organization_id}};
- function runModel()
- {
+ window.runModel = () => {
document.getElementById("results").style.display="none";
document.getElementById("errorMessageContainer").style.display="none";
document.getElementById("runningModelMessage").style.display="block";
--
GitLab