Skip to content

Instantly share code, notes, and snippets.

@KushalP

KushalP/client.js

Last active August 29, 2015 14:22
Show Gist options
  • Save KushalP/d012e04e0094a09d94bc to your computer and use it in GitHub Desktop.
Save KushalP/d012e04e0094a09d94bc to your computer and use it in GitHub Desktop.
Download ZIP
Artefacts from the Open Register hack day. These are the bits of JavaScript I made on the day.
Raw
client.js
(function() {
var jQuery = window.$;
var OpenRegister = function(endpoint) {
this.endpoint = endpoint;
};
OpenRegister.prototype.buildURL = function(path) {
return this.endpoint + path + ".json?_callback=?";
};
OpenRegister.prototype.hash = function(id) {
var path = this.buildURL("hash/" + id);
return jQuery.getJSON(path).done(function (data) {
return data;
});
};
OpenRegister.prototype.all = function () {
return jQuery.getJSON(this.buildURL("all")).done(function (data) {
return data;
});
};
window.OpenRegister = OpenRegister;
}).call(this);
Raw
index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/client.js"></script>
</head>
<body>
<h1>Open Register JavaScript Client</h1>
</body>
<script>
var register = new OpenRegister("http://school.openregister.org/");
register.all().done(function (data) {
console.log(data);
});
var id = "c69a72f7b145f7a1da26b00e4f9758022634359b";
register.hash(id).done(function (data) {
console.log(data);
});
</script>
</html>
Raw
main.css
body {
font-family: "nta", Arial, sans-serif;
font-size: 28px;
}
#wrapper {
width: 980px;
margin: 0 auto;
}
#wrapper h1, #wrapper h2, #wrapper h3 {
text-align: center;
}
#wrapper table {
margin: 0 auto;
text-align: center;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 50%;
font-size: 16px;
}
table thead, td {
text-align: left;
border-bottom: 1px solid #333;
padding: 12px 20px 9px 0;
}
table thead {
font-weight: 700;
}
#map {
width: 100%;
height: 500px;
}
Raw
server.py
from SimpleHTTPServer import SimpleHTTPRequestHandler
import BaseHTTPServer
class CORSRequestHandler(SimpleHTTPRequestHandler):
def end_headers (self):
self.send_header('Access-Control-Allow-Origin', '*')
SimpleHTTPRequestHandler.end_headers(self)
if __name__ == '__main__':
BaseHTTPServer.test(CORSRequestHandler, BaseHTTPServer.HTTPServer)
Raw
vat-rate.html
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/client.js"></script>
<link href="https://assets.digital.cabinet-office.gov.uk/static/fonts-13bc2e6735c0e0b82fa507663188d671.css" media="all" rel="stylesheet" type="text/css">
<link href="main.css" media="all" rel="stylesheet" type="text/css">
<title>VAT rate example</title>
</head>
<body>
<div id="wrapper">
<h1>VAT Rate</h1>
<h2 id="loading">Attempting to loading data....</h2>
</div>
</body>
<script src="js/vat-rate.js"></script>
</html>
Raw
vat-rate.js
(function(){
var jQuery = window.$;
var templates = {
base: function () {
return jQuery('<div id="vat-rates"></div>');
},
count: function (n, url) {
return jQuery('<h2>' +
'There are ' + n +
' historical <a href="' + url + '">VAT rates</a>' +
'</h2>');
},
current: function (rate) {
return jQuery('<h3>' +
'The current VAT rate is: ' +
rate["entry"]["rate"] + '%' +
'</h3>');
},
table: function () {
return jQuery("<table></table>");
},
tableHeading: function () {
return jQuery("<thead>" +
"<tr><td>rate</td><td>start date</td><td>end date</td></tr>" +
"</thead>");
},
tableRow: function(data, url) {
return jQuery("<tr>" +
"<td>" +
'<a href="' + url + '">' + data["rate"] + "</a></td>" +
"<td>" + data["start-date"] + "</td>" +
"<td>" + data["end-date"] + "</td>" +
"</tr>");
}
};
var sortVATRates = function(a, b) {
var dateA = new Date(a["entry"]["start-date"]);
var dateB = new Date(b["entry"]["start-date"]);
if (dateA < dateB) {
return -1;
} else if (dateA > dateB) {
return 1;
} else {
return 0;
}
};
var register = new OpenRegister("http://vat-rate.openregister.org/");
register.all().done(function (data) {
data.sort(sortVATRates);
var total = data.length;
// Build out a DOM template and attach the data to it.
var $base = templates.base();
var $count = templates.count(total, register.endpoint);
$base.append($count);
var $currentRate = templates.current(data[data.length - 1]);
$base.append($currentRate);
var $table = templates.table();
var $tableHeading = templates.tableHeading();
$table.append($tableHeading);
// Show the found VAT rates.
jQuery.map(data, function (rate, _) {
var dataURL = register.endpoint + "hash/" + rate["hash"];
var rateRow = templates.tableRow(rate["entry"], dataURL);
$table.append(rateRow);
});
// Do this once all the DOM templates are generated.
var $loading = jQuery("#loading");
$loading.remove();
var $wrapper = jQuery("#wrapper");
$wrapper.append($base);
$wrapper.append($table);
});
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment