Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
V
VIPSWeb
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Container registry
Model registry
Operate
Environments
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
VIPS
VIPSWeb
Commits
8b8d1a51
Commit
8b8d1a51
authored
8 months ago
by
Brita Linnestad
Browse files
Options
Downloads
Patches
Plain Diff
feat:Chenges in Rognebærmøll
parent
8979ce5e
Branches
Branches containing commit
No related tags found
1 merge request
!22
Update rognebærmøll
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
applefruitmoth/static/applefruitmoth/js/applefruitmoth.js
+211
-224
211 additions, 224 deletions
applefruitmoth/static/applefruitmoth/js/applefruitmoth.js
applefruitmoth/templates/applefruitmoth/index.html
+285
-111
285 additions, 111 deletions
applefruitmoth/templates/applefruitmoth/index.html
with
496 additions
and
335 deletions
applefruitmoth/static/applefruitmoth/js/applefruitmoth.js
+
211
−
224
View file @
8b8d1a51
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
data
set
=
{
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
:
data
set
,
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
;
This diff is collapsed.
Click to expand it.
applefruitmoth/templates/applefruitmoth/index.html
+
285
−
111
View file @
8b8d1a51
...
...
@@ -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
/3
rdparty
/
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
/3
rdparty
/
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
/3
rdparty
/
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
/3
rdparty
/
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
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment