diff --git a/applefruitmoth/static/applefruitmoth/js/applefruitmoth.js b/applefruitmoth/static/applefruitmoth/js/applefruitmoth.js index 46d2e6a8d960b1462febeee87f2bf433e115f2c5..863948924f7fa1d3cf010349f537c84bbc3beff2 100644 --- a/applefruitmoth/static/applefruitmoth/js/applefruitmoth.js +++ b/applefruitmoth/static/applefruitmoth/js/applefruitmoth.js @@ -15,39 +15,33 @@ class ApplefruitMoth 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)); } + renderWeatherstations = async function () { + console.info("Load weatherstations - start") + try { + const weatherStations = await window.lmtPoiMap(); + this.weatherStations = weatherStations; + this.weatherStationIds = weatherStations.map(ws => ws.id); - renderWeatherstations = function () { - let wsSelect = document.getElementById("weatherStationId"); - this.weatherStations.forEach((ws) => { - wsSelect.options[wsSelect.options.length] = new Option(ws["name"], ws["id"]); - }); + const select = document.getElementById('weatherStationId'); + + // 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); + }); + console.info("Load weatherstations - finished") + } catch (error) { + console.error('Error:', error); + } } getSelectedWeatherstation() { let wsSelect = document.getElementById("weatherStationId"); - console.info(wsSelect.selectedIndex); return wsSelect.options[wsSelect.selectedIndex].value != "-1" ? wsSelect.options[wsSelect.selectedIndex].value : undefined; } @@ -111,7 +105,6 @@ class ApplefruitMoth let startDate = selectedDates[0]; let endDate = selectedDates[1]; - console.info(this.getSelectedWeatherdataSourceType()); try @@ -429,11 +422,8 @@ class ApplefruitMoth } } }); - - } - } diff --git a/applefruitmoth/templates/applefruitmoth/index.html b/applefruitmoth/templates/applefruitmoth/index.html index b375f5c3552ba9ea2f8923e14666f34511fb0ec9..7d682e8bb9c1a329049dd4489d9aedeaa34e672b 100755 --- a/applefruitmoth/templates/applefruitmoth/index.html +++ b/applefruitmoth/templates/applefruitmoth/index.html @@ -52,36 +52,14 @@ 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)); @@ -102,12 +80,10 @@ }); storeLocalSettings(userSettings); - - console.info('store user settings',userSettings); + console.info("Store current user settings", userSettings); } - import ApplefruitMoth from "../static/applefruitmoth/js/applefruitmoth.js"; const applefruitMoth = new ApplefruitMoth(); @@ -133,27 +109,17 @@ inputLongitudeElement.value = selectedLongitude; } getTimezoneForPoint(selectedLatitude, selectedLongitude); - applefruitMoth.runModel(); - storeUserSettings(); + runModel() } - window.onload = (event) => { - - startDate = document.getElementById("startdate"); - endDate = document.getElementById("endDate"); - - console.info('start onload'); - console.info('id', document.getElementById("weatherStationId")); - - applefruitMoth.renderWeatherstations(); - + window.loadUserSettings = () => { let userSettings = getLocalSettings(getNameSpaced("{{ form_id }}",userSettingsFields.concat(userSettingsRadios)), false); - + console.info("User settings available when page is loaded", userSettings) + // 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) => { @@ -172,16 +138,19 @@ { displayWeatherstationInput(); } - alert('STOP') - applefruitMoth.runModel(); } - console.info('upload end'); - - + } + + window.onload = async(event) => { + startDate = document.getElementById("startdate"); + endDate = document.getElementById("endDate"); + await applefruitMoth.renderWeatherstations(); + loadUserSettings() + runModel(); } // We need to do it this way to keep the "this" reference of the class - window.runModel = function () {applefruitMoth.runModel()}; + window.runModel = function () { storeUserSettings(); applefruitMoth.runModel(); }; window.openCoordinatesMap = () => { if (inputLatitudeElement.value && inputLongitudeElement.value) { @@ -215,13 +184,11 @@ 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'); + runModel(); } window.openPoiMap = () => { @@ -338,7 +305,7 @@ <h4>Jeg vil bruke værdata</h4> <div class="radio"> <label> - <input type="radio" name="weatherdataType" id="coordinates" value="coordinates" onchange="displayCoordinatesInput();storeUserSettings();"> + <input type="radio" name="weatherdataType" id="coordinates" value="coordinates" onchange="displayCoordinatesInput();"> fra et punkt i kartet </label> <div id="input-coordinates" class="form-inline" style="margin-top: 10px; display: none;""> @@ -352,11 +319,11 @@ </div> <div class="radio"> <label> - <input type="radio" name="weatherdataType" id="weatherstation" value="weatherstation" onchange="displayWeatherstationInput();storeUserSettings();"> + <input type="radio" name="weatherdataType" id="weatherstation" value="weatherstation" onchange="displayWeatherstationInput();"> 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();"> + <select name="weatherStationId" id="weatherStationId" class="form-control" style="width: 60%;" onchange="runModel()"> <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>