ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-18 18:57:01 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Fixed scrolling

Browse Source
This commit is contained in:
Henry 2016-03-02 09:16:46 -08:00
parent ff5f37dfbe
commit 20f1dcef45
6 changed files with 160 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
platform/features/table/bundle.js
View File

@ -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": [

2
platform/features/table/res/templates/mct-data-table.html
View File

@ -55,7 +55,7 @@
'box-sizing': 'border-box'
}"
class="{{visibleRow.contents[header].cssClass}}">
{{ visibleRow.contents[header].text }}
{{ visibleRow.contents[header].text }}
</td>
</tr>
</tbody>

8
platform/features/table/res/templates/rt-table.html Normal file
View File

@ -0,0 +1,8 @@
<div ng-controller="RTTableController">
<mct-table
headers="headers"
rows="rows"
enableFilter="true"
enableSort="true">
</mct-table>
</div>

53
platform/features/table/src/controllers/MCTTableController.js
View File

@ -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();
};

99
platform/features/table/src/controllers/RTTableController.js Normal file
View File

@ -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;
}
);

2
platform/features/table/src/controllers/TelemetryTableController.js
View File

@ -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){