new weather, fixes for minified version

app/appV2.js

@@ -0,0 +1,39 @@
+const SOCKETMANAGER = require('./js/v2/slackSocket');
+const { BitcoinModel, Bitcoin } = require('./js/v2/bitcoin');
+const { EventModel, EventView } = require('./js/v2/events');
+const { FxModel, FxView } = require('./js/v2/fx');
+const { TrainModel, TrainView } = require('./js/v2/train');
+const PasswordView = require('./js/v2/password');
+const WView = require('./js/v2/weatherV2');
+
+// module.exports = EventModel;
+// module.exports = EventView;
+
+(function (w) {
+    /* navigator.geolocation.getCurrentPosition((show_weather) => {
+      w.weather = new WeatherSlim({model: new WeatherModel({geo:show_weather})});
+    });*/
+
+  const webSocketModel = new SOCKETMANAGER();
+
+  const btcModel = new BitcoinModel();
+  webSocketModel.setBTC(btcModel);
+
+  w.contractEnds = new EventView({ 'model': new EventModel({ 'event': new Date(2017, 8, 29), 'label': 'Contract Ends:' }) });
+
+  w.bitcoin = new Bitcoin({ 'model': btcModel });
+
+  w.fx = new FxView({ 'model': new FxModel() });
+
+  w.dbqglqView = new TrainView({ 'model': new TrainModel({ 'from': 'dbe', 'to': 'glq' }) });
+  w.glqdbeView = new TrainView({ 'model': new TrainModel({ 'from': 'glq', 'to': 'dbe' }) });
+  w.glqhymView = new TrainView({ 'model': new TrainModel({ 'from': 'glq', 'to': 'hym' }) });
+  w.hymglqView = new TrainView({ 'model': new TrainModel({ 'from': 'hym', 'to': 'glq' }) });
+
+
+  // console.log(PasswordView);
+  w.passwords = new PasswordView();
+
+  w.wview = new WView({ 'el': document.getElementById('weather') });
+  webSocketModel.turnOn();
+})(window);

app/js/modules/weatherV2.js

@@ -4,12 +4,17 @@ function reduceOpenWeather(item) {
   const ts = moment(item.dt * 1000);
   const weatherBlock = item.weather[0];
 
+  console.log(item, item.temp);
   return {
     'timestamp': item.dt,
     'icon': `wi-owm-${weatherBlock.id}`,
     'summary': weatherBlock.description,
     'tempHigh': parseInt(item.temp.max, 10),
     'tempLow': parseInt(item.temp.min, 10),
+    'tempMorn' : parseInt(item.temp.morn, 10),
+    'tempDay' : parseInt(item.temp.day, 10),
+    'tempEve' : parseInt(item.temp.eve, 10),
+    'tempNight' : parseInt(item.temp.night, 10),
     'datelong': ts.format(),
     'time': item.dt,
     'date': ts.format('D/M'),
@@ -49,19 +54,26 @@ const WView = Backbone.View.extend({
   'tagName': 'div',
   'template': _.template(`
   <% _.each(data, function(item) {%>
-    <div class="card mui--z1 mui-col-md-6 mui-col-lg-4">
+<div class="card mui--z1 mui-col-md-6 mui-col-lg-4">
-      <div class="mui-col-md-3">
+    <div class="mui-col-md-3">
         <div class="mui--text-accent mui--text-title day mui--text-center"><%= item.day %></div>
         <div class="mui--text-dark-secondary mui--text-subhead mui--text-center"><%= item.date %></div>
-      </div>
+    </div>
-      <div class="mui-col-md-9">
+    <div class="mui-col-md-7">
         <div>
-          <i class="mui--text-headline wi <%= item.icon %>"></i>
+            <i class="mui--text-headline wi <%= item.icon %>"></i>
-          <span class="mui--text-display1 temp<%=item.tempHigh %>"><%= item.tempHigh %>°</span> /
+            <span class="mui--text-display1 temp<%=item.tempHigh %>"><%= item.tempHigh %>°</span> /
-          <span class="mui--text-headline temp<%=item.tempLow %>"><%= item.tempLow %>°</span></div>
+            <span class="mui--text-headline temp<%=item.tempLow %>"><%= item.tempLow %>°</span>
-          <div class="mui--text-caption summary"><%= item.summary %></div>
         </div>
-      </div>
+        <div class="mui--text-caption summary"><%= item.summary %></div>
+    </div>
+    <div class="mui-col-md-2">
+        <div class="mui--text-caption"><%= item.tempMorn %>°</div>
+        <div class="mui--text-caption"><%= item.tempDay %>°</div>
+        <div class="mui--text-caption"><%= item.tempEve %>°</div>
+        <div class="mui--text-caption"><%= item.tempNight %>°</div>
+    </div>
+</div>
     <% }); 
   %>`),
   'initialize': function() {

app/js/v2/bitcoin.js

@@ -0,0 +1,212 @@
+/**
+ * Created by mdonnel on 22/03/2017.
+ */
+
+/**
+ *
+ * @type {any}
+ */
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');
+
+const BitcoinModel = Backbone.Model.extend({
+  'initialize': function () {
+    this.set('url', '/btc');
+    this.set('balanceUrl', '/balance');
+    const data = {
+      'lastGBP': 0.0,
+      'lastUSD': 0.0,
+      'lows': { 'gbp': 0, 'usd': 0 },
+      'highs': { 'gbp': 0, 'usd': 0 },
+      'eclass': '',
+      'balance': 0.0,
+      'trend': 0
+    };
+    this.set('btcdata', data);
+    this.set('balance', 0);
+    this.update();
+    this.updateHourly();
+  },
+  'update': function () {
+    this.getBTC();
+  },
+  'updateHourly': function () {
+    this.getBalance();
+  },
+  'recalc': function () {
+    let data = this.get('btcdata');
+    let lastGBP = data.lastGBP;
+    let lastUSD;
+    const g = data.gbp;
+    const u = data.usd;
+    const lows = data.lows;
+    const highs = data.highs;
+    let eclass = data.eclass;
+    const balance = data.balance;
+    let trend = data.trend;
+
+    if ((trend === undefined) || ( trend === null)) trend = 1;
+
+    if (g !== undefined) {
+      if (data.lastGBP !== 0) 
+        if (g > lastGBP) {
+          eclass = 'up';
+        }
+        else {
+          eclass = 'down';
+        }
+      else {
+        lows.gbp = g;
+        lows.usd = u;
+
+        highs.gbp = g;
+        highs.usd = u;
+      }
+      lastGBP = g;
+      lastUSD = u;
+
+      if (g < lows.gbp) lows.gbp = g;
+      if (u < lows.usd) lows.usd = u;
+
+      if (highs.gbp < g) highs.gbp = g;
+      if (highs.usd < u) highs.usd = u;
+
+      data = {
+        lastGBP,
+        lastUSD,
+        lows,
+        highs,
+        eclass,
+        balance,
+        trend
+      };
+    }
+    data.stub = Math.random(Number.MAX_SAFE_INTEGER).toString(32);
+
+    this.set('btcdata', data);
+    // total = myBTC * g;
+  },
+  'getBTC': function () {
+    console.log('>> getBTC');
+    const self = this;
+    const url = this.get('url');
+    $.ajax({
+      'type': 'GET',
+      'url': url,
+      'data': '',
+      'dataType': 'json',
+      'timeout': 10000,
+      // 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) {
+        let gbp = data.bpi.GBP.rate_float,
+          usd = data.bpi.USD.rate_float;
+        const trend = data.trend;
+        const btcdata = self.get('btcdata');
+        btcdata.gbp = gbp;
+        btcdata.usd = usd;
+        btcdata.trend = trend;
+        self.set('btcdata', btcdata);
+        self.recalc();
+      },
+      'error': function (xhr, type) {
+        console.log('ajax error');
+        console.log(xhr);
+        console.log(type);
+      }
+    });
+  },
+  'getBalance': function() {
+    const self = this;
+    const url = this.get('balanceUrl');
+    $.ajax({
+      'type': 'GET',
+      'url': url,
+      'data': '',
+      'dataType': 'json',
+      'timeout': 10000,
+      // 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) {
+        const balance = data.balance;
+
+        self.set('balance', balance);
+        self.recalc();
+      },
+      'error': function (xhr, type) {
+        console.log('ajax error');
+        console.log(xhr);
+        console.log(type);
+      }
+    });
+  },
+  'btcFromSocket': function (data) {
+    const self = this;
+    console.log('>> btc from the socket', data);
+    const gbp = data.bpi.GBP.rate_float;
+    const usd = data.bpi.USD.rate_float;
+    const trend = data.trend;
+    const btcdata = self.get('btcdata');
+    btcdata.gbp = gbp;
+    btcdata.usd = usd;
+    btcdata.trend = trend;
+    self.set('btcdata', btcdata);
+    self.recalc();
+  },
+  'balanceFromSocket': function (data) {
+    const self = this;
+    console.log('>> balance from the socket', data);
+    const balance = data.balance;
+
+    self.set('balance', balance);
+    self.recalc();
+  }
+});
+
+/**
+ *
+ * @type {any}
+ */
+const Bitcoin = Backbone.View.extend({
+  'tagName': 'div',
+  'initialize': function () {
+    _.bindAll(this, 'render');
+    this.model.bind('change', this.render);
+    this.$btc = $('#btc');
+    this.$trend = $('#trend');
+  },
+  'render': function () {
+    const btcdata = this.model.get('btcdata');
+    const balance = this.model.get('balance');
+    const owned = parseFloat(btcdata.lastGBP) * parseFloat(balance);
+    // console.log(`owned: ${owned}`);
+    const title = `High: $${ parseFloat(btcdata.highs.usd.toFixed(2)) } / Low $${ parseFloat(btcdata.lows.usd.toFixed(2))}`;
+    let trendClass = '';
+
+    if (btcdata.trend > 1.00)
+      trendClass = 'trendUp';
+    else if (btcdata.trend < 1.00)
+      trendClass = 'trendDown';
+    else 
+      trendClass = '';
+
+    this.$trend.removeClass();
+    this.$trend.addClass(trendClass);
+    this.$btc.removeClass();
+    this.$btc.addClass(btcdata.eclass);
+    this.$btc.html(`&#36;${parseFloat(btcdata.lastUSD.toFixed(2)) } / &pound;${parseFloat(btcdata.lastGBP.toFixed(2))} <div>&#8383;${balance} &pound;${parseFloat(owned.toFixed(2))}</div>` );
+    this.$btc.prop('title', title);
+  }
+});
+
+module.exports = { BitcoinModel, Bitcoin };
+

app/js/v2/events.js

@@ -0,0 +1,59 @@
+/**
+ * Created by mdonnel on 10/04/2017.
+ */
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');
+
+const EventModel = Backbone.Model.extend({
+  'initialize': function () {
+    this.update();
+  },
+  'getDays' : function(startdate, enddate) {
+    const s = startdate.getTime();
+    const e = enddate.getTime();
+    return (e - s) / (24 * 60 * 60 * 1000);
+  },
+  'update': function () {
+    const now = new Date;
+    const mod = 3600000 - (now.getTime() % 3600000);
+    const 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);
+  }
+});
+
+const 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 () {
+    const label = this.model.get('label');
+    const data = this.model.get('data');
+    const str = `${label} ${data.days} days / ${data.weeks} weeks`;
+    this.$myEvent.empty().append(str);
+  },
+  'initView': function () {
+    const html = `<div class='mui-col-xs-12 mui-col-md-3' id="${this.id}"></div>`;
+    this.$html = $(html);
+    this.$events.append(this.$html);
+    this.$myEvent = $(`#${this.id}`);
+  }
+});
+
+module.exports = { EventModel, EventView };

app/js/v2/fx.js

@@ -0,0 +1,79 @@
+/**
+ * Created by mdonnel on 22/03/2017.
+ */
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');
+
+const FxModel = Backbone.Model.extend({
+  'initialize': function () {
+    this.set('url', '/fx');
+    this.set('fxdata', {});
+    this.update();
+  },
+  'update': function () {
+    this.getFX();
+    const now = new Date;
+    const mod = 900000 - (now.getTime() % 900000);
+
+    const fxUpdateFn = function() {
+      this.update();
+    };
+    setTimeout(fxUpdateFn.bind(this), mod + 10);
+  },
+  'getFX': function() {
+    const url = this.get('url');
+    const self = this;
+    $.ajax({
+      'type': 'GET',
+      'url': url,
+      'data': '',
+      'dataType': 'json',
+
+      'timeout': 10000,
+
+      'headers': {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type'
+
+      },
+      'success': function(data) {
+        let fxdata = {};
+        if (data.rates !== undefined) {
+          const gpbex = (1 / data.rates.GBP);
+          const sekex = (gpbex * data.rates.SEK);
+          fxdata = {
+            'usd': 1,
+            'gbp': data.rates.GBP,
+            'sek': data.rates.SEK,
+            'gpbe': gpbex,
+            'sekex': sekex
+          };
+        }
+
+        self.set('fxdata', fxdata);
+      },
+      'error': function(xhr, type) {
+        console.log('ajax error');
+        console.log(xhr);
+        console.log(type);
+      }
+    });
+  }
+});
+
+const FxView = Backbone.View.extend({
+  'tagName': 'div',
+  'initialize': function () {
+    _.bindAll(this, 'render');
+    this.model.bind('change', this.render);
+    this.$fx = $('#fx');
+  },
+  'render': function () {
+    const fxdata = this.model.get('fxdata');
+    this.$fx.html(`£1 = $${parseFloat(fxdata.gpbe.toFixed(2))} = ${ parseFloat(fxdata.sekex.toFixed(2))} SEK`);
+  }
+});
+
+module.exports = { FxModel, FxView };

app/js/v2/password.js

@@ -0,0 +1,108 @@
+/**
+ * Created by mdonnel on 20/04/2017.
+ */
+/* _.templateSettings = {
+  'evaluate':    /\{\{(.+?)\}\}/g,
+  'interpolate': /\{\{=(.+?)\}\}/g,
+  'escape':      /\{\{-(.+?)\}\}/g
+};*/
+
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');
+
+Array.prototype.random = function () {
+  return this[Math.floor((Math.random() * this.length))];
+};
+
+const PasswordView = Backbone.View.extend({
+  'el': '#passwords',
+  'passwordTemplate': _.template('<div>Long: <%=long%></div><div>Short: <%=short%></div>'),
+  'initialize': function () {
+    this.alpha = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x',
+      'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X',
+      'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+    this.whitespace = ['.', '~', '#', '!', '$', '+', '-', '+'];
+    this.numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+    this.left = ['Alabama',
+      'Alaska',
+      'Arizona',
+      'Maryland',
+      'Nevada',
+      'Mexico',
+      'Texas',
+      'Utah',
+      'Glasgow',
+      'Inverness',
+      'Edinburgh',
+      'Dumbarton',
+      'Balloch',
+      'Renton',
+      'Cardross',
+      'Dundee',
+      'Paisley',
+      'Hamilton',
+      'Greenock',
+      'Falkirk',
+      'Irvine',
+      'Renfrew',
+      'Erskine',
+      'London',
+      'Hammersmith',
+      'Islington',
+      'Silver', 'Black', 'Yellow', 'Purple', 'White', 'Pink', 'Red', 'Orange', 'Brown', 'Green', 'Blue',
+      'Amber', 'Aqua', 'Azure', 'Bronze', 'Coral', 'Copper', 'Crimson', 'Cyan', 'Ginger', 'Gold', 'Indigo', 'Jade'
+
+    ];
+
+    this.right = ['Aganju', 'Cygni', 'Akeron', 'Antares', 'Aragoth', 'Ardus', 'Carpenter',
+      'Cooper', 'Dahin', 'Capella', 'Endriago', 'Gallina', 'Fenris', 'Freya', 'Glenn', 'Grissom',
+      'Jotunheim', 'Kailaasa', 'Lagarto', 'Muspelheim', 'Nifleheim', 'Primus', 'Vega', 'Ragnarok',
+      'Shepard', 'Slayton', 'Tarsis', 'Mercury', 'Venus', 'Mars', 'Earth', 'Terra', 'Jupiter',
+      'Saturn', 'Uranus', 'Neptune', 'Pluto', 'Europa', 'Ganymede', 'Callisto', 'Titan', 'Juno',
+      'Eridanus', 'Scorpius', 'Crux', 'Cancer', 'Taurus', 'Lyra', 'Andromeda', 'Virgo', 'Aquarius',
+      'Cygnus', 'Corvus', 'Taurus', 'Draco', 'Perseus', 'Pegasus', 'Gemini', 'Columbia', 'Bootes',
+      'Orion', 'Deneb', 'Merope', 'Agate', 'Amber', 'Beryl', 'Calcite', 'Citrine', 'Coral', 'Diamond',
+      'Emerald', 'Garnet', 'Jade', 'Lapis', 'Moonstone', 'Obsidian', 'Onyx', 'Opal', 'Pearl', 'Quartz',
+      'Ruby', 'Sapphire', 'Topaz', 'Iron', 'Lead', 'Nickel', 'Copper', 'Zinc', 'Tin', 'Manes', 'Argon',
+      'Neon', 'Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo', 'Foxtrot', 'Golf', 'Hotel', 'India', 'Juliett',
+      'Kilo', 'Lima', 'Mike', 'November', 'Oscar', 'Papa', 'Quebec', 'Romeo', 'Sierra', 'Tango', 'Uniform',
+      'Victor', 'Whisky', 'Xray', 'Yankee', 'Zulu'];
+
+    this.passwordOut = this.$('#passwordOut');
+    _.bindAll(this, 'newClick');
+  },
+  'events': {
+    'click #newPassword': 'newClick'
+  },
+  'numberCluster': numberCluster,
+  'randomAmount': randomAmount,
+  'newClick': newClick
+
+});
+
+function randomAmount(i) {
+  let str = '';
+
+  for (let t = 0; t < i; t++)
+    str = str + this.alpha.random();
+
+  return str;
+}
+
+function newClick(e) {
+  const long = (`${this.left.random() } ${ this.right.random() } ${ this.numberCluster()}`).split(' ').join(this.whitespace.random());
+  const short = (`${this.randomAmount(5) } ${ this.randomAmount(5)}`).split(' ').join(this.whitespace.random());
+  const html = this.passwordTemplate({
+    'long': long,
+    'short': short
+  });
+  this.passwordOut.removeClass('mui--hide');
+  this.passwordOut.empty().append(html);
+}
+
+function numberCluster() {
+  return this.numbers.random() + this.numbers.random() + this.numbers.random();
+}
+
+module.exports = PasswordView;

app/js/v2/slackSocket.js

@@ -0,0 +1,63 @@
+/**
+ *
+ * User: Martin Donnelly
+ * Date: 2016-09-09
+ * Time: 11:38
+ *
+ */
+/* global Backbone, _,  WEBSOCKET */
+/* jshint browser: true , devel: true*/
+
+'use strict';
+const _ = require('underscore');
+const Backbone = require('backbone');
+const WEBSOCKET = require('./websocket');
+
+const SOCKETMANAGER = (function () {
+  const SocketManager = Backbone.Model.extend({
+
+    'initialize': function () {
+      _.bindAll(this, 'turnOn', 'turnOff');
+      this.listeningID = null;
+      this.listening = false;
+      this.webSocket = new WEBSOCKET(this);
+
+      this.on('message', function (o) {
+        console.log('On message', this.listening);
+        if (this.listening)
+          this.checkItem(o);
+      });
+    },
+    'turnOn': function () {
+      console.log('Socket now listening');
+      this.listening = true;
+    },
+    'turnOff': function () {
+      this.listening = false;
+    },
+    'listenFor': function (id) {
+      this.listeningID = this.deviceId.indexOf(id);
+    },
+    'checkItem': function (item) {
+      if (item.hasOwnProperty('id')) {
+        console.log('id:', item.id);
+        if (item.id === 'btc' && this.btc !== undefined) this.btc.btcFromSocket(item.data);
+
+        if (item.id === 'balance' && this.btc !== undefined) this.btc.balanceFromSocket(item.data);
+      }
+    },
+    'setBTC': function (obj) {
+      this.btc = obj;
+    },
+    'setTrain': function (obj) {
+      this.train = obj;
+    },
+    'getUpdate': function () {
+      this.webSocket.send('update');
+    }
+  });
+
+  return SocketManager;
+}());
+
+module.exports = SOCKETMANAGER;

app/js/v2/train.js

@@ -0,0 +1,207 @@
+/**
+ *
+ * User: Martin Donnelly
+ * Date: 2016-10-03
+ * Time: 14:20
+ *
+ */
+const $ = require('jquery');
+const _ = require('underscore');
+const Backbone = require('backbone');
+
+const TrainModel = Backbone.Model.extend({
+  'initialize': function () {
+    const fromStation = this.get('from');
+    const toStation = this.get('to');
+    const url = `/getnexttraintimes?from=${ this.get('from') }&to=${ this.get('to')}`;
+    const routeUrl = `/gettrains?from=${ this.get('from') }&to=${ this.get('to')}`;
+    const target = this.get('from') + this.get('to');
+    this.set('url', url);
+    this.set('routeUrl', routeUrl);
+    this.set('target', target);
+    this.set('visible', false);
+    this.set('trainData', { 'eta':'OFF', 'sta': 'OFF' });
+    this.update();
+  },
+  'update': function () {
+    const now = new Date;
+    const hours = now.getHours();
+    const limit = (hours < 6) ? 3600000 : 60000;
+
+    const mod = limit - (now.getTime() % limit);
+
+    if (hours >= 6) 
+      this.getTrain();
+    else 
+      this.set('trainData', { 'eta':'OFF', 'sta': 'OFF' });
+
+    const trainUpdateFn = function () {
+      this.update();
+    };
+
+    setTimeout(trainUpdateFn.bind(this), mod + 10);
+  },
+  'getTrain': function () {
+    const url = this.get('url');
+    const self = this;
+    $.ajax({
+      'type': 'GET',
+      'url': url,
+      'data': '',
+      'dataType': 'json',
+      'timeout': 10000,
+      'headers': {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type'
+      },
+      'success': function (data) {
+        self.set('trainData', data);
+      },
+      'error': function (xhr, type) {
+        console.log('ajax error');
+        console.log(xhr);
+        console.log(type);
+      }
+    });
+  },
+  'getRoute': function () {
+    const url = this.get('routeUrl');
+    const self = this;
+
+    if (this.get('visible') === true) 
+      this.set('visible', false);
+    else 
+      $.ajax({
+        'type': 'GET',
+        'url': url,
+        'data': '',
+        'dataType': 'json',
+
+        'timeout': 10000,
+        'headers': {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type'
+
+        },
+        'success': function (data) {
+          // getTrainsCB(data);
+          // console.log('Got', data);
+
+          self.set('route', data);
+          self.set('visible', true);
+        },
+        'error': function (xhr, type) {
+          console.error('ajax error');
+          console.error(xhr);
+          console.error(type);
+        }
+      });
+  }
+});
+
+const TrainView = Backbone.View.extend({
+  'tagName': 'div',
+  'initialize': function () {
+    _.bindAll(this, 'render');
+    this.model.bind('change', this.render);
+    this.$trains = $('#trains');
+    this.$traininfo = $('#traininfo');
+    this.$traintext = $('#trainResults');
+    this.$el = this.$trains;
+    this.initView();
+  },
+  'events': {
+    'click': 'showTrains'
+  },
+  'render': function () {
+    const obj = this.model.get('trainData');
+    const visible = this.model.get('visible');
+    const route = this.model.get('route');
+
+    const output = (obj.eta.toLowerCase() === 'on time') ? obj.sta : obj.eta;
+    const status = (obj.eta.toLowerCase() === 'on time') ? 'ontime' : 'delayed';
+
+    this.$button.html(output);
+    this.$button.removeClass('delayed').removeClass('ontime').addClass(status);
+
+    if (visible) {
+      let ws = `<div>${route.locationName} TO ${route.filterLocationName}</div>
+            <table class="mui-table mui-table-bordered">
+            <tr><th>Destination</th>
+            <th>Time</th>
+            <th>Status</th>
+            <th>Platform</th></tr>
+            `;
+
+      const services = [];
+      if (typeof route.trainServices === 'object' && route.trainServices !== null) 
+        for (const item of route.trainServices) {
+          const dest = item.destination[0];
+          const via = dest.via !== null ? `<em>${dest.via}</em>` : '';
+          const platform = item.platform !== null ? item.platform : '💠';
+          const time = item.sta !== null ? item.sta : `D ${item.std}`;
+          const status = item.eta !== null ? item.eta : item.etd;
+
+          services.push({ 'location':dest.locationName, 'time':time, 'status':status, 'platform':platform, 'cancel':item.cancelReason, 'type':'train' });
+          if (!item.isCancelled) 
+            ws = `${ws }<tr><td>${dest.locationName} ${via}</td>
+                  <td>${time}</td>
+                  <td>${status}</td>
+                  <td>${platform}</td>
+                  </tr>`;
+          else 
+            ws = `${ws }<tr><td>${dest.locationName} ${via}</td><td>${time}</td>
+                  <td colspan="2">❌ ${item.cancelReason}</td></tr>`;
+        }
+
+      if (typeof route.busServices === 'object' && route.busServices !== null) 
+        for (const item of route.busServices) {
+          const dest = item.destination[0];
+          const via = dest.via !== null ? `<em>${dest.via}</em>` : '';
+          const platform = item.platform !== null ? item.platform : '';
+          const time = item.sta !== null ? item.sta : `D ${item.std}`;
+          const status = item.eta !== null ? item.eta : item.etd;
+          services.push({ 'location':dest.locationName, 'time':time, 'status':status, 'platform':platform, 'cancel':item.cancelReason, 'type':'bus' });
+
+          ws = `${ws }<tr><td>🚌 ${dest.locationName} ${via}</td><td>${time}</td><td>${status}</td><td>${platform}</td></tr>`;
+        }
+
+      ws = `${ws }</table>`;
+      this.$traintext.empty().html(ws);
+      this.$traintext.removeClass('mui--hide').addClass('mui--show');
+    }
+    else 
+      this.$traintext.removeClass('mui--show').addClass('mui--hide');
+  },
+  'initView': function () {
+
+    const self = this;
+    const target = this.model.get('target');
+    const html = `<div class='mui-col-xs-12 mui-col-md-6'>${target.toUpperCase()}: <button class="mui-btn mui-btn--flat" id="${target}"></button></div>`;
+    this.$html = $(html);
+    this.$html.on('click', function () {
+      //            console.log(self)
+      self.model.getRoute();
+    });
+    this.$trains.append(this.$html);
+
+    this.$button = $(`#${target}`);
+
+    const output = 'OFF';
+    const status = (output === 'on time') ? 'ontime' : 'delayed';
+
+    this.$button.html(output);
+    this.$button.removeClass('delayed').removeClass('ontime').addClass(status);
+
+    const cevent = `click #${target}`;
+    this.events[cevent] = 'showTrains';
+  },
+  'showTrains': function () {
+    console.log('Show train');
+  }
+
+});
+
+module.exports = { TrainModel, TrainView };

app/js/v2/weatherV2.js

@@ -0,0 +1,99 @@
+const $ = require('jquery');
+const moment = require('moment');
+const _ = require('underscore');
+const Backbone = require('backbone');
+
+function reduceOpenWeather(item) {
+  // Openweather returns timestamps in seconds. Moment requires them in milliseconds.
+
+  const ts = moment(item.dt * 1000);
+  const weatherBlock = item.weather[0];
+
+  // console.log(item, item.temp);
+  
+  return {
+    'timestamp': item.dt,
+    'icon': `wi-owm-${weatherBlock.id}`,
+    'summary': weatherBlock.description,
+    'tempHigh': parseInt(item.temp.max, 10),
+    'tempLow': parseInt(item.temp.min, 10),
+    'tempMorn' : parseInt(item.temp.morn, 10),
+    'tempDay' : parseInt(item.temp.day, 10),
+    'tempEve' : parseInt(item.temp.eve, 10),
+    'tempNight' : parseInt(item.temp.night, 10),
+    'datelong': ts.format(),
+    'time': item.dt,
+    'date': ts.format('D/M'),
+    'day': ts.format('ddd')
+  };
+}
+
+function reduceDarkSky(item) {
+  const ts = moment(item.time * 1000);
+
+  return {
+    'timestamp': item.time,
+    'icon': weatherIcons.get(item.icon),
+    'summary': item.summary,
+    'tempHigh': parseInt(item.temperatureHigh, 10),
+    'tempLow': parseInt(item.temperatureLow, 10),
+    'datelong': ts.format(),
+    'time': item.time,
+    'date': ts.format('D/M'),
+    'day': ts.format('ddd')
+
+  };
+}
+
+const WCollection = Backbone.Collection.extend({
+  'url': '/weather',
+  'parse': function(data) {
+    return data.list.map((item) => {
+      // Reduce the data
+      return reduceOpenWeather(item);
+    });
+  }
+});
+
+const WView = Backbone.View.extend({
+  'tagName': 'div',
+  'template': _.template(`
+  <% _.each(data, function(item) {%>
+<div class="card mui--z1 mui-col-md-6 mui-col-lg-4">
+    <div class="mui-col-md-3">
+        <div class="mui--text-accent mui--text-title day mui--text-center"><%= item.day %></div>
+        <div class="mui--text-dark-secondary mui--text-subhead mui--text-center"><%= item.date %></div>
+    </div>
+    <div class="mui-col-md-7">
+        <div>
+            <i class="mui--text-headline wi <%= item.icon %>"></i>
+            <span class="mui--text-display1 temp<%=item.tempHigh %>"><%= item.tempHigh %>°</span> /
+            <span class="mui--text-headline temp<%=item.tempLow %>"><%= item.tempLow %>°</span>
+        </div>
+        <div class="mui--text-caption summary"><%= item.summary %></div>
+    </div>
+    <div class="mui-col-md-2">
+        <div class="mui--text-caption"><%= item.tempMorn %>°</div>
+        <div class="mui--text-caption"><%= item.tempDay %>°</div>
+        <div class="mui--text-caption"><%= item.tempEve %>°</div>
+        <div class="mui--text-caption"><%= item.tempNight %>°</div>
+    </div>
+</div>
+    <% }); 
+  %>`),
+  'initialize': function() {
+    _.bindAll(this, 'render');
+    this.collection = new WCollection();
+    this.listenTo(this.collection, 'reset sync', _.debounce(_.bind(this.render), 128));
+    this.collection.fetch();
+  },
+  'render': function() {
+    if (this.collection.length !== 0) {
+      const data = { 'data':this.collection.toJSON() };
+      this.$el.html(this.template(data));
+    }
+  }
+
+});
+
+module.exports = WView;

app/js/v2/websocket.js

@@ -0,0 +1,83 @@
+const WEBSOCKET = function (model) {
+  let wsUrl = ['localhost', 'silvrtree.co.uk'];
+  let wsPort = '9000';
+  const useUrl = 0;
+
+  if ('https:' === document.location.protocol) {
+    wsUrl = `wss://${ wsUrl[1] }`;
+    wsPort = '';
+  }
+  else {
+    // wsUrl = 'ws://localhost:3001';
+    wsUrl = `ws://${ wsUrl[0] }`;
+    wsPort = '9000';
+  }
+
+  console.log('>> wsUrl', wsUrl);
+  this.socket = null;
+  this.timer = 0;
+  this.clock = null;
+
+  this.startWebSocket = function () {
+    'use strict';
+
+    const url = (wsPort === '') ? wsUrl : `${wsUrl }:${ wsPort}`;
+    console.log('Starting socket', url);
+    const wsCtor = window['MozWebSocket'] ? MozWebSocket : WebSocket;
+    this.socket = new wsCtor(url, 'stream');
+
+    this.socket.onopen = this.handleWebsocketOnOpen.bind(this);
+    this.socket.onmessage = this.handleWebsocketMessage.bind(this);
+    this.socket.onclose = this.handleWebsocketClose.bind(this);
+    this.socket.onerror = function (e) {
+      console.error(e);
+    };
+  };
+
+  this.send = function (msg) {
+    console.log('Sending', msg);
+    this.socket.send(msg);
+  };
+
+  this.handleData = function (d) {
+    model.trigger('message', d);
+  };
+
+  this.handleWebsocketOnOpen = function () {
+    'use strict';
+    this.retry = 0;
+
+    console.log('**** Websocket Connected ****');
+    this.clock = new Date();
+  };
+
+  this.handleWebsocketMessage = function (message) {
+    let command;
+
+    try {
+      command = JSON.parse(message.data);
+    }
+    catch (e) { /* Do nothing */
+    }
+    if (command)
+      this.handleData.call(this, command);
+  };
+
+  this.handleWebsocketClose = function () {
+    console.error('WebSocket Connection Closed.');
+    const now = new Date();
+
+    // const uptime = now.getTime() - this.clock.getTime();
+    const uptime = 1;
+    console.log('Socket alive for', uptime / 1000);
+    const self = this;
+    console.log('Waiting ', 15000);
+    this.timer = setTimeout(function () {
+      self.startWebSocket();
+    }, 15000);
+  };
+
+  this.startWebSocket();
+};
+
+module.exports = WEBSOCKET;

app/js/websocket.js

@@ -79,3 +79,5 @@ const WEBSOCKET = function (model) {
 
   this.startWebSocket();
 };
+
+module.exports = WEBSOCKET;

gulpfile.js

@@ -13,6 +13,14 @@ const scss = require('gulp-scss');
 const sass = require('gulp-sass');
 const googleWebFonts = require('gulp-google-webfonts');
 const babel = require('gulp-babel');
+//
+const watchify = require('watchify');
+const browserify = require('browserify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const gutil = require('gulp-util');
+const sourcemaps = require('gulp-sourcemaps');
+const assign = require('lodash.assign');
 
 const filePath = {
   'build_dir': 'live'
@@ -22,6 +30,13 @@ const dest = 'app/live';
 
 const fontOptions = { };
 
+const customOpts = {
+  'entries': ['./app/appV2.js'],
+  'debug': true
+};
+const opts = assign({}, watchify.args, customOpts);
+const b = watchify(browserify(opts));
+
 gulp.task('appJS', function() {
   return gulp.src(['app/js/websocket.js', 'app/js/slackSocket.js', 'app/js/modules/events.js', 'app/js/modules/bitcoin.js', 'app/js/modules/fx.js', 'app/js/modules/train.js', 'app/js/modules/weatherV2.js', 'app/js/modules/password.js', 'app/app.js'])
     .pipe(stripDebug())
@@ -69,7 +84,8 @@ gulp.task('vendor', function() {
     'bower_components/moment/min/moment.min.js'
   ])
     .pipe(concat('vendor.js'))
-    /*.pipe(uglify({ 'mangle': false }))*/
+
+    /* .pipe(uglify({ 'mangle': false }))*/
     .pipe(gulp.dest(`${dest }/js`));
 });
 
@@ -85,6 +101,22 @@ gulp.task('migrate', function() {
     .pipe(gulp.dest(`${dest}/css`));
 });
 
-
+function bundle() {
+  return b.bundle()
+    // log errors if they happen
+    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
+    .pipe(source('bundle.js'))
+    // optional, remove if you don't need to buffer file contents
+    .pipe(buffer())
+    // optional, remove if you dont want sourcemaps
+    .pipe(sourcemaps.init({ 'loadMaps': true })) // loads map from browserify file
+  // Add transformation tasks to the pipeline here.
+    .pipe(sourcemaps.write('./')) // writes .map file
+    .pipe(gulp.dest('./app'));
+}
 
 gulp.task('default', ['appJS', 'vendor', 'customMUI', 'fonts', 'migrate']);
+
+gulp.task('js', bundle); // so you can run `gulp js` to build the file
+b.on('update', bundle); // on any dep update, runs the bundler
+b.on('log', gutil.log); // output build logs to terminal

package.json

@@ -6,6 +6,7 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.1",
     "babel-preset-es2015": "^6.24.0",
+    "backbone": "^1.3.3",
     "cheerio": "^0.22.0",
     "dateformat": "^2.2.0",
     "ejs": "^2.5.7",
@@ -32,29 +33,39 @@
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
     "gulp-scss": "^1.4.0",
+    "gulp-sourcemaps": "^2.6.1",
     "gulp-strip-debug": "^1.1.0",
     "gulp-uglify": "^3.0.0",
     "htmlparser": "^1.7.7",
     "jade": "^1.11.0",
     "jest": "^21.2.1",
+    "jquery": "^3.2.1",
     "jshint": "^2.9.4",
     "jsonfile": "^3.0.1",
     "lodash": "^4.11.2",
+    "lodash.assign": "^4.2.0",
     "log4js": "^2.3.4",
     "lowdb": "^1.0.0",
     "mammoth": "^1.4.2",
+    "moment": "^2.18.1",
     "nano": "^6.4.2",
     "node-localstorage": "^1.3.0",
     "request": "^2.83.0",
     "simple-weather": "^1.2.2",
     "sugar-date": "^2.0.4",
+    "uglifyify": "^4.0.4",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
+    "watchify": "^3.9.0",
     "wordsoap": "^0.2.0",
     "xmljson": "^0.2.0",
-    "xmltojson": "^1.3.5"
+    "xmltojson": "^1.3.5",
+    "zepto": "^1.2.0"
   },
   "dependencies": {
     "apicache": "^1.1.0",
     "body-parser": "^1.18.2",
+    "browserify": "^14.4.0",
     "cloudant": "^1.6.2",
     "cookie-parser": "^1.4.1",
     "cookieparser": "^0.1.0",
@@ -82,7 +93,8 @@
   },
   "scripts": {
     "start": "node web-server.js",
-    "copy": "sudo cp -r ./. /var/www/silvrtree"
+    "copy": "sudo cp -r ./. /var/www/silvrtree",
+    "build": "browserify -g uglifyify app/appV2.js -o app/bundle.js"
   },
   "jest": {
     "verbose": true

views/pages/slackV3.ejs

@@ -0,0 +1,33 @@
+<% include ../partials/headV2 %>
+<!-- Slack - I have plenty of talent and vision I just don't give a damn -->
+<header id="header">
+    <div class="mui-appbar mui--appbar-line-height">
+        <div class="mui-container-fluid">
+            Slack
+        </div>
+    </div>
+
+</header>
+<div class="mui-container">
+    <div class="mui--appbar-height">
+    </div>
+    <div id="container" class="mui-panel">
+        <div class="mui-row" id="events">
+
+        </div>
+
+    </div>
+
+    <% include ../partials/links %>
+
+    <div id='weather'></div>
+</div>
+
+<script type="text/template" id="password-template">
+      <div>Long: {{=long }}</div><div>Short: {{=short }}</div>
+	  </script>
+</body>
+
+<script src="bundle.js"></script>
+
+</html>

views/partials/headV2.ejs

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="">
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
+    <meta name="viewport" content="width=360; initial-scale=1;">
+    <meta charset="UTF-8">
+    <title>Events</title>
+
+    <meta name="Author" content=""/>
+    <link rel="stylesheet" href="fonts/fonts.css">
+    <link href="//cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css" rel="stylesheet" type="text/css"/>
+    <link href="css/custom.css" rel="stylesheet" type="text/css"/>
+    <link href="css/weather.css" rel="stylesheet" type="text/css"/>
+
+</head>
+
+<body>

web-server.js

@@ -34,7 +34,7 @@ const SocketHandler = require('./lib/wshandlerv2');
 
 // const webSocket = new SocketHandler(busEmitter, wss);
 
- btc.setEmitter(busEmitter);
+btc.setEmitter(busEmitter);
 // today.setEmitter(busEmitter);
 
 // train = require('lib/train')
@@ -48,7 +48,6 @@ const polys = require('./lib/poly.js');
 
 const logger = require('log4js').getLogger('web-server');
 
-
 logger.level = 'debug';
 
 const app = express();
@@ -110,8 +109,7 @@ app.get('/cinema/:id', events.getCinema);
 app.route('/poly').get(polys);
 
 app.get('/slack', function(req, res) {
-  res.render('pages/slackV2-min');
+  res.render('pages/slackV3');
-  // res.render('pages/slackV2');
 });
 
 app.get('/temp', function(req, res) {
@@ -128,7 +126,6 @@ app.get('/weather', /* cache('1 hour'),*/ (req, res) => {
     });
 });
 
-
 const tfile = 'fb-token.json';
 
 // Instanciate a fitbit client.  See example config below.