Skip to content

Commit

Permalink
Add CSV download features, #1
Browse files Browse the repository at this point in the history
  • Loading branch information
James McKinney committed Feb 15, 2016
1 parent 33a543b commit b838a7f
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 89 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

This demo offers a simple query builder and a simple HTML render of the JSON response from the [Who's got dirt? API](https://github.com/influencemapping/whos_got_dirt-server/).

[Try it.](http://influencemapping.github.io/whos_got_dirt-demo/)
[Try it!](http://influencemapping.github.io/whos_got_dirt-demo/)

## Development

Expand Down
94 changes: 51 additions & 43 deletions build/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -566,48 +566,14 @@ jQuery(function ($) {
);
}

// Add event handlers.
$('[data-toggle="tooltip"]').tooltip();

$(document).on('change', '.field', function () {
var field = $(this).val();
var $row = $(this).parents('.row');
var $value = $(this).parents('.row').find('.value');
var value = $value.find('input, select').val();

$row.find('.operator').html(operatorTemplate(field));
$value.html(valueTemplate(field, field_operators[field][0], value));
$row.find('.date').datepicker();
});

$(document).on('change', '.operator select', function () {
var operator = $(this).val();
var field = $(this).parents('.row').find('.field').val();
var $value = $(this).parents('.row').find('.value');
var value = $value.find('input, select').val();

$value.html(valueTemplate(field, operator, value));
if (operator === '|=') {
$value.append('<span class="help-block">The "is one of" operator accepts a pipe-separated list: for example, <kbd>gb|ie</kbd>.</span>');
}
});

$(document).on('click', '.remove', function () {
$(this).parents('.row').remove();
});

$('#add').click(function () {
addField();
});

$('#form').submit(function (event) {
// Returns the JSON payload to send to the API.
//
// @return {String} The JSON payload.
function payload() {
var controls = $(this).serializeArray();
var query = {type: 'Person'};
var membership = {};

$('#loading').css('visibility', 'visible').html('<img src="build/ajax-loader.gif" width="16" height="16" alt="">');
$('.alert-warning').remove();

// Build the query.
for (var i = 0, l = controls.length; i < l; i += 3) {
if (controls[i].name == 'endpoints') {
Expand Down Expand Up @@ -655,18 +621,62 @@ jQuery(function ($) {
endpoints.push($(this).val());
});

// Send the request.
var json = JSON.stringify({
// Prepare the payload.
return JSON.stringify({
q0: {
query: query,
endpoints: endpoints
}
});
}

// Add event handlers.
$('[data-toggle="tooltip"]').tooltip();

$(document).on('change', '.field', function () {
var field = $(this).val();
var $row = $(this).parents('.row');
var $value = $(this).parents('.row').find('.value');
var value = $value.find('input, select').val();

$row.find('.operator').html(operatorTemplate(field));
$value.html(valueTemplate(field, field_operators[field][0], value));
$row.find('.date').datepicker();
});

$(document).on('change', '.operator select', function () {
var operator = $(this).val();
var field = $(this).parents('.row').find('.field').val();
var $value = $(this).parents('.row').find('.value');
var value = $value.find('input, select').val();

$value.html(valueTemplate(field, operator, value));
if (operator === '|=') {
$value.append('<span class="help-block">The "is one of" operator accepts a pipe-separated list: for example, <kbd>gb|ie</kbd>.</span>');
}
});

$(document).on('click', '.remove', function () {
$(this).parents('.row').remove();
});

$('#add').click(function () {
addField();
});

$('#form').submit(function () {
$('#queries').val(payload());
});

$('#submit').click(function () {
$('#loading').css('visibility', 'visible').html('<img src="build/ajax-loader.gif" width="16" height="16" alt="">');
$('.alert-warning').remove();

// Send the request.
$.ajax({
dataType: 'json',
url: 'https://whosgotdirt.herokuapp.com/entities',
data: {queries: json},
data: {queries: payload()},
success: function (data) {
$('#loading').css('visibility', 'hidden');
render_messages(data['q0']['messages']);
Expand All @@ -690,8 +700,6 @@ jQuery(function ($) {
}
}
});

event.preventDefault();
});

// Setup the page.
Expand Down
6 changes: 4 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h1>Who's Got Dirt? Demo</h1>

<p>This demo queries only <strong>entities</strong> (people and organizations) and exposes only 5 filters for entities, not all 25 implemented by the <i>Who's got dirt?</i> API and its supported APIs. In addition to entities, the <i>Who's got dirt?</i>1 API supports <strong>relations</strong> between entities (for example, a person holding an office in an organization) and <strong>lists</strong> of entities (for example, a corporate grouping).</p>

<form id="form">
<form action="https://whosgotdirt-proxy.herokuapp.com/entities.csv" method="post" id="form">
<h2>Select your filters to search for entities</h2>

<div id="filters">
Expand Down Expand Up @@ -101,7 +101,9 @@ <h2>Select the APIs to query</h2>
</div>
</div>

<button type="submit" class="btn btn-default">Submit query</button>
<input type="hidden" name="queries" id="queries">
<button type="button" class="btn btn-default" id="submit">Submit query</button>
<button type="submit" class="btn">Download CSV</button>
<span id="loading"></span>
</form>

Expand Down
94 changes: 51 additions & 43 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,48 +193,14 @@ jQuery(function ($) {
);
}

// Add event handlers.
$('[data-toggle="tooltip"]').tooltip();

$(document).on('change', '.field', function () {
var field = $(this).val();
var $row = $(this).parents('.row');
var $value = $(this).parents('.row').find('.value');
var value = $value.find('input, select').val();

$row.find('.operator').html(operatorTemplate(field));
$value.html(valueTemplate(field, field_operators[field][0], value));
$row.find('.date').datepicker();
});

$(document).on('change', '.operator select', function () {
var operator = $(this).val();
var field = $(this).parents('.row').find('.field').val();
var $value = $(this).parents('.row').find('.value');
var value = $value.find('input, select').val();

$value.html(valueTemplate(field, operator, value));
if (operator === '|=') {
$value.append('<span class="help-block">The "is one of" operator accepts a pipe-separated list: for example, <kbd>gb|ie</kbd>.</span>');
}
});

$(document).on('click', '.remove', function () {
$(this).parents('.row').remove();
});

$('#add').click(function () {
addField();
});

$('#form').submit(function (event) {
// Returns the JSON payload to send to the API.
//
// @return {String} The JSON payload.
function payload() {
var controls = $(this).serializeArray();
var query = {type: 'Person'};
var membership = {};

$('#loading').css('visibility', 'visible').html('<img src="build/ajax-loader.gif" width="16" height="16" alt="">');
$('.alert-warning').remove();

// Build the query.
for (var i = 0, l = controls.length; i < l; i += 3) {
if (controls[i].name == 'endpoints') {
Expand Down Expand Up @@ -282,18 +248,62 @@ jQuery(function ($) {
endpoints.push($(this).val());
});

// Send the request.
var json = JSON.stringify({
// Prepare the payload.
return JSON.stringify({
q0: {
query: query,
endpoints: endpoints
}
});
}

// Add event handlers.
$('[data-toggle="tooltip"]').tooltip();

$(document).on('change', '.field', function () {
var field = $(this).val();
var $row = $(this).parents('.row');
var $value = $(this).parents('.row').find('.value');
var value = $value.find('input, select').val();

$row.find('.operator').html(operatorTemplate(field));
$value.html(valueTemplate(field, field_operators[field][0], value));
$row.find('.date').datepicker();
});

$(document).on('change', '.operator select', function () {
var operator = $(this).val();
var field = $(this).parents('.row').find('.field').val();
var $value = $(this).parents('.row').find('.value');
var value = $value.find('input, select').val();

$value.html(valueTemplate(field, operator, value));
if (operator === '|=') {
$value.append('<span class="help-block">The "is one of" operator accepts a pipe-separated list: for example, <kbd>gb|ie</kbd>.</span>');
}
});

$(document).on('click', '.remove', function () {
$(this).parents('.row').remove();
});

$('#add').click(function () {
addField();
});

$('#form').submit(function () {
$('#queries').val(payload());
});

$('#submit').click(function () {
$('#loading').css('visibility', 'visible').html('<img src="build/ajax-loader.gif" width="16" height="16" alt="">');
$('.alert-warning').remove();

// Send the request.
$.ajax({
dataType: 'json',
url: 'https://whosgotdirt.herokuapp.com/entities',
data: {queries: json},
data: {queries: payload()},
success: function (data) {
$('#loading').css('visibility', 'hidden');
render_messages(data['q0']['messages']);
Expand All @@ -317,8 +327,6 @@ jQuery(function ($) {
}
}
});

event.preventDefault();
});

// Setup the page.
Expand Down

0 comments on commit b838a7f

Please sign in to comment.