_views\_fasterQ\FQManagerView.js - digitalsignage.com

/**
 Settings Backbone View
 @class FQManagerView
 @constructor
 @return {Object} instantiated FQManagerView
 **/
define(['jquery', 'backbone', 'ScrollToPlugin', 'TweenMax', 'FQQueuePropView', 'QueuesCollection', 'AnalyticsCollection', 'stopwatch', 'XDate', 'moment'], function ($, Backbone, ScrollToPlugin, TweenMax, FQQueuePropView, QueuesCollection, AnalyticsCollection, stopwatch, XDate, moment) {
 
    var FQManagerView = Backbone.View.extend({
 
        /**
         Constructor
         @method initialize
         **/
        initialize: function () {
            var self = this;
            self.m_offsetPosition = 0;
            self.m_selectedServiceID = -1;
            self.m_fqCreatorView = BB.comBroker.getService(BB.SERVICES.FQCREATORVIEW);
            self.m_stopWatchHandle = new Stopwatch();
            self.m_liveUpdatehandler = undefined;
            self.m_inView = false;
            self.m_masterPanelInView = true;
            self.m_fqQueuePropView = new FQQueuePropView({
                el: Elements.FASTERQ_QUEUE_PROPERTIES
            });
 
            self._listenNextPrev();
            self._listenCalled();
            self._listenServiced();
            self._listenGoBack();
            self._listenOpenRemoteStatus();
 
            self.listenTo(self.options.stackViewMaster, BB.EVENTS.SELECTED_STACK_VIEW, function (e) {
                if (e.$el.selector == Elements.FASTERQ_PANEL) {
                    self.m_masterPanelInView = true;
                } else {
                    self.m_masterPanelInView = false;
                }
            });
 
            self.listenTo(self.options.stackView, BB.EVENTS.SELECTED_STACK_VIEW, function (e) {
                if (e == self) {
                    self.m_inView = true;
                    self.m_liveUpdatehandler = setInterval(function () {
                        if (!self.m_masterPanelInView)
                            return;
                        self._getQueues(false);
                        self._pollNowServicing();
                    }, 10000);
 
                    self._getQueues(true);
                    // self._scrollTo($(Elements.FQ_LINE_QUEUE_COMPONENT + ':first-child'));
 
                } else {
                    self.m_inView = false;
                    window.clearInterval(self.m_liveUpdatehandler);
                    window.clearInterval(self.m_statusHandler);
                }
            });
        },
 
        /**
         Listen to go back to Line selection
         @method _listenGoBack
         **/
        _listenGoBack: function () {
            var self = this;
            $(Elements.FASTERQ_MANAGER_BACK).on('click', function () {
                self.options.stackView.selectView(Elements.FASTERQ_CREATOR_CONTAINER);
                self.m_property = BB.comBroker.getService(BB.SERVICES['PROPERTIES_VIEW']).resetPropertiesView();
            });
        },
 
        /**
         Get Queues collection from server and render UI
         @method _getLines server:getQueues
         @params {boolean} i_scrollTo scroll to
         **/
        _getQueues: function (i_scrollTo) {
            var self = this;
            self.m_queuesCollection = new QueuesCollection();
            self.m_queuesCollection.fetch({
                data: {line_id: self.m_fqCreatorView.getSelectedLine()},
                success: function (models) {
                    self._updateTotalToBeServiced();
                    self._render();
                    if (i_scrollTo)
                        self._scrollToFirstNotServiced();
                },
                error: function () {
                    log('error fetch /Queues collection');
                }
            });
        },
 
        /**
         Get the last called service_id for line
         @method _pollNowServicing server:LastCalledQueue
         **/
        _pollNowServicing: function () {
            var self = this;
            $.ajax({
                url: BB.CONSTS.ROOT_URL + '/LastCalledQueue',
                data: {
                    business_id: BB.Pepper.getUserData()['businessID'],
                    line_id: self.m_fqCreatorView.getSelectedLine()
                },
                success: function (i_model) {
                    $(Elements.FQ_NOW_SERVICING).text(i_model.service_id);
                },
                error: function (e) {
                    log('error ajax ' + e);
                },
                dataType: 'json'
            });
        },
 
        /**
         Update the total number of queues left to be serviced
         @method _updateTotalToBeServiced
         **/
        _updateTotalToBeServiced: function () {
            var self = this;
            if (_.isUndefined(self.m_queuesCollection))
                return;
            var total = 0;
            self.m_queuesCollection.each(function (model) {
                if (_.isNull(model.get('serviced')))
                    total++;
                $(Elements.FQ_TOTAL_TO_BE_SERVICED).text(total);
            });
 
        },
 
        /**
         Start the stop watch UI
         @method _watchStart
         **/
        _watchStart: function () {
            var self = this;
            self.m_stopWatchHandle.setListener(function (e) {
                $(Elements.FQ_TIME_WITH_CUSTOMER).text(self.m_stopWatchHandle.toString());
            });
            self.m_stopWatchHandle.start();
        },
 
        /**
         Stop the stop watch UI
         @method _watchStop
         **/
        _watchStop: function () {
            var self = this;
            self.m_stopWatchHandle.stop();
            self.m_stopWatchHandle.reset();
            $(Elements.FQ_TIME_WITH_CUSTOMER).text('00:00:00');
        },
 
        /**
         Render the UI queues list from returned server data
         @method _render
         **/
        _render: function () {
            var self = this;
            if (!self.m_inView)
                return;
            self.m_fqQueuePropView.showProp();
            var snippet;
 
 
            $(Elements.FQ_LINE_QUEUE_COMPONENT).empty();
 
            var selectedLine = self.m_fqCreatorView.getSelectedLine();
            $(Elements.FQ_LINE_NAME).text(self.m_fqCreatorView.getSelectedLineName(selectedLine));
 
            for (var i = -8; i < 0; i++) {
                snippet = '<div class="' + BB.lib.unclass(Elements.CLASS_PERSON_IN_LINE) + '">';
                $(Elements.FQ_LINE_QUEUE_COMPONENT).append(snippet);
            }
 
            self.m_queuesCollection.each(function (model) {
                var serviceID = model.get('service_id');
                var called = model.get('called');
                var serviced = model.get('serviced');
                var color = 'gray';
 
                if (serviced) {
                    color = '#ACFD89';
                } else if (called) {
                    color = '#BE6734';
                } else {
                    color = '#D0D0D0';
                }
 
                var val = BB.lib.padZeros(serviceID, 3, 0);
                snippet = '<div data-service_id="' + serviceID + '" class="' + BB.lib.unclass(Elements.CLASS_PERSON_IN_LINE) + '">';
                snippet += '<i style="font-size: 90px; color: ' + color + '"  class="fa fa-male">';
                snippet += '</i><h3 style="position: relative; left: 6px">' + val + '</h3></div>';
                $(Elements.FQ_LINE_QUEUE_COMPONENT).append(snippet);
            });
            self._listenToPersonSelected();
            self._getAnalytics();
        },
 
        /**
         Get line analytics / stats
         @method _getAnalytics server:lineAnalytics
         **/
        _getAnalytics: function () {
            var self = this;
            self.m_analyticsCollection = new AnalyticsCollection();
 
            self.m_analyticsCollection.fetch({
                data: {line_id: self.m_fqCreatorView.getSelectedLine()},
                success: function (models) {
                    self._calcAverages();
                },
                error: function () {
                    log('error fetch /Queues collection');
                }
            });
        },
 
        /**
         Calculate average respond and service line times
         @method _calcAverages
         **/
        _calcAverages: function () {
            var self = this;
 
            var avgServiceTime = [];
            var avgCalledTime = [];
 
            self.m_analyticsCollection.forEach(function (i_model) {
                var entered = i_model.get('entered');
                var serviced = i_model.get('serviced');
                var called = i_model.get('called');
 
                if (_.isNull(called)) {
                    // customer not called, do nothing
                } else if (!_.isNull(serviced)) {
 
                    // customer called & serviced
                    var xEntered = new XDate(entered);
                    var minFromEnteredToCalled = xEntered.diffMinutes(called);
                    if (minFromEnteredToCalled < 0)
                        minFromEnteredToCalled = 1;
                    avgCalledTime.push(minFromEnteredToCalled);
 
                    var xCalled = new XDate(called);
                    var minFromCalledToServiced = xCalled.diffMinutes(serviced);
                    avgServiceTime.push(minFromCalledToServiced);
 
                } else {
 
                    // customer called not serviced
                    var xEntered = new XDate(entered);
                    var minFromEnteredToCalled = xEntered.diffMinutes(called);
                    if (minFromEnteredToCalled < 0)
                        minFromEnteredToCalled = 1;
                    avgCalledTime.push(minFromEnteredToCalled);
                }
            });
 
            var avgServiceTimeCalc = _.reduce(avgServiceTime, function (memo, num) {
                    return memo + num;
                }, 0) / (avgServiceTime.length === 0 ? 1 : avgServiceTime.length);
 
            var avgCalledTimeCalc = _.reduce(avgCalledTime, function (memo, num) {
                    return memo + num;
                }, 0) / (avgCalledTime.length === 0 ? 1 : avgCalledTime.length);
 
            $(Elements.FQ_AVG_CUSTOMER_SERVICE).text(BB.lib.parseToFloatDouble(avgServiceTimeCalc))
            $(Elements.FQ_AVG_CUSTOMER_WAIT).text(BB.lib.parseToFloatDouble(avgCalledTimeCalc));
        },
 
        /**
         Scroll to first queue that has not been serviced yet, if non exist, scroll to first queue
         @method _scrollToFirstNotServiced
         **/
        _scrollToFirstNotServiced: function () {
            var self = this;
            var found = false;
            if (self.m_queuesCollection.length == 0)
                return;
            self.m_queuesCollection.each(function (model) {
                if (found)
                    return;
                var service_id = model.get('service_id');
                var serviced = model.get('serviced');
                if (_.isNull(serviced)) {
                    var elem = self.$('[data-service_id="' + service_id + '"]');
                    self._scrollTo(elem);
                    found = true;
                }
            });
        },
 
        /**
         Listen to UI person / queue click to load selected properties and scroll to selection
         @method _listenToPersonSelected
         **/
        _listenToPersonSelected: function () {
            var self = this;
            $(Elements.CLASS_PERSON_IN_LINE).off().on('click', function (e) {
                var person = $(this).closest('[data-service_id]');
                $(person).data('service_id');
                self._scrollTo(person);
            })
        },
 
        /**
         Scroll to position of selected queue / UI person
         @method _scrollTo
         @param {Element} i_element
         **/
        _scrollTo: function (i_element) {
            var self = this;
            self._watchStop();
            if (i_element.length == 0)
                return;
            self.m_selectedServiceID = $(i_element).data('service_id');
            var model = self.m_queuesCollection.where({'service_id': self.m_selectedServiceID})[0];
            self._populatePropsQueue(model);
 
            var scrollXPos = $(i_element).position().left;
            // console.log('current offset ' + scrollXPos + ' ' + 'going to index ' + $(i_element).index() + ' service_id ' + $(i_element).data('service_id'));
            self.m_offsetPosition = $(Elements.FQ_LINE_QUEUE_COMPONENT_CONTAINER).scrollLeft();
            scrollXPos += self.m_offsetPosition;
            var final = scrollXPos - 480;
            TweenLite.to(Elements.FQ_LINE_QUEUE_COMPONENT_CONTAINER, 2, {
                scrollTo: {x: final, y: 0},
                ease: Power4.easeOut
            });
        },
 
        /**
         Populate the selected queue's properties UI
         @method _populatePropsQueue
         @params {Number} i_value
         **/
        _populatePropsQueue: function (i_model) {
            var self = this;
            if (_.isUndefined(i_model))
                return;
            if (!self.m_inView)
                return;
            $(Elements.FQ_SELECTED_QUEUE).text(i_model.get('service_id'));
            $(Elements.FQ_VERIFICATION).text(i_model.get('verification') == -1 ? 'print out' : i_model.get('verification'));
            $(Elements.FQ_CALLED_BY).text(_.isNull(i_model.get('called_by')) ? 'none' : i_model.get('called_by'));
        },
 
        /**
         Listen to queue being called, mark on UI and post to server
         @method _listenCalled
         **/
        _listenCalled: function () {
            var self = this;
            $(Elements.FQ_LINE_COMP_CALL).on('click', function () {
                var model = self.m_queuesCollection.where({'service_id': self.m_selectedServiceID})[0];
                if (_.isUndefined(model))
                    return;
                if (!_.isNull(model.get('serviced'))) {
                    bootbox.alert('customer has already been serviced');
                    return;
                }
                self._watchStart();
                var elem = self.$('[data-service_id="' + (self.m_selectedServiceID) + '"]');
                $(elem).find('i').fadeOut(function () {
                    $(this).css({color: '#BE6734'}).fadeIn();
                });
                $(Elements.FQ_LAST_CALLED).text(self.m_selectedServiceID);
                var d = new XDate();
                model.set('called', d.toString('M/d/yyyy hh:mm:ss TT'));
                model.set('called_by', pepper.getUserData().userName);
                model.set('called_by_override', false);
 
                self._populatePropsQueue(model);
 
                model.save(null,{
                    success: (function (model, data) {
                        if (data.updated == 'alreadyCalled'){
                            bootbox.confirm('Customer already called by user' + data.called_by + ' <br/><br/>Would you like to call the customer again?', function(result) {
                                if (result){
                                    model.set('called_by_override', true);
                                    model.save();
                                }
                            });
                        }
                    }),
                    error: (function (e) {
                        bootbox.alert('Service request failure: ' + e);
                    }),
                    complete: (function (e) {
                    })
                });
            });
        },
 
        /**
         Listen to queue being serviced, mark on UI and post to server
         @method _listenServiced
         **/
        _listenServiced: function () {
            var self = this;
            $(Elements.FQ_LINE_COMP_SERVICED).on('click', function () {
                self._watchStop();
                var model = self.m_queuesCollection.where({'service_id': self.m_selectedServiceID})[0];
                if (_.isUndefined(model))
                    return;
                if (_.isNull(model.get('called'))) {
                    bootbox.alert('customer has not been called yet');
                    return;
                }
                if (!_.isNull(model.get('serviced'))) {
                    bootbox.alert('customer has already been serviced');
                    return;
                }
                var elem = self.$('[data-service_id="' + (self.m_selectedServiceID) + '"]');
                $(elem).find('i').fadeOut(function () {
                    $(this).css({color: '#ACFD89'}).fadeIn();
                });
                $(Elements.FQ_LAST_SERVICED).text(self.m_selectedServiceID);
                var d = new XDate();
                model.set('serviced', d.toString('M/d/yyyy hh:mm:ss TT'));
                log('service ' + model.get('serviced'));
                model.save({
                    success: (function (model, data) {
                        log(model);
                    }),
                    error: (function (e) {
                        log('Service request failure: ' + e);
                    }),
                    complete: (function (e) {
                    })
                });
            });
        },
 
        /**
         Listen to person navigation button selection to scroll to selected queue index
         @method _listenNextPrev
         **/
        _listenNextPrev: function () {
            var self = this;
 
            $(Elements.FQ_LINE_COMP_PREV).on('click', function () {
                if (_.isUndefined(self.m_queuesCollection))
                    return;
                if (self.m_selectedServiceID == 1)
                    return;
                var elem = self.$('[data-service_id="' + (self.m_selectedServiceID - 1) + '"]');
                self._scrollTo(elem);
            });
 
            $(Elements.FQ_LINE_GOTO).on('click', function () {
                var value = $(Elements.FQ_GOTO_LINE_INPUT).val();
                if (_.isUndefined(self.m_queuesCollection))
                    return;
                var elem = self.$('[data-service_id="' + value + '"]');
                self._scrollTo(elem);
            });
 
            $(Elements.FQ_LINE_COMP_NEXT).on('click', function () {
                if (_.isUndefined(self.m_queuesCollection))
                    return;
                if (self.$('[data-service_id]').children().length == self.m_queuesCollection.length)
                    return;
                var elem = self.$('[data-service_id="' + (self.m_selectedServiceID + 1) + '"]');
                self._scrollTo(elem);
            });
 
        },
 
        /**
         Open remote status terminal for selected queue
         @method _listenOpenRemoteStatus
         **/
        _listenOpenRemoteStatus: function () {
            var self = this;
            $(Elements.FQ_OPEN_CUSTOMER_REMOTE_STATUS).on('click', function (e) {
                var line_id = self.m_fqCreatorView.getSelectedLine()
                var data = {
                    call_type: 'REMOTE_STATUS',
                    business_id: BB.Pepper.getUserData()['businessID'],
                    line_id: line_id,
                    line_name: self.m_fqCreatorView.getSelectedLineName(line_id)
                };
                data = $.base64.encode(JSON.stringify(data));
                var url = BB.CONSTS.BASE_URL + '?mode=remoteStatus&param=' + data;
                window.open(url, "_blank", "toolbar=yes, scrollbars=yes, resizable=yes, top=10, left=10, width=400, height=400");
            })
        }
    });
 
    return FQManagerView;
});
digitalsignage.com - open source docs

APIs

_views\_fasterQ\FQManagerView.js File
