Skip to content
Snippets Groups Projects
Commit 8b8d1a51 authored by Brita Linnestad's avatar Brita Linnestad
Browse files

feat:Chenges in Rognebærmøll

parent 8979ce5e
Branches
No related tags found
1 merge request!22Update rognebærmøll
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;
......@@ -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>&nbsp;&nbsp;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>&nbsp;&nbsp;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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment