diff options
author | Richard Wall <richard@largo> | 2010-12-31 11:31:48 +0000 |
---|---|---|
committer | Richard Wall <richard@largo> | 2010-12-31 11:31:48 +0000 |
commit | be6a9a53cfc620df3b79591f846c9f159b271247 (patch) | |
tree | 142a31ec95ec320fad384c8634caab4602b40ddd /jarmon | |
parent | 04e45ad7e22505b1cd70f22e38e2cbb09e8a28a6 (diff) |
a summary page and back buttons
Diffstat (limited to 'jarmon')
-rw-r--r-- | jarmon/jarmon.js | 93 |
1 files changed, 60 insertions, 33 deletions
diff --git a/jarmon/jarmon.js b/jarmon/jarmon.js index 1c5c3eb..6bd8d23 100644 --- a/jarmon/jarmon.js +++ b/jarmon/jarmon.js @@ -692,41 +692,43 @@ jarmon.Chart.fromRecipe = function(recipes, templateFactory, downloader) { **/ jarmon.ChartConfig = function($tpl) { this.$tpl = $tpl; - this.rrdUrl = ''; - this.dsName = ''; - this.dsLabel = ''; - this.dsUnit = ''; + this.data = { + rrdUrl: '', + dsName: '', + dsLabel: '', + dsUnit:'' + }; }; jarmon.ChartConfig.prototype.drawRrdUrlForm = function() { var self = this; this.$tpl.empty(); - var $f = $('<form/>'); - - $('<div/>').append( - $('<p/>').text('Enter the URL of an RRD file'), - $('<label/>').append( - ['URL', ': '].join(''), - $('<input/>', { - type: 'text', - name: 'rrd_url', - value: this.rrdUrl - }), + $('<form/>').append( + $('<div/>').append( + $('<p/>').text('Enter the URL of an RRD file'), + $('<label/>').append( + 'URL: ', + $('<input/>', { + type: 'text', + name: 'rrd_url', + value: this.data.rrdUrl + }) + ), $('<input/>', {type: 'submit', value: 'download'}), $('<div/>', {class: 'next'}) ) - ).appendTo($f); - - $f.submit( + ).submit( function(e) { - self.rrdUrl = this['rrd_url'].value; + self.data.rrdUrl = this['rrd_url'].value; $placeholder = $(this).find('.next').empty(); - var rq = new jarmon.RrdQueryRemote(self.rrdUrl); - rq.getDSNames().addCallback( + new jarmon.RrdQueryRemote(self.data.rrdUrl).getDSNames().addCallback( function($placeholder, dsNames) { if(dsNames.length > 1) { - $('<p/>').text('The RRD file contains multiple data sources. Choose one:').appendTo($placeholder); + $('<p/>').text( + 'The RRD file contains multiple data sources. \ + Choose one:').appendTo($placeholder); + $(dsNames).map( function(i, el) { return $('<input/>', { @@ -735,13 +737,13 @@ jarmon.ChartConfig.prototype.drawRrdUrlForm = function() { } ).click( function(e) { - self.dsName = this.value; + self.data.dsName = this.value; self.drawDsLabelForm(); } ); }).appendTo($placeholder); } else { - self.dsName = dsNames[0]; + self.data.dsName = dsNames[0]; self.drawDsLabelForm(); } }, $placeholder @@ -752,9 +754,7 @@ jarmon.ChartConfig.prototype.drawRrdUrlForm = function() { ); return false; } - ); - - $f.appendTo(this.$tpl); + ).appendTo(this.$tpl); } jarmon.ChartConfig.prototype.drawDsLabelForm = function() { @@ -765,34 +765,61 @@ jarmon.ChartConfig.prototype.drawDsLabelForm = function() { $('<p/>').text('Choose a label and unit for this data source.'), $('<div/>').append( $('<label/>').append( - ['Label', ': '].join(''), + 'Label: ', $('<input/>', { type: 'text', name: 'dsLabel', - value: this.dslabel || this.dsName + value: this.data.dslabel || this.data.dsName }) ) ), $('<div/>').append( $('<label/>').append( - ['Unit', ': '].join(''), + 'Unit: ', $('<input/>', { type: 'text', name: 'dsUnit', - value: this.dsUnit + value: this.data.dsUnit }) ) ), + $('<input/>', {type: 'button', value: 'back'}).click( + function(e) { + self.drawRrdUrlForm(); + } + ), $('<input/>', {type: 'submit', value: 'save'}), $('<div/>', {class: 'next'}) ).submit( function(e) { - self.dsLabel = this['dsLabel'].value; - self.dsUnit = this['dsUnit'].value; + self.data.dsLabel = this['dsLabel'].value; + self.data.dsUnit = this['dsUnit'].value; + self.drawDsSummary(); return false; } ).appendTo(this.$tpl); +}; + + +jarmon.ChartConfig.prototype.drawDsSummary = function() { + var self = this; + this.$tpl.empty(); + + jQuery.each(this.data, function(i, el) { + $('<p/>').append( + $('<strong/>').text(i), + [': ', el].join('') + ).appendTo(self.$tpl); + }); + this.$tpl.append( + $('<input/>', {type: 'button', value: 'back'}).click( + function(e) { + self.drawDsLabelForm(); + } + ), + $('<input/>', {type: 'button', value: 'finish'}) + ); }; |