rearview 1.0.0.rc1-jruby → 1.0.0.rc2-jruby

data/public/rearview-src/js/util/highcharts-gray-theme.js

@@ -0,0 +1,266 @@
+/**
+ * Gray theme for Highcharts JS
+ * @author Torstein Hønsi
+ * @amd author Ian Quattlebaum
+ */
+define(['jquery', 'highcharts'], function (jQuery, Highcharts) {
+	Highcharts.theme = {
+		colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
+			"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
+		chart: {
+			backgroundColor: {
+				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+				stops: [
+					[0, 'rgb(96, 96, 96)'],
+					[1, 'rgb(16, 16, 16)']
+				]
+			},
+			borderWidth: 0,
+			borderRadius: 15,
+			plotBackgroundColor: null,
+			plotShadow: false,
+			plotBorderWidth: 0
+		},
+		title: {
+			style: {
+				color: '#FFF',
+				font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
+			}
+		},
+		subtitle: {
+			style: {
+				color: '#DDD',
+				font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
+			}
+		},
+		xAxis: {
+			gridLineWidth: 0,
+			lineColor: '#999',
+			tickColor: '#999',
+			labels: {
+				style: {
+					color: '#999',
+					fontWeight: 'bold'
+				}
+			},
+			title: {
+				style: {
+					color: '#AAA',
+					font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
+				}
+			}
+		},
+		yAxis: {
+			alternateGridColor: null,
+			minorTickInterval: null,
+			gridLineColor: 'rgba(255, 255, 255, .1)',
+			lineWidth: 0,
+			tickWidth: 0,
+			labels: {
+				style: {
+					color: '#999',
+					fontWeight: 'bold'
+				}
+			},
+			title: {
+				style: {
+					color: '#AAA',
+					font: 'bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
+				}
+			}
+		},
+		legend: {
+			itemStyle: {
+				color: '#CCC'
+			},
+			itemHoverStyle: {
+				color: '#FFF'
+			},
+			itemHiddenStyle: {
+				color: '#333'
+			}
+		},
+		labels: {
+			style: {
+				color: '#CCC'
+			}
+		},
+		tooltip: {
+			backgroundColor: {
+				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+				stops: [
+					[0, 'rgba(96, 96, 96, .8)'],
+					[1, 'rgba(16, 16, 16, .8)']
+				]
+			},
+			borderWidth: 0,
+			style: {
+				color: '#FFF'
+			}
+		},
+
+
+		plotOptions: {
+			line: {
+				dataLabels: {
+					color: '#CCC'
+				},
+				marker: {
+					lineColor: '#333'
+				}
+			},
+			spline: {
+				marker: {
+					lineColor: '#333'
+				}
+			},
+			scatter: {
+				marker: {
+					lineColor: '#333'
+				}
+			},
+			candlestick: {
+				lineColor: 'white'
+			}
+		},
+
+		toolbar: {
+			itemStyle: {
+				color: '#CCC'
+			}
+		},
+
+		navigation: {
+			buttonOptions: {
+				backgroundColor: {
+					linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+					stops: [
+						[0.4, '#606060'],
+						[0.6, '#333333']
+					]
+				},
+				borderColor: '#000000',
+				symbolStroke: '#C0C0C0',
+				hoverSymbolStroke: '#FFFFFF'
+			}
+		},
+
+		exporting: {
+			buttons: {
+				exportButton: {
+					symbolFill: '#55BE3B'
+				},
+				printButton: {
+					symbolFill: '#7797BE'
+				}
+			}
+		},
+
+		// scroll charts
+		rangeSelector: {
+			buttonTheme: {
+				fill: {
+					linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+					stops: [
+						[0.4, '#888'],
+						[0.6, '#555']
+					]
+				},
+				stroke: '#000000',
+				style: {
+					color: '#CCC',
+					fontWeight: 'bold'
+				},
+				states: {
+					hover: {
+						fill: {
+							linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+							stops: [
+								[0.4, '#BBB'],
+								[0.6, '#888']
+							]
+						},
+						stroke: '#000000',
+						style: {
+							color: 'white'
+						}
+					},
+					select: {
+						fill: {
+							linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+							stops: [
+								[0.1, '#000'],
+								[0.3, '#333']
+							]
+						},
+						stroke: '#000000',
+						style: {
+							color: 'yellow'
+						}
+					}
+				}
+			},
+			inputStyle: {
+				backgroundColor: '#333',
+				color: 'silver'
+			},
+			labelStyle: {
+				color: 'silver'
+			}
+		},
+
+		navigator: {
+			handles: {
+				backgroundColor: '#666',
+				borderColor: '#AAA'
+			},
+			outlineColor: '#CCC',
+			maskFill: 'rgba(16, 16, 16, 0.5)',
+			series: {
+				color: '#7798BF',
+				lineColor: '#A6C7ED'
+			}
+		},
+
+		scrollbar: {
+			barBackgroundColor: {
+					linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+					stops: [
+						[0.4, '#888'],
+						[0.6, '#555']
+					]
+				},
+			barBorderColor: '#CCC',
+			buttonArrowColor: '#CCC',
+			buttonBackgroundColor: {
+					linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+					stops: [
+						[0.4, '#888'],
+						[0.6, '#555']
+					]
+				},
+			buttonBorderColor: '#CCC',
+			rifleColor: '#FFF',
+			trackBackgroundColor: {
+				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+				stops: [
+					[0, '#000'],
+					[1, '#333']
+				]
+			},
+			trackBorderColor: '#666'
+		},
+
+		// special colors for some of the demo examples
+		legendBackgroundColor: 'rgba(48, 48, 48, 0.8)',
+		legendBackgroundColorSolid: 'rgb(70, 70, 70)',
+		dataLabelsColor: '#444',
+		textColor: '#E0E0E0',
+		maskColor: 'rgba(255,255,255,0.3)'
+	};
+
+	// Apply the theme
+	Highcharts.setOptions(Highcharts.theme);
+
+	return Highcharts.theme;
+});

data/public/rearview-src/js/util/templar.js

@@ -0,0 +1,178 @@
+(function(factory){
+    if (typeof define === 'function' && define.amd) {
+        define(['underscore', 'backbone', 'backbone-localStorage'], factory);
+    } else {
+        factory(_, Backbone);
+    }
+})(function (_, Backbone){
+    var config = {
+        url     : 'public/templates/', // template path
+        ext     : '.hbs',              // template file extension
+        version : '0.0.1',             // version number
+        cache   : true,                // turn local storage caching on/off
+        storage : new Backbone.LocalStorage('Templar') // default local storage plugin
+    };
+
+    Backbone.Templar = function( templatePaths, options ) {
+        // if no options are passed
+        var options           = ( typeof options === 'undefined' ) ? {} : options,
+            templateExtension = ( options.ext ) ? options.ext : config.ext,
+            baseUrlPath       = ( options.url ) ? options.url : config.url,
+            version           = ( options.version ) ? options.version : config.version,
+            cache             = ( typeof options.cache !== 'undefined' ) ? options.cache : config.cache,
+            storage           = ( options.storage ) ? options.storage : config.storage;
+
+        // -- public methods
+        this.render = function( options ) {
+            // set up defaults
+            if ( !options.path ) throw new Error('A template path is required.');
+            options.el = ( options.el ) ? options.el : document.body;
+            TemplarCollection._render( options );
+        }
+
+        this.add = function() {
+            // set up defaults
+            if ( !options.path ) throw new Error('A template path is required.');
+            TemplarCollection._add( options );
+        }
+
+        var TemplarCollection = new(Backbone.Collection.extend({
+
+            initialize : function() {
+                this._loadTemplates();
+            },
+
+            templates : templatePaths,
+
+            model : Backbone.Model.extend({
+                // Note: template file extension is an attribute set in config defaulting to .hbs
+                defaults : function() {
+                    return {
+                        path    : null,    
+                        content : null,     // the stringified content of the template
+                        version : version
+                    };
+                },
+
+                url : function() {
+                    var path = ( ( this.get('path') && ( this.get('path') !== 'undefined' ) )
+                             ? this.get('path')
+                             : '' );
+
+                    return baseUrlPath + path + templateExtension;
+                },
+
+                parse : function(response) {
+                    return {
+                        content : response
+                    };
+                }
+            }),
+
+            localStorage : storage,
+
+            // -- private methods
+            _loadTemplates : function() {
+                var self = this;
+                var templates = this.localStorage.findAll();
+                
+                // check for version change
+                if ( templates.length > 0 && templates[0].version !== version ) {
+                    cache = false; // destroy cached versions and reload new version of templates
+                }
+
+                if ( cache ) {
+                    for (var i = 0; i < templates.length; i++) {
+                        this.add(templates[i]);
+                    }
+                } else {
+                    // if our cache setting is turned off, never remember our templates
+                    // basically a dev mode flag for debugging templates
+                    _.each(templates, function(model) {
+                        self.localStorage.destroy(model);
+                    });
+                }
+
+                if ( this.templates ) {
+                    for (var i = 0; i < this.templates.length; i++) {
+                        this._add({
+                            path : this.templates[i]
+                        });
+                    }
+                }
+            },
+
+            _createModel : function(pathString) {
+                var templateModel = new this.model({
+                    path : pathString
+                });
+
+                return templateModel;
+            },
+
+            _add : function(options, cb) {
+                var templateCheck = this.where({ path : options.path });
+                
+                //if there is already an existing stored template
+                if( templateCheck.length == 0 ) {
+                    // grab the template from the file system
+                    templateModel = this._createModel(options.path);
+
+                    $.ajax({
+                        url      : baseUrlPath + options.path + templateExtension,
+                        async    : false,
+                        success  : function(response) {
+                            templateModel.set({
+                                'content' : response,
+                                'path'    : options.path
+                            });
+                        }
+                    });
+
+                    // store template model in localStorage
+                    this.add( templateModel );
+                    this.create( templateModel.toJSON() );
+                    
+                    if( typeof cb === 'function' ) {
+                        cb();
+                    }
+                }
+            },
+
+            _compile : function(content, el, append, data, cb) {
+                var append  = ( append ) ? append : false,
+                    compile = Handlebars.compile(content);
+
+                if (append) {
+                    el.append(compile(data));
+                } else {
+                    el.html(compile(data));
+                }
+                // run a callback if provided through options.cb
+                if( typeof cb === 'function' ) {
+                    cb();
+                }
+            },
+
+            _render : function( options ) {
+                var self = this;
+                var templateCheck = this.where({ 
+                                        'path'    : options.path,
+                                        'version' : version
+                                    });
+
+                //if there is already an existing stored template
+                if( templateCheck.length > 0 ) {
+                    this._compile(templateCheck[0].get('content'), options.el, options.append, options.data, options.cb);
+
+                } else {
+                    this._add(options, _.bind(function() { 
+                        self._compile( templateModel.get('content'), options.el, options.append, options.data, options.cb )
+                    }, this));
+                }
+             }
+        }));  
+    }  
+
+    return Backbone.Templar;
+});

data/public/rearview-src/js/view/addcategory.js

@@ -0,0 +1,250 @@
+define([
+    'view/base',
+    'model/dashboard',
+    'collection/monitor',
+    'jquery-validate'
+], function(
+    BaseView,
+    DashboardModel,
+    MonitorCollection
+){
+    /* NOTE: Category is simply another dashboard model, but displayed
+             differently in the UI.  Currently there is no need to nest
+             any dashboards more than a single parent-child relationship */
+    var AddCategoryView = BaseView.extend({
+
+        events: {
+            'click .saveCloseCategory' : 'checkValidationClose',
+            'click .saveCategory'      : 'checkValidation',
+            'hidden #addCategory'      : '_cleanUp',
+            'shown #addCategory'       : 'focusFirst'
+        },
+
+        subscriptions : {
+            'view:dashboard:add' : '_openModal'
+        },
+
+        initialize : function(options) {
+            _.bindAll(this);
+            this.user    = options.user;
+            this.templar = options.templar;
+
+            Handlebars.registerHelper('toUpperCase', function(value) {
+                return ( typeof value === 'string' ) ? value.toUpperCase() : value;
+            });
+        },
+
+        render : function(data) {
+            this.dashboard = ( data ) ? data.dashboard : null;
+
+            this.templar.render({
+                path : 'addcategory',
+                el   : this.$el,
+                data : ( data ) ? data : {}
+            });
+
+            this.setElement(this.$el);
+            this.setAddCategoryValidation();
+            this.$modal = this.$el.find('.add-category');
+
+            // resize add applciation modal to fit screen size
+            this.resizeModal($('#addCategory'), 'small', true);
+        },
+        /**
+         * AddCategoryView#setAddCategoryValidation()
+         *
+         * Sets up the front end form validation for the name field which is required.
+         * If name is present, save the sceduling data to the job model and setup the
+         * next view in the add dashboard workflow to set up the metrics data.
+         **/
+        setAddCategoryValidation : function() {
+            // grab form data
+            this.form = $('#addCategoryForm');
+            // set up form validation
+            this.validator = this.form.validate({
+                rules : {
+                    'categoryName' : {
+                        'required' : true
+                    }
+                },
+                highlight : function(label) {
+                    $(label).closest('.control-group').addClass('error');
+                },
+                success : function(label) {
+                    label.closest('.control-group').removeClass('error');
+                    $(label).remove();
+                },
+                submitHandler : function(form) {
+                    if ( this.close ) {
+                        this.saveFinish();
+                    } else {
+                        this.save();
+                    }
+                }.bind(this)
+            });
+        },
+        checkValidation : function() {
+            this.close = false;
+            // validate form
+            this.form.submit();
+        },
+        checkValidationClose : function() {
+            this.close = true;
+            // validate form
+            this.form.submit();
+        },
+        /**
+         * AddCategoryView#save()
+         *
+         * Save the current model.
+         **/
+        save : function() {
+            this._saveCategory(function() {
+                this._cleanUp();
+            }.bind(this));
+        },
+        /**
+         * AddCategoryView#saveFinish()
+         *
+         * Save the current model and close the modal dialogue.
+         **/
+        saveFinish : function() {
+            this._saveCategory(function() {
+                this._closeModal();
+            }.bind(this));
+        },
+
+        updateMonitorOrder : function(model) {
+            var preferences = this.user.get('preferences');
+            if ( preferences.dashboards[this.dashboard.id] ) {
+                preferences.dashboards[model.get('id')]   = preferences.dashboards[this.dashboard.id];
+                preferences.dashboards[this.dashboard.id] = null;
+                this.user.save();
+            }
+        },
+
+        destructor : function() {
+            var $prevSibling = this.$el.prev();
+
+            this.remove();
+            this.off();
+
+            // containing element in server side template is removed for garbage collection,
+            // so we are currently putting a new one in it's place after this process
+            this.$el = $("<section class='add-category-wrap'></section>").insertAfter($prevSibling);
+        },
+
+        /*
+         * PSEUDO-PRIVATE METHODS (internal)
+         */
+
+        _checkFirstCategoryCondition : function(cb) {
+            var currentDashboardModel = new DashboardModel({
+                    id : this.dashboard.id
+                }).fetch({
+                    success : function(model, response, options) {
+                        if ( _.isFunction(cb) ) cb(model);
+                    }.bind(this)
+                }); 
+        },
+
+        _moveAllCurrentMonitorsToCategory : function() {
+            this.model.save({
+                userId      : this.user.get('id'),
+                name        : this.$el.find('#categoryName').val(),
+                description : this.$el.find('#categoryDescription').val()
+            }, {
+                success : function(model, response, options) {
+                    Backbone.Mediator.pub('view:addcategory:save', {
+                        'model'     : model,
+                        'message'   : "The category '" + model.get('name') + "' was added.",
+                        'attention' : 'Category Saved!'
+                    });
+
+                    if ( model.get('id') ) {
+                        new MonitorCollection(null, {
+                            dashboardId : this.dashboard.id,
+                            cb          : function(monitors) {
+                                monitors.each(function(monitor) {
+                                    monitor.save({
+                                        'dashboardId' : model.get('id')
+                                    });
+                                }, this);
+
+                                // update ordering if any from drag & drop
+                                this.updateMonitorOrder(model);
+                                
+                            }.bind(this)
+                        });
+                    }
+                }.bind(this),
+                error : function(model, xhr, options) {
+                    this.validator.showErrors({'categoryName' : 'That category name already exists!'});
+                }.bind(this)
+            });
+        },
+        /** internal
+         * AddCategoryView#_saveCategory(cb)
+         * - cb (Function): method to be called after category saved.
+         *
+         * Post new model to the POST service route.
+         **/
+        _saveCategory : function(cb) {
+            this._checkFirstCategoryCondition(function(currentDashboardModel) {
+                this.model = new DashboardModel({
+                    category    : true,
+                    dashboardId : this.dashboard.id
+                });
+
+                if ( !currentDashboardModel.get('children').length ) {
+                    this._moveAllCurrentMonitorsToCategory();
+                    if ( _.isFunction(cb) ) cb();
+                } else {
+                    this.model.save({
+                        userId      : this.user.get('id'),
+                        name        : this.$el.find('#categoryName').val(),
+                        description : this.$el.find('#categoryDescription').val()
+                    }, {
+                        success : function(model, response, options) {
+                            Backbone.Mediator.pub('view:addcategory:save', {
+                                'model'     : model,
+                                'message'   : "The category '" + model.get('name') + "' was added.",
+                                'attention' : 'Category Saved!'
+                            });
+
+                            if ( _.isFunction(cb) ) cb();
+                        }.bind(this),
+                        error : function(model, xhr, options) {
+                            this.validator.showErrors({'categoryName' : 'That category name already exists!'});
+                        }.bind(this)
+                    });
+                }
+            }.bind(this));
+        },
+        /** internal
+         * AddCategoryView#_closeModal()
+         *
+         * Call hide on the modal initialized to a saved DOM element.
+         **/
+        _closeModal : function() {
+            this._cleanUp();
+            this.$modal.modal('hide');
+        },
+
+        _cleanUp : function() {
+            this.$el.find('#categoryName').val('');
+            this.$el.find('#categoryDescription').val('');
+            this.$el.find('#categoryName').parent().removeClass('error');
+            this.validator.resetForm();
+            this.model = new DashboardModel();
+        },
+
+        _openModal : function(data) {
+            this.destructor();
+            this.render(data);
+            this.$modal.modal('show');
+        }
+    });
+
+    return AddCategoryView;
+});