From 20f1dcef45e99855fa35e00de6b4045f284d5c81 Mon Sep 17 00:00:00 2001 From: Henry Date: Wed, 2 Mar 2016 09:16:46 -0800 Subject: [PATCH] Fixed scrolling --- platform/features/table/bundle.js | 18 ++++ .../table/res/templates/mct-data-table.html | 2 +- .../table/res/templates/rt-table.html | 8 ++ .../src/controllers/MCTTableController.js | 53 ++++++---- .../src/controllers/RTTableController.js | 99 +++++++++++++++++++ .../controllers/TelemetryTableController.js | 2 +- 6 files changed, 160 insertions(+), 22 deletions(-) create mode 100644 platform/features/table/res/templates/rt-table.html create mode 100644 platform/features/table/src/controllers/RTTableController.js diff --git a/platform/features/table/bundle.js b/platform/features/table/bundle.js index 2cc4bce38a..52a6211d9b 100644 --- a/platform/features/table/bundle.js +++ b/platform/features/table/bundle.js @@ -23,6 +23,7 @@ define([ "./src/directives/MCTTable", + "./src/controllers/RTTableController", "./src/controllers/TelemetryTableController", "./src/controllers/TableOptionsController", '../../commonUI/regions/src/Region', @@ -31,6 +32,7 @@ define([ ], function ( MCTTable, TelemetryTableController, + RTTableController, TableOptionsController, Region, InspectorRegion, @@ -86,6 +88,11 @@ define([ "implementation": TelemetryTableController, "depends": ["$scope", "telemetryHandler", "telemetryFormatter"] }, + { + "key": "RTTableController", + "implementation": RTTableController, + "depends": ["$scope", "telemetryHandler", "telemetryFormatter"] + }, { "key": "TableOptionsController", "implementation": TableOptionsController, @@ -104,6 +111,17 @@ define([ ], "delegation": true, "editable": true + }, + { + "name": "Scrolling", + "key": "realtime", + "glyph": "\ue605", + "templateUrl": "templates/rt-table.html", + "needs": [ + "telemetry" + ], + "delegation": true, + "editable": true } ], "directives": [ diff --git a/platform/features/table/res/templates/mct-data-table.html b/platform/features/table/res/templates/mct-data-table.html index 9726d18d5c..b637bb0418 100644 --- a/platform/features/table/res/templates/mct-data-table.html +++ b/platform/features/table/res/templates/mct-data-table.html @@ -55,7 +55,7 @@ 'box-sizing': 'border-box' }" class="{{visibleRow.contents[header].cssClass}}"> - {{ visibleRow.contents[header].text }} + {{ visibleRow.contents[header].text }} diff --git a/platform/features/table/res/templates/rt-table.html b/platform/features/table/res/templates/rt-table.html new file mode 100644 index 0000000000..7ce0070200 --- /dev/null +++ b/platform/features/table/res/templates/rt-table.html @@ -0,0 +1,8 @@ +
+ + +
\ No newline at end of file diff --git a/platform/features/table/src/controllers/MCTTableController.js b/platform/features/table/src/controllers/MCTTableController.js index 45614bc9d1..3812fa7505 100644 --- a/platform/features/table/src/controllers/MCTTableController.js +++ b/platform/features/table/src/controllers/MCTTableController.js @@ -12,8 +12,10 @@ define( this.element = element; this.$timeout = $timeout; this.maxDisplayRows = 50; + element.find('div').on('scroll', this.onScroll.bind(this)); + this.scrollable = element.find('div')[0]; - $scope.visibleRows = []; + $scope.visibleRows = []; $scope.overrideRowPositioning = false; /** @@ -33,8 +35,6 @@ define( setDefaults($scope); - element.find('div').on('scroll', this.onScroll.bind(this)); - $scope.toggleSort = function (key) { if (!$scope.enableSort) { return; @@ -52,10 +52,17 @@ define( }; $scope.$watchCollection('filters', function () { - self.updateRows(self.$scope.rows); + self.updateRows(self.$scope.displayRows); }); $scope.$watchCollection('headers', this.updateHeaders.bind(this)); - $scope.$watchCollection('rows', this.updateRows.bind(this)); + $scope.$watch('rows', this.updateRows.bind(this)); + $scope.$on('newRow', this.newRow.bind(this)); + } + + MCTTableController.prototype.newRow = function (event, newRow) { + this.$scope.displayRows.push(newRow); + this.filterAndSort(this.$scope.displayRows); + this.$timeout(this.setElementSizes(), 0); } /** @@ -65,8 +72,9 @@ define( */ MCTTableController.prototype.onScroll = function (event) { var self = this, - topScroll = event.target.scrollTop, - bottomScroll = topScroll + event.target.offsetHeight, + target = this.scrollable, + topScroll = target.scrollTop, + bottomScroll = topScroll + target.offsetHeight, firstVisible, lastVisible, totalVisible, @@ -177,6 +185,7 @@ define( }; }); + this.onScroll(); this.$scope.overrideRowPositioning = true; }; @@ -290,19 +299,8 @@ define( this.$timeout(this.setElementSizes.bind(this)); }; - /** - * Update rows with new data. If filtering is enabled, rows - * will be sorted before display. - */ - MCTTableController.prototype.updateRows = function (newRows) { - var displayRows = newRows; - this.$scope.visibleRows = []; - this.$scope.overrideRowPositioning = false; - - if (!this.$scope.displayHeaders) { - return; - } - + MCTTableController.prototype.filterAndSort = function(rows) { + var displayRows = rows; if (this.$scope.enableFilter) { displayRows = this.filterRows(displayRows); } @@ -311,6 +309,21 @@ define( displayRows = this.sortRows(displayRows); } this.$scope.displayRows = displayRows; + }; + + /** + * Update rows with new data. If filtering is enabled, rows + * will be sorted before display. + */ + MCTTableController.prototype.updateRows = function (newRows) { + console.log('updateRows'); + this.$scope.visibleRows = []; + this.$scope.overrideRowPositioning = false; + + if (!this.$scope.displayHeaders) { + return; + } + this.filterAndSort(newRows || []); this.resize(); }; diff --git a/platform/features/table/src/controllers/RTTableController.js b/platform/features/table/src/controllers/RTTableController.js new file mode 100644 index 0000000000..7ad2132c81 --- /dev/null +++ b/platform/features/table/src/controllers/RTTableController.js @@ -0,0 +1,99 @@ +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +/*global define*/ + +/** + * This bundle adds a table view for displaying telemetry data. + * @namespace platform/features/table + */ +define( + [ + './TableController', + '../Table', + '../NameColumn' + ], + function (TableController, Table, NameColumn) { + "use strict"; + + /** + * The TableController is responsible for getting data onto the page + * in the table widget. This includes handling composition, + * configuration, and telemetry subscriptions. + * @memberof platform/features/table + * @param $scope + * @param telemetryHandler + * @param telemetryFormatter + * @constructor + */ + function RTTableController($scope, telemetryHandler, telemetryFormatter) { + TableController.call(this, $scope, telemetryHandler, telemetryFormatter); + } + + RTTableController.prototype = Object.create(TableController.prototype); + + /** + Create a new subscription. This is called when + */ + RTTableController.prototype.subscribe = function() { + var self = this; + + if (this.handle) { + this.handle.unsubscribe(); + } + + function updateData(){ + var datum; + self.handle.getTelemetryObjects().forEach(function(telemetryObject){ + datum = self.handle.getDatum(telemetryObject); + if (datum) { + if (!self.$scope.rows) { + self.$scope.rows = [self.table.getRowValues(telemetryObject, datum)]; + } else { + self.updateRows(telemetryObject, datum); + } + } + }); + + } + + this.handle = this.$scope.domainObject && this.telemetryHandler.handle( + this.$scope.domainObject, + updateData, + true // Lossless + ); + + this.setup(); + }; + + /** + * Add data to rows + * @param object The object for which data is available (table may + * be composed of multiple objects) + * @param datum The data received from the telemetry source + */ + RTTableController.prototype.updateRows = function (object, datum) { + this.$scope.$broadcast('newRow', this.table.getRowValues(object, datum)); + }; + + return RTTableController; + } +); diff --git a/platform/features/table/src/controllers/TelemetryTableController.js b/platform/features/table/src/controllers/TelemetryTableController.js index bb26e135c3..2b66ee0568 100644 --- a/platform/features/table/src/controllers/TelemetryTableController.js +++ b/platform/features/table/src/controllers/TelemetryTableController.js @@ -57,7 +57,7 @@ define( this.table = new TableConfiguration($scope.domainObject, telemetryFormatter); this.changeListeners = []; - $scope.rows = []; + $scope.rows = undefined; // Subscribe to telemetry when a domain object becomes available this.$scope.$watch('domainObject', function(domainObject){