legend v1

assets/www/index.html

@@ -18,7 +18,7 @@
     <div class="app-panel from-left out" id="legend-panel">
       <header role="banner" class="top app-navbar">
         <a class="nav-btn nav-btn-right" href="#view"><i class="icon-remove"></i></a>
-        <h1></h1>
+        <h1>Legend</h1>
       </header>
       <div class="content" id="legend-content"></div>
     </div>
@@ -137,6 +137,10 @@ <h1></h1>
           currentTimeseries.add(timeseries);
           currentTimeseries.save();
         }, this);
+        Backbone.Mediator.subscribe('timeseries:delete', function(timeseries) {
+          currentTimeseries.remove(timeseries);
+          currentTimeseries.save();
+        }, this);
       });
     </script>
 

assets/www/js/router.js

@@ -2,6 +2,7 @@ var AppRouter = Backbone.Router.extend({
   routes: {
     'view':        'view',
     'add':         'add',
+    'add/:tab':         'addTab',
     'legend':      'legend',
     'settings':      'settings',
     '*actions':    'defaultAction'
@@ -19,6 +20,10 @@ var AppRouter = Backbone.Router.extend({
     //console.log("route:add");
     navigateToPage("#add-page");
   },
+  addTab: function(tab) {
+    navigateToPage("#add-page");
+    $('#add-content a[href="#tab-' + tab + '-content"]').tab('show');
+  },
   legend: function() {
     //console.log("route:legend");
     openPanel("#legend-panel");

assets/www/js/views/legend.js

@@ -1,21 +1,37 @@
 var LegendView = Backbone.View.extend({
   tagName: 'ul',
   className: 'list timeseries',
+  actions: [
+    {
+        'icon': 'icon-trash',
+        'callback': 'timeseries:delete'
+    },
+    {
+      'icon': 'icon-screenshot',
+      'callback': 'station:locate',
+      'navigate': '#add/map'
+    }
+  ],
 
   initialize: function(){
     this.listenTo(this.collection, 'add', this.render);
+    this.listenTo(this.collection, 'remove', this.render);
   },
 
   render: function() {
     this.$el.empty();
 
+    if (this.collection.length == 0) {
+      this.$el.html("No current timeseries.<br/>Go on, <a href='#add'>add</a> one.");
+    }
+
     list = this.$el;
+    actions = this.actions;
     this.collection.each(function(timeserie){
-      stationView = new TimeserieView({'model': timeserie});
-      list.append(stationView.render().el);
+      tsView = new TimeserieView({'model': timeserie, 'actions': actions});
+      list.append(tsView.render().el);
     });
 
     return this;
-  }
-
+  },
 });

assets/www/js/views/map.js

@@ -6,7 +6,11 @@ var MapView = Backbone.View.extend({
     me = this;
 
     me.listenTo(this.collection, 'reset', me.drawStations);
-    //mediator listen to loading -> draw stations
+
+    Backbone.Mediator.subscribe('station:locate', function(timeseries) {
+      me.map.geomap("option", "center", timeseries.get('location').coordinates);
+      me.map.geomap("option", "zoom", 16)
+    }, this);
   },
 
   render: function() {

assets/www/js/views/stations.js

@@ -29,11 +29,7 @@ var StationView = Backbone.View.extend({
     {
       'icon': 'icon-plus',
       'callback': 'timeseries:add'
-    },
-    {
-      'icon': 'icon-trash',
-      'callback': 'timeseries:delete'
-    },
+    }    
   ],
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));

assets/www/js/views/templates/timeserie-list-entry.hbs

@@ -20,7 +20,11 @@
   </div>
   <div class="element">
     {{#each actions}}
-      <span class="action" data-action="{{callback}}">
+      <span class="action" data-action="{{callback}}" 
+      {{#if navigate}}
+        data-navigate="{{navigate}}"
+      {{/if}}
+      >
         <i class="{{icon}}"></i>
       </span>
     {{/each}}

assets/www/js/views/timeseries.js

@@ -25,7 +25,7 @@ var TimeserieView = Backbone.View.extend({
   template: Handlebars.helpers.getTemplate('timeserie-list-entry'),
 
   events: {
-    'click .action': 'perform' 
+    'click .action': 'perform'
   },
 
   render: function() {
@@ -40,6 +40,11 @@ var TimeserieView = Backbone.View.extend({
     callback = $(e.currentTarget).data('action');
 
     Backbone.Mediator.publish(callback, this.model);
+
+    navigate = $(e.currentTarget).data('navigate');
+    if (navigate) {
+      window.location.href = navigate;
+    }
   }
 
 });