Panel fixes

package.json

@@ -9,35 +9,35 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "apicache": "^1.2.0",
+    "apicache": "^1.2.1",
     "backbone": "^1.3.3",
     "browserify": "^16.1.0",
     "cheerio": "^1.0.0-rc.2",
     "debug-logger": "^0.4.1",
     "elapsed": "0.0.7",
-    "eslint": "^4.18.0",
+    "eslint": "^4.19.0",
-    "express": "^4.16.2",
+    "express": "^4.16.3",
-    "fecha": "^2.3.2",
+    "fecha": "^2.3.3",
-    "feedme": "^1.1.2",
+    "feedme": "^1.2.0",
     "geolocation": "^0.2.0",
-    "gulp-autoprefixer": "^4.1.0",
+    "gulp-autoprefixer": "^5.0.0",
     "gulp-bump": "^3.1.0",
     "gulp-cache": "^1.0.2",
     "gulp-concat": "^2.6.1",
     "gulp-cssnano": "^2.1.2",
     "gulp-html-replace": "^1.6.2",
     "gulp-htmlmin": "^4.0.0",
-    "gulp-inject": "^4.3.0",
+    "gulp-inject": "^4.3.1",
     "gulp-uglify": "^3.0.0",
     "hh-mm-ss": "^1.2.0",
-    "humanize-duration": "^3.12.1",
+    "humanize-duration": "^3.13.0",
     "jquery": "^3.3.1",
     "lodash": "^4.17.5",
     "log4js": "^2.5.3",
     "loggy": "^1.0.2",
     "memory-cache": "^0.2.0",
     "moment": "^2.21.0",
-    "muicss": "^0.9.36",
+    "muicss": "^0.9.38",
     "node-foursquare-venues": "^1.1.0",
     "openweather-apis": "^3.3.5",
     "request-json": "^0.6.3",
@@ -52,23 +52,23 @@
   "devDependencies": {
     "expect.js": "^0.3.1",
     "gulp": "^3.9.1",
-    "gulp-google-webfonts": "0.0.14",
+    "gulp-google-webfonts": "^1.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
     "gulp-scss": "^1.4.0",
     "gulp-sourcemaps": "^2.6.4",
-    "gulp-strip-debug": "^2.0.0",
+    "gulp-strip-debug": "^3.0.0",
     "gulp-uglify-es": "^1.0.1",
     "lodash.assign": "^4.2.0",
-    "mocha": "^5.0.1",
+    "mocha": "^5.0.4",
-    "node-fetch": "^2.0.0",
+    "node-fetch": "^2.1.1",
     "node-geocoder": "^3.22.0",
     "require-dir": "^1.0.0",
     "requirejs": "^2.3.5",
-    "sinon": "^4.3.0",
+    "sinon": "^4.4.6",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "watchify": "^3.10.0",
+    "watchify": "^3.11.0",
     "whatwg-fetch": "^2.0.3"
   }
 }

server/RightByMe.js

@@ -1,4 +1,4 @@
-const logger = require('log4js').getLogger('FSQ');
+const logger = require('log4js').getLogger('RightByMe');
 const foursquare = require('node-foursquare-venues')('IXXFUGW3NC3DEVS2V5EU4NV4CL5E12AYGUPIR2D3U3B5DX4B', 'MZRIJDCEKUMVERA1OKVAIZI0TYAEBD3W2A2AGPTPI5TOLL1D', '20170801');
 const Twitter = require('twitter');
 const yelp = require('yelp-fusion');
@@ -33,7 +33,10 @@ function doFSVenueSearch(ll, data = {}) {
     if (isEmpty(payLoad))
       foursquare.venues.search(fsObj, function(err, fsData) {
         if (err)
+        {
+          logger.debug(err);
           return reject(err);
+        }
         else {
           const venues = get(fsData, 'response.venues');
           if (venues.length > 0) {
@@ -66,7 +69,10 @@ function doFSVenueExplore(ll) {
 
     foursquare.venues.explore(fsObj, function(err, fsData) {
       if (err)
+      {
+        console.log(err);
         return reject(err);
+      }
       else {
         const groups = get(fsData, 'response.groups');
         const items = groups[0];

server/foursquare.js

@@ -16,6 +16,7 @@ function doGetFourSquareExplore(ll) {
     };
 
     foursquare.venues.explore(fsObj, function(err, fsData) {
+      logger.debug(err);
       if (err)
         return reject(err);
       else

src/css/custom.scss

@@ -19,6 +19,7 @@ $mui-link-font-color:   mui-color('yellow', '900') !default;
 
 // import MUI SASS
 @import "./node_modules/muicss/lib/sass/mui";
+@import "./src/css/viewport";
 @import "./src/css/horscroll";
 ////
 

src/css/viewport.scss

@@ -0,0 +1,81 @@
+.viewport {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+/* encapsulate the various syntax in helper clases */
+/* inspired by http://infrequently.org/2009/08/css-3-progress/ */
+
+/* items flex/expand vertically */
+.vbox {
+  /* previous syntax */
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -ms-box-orient: vertical;
+  box-orient: vertical;
+
+  /* current syntax */
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: flex;
+
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.gradient {
+  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ebf1f6+0,abd3ee+50,89c3eb+51,d5ebfb+100;Blue+Gloss+%234 */
+  background: #ebf1f6; /* Old browsers */
+  background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebf1f6', endColorstr='#d5ebfb', GradientType=0); /* IE6-9 */
+}
+
+.backgroundImage {
+  background-image: url(http://via.placeholder.com/411x823);
+}
+
+.appPanel {
+  /* previous syntax */
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -ms-box-flex: 1;
+  box-flex: 1;
+
+  /* current syntax */
+  -webkit-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+
+  height: 100vh;
+  width: 100vw;
+
+  overflow-y: auto;
+  /* background-color: white;*/
+}
+
+[data-id~="main"] {
+  z-index: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+}
+
+[data-id~="news"] {
+  z-index: 1000;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+}

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

src/v1/index.html

@@ -24,52 +24,58 @@
 </head>
 <body>
 
-<div class="mui-container">
+<div class="appPanel" data-id="main">
-    <div id="greet"></div>
+    <div class="mui-container">
+        <div id="greet"></div>
 
-    <div id="location" class="mui-row"  style="display: none;"></div>
+        <div id="location" class="mui-row" style="display: none;"></div>
-</div>
-<div class="mui-container" id="connectionStatus" style="display:none;">
-    <div class="mui--text-center"><i class="large material-icons mui--align-middle  mui--text-center" style="color:grey;">new_releases</i></div>
-<div class="mui--text-body1 mui--text-center">No internet connection</div>
-</div>
-<div class="mui-container" id="viewFrame">
-    <div id="weatherAlertShell" class="mui-panel" style="display: none;">
-        <div id="weatherAlertTitle" class="mui--text-title cardTitle">Weather Alert</div>
-        <div id="weatherAlert"></div>
     </div>
-    <div id="bymeShell" class="mui-panel" style="display: none;">
+    <div class="mui-container" id="connectionStatus" style="display:none;">
-        <div id="byMeTitle" class="mui--text-title cardTitle">By me</div>
+        <div class="mui--text-center"><i class="large material-icons mui--align-middle  mui--text-center"
-        <div id="byme"></div>
+                                         style="color:grey;">new_releases</i></div>
+        <div class="mui--text-body1 mui--text-center">No internet connection</div>
     </div>
+    <div class="mui-container" id="viewFrame">
+        <div id="weatherAlertShell" class="mui-panel" style="display: none;">
+            <div id="weatherAlertTitle" class="mui--text-title cardTitle">Weather Alert</div>
+            <div id="weatherAlert"></div>
+        </div>
+        <div id="bymeShell" class="mui-panel" style="display: none;">
+            <div id="byMeTitle" class="mui--text-title cardTitle">By me</div>
+            <div id="byme"></div>
+        </div>
 
-    <div id="trafficShell" class="mui-panel" style="display: none;">
+        <div id="trafficShell" class="mui-panel" style="display: none;">
-        <div class="mui--text-title cardTitle">Traffic</div>
+            <div class="mui--text-title cardTitle">Traffic</div>
-        <div id="traffic"></div>
+            <div id="traffic"></div>
-    </div>
+        </div>
 
-    <div id="agendaShell" class="mui-panel" style="display: none;">
+        <div id="agendaShell" class="mui-panel" style="display: none;">
             <div class="mui--text-title cardTitle">Upcoming events</div>
             <div id="agenda"></div>
         </div>
 
-    <div id="nearbyShell" class="mui-panel" style="display: none;">
+        <div id="nearbyShell" class="mui-panel" style="display: none;">
-        <div class="mui--text-title cardTitle">Around me</div>
+            <div class="mui--text-title cardTitle">Around me</div>
-        <div id="nearby"></div>
+            <div id="nearby"></div>
-    </div>
+        </div>
 
-    <div id="newsShell" class="mui-panel" style="display: none;">
+        <div id="newsShell" class="mui-panel" style="display: none;">
-        <div class="mui--text-title cardTitle">Latest news</div>
+            <div class="mui--text-title cardTitle">Latest news</div>
-        <div id="news" class="scrolling-wrapper-flexbox"></div>
+            <div id="news" class="scrolling-wrapper-flexbox"></div>
-    </div>
+        </div>
 
-    <div id="weatherShell" class="mui-panel" style="display: none;">
+        <div id="weatherShell" class="mui-panel" style="display: none;">
-        <div class="mui--text-title cardTitle">Weather</div>
+            <div class="mui--text-title cardTitle">Weather</div>
-        <div id="weather"></div>
+            <div id="weather"></div>
+        </div>
     </div>
 </div>
 
 
+
+
+
 <script src="js/vendor.js" async></script>
 <script type='module' src="js/bundle.js" async></script>
 

src/v1/js/Nearby.js

@@ -180,6 +180,10 @@ const NearbyView = Backbone.View.extend({
     const fsdetail = new FSDetailView({ 'fsID':id });
   }, 'focused': function() {
     console.log('>> Nearby received focus msg');
+    if (!this.model.has('time')) {
+      console.log('No time yet');
+      return ;
+    }
     if (this.location.get('atHome')) {
       console.log('Still at home');
 

src/v1/js/Weather.js

@@ -199,6 +199,11 @@ const WeatherView = Backbone.View.extend({
     this.eventBus.trigger('showForecast', llFixed);
   }, 'focused': function() {
     console.log('>> Weather 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;

src/v1/js/WeatherAlert.js

@@ -168,6 +168,11 @@ const WeatherAlertView = Backbone.View.extend({
     }
   }, 'focused': function() {
     console.log('>> WeatherAlert 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;

src/v1/js/app.js

@@ -17,7 +17,7 @@ const { AgendaModel, AgendaView } = require('./Agenda');
 const { TrafficModel, TrafficView } = require('./Traffic');
 var app = app || {};
 
-const live = true;
+const live = false;
 
 if (live) {
   window.loc = 'https://jubilee.silvrtree.co.uk';

src/v1/js/libs/panel.js

@@ -4,8 +4,8 @@ let panelCount = 0;
 function createPanel(params) {
   const { title, divId } = params;
   const newPanel = `
-
+    <div class="appPanel" data-id="${divId}">
-  <div id="card_${divId}" class="fullscreen" style="display:none;">
+  <div id="card_${divId}" class="fullscreen" style="display:;">
   <header class="header">
       <div class="mui-appbar mui--appbar-line-height mui--z1" style="vertical-align:middle;">
            <span>
@@ -27,7 +27,7 @@ function createPanel(params) {
    
  <!-- end fullscreen-->   
   </div>
-          
+          </div>
   `;
 
   const $newPanel = $(newPanel);