Commit 670c4118 authored by Bruce Flynn's avatar Bruce Flynn

Make HTML form more gooder

parent 8c8e2bd4
Pipeline #1535 passed with stage
in 2 minutes and 46 seconds
//
// Change this to point to the root location of the API, e.g.:
//
// http://amrc.ssec.wisc.edu/aws-api
//
API_URL_BASE = 'http://localhost:5010';
$(function () {
'use strict';
// Change this to point to the location of the API
var API_URL_BASE = 'http://localhost:5010';
function apiUrl(part, params) {
var qs = params ? $.param(params) : '';
var url = API_URL_BASE + part + '?' + qs;
console.debug(url);
console.debug('API URL:', url);
return url;
}
......@@ -17,7 +22,7 @@ $(function () {
var dateFormat = 'YYYY-MM-DD';
// selected values
// Selected values, updated by `formChanged`
var form = {
start: defaultStart,
end: defaultEnd,
......@@ -33,7 +38,7 @@ $(function () {
var $start = $('#start-picker');
var $end = $('#end-picker');
// initialize the start/end datepicker-s
// Initialize the start/end datepicker-s
var opts = {
format: dateFormat,
allowInputToggle: true,
......@@ -45,6 +50,16 @@ $(function () {
$end.datetimepicker(opts);
$end.data('DateTimePicker').date(defaultEnd);
$("input[name=show-api-url]").on('change', function(event) {
event.preventDefault();
var $elem = $(event.currentTarget);
if ($elem.is(':checked')) {
$('#current-api-url').show(100);
} else {
$('#current-api-url').hide(100);
}
});
// Setup event handlers
// handle the datepicker changes same as form changes
$start.on('dp.change', formChanged);
......@@ -54,14 +69,16 @@ $(function () {
$form.on('submit', submit);
// fetch stations from server based on selected dates and use values
// Fetch stations from server based on selected dates and use values
// to reset station select box
function refreshStations() {
if (!form.start.isValid() || !form.end.isValid()) {
return;
}
// remove all existing stations
// Remove all existing stations
$stations.find('option').remove();
// Fetch stations based on currently selected times
var params = {
start: form.start.format(dateFormat),
end: form.end.format(dateFormat)
......@@ -87,7 +104,7 @@ $(function () {
// start/end are handled separately
function formChanged() {
// only set start/end if the values are valid
// Only set start/end if the values are valid
var dateChanged = false;
var value = $start.data('DateTimePicker').date();
if (value.isValid() && !form.start.isSame(value)) {
......@@ -95,30 +112,33 @@ $(function () {
form.start = value;
dateChanged = true;
}
var value = $end.data('DateTimePicker').date();
value = $end.data('DateTimePicker').date();
if (value.isValid() && !form.end.isSame(value)) {
console.debug('end changed', value.format());
form.end = value;
dateChanged = true;
}
if (dateChanged) {
// refresh stations for every form change
// Refresh stations for every form change where one of the timestamps
// changed.
refreshStations();
}
// the following values are always valid becasue they're not based
// The following values are always valid becasue they're not based
// user input
form.output = $('input[name=output]:checked').val();
form.type = $('input[name=type]:checked').val();
form.stations = $stations.val();
form.symbols = $symbols.val();
// only enable the submit button if the form is valid
// Only enable the submit button if the form is valid
if (formValid()) {
$('button[type=submit]').prop('disabled', false);
} else {
$('button[type=submit]').prop('disabled', true);
}
$('#current-api-url').text(decodeURIComponent(makeFormUrl()));
}
function formValid() {
......@@ -130,9 +150,7 @@ $(function () {
);
}
// construct current API URL and redirect to API
function submit(event) {
event.preventDefault();
function makeFormUrl() {
var params = {
stations: form.stations.join('|'),
symbols: form.symbols.join('|'),
......@@ -140,9 +158,22 @@ $(function () {
end: form.end.format(dateFormat) + 'T23:59:59Z',
type: form.type,
};
return apiUrl('/data.' + form.output, params);
}
// Construct current API URL and redirect to API
function submit(event) {
event.preventDefault();
// causes page to reload to provided API URL
window.location = apiUrl('/data.' + form.output, params);
window.location = makeFormUrl();
}
//
// Load initial set of stations based on default start/end when the page
// is finished loading.
//
$(document).ready(refreshStations);
$(document).ready(function() {
$('#api-url').text(API_URL_BASE);
})
});
......@@ -18,10 +18,15 @@
</header>
<form id="form" class="row">
<div id="alerts" class="col-sm-12"></div>
<div class="col-sm-12">
<div id="stations-alert" class="alert alert-warning" role="alert">
No stations available for the selected time range! Adjust the selected <tt>start</tt>
and/or <tt>end</tt> to refresh station list.
</div>
</div>
<div class="form-group col-sm-12" id="type-form">
<label>Data Type</label><br />
<label>Data Type</label><br/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="type" value="q1h" autocomplete="off" checked> Q1H
......@@ -52,15 +57,10 @@
</div>
</div>
<div class="col-sm-12">
<div id="stations-alert" class="alert alert-warning" role="alert">
No stations available for the selected time range! Adjust the selected <tt>start</tt>
and/or <tt>end</tt> to refresh station list.
</div>
</div>
<div class="form-group col-sm-6">
<label>Stations <small>(one or more)</small></label>
<label>Stations
<small>(one or more)</small>
</label>
<select id="stations" name="stations" multiple size="15" class="form-control">
</select>
</div>
......@@ -78,7 +78,7 @@
</div>
<div class="form-group col-sm-12">
<label>Output Type</label><br />
<label>Output Type</label><br/>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="output" value="csv" autocomplete="off" checked> CSV
......@@ -91,10 +91,29 @@
<div class="col-sm-12">
<button class="btn btn-success" disabled type="submit">Submit</button>
<div class="checkbox">
<label>
<input type="checkbox" name="show-api-url" />
Show API URL
</label>
</div>
</div>
<div class="col-sm-12">
<pre id="current-api-url" style="display: none";>
</pre>
</div>
</form>
<footer class="row">
<footer class="row" style="padding-top: 50px;">
<div class="col-sm-12 text-muted">
<p>
This form is a HTML wrapper for the AMRC AWS Data API available at <code id="api-url"></code>.
Documentation for the API can be found
<a href="https://gitlab.ssec.wisc.edu/brucef/AmrcAws/wikis/api-docs">here</a>.
</p>
</div>
</footer>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment