Added weather forcast card and service

src/css/custom.scss

@@ -16,9 +16,6 @@ $mui-appbar-font-color: mui-color('black') !default;
 
 $mui-link-font-color:   mui-color('yellow', '900') !default;
 
-
-
-
 // import MUI SASS
 @import "./node_modules/muicss/lib/sass/mui";
 @import "./src/css/horscroll";
@@ -400,7 +397,9 @@ li {
 
 #weatherP {
   background-size: cover;
-
+  color:white;
+  font-family: 'Roboto';
+  font-weight: 100;
 }
 
 .weatherDay {
@@ -463,7 +462,7 @@ li {
 
 
 .glassy {
-    background-color: rgba(255, 255, 255, 0.4);
+    background-color: rgba(0,0,0, 0.4);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(2px);
 }

src/css/horscroll.scss

@@ -26,7 +26,8 @@
 
 .hourlyCard {
   width: 42px;
-  height:70px
+  height:70px;
+  background: transparent;
 }
 
 .imageCard {

src/fonts.list

@@ -0,0 +1,5 @@
+Roboto+Condensed
+Roboto+Condensed:300
+Roboto+Mono
+Roboto
+Roboto:100

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

src/v1/index.html

@@ -8,16 +8,17 @@
 
     <link href="//cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css" rel="stylesheet" type="text/css"/>
     <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link href="/fonts/fonts.css" rel="stylesheet" type="text/css"/>
     <link href="/css/mui.custom.css" rel="stylesheet" type="text/css"/>
 
     <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
-        <link rel="manifest" href="/site.webmanifest">
+    <link rel="manifest" href="/site.webmanifest">
-        <link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#5bbad5">
+    <link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#5bbad5">
-        <meta name="apple-mobile-web-app-title" content="Train Times">
+    <meta name="apple-mobile-web-app-title" content="Train Times">
-        <meta name="application-name" content="Train Times">
+    <meta name="application-name" content="Train Times">
-        <meta name="theme-color" content="#ffffff">
+    <meta name="theme-color" content="#ffffff">
 
 
 </head>

src/v1/js/Forecast.js

@@ -6,10 +6,18 @@ const { get, isEmpty } = require('lodash');
 const { createPanel, addPanel } = require('./libs/panel');
 
 const ForecastModel = Backbone.Model.extend({
-  'initialize': function() {
+  'defaults': function (obj) {
-    this.listenTo(this, 'change:ll', this.newGuid);
+    // return a new object
+    return {
+      'update': new Date().getTime(),
+      'last': new Date().getTime()
+    };
   },
-  'newGuid': function() {
+  'initialize': function() {
+    this.listenTo(this, 'change:ll', this.onChange);
+    this.listenTo(this, 'change:update', this.onChange);
+  },
+  'onChange': function() {
     console.log('>> LL changed:', this.get('ll'));
     this.getForecast();
   },
@@ -28,7 +36,7 @@ const ForecastModel = Backbone.Model.extend({
         // console.log(body);
         const fsJSON = JSON.parse(body);
         // console.log(fsJSON);
-
+        fsJSON.last = new Date().getTime();
         this.set(fsJSON);
         // console.log(body);
       }
@@ -50,7 +58,7 @@ const ForecastView = Backbone.View.extend({
   },
 
   'templateCurrently': _.template(`
-  <div class="forecastCurrently mui-container-fluid glassy">
+  <div class="forecastCurrently mui-panel glassy">
         <div class="mui--text-title"><i class="wi wi-forecast-io-<%= icon %>"></i> <%=summary%></div>
         <div>
         <i class="small material-icons mui--align-middle " >vertical_align_top</i><%=tempMax%>°
@@ -60,7 +68,7 @@ const ForecastView = Backbone.View.extend({
   </div>
         `),
   'templateForecast': _.template(`
-  <div class="forecastToday mui-container-fluid glassy">
+  <div class="forecastToday mui-panel glassy">
   <h3>Forecast</h3>
   <div  class='scrolling-wrapper-flexbox hourly' style="height: 100px;">
           <%_.forEach(today, function(i) {%>
@@ -88,7 +96,7 @@ const ForecastView = Backbone.View.extend({
   </div>
   `),
   'templateDetails': _.template(`
-  <div class="forecastDetails mui-container-fluid glassy">
+  <div class="forecastDetails mui-panel glassy">
   <h3>Details</h3>
   <div class="mui-row">
         <div class="mui-col-xs-6 mui--text-left mui--text-body2">Humidity</div>
@@ -128,7 +136,10 @@ const ForecastView = Backbone.View.extend({
   'showForecastPanel': function(ll) {
     console.log('Showing forecast', ll);
     const prevll = this.model.get('ll');
+    const lastTime = this.model.get('last');
+    const now = new Date().getTime();
 
+    // (60 * 1000 * 60)
     const hour = (new Date()).getHours();
     this.model.set('ll', ll);
 
@@ -145,8 +156,14 @@ const ForecastView = Backbone.View.extend({
     this.$el.empty();
     this.$newPanel.show();
 
+    console.log(this.model);
     if (prevll === ll)
-      this.doRender();
+      if (now > lastTime + (60 * 1000 * 60)) {
+        this.model.set('update', now);
+      }
+      else {
+        this.doRender();
+      }
   },
   'events': {
     'click .closebutton': 'doClick'
@@ -168,10 +185,11 @@ const ForecastView = Backbone.View.extend({
     const currently = this.model.get('currently');
     const forcastToday = { 'today':this.model.get('forcastToday'), 'daily':this.model.get('dailyForecast') };
     const details = this.model.get('details');
-
+html.push('<div class="mui-container">');
     html.push(this.templateCurrently(currently));
     html.push(this.templateForecast(forcastToday));
     html.push(this.templateDetails(details));
+    html.push('</div>');
     html.push('<div class="endbumper"></div>');
 
     this.$el.addClass(this.backgroundGen(currently.icon));