Updated nearby places, fixed panels, added a couple of constants, made the listing a bit more flexible

server.js

@@ -91,7 +91,9 @@ app.get('/fsexplore', cache('15 minutes'), (req, res) => {
     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)
+    const query = req.query.hasOwnProperty('query') ? req.query.query : '';
+    console.log('req.query',req.query);
+    foursquare.doGetFourSquareExplore(ll, limit, section, query)
       .then((d) => {
         res.send(d);
       }).catch((e) => {

server/foursquare.js

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

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.787' };
+const CACHE_VERSION = { 'version': '0.0.808' };
 const PRECACHE = `jubileeData-${CACHE_VERSION.version}`;
 const RUNTIME = 'runtime';
 

src/v1/js/NearbyList.js

@@ -20,19 +20,20 @@ const NearbyListModel = Backbone.Model.extend({
   }, 'initialize': function() {
     this.fsCollection = fsCollection;
     this.listenTo(this, 'change:update', this.onChange);
-    this.listenTo(this, 'change:section', this.onChangeSection);
+    this.listenTo(this, 'change:section change:query', this.onChangeSection);
   },
   'onChange': function() {
     this.getNearby();
   },
   'onChangeSection': function() {
-      this.getNearby(true);
-    },
+    this.getNearby(true);
+  },
   'getNearby': function(force = false) {
     const llFixed = this.get('llFixed');
 
     const hour = parseInt((new Date()).getHours().toString(), 10);
-    const section = this.get('section');
+    const section = this.get('section') || '';
+    const query = this.get('query') || '';
     const limit = this.get('limit');
     const time = new Date().getTime() ;
 
@@ -42,6 +43,8 @@ const NearbyListModel = Backbone.Model.extend({
     console.info('>> Nearby:request');
     console.log(`>> Nearby last fetch: ${TimeFormat.fromMs(lastUpdate, 'hh:mm')} ago`);
 
+  //  this.fsCollection.reset( null, { 'silent':true });
+
     if (lastUpdate > 120000 || force)
       request({
         'url': `${window.loc}/fsexplore`,
@@ -49,6 +52,7 @@ const NearbyListModel = Backbone.Model.extend({
         'qs': {
           'll': llFixed,
           'section': section,
+          'query':query,
           'limit': limit
         }
       }, function(err, res, body) {
@@ -111,7 +115,7 @@ const NearbyListView = Backbone.View.extend({
 
     this.$el = addPanel(this.$newPanel);
 
-    //this.$el.empty();
+    // this.$el.empty();
     this.$newPanel.show();
 
     // console.log(this.model);
@@ -126,10 +130,15 @@ const NearbyListView = Backbone.View.extend({
     'click': 'doClick'
 
   }, 'doClick': function(d) {
+    const self = this;
     console.log('Do click', d);
     const id = get(d, 'currentTarget.dataset.id', '');
     console.log(id);
-    this.eventBus.trigger('showVenueDetail', id);
+    this.eventBus.trigger('showVenueDetail', id, () => {
+      console.log('News item panel closed');
+      self.$newPanel.show();
+    });
+    this.$newPanel.hide();
   },
   'render' : function() {
     console.log('>> Do render');

src/v1/js/NearbyPlaces.js

@@ -21,7 +21,8 @@ const FSItemView = Backbone.View.extend({
   },
   'attributes': function() {
     return {
-      'data-section': this.model.get('section')
+      'data-section': this.model.get('section'),
+      'data-query': this.model.get('query')
     };
   },
 
@@ -39,7 +40,9 @@ const NearbyPlacesView = Backbone.View.extend({
     this.list = [
       { 'icon': 'https://ss3.4sqi.net/img/categories_v2/food/default_32.png', 'title':'Restaurants', 'section':'food' },
       { 'icon': 'https://ss3.4sqi.net/img/categories_v2/food/coffeeshop_32.png', 'title':'Cafes', 'section':'coffee' },
-      { 'icon': 'https://ss3.4sqi.net/img/categories_v2/nightlife/default_32.png', 'title':'Bars', 'section':'drinks' }
+      { 'icon': 'https://ss3.4sqi.net/img/categories_v2/nightlife/default_32.png', 'title':'Bars', 'section':'drinks' },
+      { 'icon': 'https://ss3.4sqi.net/img/categories_v2/food/diner_32.png', 'title':'Diner', 'query':'Diner' },
+      { 'icon': 'https://ss3.4sqi.net/img/categories_v2/food/mexican_32.png', 'title':'Mexican Restaurant', 'query':'Mexican' }
     ];
     this.eventBus = options.eventBus;
     this.location = options.location;
@@ -88,8 +91,12 @@ const NearbyPlacesView = Backbone.View.extend({
     console.log('Do click', d);
     const section = get(d, 'currentTarget.dataset.section', '');
     console.log(section);
+    const query = get(d, 'currentTarget.dataset.query', '');
+    console.log(section);
     const llFixed = this.location.get('llFixed');
-    const data = { llFixed, section, 'limit':20 };
+    const data = { llFixed, section, query, 'limit':30 };
+
+    console.log('>> outgoing', data);
 
     this.eventBus.trigger('showNearbyList', data);
   }, 'atHome': function() {

src/v1/js/VenueDetail.js

@@ -47,16 +47,16 @@ const VenueDetailView = Backbone.View.extend({
     this.location = options.location;
 
     this.model.bind('change:details', this.doRender, this);
-    this.eventBus.on('showVenueDetail', this.showNewsPanel, this);
+    this.eventBus.on('showVenueDetail', this.showVenuePanel, this);
   },
 
-  'showNewsPanel': function(id) {
+  'showVenuePanel': function(id, cb = null) {
     console.log('Showing venue details', id);
     const prevId = this.model.get('id');
 
     this.model.set('id', id);
 
-    this.$newPanel = createPanel({ 'title':'Venue details', 'divId':'VenueDetail' });
+    this.$newPanel = createPanel({ 'title':'Venue details', 'divId':'VenueDetail' }, cb);
 
     this.$el = addPanel(this.$newPanel);
 
@@ -119,12 +119,29 @@ const VenueDetailView = Backbone.View.extend({
       '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(','), {
+    const mePoints = this.location.get('ll').split(',');
+    const dest = new L.LatLng(m.latitude, m.longitude);
+    const me = new L.LatLng(mePoints[0], mePoints[1]);
+
+    const pointList = [dest, me];
+
+    const firstpolyline = new L.Polyline(pointList, {
+      'color': 'red',
+      'weight': 3,
+      'opacity': 0.5,
+      'smoothFactor': 1
+    });
+    firstpolyline.addTo(this.map);
+
+    L.marker(dest).addTo(this.map);
+
+    /* var circle =*/
+    L.circle(me, {
       'color': 'blue',
       'fillColor': '#00a6ff',
       'fillOpacity': 0.5,
-      'radius': 10
+      'opacity': 0.5,
+      'radius': 30
     }).addTo(this.map);
 
     // console.log(this.location.attributes);