Last active
December 11, 2015 02:59
-
-
Save erwaller/4534243 to your computer and use it in GitHub Desktop.
Fun with the SG Recommendations API
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Basic Test</title> | |
| <style> | |
| @import url("//bl.ocks.org/style.css?20120613"); | |
| </style> | |
| </head> | |
| <body> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.9/backbone-min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script> | |
| <script type="text/html" id="event-view"> | |
| <a class="push" href="#"> | |
| <span class="title"><%= e.title %></span> | |
| <time datetime="<%= e.datetime_local.toISOString() %>"><%= e.datetime_local.toString("ddd, MMM d") %></time> | |
| </a> | |
| <a class="sg" target="_blank" href="<%= e.url %>">»</a> | |
| </script> | |
| <style> | |
| body { | |
| font-family: "Helvetica Neue", Helvetica, sans-serif; | |
| margin: 1em auto 4em auto; | |
| position: relative; | |
| width: 960px; | |
| color: #222; | |
| line-height: 1.5em; | |
| } | |
| h1 { | |
| font-size: 64px; | |
| font-weight: 300; | |
| letter-spacing: -2px; | |
| margin: .3em 0 .1em 0; | |
| } | |
| h2 { | |
| margin-top: 2em; | |
| } | |
| h1, h2 { | |
| text-rendering: optimizeLegibility; | |
| } | |
| h2 a { | |
| color: #ccc; | |
| left: -20px; | |
| position: absolute; | |
| width: 740px; | |
| } | |
| a { | |
| color: steelblue; | |
| } | |
| a:not(:hover) { | |
| text-decoration: none; | |
| } | |
| time { | |
| color: #999; | |
| } | |
| .sg { | |
| padding: 0px 8px; | |
| background: #ffffcc; | |
| display: inline-block; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| function retrieveRecommendations (performers) { | |
| var deferred = _.extend({}, Backbone.Events), | |
| url = "http://api.seatgeek.com/2/recommendations?geoip=true&callback=?&taxonomies.id=2000000&per_page=25"; | |
| if (performers.length) { | |
| url += "&" + _.map(performers, function (p) { | |
| return "performers.id=" + p.id; | |
| }).join("&"); | |
| url += "&client_id=MTY2MnwxMzUwMDcwMTYy"; | |
| } else { | |
| url += "&client_id=NjkwMjR8MTM0Njg2MTQ0NA"; | |
| } | |
| $.getJSON(url, function (data) { | |
| var events = _.pluck(data.recommendations, "event"); | |
| deferred.trigger("success", new EventCollection(events)); | |
| }); | |
| return deferred; | |
| } | |
| var EventModel = Backbone.Model.extend({ | |
| initialize: function () { | |
| this.set({ | |
| "datetime_local": Date.parse(this.get("datetime_local")), | |
| "datetime_utc": Date.parse(this.get("datetime_utc")) | |
| }, { silent: true }); | |
| } | |
| }); | |
| var PerformerModel = Backbone.Model.extend({}); | |
| var EventCollection = Backbone.Collection.extend({ | |
| model: EventModel, | |
| comparator: function (e) { return e.get("datetime_utc").getTime(); } | |
| }); | |
| var PerformerCollection = Backbone.Collection.extend({ | |
| model: PerformerModel | |
| }); | |
| var EventView = Backbone.View.extend({ | |
| className: "event", | |
| template: _.template($("#event-view").html()), | |
| events: { | |
| "click .push": function (e) { | |
| e.preventDefault(); | |
| this.trigger("select", this.model); | |
| } | |
| }, | |
| render: function () { | |
| this.$el | |
| .html(this.template({ e: this.model.toJSON() })) | |
| .attr("href", "#"); | |
| return this; | |
| } | |
| }); | |
| var AppView = Backbone.View.extend({ | |
| className: "app", | |
| initialize: function () { | |
| this.options.cumulative = location.hash === "#cumulative"; | |
| this.stack = []; //[{ id: 2446, name: "Justin Bieber" }]; | |
| }, | |
| push: function (performer) { | |
| this.stack.push(performer); | |
| this.renderFrame(); | |
| }, | |
| pop: function () { | |
| this.stack.pop(); | |
| this.renderFrame(); | |
| }, | |
| render: function () { | |
| this.$el.css({ position: "relative" }); | |
| this.renderFrame(); | |
| return this; | |
| }, | |
| renderFrame: function () { | |
| var that = this, | |
| performers = this.options.cumulative ? that.stack : that.stack.slice(-1), | |
| deferred = retrieveRecommendations(performers); | |
| deferred.on("success", function (events) { | |
| that.$el.html(""); | |
| $("<h2></h2>") | |
| .text(_.pluck(performers, "name").join(", ")) | |
| .appendTo(that.$el); | |
| events.each(function (e) { | |
| var view = new EventView({ model: e }); | |
| view.on("select", function (e) { | |
| var p = _.find(e.get("performers"), function (p) { return !!p.primary; }); | |
| that.push(p); | |
| }); | |
| that.$el.append(view.render().el); | |
| }); | |
| if (that.stack.length) { | |
| var back = $("<a></a>"); | |
| back | |
| .addClass("back") | |
| .attr("href", "#") | |
| .html("« back") | |
| .css({ position: "absolute", top: "0px", left: "-60px" }) | |
| .appendTo(that.$el) | |
| .click(function (e) { | |
| e.preventDefault(); | |
| that.pop(); | |
| }); | |
| } | |
| }); | |
| } | |
| }); | |
| var app = new AppView(); | |
| $("body").append(app.render().el); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment