events and weather

app/app.js

@@ -1,100 +1,4 @@
 (function() {
-  let lastGBP = 0.0,
-    lastUSD = 0.0,
-    _fasttimer, _slowTimer, myBTC = 3.49524333;
-  let lows = {
-      gbp: 0,
-      usd: 0
-    },
-    highs = {
-      gbp: 0,
-      usd: 0
-    };
-
-  let list = [{
-    title: '101B ends',
-    y: 2013,
-    m: 9,
-    d: 24,
-    add: 1001
-  },
-  {
-    title: 'Ends',
-    y: 2016,
-    m: 4,
-    d: 4
-  }];
-
-  let self = this;
-
-  let addDays = function(myDate, days) {
-    return new Date(myDate.getTime() + days * 24 * 60 * 60 * 1000);
-  };
-
-  let getDays = function(startdate, enddate) {
-    let r, s, e;
-    s = startdate.getTime();
-    e = enddate.getTime();
-    r = (e - s) / (24 * 60 * 60 * 1000);
-    return r;
-  };
-
-  let tick = function() {
-    let today = new Date();
-    let start101 = new Date();
-    let end101;
-    let endContract = new Date();
-    let third = new Date();
-    start101.setFullYear(2013, 9, 24);
-    end101 = addDays(start101, 1001);
-    endContract.setFullYear(2017, 6, 5);
-    third.setFullYear(2013, 7, 25);
-    /*$('#one').text('101B ends: ' + Math.ceil(getDays(today,
-        end101)) + ' days / ' + Math.ceil(getDays(today,
-          end101) / 7) + ' weeks');*/
-      $('#one').hide();
-    $('#two').text('Ends: ' + Math.ceil(getDays(today,
-        endContract)) + ' days / ' + Math.ceil(getDays(today,
-          endContract) / 7) + ' weeks');
-    $('#three').hide();
-  };
-
-  let get_weather = function() {
-    navigator.geolocation.getCurrentPosition(show_weather);
-  };
-
-  this.bind('displayWeather', function(data) {
-    $('#weather').html(data.currently.summary + ' ' + data.currently.temperature + '&deg;c&nbsp;<em>' + data.daily.summary + '</em>');
-  });
-
-  var show_weather = function(position) {
-    let latitude = position.coords.latitude;
-    let longitude = position.coords.longitude;
-    // let's show a map or do something interesting!
-    $.ajax({
-      type: 'GET',
-      url: 'https://api.forecast.io/forecast/9ad2a41d420f3cf4960571bb886f710c/' + latitude.toString() + ',' + longitude.toString() + '?units=uk2',
-      data: '',
-      dataType: 'jsonp',
-      timeout: 10000,
-      context: $('body'),
-      contentType: ('application/json'),
-      headers: {
-        'Access-Control-Allow-Origin': '*',
-        'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
-        'Access-Control-Allow-Headers': 'Content-Type'
-      },
-      success: function(data) {
-        self.trigger('displayWeather', data);
-      },
-      error: function(xhr, type) {
-        console.log('ajax error');
-        console.log(xhr);
-        console.log(type);
-      }
-    });
-  };
-
 
   let formatPassword = function(data) {
     let dest$ = $('#passwordOut');
@@ -132,15 +36,6 @@
     });
   };
 
-  tick();
-  get_weather();
-
-  _slowTimer = setInterval(function() {
-
-    get_weather();
-  }, (60000 * 15));
-
-
   $('#newPassword').on('click', function() {
     generatePassword();
   });

app/js/modules/events.js

@@ -0,0 +1,55 @@
+/**
+ * Created by mdonnel on 10/04/2017.
+ */
+let EventModel = Backbone.Model.extend({
+  initialize: function () {
+    this.update();
+  },
+  getDays : function(startdate, enddate) {
+      let r, s, e;
+      s = startdate.getTime();
+      e = enddate.getTime();
+      r = (e - s) / (24 * 60 * 60 * 1000);
+      return r;
+    },
+  update: function () {
+    const now = new Date
+    const mod = 3600000 - (now.getTime() % 3600000)
+    let data = {};
+    data.days = Math.ceil(this.getDays(now, this.get('event')));
+    data.weeks = Math.ceil(this.getDays(now, this.get('event')) / 7);
+    this.set('data', data);
+
+    const clockFn = function () {
+      this.update()
+    }
+
+    setTimeout(clockFn.bind(this), mod + 10)
+  }
+});
+
+let EventView = Backbone.View.extend({
+    tagName: 'div',
+    initialize: function () {
+        _.bindAll(this, 'render');
+        this.model.bind('change', this.render);
+        this.id = 'e_' + Math.random().toString(36).substr(2, 9);
+        this.$events = $('#events');
+        this.$myEvent = null;
+        this.$el = this.$events;
+        this.initView();
+        this.render();
+    },
+    render: function () {
+      let label = this.model.get('label');
+      let data = this.model.get('data');
+      let str = `${label} ${data.days} days / ${data.weeks} weeks`;
+      this.$myEvent.empty().append(str);
+    },
+    initView: function () {
+        let html = `<div class='mui-col-xs-3 mui-col-md-3' id="${this.id}"></div>`;
+        this.$html = $(html);
+        this.$events.append(this.$html);
+        this.$myEvent = $(`#${this.id}`);
+    }
+});

app/js/modules/weather.js

@@ -6,23 +6,24 @@
  *
  */
 
-var WeatherModel = Backbone.Model.extend({
+let WeatherModel = Backbone.Model.extend({
   initialize: function() {
-    this.set('url','https://api.darksky.net/forecast/9ad2a41d420f3cf4960571bb886f710c/' + this.get('lat').toString() + ',' + this.get('long').toString() + '?units=uk2&exclude=minutely,hourly,daily,alerts,flags');
-
-    console.log(this.get('url'));
-   // this.update();
+    let geo  = this.get('geo');
+    this.set('url','https://api.darksky.net/forecast/9ad2a41d420f3cf4960571bb886f710c/' + geo.coords.latitude.toString() + ',' + geo.coords.longitude.toString() + '?units=uk2&exclude=minutely,hourly,alerts,flags');
+    this.update();
   },
   update: function() {
     this.getWeather();
-    var now = new Date;
-    var mod = 1800000 - (now.getTime() % 1800000);
-    var weatherTrigger = function() {
+    let now = new Date;
+    let mod = 1800000 - (now.getTime() % 1800000);
+    let weatherTrigger = function() {
       this.update();
     };
+
+    setTimeout(weatherTrigger.bind(this), mod + 10);
   },
   getWeather: function() {
-    var self = this;
+    let self = this;
     $.ajax({
             type: 'GET',
             url: self.get('url'),
@@ -40,7 +41,8 @@ var WeatherModel = Backbone.Model.extend({
               var stored = {
                 temperature: data.currently.temperature,
                 icon: data.currently.icon,
-                summary: data.currently.summary
+                summary: data.currently.summary,
+                daily: data.daily.summary
               };
               self.set(stored);
             },
@@ -53,7 +55,7 @@ var WeatherModel = Backbone.Model.extend({
   }
 });
 
-var Weather = Backbone.View.extend({
+let Weather = Backbone.View.extend({
   tagName: 'div',
   initialize: function() {
     _.bindAll(this, 'render');
@@ -74,3 +76,24 @@ var Weather = Backbone.View.extend({
   }
 
 });
+
+let WeatherSlim = Backbone.View.extend({
+  tagName: 'div',
+  initialize: function() {
+    _.bindAll(this, 'render');
+    this.model.bind('change', this.render);
+    this.$weather = $('#weather');
+    this.render();
+  },
+  render: function() {
+
+    let summary = this.model.get('summary');
+    let temp = this.model.get('temperature');
+    let daily = this.model.get('daily');
+
+    let ws = `${summary} ${temp}&deg;&nbsp;<em>${daily}</em>`;
+
+    this.$weather.empty().html(ws);
+  }
+
+});

bower.json

@@ -16,5 +16,6 @@
     "tests"
   ],
   "dependencies": {
+    "moment": "^2.18.1"
   }
-}
+}

gulpfile.js

@@ -20,19 +20,10 @@ let filePath = {
 
 let dest = 'app/live';
 
-
 let fontOptions = { };
-/*
-<script src="libs/ejs.js"></script>
-<script src="libs/underscore.js"></script>
-<script src="libs/backbone.js"></script>
-<script src="js/modules/bitcoin.js"></script>
-<script src="js/modules/fx.js"></script>
-<script src="js/modules/train.js"></script>
-<script src="app.js"></script>
- */
+
 gulp.task('appJS', function() {
-    return gulp.src(['app/js/modules/bitcoin.js','app/js/modules/fx.js','app/js/modules/train.js','app/app.js'])
+    return gulp.src(['app/js/modules/events.js', 'app/js/modules/bitcoin.js', 'app/js/modules/fx.js', 'app/js/modules/train.js','app/js/modules/weather.js', 'app/app.js'])
          .pipe(stripDebug())
         .pipe(jshint('.jshintrc'))
         .pipe(jshint.reporter('default'))

views/pages/slackV2-min.ejs

@@ -12,10 +12,8 @@
     <div class="mui--appbar-height">
     </div>
     <div id="container" class="mui-panel">
-        <div class="mui-row">
-            <div class="mui-col-md-3" id="one"></div>
-            <div class="mui-col-md-3 " id="two"></div>
-            <div class="mui-col-md-3 " id="three"></div>
+        <div class="mui-row" id="events">
+
         </div>
 
     </div>
@@ -371,6 +369,11 @@
 <script src="live/js/app.js"></script>
 <script>
   (function (w) {
+    navigator.geolocation.getCurrentPosition((show_weather) => {
+      w.weather = new WeatherSlim({model: new WeatherModel({geo:show_weather})});
+    });
+
+        w.contractEnds = new EventView({model:new EventModel({event:new Date(2017, 6, 5), label: 'Contract Ends:'})});
           w.bitcoin = new Bitcoin({model: new BitcoinModel()});
           w.fx = new FxView({model: new FxModel()});
           w.dbqglqView = new TrainView({model: new TrainModel({from: 'dbe', to: 'glq'})});

views/pages/slackV2.ejs

@@ -12,10 +12,8 @@
     <div class="mui--appbar-height">
     </div>
     <div id="container" class="mui-panel">
-        <div class="mui-row">
-            <div class="mui-col-md-3" id="one"></div>
-            <div class="mui-col-md-3 " id="two"></div>
-            <div class="mui-col-md-3 " id="three"></div>
+        <div class="mui-row" id="events">
+
         </div>
 
     </div>
@@ -376,15 +374,22 @@
 
 </body>
 <script src="libs/ejs.js"></script>
+<script src="libs/moment.js"></script>
 <script src="libs/underscore.js"></script>
 <script src="libs/backbone.js"></script>
+<script src="js/modules/events.js"></script>
 <script src="js/modules/bitcoin.js"></script>
 <script src="js/modules/fx.js"></script>
 <script src="js/modules/train.js"></script>
+<script src="js/modules/weather.js"></script>
 <script src="app.js"></script>
 <script>
 
     (function (w) {
+      navigator.geolocation.getCurrentPosition((show_weather) => {
+        w.weather = new WeatherSlim({model: new WeatherModel({geo:show_weather})});
+      });
+        w.contractEnds = new EventView({model:new EventModel({event:new Date(2017, 6, 5), label: 'Contract Ends:'})});
         w.bitcoin = new Bitcoin({model: new BitcoinModel()});
         w.fx = new FxView({model: new FxModel()});
         w.dbqglqView = new TrainView({model: new TrainModel({from: 'dbe', to: 'glq'})});
@@ -392,6 +397,8 @@
         w.glqhymView = new TrainView({model: new TrainModel({from: 'glq', to: 'hym'})});
         w.hymglqView = new TrainView({model: new TrainModel({from: 'hym', to: 'glq'})});
 
+
+
     })(window);
 
 </script>

web-server.js

@@ -132,6 +132,7 @@ app.route('/poly').get(polys);
 
 app.get('/slack', function(req, res) {
   res.render('pages/slackV2-min');
+  //res.render('pages/slackV2');
 });
 
 app.get('/temp', function(req, res) {