silvrgit/app/js/v2/train.js

/**
 *
 * 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 = `https://traintimes.silvrtree.co.uk/getnexttraintimes?from=${ this.get('from') }&to=${ this.get('to')}`;
    const routeUrl = `https://traintimes.silvrtree.co.uk/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 };