Ejegg has uploaded a new change for review.
https://gerrit.wikimedia.org/r/193395
Change subject: Demonstrate base template
......................................................................
Demonstrate base template
One possible way to share common template elements between base
and child widgets. There must be a recommended way, but it didn't
turn up in my googles.
Change-Id: I1f6019685a2c8f07690a78765eeebacb33f7eaa8
---
A src/app/baseTemplate.js
M src/app/require.config.js
M src/app/widgetBase.js
A src/components/widgets/widgetBase.html
M src/components/widgets/x-by-y/x-by-y.js
5 files changed, 64 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/fundraising/dash
refs/changes/95/193395/1
diff --git a/src/app/baseTemplate.js b/src/app/baseTemplate.js
new file mode 100644
index 0000000..a6524b4
--- /dev/null
+++ b/src/app/baseTemplate.js
@@ -0,0 +1,11 @@
+define( [
+ 'text!components/widgets/widgetBase.html'
+], function( baseTemplate ) {
+
+ function template( childTemplate ) {
+ var placeHolder = 'CHILD_TEMPLATE_PLACEHOLDER'
+ return baseTemplate.replace( placeHolder, childTemplate );
+ }
+
+ return template;
+});
diff --git a/src/app/require.config.js b/src/app/require.config.js
index 4b15b77..982d481 100644
--- a/src/app/require.config.js
+++ b/src/app/require.config.js
@@ -25,7 +25,8 @@
'c3': 'bower_modules/c3/c3',
'numeraljs': 'bower_modules/numeraljs/numeral',
'decemberData': 'bower_modules/fakeData/decemberData',
- 'WidgetBase': 'app/widgetBase'
+ 'WidgetBase': 'app/widgetBase',
+ 'baseTemplate': 'app/baseTemplate'
},
shim: {
'bootstrap': {
diff --git a/src/app/widgetBase.js b/src/app/widgetBase.js
index c32842c..7959cb3 100644
--- a/src/app/widgetBase.js
+++ b/src/app/widgetBase.js
@@ -11,6 +11,8 @@
self.retrievedResults =
ko.observable();
self.queryStringSQL =
ko.observable();
self.config =
ko.observable();
+ self.showSql =
ko.observable( false );
+ self.dataLoading =
ko.observable( false );
// Retrieves widget
config data to display initial state
self.getWidgetConfig =
function(instance){
@@ -24,10 +26,12 @@
// Get the data from
the DB as requested from user
self.getChartData =
function( qs ){
+
self.dataLoading( true );
return
$.ajax({
url: '/data/x-by-y?' + ( qs ).replace(
/\+/g, '%20' ),
success: function ( dataget ) {
+
self.dataLoading( false );
self.retrievedResults(dataget.results);
self.queryStringSQL(dataget.sqlQuery);
}})
@@ -141,8 +145,8 @@
};
// Show sql query button
- self.showSQL =
function(){
-
+ self.toggleSqlModal =
function(){
+ self.showSql(
!self.showSql() );
};
// Generate chart label
arrays for time increment types
diff --git a/src/components/widgets/widgetBase.html
b/src/components/widgets/widgetBase.html
new file mode 100644
index 0000000..5e09af4
--- /dev/null
+++ b/src/components/widgets/widgetBase.html
@@ -0,0 +1,41 @@
+<div class="row">
+ <div data-bind="if: dataLoading">
+ <div class="loadingWidget">
+ <img src="/images/catloader.gif" />
+ <div class="text-center">Loading.....</div>
+ </div>
+ </div>
+ <div class="panel panel-purple" id="fraudGaugeWidget">
+ <div class="panel-heading">
+ <span data-bind='text: title'></span>
+ <div class="btn-group btn-group-xs pull-right">
+ <button type="button" class="btn btn-default dropdown-toggle"
data-bind="click: toggleSqlModal"><i class="fa fa-database"></i></button>
+ <button type="button" class="btn btn-default"
data-bind="click: toggleModifyModal"><i class="fa fa-edit"></i></button>
+ </div>
+ </div>
+ <div class="panel-body">
+
+ <div class="row">
+ <div class="col-md-12 gauge">
+
+ CHILD_TEMPLATE_PLACEHOLDER
+
+ <div class="modal fade" id="sqlModal"
data-bind="visible:showSql">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <button type="button" class="close"
data-bind="click: toggleSqlModal"><span aria-hidden="true">×</span><span
class="sr-only">Close</span></button>
+ <h4 class="modal-title" data-bind="text:
title() + ' SQL'"></h4>
+ </div>
+ <div class="modal-body" data-bind="text:
queryStringSQL"></div>
+ </div><!-- /.modal-content -->
+ </div><!-- /.modal-dialog -->
+ </div><!-- /.modal -->
+
+ </div>
+ </div>
+ </div>
+
+
+ </div>
+</div>
diff --git a/src/components/widgets/x-by-y/x-by-y.js
b/src/components/widgets/x-by-y/x-by-y.js
index 7b77d19..9056ad5 100644
--- a/src/components/widgets/x-by-y/x-by-y.js
+++ b/src/components/widgets/x-by-y/x-by-y.js
@@ -5,8 +5,9 @@
'numeraljs',
'chartjs',
'select2',
- 'WidgetBase'
-], function( ko, template, moment, numeral, Chart, select2, WidgetBase ){
+ 'WidgetBase',
+ 'baseTemplate'
+], function( ko, template, moment, numeral, Chart, select2, WidgetBase,
baseTemplate ){
function XByYChartViewModel( params ){
@@ -313,6 +314,6 @@
}
- return { viewModel: XByYChartViewModel, template: template };
+ return { viewModel: XByYChartViewModel, template: baseTemplate( template )
};
});
--
To view, visit https://gerrit.wikimedia.org/r/193395
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I1f6019685a2c8f07690a78765eeebacb33f7eaa8
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/fundraising/dash
Gerrit-Branch: master
Gerrit-Owner: Ejegg <eeggles...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
