Added traffic component

server/directions.js

@@ -25,6 +25,7 @@ function doGetEstDirections(olat, olon, dlat, dlon) {
       // Throw err;
 
       const output = reduceEstDirections(body);
+      output.timestamp = new Date().getTime();
 
       console.log(output);
       return resolve(output);

server/reducers/directions.js

@@ -25,19 +25,19 @@ function reduceEstDirections(body = '') {
 
     if ( obj.totalTimeWithTraffic > (obj.totalTime * 1.75)) {
       obj.traffic = 'heavy traffic';
-      obj.class = 'trafficHeavy';
+      obj.className = 'trafficHeavy';
     }
     else if ( obj.totalTimeWithTraffic > (obj.totalTime * 1.5)) {
       obj.traffic = 'some traffic';
-      obj.class = 'trafficMedium';
+      obj.className = 'trafficMedium';
     }
     else if ( obj.totalTimeWithTraffic > (obj.totalTime * 1.25)) {
       obj.traffic = 'light traffic';
-      obj.class = 'trafficLight';
+      obj.className = 'trafficLight';
     }
     else {
       obj.traffic = 'no traffic';
-      obj.class = 'trafficNone';
+      obj.className = 'trafficNone';
     }
   }
 

src/service-worker.js

@@ -11,7 +11,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-const CACHE_VERSION = { 'version': '0.0.323' };
+const CACHE_VERSION = { 'version': '0.0.378' };
 const dataCacheName = 'jubileeData-v1';
 const cacheName = 'jubilee-final-1';
 const filesToCache = [

src/v1/index.html

@@ -43,6 +43,11 @@
         <div id="byme"></div>
     </div>
 
+    <div id="trafficShell" class="mui-panel" style="display: none;">
+        <div class="mui--text-title cardTitle">Traffic</div>
+        <div id="traffic"></div>
+    </div>
+
     <div id="agendaShell" class="mui-panel" style="display: none;">
             <div class="mui--text-title cardTitle">Upcoming events</div>
             <div id="agenda"></div>

src/v1/js/Agenda.js

@@ -116,7 +116,7 @@ const AgendaModel = Backbone.Model.extend({
 });
 
 const AgendaView = Backbone.View.extend({
-  'id':'nearby',
+  'id':'agenda',
   'className': '',
   'initialize': function(options) {
     this.eventBus = options.eventBus;

src/v1/js/Location.js

@@ -93,7 +93,7 @@ const LocationModel = Backbone.Model.extend({
     const llShort = `${Number.parseFloat(latitude).toFixed(1)},${Number.parseFloat(longitude).toFixed(1)}`;
     const moving = true;
 
-    const newLocation = { homeDistance, workDistance, latitude, longitude, atHome, atWork, atHomeOrWork, timestamp, ll, llFixed, llSix, llShort, moving, 'city' : '', 'cityCC':'' };
+    const newLocation = { homeDistance, workDistance, latitude, longitude, atHome, atWork, atHomeOrWork, timestamp, ll, llFixed, llSix, llShort, moving, latlong, 'city' : '', 'cityCC':'' };
 
     // console.log('>> NewLocation', JSON.stringify(newLocation));
     //  const distanceFromLast = distance(current.latitude, current.longitude, latitude, longitude);

src/v1/js/Traffic.js

@@ -0,0 +1,166 @@
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');
+const request = require('request');
+const { get } = require('lodash');
+// const { reduceNearby } = require('./libs/reducers');
+const { toHour } = require('./libs/utils');
+const TimeFormat = require('hh-mm-ss');
+const fecha = require('fecha');
+
+const TrafficModel = Backbone.Model.extend({
+  'defaults' : function (obj) {
+    // return a new object
+    return {
+      'update' : new Date().getTime(),
+      'mode' : 0
+    };
+  }, 'initialize': function() {
+    this.timerID = 0;
+    this.updateID = 0;
+    this.tick();
+    this.listenTo(this, 'change:update change:llFixed', this.getTraffic);
+  },
+  'tick': function() {
+    const hour = (new Date()).getHours();
+
+    // ( ((hour >= 7) && (hour <= 9)) || ((hour >= 17) && (hour <= 19)) )
+    //
+    console.log('this.updateID', this.updateID);
+    if (this.updateID === 0) {
+      this.updateID = 1;
+      this.getTraffic();
+    }
+
+    console.log('tick', this.attributes);
+    console.log('((hour >= 7) && (hour <= 9))', ((hour >= 7) && (hour <= 9)));
+    console.log('((hour >= 17) && (hour <= 19))', ((hour >= 17) && (hour <= 19)));
+    const delay = ( ((hour >= 7) && (hour <= 9)) || ((hour >= 17) && (hour <= 19)) ) ? 600000 : toHour();
+    console.log('Delay', delay);
+    this.timerID = setTimeout(
+      () => this.tick(),
+      delay
+    );
+  },
+  'onChange': function() {
+    this.getTraffic();
+  },
+  'getTraffic': function() {
+    console.log('Get Raffic');
+    // olat, olon, dlat, dlon
+    const time = new Date().getTime() ;
+    const hour = (new Date()).getHours();
+    const latlong = this.get('latlong');
+    let qs;
+
+    let mode = 0;
+
+    // const latlong = { 'lat':latitude, 'lon':longitude };
+    if ((hour >= 7) && (hour <= 9)) {
+      this.set('dest', 'Work');
+      mode = 1;
+      qs = {
+        'olat': latlong.lat, 'olon': latlong.lon, 'dlat': 55.861939, 'dlon': -4.259338
+      };
+    }
+    else if ((hour >= 17) && (hour <= 19)) {
+      mode = 1;
+      this.set('dest', 'Home');
+      qs = {
+        'olat': latlong.lat, 'olon': latlong.lon, 'dlat': 55.942673, 'dlon': -4.556334
+      };
+    }
+    const lastUpdate = time - (this.get('time') || 0);
+    console.log('lastupdate', lastUpdate);
+    console.log(`>> Traffic last fetch: ${TimeFormat.fromMs(lastUpdate, 'hh:mm')} ago`);
+    this.set('mode', mode);
+    if (lastUpdate > 120000 && mode === 1)
+      request({
+        'url': `${window.loc}/traffic`,
+        'method': 'GET',
+        'qs': qs
+      }, function(err, res, body) {
+        if (err)
+          console.error(err);
+        else {
+          console.log('statusCode', res.statusCode);
+          const now = new Date().getTime();
+          const trafficJSON = JSON.parse(body);
+
+          console.log('>> trafficJSON', trafficJSON);
+
+          this.set(trafficJSON);
+          console.log(this.attributes);
+          this.logUpdate();
+        }
+      }.bind(this));
+  }, 'logUpdate': function() {
+    console.log('>> Agenda logging:');
+
+    const time = new Date().getTime() ;
+
+    this.set('time', time);
+  }
+
+});
+
+const TrafficView = Backbone.View.extend({
+  'id':'traffic',
+  'className': '',
+  'initialize': function(options) {
+    this.eventBus = options.eventBus;
+    this.location = options.location;
+
+    this.location.bind('change:llFixed', this.updateLocation, this);
+    this.model.bind('change:timestamp change:mode', this.render, this);
+    this.eventBus.on('focused', this.focused, this);
+
+  }, 'focused': function() {
+    console.log('>> Traffic received focus msg');
+    console.log(this.model.get('time'));
+    if (typeof this.model.get('time') === 'undefined') {
+      return;
+    }
+    const now = new Date().getTime();
+    const since = now - this.model.get('time');
+
+    console.log(`Traffic was last updated: ${TimeFormat.fromMs(since, 'hh:mm')} ago`);
+
+    if (since > (60 * 1000 * 10) )
+          this.model.set('update', now);
+  },
+  'template': _.template(`
+    <div class="">
+    <div><i class="small material-icons mui--align-middle "><%= dest.toLowerCase() %></i> <%=readable%> to <%= dest.toLowerCase() %></div>
+    <div class="<%= className %>"><%=traffic %></div>  
+    
+    </div>
+          `),
+  'updateLocation': function(l) {
+    console.log('>> Nearby Location has changed...');
+
+    if (l.has('atHome')) {
+      const llFixed = l.get('llFixed');
+      const latlong = l.get('latlong');
+      this.model.set({ 'llFixed': llFixed, 'latlong': latlong });
+    }
+    else
+      console.log('>> Nearby No location yet');
+  },
+  'render': function() {
+    console.info('>> Traffic:Render');
+
+    this.$el.empty();
+
+    if (this.model.get('mode') === 0)
+      this.$el.parent().hide();
+    else {
+      console.log(this.template(this.model.attributes));
+      this.$el.html(this.template(this.model.attributes));
+      this.$el.parent().show();
+    }
+  }
+
+});
+
+module.exports = { TrafficModel, TrafficView };

src/v1/js/app.js

@@ -14,6 +14,7 @@ const { NewsModel, NewsView } = require('./News');
 const { NewsCardModel, NewsCardView } = require('./NewsViewer');
 const { ByMeModel, ByMeView } = require('./RightByMe');
 const { AgendaModel, AgendaView } = require('./Agenda');
+const { TrafficModel, TrafficView } = require('./Traffic');
 var app = app || {};
 
 const live = true;
@@ -64,6 +65,8 @@ else
 
   app.agenda = new AgendaView({ 'model': new AgendaModel(), 'eventBus': app.eventBus, 'el':'#agenda' });
 
+  app.traffic = new TrafficView({ 'model': new TrafficModel(), 'eventBus': app.eventBus, 'location': app.locationModel, 'el':'#traffic' });
+
   app.updateOnlineStatus = function(event) {
     if (navigator.onLine)
     // handle online status