@@ -25,9 +25,9 @@ diff --git a/javascripts/app.js b/javascripts/app.js index d7398ab..3cd3220 100644 --- a/javascripts/app.js +++ b/javascripts/app.js @@ -6,10 +6,30 @@ define(['jquerymobile', function(a, Backbone, Mustache, LinesCollection, LineList) { return { initialize: function() { + var refetch = function() { + $.mobile.loading('show'); + lines.fetch({ + success: function() { + $.mobile.loading('hide'); + } + }); + } + lines = new LinesCollection; lineList = new LineList({ collection: lines }); + lines.url = lines.urls.now; lines.fetch(); + + $('#refresh').on("click", function() { + refetch(); + return false; + }); + + $('footer a').on("click", function() { + lines.url = lines.urls[this.id]; + refetch(); + }); } }; }); diff --git a/javascripts/collections/lines.js b/javascripts/collections/lines.js index b27e7bf..5a52c62 100644 --- a/javascripts/collections/lines.js +++ b/javascripts/collections/lines.js @@ -7,11 +7,16 @@ define(['backbone', 'models/line'], function(Backbone, Line) { }; var LinesCollection = Backbone.Collection.extend({ - url: "http://api.tubeupdates.com/?method=get.status", + // url: "http://api.tubeupdates.com/?method=get.status", + urls: { + now: "/test-data/now.json", + tomorrow: "/test-data/tomorrow.json", + weekend: "/test-data/weekend.json" + }, model: Line, - sync: MySync, + // sync: MySync, parse: function(data) { return data.response.lines; diff --git a/javascripts/models/line.js b/javascripts/models/line.js index aa21ba5..f453c4e 100644 --- a/javascripts/models/line.js +++ b/javascripts/models/line.js @@ -3,6 +3,9 @@ define(['backbone'], function(Backbone) { var Line = Backbone.Model.extend({ initialize: function() { this.set_status(); + if (this.get("messages").length) { + this.set("message_count", this.get("messages").length); + } }, set_status: function() { diff --git a/javascripts/templates/line.mustache b/javascripts/templates/line.mustache index 5cf4ae0..6fdef1c 100644 --- a/javascripts/templates/line.mustache +++ b/javascripts/templates/line.mustache @@ -1 +1,5 @@ -
  • {{{ name }}} {{ status }}
  • +
  • + {{{ name }}} + {{ #message_count }}{{ message_count }}{{ /message_count }} + {{ status }} +
  • diff --git a/stylesheets/main.css b/stylesheets/main.css index ad8d089..8306ff2 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -8,17 +8,33 @@ li .name { li .status { float: right; - text-transform: capitalize; } + text-transform: capitalize; + font-size: 0.8em; + padding-top: 0.1em; } + +li .message-count { + width: 1.2em; + height: 1.2em; + border: 2px solid white; + text-align: center; + margin-left: 0.5em; + font-weight: normal; + font-size: 0.9em; + float: right; + background: black; + color: white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + border-radius: 1em; } li .good-service { color: green; } -li .part-suspended, li .part-closure, li .minor-delays { - color: #CC9900; } - li .special-service { color: #000099; } +li .part-suspended, li .part-closure, li .minor-delays { + color: #CC9900; } + li .major-delays { color: #CC0000; } diff --git a/stylesheets/main.scss b/stylesheets/main.scss index 840f1e9..8e10fcd 100644 --- a/stylesheets/main.scss +++ b/stylesheets/main.scss @@ -6,7 +6,21 @@ li .name { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); border: 1px solid rgba(0, 0, 0, 0.1); } -li .status { float: right; text-transform: capitalize; } +li .status { float: right; text-transform: capitalize; font-size: 0.8em; padding-top: 0.1em; } +li .message-count { + width: 1.2em; + height: 1.2em; + border: 2px solid white; + text-align: center; + margin-left: 0.5em; + font-weight: normal; + font-size: 0.9em; + float: right; + background: black; + color: white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + border-radius: 1em; +} li .good-service { color: green; } li .special-service { color: #000099; } li .part-suspended, li .part-closure, li .minor-delays { color: #CC9900; } @@ -27,7 +41,7 @@ $docklands: #00A4A7; $overground: #EE7C0E; $tramlink: #84B817; -#bakerloo .name { background: $bakerloo; color: white; } +#bakerloo .name { background: $bakerloo; color: white; border-width: 1px; } #central .name { background: $central; color: white; } #circle .name { background: $circle; color: rgb(17, 59, 146); } #district .name { background: $district; color: white; } diff --git a/test-data/now.json b/test-data/now.json new file mode 100644 index 0000000..653d30c --- /dev/null +++ b/test-data/now.json @@ -0,0 +1 @@ +{"response":{"lines":[{"name":"Bakerloo","id":"bakerloo","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 13:43:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Central","id":"central","status":"good service","messages":[],"status_starts":"Wed, 23 Jan 2013 14:09:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Circle","id":"circle","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 11:50:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"District","id":"district","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 11:29:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"DLR","id":"docklands","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 08:33:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"H'smith & City","id":"hammersmithcity","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 01:35:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Jubilee","id":"jubilee","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 09:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Metropolitan","id":"metropolitan","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 12:39:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Northern","id":"northern","status":"good service","messages":[],"status_starts":"Wed, 23 Jan 2013 10:18:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Overground","id":"overground","status":"good service","messages":[],"status_starts":"Tue, 22 Jan 2013 15:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Piccadilly","id":"piccadilly","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 07:02:02 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Victoria","id":"victoria","status":"minor delays","messages":["Minor delays while we fix a signal failure at Highbury & Islington."],"status_starts":"Wed, 23 Jan 2013 16:24:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"},{"name":"Waterloo & City","id":"waterloocity","status":"good service","messages":[],"status_starts":"Mon, 21 Jan 2013 19:58:01 +0000","status_ends":"","status_requested":"Wed, 23 Jan 2013 16:31:31 +0000"}]}} diff --git a/test-data/tomorrow.json b/test-data/tomorrow.json new file mode 100644 index 0000000..90faa4b --- /dev/null +++ b/test-data/tomorrow.json @@ -0,0 +1,149 @@ +{ + "response":{ + "lines":[ + { + "name":"Bakerloo", + "id":"bakerloo", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 13:43:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Central", + "id":"central", + "status":"good service", + "messages":[ + + ], + "status_starts":"Wed, 23 Jan 2013 14:09:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Circle", + "id":"circle", + "status":"good service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 11:50:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"District", + "id":"district", + "status":"part closure", + "messages":[ + "DISTRICT LINE: Sunday 1 March, suspended between Ealing Broadway and Hammersmith." + ], + "status_starts":"Tue, 22 Jan 2013 11:29:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"DLR", + "id":"docklands", + "status":"good service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 08:33:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"H'smith & City", + "id":"hammersmithcity", + "status":"good service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 01:35:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Jubilee", + "id":"jubilee", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 09:39:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Metropolitan", + "id":"metropolitan", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 12:39:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Northern", + "id":"northern", + "status":"good service", + "messages":[ + + ], + "status_starts":"Wed, 23 Jan 2013 10:18:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Overground", + "id":"overground", + "status":"good service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 15:02:02 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Piccadilly", + "id":"piccadilly", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 07:02:02 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Victoria", + "id":"victoria", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 19:31:02 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Waterloo & City", + "id":"waterloocity", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 19:58:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + } + ] + } +} diff --git a/test-data/weekend.json b/test-data/weekend.json new file mode 100644 index 0000000..18ea531 --- /dev/null +++ b/test-data/weekend.json @@ -0,0 +1,150 @@ +{ + "response":{ + "lines":[ + { + "name":"Bakerloo", + "id":"bakerloo", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 13:43:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Central", + "id":"central", + "status":"good service", + "messages":[ + + ], + "status_starts":"Wed, 23 Jan 2013 14:09:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Circle", + "id":"circle", + "status":"special service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 11:50:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"District", + "id":"district", + "status":"major delays", + "messages":[ + "MONUMENT AND BANK STATIONS: Please avoid using Monument Station to interchange with services from Bank.", + "DISTRICT LINE: Sunday 1 March, suspended between Ealing Broadway and Hammersmith." + ], + "status_starts":"Tue, 22 Jan 2013 11:29:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"DLR", + "id":"docklands", + "status":"good service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 08:33:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"H'smith & City", + "id":"hammersmithcity", + "status":"good service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 01:35:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Jubilee", + "id":"jubilee", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 09:39:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Metropolitan", + "id":"metropolitan", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 12:39:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Northern", + "id":"northern", + "status":"part closure", + "messages":[ + + ], + "status_starts":"Wed, 23 Jan 2013 10:18:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Overground", + "id":"overground", + "status":"good service", + "messages":[ + + ], + "status_starts":"Tue, 22 Jan 2013 15:02:02 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Piccadilly", + "id":"piccadilly", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 07:02:02 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Victoria", + "id":"victoria", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 19:31:02 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + }, + { + "name":"Waterloo & City", + "id":"waterloocity", + "status":"good service", + "messages":[ + + ], + "status_starts":"Mon, 21 Jan 2013 19:58:01 +0000", + "status_ends":"", + "status_requested":"Wed, 23 Jan 2013 14:53:42 +0000" + } + ] + } +}