Skip to content
Snippets Groups Projects
Commit 9f45c0ca authored by Lene Wasskog's avatar Lene Wasskog
Browse files

feat: Add map for coordinates, adjust styling

parent dc484d58
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
cerealblotchmodels/templates/cerealblotchmodels/barleynetblotchform.html
+ 116
− 35
View file @ 9f45c0ca
...@@ -30,7 +30,27 @@ ...@@ -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/3rdparty/leaflet.css" />
<link type="text/css" rel="stylesheet" href="https://logic.testvips.nibio.no/css/mapModal.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 %} {% endblock %}
{% block content %} {% block content %}
<div class="singleBlockContainer"> <div class="singleBlockContainer">
<h1>{% trans "Barley net blotch" %}</h1> <h1>{% trans "Barley net blotch" %}</h1>
...@@ -40,50 +60,67 @@ ...@@ -40,50 +60,67 @@
</div> </div>
<form role="form" id="{{ form_id }}"> <form role="form" id="{{ form_id }}">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12 mb-3">
<h2>{% trans "Background data for the barley net blotch model" %}</h2> <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> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<input type="hidden" name="timeZone" value="Europe/Oslo"/> <input type="hidden" name="timeZone" value="Europe/Oslo"/>
<div class="form-group"> <div class="form-group">
<label for="weatherStationId">{% trans "Weather station" %}</label> <label for="weatherdataType">Jeg vil bruke værdata</label>
<div class="input-group"> <div class="radio">
<select name="weatherStationId" id="weatherStationId" class="form-control" onblur="validateField(this);"> <label>
</select> <input type="radio" name="weatherdataType" id="weatherstation" value="weatherstation" checked onchange="displayCoordinatesInput()">
<span class="input-group-addon" style="background-color: transparent; border: none;"> 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> <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>
<div id="poi-map" class="map-modal"></div>
<span class="help-block" id="{{ form_id }}_weatherStationId_validation"></span> <span class="help-block" id="{{ form_id }}_weatherStationId_validation"></span>
</div> </div>
<div class="form-group"> <div class="form-group space">
<label for="sowingDate">{% trans "Sowing date" %}</label> <label for="cropOrganismId">Jeg har dyrket</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>
<select name="cropOrganismId" id="cropOrganismId" class="form-control" onblur="validateField(this);"> <select name="cropOrganismId" id="cropOrganismId" class="form-control" onblur="validateField(this);">
</select> </select>
<span class="help-block" id="{{ form_id }}_cropOrganismId_validation"></span> <span class="help-block" id="{{ form_id }}_cropOrganismId_validation"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="checkbox" name="sameCropAsLastSeason"/> <label for="sowingDate">{% trans "Sowing date" %}</label>
<label for="sameCropAsLastSeason">{% trans "Same crop as last season" %}</label><br/> <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> <span class="help-block" id="{{ form_id }}_sameCropAsLastSeason_validation"></span>
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="checkbox" name="plowed"/> <input type="checkbox" name="plowed"/> Jeg har pløyet<br/>
<label for="plowed"><span>{% trans "Plowed" %}</span></label><br/>
<span class="help-block" id="{{ form_id }}_plowed_validation"></span> <span class="help-block" id="{{ form_id }}_plowed_validation"></span>
</div> </div>
</div> </div>
<div class="col-md-6 form-group"> <div class="col-md-6 form-group">
<div class="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"/> <input type="date" name="observationDate" class="form-control"/>
<span class="help-block" id="{{ form_id }}_observationDate_validation"></span> <span class="help-block" id="{{ form_id }}_observationDate_validation"></span>
</div> </div>
...@@ -92,19 +129,19 @@ ...@@ -92,19 +129,19 @@
<input type="number" name="observationValue" class="form-control" min="0" max="100"/> <input type="number" name="observationValue" class="form-control" min="0" max="100"/>
<span class="help-block" id="{{ form_id }}_observationValue_validation"></span> <span class="help-block" id="{{ form_id }}_observationValue_validation"></span>
</div> </div>
<div class="form-group"> <div class="form-group space">
<label for="sprayingDate">{% trans "Spraying date" %}</label> <label for="sprayingDate">Sprøyting utført</label>
<input type="date" name="sprayingDate" class="form-control"/> <input type="date" name="sprayingDate" class="form-control"/>
<span class="help-block" id="{{ form_id }}_sprayingDate_validation"></span> <span class="help-block" id="{{ form_id }}_sprayingDate_validation"></span>
</div> </div>
<div class="form-group"> <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 name="preparationId" id="preparationId" class="form-control">
</select> </select>
<span class="help-block" id="{{ form_id }}_preparationId_validation"></span> <span class="help-block" id="{{ form_id }}_preparationId_validation"></span>
</div> </div>
<div class="form-group"> <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"/> <input type="number" name="preparationDose" class="form-control"/>
<span class="help-block" id="{{ form_id }}_preparationDose_validation"></span> <span class="help-block" id="{{ form_id }}_preparationDose_validation"></span>
</div> </div>
...@@ -112,8 +149,8 @@ ...@@ -112,8 +149,8 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6 form-group"> <div class="col-md-12 form-group">
<button type="button" class="btn btn-primary" onclick="if(validateForm(document.getElementById('{{ form_id }}')) & validateFormExtra()){runModel();}">{% trans "Run model" %}</button> <button type="button" class="btn btn-primary pull-right" onclick="if(validateForm(document.getElementById('{{ form_id }}')) & validateFormExtra()){runModel();}">{% trans "Run model" %}</button>
</div> </div>
</div> </div>
...@@ -152,19 +189,49 @@ ...@@ -152,19 +189,49 @@
<script type="module"> <script type="module">
import MapModal from 'https://logic.testvips.nibio.no/js/mapModal.js'; import MapModal from 'https://logic.testvips.nibio.no/js/mapModal.js';
//import MapModal from settings.vipslogicProtocol + "://" + settings.vipslogicServerName + "/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"); const selectPoiElement = document.getElementById("weatherStationId");
let poiIdList = [] let poiIdList = []
let selectedPoint = null;
let selectedFeature = undefined;
function getSelectedPoiId() { function getSelectedPoiId() {
const value = selectPoiElement.value; const value = selectPoiElement.value;
const parsedValue = parseInt(value, 10); const parsedValue = parseInt(value, 10);
return (!isNaN(parsedValue) && parsedValue > 0) ? parsedValue : undefined; 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) { function selectPoi(poiData) {
const selectedId = poiData ? poiData.pointOfInterestId : undefined; const selectedId = poiData ? poiData.pointOfInterestId : undefined;
if (selectedId) { if (selectedId) {
console.info("Point selected", poiData.pointOfInterestId);
const optionIndex = Array.from(selectPoiElement.options).findIndex(option => option.value == selectedId); const optionIndex = Array.from(selectPoiElement.options).findIndex(option => option.value == selectedId);
if (optionIndex !== -1) { if (optionIndex !== -1) {
selectPoiElement.selectedIndex = optionIndex; selectPoiElement.selectedIndex = optionIndex;
...@@ -176,8 +243,13 @@ ...@@ -176,8 +243,13 @@
} }
} }
window.openCoordinatesMap = () => {
const coordinatesMapInstance = new MapModal('coordinates-map', {}, selectedFeature, 'nb', true, selectCoordinates);
coordinatesMapInstance.openModal(selectedPoint);
}
window.openPoiMap = () => { 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", { fetch(settings.vipslogicProtocol + "://" + settings.vipslogicServerName + "/rest/poi/geojson", {
method: 'POST', method: 'POST',
headers: { headers: {
...@@ -188,7 +260,7 @@ ...@@ -188,7 +260,7 @@
}) })
.then(response => response.json()) .then(response => response.json())
.then(geoJson => { .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(); const selectedPoiId = getSelectedPoiId();
poiMapInstance.openModal(selectedPoiId); poiMapInstance.openModal(selectedPoiId);
}) })
...@@ -196,9 +268,19 @@ ...@@ -196,9 +268,19 @@
console.error('Unable to open map', error); 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 }}"); var theForm = document.getElementById("{{ form_id }}");
// Observation: Either no fields or all fields must be set // Observation: Either no fields or all fields must be set
if(theForm["observationDate"].value.trim() == "" ^ theForm["observationValue"].value.trim() == "") if(theForm["observationDate"].value.trim() == "" ^ theForm["observationValue"].value.trim() == "")
...@@ -219,8 +301,7 @@ ...@@ -219,8 +301,7 @@
} }
var VIPSOrganizationId = {{vips_organization_id}}; var VIPSOrganizationId = {{vips_organization_id}};
function runModel() window.runModel = () => {
{
document.getElementById("results").style.display="none"; document.getElementById("results").style.display="none";
document.getElementById("errorMessageContainer").style.display="none"; document.getElementById("errorMessageContainer").style.display="none";
document.getElementById("runningModelMessage").style.display="block"; document.getElementById("runningModelMessage").style.display="block";
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment