Skip to content

Instantly share code, notes, and snippets.

@barnettjw

barnettjw/index.html

Last active August 29, 2015 14:18
Show Gist options
  • Save barnettjw/1a8a4a02ae90d7bc5b2e to your computer and use it in GitHub Desktop.
Save barnettjw/1a8a4a02ae90d7bc5b2e to your computer and use it in GitHub Desktop.
Download ZIP
Treehouse Friends
Raw
index.html
<html>
<head>
<title>Bootstrap Sortable Tables</title>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" type="text/css" href="//rawgit.com/drvic10k/bootstrap-sortable/master/Contents/bootstrap-sortable.css" /></head>
<body>
<h1>Treehouse Friends</h1>
<table id="top10" class ="table table-bordered table-striped sortable">
<thead>
<tr>
<th>Name</th>
<th data-defaultsort="desc">Points</th>
<th data-firstsort="desc">Badges</th>
<th data-firstsort="desc">Date of Last Badge</th>
</tr>
</thead>
<tbody></tbody>
</table>
<br />
<div id = "timestamp"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<!--<script src="//rawgit.com/drvic10k/bootstrap-sortable/master/Scripts/bootstrap-sortable.js"></script>-->
</body>
Raw
script.js
$(document).ready(function () {
var refreshUnit = "seconds";
var refreshValue = 10;
var users = ['nickpettit', 'amit', 'jasonseifer', 'bendog24', 'guil', 'chalkers', 'zgordon', 'hamptonpaulk', 'davemcfarland', 'kennethlove'];
/********** function parseJSON *************/
function parseJSON(){
console.log("refreshing data");
jQuery.each(users, function (a, val) {
var json = 'http://teamtreehouse.com/' + val + '.json';
$.getJSON(json, function (data) {
var badgeCount = 0;
for (var b in data.badges) { badgeCount++; }
console.log(data.name);
console.log(data.points.total);
console.log(badgeCount);
console.log(data.badges[(badgeCount - 1)].earned_date);
localStorage.setItem('user_' + a, JSON.stringify({
pointsTotal: data.points.total,
name: data.name,
badgeCount: badgeCount,
lastEarnedDate: data.badges[(badgeCount - 1)].earned_date
}));
});
});
// timestamp data to allow caching
var timestamp = moment();
localStorage.setItem("timestamp", timestamp);
}
/********** function populateTable *************/
function populateTable(){
var i = 0;
for (i; i < users.length; i++){
var userData = JSON.parse(localStorage.getItem('user_' + i));
console.log(userData.name);
console.log(userData.pointsTotal);
console.log(userData.badgeCount);
console.log(userData.lastEarnedDate);
var lastEarnedDateFormatted = moment(userData.lastEarnedDate).format("MMM DD 'YY");
$("#top10 tbody").append("<tr>"+
"<td data-value='" + userData.name + "'>" + userData.name + "</td>" +
"<td data-value='" + userData.pointsTotal + "'>" + userData.pointsTotal + "</td>" +
"<td data-value='" + userData.badgeCount + "'>" + userData.badgeCount + "</td>" +
"<td data-dateformat='MMM DD \'YY' data-value='" + lastEarnedDateFormatted + "'>" + lastEarnedDateFormatted + "</td>" +
"</tr>");
}
$("#timestamp").text( "Data last updated at: " + moment(localStorage.getItem("timestamp")).format("h:mm:ss a"));
$.bootstrapSortable(true);}
/************* function isDataStale() ****************/
/*
check if data stored in local storage is still stale and needs to be refreshed
checks timestamp in localstorage, if not there, calls parseJSON() to refresh data
if timestamp is found uses moment.js to check if the current time is past the specificed refresh window, specificed in 'refreshUnit' & 'refreshValue' variables
*/
function isDataStale(){
console.log("check if data is stale");
// check if timestamp is set
if (localStorage.getItem("timestamp") !== null) {
var storedAt = moment(localStorage.getItem("timestamp"));
var staleAt = moment(storedAt).add(refreshUnit, refreshValue);
//console.log(moment(storedAt).format("h:mm:ss a"));
//console.log(moment(staleAt).format("h:mm:ss a"));
if (moment().isAfter(staleAt)){
console.log("data is stale");
return true;
}
else {console.log("data is still fresh");}
}
else {
console.log("no timestamp found");
return true; //no timestamp found refesh the data
}
}
if (isDataStale()) { parseJSON(); }
populateTable();
/***************************************************************/
/******** function checkLocalStorage *******/
/* check that data has been set in local storage
function checkLocalStorage(){
if (localStorage.getItem("name") == undefined) { return false; }
if (localStorage.getItem("pointsTotal") == undefined) { return false; }
if (localStorage.getItem("badgeCount") == undefined) { return false; }
if (localStorage.getItem("lastEarnedDate") == undefined) { return false; }
if (localStorage.getItem("timestamp") == undefined) {return false; }
return true;
}*/
});
Raw
style.css
body { margin: 20px !important; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment