Added some Edge specific things, tidied the news layering, added a panel callback system for layered panels.

gulp/backbone.js

@@ -32,6 +32,27 @@ gulp.task('bundleBackbone', function () {
     .pipe(gulp.dest('./live/js'));
 });
 
+gulp.task('liveBackbone', function () {
+  // set up the browserify instance on a task basis
+  const b = browserify({
+    'debug': true,
+    'entries': './src/v1/js/app.js'
+  });
+
+  return b.bundle()
+    .pipe(source('app.js'))
+    .pipe(buffer())
+    .pipe(stripDebug())
+    .pipe(rename('bundle.js'))
+
+    .pipe(sourcemaps.init({ 'loadMaps': true }))
+  // Add transformation tasks to the pipeline here.
+    // .pipe(uglify())
+    .on('error', gutil.log)
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('./live/js'));
+});
+
 gulp.task('bump', function() {
   gulp.src('src/service-worker.js')
     .pipe(bump({ 'key': 'version' }))

gulpfile.js

@@ -5,3 +5,6 @@ const requireDir = require('require-dir');
 requireDir('./gulp');
 
 gulp.task('default', ['bundleBackbone', 'styles', 'copy', 'customMUI', 'vendor', 'fonts', 'gotham', 'fujicons']);
+
+
+gulp.task('live', ['liveBackbone', 'styles', 'copy', 'customMUI', 'vendor', 'fonts', 'gotham', 'fujicons']);

server/reducers/weather.js

@@ -146,6 +146,8 @@ module.exports = { reduceWeather };
 //
 /*
 moonPhase optional, only on daily
-The fractional part of the lunation number during the given day: a value of 0 corresponds to a new moon, 0.25 to a first quarter moon, 0.5 to a full moon, and 0.75 to a last quarter moon. (The ranges in between these represent waxing crescent, waxing gibbous, waning gibbous, and waning crescent moons, respectively.)
+The fractional part of the lunation number during the given day: a value of 0 corresponds to a new moon, 0.25 to a first quarter
+moon, 0.5 to a full moon, and 0.75 to a last quarter moon. (The ranges in between these represent waxing crescent, waxing gibbous,
+waning gibbous, and waning crescent moons, respectively.)
 
  */

src/css/custom.scss

@@ -355,6 +355,8 @@ li {
 #news{
   height: 200px;
   margin-top:15px;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
 }
 
 #byme, #bymeYelp {

src/css/weather.scss

@@ -6,6 +6,10 @@
   font-weight: 200;
 }
 
+.hourly {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
 .weatherDay {
   background-image: url(../gfx/bg_morning.jpg);
 }

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

src/v1/index.html

@@ -20,7 +20,7 @@
     <link rel="manifest" href="/site.webmanifest">
     <link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#5bbad5">
     <meta name="apple-mobile-web-app-title" content="Train Times">
-    <meta name="application-name" content="Train Times">
+    <meta name="application-name" content="Sidekick">
     <meta name="theme-color" content="#ffffff">
 
 

src/v1/js/Forecast.js

@@ -5,6 +5,7 @@ const request = require('request');
 const { get, isEmpty } = require('lodash');
 const { createPanel, addPanel } = require('./libs/panel');
 const templates = require('./libs/templates');
+const TimeFormat = require('hh-mm-ss');
 
 const ForecastModel = Backbone.Model.extend({
   'defaults': function (obj) {
@@ -41,8 +42,27 @@ const ForecastModel = Backbone.Model.extend({
         fsJSON.last = new Date().getTime();
         this.set(fsJSON);
         // console.log(body);
+
+        this.logUpdate();
       }
     }.bind(this));
+  }, 'logUpdate': function() {
+    console.log('Forecast logging:');
+
+    const log = { 'lat' : this.get('latitude'), 'long': this.get('longitude'), 'time': new Date().getTime() };
+
+    this.set('log', log);
+
+    this.timerID = setTimeout(
+      () => this.tick(),
+      3.6e+6 + 1000
+    );
+
+    // console.log(this);
+  },
+  'tick': function() {
+    console.log('Set update');
+    this.set('update', new Date().getTime());
   }
 
 });
@@ -57,6 +77,7 @@ const ForecastView = Backbone.View.extend({
 
     this.model.bind('change:time', this.doRender, this);
     this.eventBus.on('showForecast', this.showForecastPanel, this);
+    this.eventBus.on('focused', this.focused, this);
   },
 
   'showForecastPanel': function(ll) {
@@ -170,6 +191,21 @@ const ForecastView = Backbone.View.extend({
     }
 
     return output;
+  }, 'focused': function() {
+    console.log('>> Forecast received focus msg');
+    if (!this.model.has('log')) {
+      console.log('No log yet');
+
+      return ;
+    }
+    const now = new Date().getTime();
+    const log = this.model.get('log');
+    const since = now - log.time;
+
+    console.log(`Forecast was last updated: ${TimeFormat.fromMs(since, 'hh:mm')} ago`);
+
+    if (since > (60 * 1000 * 60) )
+      this.model.set('update', now);
   }
 
 });

src/v1/js/NewsList.js

@@ -122,9 +122,14 @@ const NewsListView = Backbone.View.extend({
 
   }, 'doClick': function(d) {
     //  console.log('Do click', d);
+    let self = this;
     const id = get(d, 'currentTarget.dataset.guid', '');
     console.log(id);
-    this.eventBus.trigger('showNews', id);
+    this.eventBus.trigger('showNews', id, () => {
+      console.log('News item panel closed');
+      this.$newPanel.show();
+    });
+    this.$newPanel.hide();
   },
   'render' : function() {
     console.log('>> Do render');

src/v1/js/NewsViewer.js

@@ -52,24 +52,24 @@ const NewsCardView = Backbone.View.extend({
 
   'template': _.template(`
   <div class="newsarticle">
-        <div><img src="<%= image %>"></div>
+        <div style="text-align: center;"><img src="<%= image %>"></div>
         <div class="mui-container" style="margin-bottom:  50px;">
         <div><h1><%= title %></h1></div>
         <div><%= html %></div>
         </div>
   </div>
         `),
-  'showNewsPanel': function(guid) {
+  'showNewsPanel': function(guid, cb = null) {
     console.log('Showing news', guid);
     const prevGuid = this.model.get('guid');
 
     this.model.set('guid', guid);
 
-    this.$newPanel = createPanel({ 'title':'News', 'divId':'newsP' });
+    this.$newPanel = createPanel({ 'title':'News', 'divId':'newsP' }, cb);
 
     this.$el = addPanel(this.$newPanel);
 
-   // this.$el.empty();
+    // this.$el.empty();
     this.$newPanel.show();
 
     if (prevGuid === guid)

src/v1/js/app.js

@@ -21,7 +21,7 @@ const { NearbyListModel, NearbyListView } = require('./NearbyList');
 const { NearbyPlacesView } = require('./NearbyPlaces');
 var app = app || {};
 
-const live = true;
+const live = false;
 
 if (live) {
   window.loc = 'https://jubilee.silvrtree.co.uk';
@@ -49,7 +49,12 @@ if (live) {
   }
 }
 else {
-  window.loc = 'http://localhost:8110';
+  console.log('window.location', window.location.origin);
+
+  const url = new URL(window.location.origin);
+  console.log('url', url);
+
+  window.loc = url.origin;
   main();
 }
 

src/v1/js/libs/panel.js

@@ -1,7 +1,7 @@
 const $ = require('jquery');
 let panelCount = 0;
 
-function createPanel(params) {
+function createPanel(params, cb = null) {
   const { title, divId } = params;
   const newPanel = `
     <div class="appPanel" data-id="${divId}">
@@ -52,9 +52,15 @@ function createPanel(params) {
     $newPanel.hide().remove();
     console.log('panelCount', panelCount);
     panelCount--;
-    if (panelCount === 0)
+    if (panelCount === 0) {
       console.log('Removing panel stuff');
       $body.removeClass('stop-scrolling').unbind('touchmove');
+    }
+
+    if (cb !== null) {
+      console.log('trying close cb');
+      cb();
+    }
   }
 
   return $newPanel;
@@ -63,7 +69,8 @@ function createPanel(params) {
 function addPanel($newPanel) {
   const $body = $('body');
   const $content = $newPanel.find('.content');
-  $body.append($newPanel);
+  // $body.append($newPanel);
+  $body.prepend($newPanel);
   if (panelCount === 0) {
     $body.addClass('stop-scrolling');
     $body.bind('touchmove', function(e) {
@@ -72,7 +79,6 @@ function addPanel($newPanel) {
   }
   panelCount++;
 
-
   return $content;
 }