silvrgit/app/js/modules/train.js

/**
 *
 * User: Martin Donnelly
 * Date: 2016-10-03
 * Time: 14:20
 *
 */

let TrainModel = Backbone.Model.extend({
    initialize: function () {

        let fromStation = this.get('from');
        let toStation = this.get('to');
        let url = '/getnexttraintimes?from=' + fromStation + '&to=' + toStation;
        let routeUrl = '/gettrains?from=' + fromStation + '&to=' + toStation;
        let target = fromStation + toStation;
        this.set('url', url);
        this.set('routeUrl', routeUrl);
        this.set('target', target);
        this.set('visible', false);
        this.update();
    },
    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;
        $.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) {
                /*
                 console.log(data);
                 */
                self.set('trainData', data);
            },
            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.error('ajax error');
                    console.error(xhr);
                    console.error(type);
                }
            });
        }

    }
});

let 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 () {

        let output, status;
        let obj = this.model.get('trainData');
        let visible = this.model.get('visible');
        let route = this.model.get('route');

        output = (obj.eta.toLowerCase() === 'on time') ? obj.sta : obj.eta;
        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>
            `;

            if (typeof route.trainServices === 'object' && route.trainServices !== null) {
                for (let item of route.trainServices) {
                    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;

                    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 (let item of route.busServices) {
                    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>`;
                }
            }

            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 = `<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.el = `#${target}`;

        this.$button = $(`#${target}`);


        let cevent = `click #$(target)`;
        this.events[cevent] = "showTrains";
    },
    showTrains: function () {
        console.log('Show train');
    }

});