diff --git a/src/main/webapp/js/app.js b/src/main/webapp/js/app.js index d29eaed..61c0419 100644 --- a/src/main/webapp/js/app.js +++ b/src/main/webapp/js/app.js @@ -3,16 +3,16 @@ define([ 'router', ], function(Backbone, Router) { - var start = function(){ - // Pass in our Router module and call it's initialize function - // Backbone.history.start({pushState: true}); - // Router.navigate(''); - Backbone.history.start(); - console.log('EzWall started'); - }; + var start = function() { + // Pass in our Router module and call it's initialize function + // Backbone.history.start({pushState: true}); + // Router.navigate(''); + Backbone.history.start(); + console.log('EzWall started'); + }; - return { - start: start - }; + return { + start : start + }; }); diff --git a/src/main/webapp/js/models/jenkins.js b/src/main/webapp/js/models/jenkins.js index ee55707..4fa088f 100644 --- a/src/main/webapp/js/models/jenkins.js +++ b/src/main/webapp/js/models/jenkins.js @@ -2,53 +2,53 @@ define([ 'underscore', 'backbone' ], function(_, Backbone){ - + var Jenkins = {}; - + Jenkins.STATUS_OK = 'ok'; Jenkins.STATUS_KO = 'ko'; Jenkins.STATUS_INSTABLE = 'instable'; Jenkins.STATUS_NONE = 'none'; Jenkins.Model = Backbone.Model.extend({ - url: function() { + url : function() { return '%s/api/json'.replace('%s', this.get('url')); } }); - + Jenkins.EzWall = Jenkins.Model.extend({ - defaults: { - url: "http://localhost:8080/ezwall", - pollInterval: 5 + defaults : { + url : "http://localhost:8080/ezwall", + pollInterval : 5 } }); - + Jenkins.config = new Jenkins.EzWall(); Jenkins.Job = Jenkins.Model.extend({ - defaults: { - name: "My job", - status: Jenkins.STATUS_NONE, - building: false + defaults : { + name : "My job", + status : Jenkins.STATUS_NONE, + building : false }, - - color_regex: /([A-Za-z]+)(_anime)?/, - - parse: function(data) { + + color_regex : /([A-Za-z]+)(_anime)?/, + + parse : function(data) { var m = this.color_regex.exec(data.color); - + switch (m[1]) { - case 'blue': - data.status = Jenkins.STATUS_OK; - break; - case 'red': - data.status = Jenkins.STATUS_KO; - break; - case 'yellow': - data.status = Jenkins.STATUS_INSTABLE; - break; - default: - break; + case 'blue': + data.status = Jenkins.STATUS_OK; + break; + case 'red': + data.status = Jenkins.STATUS_KO; + break; + case 'yellow': + data.status = Jenkins.STATUS_INSTABLE; + break; + default: + break; } data.building = m[2] != undefined; return data; @@ -56,48 +56,54 @@ define([ }); Jenkins.JobList = Backbone.Collection.extend({ - model: Jenkins.Job, - - fetchAll: function() { - this.each(function(job){ + model : Jenkins.Job, + + fetchAll : function() { + this.each(function(job) { job.fetch() }); - } + } }); Jenkins.View = Jenkins.Model.extend({ - defaults: { - name: "All", - url: "http://localhost:8080/", - refresh: 10 + defaults : { + name : "All", + url : "http://localhost:8080/", + refresh : 10 }, - initialize: function() { + + initialize : function() { _.bindAll(this, 'poll', 'updateSettings'); Jenkins.config.on('change', this.updateSettings, this); this.set({ - jobs: new Jenkins.JobList() + jobs : new Jenkins.JobList() }); this.poll(); }, - parse: function(data, xhr) { - this.get('jobs').reset(data.jobs, {parse: true}); + + parse : function(data, xhr) { + this.get('jobs').reset(data.jobs, { + parse : true + }); delete data.jobs; return data; }, - poll: function() { + + poll : function() { var interval = Jenkins.config.get('pollInterval'); if (interval > 0) { this.get('jobs').fetchAll(); - _.delay(this.poll, interval*1000); + _.delay(this.poll, interval * 1000); } }, - updateSettings: function() { + + updateSettings : function() { if (Jenkins.config.hasChanged('url')) { this.set('url', Jenkins.config.get('url') + '/..'); this.fetch(); } - } - + } + }); return Jenkins; diff --git a/src/main/webapp/js/router.js b/src/main/webapp/js/router.js index c5de361..8692121 100644 --- a/src/main/webapp/js/router.js +++ b/src/main/webapp/js/router.js @@ -6,75 +6,74 @@ define([ 'views/about', 'models/jenkins' ], function(Backbone, Menu, Settings, Dashboard, About, Jenkins){ - var AppRouter = Backbone.Router.extend({ - routes: { - 'settings': 'showSettings', - 'about': 'showAbout', - // Default - '': 'showHome' - }, + var AppRouter = Backbone.Router.extend({ + routes : { + 'settings' : 'showSettings', + 'about' : 'showAbout', - initialize: function() { - console.log('AppRouter: initiliaze'); - - // Initialize menu - this.menu = new Menu; - this.menu.render(); - this.menu.on('menu:refresh', function(){ - this.view.fetch(); - }, this); - this.menu.on('menu:settings', function(){ - this.navigate('settings', true); - }, this); - this.menu.on('menu:about', function(){ - this.navigate('about', true); - }, this); - - - // Inialize the jenkins View - this.view = new Jenkins.View(); - - // Initialize Dashboard - this.dashboard = new Dashboard.View({ - model: this.view - }); - this.dashboard.render(); - - // Bootstrap ezWall config - Jenkins.config.set('url', '.'); - Jenkins.config.fetch(); - + // Default + '' : 'showHome' + }, - console.log('AppRouter: initiliazed'); - }, + initialize : function() { + console.log('AppRouter: initiliaze'); - showHome: function() { - console.log('AppRouter: home'); - }, + // Initialize menu + this.menu = new Menu; + this.menu.render(); + this.menu.on('menu:refresh', function() { + this.view.fetch(); + }, this); + this.menu.on('menu:settings', function() { + this.navigate('settings', true); + }, this); + this.menu.on('menu:about', function() { + this.navigate('about', true); + }, this); - showSettings: function(){ - console.log('AppRouter: settings'); - var popup = new Settings.Popup({ - model: Jenkins.config - }); - popup.render(); - popup.on(Settings.CLOSE, function(){ - this.navigate('', true); - }, this); - }, + // Inialize the jenkins View + this.view = new Jenkins.View(); - showAbout: function() { - console.log('AppRouter: about'); + // Initialize Dashboard + this.dashboard = new Dashboard.View({ + model : this.view + }); + this.dashboard.render(); - var popup = new About.Popup; - popup.render(); - popup.on(About.CLOSE, function(){ - this.navigate('', true); - }, this); - } - - }); + // Bootstrap ezWall config + Jenkins.config.set('url', '.'); + Jenkins.config.fetch(); - return new AppRouter(); + console.log('AppRouter: initiliazed'); + }, + + showHome : function() { + console.log('AppRouter: home'); + }, + + showSettings : function() { + console.log('AppRouter: settings'); + var popup = new Settings.Popup({ + model : Jenkins.config + }); + popup.render(); + popup.on(Settings.CLOSE, function() { + this.navigate('', true); + }, this); + }, + + showAbout : function() { + console.log('AppRouter: about'); + + var popup = new About.Popup; + popup.render(); + popup.on(About.CLOSE, function() { + this.navigate('', true); + }, this); + } + + }); + + return new AppRouter(); }); \ No newline at end of file diff --git a/src/main/webapp/js/views/about.js b/src/main/webapp/js/views/about.js index 3d6abe2..fcf651c 100644 --- a/src/main/webapp/js/views/about.js +++ b/src/main/webapp/js/views/about.js @@ -5,33 +5,33 @@ define([ 'text!templates/about.html' ], function($, _, Backbone, aboutTmpl){ - var About = {}; - - About.CLOSE = 'about:close'; - - About.Popup = Backbone.View.extend({ - - render: function() { - _.bindAll(this, 'close'); - $.tmpl(aboutTmpl, {}).appendTo(this.$el); - this.$el.dialog({ - title:"EzWall", - modal: true, - close: this.close - }); - console.log('AboutPopup: rendered'); - return this; - }, - - close: function() { - console.log('AboutPopup: close'); - this.$el.dialog('destroy'); - this.remove(); - this.trigger(About.CLOSE); - }, - - }); - - return About; + var About = {}; + + About.CLOSE = 'about:close'; + + About.Popup = Backbone.View.extend({ + + render : function() { + _.bindAll(this, 'close'); + $.tmpl(aboutTmpl, {}).appendTo(this.$el); + this.$el.dialog({ + title : "EzWall", + modal : true, + close : this.close + }); + console.log('AboutPopup: rendered'); + return this; + }, + + close : function() { + console.log('AboutPopup: close'); + this.$el.dialog('destroy'); + this.remove(); + this.trigger(About.CLOSE); + }, + + }); + + return About; }); diff --git a/src/main/webapp/js/views/dashboard.js b/src/main/webapp/js/views/dashboard.js index e1ab0c9..4568ae8 100644 --- a/src/main/webapp/js/views/dashboard.js +++ b/src/main/webapp/js/views/dashboard.js @@ -6,118 +6,121 @@ define([ 'text!templates/job.html' ], function($, _, Backbone, dashboardTemplate, jobTemplate){ - var Dashboard = {}; - - Dashboard.Cell = Backbone.View.extend({ - - className: 'job', - - initialize: function() { - _.bindAll(this, 'render'); - this.template = $.template(jobTemplate); - this.model.on('change', this.render); - }, - - render: function() { - this.$el.empty(); - $.tmpl(this.template, this.model.toJSON()).appendTo(this.$el); - this.$el.addClass('job-status-'+this.model.get('status')); - this.$el.toggleClass('job-building', this.model.get('building')); - return this; - } - - }); - - Dashboard.Grid = Backbone.View.extend({ - - initialize: function() { - console.log('Dashboard.Grid: initialize'); - _.bindAll(this, 'render', 'addJob', 'resize'); - this.template = $.template(jobTemplate); - this.collection.on('reset', this.render); - $(window).resize(this.resize); - console.log('Dashboard.Grid: initialized'); - }, - - render: function() { - console.log('Dashboard.Grid: render'); - this.$el.empty(); - this.collection.each(this.addJob); - this.resize(); - this.animate() - console.log('Dashboard.Grid: rendered'); - return this; - }, - - addJob: function(job) { - var cell = new Dashboard.Cell({ - model: job - }).render(); - this.$el.append(cell.el); - }, - - resize: function() { - if (this.collection.length > 0) { - var sqrt = Math.sqrt(this.collection.length) - var nbCols = Math.ceil(sqrt); - var nbRows = Math.round(sqrt); - var width = this.$el.width() / nbCols; - var height = this.$el.height() / nbRows; - - // Remove margins and border - _.each(['left', 'right'], function(side) { - width -= this.$('.job').css('margin-'+side).replace('px',''); - width -= this.$('.job').css('border-'+side+'-width').replace('px',''); - }); - _.each(['top', 'bottom'], function(side) { - height -= this.$('.job').css('margin-'+side).replace('px',''); - height -= this.$('.job').css('border-'+side+'-width').replace('px',''); - }); - this.$('.job').width(width).height(height); - } - }, - - animate: function() { - if (this.timer) { - clearInterval(this.timer); - delete this.timer; - } - this.timer = setInterval(this._animation, 1500); - }, - - _animation: function() { - this.$('.job-building').toggleClass('job-glow'); - } - - }); - - Dashboard.View = Backbone.View.extend({ - - el: $('#dashboard'), - - initialize: function() { - console.log('Dashboard.View: initialize'); - _.bindAll(this,'render'); - this.template = $.template(dashboardTemplate); - this.grid = new Dashboard.Grid({ - collection: this.model.get('jobs') - }); - console.log('Dashboard.View: initialized'); - }, - - render: function() { - console.log('Dashboard.View: render'); - this.$el.empty(); - $.tmpl(this.template, {}).appendTo(this.$el); - this.grid.setElement(this.$('#build-grid')[0]); - this.grid.render(); - console.log('Dashboard.View: rendered'); - return this; - } - - }); - - - return Dashboard; + var Dashboard = {}; + + Dashboard.Cell = Backbone.View.extend({ + + className : 'job', + + initialize : function() { + _.bindAll(this, 'render'); + this.template = $.template(jobTemplate); + this.model.on('change', this.render); + }, + + render : function() { + this.$el.empty(); + $.tmpl(this.template, this.model.toJSON()).appendTo(this.$el); + this.$el.addClass('job-status-' + this.model.get('status')); + this.$el.toggleClass('job-building', this.model.get('building')); + return this; + } + + }); + + Dashboard.Grid = Backbone.View.extend({ + + initialize : function() { + console.log('Dashboard.Grid: initialize'); + _.bindAll(this, 'render', 'addJob', 'resize'); + this.template = $.template(jobTemplate); + this.collection.on('reset', this.render); + $(window).resize(this.resize); + console.log('Dashboard.Grid: initialized'); + }, + + render : function() { + console.log('Dashboard.Grid: render'); + this.$el.empty(); + this.collection.each(this.addJob); + this.resize(); + this.animate() + console.log('Dashboard.Grid: rendered'); + return this; + }, + + addJob : function(job) { + var cell = new Dashboard.Cell({ + model : job + }).render(); + this.$el.append(cell.el); + }, + + resize : function() { + if (this.collection.length > 0) { + var sqrt = Math.sqrt(this.collection.length) + var nbCols = Math.ceil(sqrt); + var nbRows = Math.round(sqrt); + var width = this.$el.width() / nbCols; + var height = this.$el.height() / nbRows; + + // Remove margins and border + _.each([ 'left', 'right' ], function(side) { + width -= this.$('.job').css('margin-' + side).replace('px', + ''); + width -= this.$('.job').css('border-' + side + '-width') + .replace('px', ''); + }); + _.each([ 'top', 'bottom' ], function(side) { + height -= this.$('.job').css('margin-' + side).replace( + 'px', ''); + height -= this.$('.job').css('border-' + side + '-width') + .replace('px', ''); + }); + this.$('.job').width(width).height(height); + } + }, + + animate : function() { + if (this.timer) { + clearInterval(this.timer); + delete this.timer; + } + this.timer = setInterval(this._animation, 1500); + }, + + _animation : function() { + this.$('.job-building').toggleClass('job-glow'); + } + + }); + + Dashboard.View = Backbone.View.extend({ + + el : $('#dashboard'), + + initialize : function() { + console.log('Dashboard.View: initialize'); + _.bindAll(this, 'render'); + this.template = $.template(dashboardTemplate); + this.grid = new Dashboard.Grid({ + collection : this.model.get('jobs') + }); + console.log('Dashboard.View: initialized'); + }, + + render : function() { + console.log('Dashboard.View: render'); + this.$el.empty(); + $.tmpl(this.template, {}).appendTo(this.$el); + this.grid.setElement(this.$('#build-grid')[0]); + this.grid.render(); + console.log('Dashboard.View: rendered'); + return this; + } + + }); + + return Dashboard; }); \ No newline at end of file diff --git a/src/main/webapp/js/views/menu.js b/src/main/webapp/js/views/menu.js index c133e69..e261a6a 100644 --- a/src/main/webapp/js/views/menu.js +++ b/src/main/webapp/js/views/menu.js @@ -4,72 +4,72 @@ define([ 'backbone', 'text!templates/menu.html' ], function($, _, Backbone, menuTemplate){ + + var Menu = Backbone.View.extend({ - var Menu = Backbone.View.extend({ - - el: $('#header'), + el : $('#header'), - initialize: function() { - console.log('Menu: initialize'); - _.bindAll(this,'render', 'showMenu', 'hideMenu', 'onVisble', 'onHidden'); - console.log('Menu: initialized'); - this._visible = false; - }, - - render: function() { - console.log('Menu: render'); - $.tmpl(menuTemplate, {}).appendTo(this.el); - $('.menu-button').button(); - $('#header-display-zone').mouseenter(this.showMenu); - this.$el.mouseleave(this.hideMenu); - console.log('Menu: rendered'); - return this; - }, + initialize : function() { + console.log('Menu: initialize'); + _.bindAll(this, 'render', 'showMenu', 'hideMenu', + 'onVisble', 'onHidden'); + console.log('Menu: initialized'); + this._visible = false; + }, - events: { - "click #refresh-button": "refresh", - "click #settings-button": "displaySettings", - "click #about-button": "displayAbout" - }, + render : function() { + console.log('Menu: render'); + $.tmpl(menuTemplate, {}).appendTo(this.el); + $('.menu-button').button(); + $('#header-display-zone').mouseenter(this.showMenu); + this.$el.mouseleave(this.hideMenu); + console.log('Menu: rendered'); + return this; + }, - showMenu: function() { - if (!this._visible) { - this.$el.slideDown('fast', this.onVisble); - } - }, + events : { + "click #refresh-button" : "refresh", + "click #settings-button" : "displaySettings", + "click #about-button" : "displayAbout" + }, - hideMenu: function() { - if (this._visible) { - this.$el.slideUp('fast', this.onHidden); - } - }, + showMenu : function() { + if (!this._visible) { + this.$el.slideDown('fast', this.onVisble); + } + }, - onVisble: function() { - this._visible = true; - }, + hideMenu : function() { + if (this._visible) { + this.$el.slideUp('fast', this.onHidden); + } + }, - onHidden: function() { - this._visible = false; - }, + onVisble : function() { + this._visible = true; + }, + onHidden : function() { + this._visible = false; + }, - refresh: function(event) { - console.log('Menu: refresh'); - this.trigger('menu:refresh'); - }, + refresh : function(event) { + console.log('Menu: refresh'); + this.trigger('menu:refresh'); + }, - displaySettings: function(event) { - console.log('Menu: displaySettings'); - this.trigger('menu:settings'); - }, + displaySettings : function(event) { + console.log('Menu: displaySettings'); + this.trigger('menu:settings'); + }, - displayAbout: function(event) { - console.log('Menu: displayAbout'); - this.trigger('menu:about'); - } + displayAbout : function(event) { + console.log('Menu: displayAbout'); + this.trigger('menu:about'); + } - }); + }); - return Menu; + return Menu; }); \ No newline at end of file diff --git a/src/main/webapp/js/views/settings.js b/src/main/webapp/js/views/settings.js index 2067e6f..86591ae 100644 --- a/src/main/webapp/js/views/settings.js +++ b/src/main/webapp/js/views/settings.js @@ -4,49 +4,53 @@ define([ 'backbone', 'text!templates/settings.html' ], function($, _, Backbone, settingsTemplate){ - - var Settings = {}; - - Settings.CLOSE = 'settings:close'; - - Settings.Popup = Backbone.View.extend({ - render: function() { - _.bindAll(this, 'ok', 'cancel'); - $.tmpl(settingsTemplate, this.model.toJSON()).appendTo(this.$el); - this.$el.dialog({ - width: 400, - title:"Settings", - modal: true, - close: this.cancel, - buttons: [ - {text: 'OK', click: this.ok }, - {text: 'Cancel', click: this.cancel } - ] - }); - console.log('SettingsPopup: rendered'); - return this; - }, - - close: function() { - console.log('SettingsPopup: close'); - this.$el.dialog('destroy'); - this.remove(); - this.trigger(Settings.CLOSE); - }, - - ok: function() { - console.log('SettingsPopup: ok'); - this.model.set('pollInterval',this.$('#refresh').val()); - this.close(); - }, - - cancel: function() { - console.log('SettingsPopup: cancel'); - this.close(); - } - - }); - - return Settings; + + var Settings = {}; + + Settings.CLOSE = 'settings:close'; + + Settings.Popup = Backbone.View.extend({ + render : function() { + _.bindAll(this, 'ok', 'cancel'); + $.tmpl(settingsTemplate, this.model.toJSON()).appendTo( + this.$el); + this.$el.dialog({ + width : 400, + title : "Settings", + modal : true, + close : this.cancel, + buttons : [ { + text : 'OK', + click : this.ok + }, { + text : 'Cancel', + click : this.cancel + } ] + }); + console.log('SettingsPopup: rendered'); + return this; + }, + + close : function() { + console.log('SettingsPopup: close'); + this.$el.dialog('destroy'); + this.remove(); + this.trigger(Settings.CLOSE); + }, + + ok : function() { + console.log('SettingsPopup: ok'); + this.model.set('pollInterval', this.$('#refresh').val()); + this.close(); + }, + + cancel : function() { + console.log('SettingsPopup: cancel'); + this.close(); + } + + }); + + return Settings; });