Skip to content

Instantly share code, notes, and snippets.

@martinfilliau

martinfilliau/index.html

Last active June 6, 2021 06:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save martinfilliau/3380256 to your computer and use it in GitHub Desktop.
Save martinfilliau/3380256 to your computer and use it in GitHub Desktop.
Download ZIP
Example of widget using the JSONP feed from the new status.ox website. Status is refreshed every 60 seconds.
Raw
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Status - University of Oxford</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
.status_code_0 {background-color:#039b0b;}
.status_code_1 {background-color: #b94a48;}
.status_code_2 {background-color: #f89406;}
li {padding:0.5em; margin:0.5em; list-style:none; width:20em; font-size:1.3em;}
.label {font-weight:bold;}
a {color:#FFF; text-decoration:none;}
.footer {font-size: 0.8em; margin-left:5em;}
h1 {color:#002147; margin-left:0.5em;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- ACTUAL CODE for this example below -->
<script type="text/javascript">
var callback = function (data) {
var services = [];
$.each(data.groups, function(key, val) {
services.push('<li class="status_code_' + val.status_code + '"><a href="http://status.ox.ac.uk/"><span class="label">' + val.name + ':</span> ' + val.status_name + '</a></li>');
});
$('body').empty();
$('body').append('<h1>Status - University of Oxford</h1>');
$('<ul/>', {'id': 'services', html: services.join('')}).appendTo('body');
$('#services').after('<p class="footer">Last Updated: ' + data.last_updated+'</p>');
};
var updateFeed = function () {
$.ajax({
url: "http://status.ox.ac.uk/api/services.jsonp",
type: "get",
dataType: "jsonp",
jsonp: "callback",
cache: false,
success: callback,
});
}
updateFeed(); // run one time then will be called again every
window.setInterval(updateFeed, 60000); // 1 minute
</script>
</head>
<body>
<noscript>Needs Javascript!</noscript>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment