added nearby list and maps to venue cards

package-lock.json

@@ -6296,6 +6296,11 @@
         "invert-kv": "1.0.0"
       }
     },
+    "leaflet": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.3.1.tgz",
+      "integrity": "sha512-adQOIzh+bfdridLM1xIgJ9VnJbAUY3wqs/ueF+ITla+PLQ1z47USdBKUf+iD9FuUA8RtlT6j6hZBfZoA6mW+XQ=="
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",

package.json

@@ -32,6 +32,7 @@
     "hh-mm-ss": "^1.2.0",
     "humanize-duration": "^3.13.0",
     "jquery": "^3.3.1",
+    "leaflet": "^1.3.1",
     "lodash": "^4.17.5",
     "log4js": "^2.5.3",
     "loggy": "^1.0.2",

server.js

@@ -77,14 +77,18 @@ app.get('/weatheralert', cache('15 minutes'), (req, res) => {
 });
 
 app.get('/fsexplore', cache('15 minutes'), (req, res) => {
-  if (req.query.hasOwnProperty('ll'))
-    foursquare.doGetFourSquareExplore(req.query.ll)
+  if (req.query.hasOwnProperty('ll')) {
+    const ll = req.query.ll;
+    const limit = req.query.hasOwnProperty('ll') ? req.query.limit : 3;
+    const section = req.query.hasOwnProperty('section') ? req.query.section : 'topPicks';
+    foursquare.doGetFourSquareExplore(ll, limit, section)
       .then((d) => {
         res.send(d);
       }).catch((e) => {
         logger.error(e);
         res.status(500).send('There was an error!');
       });
+  }
 
   else {
     // throw new Error('Weather: LL missing');
@@ -110,7 +114,7 @@ app.get('/rightbyme', cache('15 minutes'), (req, res) => {
   }
 });
 
-app.get('/nearbydetail'/*, cache('15 minutes')*/, (req, res) => {
+app.get('/nearbydetail', cache('15 minutes'), (req, res) => {
   if (req.query.hasOwnProperty('id'))
     rightbyme.doGetMoreDetail(req.query.id)
       .then((d) => {
@@ -173,7 +177,7 @@ app.get('/agenda', cache('15 minutes'), (req, res) => {
 
 app.get('/traffic', cache('5 minutes'), (req, res) => {
   logger.debug(req.query);
-  if (req.query.hasOwnProperty('olat')) {
+  if (req.query.hasOwnProperty('olat'))
 
     directions.getTraffic(req.query.olat, req.query.olon, req.query.dlat, req.query.dlon)
       .then((d) => {
@@ -182,7 +186,7 @@ app.get('/traffic', cache('5 minutes'), (req, res) => {
         logger.error(e);
         res.status(500).send('There was an error!');
       });
-  }
+
   else {
     // throw new Error('Weather: LL missing');
     logger.warn('FS: oLat missing');

server/directions.js

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

server/foursquare.js

@@ -3,15 +3,15 @@ const foursquare = require('node-foursquare-venues')('IXXFUGW3NC3DEVS2V5EU4NV4CL
 
 logger.level = 'debug';
 
-function doGetFourSquareExplore(ll) {
+function doGetFourSquareExplore(ll, limit = 3, section = 'topPicks') {
   const [lat, long ] = ll.split(',');
 
   return new Promise((resolve, reject) => {
     const fsObj = {
       'll': ll,
-      'section': 'topPicks',
+      'section': section,
       'v': '20170801',
-      'limit': 3,
+      'limit': limit,
       'radius': 800
     };
 

src/css/custom.scss

@@ -419,4 +419,10 @@ li {
   color: #fba010;
 }
 
+#map { height: 180px; }
+
+#bymeImages {
+  margin-bottom: 3px;
+}
+
 @import "./src/css/weather";

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.541' };
+const CACHE_VERSION = { 'version': '0.0.644' };
 const dataCacheName = 'jubileeData-v1';
 const cacheName = 'jubilee-final-1';
 const filesToCache = [
@@ -51,7 +51,19 @@ const filesToCache = [
   '/gfx/snow_d.jpg',
   '/gfx/snow_n.jpg',
   '/gfx/storm_d.jpg',
-  '/gfx/storm_n.jpg'
+  '/gfx/storm_n.jpg',
+  '/fonts/fonts.css',
+  '/fonts/fujicons.css',
+  '/fonts/fujicons.ttf',
+  '/fonts/Roboto-normal-100.woff',
+  '/fonts/Roboto-normal-300.woff',
+  '/fonts/Roboto-normal-400.woff',
+  '/fonts/Roboto-normal-500.woff',
+  '/fonts/Roboto-normal-600.woff',
+  '/fonts/Roboto-normal-900.woff',
+  '/fonts/Roboto_Condensed-normal-300.woff',
+  '/fonts/Roboto_Condensed-normal-400.woff'
+
 ];
 
 self.addEventListener('install', function(e) {

src/v1/index.html

@@ -10,6 +10,9 @@
     <link href="/fonts/fonts.css" rel="stylesheet" type="text/css"/>
     <link href="/fonts/fujicons.css" rel="stylesheet" type="text/css"/>
     <link href="/css/mui.custom.css" rel="stylesheet" type="text/css"/>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
+      integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
+      crossorigin=""/>
 
     <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">

src/v1/js/Nearby.js

@@ -8,39 +8,10 @@ const { toHour } = require('./libs/utils');
 const TimeFormat = require('hh-mm-ss');
 
 const { FSDetailView } = require('./Foursquare');
-
-// console.notificationsTitle = 'Nearby';
-
-const fsItem = Backbone.Model.extend({
-
-});
-
-const FSCollection = Backbone.Collection.extend({
-  'model': fsItem
-});
+const { fsItem, FSCollection, FSItemView } = require('./libs/fsbits');
 
 const fsCollection = new FSCollection();
 
-const fsItemView = Backbone.View.extend({
-  'tagName': 'div',
-  'className': 'itemRow mui--align-middle',
-  'template': _.template(`
-<img class='mui--align-middle' src="<%= icon %>" width="32px" height="32px" style="-webkit-filter: invert(100%);"/><span class="mui--text-dark mui--text-subhead"><%= name %></span> <span class="mui--text-caption mui--text-dark-secondary"><%= category %></span>      `),
-  'initialize': function() {
-    this.render();
-  },
-  'attributes': function() {
-    return {
-      'data-id': this.model.id
-    };
-  },
-
-  'render': function() {
-    console.log(this.model.attributes);
-    this.$el.html(this.template(this.model.toJSON()));
-  }
-});
-
 const NearbyModel = Backbone.Model.extend({
   'defaults' : function (obj) {
     // return a new object
@@ -128,6 +99,8 @@ const NearbyView = Backbone.View.extend({
     this.location = options.location;
     this.fsCollection = fsCollection;
 
+    _.bindAll(this, 'doMoreClick');
+
     // this.model.bind('change', this.render, this);
     this.location.bind('change:llFixed', this.updateLocation, this);
     this.location.bind('change:atHome', this.atHome, this);
@@ -140,7 +113,8 @@ const NearbyView = Backbone.View.extend({
     this.other = $('<div id="nearbyOther" class="cardLink"><i class="seemore fa fa-forward mui--align-middle " ></i> <span class="seemore mui--align-middle">Other locations</span></div>');
   },
   'events': {
-    'click .itemRow': 'doClick'
+    'click .itemRow': 'doClick',
+    'click #nearbyOther': 'doMoreClick'
   },
   'updateLocation': function(l) {
     console.log('>> Nearby Location has changed...');
@@ -162,7 +136,7 @@ const NearbyView = Backbone.View.extend({
     console.log('>> totalResults', totalResults);
     this.$el.empty();
     this.fsCollection.each(function(item) {
-      const fsView = new fsItemView({ 'model': item });
+      const fsView = new FSItemView({ 'model': item });
       this.$el.append(fsView.el);
       // this.$el.append(personView.el); // adding all the person objects.
     }, this);
@@ -183,6 +157,7 @@ const NearbyView = Backbone.View.extend({
     console.log('>> Nearby received focus msg');
     if (!this.model.has('time')) {
       console.log('No time yet');
+
       return ;
     }
     if (this.location.get('atHome')) {
@@ -201,6 +176,17 @@ const NearbyView = Backbone.View.extend({
   }, 'atHome': function() {
     if (this.location.get('atHome'))
       this.$el.parent().hide();
+  },
+  'doMoreClick': function(d) {
+    console.log('Do more click', d);
+
+    const llFixed = this.model.get('llFixed');
+    const section = this.model.get('section');
+    const data = { llFixed, section, 'limit':20 };
+
+  //  console.log('Data', data);
+
+    this.eventBus.trigger('showNearbyList', data);
   }
 
 });

src/v1/js/NearbyList.js

@@ -0,0 +1,149 @@
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');
+const request = require('request');
+const { get } = require('lodash');
+const { reduceNearby } = require('./libs/reducers');
+const { createPanel, addPanel } = require('./libs/panel');
+const TimeFormat = require('hh-mm-ss');
+
+const { FSCollection, FSItemView } = require('./libs/fsbits');
+
+const fsCollection = new FSCollection();
+
+const NearbyListModel = Backbone.Model.extend({
+  'defaults' : function (obj) {
+    // return a new object
+    return {
+      'update' : new Date().getTime()
+    };
+  }, 'initialize': function() {
+    this.fsCollection = fsCollection;
+    this.listenTo(this, 'change:update', this.onChange);
+  },
+  'onChange': function() {
+    this.getNearby();
+  },
+  'getNearby': function() {
+    const llFixed = this.get('llFixed');
+
+    const hour = parseInt((new Date()).getHours().toString(), 10);
+    const section = this.get('section');
+    const limit = this.get('limit');
+    const time = new Date().getTime() ;
+
+    const lastUpdate = time - (this.get('time') || 0);
+
+    console.log('>> Nearby section:', hour, section);
+    console.info('>> Nearby:request');
+    console.log(`>> Nearby last fetch: ${TimeFormat.fromMs(lastUpdate, 'hh:mm')} ago`);
+
+    if (lastUpdate > 120000)
+      request({
+        'url': `${window.loc}/fsexplore`,
+        'method': 'GET',
+        'qs': {
+          'll': llFixed,
+          'section': section,
+          'limit': limit
+        }
+      }, function(err, res, body) {
+        if (err)
+          console.error(err);
+        else {
+          console.log('statusCode', res.statusCode);
+          const fsJSON = JSON.parse(body);
+          const groups = get(fsJSON, 'response.groups');
+          const items = groups[0].items;
+          const newItems = [];
+          this.set('totalResults', get(fsJSON, 'response.totalResults'));
+          for(const item of items)
+            newItems.push(reduceNearby(item));
+
+          this.fsCollection.reset(newItems);
+          this.logUpdate();
+        }
+      }.bind(this));
+  }, 'logUpdate': function() {
+    console.log('NearyList logging:');
+
+    const time = new Date().getTime() ;
+
+    this.set('time', time);
+
+    this.timerID = setTimeout(
+      () => this.tick(),
+      3.6e+6 + 1000
+    );
+  },
+  'tick': function() {
+    console.log('Set update');
+    this.set('update', new Date().getTime());
+  }
+
+});
+
+const NearbyListView = Backbone.View.extend({
+  'initialize': function(options) {
+    this.eventBus = options.eventBus;
+
+    _.bindAll(this, 'doClick');
+
+    this.model.fsCollection.bind('reset', this.render, this);
+    this.eventBus.on('showNearbyList', this.showNearbyListPanel, this);
+  },
+  'showNearbyListPanel': function(data) {
+    console.log('Showing nearby list', data);
+
+    const prevll = this.model.get('llFixed');
+    const lastTime = this.model.get('last');
+    const now = new Date().getTime();
+
+    this.model.set(data);
+
+    this.model.set('update', new Date().getTime());
+    this.$newPanel = createPanel({ 'title':'Nearby', 'divId':'NearbyListP' });
+
+    this.$el = addPanel(this.$newPanel);
+
+    this.$el.empty();
+    this.$newPanel.show();
+
+    // console.log(this.model);
+    if (prevll === data.llFixed)
+      if (now > lastTime + (60 * 1000 * 60)) {
+        this.model.set('update', now);
+      }
+      else {
+        this.render();
+      }
+  }, 'events': {
+    'click': 'doClick'
+
+  }, 'doClick': function(d) {
+    console.log('Do click', d);
+    const id = get(d, 'currentTarget.dataset.id', '');
+    console.log(id);
+    this.eventBus.trigger('showVenueDetail', id);
+  },
+  'render' : function() {
+    console.log('>> Do render');
+
+    console.info('>> Nearby:Render');
+    const totalResults = this.model.get('totalResults');
+    console.log('>> totalResults', totalResults);
+    this.$el.empty();
+    this.model.fsCollection.each(function(item) {
+      const fsView = new FSItemView({ 'model': item });
+      this.$el.append(fsView.el);
+      // this.$el.append(personView.el); // adding all the person objects.
+    }, this);
+
+    this.$el.append(this.other);
+
+    this.$el.find('.itemRow').on('click', this.doClick);
+  }
+
+});
+
+module.exports = { NearbyListModel, NearbyListView };

src/v1/js/RightByMe.js

@@ -42,7 +42,7 @@ const ByMeModel = Backbone.Model.extend({
     clearInterval(this.timerID);
     this.timerID = 0;
 
-    console.log(this.toJSON());
+    //  console.log(this.toJSON());
     // const section = (partOfDay >= 11 && partOfDay <= 14) ? 'food' : 'topPicks';
     request({
       'url': `${window.loc}/rightbyme`,

src/v1/js/Traffic.js

@@ -174,4 +174,21 @@ const TrafficView = Backbone.View.extend({
 
 });
 
+const parts = new Map(
+  [
+    ['0', 'Depart'],
+    ['9', 'left_turn'],
+    ['13', 'right_turn'],
+    ['11', 'continue'],
+    ['23','right_fork'],
+    ['17','left_exit'],
+    ['19', 'left_ramp'],
+    ['29', 'turn'],
+    ['','']
+
+  ]
+
+
+);
+
 module.exports = { TrafficModel, TrafficView };

src/v1/js/VenueDetail.js

@@ -4,6 +4,7 @@ const Backbone = require('backbone');
 const request = require('request');
 const { get, isEmpty } = require('lodash');
 const { createPanel, addPanel } = require('./libs/panel');
+const L = require('leaflet');
 
 const templates = require('./libs/templates');
 
@@ -43,6 +44,7 @@ const VenueDetailModel = Backbone.Model.extend({
 const VenueDetailView = Backbone.View.extend({
   'initialize': function(options) {
     this.eventBus = options.eventBus;
+    this.location = options.location;
 
     this.model.bind('change:details', this.doRender, this);
     this.eventBus.on('showVenueDetail', this.showNewsPanel, this);
@@ -81,11 +83,16 @@ const VenueDetailView = Backbone.View.extend({
     const m = this.model.get('details');
     // this.imagesTemplate(this.model.toJSON()), this.yelpTemplate(this.model.toJSON()), this.tipsTemplate(this.model.toJSON())
 
+    //   console.log(this.model.attributes);
     contents.push(templates.venueTitle(m));
 
+    const $map = $('#map');
+
     if (!isEmpty(m.images))
       contents.push(templates.imagesTemplate(m));
 
+    contents.push(templates.map());
+
     if (!isEmpty(m.yelp))
       contents.push(templates.yelpTemplate(m));
 
@@ -97,7 +104,29 @@ const VenueDetailView = Backbone.View.extend({
 
     contents.push(templates.openInFS(m));
     this.$el.html(contents.join(''));
+    this.$el.append($map);
 
+    this.map = L.map('map', {
+      'center': [m.latitude, m.longitude],
+      'zoom': 15
+    });
+
+    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
+      'attribution': 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+      'maxZoom': 18,
+      'id': 'mapbox.streets',
+      'accessToken': 'pk.eyJ1IjoibWFydGluZDIwMDAiLCJhIjoiY2pmNnlnc3F1MGpoYzJ5bXpscGFwaTlueiJ9.sx1ToptfsUf5HF3-0VVC-Q'
+    }).addTo(this.map);
+
+    /* const marker =*/ L.marker([m.latitude, m.longitude]).addTo(this.map);
+    /* var circle =*/ L.circle(this.location.get('ll').split(','), {
+      'color': 'blue',
+      'fillColor': '#00a6ff',
+      'fillOpacity': 0.5,
+      'radius': 10
+    }).addTo(this.map);
+
+    // console.log(this.location.attributes);
   }
 
 });

src/v1/js/app.js

@@ -17,6 +17,7 @@ const { ByMeModel, ByMeView } = require('./RightByMe');
 const { VenueDetailModel, VenueDetailView } = require('./VenueDetail');
 const { AgendaModel, AgendaView } = require('./Agenda');
 const { TrafficModel, TrafficView } = require('./Traffic');
+const { NearbyListModel, NearbyListView } = require('./NearbyList');
 var app = app || {};
 
 const live = true;
@@ -71,7 +72,9 @@ else
 
   app.traffic = new TrafficView({ 'model': new TrafficModel(), 'eventBus': app.eventBus, 'location': app.locationModel, 'el':'#traffic' });
 
-  app.newsCard = new VenueDetailView({ 'model': new VenueDetailModel(), 'eventBus': app.eventBus });
+  app.newsCard = new VenueDetailView({ 'model': new VenueDetailModel(), 'eventBus': app.eventBus, 'location': app.locationModel });
+
+  app.nearbyList = new NearbyListView({ 'model': new NearbyListModel(), 'eventBus' : app.eventBus });
 
   app.updateOnlineStatus = function(event) {
     if (navigator.onLine)

src/v1/js/libs/fsbits.js

@@ -0,0 +1,34 @@
+const Backbone = require('backbone');
+const _ = require('underscore');
+
+const fsItem = Backbone.Model.extend({
+
+});
+
+const FSCollection = Backbone.Collection.extend({
+  'model': fsItem
+});
+
+// const fsCollection = new FSCollection();
+
+const FSItemView = Backbone.View.extend({
+  'tagName': 'div',
+  'className': 'itemRow mui--align-middle',
+  'template': _.template(`
+<img class='mui--align-middle' src="<%= icon %>" width="32px" height="32px" style="-webkit-filter: invert(100%);"/><span class="mui--text-dark mui--text-subhead"><%= name %></span> <span class="mui--text-caption mui--text-dark-secondary"><%= category %></span>      `),
+  'initialize': function() {
+    this.render();
+  },
+  'attributes': function() {
+    return {
+      'data-id': this.model.id
+    };
+  },
+
+  'render': function() {
+    // console.log(this.model.attributes);
+    this.$el.html(this.template(this.model.toJSON()));
+  }
+});
+
+module.exports = { fsItem, FSCollection, FSItemView };

src/v1/js/libs/templates.js

@@ -59,9 +59,10 @@ const templates = {
   'venueTitle' : _.template(`
   <div class="mui--text-display1 mui--text-center" style="font-weight: 900;"><%=name %></div>
   `),
-    'openInFS' : _.template(`
+  'openInFS' : _.template(`
     <div class=""><a href="https://m.foursquare.com/v/<%=id%>">Open in Foursquare</a></div>
-    `)
+    `),
+  'map': _.template('<div id="map"></div>')
 };
 
 module.exports = templates;