Skip to content
Snippets Groups Projects
Commit c431ae47 authored by Tor-Einar Skog's avatar Tor-Einar Skog
Browse files

feat: Layout and error handling

parent 73d8d977
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
fusarium/static/fusarium/js/oatFloweringModelForm.js
+ 32
− 0
View file @ c431ae47
......@@ -123,6 +123,7 @@ var submitForm = function()
// Erase previous results
document.getElementById("oatFloweringModelResults").style.display="none";
document.getElementById("progressIconRow").style.display="block";
document.getElementById("errorMsg").style.display="none";
// Start chain of async functions
createConfig();
......@@ -147,6 +148,18 @@ const createConfig = async function(){
const normalDataResponse = await fetch(normalDataRequestUri);
if(normalDataResponse.status != 200)
{
let errorMsg = await normalDataResponse.text();
if(normalDataResponse.status == 204)
{
errorMsg = "Ingen normaldata funnet for værstasjon med id=" + weatherStationId;
}
document.getElementById("errorMsg").innerHTML = errorMsg;
document.getElementById("errorMsg").style.display="block";
document.getElementById("progressIconRow").style.display="none";
return;
}
const normalData = await normalDataResponse.json();
normalData.sort(sortWeatherData)
......@@ -165,6 +178,18 @@ const createConfig = async function(){
"&endDate=" + moment(now).add(10, "days").format("YYYY-MM-DD") + "&endTime=00";
const measuredDataResponse = await fetch(measuredDataRequestUri);
if(measuredDataResponse.status != 200)
{
let errorMsg = await measuredDataResponse.text();
if(measuredDataResponse.status == 204)
{
errorMsg = "Ingen værdata funnet for valgt kilde";
}
document.getElementById("errorMsg").innerHTML = errorMsg;
document.getElementById("errorMsg").style.display="block";
document.getElementById("progressIconRow").style.display="none";
return;
}
const measuredData = await measuredDataResponse.json();
// Combine data. Normal data has lowest priority
measuredData.sort(sortWeatherData);
......@@ -211,6 +236,13 @@ const runModel = async function(data)
{
displayResults(await modelResponse.json());
}
else
{
document.getElementById("errorMsg").innerHTML = "En feil har oppstått: " + await modelResponse.text();
document.getElementById("errorMsg").style.display="block";
document.getElementById("progressIconRow").style.display="none";
return;
}
}
/**
......
fusarium/templates/fusarium/oat_flowering.html
+ 85
− 44
View file @ c431ae47
......@@ -21,50 +21,64 @@
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="oatFloweringModelForm" style="width:100%">
<form id="_oatFloweringModelForm" role="form">
<div class="form-group">
<label for="dateOfSowing">Sådato</label>
<input class="form-control" type="date" name="dateOfSowing" value=""><br>
</div>
<div class="form-group">
<h4>Værdata og prognoser</h4>
<p>For værdata fram til nå og prognoser de nærmeste dagene fram i tid vil jeg bruke</p>
<div class="radio">
<div class="col-md-6">
<fieldset>
<legend>Værdata og prognoser</legend>
<div class="form-group">
<p>For værdata fram til nå og prognoser de nærmeste dagene fram i tid vil jeg bruke</p>
<div class="radio">
<div class="radio">
<label>
<input type="radio" name="weatherdataType" id="weatherstation" value="weatherstation" onchange="hideCoordinatesInput();storeUserSettings();">
data fra værstasjonen valgt for normaldata
</label>
</div>
<label>
<input type="radio" name="weatherdataType" id="weatherstation" value="weatherstation" onchange="hideCoordinatesInput();storeUserSettings();">
data fra værstasjonen valgt for normaldata (se nedenfor)
<input type="radio" name="weatherdataType" id="coordinates" value="coordinates" onchange="displayCoordinatesInput();storeUserSettings();">
data for et spesifikt punkt (koordinater)
</label>
<div id="input-coordinates" class="form-inline" style="margin-top: 10px; display: none;">
<input type="hidden" class="form-control" name="latitude" id="latitude" placeholder="Breddegrad" aria-label="Breddegrad">
<input type="hidden" class="form-control" name="longitude" id="longitude" placeholder="Lengdegrad" aria-label="Lengdegrad">
<input type="hidden" class="form-control" name="timezone" id="timezone" placeholder="Tidssone" aria-label="Tidssone">
<div id="gridPointInfo"></div>
<button type="button" class="btn btn-primary" onclick="openCoordinatesMap();" style="margin-left: 5px;"><i class="fa fa-map-marker fa-lg"></i>&nbsp;&nbsp;{% trans "Select in map" %}</button>
</div>
<div id="coordinates-map" class="map-modal"></div>
</div>
<label>
<input type="radio" name="weatherdataType" id="coordinates" value="coordinates" onchange="displayCoordinatesInput();storeUserSettings();">
data for et spesifikt punkt (koordinater)
</label>
<div id="input-coordinates" class="form-inline" style="margin-top: 10px; display: none;">
<input type="hidden" class="form-control" name="latitude" id="latitude" placeholder="Breddegrad" aria-label="Breddegrad">
<input type="hidden" class="form-control" name="longitude" id="longitude" placeholder="Lengdegrad" aria-label="Lengdegrad">
<input type="hidden" class="form-control" name="timezone" id="timezone" placeholder="Tidssone" aria-label="Tidssone">
<div id="gridPointInfo"></div>
<button type="button" class="btn btn-primary" onclick="openCoordinatesMap();" style="margin-left: 5px;"><i class="fa fa-map-marker fa-lg"></i>&nbsp;&nbsp;{% trans "Select in map" %}</button>
</div>
<div id="coordinates-map" class="map-modal"></div>
</div>
</div>
<div class="form-group form-inline">
<h4>Normaldata</h4>
<p>Brukes for beregning når tidspunkt for blomstring er senere enn 10 dager fram i tid</p>
<select name="weatherStationId" id="weatherStationId" class="form-control">
<option value="-1">-- Vennligst velg værstasjon --</option>
</select><button type="button" class="btn btn-primary" onclick="openPoiMap()" style="margin-left: 5px;"><i class="fa fa-map-marker fa-lg"></i>&nbsp;&nbsp;{% trans "Select in map" %}</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary" onclick="submitForm();">Beregn</button>
</div>
<div id="poi-map" class="map-modal"></div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend>Normaldata</legend>
<div class="form-group form-inline">
<p>Brukes for beregning når tidspunkt for blomstring er senere enn 10 dager fram i tid</p>
<select name="weatherStationId" id="weatherStationId" class="form-control">
<option value="-1">-- Vennligst velg værstasjon --</option>
</select><button type="button" class="btn btn-primary" onclick="openPoiMap()" style="margin-left: 5px;"><i class="fa fa-map-marker fa-lg"></i>&nbsp;&nbsp;{% trans "Select in map" %}</button>
</div>
</fieldset>
<fieldset>
<legend>Sådato</legend>
<div class="form-group">
<input class="form-control" type="date" id="dateOfSowing" name="dateOfSowing" style="width: 50%;"><br>
</div>
</fieldset>
<div class="form-group">
<button type="button" class="btn btn-primary" onclick="submitForm();storeUserSettings();">Beregn</button>
</div>
</form>
<div id="poi-map" class="map-modal"></div>
</div>
</div>
</div>
......@@ -73,7 +87,8 @@
<button type="button" class="btn btn-info" style="margin-left: 5px;"><i class="fa fa-hourglass-half fa-lg"></i>&nbsp;&nbsp;Vennligst vent...</button>
</div>
</div>
<div id="oatFloweringModelResults" class="alert alert-info" role="alert" style="width:100%; display: none;"></div>
<div id="errorMsg" class="alert alert-danger" style="display: none;"></div>
<div id="oatFloweringModelResults" class="alert alert-success" role="alert" style="width:100%; display: none;"></div>
</div>
{% endblock %}
{% block extendJS%}
......@@ -90,7 +105,7 @@
<script src="{% static "fusarium/js/oatFloweringModelForm.js" %}"></script>
<script type="module">
import MapModal from "{{VIPSLOGIC_URL}}/js/mapModal.js";
const userSettingsFields = ["latitude","longitude","timezone","weatherStationId","heatSumStartDate"];
const userSettingsFields = ["latitude","longitude","timezone","weatherStationId","dateOfSowing"];
const userSettingsRadios = ["weatherdataType"];
window.weatherStations = [];
window.weatherStationIds = [];
......@@ -103,11 +118,6 @@
let userSettings = getLocalSettings(getNameSpaced("{{ form_id }}",userSettingsFields.concat(userSettingsRadios)), false);
// Settings found, render form and run model
if(Object.keys(userSettings).length > 0)
{
console.info("User settings found, configuring form!");
}
fetch("https://lmt.nibio.no/agrometbase/export/getNormalDataStationsJSON.php")
.then(response => {
......@@ -135,6 +145,38 @@
if (!Modernizr.inputtypes.date) {
$('input[type=date]').datepicker({ dateFormat: 'yy-mm-dd' });
}
// Settings found, render form and run model
if(Object.keys(userSettings).length > 0)
{
userSettingsFields.forEach((fieldId) =>{
document.getElementById(fieldId).value = userSettings[`{{ form_id }}.${fieldId}`];
});
userSettingsRadios.forEach((radioName) => {
let radioValue = userSettings[`{{ form_id }}.${radioName}`];
document.getElementsByName(radioName).forEach((radioElement) => {
radioElement.checked = (radioElement.value == radioValue);
});
});
// Check that sowing date is in current year. If not: Update to current year
let dateOfSowingElement = document.getElementById("dateOfSowing");
let dateOfSowing = moment(dateOfSowingElement.value);
if(dateOfSowing.year() != moment().year())
{
dateOfSowing.year(moment().year());
dateOfSowingElement.value = dateOfSowing.format("YYYY-MM-DD");
}
if(document.getElementById("coordinates").checked)
{
displayCoordinatesInput();
getTimezoneForPoint(inputLatitudeElement.value, inputLongitudeElement.value);
}
}
});
};
......@@ -240,7 +282,6 @@
}
window.storeUserSettings = function() {
return;
let userSettings = {};
userSettingsFields.forEach((fieldId) => {
userSettings[`{{ form_id }}.${fieldId}`] = document.getElementById(fieldId).value;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment