<html>
<head>
<title>Soil Moisture Date Downloader</title>
<!--<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">-->
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var min_date = new Date(2015, 9-1, 1); //September 1, 2015
var max_date = "+0d"; //Today (zero days from today)
var depths = new Array(5, 25, 60);
$(document).ready(function() {
// create checkboxes for the depths
for(var i = 0; i < depths.length; i++) {
var container = $("#pick_depths");
var n = depths[i].toString() + 'cm';
var v = depths[i];
$('<input />', { type: 'checkbox', id: n, value: v, checked: 'checked' }).appendTo(container);
$('<label />', { 'for': n, text: n }).appendTo(container);
}
$("#outputs").tabs();
var startdt = $("#datepicker_start").datepicker({
dateFormat: "yy-mm-dd",
//minDate: new Date(2015, 9-1, 1),
minDate: min_date,
//maxDate: "+0D",
maxDate: max_date,
changeMonth: true,
changeYear: true,
onSelect: function(dt,inst){
$("#blah").text(dt);
enddt.datepicker("option", "minDate", dt);
}
});
var enddt = $("#datepicker_end").datepicker({
dateFormat: "yy-mm-dd",
//minDate: new Date(2015, 9-1, 1),
//maxDate: "+0D",
minDate: min_date,
maxDate: max_date,
changeMonth: true,
changeYear: true,
onSelect: function(dt,inst){
$("#blah2").text(dt);
startdt.datepicker("option", "maxDate", dt);
//$(this).change();
}
});
startdt.datepicker("setDate", min_date);
enddt.datepicker("setDate", max_date);
function make_date_array() {
var start_date = startdt.datepicker("getDate");
var end_date = enddt.datepicker("getDate");
var tmp_date = start_date;
var date_array = new Array();
while(tmp_date <= end_date) {
//
date_array.push(new Date(tmp_date));
tmp_date.setDate(tmp_date.getDate() + 1);
}
return date_array;
}
function vwc_raster_url(dt,depth) {
// dt: Date object
// depth: int
var dt_str = dt.toISOString().split('T')[0];
var url = 'http://soilmapnik.hpc.okstate.edu/' + dt_str + '/vwc/' + depth + '/raster.tif';
return url;
}
function vwc_filename(dt,depth) {
var dt_str = dt.toISOString().split('T')[0];
return 'raster_'+dt_str+'_vwc_'+depth+'cm.tif';
}
function make_link(url) {
return '<a href="'+url+'">'+url+'</a>';
}
function make_curl(url,file) {
return 'curl -o '+file+' '+url;
}
function make_wget(url,file) {
return 'wget -O - '+url+' > '+file;
}
$("#generate_urls").click(function(){
$("#urls").html(""); // clear existing urls
$("#curl").html("");
$("#wget").html("");
$("#download_list").html("");
var selected_dates = make_date_array();
var selected_depths = [];
for(var i=0; i<depths.length; i++) {
var elid = depths[i].toString() + 'cm';
document.getElementById(elid).checked && selected_depths.push(depths[i]);
}
/* Use all depths if no depths were selected */
if(selected_depths.length == 0) {
selected_depths = depths.slice(); // copy the array
}
for(var i=0; i<selected_depths.length; i++) {
for(var j=0; j<selected_dates.length; j++) {
var u = vwc_raster_url(selected_dates[j], selected_depths[i]);
var f = vwc_filename(selected_dates[j], selected_depths[i]);
var link = make_link(u);
var curl = make_curl(u,f);
var wget = make_wget(u,f);
$("#urls").append(link + '<br/>\n');
$("#curl").append(curl + '<br/>\n');
$("#wget").append(wget + '<br/>\n');
}
}
$("#download_list").append('<a href="data:text/plain;charset=UTF-8,'+encodeURIComponent($("#urls").text())+'" download="vwc_links.txt">Links</a><br/>');
$("#download_list").append('<a href="data:text/plain;charset=UTF-8,'+encodeURIComponent($("#curl").text())+'" download="vwc_curl.txt">curl Commands</a><br/>');
$("#download_list").append('<a href="data:text/plain;charset=UTF-8,'+encodeURIComponent($("#wget").text())+'" download="vwc_wget.txt">wget Commands</a><br/>');
});
});
</script>
</head>
<body>
<h1>Soil Moisture Date Downloader</h1>
<!--<p>Date: <input type="text" id="datepicker"></p>
<p> <br/><br/></p>-->
<label for="pick_depths">Select depths</label>
<div id="pick_depths">
<!--<input type="checkbox" name="5cm" id="5cm" value="5" checked="checked"><label for="5cm">5cm</label>
<input type="checkbox" name="25cm" id="25cm" value="25" checked="checked"><label for="25cm">25cm</label>
<input type="checkbox" name="60cm" id="60cm" value="60" checked="checked"><label for="60cm">60cm</label>-->
</div>
<br/>
<div id="pick_dates" style="overflow:auto;">
<div id="pick_start_date" style="float:left;">
<label for="datepicker_start">Select start date</label>
<div id="datepicker_start"></div>
<br/>
</div>
<div id="pick_end_date" style="float:left;">
<label for="datepicker_end">Select end date</label>
<div id="datepicker_end"></div>
<br/>
</div>
</div>
<button id="generate_urls">Generate URLs</button>
<br/>
<p><span id="blah"></span></p>
<p><span id="blah2"></span></p>
<div id="outputs">
<ul>
<li><a href="#urls">Links</a></li>
<li><a href="#curl">curl Commands</a></li>
<li><a href="#wget">wget Commands</a></li>
<li><a href="#download_list">Download List</a></li>
</ul>
<div id="urls"></div>
<div id="curl"></div>
<div id="wget"></div>
<div id="download_list"></div>
</div>
</body>
</html>
