Skip to content

Instantly share code, notes, and snippets.

@oaguy1

oaguy1/live_feed.html

Created June 24, 2015 02:57
Show Gist options
  • Save oaguy1/cfa70114126c5fbcac92 to your computer and use it in GitHub Desktop.
Save oaguy1/cfa70114126c5fbcac92 to your computer and use it in GitHub Desktop.
Download ZIP
See this code in action at https://www.cidewalk.com/ads.html
Raw
live_feed.html
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
a:hover {
text-decoration: none;
}
h1 {
font-size: 18px;
font-weight: bold;
}
h2{
font-size: 14px;
font-style: oblique;
}
.timeline-contatiner {
width: 50%;
margin-left: auto;
margin-right: auto;
}
ul.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li > .timeline-panel {
border: 1px solid #d4d4d4;
border-radius: 2px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline-map {
height: 100%;
min-height: 250px;
}
.timeline-label {
padding: 15px;
}
.timeline-action {
margin: 0 15px 15px 15px;
float: left;
color: #fff;
width: 35px;
height: 35px;
line-height: 35px;
font-size: 1em;
text-align: center;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline-action.primary {
background-color: #2e6da4 !important;
}
.timeline-action.success {
background-color: #3f903f !important;
}
.timeline-action.warning {
background-color: #f0ad4e !important;
}
.timeline-action.danger {
background-color: #d9534f !important;
}
.timeline-action.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p, .timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
@media only screen and (min-width: 700px) {
.timeline-map {
height: 100%;
min-height: 250px;
display: table-cell;
float: none;
}
.timeline-label {
padding: 15px;
display: table-cell;
float: none;
}
}
</style>
<div class="timeline-container">
<div id="loading" class="alert alert-info" style="font-size: 30px;text-align: center;">Loading <i class="fa fa-spinner fa-spin"></i></span></div>
<div id="timeline" style="min-height:1000px;display: none;">
<ul id="activity_feed" class="timeline"></ul>
</div>
</div>
<script>
(function () {
var queued_events = [];
var last_timestamp;
var addEvent = function () {
if (queued_events.length > 0) {
$('#loading').css('display', 'none');
$('#timeline').css('display', 'block');
current_event = queued_events.shift();
// Define App Related attributes
if (current_event.app[0]) {
icon_div = '<div class="timeline-action img-circle img-circle-icon" style="background-image: url(' + current_event.app[0].icon_url + ');background-size: cover;background-repeat: no-repeat;background-position: center;" title="{{event.app[0].app_name}}"></div>';
app_name = current_event.app[0].app_name;
} else {
icon_div = '<div class="timeline-action info"><span class="glyphicon glyphicon-phone"></span></div>';
app_name = "mobile";
}
article = (/^[aeiou]{1}/i.test(app_name)) ? 'An' : 'A';
timeDiff = timediffString(current_event.timestamp);
map_url = genMapUrl(current_event.location.latitude, current_event.location.longitude, 14, 1200, 500);
$('#activity_feed').prepend('<li><div class=timeline-panel><div class=row><div class="timeline-label col-md-6 col-sm-12"><a href="'+ current_event.creative.click_url +'"><div style=padding:20px><h1>' + current_event.creative.title + '</h1><h2>' + current_event.creative.description + '</h2>' + current_event.creative.display_url + '</div></a><div style=padding:20px>' + icon_div + article + ' <span style=font-style:oblique>' + app_name + '</span> app user saw this Cidewalk promotion<div class=timeline-heading><small class=text-muted><span class="glyphicon glyphicon-time"></span> <span class=timediff>' + timeDiff + '</span> ago in <strong>' + current_event.location.city + ', ' + current_event.location.state + '</strong></small><span class="timestamp hidden">' + current_event.timestamp + '</span></div></div></div><div class="timeline-map col-md-6 col-sm-12" style="background-image:url(\'' + map_url + '\');background-size:cover;background-repeat:no-repeat;background-position:center"></div></div></div></li>');
//top off the data if there are less than 10 events remaining
if (queued_events.length <= 2) {
getData(last_timestamp);
}
}
};
var recalcTimestamp = function () {
$('#activity_feed').each( function () {
$(this).find('li').each( function () {
timediff_span = $(this).find('.timediff');
timestamp_span = $(this).find('.timestamp');
new_timediff = timediffString(timestamp_span.html());
timediff_span.html(new_timediff);
});
});
}
var getData = function (timestamp) {
var jsonp_url;
if (typeof last_timestamp !== 'undefined') {
jsonp_url = "https://api.cidewalk.com/api/public_activity_feed?last_timestamp=" + timestamp + "&callback=?";
} else {
jsonp_url = "https://api.cidewalk.com/api/public_activity_feed?callback=?";
}
return $.getJSON(jsonp_url, queueEvents);
};
var queueEvents = function (data) {
if(data.length > 0) {
now = Date.now();
queued_events = data;
last_timestamp = queued_events[queued_events.length - 1].timestamp;
}
}
// Calculate time-diff string
var timediffString = function (timestamp) {
var timediff = '';
var unit;
var now = Date.now();
var event_time = new Date(timestamp + ' UTC');
var msec = now - event_time;
var days = Math.floor(msec / 1000 / 60 / 60 / 24);
msec -= days * 1000 * 60 * 60 * 24;
if (days > 0) {
unit = (days > 1) ? 'days' : 'day';
timediff += days + ' ' + unit + ' ';
}
var hours = Math.floor(msec / 1000 / 60 / 60);
msec -= hours * 1000 * 60 * 60;
if (hours > 0) {
unit = (hours > 1) ? 'hours' : 'hour';
timediff += hours + ' ' + unit + ' ';
}
var mins = Math.floor(msec / 1000 / 60);
msec -= mins * 1000 * 60;
if (mins > 0) {
unit = (mins > 1) ? 'minutes' : 'minute';
timediff += mins + ' ' + unit + ' ';
}
var sec = Math.floor(msec / 1000);
msec -= sec * 1000;
if (sec > 0) {
unit = (sec > 1) ? 'seconds' : 'second';
timediff += sec + ' ' + unit;
}
return timediff;
};
var genMapUrl = function (loc_unit_1, loc_unit_2, zoom, height, width) {
return "https://maps.googleapis.com/maps/api/staticmap?center=" + loc_unit_1 + ',' + loc_unit_2 + '&zoom=' + zoom + '&size=' + width + 'x' + height +
'&markers=' + loc_unit_1 + ',' + loc_unit_2 + '&style=feature:all%7Celement:all%7Csaturation:-45%7Cbrightness:13&style=feature:road.highway%7Celement:geometry.fill%7Ccolor:0x8fa7b3&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0x667780&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0x333333&style=feature:road.highway%7Celement:labels.text.stroke%7Ccolor:0x8fa7b3%7Cgamma:2&style=feature:road.arterial%7Celement:geometry.fill%7Ccolor:0xa3becc&style=feature:road.arterial%7Celement:geometry.stroke%7Ccolor:0x7a8f99&style=feature:road.arterial%7Celement:labels.text.fill%7Ccolor:0x555555&style=feature:road.local%7Celement:geometry.fill%7Ccolor:0xa3becc&style=feature:road.local%7Celement:geometry.stroke%7Ccolor:0x7a8f99&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x555555&style=feature:water%7Celement:geometry.fill%7Ccolor:0xbbd9e9&style=feature:administrative%7Celement:labels.text.fill%7Ccolor:0x525f66&style=feature:transit%7Celement:labels.text.stroke%7Ccolor:0xbbd9e9%7Cgamma:2&style=feature:transit.line%7Celement:geometry.fill%7Ccolor:0xa3aeb5';
};
$(document).ready(function () {
getData().done(function () {
addEvent();
setInterval(function () {
addEvent();
recalcTimestamp();
}, Math.floor(((Math.random() * (5 - 3)) + 3 + 1) * 1000));
}).fail(function () {
$('#loading')
.removeClass('alert-info')
.addClass('alert-danger')
.html('There was an error, please reload your browser and try again');
});
});
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment