diff --git a/applefruitmoth/static/applefruitmoth/js/applefruitmoth.js b/applefruitmoth/static/applefruitmoth/js/applefruitmoth.js
index 37f2d4cd041d008ac23a947692d5fa246405ab65..46d2e6a8d960b1462febeee87f2bf433e115f2c5 100644
--- a/applefruitmoth/static/applefruitmoth/js/applefruitmoth.js
+++ b/applefruitmoth/static/applefruitmoth/js/applefruitmoth.js
@@ -1,179 +1,231 @@
-document.addEventListener('DOMContentLoaded', setBasis());
-document.title="Rognebærmøllvarsling";
+class ApplefruitMoth
+{
+ serverUri = "https://" + settings.vipsCoremanagerServerName;
+ runUri= this.serverUri + "/models/DAYDEGREES/run";
+ weatherStationDataURL = "https://lmt.nibio.no/services/rest/vips/getdata/forecastfallback";
+ gridDataURL = "https://weather.vips.nibio.no/rest/grid/openmeteo/";
+ TIMEZONE_OSLO = "Europe/Oslo";
+ DATE_FORMAT = "YYYY-MM-DD";
+ WEATHER_DATASOURCE_TYPE_COORDINATES = "coordinates";
+ WEATHER_DATASOURCE_TYPE_WEATHERSTATION = "weatherstation";
+
+ basisTemp = "0";
+
+ constructor() {
+ this.weatherStationIds = [];
+ this.weatherStations = [];
+ window.lmtPoiMap()
+ .then(weatherStations => {
+ this.weatherStations = weatherStations;
+ this.weatherStationIds = weatherStations.map(ws => ws.id);
+
+ const select = document.getElementById('weatherStationId');
+ console.info(select);
+
+ // Add an option for each weather station
+ this.weatherStations.forEach(station => {
+ const option = document.createElement('option');
+ option.value = station.id;
+ option.textContent = station.name;
+ select.appendChild(option);
+ });
+
+ })
+ .catch(error => console.error('Error:', error));
+ }
-var stations = new Array();
-var serverUri = "https://" + settings.vipsCoremanagerServerName;
-var runUri= serverUri + "/models/DAYDEGREES/run";
+ renderWeatherstations = function () {
+ let wsSelect = document.getElementById("weatherStationId");
+ this.weatherStations.forEach((ws) => {
+ wsSelect.options[wsSelect.options.length] = new Option(ws["name"], ws["id"]);
+ });
+ }
-var emptyChart;
-var storedWeatherstation;
-
-window.onload = function() {
- setBasis();
-};
-
-
-function setBasis () {
-
- emptyChart=true;
- displayResults();
- setStartText();
-
- //let path = "https://lmt.nibio.no/services/rest/weatherstation/mapweatherstations";
- /*
- $.getJSON(path, function( mapStations ) {
-
- allStations = mapStations;
-
- allStations.sort(function(a,b) {
- return a.name.toString().localeCompare(b.name.toString());
- });
+ getSelectedWeatherstation()
+ {
+ let wsSelect = document.getElementById("weatherStationId");
+ console.info(wsSelect.selectedIndex);
+ return wsSelect.options[wsSelect.selectedIndex].value != "-1" ? wsSelect.options[wsSelect.selectedIndex].value : undefined;
+ }
+
+ getSelectedCoordinate()
+ {
+ let longitude = parseFloat(document.getElementById("longitude").value);
+ let latitude = parseFloat(document.getElementById("latitude").value);
+ return (Number.isNaN(longitude) || Number.isNaN(latitude) ? undefined : [longitude, latitude]);
+ }
+
+ getSelectedDates()
+ {
+ let startDate = document.getElementById("startdate").value;
+ let endDate = document.getElementById("enddate").value;
- for(var i=0;i<allStations.length;i++){
- stations[i]=([mapStations[i].weatherstationId, mapStations[i].name]);
+ if(!startDate)
+ {
+ let date = new Date();
+ date.setDate(date.getDate() - 7);
+ date.setDate(date.getDate());
+ startDate = date.toISOString().split('T')[0];
- }
+ document.getElementById("startdate").value = startDate;
+ }
- for (let i = 0; i < stations.length; i++ ) {
- let option = document.createElement("option");
- option.text = stations[i][1];
- option.value = stations[i][0];
- document.getElementById("weatherstation").appendChild(option);
- }
+ if(!endDate){
+ let date = new Date();
+ date.setDate(date.getDate() + 9);
+ endDate = date.toISOString().split('T')[0];
- // After populating the dropdown, get the stored weatherstation value
- storedWeatherstation = window.localStorage.getItem('weatherstation');
-
- // If a stored value exists, set it as the selected value of the dropdown
- if (storedWeatherstation) {
- document.getElementById('weatherstation').value = storedWeatherstation;
- }
-
- var startdate = window.localStorage.getItem('startdate');
-
- document.getElementById('enddate').value = moment().add(7,'days').format('YYYY-MM-DD');
-
- if (startdate) {
- document.getElementById('startdate').value = startdate;
- getBasis();
- }
- else {
- emptyChart=true;
- displayResults();
- setStartText();
- }
-
- });*/
-
-}
-
-
-function getBasis () {
+ document.getElementById("enddate").value = endDate;
+ }
+
+ return [startDate, endDate];
+
+ }
- var basisTemp = "0";
- var startTime = document.getElementById('startdate').value;
- var endTime = document.getElementById('enddate').value;
- var weatherStation = document.getElementById('weatherstationtest').value;
- var temperature = [];
+ getSelectedWeatherdataSourceType()
+ {
+ return document.getElementById("coordinates").checked ? this.WEATHER_DATASOURCE_TYPE_COORDINATES : document.getElementById("weatherstation").checked ? this.WEATHER_DATASOURCE_TYPE_WEATHERSTATION : undefined;
+ }
- var latitudeInput = document.getElementById('latitude');
- var longitudeInput = document.getElementById('longitude');
-
- var latitude = parseFloat(latitudeInput.value);
- var longitude = parseFloat(longitudeInput.value);
-
- let useLocation = false;
- let long_lat;
+ /**
+ * Calls the dayDegreemodel in the VIPS forecasting system
+ * Displays data when results are returned
+ */
+ runModel () {
+
+ let selectedDates = this.getSelectedDates();
+ let selectedWeatherStationId = this.getSelectedWeatherstation();
+ let selectedCoordinate = this.getSelectedCoordinate();
+
+ if(selectedWeatherStationId == undefined && selectedCoordinate == undefined)
+ {
+ return;
+ }
+
+ let stationName;
+
+ let startDate = selectedDates[0];
+ let endDate = selectedDates[1];
- console.info("long");
- console.info(latitude, longitude);
-
- weatherstationId = weatherStation;
+ console.info(this.getSelectedWeatherdataSourceType());
- if(latitude){
- long_lat = longitude + "_" +latitude;
- useLocation = true;
+
+ try
+ {
+ let dailyDataResponse = undefined;
+
+ if(selectedWeatherStationId != undefined && this.getSelectedWeatherdataSourceType() == this.WEATHER_DATASOURCE_TYPE_WEATHERSTATION)
+ {
+ stationName = this.weatherStations.find(ws => ws.id === Number(selectedWeatherStationId)).name;
+ // Get the hourly data for the past X days
+ dailyDataResponse = fetch(
+ this.weatherStationDataURL + "?weatherStationId=" + selectedWeatherStationId
+ + "&elementMeasurementTypes[]=TM"
+ + "&timeZone=" + this.TIMEZONE_OSLO
+ + "&startDate=" + startDate
+ + "&endDate=" + endDate
+ + "&logIntervalId=2"
+ );
+
+ }
+ else if(this.getSelectedWeatherdataSourceType() == this.WEATHER_DATASOURCE_TYPE_COORDINATES && selectedCoordinate != undefined)
+ {
+ stationName = 'valgte koordinater';
+ dailyDataResponse = fetch(
+ this.gridDataURL + "?longitude=" + selectedCoordinate[0] + "&latitude=" + selectedCoordinate[1]
+ + "&elementMeasurementTypes[]=TM"
+ + "&timeZone=" + document.getElementById("timezone").value
+ + "&startDate=" + startDate
+ + "&endDate=" + endDate
+ + "&logIntervalId=2"
+ );
+ }
+ else
+ {
+ console.error("Location not set. Aborting.")
+ return;
+ }
+ dailyDataResponse
+ .then(response => {
+ if (!response.ok) {
+ throw new Error("Response status: " + response.status);
+ }
+ return response.json();
+ })
+ .then(dailyData => {
+ this.getDaydegrees(dailyData, startDate, endDate, stationName);
+ })
+ .catch(error => console.error('Error:', error));
+
+ }
+ catch(error)
+ {
+ console.error(error.message);
+ }
}
- //window.localStorage.setItem('weatherstation', weatherStation);
- window.localStorage.setItem('startdate', startTime);
- window.localStorage.setItem('enddate', endTime);
-
- if (startTime > endTime) {
- alert("Datoen er ikke gyldig");
- return false;
- }
-
- emptyChart = false;
-
-
- if(useLocation)
- {
- $.getJSON("https://weather.vips.nibio.no/rest/grid/openmeteo/"+long_lat+"?elementMeasurementTypes[]=TM&timeZone=Europe/Oslo&logIntervalId=2&startDate="+startTime+"&endDate="+endTime, function( observations ) {
- runModel(basisTemp, observations, long_lat, startTime, endTime);
- });
- } else {
- $.getJSON("https://lmt.nibio.no/services/rest/vips/getdata/forecastfallback?weatherStationId="+weatherStation+"&elementMeasurementTypes[]=TM&logInterval=1d&startDate="+startTime+"&startTime=00&endDate="+endTime+"&endTime=23&timeZone=Europe/Oslo", function( observations ) {
- $.getJSON("https://lmt.nibio.no/services/rest/weatherstation/getstation?weatherStationId="+weatherStation, function( weatherstation ) {
- allObservations = weatherstation;
- var name = String(weatherstation.name);
- runModel(basisTemp, observations, name, startTime, endTime);
-
- });
- });
- }
-}
-
-/**
- * Calls the dayDegreemodel in the VIPS forecasting system
- * Displays data when results are returned
- */
-function runModel (basisTemp, data, name, start, end) {
+ getDaydegrees (data, start, end, name) {
+
+ let modelConfig = {
+ "loginInfo":{
+ "username":"testuser",
+ "password":"testpass"
+ },
+ "modelId":"DAYDEGREES",
+ "configParameters":{
+ "basisTemp": this.basisTemp,
+ "observations": data
+ }
+ };
- var modelConfig = {
- "loginInfo":{
- "username":"testuser",
- "password":"testpass"
- },
- "modelId":"DAYDEGREES",
- "configParameters":{
- "basisTemp": basisTemp,
- "observations": data
- }
- };
+ let request = $.ajax({
+ type:"POST",
+ url: this.runUri,
+ data: JSON.stringify(modelConfig),
+ dataType: "json",
+ contentType: "application/json; charset=utf-8",
+ })
+ .done((data, textStatus, jqXHR) => {
+ this.displayResults(data, start, end, name);
+ })
+ .fail((jqXHR, textStatus,errorThrown ) => {
+ alert( "Request failed: " + errorThrown );
+ })
+ ;
+ }
- var request = $.ajax({
- type:"POST",
- url: runUri,
- data: JSON.stringify(modelConfig),
- dataType: "json",
- contentType: "application/json; charset=utf-8",
- })
- .done(function(data, textStatus, jqXHR) {
- displayResults(data, basisTemp, name, start, end);
- })
- .fail(function( jqXHR, textStatus,errorThrown ) {
- alert( "Request failed: " + errorThrown );
- })
- ;
-}
+
+ setStartText () {
+
+ document.getElementById("textInfo").innerText = "";
+
+ let infotext = document.createElement("p");
+ infotext = "<p>Varmesum, med basistemperatur 0 °C, vert rekna ut frå middeltemperaturen 2 m over bakken for den valde vêrstasjonen. </p>";
+
+ document.getElementById("textInfo").innerHTML=infotext;
+ }
+
+
-function displayResults(data, basisTemp, name, start, end) {
+
+ displayResults (data, start, end, name) {
let date = new Array();
let series = [];
let time = new Array();
let temperature = new Array();
let forecast = new Array();
+
+ let emptyChart = false;
if(!emptyChart) {
- for (var i = 0; i < data.length; i++){
+ for (let i = 0; i < data.length; i++){
- var localTime = new Date(data[i].validTimeStart);
+ let localTime = new Date(data[i].validTimeStart);
const offset = localTime.getTimezoneOffset()
localTime= new Date(localTime.getTime() - (offset*60*1000))
@@ -205,8 +257,8 @@ function displayResults(data, basisTemp, name, start, end) {
document.getElementById("textInfo").innerText = "";
let infotext = document.createElement("p");
- var text1 = "<p>Varmesum, med basistemperatur 0 °C, rekna ut frå middeltemperaturen 2 m over bakken for den valde vêrstasjonen. </p>";
- var text2 = "<p><b>" + lastValue + "</b> døgngrader\n\n</p>";
+ let text1 = "<p>Varmesum, med basistemperatur 0 °C, rekna ut frå middeltemperaturen 2 m over bakken for den valde vêrstasjonen. </p>";
+ let text2 = "<p><b>" + lastValue + "</b> døgngrader\n\n</p>";
infotext = text1 + text2;
@@ -222,15 +274,14 @@ function displayResults(data, basisTemp, name, start, end) {
}
}
- var chartExist = Chart.getChart("daydegreesum");
+ let chartExist = Chart.getChart("daydegreesum");
if(chartExist != undefined){
chartExist.destroy();
}
- var ctx = document.getElementById("daydegreesum").getContext('2d');
+ let ctx = document.getElementById("daydegreesum").getContext('2d');
-
series[0] = {
label: "Døgngrader",
data: temperature,
@@ -253,16 +304,16 @@ function displayResults(data, basisTemp, name, start, end) {
spanGaps: true
};
- var data = {
+ let dataset = {
labels: time,
datasets: series
};
- var text = String("Varmesum for " + name + " i perioden " + start + " til " + end );
+ let text = String("Varmesum for " + name + " i perioden " + start + " til " + end );
new Chart(ctx, {
type: 'line',
- data: data,
+ data: dataset,
options: {
scales: {
x: {
@@ -378,76 +429,12 @@ function displayResults(data, basisTemp, name, start, end) {
}
}
});
+
+
-}
-
-function setStartText (){
-
- console.info('settext');
-
- document.getElementById("textInfo").innerText = "";
-
- let infotext = document.createElement("p");
- infotext = "<p>Varmesum, med basistemperatur 0 °C, vert rekna ut frå middeltemperaturen 2 m over bakken for den valde vêrstasjonen. </p>";
-
- document.getElementById("textInfo").innerHTML=infotext;
-
-}
+ }
-function useWeatherstation() {
- document.getElementById('weatherstationDiv').style.display = 'block';
- let path = "https://lmt.nibio.no/services/rest/weatherstation/mapweatherstations";
-
- $.getJSON(path, function( mapStations ) {
-
- allStations = mapStations;
-
- allStations.sort(function(a,b) {
- return a.name.toString().localeCompare(b.name.toString());
- });
-
- for(var i=0;i<allStations.length;i++){
- stations[i]=([mapStations[i].weatherstationId, mapStations[i].name]);
-
- }
-
- for (let i = 0; i < stations.length; i++ ) {
- let option = document.createElement("option");
- option.text = stations[i][1];
- option.value = stations[i][0];
- document.getElementById("weatherstationtest").appendChild(option);
- }
-
- console.info(stations);
-
- // After populating the dropdown, get the stored weatherstation value
- storedWeatherstation = window.localStorage.getItem('weatherstation');
-
- // If a stored value exists, set it as the selected value of the dropdown
- if (storedWeatherstation) {
- document.getElementById('weatherstationtest').value = storedWeatherstation;
- }
-
- var startdate = window.localStorage.getItem('startdate');
-
- document.getElementById('enddate').value = moment().add(7,'days').format('YYYY-MM-DD');
-
- if (startdate) {
- document.getElementById('startdate').value = startdate;
- }
- else {
- emptyChart=true;
- displayResults();
- setStartText();
- }
-
- });
-
-}
-
-function useCoordinates () {
- console.info('lengde-bredde');
}
-
+export default ApplefruitMoth;
diff --git a/applefruitmoth/templates/applefruitmoth/index.html b/applefruitmoth/templates/applefruitmoth/index.html
index 28de0ba67e125749eee1c543f79a87d9b8235d64..b375f5c3552ba9ea2f8923e14666f34511fb0ec9 100755
--- a/applefruitmoth/templates/applefruitmoth/index.html
+++ b/applefruitmoth/templates/applefruitmoth/index.html
@@ -24,6 +24,261 @@
{% load i18n %}
{% block title%}{% trans "Apple fruit moth forecasting" %}{%endblock%}
+
+{% block customJS %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.0.2"></script>
+<script type="text/javascript" src="{% static "js/3rdparty/ol.js" %}"></script>
+<script type="text/javascript" src="{% url "javascript-catalog" %}"></script>
+<script type="text/javascript" src="{% url "views.settings_js" %}"></script>
+<script type="text/javascript" src="{% static "js/util.js" %}"></script>
+<script type="text/javascript" src="{% static "applefruitmoth/js/map.js" %}"></script>
+<script type="text/javascript" src="{% static "applefruitmoth/js/applefruitmoth.js" %}"></script>
+<script src="{% static "js/3rdparty/moment-with-locales.min.js" %}"></script>
+<script type="text/javascript">
+
+ $(document).ready(function() {
+
+
+ initMap("appleFruitMothForecastMap","{{settings.MAP_ATTRIBUTION|safe}}");
+
+ });
+</script>
+<script type="module">
+ import MapModal from 'https://logic.testvips.nibio.no/js/mapModal.js';
+
+ const selectWeatherstationElement = document.getElementById("weatherStationId");
+
+
+
+ window.lmtPoiMap = function() {
+ /*
+ return fetch("https://lmt.nibio.no/services/rest/weatherstation/mapweatherstations")
+ .then(response => response.json())
+ .then(mapStations => {
+ mapStations.sort((a, b) => a.name.toString().localeCompare(b.name.toString()));
+ return mapStations.map(station => ({ "id": station.weatherstationId, "name": station.name }));
+ })
+ .catch(error => console.error('Error:', error));
+ */
+
+ let selectedId = 11; //document.getElementById(weatherStationId).value;
+ const optionIndex = Array.from(selectWeatherstationElement.options).findIndex(option => option.value == selectedId);
+ if (optionIndex !== -1) {
+ selectWeatherstationElement.selectedIndex = optionIndex;
+ };
+
+ return fetch("https://lmt.nibio.no/services/rest/weatherstation/mapweatherstations")
+ .then(response => response.json())
+ .then(mapStations => {
+ mapStations.sort((a, b) => a.name.toString().localeCompare(b.name.toString()));
+
+ return mapStations.map(station => {
+
+ if(station.weatherstationId == optionIndex) {
+ // If they match, return the optionIndex
+ return { "id": optionIndex, "name": station.name };
+ } else {
+ // If they don't match, return the id as weatherstationId
+ return { "id": station.weatherstationId, "name": station.name };
+ }
+ })})
+ .catch(error => console.error('Error:', error));
+
+ }
+
+ window.storeUserSettings = function() {
+ let userSettings = {};
+ userSettingsFields.forEach((fieldId) => {
+ userSettings[`{{ form_id }}.${fieldId}`] = document.getElementById(fieldId).value;
+ });
+ userSettingsRadios.forEach((radioName) => {
+ document.getElementsByName(radioName).forEach((radioElement) => {
+ if(radioElement.checked)
+ {
+ userSettings[`{{ form_id }}.${radioName}`] = radioElement.value;
+ }
+ });
+
+ });
+ storeLocalSettings(userSettings);
+
+ console.info('store user settings',userSettings);
+ }
+
+
+
+ import ApplefruitMoth from "../static/applefruitmoth/js/applefruitmoth.js";
+ const applefruitMoth = new ApplefruitMoth();
+
+ const inputLatitudeElement = document.getElementById("latitude");
+ const inputLongitudeElement = document.getElementById("longitude");
+
+ const userSettingsFields = ["latitude","longitude","timezone","weatherStationId"];
+ const userSettingsRadios = ["weatherdataType","radioDays"];
+
+ let poiIdList = []
+ let selectedPoint = null;
+ let selectedFeature = undefined;
+
+ let startDate;
+ let endDate;
+
+ function selectCoordinates(coordinatesData) {
+ const selectedLatitude = coordinatesData ? coordinatesData.latitude : undefined;
+ const selectedLongitude = coordinatesData ? coordinatesData.longitude : undefined;
+
+ if(selectedLatitude && selectedLongitude) {
+ inputLatitudeElement.value = selectedLatitude;
+ inputLongitudeElement.value = selectedLongitude;
+ }
+ getTimezoneForPoint(selectedLatitude, selectedLongitude);
+ applefruitMoth.runModel();
+ storeUserSettings();
+ }
+
+ window.onload = (event) => {
+
+ startDate = document.getElementById("startdate");
+ endDate = document.getElementById("endDate");
+
+ console.info('start onload');
+ console.info('id', document.getElementById("weatherStationId"));
+
+ applefruitMoth.renderWeatherstations();
+
+ let userSettings = getLocalSettings(getNameSpaced("{{ form_id }}",userSettingsFields.concat(userSettingsRadios)), false);
+
+ // Settings found, render form and run model
+ if(Object.keys(userSettings).length > 0)
+ {
+ userSettingsFields.forEach((fieldId) =>{
+ console.info("FieldId " + fieldId, userSettings[`{{ form_id }}.${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);
+ });
+ });
+
+ if(document.getElementById("coordinates").checked)
+ {
+ displayCoordinatesInput();
+ getTimezoneForPoint(inputLatitudeElement.value, inputLongitudeElement.value);
+ }
+ else
+ {
+ displayWeatherstationInput();
+ }
+ alert('STOP')
+ applefruitMoth.runModel();
+ }
+ console.info('upload end');
+
+
+ }
+
+ // We need to do it this way to keep the "this" reference of the class
+ window.runModel = function () {applefruitMoth.runModel()};
+
+ window.openCoordinatesMap = () => {
+ if (inputLatitudeElement.value && inputLongitudeElement.value) {
+ selectedPoint = 1;
+ selectedFeature = {
+ "type": "FeatureCollection", "features": [
+ {
+ "type": "Feature",
+ "geometry": {
+ "type": "Point",
+ "coordinates": [parseFloat(inputLongitudeElement.value), parseFloat(inputLatitudeElement.value)]
+ },
+ "properties": {
+ "pointOfInterestId": selectedPoint,
+ }
+ }]
+ };
+ } else {
+ selectedPoint = undefined;
+ selectedFeature = undefined;
+ }
+
+ 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);
+ }
+
+ function selectPoi(poiData)
+ {
+ const selectedId = poiData ? poiData.pointOfInterestId : undefined;
+ if (selectedId) {
+ const optionIndex = Array.from(selectWeatherstationElement.options).findIndex(option => option.value == selectedId);
+ console.info(opitionIndex);
+ if (optionIndex !== -1) {
+ selectWeatherstationElement.selectedIndex = optionIndex;
+ }
+ }
+ applefruitMoth.runModel();
+ console.info('select poi');
+ }
+
+ window.openPoiMap = () => {
+ fetch("https://lmt.nibio.no/services/rest/weatherstation/ipmdecisions", {
+ method: 'GET'
+ })
+ .then(response => response.json())
+ .then(geoJson => {
+ // FILTER with only Ids from the Cydia station list
+ let filteredFeatures = geoJson["features"]
+ .filter(feature => applefruitMoth.weatherStationIds.indexOf(feature.id) >= 0)
+ .map(feature => {
+ feature["properties"]["pointOfInterestName"] = feature["properties"]["name"];
+ feature["properties"]["pointOfInterestId"] = feature["id"];
+ feature["properties"]["pointOfInterestTypeId"] = 1; // Type = Weather station
+ return feature;
+ });
+ geoJson["features"] = filteredFeatures;
+ 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 = applefruitMoth.getSelectedWeatherstation();
+ poiMapInstance.openModal(selectedPoiId);
+ })
+ .catch(error => {
+ console.error('Unable to retrieve weatherstation geojson', error);
+ });
+ }
+
+ window.displayWeatherstationInput = function () {
+ document.getElementById("weatherstation").checked = true;
+ document.getElementById('input-weatherstation').style.display="block";
+ document.getElementById('input-coordinates').style.display="none";
+ }
+
+ window.displayCoordinatesInput = function () {
+ document.getElementById("coordinates").checked = true;
+ document.getElementById('input-weatherstation').style.display="none";
+ document.getElementById('input-coordinates').style.display="block";
+ selectWeatherstationElement.selectedIndex = 0;
+ }
+
+ const getTimezoneForPoint = (latitude, longitude) => {
+ getLocationInformation(latitude, longitude).then(locationInfo => {
+ document.getElementById("timezone").value = locationInfo.timezone;
+ document.getElementById("gridPointInfo").innerHTML = `<b>{% trans "Location name" %}</b> ${locationInfo.location}<br>
+ <b>{% trans "Latitude" %}</b> ${locationInfo.latitude}<br>
+ <b>{% trans "Longitude" %}</b> ${locationInfo.longitude}<br>
+ <b>{% trans "Timezone" %}</b> ${locationInfo.timezone}`
+ });
+ }
+
+
+</script>
+{% endblock %}
+
+
{% block content %}
<h1>{% trans "Apple fruit moth forecasting" %}</h1>
<div class="singleBlockContainer">
@@ -78,52 +333,55 @@
<div style="font-size:75%;" id="setBasis"></div>
<div class="col-md-4">
+
<div class="form-group">
-
- <p>Jeg vil bruke værdata</p>
+ <h4>Jeg vil bruke værdata</h4>
<div class="radio">
<label>
- <input type="radio" name="weatherdataType" id="coordinates" value="coordinates" checked onchange="displayCoordinatesInput()">
- for et spesifikt punkt (koordinater)
+ <input type="radio" name="weatherdataType" id="coordinates" value="coordinates" onchange="displayCoordinatesInput();storeUserSettings();">
+ fra et punkt i kartet
</label>
- <div id="input-coordinates">
- <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 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> Velg i kart</button>
</div>
<div id="coordinates-map" class="map-modal"></div>
</div>
- </div>
<div class="radio">
- <label>
- <input type="radio" name="weatherdataType" id="weatherstation" value="weatherstation" onchange="displayWeatherstationInput()">
- fra en værstasjon
- </label>
- <br>
- <div class="form-group" id="weatherstationDiv" style="display: none;">
- <label for="weatherstation">Værstasjon</label>
- <select id="weatherstationtest" class="form-control"></select>
- </div>
+ <label>
+ <input type="radio" name="weatherdataType" id="weatherstation" value="weatherstation" onchange="displayWeatherstationInput();storeUserSettings();">
+ fra en værstasjon
+ </label>
+ <div id="input-weatherstation" class="form-inline" style="margin-top: 10px; display: none;">
+ <select name="weatherStationName" id="weatherStationId" class="form-control" style="width: 60%;" onchange="runModel();storeUserSettings();">
+ <option value="-1">-- 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> 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>
+
+
<br>
<div class="form-group">
<label for="startdate">Dato for full blom i rogn</label>
- <input type="date" id="startdate" class="form-control">
+ <input type="date" id="startdate" class="form-control" onchange="runModel()">
</div>
<div class="form-group">
<label for="enddate">Sluttdato, med prognose 9 døgn fram i tid</label>
- <input type="date" id="enddate" class="form-control">
+ <input type="date" id="enddate" class="form-control" onchange="runModel()">
</div>
-
- <br>
- <div class="form-group">
- <button type="button" class="btn btn-primary" onclick="getBasis(this)">Beregn</button>
- <br><br><br>
- </div>
-
</div>
+ </div>
+
<div class="col-md-8">
<div class="col-md-2"></div>
<div class="col-md-9">
@@ -182,87 +440,3 @@
</style>
{% endblock %}
-{% block customJS %}
-<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.0.2"></script>
-<script type="text/javascript" src="{% static "js/3rdparty/ol.js" %}"></script>
-<script type="text/javascript" src="{% url "javascript-catalog" %}"></script>
-<script type="text/javascript" src="{% url "views.settings_js" %}"></script>
-<script type="text/javascript" src="{% static "js/util.js" %}"></script>
-<script type="text/javascript" src="{% static "applefruitmoth/js/map.js" %}"></script>
-<script type="text/javascript" src="{% static "applefruitmoth/js/applefruitmoth.js" %}"></script>
-<script src="{% static "js/3rdparty/moment-with-locales.min.js" %}"></script>
-<script type="text/javascript">
-
- $(document).ready(function() {
-
-
- initMap("appleFruitMothForecastMap","{{settings.MAP_ATTRIBUTION|safe}}");
-
- });
-</script>
-<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 selectWeatherstationElement = document.getElementById("weatherStationId");
- let poiIdList = []
-
- let selectedPoint = null;
- let selectedFeature = 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;
- }
- }
-
- window.openCoordinatesMap = () => {
- if (inputLatitudeElement.value && inputLongitudeElement.value) {
- selectedPoint = 1;
- selectedFeature = {
- "type": "FeatureCollection", "features": [
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [parseFloat(inputLongitudeElement.value), parseFloat(inputLatitudeElement.value)]
- },
- "properties": {
- "pointOfInterestId": selectedPoint,
- }
- }]
- };
- } else {
- selectedPoint = undefined;
- selectedFeature = undefined;
- }
-
- // 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);
- console.info("open map");
- }
-
- window.displayCoordinatesInput = (id) => {
- document.getElementById("coordinates").checked = true;
- document.getElementById('weatherstationDiv').style.display = 'none';
- document.getElementById('input-coordinates').style.display="block";
- }
-
- window.displayWeatherstationInput = (id) => {
- document.getElementById('weatherstationDiv').style.display = 'block';
- document.getElementById('input-coordinates').style.display="block";
- useWeatherstation();
- }
-</script>
-{% endblock %}
\ No newline at end of file