Last active
June 6, 2021 06:40
-
-
Save martinfilliau/3380256 to your computer and use it in GitHub Desktop.
Example of widget using the JSONP feed from the new status.ox website. Status is refreshed every 60 seconds.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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