Panel fixes

2018-03-20 22:18:36 +00:00 · 2018-03-20 22:18:36 +00:00 · 7b34834179
commit 7b34834179
parent 65fe1de83e
13 changed files with 446 additions and 528 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
-    "express": "^4.16.2",
-    "fecha": "^2.3.2",
-    "feedme": "^1.1.2",
+    "eslint": "^4.19.0",
+    "express": "^4.16.3",
+    "fecha": "^2.3.3",
+    "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",
-    "node-fetch": "^2.0.0",
+    "mocha": "^5.0.4",
+    "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"
  }
 }
--- a/server/RightByMe.js
+++ b/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];
--- a/server/foursquare.js
+++ b/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
--- a/src/css/custom.scss
+++ b/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";
 ////

--- a/src/css/viewport.scss
+++ b/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;
+
+}
--- a/src/service-worker.js
+++ b/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 = [
--- a/src/v1/index.html
+++ b/src/v1/index.html
@ -24,52 +24,58 @@
 </head>
 <body>

-<div class="mui-container">
-    <div id="greet"></div>
+<div class="appPanel" data-id="main">
+    <div class="mui-container">
+        <div id="greet"></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 id="location" class="mui-row" style="display: none;"></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 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 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 class="mui--text-title cardTitle">Traffic</div>
-        <div id="traffic"></div>
-    </div>
+        <div id="trafficShell" class="mui-panel" style="display: none;">
+            <div class="mui--text-title cardTitle">Traffic</div>
+            <div id="traffic"></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 class="mui--text-title cardTitle">Around me</div>
-        <div id="nearby"></div>
-    </div>
+        <div id="nearbyShell" class="mui-panel" style="display: none;">
+            <div class="mui--text-title cardTitle">Around me</div>
+            <div id="nearby"></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>
-    </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>
+        </div>

-    <div id="weatherShell" class="mui-panel" style="display: none;">
-        <div class="mui--text-title cardTitle">Weather</div>
-        <div id="weather"></div>
+        <div id="weatherShell" class="mui-panel" style="display: none;">
+            <div class="mui--text-title cardTitle">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>

--- a/src/v1/js/Nearby.js
+++ b/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');

--- a/src/v1/js/Weather.js
+++ b/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;
--- a/src/v1/js/WeatherAlert.js
+++ b/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;
--- a/src/v1/js/app.js
+++ b/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';
--- a/src/v1/js/libs/panel.js
+++ b/src/v1/js/libs/panel.js
@ -4,8 +4,8 @@ let panelCount = 0;
 function createPanel(params) {
  const { title, divId } = params;
  const newPanel = `
-
-  <div id="card_${divId}" class="fullscreen" style="display:none;">
+    <div class="appPanel" data-id="${divId}">
+  <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);