Skip to content

Instantly share code, notes, and snippets.

@mhl
Last active August 29, 2015 14:04
Show Gist options
  • Save mhl/91f528e342305dfb13a5 to your computer and use it in GitHub Desktop.
Save mhl/91f528e342305dfb13a5 to your computer and use it in GitHub Desktop.
var popitURL = 'http://za-new-import.popit.mysociety.org/api/v0.1';
var today = new Date().toISOString().substring(0, 10);
function endDateAfter(endDate, whenDate) {
if (!endDate) {
/* A falsy endDate indicates that the end date is 'future' */
return true;
}
return endDate > whenDate;
}
function stripJSONPFromURL(url) {
/* A hacky workaround for this bug:
https://github.com/mysociety/popit-api/issues/69
This strips out the 'callback' and '_' parameters, but not
in a robust way...
*/
return url.replace(/callback=\w+&?/, '').replace(/_=\w+&?/, '')
}
function getPaginatedResults(url, done, error, results) {
if (typeof results === 'undefined') {
results = [];
}
$.ajax({
url: url,
dataType: 'jsonp',
success: function(data) {
var nextURL;
results = results.concat(data.result);
if ('next_url' in data) {
nextURL = stripJSONPFromURL(data.next_url);
getPaginatedResults(nextURL, done, error, results);
} else {
done(results);
}
},
error: function(e) {
error(e);
}
});
}
function getPeopleInOrganization(organization_id, callback) {
/* Ideally, we would want to add:
' AND end_date:> ' + today
... to this query get current memberships - however, at the
moment this won't work properly because of the way that 'future'
dates are indexed in Elasticsearch:
https://github.com/mysociety/popit-api/issues/63
Alternatively, the 'at' parameter could be added for the search
endpoint:
https://github.com/mysociety/popit-api/issues/64
*/
var query = 'organization_id:' + organization_id;
query += ' AND start_date:<' + today;
query += ' AND role:Member';
query += '&per_page=100';
getPaginatedResults(
popitURL + '/search/memberships?q=' + query,
function (memberships) {
var currentMemberships =
_.filter(
memberships,
function (membership) {
return endDateAfter(membership.end_date, today);
});
callback($.unique($.map(
currentMemberships,
function (position, i) {
return position.person;
})));
},
function (error) {
console.log("Error fetching people in organization " + organization_id);
}
);
}
function sortPeople(people) {
people.sort(function (a, b) {
if (a.sort_name < b.sort_name)
return -1;
if (a.sort_name > b.sort_name)
return 1;
return 0;
});
}
var organizationName = 'National Assembly';
var organizationQuery = '/search/organizations?q=name:"' + organizationName + '"';
$.ajax({
url: popitURL + organizationQuery,
dataType: 'jsonp',
success: function(data) {
/* This query will actually return any organization whose name
contains "National Assembly", so find the one with the exact
name match. See https://github.com/mysociety/popit-api/issues/61
*/
var organization = _.find(
data.result,
function (o) { return o.name == organizationName; }
);
getPeopleInOrganization(organization.id, function (people) {
console.log("Found", people.length, "people");
var personList = $('#na-members');
personList.empty();
sortPeople(people);
$.each(people, function(i, person) {
var li = $('<li/>', {class: 'mp'})
var p = $('<p/>', {class: 'mp-info'});
var h3 = $('<h3/>');
var a = $('<a/>', {href: person.pa_url});
if ('images' in person) {
var img = $('<img/>', {
src: person.images[0].url
});
li.append(img);
}
h3.text(person.name);
a.append(h3);
p.append(a);
li.append(p);
personList.append(li);
});
});
},
error: function (e) {
console.log("Error fetching organizations:", e.message);
}
});
<!DOCTYPE html>
<html>
<head>
<title>Tiny PopIt Example</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="example.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>South African Parliament</h1>
<h2>Current National Assembly Members</h2>
<ul id="na-members">
<li>Loading...</li>
</ul>
</body>
</html>
/*
from http://www.paulirish.com/2012/box-sizing-border-box-ftw/
apply a natural box layout model to all elements
*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 50px;
}
ul, li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.mp {
margin: 2em;
padding: 2em;
background-color: #ddd;
}
.mp-info {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment