PHP File Manager

Editing File: signpad.js

(function(window)
{
    var signPad = {
    
        appCache: null,
        localStorage: null,
    
        _defaults: {
            
            pollLength: 30000, // 30 seconds
            defaultKey: '_sp:'
        },
        
        _data: {},
        
        _items: [],
        _existingItemIds: [],
        
        _polledItems: [],
        _existingPolledItemsIds: [],
        
        _completedItemsIds: [],
        _pendingItemsIds: [],
        
        _pendingRequests: [],
    
        init: function(callback)
        {
            var $this = this;
            
            $this.appCache = window.applicationCache;
            $this.localStorage = window.mozLocalStorage || window.webkitLocalStorage || window.localStorage;
            
            $(document).ajaxComplete(function(event, xhr)
            {
                try {

var requestData = $.parseJSON(xhr.responseText);

if(requestData !== null)
                    {
                        if(typeof requestData.loginRequired !== 'undefined' || typeof requestData.unauthorized !== 'undefined')
                        {
                            window.location.replace(requestData.url);
                        }
                    }
                }
                catch(err){}
            });
            
            $(window).load(function()
            {
                var statusBar = $('#status'),
                    statusBarLogger = $('.status-log', statusBar),
                    statusBarCounter = $('.status-count', statusBar),
                    statusBarLoader = $('.status-loading', statusBar);
                
                $($this.appCache).on('cached checking downloading error noupdate obsolete progress updateready', function(event)
                {
                    if(event.type == 'progress')
                    {
                        var appCacheProgress = event.originalEvent,
                            percentLoaded = ((100 / appCacheProgress.total) * appCacheProgress.loaded);
                       
                        statusBarLoader.html('<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped" style="width: ' + percentLoaded + '%;"></div></div>');
                    }
                    else if(event.type == 'noupdate')
                    {
                        statusBarLoader.text('No device updates');
                    }
                    else if(event.type == 'updateready')
                    {
                        try {
                            
                            $this.appCache.swapCache();
                            statusBarLoader.text('Updated device');
                            
                            window.location.reload(true);
                        }
                        catch(e){
                            
                            console.log('Could not swap cache', e);
                        }
                    }
                });
                
                $(window).on('online offline', function(event)
                {
                    statusBarLogger.text('Device ' + ((navigator.onLine) ? 'online' : 'offline')).removeClass('status-error status-success').addClass((navigator.onLine) ? 'status-success' : 'status-error');
                
                    $this.processPendingRequests().then(function()
                    {
                        $this.getTasks(function()
                        {
                            $this.removeAlreadyProcessedTasks();
                        });
                    });
                })
                .triggerHandler('online');
                
                $('#items-list').on('click', '.step-btn', function()
                {
                    var self = $(this),
                        mode = self.data('mode'),
                        itemRow = self.closest('.item-wrapper'),
                        orderId = +itemRow.data('order-id'),
                        itemId = +itemRow.data('item-id');
                        
                    if(mode == 'processed')
                    {
                        if(confirm('Please confirm that you have processed this item'))
                        {
                            $this.sendRequest({ process_item: 1, item_id: itemId }, function(response)
                            {
                                $this.markItemRow(itemRow, itemId, response);
                            });
                        }
                    }
                    else if(mode == 'select')
                    {
                        var progressModal = $('#progress-modal'),
                            progressList = '<ul class="side-progress" data-item-id="' + itemId + '" data-order-id="' + orderId + '">',
                            progressData = $this.getItemInfo(itemId).progress;

$.each(progressData, function(i, progressInfo)
                        {
                            progressList += '<li class="progress-step' + ((progressInfo.status_passed == 1) ? ' passed no-hover' : ((progressInfo.can_select == 1) ? ' unreached' : '')) + ((progressInfo.current_status == 1) ? ' current' : '') + '"> \
                                                 <label class="radio tooltipped"> \
                                                     ' + ((progressInfo.can_select == 1 && progressInfo.current_status == 0 && progressInfo.status_passed == 0) ? '<input type="radio" name="order_status" value="' + progressInfo.status_id + '" data-status-type="' + progressInfo.label + '" />' : '') + ' \
                                                     <strong>' + progressInfo.label + '</strong> \
                                                     ' + ((progressInfo.date_changed_str) ? '<span>' + ((i > 0) ? 'Updated' : 'Placed') + ' on ' + progressInfo.date_changed_str + ((progressInfo.changed_by !== null) ? ' by <em class="changed-by">' + progressInfo.changed_by + '</em>' : '') : '') + ' \
                                                     ' + ((progressInfo.date_changed_str === null && progressInfo.status_passed == 1) ? '<span>This step was skipped</span>' : '') + ' \
                                                 </label> \
                                             </li>';
                        });

progressList += '</ul>';

$('.modal-body', progressModal).html(progressList);

progressModal.modal('show');
                    }
                });
                
                $('#reload-orders').click(function(event)
                {
                    event.preventDefault();
                    
                    $(this).removeClass('new-orders')
                    $this.loadPolledOrders();
                });
                
                $('#progress-modal').on('change', 'input[name="order_status"]', function()
                {
                    var self = $(this),
                        progressStatuses = $('input[name="order_status"]', '#progress-modal'),
                        statusType = self.data('status-type'),
                        itemData = self.closest('ul').data(),
                        statusId = +self.val(),
                        itemId = +itemData.itemId;

if(confirm('Are you sure you want to change the status to "' + statusType + '"?'))
                    {
                        progressStatuses.prop('disabled', true);

$this.sendRequest({ update_product_status: statusId, item_id: itemId }, function(response)
                        {
                            var relatedItemRow = $('#item-row-' + itemId);
                            
                            $this.markItemRow(relatedItemRow, itemId, response);
                            
                            if(response.success === false)
                            {
                                progressStatuses.prop('disabled', false);
                            }
                            else
                            {
                                $('#progress-modal').modal('hide');
                            }
                        }, true, true);
                    }
                });
                
                $('#items-list').on('click', '.change-internal-note', function(event)
                {
                    event.preventDefault();

var noteSlipBlock = $(this).closest('.note-slip');

$('.note-wrapper', noteSlipBlock).hide();
                    $('form', noteSlipBlock).show(0, function()
                    {
                        $('textarea', noteSlipBlock).focus();
                    });
                });
                
                $this.getTasks(function()
                {
                    $('#logged-in-user').empty().text('Hello, ' + $this._data.user_name).append('<a href="/logout">Not you?</a>');
                    
                    $this.parseOrderItems(true).then(function()
                    {
                        $this.countList();
                        statusBarCounter.text('Orders loaded');
                        
                        $this.sortItemsList();
                        
                        callback();
                        
                        setTimeout(function()
                        {
                            $this.pollNewOrders();
                        }, $this._defaults.pollLength);
                    });
                });
            });
        },
        
        getTasks: function(callback)
        {
            var $this = this;
            
            $this.sendRequest({ get_items: 1 }, function(response)
            {
                $this._data = response.data;
                $this._items = response.items;
                
                if(typeof callback === 'function')
                {
                    callback($this.items);
                }
            }, false);
        },
        
        parseOrderItems: function(emptyList)
        {
            var defer = $.Deferred(),
                $this = this,
                itemsListWrapper = $('#items-list'),
                itemsList = $this._items,
                totalTasks = itemsList.length;
        
            if(typeof emptyList !== 'undefined')
            {
                itemsListWrapper.empty();
            }
        
            if(itemsList.length)
            {
                $.each(itemsList, function(i, itemInfo)
                {
                    setTimeout(function()
                    {
                        $($this.itemToHtmlRow(itemInfo)).appendTo(itemsListWrapper);

if($('.item-wrapper', itemsListWrapper).length == totalTasks)
                        {
                            defer.resolve();
                        }
                    }, 0);
                });
            }
            else
            {
                itemsListWrapper.html('<div class="loading-list">No items to process</div>');
                defer.resolve();
            }
            
            return defer.promise();
        },
        
        itemToHtmlRow: function(itemInfo)
        {
            var $this = this;
            
            if($.inArray(+itemInfo.item_id, $this._existingItemIds) === -1)
            {
                $this._existingItemIds.push(+itemInfo.item_id);
            }
            
            var additionalClasses = $.map({ completed: $this._completedItemsIds, pending: $this._pendingItemsIds }, function(checkArray, className)
            {
                return ($.inArray(+itemInfo.item_id, checkArray) >= 0) ? ' ' + className : null;
            }).join('');
            
            var rowHtml = '<div class="item-wrapper priority-' + itemInfo.priority + additionalClasses + '" id="item-row-' + itemInfo.item_id + '" data-order-id="' + itemInfo.order_id + '" data-item-id="' + itemInfo.item_id + '"> \
                                <div class="row item-row"> \
                                    <div class="col-xs-12 item-details"> \
                                        <span class="glyphicon glyphicon-chevron-right chev-icon"></span> \
                                        <span class="order-priority"> \
                                            <span class="glyphicon glyphicon-star star-1"></span> \
                                            <span class="glyphicon glyphicon-star star-2"></span> \
                                        </span> \
                                        <span class="inline-product-name">' + itemInfo.name + '</span> \
                                        <span class="label label-inverse close-label">Close</span> \
                                        <span class="label label-warning progress-label pending-label">Pending</span> \
                                        <span class="label label-success progress-label completed-label">Completed</span> \
                                    </div> \
                                </div> \
                                <div class="row item-info"> \
                                    <div class="col-xs-12"> \
                                        <div class="product-name"><h4>' + itemInfo.name + '</h4></div> \
                                            <div class="styled-table"> \
                                                <div class="row styled-row"> \
                                                    <div class="col-xs-3 styled-cell"> \
                                                        <div class="product-image"> \
                                                            <p class="quantity-count">' + itemInfo.quantity + ' x</p> \
                                                            <img src="' + itemInfo.photo + '" alt="" /> \
                                                        </div> \
                                                    </div> \
                                                    <div class="col-xs-9 styled-cell"> \
                                                        <div class="item-inner-info"> \
                                                            ' + ((itemInfo.quantity > 1) ? '<div class="alert alert-warning"><strong>Notice:</strong> ' + itemInfo.quantity + ' of this item is needed for this order</div>' : '') + ' \
                                                            <p><strong>Customer:</strong> <a href="/customers/view/' + itemInfo.customer_id + '" target="_blank">' + ((itemInfo.business) ? itemInfo.business : itemInfo.first_name + ' ' + itemInfo.last_name) + '</a> &nbsp;&sdot;&nbsp; <a href="/orders/view/' + itemInfo.order_id + '" target="_blank">#' + itemInfo.order_number + '</a></p> \
                                                            <div class="note-contents"> \
                                                                <h5>Special/delivery notes</h5> \
                                                                <div class="note-slip"> \
                                                                    <div class="note-wrapper"> \
                                                                        ' + ((itemInfo.delivery_notes !== null) ? '<p>' + $('<div />').text(itemInfo.delivery_notes).html().replace(/\n/g, '<br />') + '</p>' : '<em>None</em>') + ' \
                                                                    </div> \
                                                                </div> \
                                                            </div>\
                                                            <div class="note-contents"> \
                                                                <h5>Internal notes</h5> \
                                                                <div class="note-slip"> \
                                                                    <div class="note-wrapper"> \
                                                                        ' + ((itemInfo.internal_notes !== null) ? '<p>' + $('<div />').text(itemInfo.internal_notes).html().replace(/\n/g, '<br />') + '</p>' : '<em>None</em>') + ' \
                                                                        <a href="#" class="change-internal-note">change</a> \
                                                                    </div> \
                                                                    <form action="/orders/view/' + itemInfo.order_id + '" class="order-notes-' + itemInfo.order_id + '-form" method="post"> \
                                                                        <textarea name="note" rows="5" class="form-control">' + ((itemInfo.internal_notes !== null) ? $('<textarea />').val(itemInfo.internal_notes).val() : '') + '</textarea> \
                                                                        <button type="submit" name="update_note" value="1" class="btn btn-primary btn-xs">Save</button> \
                                                                    </form> \
                                                                </div> \
                                                            </div> \
                                                            <div class="step-selection"> \
                                                                <button type="button" class="btn btn-success step-btn processed-item" data-mode="processed"><span class="glyphicon glyphicon-ok"></span> Mark as ' + $this._data.button_text + '</button> \
                                                                <button type="button" class="btn btn-success step-btn skip-to-step" data-mode="select"><span class="glyphicon glyphicon-log-in"></span> or select step</button> \
                                                            </div> \
                                                        </div> \
                                                    </div> \
                                                </div> \
                                            </div> \
                                        </div> \
                                    </div> \
                                </div> \
                            </div>';
            
            return rowHtml;
        },
        
        getItemInfo: function(itemId)
        {
            var foundItem = false;
            
            if(typeof itemId !== 'undefined')
            {
                $.each(this._items, function(i, itemInfo)
                {
                    if(itemInfo.item_id == itemId)
                    {
                        foundItem = itemInfo;
                        return;
                    }
                });
            }
            
            return foundItem;
        },
        
        networkStatus: function()
        {
            return navigator.onLine;
        },
        
        sendRequest: function(data, callback, saveAfterFail, saveCallbackFunc)
        {
            var $this = this,
                saveAfterFail = (typeof saveAfterFail === 'boolean') ? saveAfterFail : true,
                saveCallbackFunc = (typeof saveCallbackFunc === 'boolean') ? saveCallbackFunc : false,
                objData = { data: data };
        
            if(saveCallbackFunc && typeof callback === 'function')
            {
                objData['callback'] = callback;
            }
            
            if(!$this.networkStatus())
            {
                console.log('Device offline - saving request');
                
                $this.savePendingRequest(data);
                callback(-1);
            }
            else
            {
                $.post('', data).done(function(response, textStatus, xhr)
                {
                    if(xhr.status != 200)
                    {
                        console.log('Non-200 response - saving request');
                        
                        $this.savePendingRequest(data);
                        callback(-1);
                    }
                    else
                    {
                        callback(response);
                    }
                })
                .fail(function(xhr, textStatus, errorThrown)
                {
                    console.log('Request failed, possibly offline - saving request');
                    
                    $this.savePendingRequest(data);
                    callback(-1);
                });
            }
        },
        
        savePendingRequest: function(data)
        {
            var $this = this;
            
            $this._pendingRequests.push(objData);
        },
        
        processPendingRequests: function()
        {
            var defer = $.Deferred(),
                $this = this,
                requestCount = $this._pendingRequests.length;
            
            if(requestCount > 0)
            {
                $.each($this._pendingRequests, function(i, requestData)
                {
                    if($this.networkStatus())
                    {
                        $this.sendRequest(requestData.data, function()
                        {
                            if(typeof requestData.callback === 'function')
                            {
                                requestData.callback();
                            }

if((i + 1) == requestCount)
                            {
                                defer.resolve();
                            }
                        }, false);

$this._pendingRequests.splice(i, 1);
                    }
                });
            }
            else
            {
                defer.resolve();
            }
            
            return defer.promise();
        },
        
        removeAlreadyProcessedTasks: function()
        {
            var $this = this,
                shownItemsIds = $('.item-wrapper', '#items-list').map(function()
                {
                    return $(this).data('item-id');
                }).get();
            
            if(shownItemsIds.length)
            {
                $.each(shownItemsIds, function(i, rowItemId)
                {
                });
            }
        },
        
        pollNewOrders: function()
        {
            var $this = this,
                statusBarCounter = $('.status-counter', '#status').addClass('loading');
            
            $this.sendRequest({ get_items: 1 }, function(response)
            {
                statusBarCounter.removeClass('loading');
                      
                if(response.success)
                {
                    $.each(response.items, function(i, itemInfo)
                    {
                        if($.inArray(+itemInfo.item_id, $this._existingItemIds) === -1 && $.inArray(+itemInfo.item_id, $this._existingPolledItemsIds) === -1)
                        {
                            $this._polledItems.push(itemInfo);
                            $this._existingPolledItemsIds.push(+itemInfo.item_id);
                        }
                    });
                }
                
                $('.status-count', statusBarCounter).html(($this._existingPolledItemsIds.length > 0) ? '<label class="label label-danger poll-count">' + $this._existingPolledItemsIds.length + ' new orders</label>' : 'No new orders');
                $('#reload-orders')[($this._existingPolledItemsIds.length > 0) ? 'addClass' : 'removeClass']('new-orders');
                
                setTimeout(function()
                {
                    $this.pollNewOrders();
                }, $this._defaults.pollLength);
            }, false);
        },
        
        loadPolledOrders: function(callback)
        {
            var $this = this;
            
            $this._items = $this._items.concat($this._polledItems);
            $this._existingItemIds = $this._existingItemIds.concat($this._existingPolledItemsIds);
            
            $this._polledItems = [];
            $this._existingPolledItemsIds = [];            
            
            $this.parseOrderItems(true).then(function()
            {
                $this.countList();
                $('.status-count', '#status').text('Orders loaded');
                
                $this.sortItemsList();
                
                if(typeof callback === 'function')
                {
                    callback();
                }
            });
        },
        
        markItemRow: function(rowElem, itemId, markType)
        {
            var $this = this;
            
            if(markType === -1)
            {
                rowElem.addClass('pending');
                $this._pendingItemsIds.push(itemId);
            }
            else if(markType.success === true)
            {
                rowElem.addClass('completed');
                $this._completedItemsIds.push(itemId);
            }

//$('#items-list').append(rowElem);
            $('.item-row', rowElem).trigger('click');
            
            $this.countList();
            $this.sortItemsList();
        },
        
        sortItemsList: function()
        {
            var highestPriorityTasks = [],
                highPriorityTasks = [],
                normalTasks = [],
                completedTasks = [],
                pendingTasks = [];
            
            $('.item-wrapper', '#items-list').each(function()
            {
                var thisRow = $(this);
                
                if(thisRow.hasClass('completed'))
                {
                    completedTasks.push(thisRow);
                }
                else if(thisRow.hasClass('pending'))
                {
                    pendingTasks.push(thisRow);
                }
                else
                {
                    if(thisRow.hasClass('priority-3'))
                    {
                        highestPriorityTasks.push(thisRow);
                    }
                    else if(thisRow.hasClass('priority-2'))
                    {
                        highPriorityTasks.push(thisRow);
                    }
                    else
                    {
                        normalTasks.push(thisRow);
                    }
                }
            });
            
            var mergedRows = $($.map([].concat(highestPriorityTasks, highPriorityTasks, normalTasks, completedTasks, pendingTasks), function(el)
            {
                return el.get();
            }));
            
            $('#items-list').html(mergedRows);
        },
        
        countList: function()
        {
            var taskRows = $('.item-wrapper', '#items-list');
            
            $('#items-done').text(taskRows.filter('.completed, .pending').length);
            $('#items-left').text(taskRows.not('.completed, .pending').length);
        }
    };

window.signPad = signPad;
    
})(typeof window !== 'undefined' ? window : this);

Cancel