Added nearby places list and display

Added spinner to places detail
tidied up some console logging

src/css/spinner.scss

@@ -1,8 +1,9 @@
 $green: #008744;
-$blue: #0057e7;
+$blue: #0fa3ef;
-$red: #d62d20;
+$red: #dc4f43;
-$yellow: #ffa700;
+$yellow: #ffbe39;
 $white: #eee;
+$black: #301010;
 
 // scaling... any units
 $width: 100px;
@@ -80,13 +81,13 @@ body {
     stroke: $red;
   }
   40% {
-    stroke: $blue;
+    stroke: $yellow;
   }
   66% {
-    stroke: $green;
+    stroke: $blue;
   }
   80%,
   90% {
-    stroke: $yellow;
+    stroke: $black;
   }
 }

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.651' };
+const CACHE_VERSION = { 'version': '0.0.684' };
 const dataCacheName = 'jubileeData-v1';
 const cacheName = 'jubilee-final-1';
 const filesToCache = [

src/v1/index.html

@@ -63,6 +63,11 @@
             <div id="nearby"></div>
         </div>
 
+        <div id="nearbyShell" class="mui-panel" style="display: none;">
+                    <div class="mui--text-title cardTitle">Nearby places</div>
+                    <div id="nearbyPlaces"></div>
+        </div>
+
         <div id="newsShell" class="mui-panel" style="display: none;">
             <div class="mui--text-title cardTitle">Latest news</div>
             <div id="news" class="scrolling-wrapper-flexbox"></div>

src/v1/js/Agenda.js

@@ -136,7 +136,7 @@ const AgendaView = Backbone.View.extend({
   'render': function() {
     console.info('>> Agenda:Render');
 
-    console.log('>> Agenda', this.model.agendaCollection);
+    //   console.log('>> Agenda', this.model.agendaCollection);
     this.$el.empty();
 
     if (this.model.agendaCollection.length === 0)

src/v1/js/NearbyList.js

@@ -20,11 +20,15 @@ const NearbyListModel = Backbone.Model.extend({
   }, 'initialize': function() {
     this.fsCollection = fsCollection;
     this.listenTo(this, 'change:update', this.onChange);
+    this.listenTo(this, 'change:section', this.onChangeSection);
   },
   'onChange': function() {
     this.getNearby();
   },
-  'getNearby': function() {
+  'onChangeSection': function() {
+      this.getNearby(true);
+    },
+  'getNearby': function(force = false) {
     const llFixed = this.get('llFixed');
 
     const hour = parseInt((new Date()).getHours().toString(), 10);
@@ -38,7 +42,7 @@ const NearbyListModel = Backbone.Model.extend({
     console.info('>> Nearby:request');
     console.log(`>> Nearby last fetch: ${TimeFormat.fromMs(lastUpdate, 'hh:mm')} ago`);
 
-    if (lastUpdate > 120000)
+    if (lastUpdate > 120000 || force)
       request({
         'url': `${window.loc}/fsexplore`,
         'method': 'GET',
@@ -95,6 +99,7 @@ const NearbyListView = Backbone.View.extend({
   'showNearbyListPanel': function(data) {
     console.log('Showing nearby list', data);
 
+    const prevSection = this.model.get('section');
     const prevll = this.model.get('llFixed');
     const lastTime = this.model.get('last');
     const now = new Date().getTime();
@@ -110,7 +115,7 @@ const NearbyListView = Backbone.View.extend({
     this.$newPanel.show();
 
     // console.log(this.model);
-    if (prevll === data.llFixed)
+    if (prevll === data.llFixed && prevSection === data.section)
       if (now > lastTime + (60 * 1000 * 60)) {
         this.model.set('update', now);
       }

src/v1/js/NearbyPlaces.js

@@ -0,0 +1,105 @@
+/**
+ *
+ * User: Martin Donnelly
+ * Date: 2018-03-29
+ * Time: 21:43
+ *
+ */
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');
+const { get } = require('lodash');
+
+const { FSCollection } = require('./libs/fsbits');
+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"><%= title %></span></span>      `),
+  'initialize': function() {
+    this.render();
+  },
+  'attributes': function() {
+    return {
+      'data-section': this.model.get('section')
+    };
+  },
+
+  'render': function() {
+    // console.log(this.model.attributes);
+    this.$el.html(this.template(this.model.attributes));
+  }
+});
+
+const NearbyPlacesView = Backbone.View.extend({
+  'id':'nearby',
+  'className': '',
+  'initialize': function(options) {
+    this.renderOn = false;
+    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' }
+    ];
+    this.eventBus = options.eventBus;
+    this.location = options.location;
+
+    this.collection = new FSCollection(this.list);
+
+    this.location.bind('change:llFixed', this.updateLocation, this);
+    this.location.bind('change:atHome', this.atHome, this);
+
+    this.$nearby = $('#nearby');
+
+    this.eventBus.on('focused', this.focused, this);
+
+    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 #nearbyOther': 'doMoreClick'
+  },
+  'updateLocation': function(l) {
+    console.log('>> Nearby Location has changed...');
+
+    if (!this.renderOn && l.has('atHome')) {
+      this.renderOn = true;
+      this.render();
+    }
+    else
+      console.log('>> Nearby No location yet');
+  },
+  'render': function() {
+    console.info('>> NearbyPlaces:Render');
+    this.$el.empty();
+
+    this.collection.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);
+
+    if (this.renderOn)
+      this.$el.parent().show();
+    else
+      this.$el.parent().hide();
+  },
+  'doClick': function(d) {
+    console.log('Do click', d);
+    const section = get(d, 'currentTarget.dataset.section', '');
+    console.log(section);
+    const llFixed = this.location.get('llFixed');
+    const data = { llFixed, section, 'limit':20 };
+
+    this.eventBus.trigger('showNearbyList', data);
+  }, 'atHome': function() {
+    if (this.location.get('atHome'))
+      this.$el.parent().hide();
+
+    if (this.renderOn && !this.location.get('atHome'))
+      this.$el.parent().show();
+  }
+
+});
+
+module.exports = { NearbyPlacesView };

src/v1/js/VenueDetail.js

@@ -60,7 +60,7 @@ const VenueDetailView = Backbone.View.extend({
 
     this.$el = addPanel(this.$newPanel);
 
-    this.$el.empty();
+    // this.$el.empty();
     this.$newPanel.show();
 
     if (prevId === id)
@@ -103,6 +103,7 @@ const VenueDetailView = Backbone.View.extend({
       contents.push(templates.tweetsTemplate(m));
 
     contents.push(templates.openInFS(m));
+    this.$el.empty();
     this.$el.html(contents.join(''));
     this.$el.append($map);
 

src/v1/js/app.js

@@ -18,6 +18,7 @@ const { VenueDetailModel, VenueDetailView } = require('./VenueDetail');
 const { AgendaModel, AgendaView } = require('./Agenda');
 const { TrafficModel, TrafficView } = require('./Traffic');
 const { NearbyListModel, NearbyListView } = require('./NearbyList');
+const { NearbyPlacesView } = require('./NearbyPlaces');
 var app = app || {};
 
 const live = true;
@@ -76,6 +77,8 @@ else
 
   app.nearbyList = new NearbyListView({ 'model': new NearbyListModel(), 'eventBus' : app.eventBus });
 
+  app.nearbyPlacesView = new NearbyPlacesView({ 'eventBus': app.eventBus, 'location': app.locationModel, 'el':'#nearbyPlaces' });
+
   app.updateOnlineStatus = function(event) {
     if (navigator.onLine)
     // handle online status