Add test data and fix up buttons.

index.html

@@ -14,7 +14,7 @@
 
       <header role="banner" data-role="header" data-position="fixed">
         <h1>Tube Status</h1>
-        <a href="index.html" data-icon="refresh" class="ui-btn-right">Refresh</a>
+        <a href="/" id="refresh" data-icon="refresh" class="ui-btn-right">Refresh</a>
       </header>
 
       <section role="main" data-role="content">
@@ -25,9 +25,9 @@
       <footer data-role="footer" data-position="fixed">
         <div data-role="navbar">
           <ul>
-            <li><a href="#">Now</a></li>
+            <li><a href="#" id="now" class="ui-btn-active ui-state-persist">Now</a></li>
-            <li><a href="#">Tomorrow</a></li>
+            <li><a href="#" id="tomorrow">Tomorrow</a></li>
-            <li><a href="#">Weekend</a></li>
+            <li><a href="#" id="weekend">Weekend</a></li>
           </ul>
         </div><!-- /navbar -->
       </footer>

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();
+      });
     }
   };
 });

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;

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() {

javascripts/templates/line.mustache

@@ -1 +1,5 @@
-<li id="{{ id }}"><span class="name">{{{ name }}}</span> <span class="status {{ status_class }}">{{ status }}</span></li>
+<li id="{{ id }}">
+  <span class="name">{{{ name }}}</span>
+  {{ #message_count }}<span class="message-count">{{ message_count }}</span>{{ /message_count }}
+  <span class="status {{ status_class }}">{{ status }}</span>
+</li>

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; }
 

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; }

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"}]}}

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"
+         }
+      ]
+   }
+}

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"
+         }
+      ]
+   }
+}