Ejegg has uploaded a new change for review.
https://gerrit.wikimedia.org/r/198128
Change subject: Fix board-level loading modal
......................................................................
Fix board-level loading modal
TODO: Still using the bootstrappy functions like was in the x-by-y
widget instead of doing it more knockouty.
Change-Id: I7f942aa9399fe61994fb5c1c3b743aca1b839ea8
---
M src/app/widgetBase.js
M src/components/boards/generic-board/generic-board.html
M src/components/boards/generic-board/generic-board.js
M src/components/widgets/x-by-y/x-by-y.html
M src/components/widgets/x-by-y/x-by-y.js
5 files changed, 33 insertions(+), 27 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/wikimedia/fundraising/dash
refs/changes/28/198128/1
diff --git a/src/app/widgetBase.js b/src/app/widgetBase.js
index fd19cc8..4a395d0 100644
--- a/src/app/widgetBase.js
+++ b/src/app/widgetBase.js
@@ -21,7 +21,7 @@
self.instanceID = params.widgetInstance;
self.widgetCode = params.widgetCode;
self.preDataLoading = ko.observable(true);
- self.dataLoading =
ko.observable(!!params.configuration);
+ self.dataLoading = params.dataLoading;
self.chartSaved =
ko.observable(!!params.configuration);
self.optionStateChanged = ko.observable(false);
self.chartWidth = ko.observable('900');
@@ -34,6 +34,7 @@
return $.ajax({
url: '/data/' + self.widgetCode + '?' + ( qs
).replace( /\+/g, '%20' ),
success: function ( dataget ) {
+ self.dataLoading(false);
self.retrievedResults( dataget.results
);
self.queryStringSQL( dataget.sqlQuery );
}
diff --git a/src/components/boards/generic-board/generic-board.html
b/src/components/boards/generic-board/generic-board.html
index 9dd8d2f..5484460 100644
--- a/src/components/boards/generic-board/generic-board.html
+++ b/src/components/boards/generic-board/generic-board.html
@@ -12,15 +12,20 @@
</div>
</div>
- <span data-bind="if: dataLoading">
- <div class="loading">
- <img src="/images/catloader.gif" />
- <div>Loading Dash<span class="ellipsis" data-bind="text:
ellipsis"></span></div>
- </div>
- </span>
-
<div class="row" data-bind="foreach: displayedBoard().widgets">
- <div data-bind="component: { name: widgetCode, params: { title:
displayName, description: description, configuration: configuration,
widgetInstance: id, widgetCode: widgetCode, sharedContext:
$parent.sharedContext } }"><span data-bind="text: display_name"></span></div>
+ <div data-bind="component: { name: widgetCode, params: { title:
displayName, description: description, configuration: configuration,
widgetInstance: id, widgetCode: widgetCode, dataLoading: dataLoading,
sharedContext: $parent.sharedContext } }"><span data-bind="text:
display_name"></span></div>
</div>
+</div>
+
+<div class="modal fade" id="loadingModal">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <h3 class="modal-body">Chart Loading....</h3>
+ <div class="progress">
+ <div class="progress-bar progress-bar-success
progress-bar-striped active" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width: 100%">
+ </div>
+ </div>
+ </div><!-- /.modal-content -->
+ </div>
</div>
\ No newline at end of file
diff --git a/src/components/boards/generic-board/generic-board.js
b/src/components/boards/generic-board/generic-board.js
index fb3fa04..2c24952 100644
--- a/src/components/boards/generic-board/generic-board.js
+++ b/src/components/boards/generic-board/generic-board.js
@@ -14,9 +14,25 @@
self.sharedContext = {};
self.displayedBoard = params.displayedBoard;
+ self.widgetLoads = [];
+ $.each( self.displayedBoard().widgets, function( i, widget ) {
+ widget.dataLoading = ko.observable( false );
+ self.widgetLoads.push( widget.dataLoading );
+ } );
- //make this false until data loading has been written
- self.dataLoading = ko.observable(false);
+ //This will return true if any child widget is loading
+ self.dataLoading = ko.computed( function() {
+ console.log('recalculating loading');
+ var i, widgetCount = self.widgetLoads.length;
+ for ( i = 0; i < widgetCount; i++ ) {
+ if ( self.widgetLoads[i]() === true ) {
+ $('#loadingModal').modal('show');
//todo: knockout-style!
+ return true;
+ }
+ }
+ $('#loadingModal').modal('hide'); //todo:
knockout-style!
+ return false;
+ } );
// Get the date
self.displayDate = ko.observable( moment().format( timeFormat ) );
diff --git a/src/components/widgets/x-by-y/x-by-y.html
b/src/components/widgets/x-by-y/x-by-y.html
index 27185a9..a65b3df 100644
--- a/src/components/widgets/x-by-y/x-by-y.html
+++ b/src/components/widgets/x-by-y/x-by-y.html
@@ -159,15 +159,3 @@
</div><!-- /.modal-content -->
</div>
</div>
-
-<div class="modal fade" id="loadingModal">
- <div class="modal-dialog">
- <div class="modal-content">
- <h3 class="modal-body">Chart Loading....</h3>
- <div class="progress">
- <div class="progress-bar progress-bar-success
progress-bar-striped active" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width: 100%">
- </div>
- </div>
- </div><!-- /.modal-content -->
- </div>
-</div>
\ No newline at end of file
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 9757aa7..01eaeac 100644
--- a/src/components/widgets/x-by-y/x-by-y.js
+++ b/src/components/widgets/x-by-y/x-by-y.js
@@ -162,8 +162,6 @@
self.submitXY = function(){
- $('#loadingModal').modal('show');
-
self.queryRequest.ySlice = self.showSlice();
//self.queryRequest.xSlice = self.bySlice();
//self.queryRequest.additionalFilters =
self.chosenFilters();
@@ -180,12 +178,10 @@
$.when( chartDataCall ).then( function( dataArray ){
self.displayedTimeChoice(self.timeChoice());
self.retrievedResults(dataArray.results);
- self.dataLoading(false);
self.chartData =
self.processData(self.retrievedResults(), self.timeChoice());
self.makeChart(self.chartData);
- $('#loadingModal').modal('hide');
});
--
To view, visit https://gerrit.wikimedia.org/r/198128
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7f942aa9399fe61994fb5c1c3b743aca1b839ea8
Gerrit-PatchSet: 1
Gerrit-Project: wikimedia/fundraising/dash
Gerrit-Branch: master
Gerrit-Owner: Ejegg <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
