New version of slack powered by Backbone

app/app.js

@@ -97,88 +97,6 @@
   };
 
 
-
-
-
-
-
-
-  let getNextTrainTime = function(toStation, fromStation) {
-    let url = '/getnexttraintimes?from=' + fromStation + '&to=' + toStation;
-    let target = fromStation + toStation;
-    $.ajax({ 'GET',
-          u
-      type:rl: 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) {
-        updateTrain(target, data);
-      },
-      error: function(xhr, type) {
-        console.log('ajax error');
-        console.log(xhr);
-        console.log(type);
-      }
-    });
-  };
-
-  var updateTrain = function(n, obj) {
-    let elm = $('#' + n);
-
-    let output, status;
-
-    output = (obj.eta == 'On Time') ? obj.eta : obj.sta;
-    status = (obj.eta == 'On Time') ? 'delayed' : 'ontime';
-
-    elm.html(output);
-    elm.removeClass('delayed').removeClass('ontime').addClass( status);
-    //elm.addClass( status);
-  };
-
-  let getTrainsCB = function(results) {
-    let dest$ = $('#trainResults');
-    let html = new EJS({url: '/template/trains.ejs'}).render(results);
-
-    dest$.empty();
-    dest$.append(html);
-    dest$.toggle();
-  };
-
-  let getTrains = function(from, to) {
-    let url = '/gettrains?from=' + from + '&to=' + to;
-
-    $.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);
-      },
-      error: function(xhr, type) {
-        console.log('ajax error');
-        console.log(xhr);
-        console.log(type);
-      }
-    });
-  };
-
   let formatPassword = function(data) {
     let dest$ = $('#passwordOut');
     let html = new EJS({url: '/template/password.ejs'}).render(data);
@@ -217,15 +135,15 @@
 
   tick();
   get_weather();
-  getNextTrainTime('dbe', 'glq');
+ // getNextTrainTime('dbe', 'glq');
-  getNextTrainTime('glq', 'dbe');
+ // getNextTrainTime('glq', 'dbe');
 
   // start 15 minute timer
 
   _fastTimer = setInterval(function() {
 
-    getNextTrainTime('dbe', 'glq');
+ //   getNextTrainTime('dbe', 'glq');
-    getNextTrainTime('glq', 'dbe');
+ //   getNextTrainTime('glq', 'dbe');
   }, (60000));
 
   _slowTimer = setInterval(function() {
@@ -233,22 +151,11 @@
     get_weather();
   }, (60000 * 15));
 
-  $('#dbeglq').on('click', function() {
-    self.trigger('getTrains', 'dbe', 'glq');
-  });
-
-  $('#glqdbe').on('click', function() {
-    self.trigger('getTrains', 'glq', 'dbe');
-  });
 
   $('#newPassword').on('click', function() {
     generatePassword();
   });
 
-  this.bind('getTrains', function(start, end) {
-    getTrains(start, end);
-  });
-
   document.title = 'Slack';
 })();
 

app/js/modules/train.js

@@ -7,72 +7,235 @@
  */
 
 let TrainModel = Backbone.Model.extend({
-  initialize: function() {
+    initialize: function () {
-      console.log(this.get('to'));
+        console.log(this.get('to'));
-      let fromStation = this.get('from');
+        let fromStation = this.get('from');
-      let toStation = this.get('to');
+        let toStation = this.get('to');
-      let url = '/getnexttraintimes?from=' + fromStation + '&to=' + toStation;
+        let url = '/getnexttraintimes?from=' + fromStation + '&to=' + toStation;
-      let target = fromStation + toStation;
+        let routeUrl = '/gettrains?from=' + fromStation + '&to=' + toStation;
-      this.set('url', url);
+        let target = fromStation + toStation;
-      this.set('target', target);
+        this.set('url', url);
-      this.update();
+        this.set('routeUrl', routeUrl);
-    }, update: function() {
+        this.set('target', target);
-      this.getTrain();
+        this.set('visible', false);
+        this.update();
     },
-    getTrain: function() {
+    update: function () {
+        this.getTrain();
+        const now = new Date;
+        const mod = 60000 - (now.getTime() % 60000);
+
+        let trainUpdateFn = function () {
+            this.update();
+        };
+        setTimeout(trainUpdateFn.bind(this), mod + 10);
+    },
+    getTrain: function () {
         let url = this.get('url');
         let self = this;
-        console.log(url);
         $.ajax({
-              type: 'GET',
+            type: 'GET',
-              url: url,
+            url: url,
-              data: '',
+            data: '',
-              dataType: 'json',
+            dataType: 'json',
-              timeout: 10000,
+            timeout: 10000,
-              headers: {
+            headers: {
                 'Access-Control-Allow-Origin': '*',
                 'Access-Control-Allow-Methods': 'PUT, GET, POST, DELETE, OPTIONS',
                 'Access-Control-Allow-Headers': 'Content-Type'
-              },
+            },
-              success: function(data) {
+            success: function (data) {
-                console.log(data);
+                /*
+                 console.log(data);
+                 */
                 self.set('trainData', data);
-              },
+            },
-              error: function(xhr, type) {
+            error: function (xhr, type) {
                 console.log('ajax error');
                 console.log(xhr);
                 console.log(type);
-              }
+            }
+        });
+    },
+    getRoute: function () {
+        let url = this.get('routeUrl');
+        let 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.log('ajax error');
+                    console.log(xhr);
+                    console.log(type);
+                }
             });
+        }
+
     }
 });
 
-let Train = Backbone.View.extend({
+let TrainView = Backbone.View.extend({
-  tagName: 'div',
+    tagName: 'div',
-  initialize: function() {
+    initialize: function () {
-    _.bindAll(this, 'render');
+        _.bindAll(this, 'render');
-    this.model.bind('change', this.render);
+        this.model.bind('change', this.render);
-    this.$traininfo = $('#traininfo');
+        this.$trains = $('#trains');
-    this.$traintext = $('#traintext');
+        this.$traininfo = $('#traininfo');
-  },
+        this.$traintext = $('#trainResults');
-  render: function() {
+        this.$el = this.$trains;
-    console.log('Train:Render');
+        this.initView();
-    let ws = '';
+    },
-    let data = this.model.get('data');
+    events: {
-    console.log(this.model);
+        'click': 'showTrains'
+    },
+    render: function () {
+        console.log('render!!');
+        let output, status;
+        let obj = this.model.get('trainData');
+        let visible = this.model.get('visible');
+        let route = this.model.get('route');
 
-    if (data.length > 0)    {
+        output = (obj.eta.toLowerCase() === 'on time') ? obj.sta : obj.eta;
-      for (let i = 0; i < data.length; i++)      {
+        status = (obj.eta.toLowerCase() === 'on time') ? 'ontime' : 'delayed';
-        ws = ws + '<div class="mui-row"><div class="mui-col-md-12"><strong>' + data[i].title + '</strong></div></div>';
-        ws = ws + '<div class="mui-row"><div class="mui-col-md-12">' + data[i].description + '</div></div>';
-      }
 
-      this.$traintext.empty().html(ws);
+        this.$button.html(output);
-      this.$traininfo.removeClass('mui--hide').addClass('mui--show');
+        this.$button.removeClass('delayed').removeClass('ontime').addClass(status);
-    } else {
+
-      this.$traininfo.removeClass('mui--show').addClass('mui--hide');
+        console.log('visible', visible);
+
+        /*
+        <div><%=locationName%> TO <%=filterLocationName%></div>
+        <table class="mui-table mui-table-bordered">
+            <tr><th>Destination</th>
+            <th>Time</th>
+            <th>Status</th>
+            <th>Platform</th></tr>
+
+        <% trainServices.forEach(function (item) { %>
+            <tr>
+                <td><%=item.destination[0].locationName%></td>
+                <td><%=item.sta%></td>
+                <td><%=item.eta%></td>
+                <td><%=item.platform%></td>
+            </tr>
+            <% }) %>
+
+        </table>
+         */
+        console.log('route', route);
+        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>
+            `;
+
+            console.log(typeof route.trainServices === 'object' && route.trainServices !== null);
+            if (typeof route.trainServices === 'object' && route.trainServices !== null) {
+                for (item of route.trainServices) {
+                    console.log(item);
+                    let dest = item.destination[0];
+                    let via = dest.via !== null ? `<em>${dest.via}</em>` : '';
+                    let platform = item.platform !== null ? item.platform : '💠';
+                    let time = item.sta !== null ? item.sta : `D ${item.std}`;
+                    let status = item.eta !== null ? item.eta : item.etd;
+                    // ws = ws + `<div class="mui-row"><div class="mui-col-md-12"><strong>${dest.locationName}</strong> ${via}</div></div>`;
+                    // ws = ws + '<div class="mui-row"><div class="mui-col-md-12">' + item.sta + '</div></div>';
+
+                    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>`;
+                    }
+                    console.log('item', item);
+                }
+            }
+
+            if (typeof route.busServices === 'object' && route.busServices !== null) {
+                for (item of route.busServices) {
+                    console.log(item);
+                    let dest = item.destination[0];
+                    let via = dest.via !== null ? `<em>${dest.via}</em>` : '';
+                    let platform = item.platform !== null ? item.platform : '';
+                    let time = item.sta !== null ? item.sta : `D ${item.std}`;
+                    let status = item.eta !== null ? item.eta : item.etd;
+
+                    // ws = ws + `<div class="mui-row"><div class="mui-col-md-12"><strong>${dest.locationName} Bus</strong> ${via}</div></div>`;
+                    // ws = ws + '<div class="mui-row"><div class="mui-col-md-12">' + item.sta + '</div></div>';
+                    ws = ws + `<tr>
+                                                        <td>🚌 ${dest.locationName} ${via}</td>
+                                                        <td>${time}</td>
+                                                        <td>${status}</td>
+                                                        <td>${platform}</td>
+                                                    </tr>`;
+                    console.log('item', item);
+                }
+            }
+
+            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 () {
+        //el: $('#myView').get(0)
+        let self = this;
+        let target = this.model.get('target');
+        let html = `<span>${target.toUpperCase()}: <button class="mui-btn mui-btn--flat" id="${target}"></button></span>`;
+        this.$html = $(html);
+        this.$html.on('click', function () {
+            console.log(self)
+            self.model.getRoute();
+        });
+        this.$trains.append(this.$html);
+
+//        this.el = `#${target}`;
+
+        this.$button = $(`#${target}`);
+
+
+        let cevent = `click #$(target)`;
+        this.events[cevent] = "showTrains";
+    },
+    showTrains: function () {
+        console.log('Show train');
     }
-  }
 
 });
 

gulpfile.js

@@ -22,9 +22,17 @@ let dest = '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/app.js'])
+    return gulp.src(['app/js/modules/bitcoin.js','app/js/modules/fx.js','app/js/modules/train.js','app/app.js'])
          .pipe(stripDebug())
         .pipe(jshint('.jshintrc'))
         .pipe(jshint.reporter('default'))
@@ -57,7 +65,9 @@ gulp.task('vendor', function() {
         return gulp.src([
                          'app/libs/zepto.min.js',
                          'app/libs/microevent.js',
-                         'app/libs/ejs.js'
+                         'app/libs/ejs.js',
+            'app/libs/underscore.js',
+            'app/libs/backbone.js'
         ])
             .pipe(concat('vendor.js'))
             .pipe(uglify({mangle: false}))

views/pages/slackV2.ejs

@@ -229,8 +229,8 @@
                 <div class="mui--text-title mui-text-black">Travel <span id="fx"></div>
                 <!-- Travel -->
                 <div id="trains"></div>
-                <span>DBEGLQ: <button class="mui-btn mui-btn--flat" id="dbeglq"></button></span> <span>GLQDBE: <button class="mui-btn mui-btn--flat" id="glqdbe"></button></span>
+                <!--<span>DBEGLQ: <button class="mui-btn mui-btn&#45;&#45;flat" id="dbeglq"></button></span> <span>GLQDBE: <button class="mui-btn mui-btn&#45;&#45;flat" id="glqdbe"></button></span>-->
-                <div id='trainResults' style='display:none'></div>
+                <div id='trainResults' class="mui--hide"></div>
                 <ul>
                     <li>
                         <a href='http://www.journeycheck.com/firstscotrail'>Journey Check</a>
@@ -379,11 +379,17 @@
     this.bitcoin = new Bitcoin({model: new BitcoinModel()});
     this.fx = new FxView({model: new FxModel()});
 
-    dbeglqModel = new TrainModel({from:'dbe', to:'glq'});
+    // dbeglqModel = new TrainModel({from:'dbe', to:'glq'});
+/*
     glqdbeModel = new TrainModel({from:'glq', to:'dbe'});
     glqhymModel = new TrainModel({from:'glq', to:'hym'});
     hymglqModel = new TrainModel({from:'hym', to:'glq'});
+*/
 
+    dbqglqView = new TrainView({model: new TrainModel({from:'dbe', to:'glq'})});
+    glqdbeView = new TrainView({model: new TrainModel({from:'glq', to:'dbe'})});
+    glqhymView = new TrainView({model: new TrainModel({from:'glq', to:'hym'})});
+    hymglqView = new TrainView({model: new TrainModel({from:'hym', to:'glq'})});
 
 </script>
 </html>

web-server.js

@@ -130,7 +130,7 @@ app.route('/poly').get(polys);
 });*/
 
 app.get('/slack', function(req, res) {
-  res.render('pages/slack');
+  res.render('pages/slackV2');
 });
 
 app.get('/temp', function(req, res) {
@@ -146,6 +146,7 @@ const tfile = 'fb-token.json';
 //
 
 
+/*
 const fitbit = new Fitbit(config.fitbit);
 
 // In a browser, http://localhost:4000/fitbit to authorize a user for the first time.
@@ -184,6 +185,7 @@ jsonfile.readFile('./fb-token.json', function(err, obj) {
     fitbit.setToken(obj);
   }
 });
+*/
 
 
 // });