Skip to content

Commit

Permalink
Start using new endpoints for zonal and legacy statistics (#9)
Browse files Browse the repository at this point in the history 
* issue #7: Implement SNODAS Zonal Values - Doy Range query

* issue #7: Added date range query; Changing elev range isn't working; Need to add event listener

* issue #7: Now sending selected elev interval

* issue #8: Updated linkend strings for both queryInits to point to the new endpoint with the correct parameters.

* issue #7: Update query names per @jduh request
  • Loading branch information
@lbross
lbross authored Jul 19, 2024
1 parent 91b8ffa commit 5ece649
Showing 1 changed file with 128 additions and 10 deletions.
138 changes: 128 additions & 10 deletions webroot/js/snodas_map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,9 +236,11 @@ var awdb_select = '<tr><th>Search</th><td><input type="search" id="awdb-filter"
var pp_table_html = '<table class="table table-borderless mb-3 border" id="snodas-pourpoint-table"><tbody>' + awdb_select + '<tr><th scope="row" class="pourpoint-table" >AWDB ID</th><td id="snodas-pourpoint-awdb-id"></td></tr><tr><th scope="row">Name</th><td id="snodas-pourpoint-name"></td></tr></tbody></table>';
var date_html = 'Query Date Range<div class="input-group input-daterange mb-3" id="snodas-range-query-date"><input type="text" class="input-sm form-control" id="snodas-range-query-start" name="start"><div class="input-group-prepend input-group-append"><div class="input-group-text">to</div></div><input type="text" class="input-sm form-control" id="snodas-range-query-end" name="end"></div>';
var doy_html = 'Query Date<div id="snodas-doy-query"><div class="input-group input-daterange mb-3" id="snodas-doy-query-doy"><input type="text" class="input-sm form-control" id="snodas-doy-query-doy1" name="start"></div><select class="form-control" id="snodas-doy-query-years-start"></select>to<select class="form-control" id="snodas-doy-query-years-end"></select></div>';
var elevation_html = 'Elevation interval (feet)<select class="form-control" id="snodas-elevation-band-step-ft"></select>';
var variables_html = 'SNODAS Variable:<select class="form-control" id="snodas-query-variable"><option value="depth">Snow Depth</option><option value="swe" selected>Snow Water Equivalent</option><option value="runoff">Runoff</option><option value="sublimation">Sublimation</option><option value="sublimation_blowing">Sublimation (Blowing)</option><option value="precip_solid">Precipitation (Solid)</option><option value="precip_liquid">Precipitation (Liquid)</option><option value="average_temp">Average Temperature</option></select>';
var regression = 'Forecast period:<select class="form-control" id="snodas-query-month-start"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4" selected>April</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select>to<select class="form-control" id="snodas-query-month-end"><option value="1">January</option><option value="2">February</option><option value="3">March</option><option value="4">April</option><option value="5">May</option><option value="6">June</option><option value="7" selected>July</option><option value="8">August</option><option value="9">September</option><option value="10">October</option><option value="11">November</option><option value="12">December</option></select>';
var submit = '<a url="https://api.snodas.geog.pdx.edu/" role="button" class="btn btn-success disabled" id="snodas-query-btn" aria-disabled="true">Submit Query</a>';
var formatCsv = '&format=csv';

function pp_table_init() {
var x = document.getElementById("awdb-select");
Expand Down Expand Up @@ -293,11 +295,58 @@ query_selector.add_query(

var linkEnd = null;
if (is_polygon && urlParams.startDate && urlParams.endDate && urlParams.pourpoint_id) {
linkEnd = 'query/pourpoint/'
+ 'polygon' + '/'
linkEnd = 'pourpoints/'
+ urlParams.pourpoint_id + '/'
+ urlParams.startDate + '/'
+ urlParams.endDate + '/';
+ 'stats/date-range?'
+ 'start_date=' + urlParams.startDate
+ '&end_date=' + urlParams.endDate
+ formatCsv;
}

if (linkEnd) {
queryBtn.setAttribute('href', queryBtn.getAttribute('url') + linkEnd);
L.DomUtil.removeClass(queryBtn, 'disabled');
queryBtn.setAttribute('aria-disabled', false);
return true;
}

queryBtn.removeAttribute('href');
L.DomUtil.addClass(queryBtn, 'disabled');
queryBtn.setAttribute('aria-disabled', true);
return false;
},
);

query_selector.add_query(
'SNODAS Elev-Zonal SWE - Date Range',
pp_table_html + date_html + elevation_html + submit,
function() {
pp_table_init();
date_range_init();
elevBand_init();
},
function() {
// validate
var queryBtn = document.getElementById('snodas-query-btn');
var pourpointTable = document.getElementById('snodas-pourpoint-table');
var elevBandSelect = document.getElementById('snodas-elevation-band-step-ft');
var urlParams = {};

urlParams['startDate'] = fmtDate($('#snodas-range-query-date').data("datepicker").pickers[0].getDate());
urlParams['endDate'] = fmtDate($('#snodas-range-query-date').data("datepicker").pickers[1].getDate());
urlParams['pourpoint_id'] = pourpointTable.getAttribute('pourpoint_id');
urlParams['elevation_band_step_ft'] = elevBandSelect.options[elevBandSelect.selectedIndex].value;
is_polygon = pourpointTable.getAttribute('is_polygon') === 'true';

var linkEnd = null;
if (is_polygon && urlParams.startDate && urlParams.endDate && urlParams.pourpoint_id && urlParams.elevation_band_step_ft) {
linkEnd = 'pourpoints/'
+ urlParams.pourpoint_id + '/'
+ 'zonal-stats/date-range?products=swe'
+ '&start_date=' + urlParams.startDate
+ '&end_date=' + urlParams.endDate
+ '&elevation_band_step_ft=' + urlParams.elevation_band_step_ft
+ formatCsv;
}

if (linkEnd) {
Expand Down Expand Up @@ -338,12 +387,65 @@ query_selector.add_query(

var linkEnd = null;
if (is_polygon && urlParams.day && urlParams.month && urlParams.startyear && urlParams.endyear && urlParams.pourpoint_id) {
linkEnd = 'query/pourpoint/'
+ 'polygon' + '/'
linkEnd = 'pourpoints/'
+ urlParams.pourpoint_id + '/'
+ zfill(urlParams.month, 2) + '-' + zfill(urlParams.day, 2) + '/'
+ urlParams.startyear + '/'
+ urlParams.endyear + '/';
+ 'stats/doy?'
+ '&month=' + urlParams.month
+ '&day=' + urlParams.day
+ '&start_year=' + urlParams.startyear
+ '&end_year=' + urlParams.endyear
+ formatCsv;
}

if (linkEnd) {
queryBtn.setAttribute('href', queryBtn.getAttribute('url') + linkEnd);
L.DomUtil.removeClass(queryBtn, 'disabled');
queryBtn.setAttribute('aria-disabled', false);
return true;
}

queryBtn.removeAttribute('href');
L.DomUtil.addClass(queryBtn, 'disabled');
queryBtn.setAttribute('aria-disabled', true);
return false;
},
);

query_selector.add_query(
'SNODAS Elev-Zonal SWE - Doy Range',
pp_table_html + doy_html + elevation_html + submit,
function() {
// init
pp_table_init();
doy_init();
elevBand_init();
},
function() {
var queryBtn = document.getElementById('snodas-query-btn');
var pourpointTable = document.getElementById('snodas-pourpoint-table');
var elevBandSelect = document.getElementById('snodas-elevation-band-step-ft');
var urlParams = {};

doy = document.getElementById('snodas-doy-query-doy1').value.split(' ');
urlParams['day'] = doy[0]
urlParams['month'] = month_name_to_num(doy[1])
urlParams['startyear'] = document.getElementById('snodas-doy-query-years-start').value;
urlParams['endyear'] = document.getElementById('snodas-doy-query-years-end').value;
urlParams['pourpoint_id'] = pourpointTable.getAttribute('pourpoint_id'); // validate
urlParams['elevation_band_step_ft'] = elevBandSelect.options[elevBandSelect.selectedIndex].value;
is_polygon = pourpointTable.getAttribute('is_polygon') === 'true';

var linkEnd = null;
if (is_polygon && urlParams.day && urlParams.month && urlParams.startyear && urlParams.endyear && urlParams.pourpoint_id && urlParams.elevation_band_step_ft) {
linkEnd = 'pourpoints/'
+ urlParams.pourpoint_id + '/'
+ 'zonal-stats/doy?products=swe'
+ '&month=' + urlParams.month
+ '&day=' + urlParams.day
+ '&start_year=' + urlParams.startyear
+ '&end_year=' + urlParams.endyear
+ '&elevation_band_step_ft=' + urlParams.elevation_band_step_ft
+ formatCsv;
}

if (linkEnd) {
Expand Down Expand Up @@ -637,9 +739,25 @@ function doy_init() {
}

$("#calendar-btn").click(function() {
$('#snodas-tile-date input').datepicker('show');
$('#snodas-tile-date input').datepicker('show');
});

function elevBand_init() {
var elevBandSelect = document.getElementById('snodas-elevation-band-step-ft');
const arrIntervals = ["250", "500", "1000"];
for (let i = 0; i < arrIntervals.length; i++) {
var opt = document.createElement('option');
opt.value = arrIntervals[i];
opt.innerHTML = arrIntervals[i];
elevBandSelect.appendChild(opt);
}
elevBandSelect.value = arrIntervals[2];

elevBandSelect.addEventListener('change', function(event) {
query_selector.validate();
});
}

//
function sizeLayerControl() {
$(".leaflet-control-layers").css("max-height", $("#map").height() - 50);
Expand Down

0 comments on commit 5ece649

Please sign in to comment.