Compare commits
16 Commits
vue-table-
...
vue-table-
| Author | SHA1 | Date | |
|---|---|---|---|
|
24fcad8152 | ||
|
|
a6f9e0420c | ||
|
|
ccfd9eed00 | ||
|
|
df0ee1f99b | ||
|
|
dacbf928a1 | ||
|
|
6153dce261 | ||
|
|
0fcddb3547 | ||
|
|
c6628b6e72 | ||
|
|
ec7889e5ff | ||
|
|
416d8f60fe | ||
|
|
74293d4fda | ||
|
|
73fc686851 | ||
|
|
d21abd95b1 | ||
|
|
eb5ef28a73 | ||
|
|
1bb1330cba | ||
|
|
78c731dbf7 |
23
app.js
23
app.js
@@ -42,15 +42,30 @@ app.use('/proxyUrl', function proxyRequest(req, res, next) {
|
||||
|
||||
const webpack = require('webpack');
|
||||
const webpackConfig = require('./webpack.config.js');
|
||||
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
|
||||
webpackConfig.plugins.push(function() { this.plugin('watch-run', function(watching, callback) { console.log('Begin compile at ' + new Date()); callback(); }) });
|
||||
|
||||
webpackConfig.entry.openmct = [
|
||||
'webpack-hot-middleware/client',
|
||||
webpackConfig.entry.openmct
|
||||
];
|
||||
|
||||
const compiler = webpack(webpackConfig);
|
||||
const webpackDevRoute = require('webpack-dev-middleware')(
|
||||
compiler, {
|
||||
|
||||
app.use(require('webpack-dev-middleware')(
|
||||
compiler,
|
||||
{
|
||||
publicPath: '/dist',
|
||||
logLevel: 'warn'
|
||||
}
|
||||
);
|
||||
));
|
||||
|
||||
app.use(webpackDevRoute);
|
||||
app.use(require('webpack-hot-middleware')(
|
||||
compiler,
|
||||
{
|
||||
|
||||
}
|
||||
));
|
||||
|
||||
// Expose index.html for development users.
|
||||
app.get('/', function (req, res) {
|
||||
|
||||
@@ -27,8 +27,14 @@ define([
|
||||
|
||||
) {
|
||||
|
||||
var RED = 0.9,
|
||||
YELLOW = 0.5,
|
||||
var RED = {
|
||||
sin: 0.9,
|
||||
cos: 0.9
|
||||
},
|
||||
YELLOW = {
|
||||
sin: 0.5,
|
||||
cos: 0.5
|
||||
},
|
||||
LIMITS = {
|
||||
rh: {
|
||||
cssClass: "s-limit-upr s-limit-red",
|
||||
@@ -67,17 +73,18 @@ define([
|
||||
SinewaveLimitProvider.prototype.getLimitEvaluator = function (domainObject) {
|
||||
return {
|
||||
evaluate: function (datum, valueMetadata) {
|
||||
var range = valueMetadata ? valueMetadata.key : 'sin'
|
||||
if (datum[range] > RED) {
|
||||
var range = valueMetadata && valueMetadata.key;
|
||||
|
||||
if (datum[range] > RED[range]) {
|
||||
return LIMITS.rh;
|
||||
}
|
||||
if (datum[range] < -RED) {
|
||||
if (datum[range] < -RED[range]) {
|
||||
return LIMITS.rl;
|
||||
}
|
||||
if (datum[range] > YELLOW) {
|
||||
if (datum[range] > YELLOW[range]) {
|
||||
return LIMITS.yh;
|
||||
}
|
||||
if (datum[range] < -YELLOW) {
|
||||
if (datum[range] < -YELLOW[range]) {
|
||||
return LIMITS.yl;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,9 +34,6 @@
|
||||
<link rel="shortcut icon" href="dist/favicons/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<div class="l-splash-holder s-splash-holder">
|
||||
<div class="l-splash s-splash"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script>
|
||||
var THIRTY_MINUTES = 30 * 60 * 1000;
|
||||
@@ -48,7 +45,6 @@
|
||||
);
|
||||
openmct.install(openmct.plugins.MyItems());
|
||||
openmct.install(openmct.plugins.LocalStorage());
|
||||
openmct.install(openmct.plugins.Espresso());
|
||||
openmct.install(openmct.plugins.Generator());
|
||||
openmct.install(openmct.plugins.ExampleImagery());
|
||||
openmct.install(openmct.plugins.UTCTimeSystem());
|
||||
|
||||
15
openmct.js
15
openmct.js
@@ -29,22 +29,9 @@ if (document.currentScript) {
|
||||
__webpack_public_path__ = src.replace(matcher, '') + '/';
|
||||
}
|
||||
}
|
||||
const Main = require('./platform/framework/src/Main');
|
||||
const defaultRegistry = require('./src/defaultRegistry');
|
||||
|
||||
const MCT = require('./src/MCT');
|
||||
const buildInfo = require('./src/plugins/buildInfo/plugin');
|
||||
|
||||
var openmct = new MCT();
|
||||
|
||||
openmct.legacyRegistry = defaultRegistry;
|
||||
openmct.install(openmct.plugins.Plot());
|
||||
|
||||
if (typeof BUILD_CONSTANTS !== 'undefined') {
|
||||
openmct.install(buildInfo(BUILD_CONSTANTS));
|
||||
}
|
||||
|
||||
openmct.on('start', function () {
|
||||
return new Main().run(defaultRegistry);
|
||||
});
|
||||
|
||||
module.exports = openmct;
|
||||
|
||||
@@ -43,6 +43,7 @@
|
||||
"karma-html-reporter": "^0.2.7",
|
||||
"karma-jasmine": "^1.1.2",
|
||||
"karma-webpack": "^3.0.0",
|
||||
"location-bar": "^3.0.1",
|
||||
"lodash": "^3.10.1",
|
||||
"markdown-toc": "^0.11.7",
|
||||
"marked": "^0.3.5",
|
||||
@@ -67,6 +68,7 @@
|
||||
"webpack": "^4.16.2",
|
||||
"webpack-cli": "^3.1.0",
|
||||
"webpack-dev-middleware": "^3.1.3",
|
||||
"webpack-hot-middleware": "^2.22.3",
|
||||
"zepto": "^1.2.0"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@@ -73,15 +73,6 @@ define([
|
||||
legacyRegistry.register("platform/commonUI/browse", {
|
||||
"extensions": {
|
||||
"routes": [
|
||||
{
|
||||
"when": "/browse/:ids*?",
|
||||
"template": browseTemplate,
|
||||
"reloadOnSearch": false
|
||||
},
|
||||
{
|
||||
"when": "",
|
||||
"redirectTo": "/browse/"
|
||||
}
|
||||
],
|
||||
"constants": [
|
||||
{
|
||||
@@ -295,6 +286,20 @@ define([
|
||||
]
|
||||
}
|
||||
],
|
||||
"templates": [
|
||||
{
|
||||
key: "browseRoot",
|
||||
template: browseTemplate
|
||||
},
|
||||
{
|
||||
key: "browseObject",
|
||||
template: browseObjectTemplate
|
||||
},
|
||||
{
|
||||
key: "inspectorRegion",
|
||||
template: inspectorRegionTemplate
|
||||
}
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"name": "screenfull.js",
|
||||
|
||||
@@ -47,6 +47,7 @@ define(
|
||||
urlService,
|
||||
defaultPath
|
||||
) {
|
||||
window.browseScope = $scope;
|
||||
var initialPath = ($route.current.params.ids || defaultPath).split("/"),
|
||||
currentIds;
|
||||
|
||||
|
||||
@@ -55,7 +55,7 @@ define(
|
||||
|
||||
// A view is editable unless explicitly flagged as not
|
||||
(views || []).forEach(function (view) {
|
||||
if (view.editable === true ||
|
||||
if (isEditable(view) ||
|
||||
(view.key === 'plot' && type.getKey() === 'telemetry.panel') ||
|
||||
(view.key === 'table' && type.getKey() === 'table') ||
|
||||
(view.key === 'rt-table' && type.getKey() === 'rttable')
|
||||
@@ -64,6 +64,14 @@ define(
|
||||
}
|
||||
});
|
||||
|
||||
function isEditable(view) {
|
||||
if (typeof view.editable === Function) {
|
||||
return view.editable(domainObject.useCapability('adapter'));
|
||||
} else {
|
||||
return view.editable === true;
|
||||
}
|
||||
}
|
||||
|
||||
return count;
|
||||
};
|
||||
|
||||
|
||||
@@ -55,16 +55,16 @@ define(
|
||||
navigatedObject = this.navigationService.getNavigation(),
|
||||
actionMetadata = action.getMetadata ? action.getMetadata() : {};
|
||||
|
||||
if (navigatedObject.hasCapability("editor") && navigatedObject.getCapability("editor").isEditContextRoot()) {
|
||||
// if (navigatedObject.hasCapability("editor") && navigatedObject.getCapability("editor").isEditContextRoot()) {
|
||||
if (selectedObject.hasCapability("editor") && selectedObject.getCapability("editor").inEditContext()) {
|
||||
return this.editModeBlacklist.indexOf(actionMetadata.key) === -1;
|
||||
} else {
|
||||
//Target is in the context menu
|
||||
return this.nonEditContextBlacklist.indexOf(actionMetadata.key) === -1;
|
||||
}
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
// } else {
|
||||
// return true;
|
||||
// }
|
||||
};
|
||||
|
||||
return EditContextualActionPolicy;
|
||||
|
||||
@@ -45,15 +45,27 @@ define(
|
||||
|
||||
// Link; install event handlers.
|
||||
function link(scope, element, attrs) {
|
||||
var removeSelectable = openmct.selection.selectable(
|
||||
element[0],
|
||||
scope.$eval(attrs.mctSelectable),
|
||||
attrs.hasOwnProperty('mctInitSelect') && scope.$eval(attrs.mctInitSelect) !== false
|
||||
);
|
||||
|
||||
var isDestroyed = false;
|
||||
scope.$on("$destroy", function () {
|
||||
removeSelectable();
|
||||
isDestroyed = true;
|
||||
});
|
||||
|
||||
openmct.$injector.get('$timeout')(function () {
|
||||
if (isDestroyed) {
|
||||
return;
|
||||
}
|
||||
var removeSelectable = openmct.selection.selectable(
|
||||
element[0],
|
||||
scope.$eval(attrs.mctSelectable),
|
||||
attrs.hasOwnProperty('mctInitSelect') && scope.$eval(attrs.mctInitSelect) !== false
|
||||
);
|
||||
|
||||
scope.$on("$destroy", function () {
|
||||
removeSelectable();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@@ -76,7 +76,7 @@ define(
|
||||
* @returns a domain object
|
||||
*/
|
||||
InspectorController.prototype.selectedItem = function () {
|
||||
return this.$scope.selection[0].context.oldItem;
|
||||
return this.$scope.selection[0] && this.$scope.selection[0].context.oldItem;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,128 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
"./src/directives/MCTTable",
|
||||
"./src/controllers/TelemetryTableController",
|
||||
"./src/controllers/TableOptionsController",
|
||||
'../../commonUI/regions/src/Region',
|
||||
'../../commonUI/browse/src/InspectorRegion',
|
||||
"./res/templates/table-options-edit.html",
|
||||
"./res/templates/telemetry-table.html",
|
||||
"legacyRegistry"
|
||||
], function (
|
||||
MCTTable,
|
||||
TelemetryTableController,
|
||||
TableOptionsController,
|
||||
Region,
|
||||
InspectorRegion,
|
||||
tableOptionsEditTemplate,
|
||||
telemetryTableTemplate,
|
||||
legacyRegistry
|
||||
) {
|
||||
/**
|
||||
* Two region parts are defined here. One that appears only in browse
|
||||
* mode, and one that appears only in edit mode. For not they both point
|
||||
* to the same representation, but a different key could be used here to
|
||||
* include a customized representation for edit mode.
|
||||
*/
|
||||
var tableInspector = new InspectorRegion(),
|
||||
tableOptionsEditRegion = new Region({
|
||||
name: "table-options",
|
||||
title: "Table Options",
|
||||
modes: ['edit'],
|
||||
content: {
|
||||
key: "table-options-edit"
|
||||
}
|
||||
});
|
||||
tableInspector.addRegion(tableOptionsEditRegion);
|
||||
|
||||
legacyRegistry.register("platform/features/table", {
|
||||
"extensions": {
|
||||
"types": [
|
||||
{
|
||||
"key": "table",
|
||||
"name": "Telemetry Table",
|
||||
"cssClass": "icon-tabular-realtime",
|
||||
"description": "A table of values over a given time period. The table will be automatically updated with new values as they become available",
|
||||
"priority": 861,
|
||||
"features": "creation",
|
||||
"delegates": [
|
||||
"telemetry"
|
||||
],
|
||||
"inspector": "table-options-edit",
|
||||
"contains": [
|
||||
{
|
||||
"has": "telemetry"
|
||||
}
|
||||
],
|
||||
"model": {
|
||||
"composition": []
|
||||
},
|
||||
"views": [
|
||||
"table"
|
||||
]
|
||||
}
|
||||
],
|
||||
"controllers": [
|
||||
{
|
||||
"key": "TelemetryTableController",
|
||||
"implementation": TelemetryTableController,
|
||||
"depends": ["$scope", "$timeout", "openmct"]
|
||||
},
|
||||
{
|
||||
"key": "TableOptionsController",
|
||||
"implementation": TableOptionsController,
|
||||
"depends": ["$scope"]
|
||||
}
|
||||
|
||||
],
|
||||
"views": [
|
||||
{
|
||||
"name": "Telemetry Table",
|
||||
"key": "table",
|
||||
"cssClass": "icon-tabular-realtime",
|
||||
"template": telemetryTableTemplate,
|
||||
"needs": [
|
||||
"telemetry"
|
||||
],
|
||||
"delegation": true,
|
||||
"editable": false
|
||||
}
|
||||
],
|
||||
"directives": [
|
||||
{
|
||||
"key": "mctTable",
|
||||
"implementation": MCTTable,
|
||||
"depends": ["$timeout"]
|
||||
}
|
||||
],
|
||||
"representations": [
|
||||
{
|
||||
"key": "table-options-edit",
|
||||
"template": tableOptionsEditTemplate
|
||||
}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,95 +0,0 @@
|
||||
<div class="l-control-bar">
|
||||
<a class="s-button t-export icon-download labeled"
|
||||
ng-click="exportAsCSV()"
|
||||
title="Export This View's Data">
|
||||
Export
|
||||
</a>
|
||||
</div>
|
||||
<div class="mct-table-headers-w" mct-scroll-x="scroll.x">
|
||||
<table class="mct-table l-tabular-headers filterable"
|
||||
ng-style="{
|
||||
'max-width': totalWidth
|
||||
}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th ng-repeat="header in displayHeaders"
|
||||
ng-style="{
|
||||
width: columnWidths[$index] + 'px',
|
||||
'max-width': columnWidths[$index] + 'px',
|
||||
}"
|
||||
ng-class="[
|
||||
enableSort ? 'sortable' : '',
|
||||
sortColumn === header ? 'sort' : '',
|
||||
sortDirection || ''
|
||||
].join(' ')"
|
||||
ng-click="toggleSort(header)">
|
||||
{{ header }}
|
||||
</th>
|
||||
</tr>
|
||||
<tr ng-if="enableFilter" class="s-filters">
|
||||
<th ng-repeat="header in displayHeaders"
|
||||
ng-style="{
|
||||
width: columnWidths[$index] + 'px',
|
||||
'max-width': columnWidths[$index] + 'px',
|
||||
}">
|
||||
<div class="holder l-filter flex-elem grows"
|
||||
ng-class="{active: filters[header]}">
|
||||
<input type="text"
|
||||
ng-model="filters[header]"/>
|
||||
<a class="clear-icon clear-input icon-x-in-circle"
|
||||
ng-class="{show: filters[header]}"
|
||||
ng-click="filters[header] = undefined"></a>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<table class="mct-sizing-table t-sizing-table"
|
||||
ng-style="{
|
||||
width: calcTableWidthPx
|
||||
}">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td ng-repeat="header in displayHeaders">{{header}}</td>
|
||||
</tr>
|
||||
<tr><td ng-repeat="header in displayHeaders" >
|
||||
{{sizingRow[header].text}}
|
||||
</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="l-tabular-body t-scrolling vscroll--persist" mct-resize="resize()" mct-scroll-x="scroll.x">
|
||||
<div class="mct-table-scroll-forcer"
|
||||
ng-style="{
|
||||
width: totalWidth
|
||||
}"></div>
|
||||
<table class="mct-table"
|
||||
ng-style="{
|
||||
height: totalHeight + 'px',
|
||||
'max-width': totalWidth
|
||||
}">
|
||||
<tbody>
|
||||
<tr ng-repeat-start="visibleRow in visibleRows track by $index"
|
||||
ng-if="visibleRow.rowIndex === toiRowIndex"
|
||||
ng-style="{ top: visibleRow.offsetY + 'px' }"
|
||||
class="l-toi-tablerow">
|
||||
<td colspan="999">
|
||||
<mct-include key="'time-of-interest'"
|
||||
class="l-toi-holder pinned"></mct-include>
|
||||
</td>
|
||||
</tr>
|
||||
<tr ng-repeat-end
|
||||
ng-style="{ top: visibleRow.offsetY + 'px' }"
|
||||
ng-click="table.onRowClick($event, visibleRow.rowIndex)">
|
||||
<td ng-repeat="header in displayHeaders"
|
||||
ng-style="{
|
||||
width: columnWidths[$index] + 'px',
|
||||
'max-width': columnWidths[$index] + 'px',
|
||||
}"
|
||||
class="{{visibleRow.contents[header].cssClass}}">
|
||||
{{ visibleRow.contents[header].text }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!--
|
||||
Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
as represented by the Administrator of the National Aeronautics and Space
|
||||
Administration. All rights reserved.
|
||||
|
||||
Open MCT 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 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.
|
||||
-->
|
||||
|
||||
<div ng-if="domainObject.getCapability('editor').inEditContext()"
|
||||
ng-controller="TableOptionsController"
|
||||
class="flex-elem grows l-inspector-part">
|
||||
<mct-form
|
||||
ng-model="configuration.table.columns"
|
||||
structure="columnsForm"
|
||||
name="columnsFormState"
|
||||
class="flex-elem no-margin">
|
||||
</mct-form>
|
||||
</div>
|
||||
@@ -1,15 +0,0 @@
|
||||
<div ng-controller="TelemetryTableController as tableController"
|
||||
ng-class="{'loading': loading}">
|
||||
<mct-table
|
||||
headers="headers"
|
||||
rows="rows"
|
||||
time-columns="[tableController.table.timeSystemColumnTitle]"
|
||||
format-cell="formatCell"
|
||||
enableFilter="true"
|
||||
enableSort="true"
|
||||
auto-scroll="autoScroll"
|
||||
default-sort="defaultSort"
|
||||
export-as="{{ exportAs }}"
|
||||
class="tabular-holder l-sticky-headers has-control-bar">
|
||||
</mct-table>
|
||||
</div>
|
||||
@@ -1,67 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
define(function () {
|
||||
function TableColumn(openmct, telemetryObject, metadatum) {
|
||||
this.openmct = openmct;
|
||||
this.telemetryObject = telemetryObject;
|
||||
this.metadatum = metadatum;
|
||||
this.formatter = openmct.telemetry.getValueFormatter(metadatum);
|
||||
|
||||
this.titleValue = this.metadatum.name;
|
||||
}
|
||||
|
||||
TableColumn.prototype.title = function (title) {
|
||||
if (arguments.length > 0) {
|
||||
this.titleValue = title;
|
||||
}
|
||||
return this.titleValue;
|
||||
};
|
||||
|
||||
TableColumn.prototype.isCurrentTimeSystem = function () {
|
||||
var isCurrentTimeSystem = this.metadatum.hints.hasOwnProperty('domain') &&
|
||||
this.metadatum.key === this.openmct.time.timeSystem().key;
|
||||
|
||||
return isCurrentTimeSystem;
|
||||
};
|
||||
|
||||
TableColumn.prototype.hasValue = function (telemetryObject, telemetryDatum) {
|
||||
var keyStringForDatum = this.openmct.objects.makeKeyString(telemetryObject.identifier);
|
||||
var keyStringForColumn = this.openmct.objects.makeKeyString(this.telemetryObject.identifier);
|
||||
return keyStringForDatum === keyStringForColumn && telemetryDatum.hasOwnProperty(this.metadatum.source);
|
||||
};
|
||||
|
||||
TableColumn.prototype.getValue = function (telemetryDatum, limitEvaluator) {
|
||||
var alarm = limitEvaluator &&
|
||||
limitEvaluator.evaluate(telemetryDatum, this.metadatum);
|
||||
var value = {
|
||||
text: this.formatter.format(telemetryDatum),
|
||||
value: this.formatter.parse(telemetryDatum)
|
||||
};
|
||||
|
||||
if (alarm) {
|
||||
value.cssClass = alarm.cssClass;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
return TableColumn;
|
||||
});
|
||||
@@ -1,164 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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 Set */
|
||||
define(
|
||||
['./TableColumn'],
|
||||
function (TableColumn) {
|
||||
|
||||
/**
|
||||
* Class that manages table metadata, state, and contents.
|
||||
* @memberof platform/features/table
|
||||
* @param domainObject
|
||||
* @constructor
|
||||
*/
|
||||
function TableConfiguration(domainObject, openmct) {
|
||||
this.domainObject = domainObject;
|
||||
this.openmct = openmct;
|
||||
this.timeSystemColumn = undefined;
|
||||
this.columns = [];
|
||||
this.headers = new Set();
|
||||
this.timeSystemColumnTitle = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build column definition based on supplied telemetry metadata
|
||||
* @param telemetryObject the telemetry producing object associated with this column
|
||||
* @param metadata Metadata describing the domains and ranges available
|
||||
* @returns {TableConfiguration} This object
|
||||
*/
|
||||
TableConfiguration.prototype.addColumn = function (telemetryObject, metadatum) {
|
||||
var column = new TableColumn(this.openmct, telemetryObject, metadatum);
|
||||
|
||||
if (column.isCurrentTimeSystem()) {
|
||||
if (!this.timeSystemColumnTitle) {
|
||||
this.timeSystemColumnTitle = column.title();
|
||||
}
|
||||
column.title(this.timeSystemColumnTitle);
|
||||
}
|
||||
|
||||
this.columns.push(column);
|
||||
this.headers.add(column.title());
|
||||
};
|
||||
|
||||
/**
|
||||
* Retrieve and format values for a given telemetry datum.
|
||||
* @param telemetryObject The object that the telemetry data is
|
||||
* associated with
|
||||
* @param datum The telemetry datum to retrieve values from
|
||||
* @returns {Object} Key value pairs where the key is the column
|
||||
* title, and the value is the formatted value from the provided datum.
|
||||
*/
|
||||
TableConfiguration.prototype.getRowValues = function (telemetryObject, limitEvaluator, datum) {
|
||||
return this.columns.reduce(function (rowObject, column) {
|
||||
var columnTitle = column.title();
|
||||
var columnValue = {
|
||||
text: '',
|
||||
value: undefined
|
||||
};
|
||||
if (rowObject[columnTitle] === undefined) {
|
||||
rowObject[columnTitle] = columnValue;
|
||||
}
|
||||
|
||||
if (column.hasValue(telemetryObject, datum)) {
|
||||
columnValue = column.getValue(datum, limitEvaluator);
|
||||
|
||||
if (columnValue.text === undefined) {
|
||||
columnValue.text = '';
|
||||
}
|
||||
// Don't replace something with nothing.
|
||||
// This occurs when there are multiple columns with the same
|
||||
// column title
|
||||
if (rowObject[columnTitle].text === undefined ||
|
||||
rowObject[columnTitle].text.length === 0) {
|
||||
rowObject[columnTitle] = columnValue;
|
||||
}
|
||||
}
|
||||
|
||||
return rowObject;
|
||||
}, {});
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
TableConfiguration.prototype.defaultColumnConfiguration = function () {
|
||||
return ((this.domainObject.getModel().configuration || {}).table || {}).columns || {};
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the established configuration on the domain object
|
||||
* @private
|
||||
*/
|
||||
TableConfiguration.prototype.saveColumnConfiguration = function (columnConfig) {
|
||||
this.domainObject.useCapability('mutation', function (model) {
|
||||
model.configuration = model.configuration || {};
|
||||
model.configuration.table = model.configuration.table || {};
|
||||
model.configuration.table.columns = columnConfig;
|
||||
});
|
||||
};
|
||||
|
||||
function configChanged(config1, config2) {
|
||||
var config1Keys = Object.keys(config1),
|
||||
config2Keys = Object.keys(config2);
|
||||
|
||||
return (config1Keys.length !== config2Keys.length) ||
|
||||
config1Keys.some(function (key) {
|
||||
return config1[key] !== config2[key];
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* As part of the process of building the table definition, extract
|
||||
* configuration from column definitions.
|
||||
* @returns {Object} A configuration object consisting of key-value
|
||||
* pairs where the key is the column title, and the value is a
|
||||
* boolean indicating whether the column should be shown.
|
||||
*/
|
||||
TableConfiguration.prototype.buildColumnConfiguration = function () {
|
||||
var configuration = {},
|
||||
//Use existing persisted config, or default it
|
||||
defaultConfig = this.defaultColumnConfiguration();
|
||||
|
||||
/**
|
||||
* For each column header, define a configuration value
|
||||
* specifying whether the column is visible or not. Default to
|
||||
* existing (persisted) configuration if available
|
||||
*/
|
||||
this.headers.forEach(function (columnTitle) {
|
||||
configuration[columnTitle] =
|
||||
typeof defaultConfig[columnTitle] === 'undefined' ? true :
|
||||
defaultConfig[columnTitle];
|
||||
});
|
||||
|
||||
//Synchronize column configuration with model
|
||||
if (this.domainObject.hasCapability('editor') &&
|
||||
this.domainObject.getCapability('editor').isEditContextRoot() &&
|
||||
configChanged(configuration, defaultConfig)) {
|
||||
this.saveColumnConfiguration(configuration);
|
||||
}
|
||||
|
||||
return configuration;
|
||||
};
|
||||
|
||||
return TableConfiguration;
|
||||
}
|
||||
);
|
||||
@@ -1,249 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[
|
||||
'lodash',
|
||||
'EventEmitter'
|
||||
],
|
||||
function (_, EventEmitter) {
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*/
|
||||
function TelemetryCollection() {
|
||||
EventEmitter.call(this, arguments);
|
||||
this.dupeCheck = false;
|
||||
this.telemetry = [];
|
||||
this.highBuffer = [];
|
||||
this.sortField = undefined;
|
||||
this.lastBounds = {};
|
||||
|
||||
_.bindAll(this, [
|
||||
'addOne',
|
||||
'iteratee'
|
||||
]);
|
||||
}
|
||||
|
||||
TelemetryCollection.prototype = Object.create(EventEmitter.prototype);
|
||||
|
||||
TelemetryCollection.prototype.iteratee = function (item) {
|
||||
return _.get(item, this.sortField);
|
||||
};
|
||||
|
||||
/**
|
||||
* This function is optimized for ticking - it assumes that start and end
|
||||
* bounds will only increase and as such this cannot be used for decreasing
|
||||
* bounds changes.
|
||||
*
|
||||
* An implication of this is that data will not be discarded that exceeds
|
||||
* the given end bounds. For arbitrary bounds changes, it's assumed that
|
||||
* a telemetry requery is performed anyway, and the collection is cleared
|
||||
* and repopulated.
|
||||
*
|
||||
* @fires TelemetryCollection#added
|
||||
* @fires TelemetryCollection#discarded
|
||||
* @param bounds
|
||||
*/
|
||||
TelemetryCollection.prototype.bounds = function (bounds) {
|
||||
var startChanged = this.lastBounds.start !== bounds.start;
|
||||
var endChanged = this.lastBounds.end !== bounds.end;
|
||||
var startIndex = 0;
|
||||
var endIndex = 0;
|
||||
var discarded;
|
||||
var added;
|
||||
var testValue;
|
||||
|
||||
this.lastBounds = bounds;
|
||||
|
||||
// If collection is not sorted by a time field, we cannot respond to
|
||||
// bounds events
|
||||
if (this.sortField === undefined) {
|
||||
this.lastBounds = bounds;
|
||||
return;
|
||||
}
|
||||
|
||||
if (startChanged) {
|
||||
testValue = _.set({}, this.sortField, bounds.start);
|
||||
// Calculate the new index of the first item within the bounds
|
||||
startIndex = _.sortedIndex(this.telemetry, testValue, this.sortField);
|
||||
discarded = this.telemetry.splice(0, startIndex);
|
||||
}
|
||||
if (endChanged) {
|
||||
testValue = _.set({}, this.sortField, bounds.end);
|
||||
// Calculate the new index of the last item in bounds
|
||||
endIndex = _.sortedLastIndex(this.highBuffer, testValue, this.sortField);
|
||||
added = this.highBuffer.splice(0, endIndex);
|
||||
added.forEach(function (datum) {
|
||||
this.telemetry.push(datum);
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
if (discarded && discarded.length > 0) {
|
||||
/**
|
||||
* A `discarded` event is emitted when telemetry data fall out of
|
||||
* bounds due to a bounds change event
|
||||
* @type {object[]} discarded the telemetry data
|
||||
* discarded as a result of the bounds change
|
||||
*/
|
||||
this.emit('discarded', discarded);
|
||||
}
|
||||
if (added && added.length > 0) {
|
||||
/**
|
||||
* An `added` event is emitted when a bounds change results in
|
||||
* received telemetry falling within the new bounds.
|
||||
* @type {object[]} added the telemetry data that is now within bounds
|
||||
*/
|
||||
this.emit('added', added);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds an individual item to the collection. Used internally only
|
||||
* @private
|
||||
* @param item
|
||||
*/
|
||||
TelemetryCollection.prototype.addOne = function (item) {
|
||||
var isDuplicate = false;
|
||||
var boundsDefined = this.lastBounds &&
|
||||
(this.lastBounds.start !== undefined && this.lastBounds.end !== undefined);
|
||||
var array;
|
||||
var boundsLow;
|
||||
var boundsHigh;
|
||||
|
||||
// If collection is not sorted by a time field, we cannot respond to
|
||||
// bounds events, so no bounds checking necessary
|
||||
if (this.sortField === undefined) {
|
||||
this.telemetry.push(item);
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Insert into either in-bounds array, or the out of bounds high buffer.
|
||||
// Data in the high buffer will be re-evaluated for possible insertion on next tick
|
||||
|
||||
if (boundsDefined) {
|
||||
boundsHigh = _.get(item, this.sortField) > this.lastBounds.end;
|
||||
boundsLow = _.get(item, this.sortField) < this.lastBounds.start;
|
||||
|
||||
if (!boundsHigh && !boundsLow) {
|
||||
array = this.telemetry;
|
||||
} else if (boundsHigh) {
|
||||
array = this.highBuffer;
|
||||
}
|
||||
} else {
|
||||
array = this.telemetry;
|
||||
}
|
||||
|
||||
// If out of bounds low, disregard data
|
||||
if (!boundsLow) {
|
||||
// Going to check for duplicates. Bound the search problem to
|
||||
// items around the given time. Use sortedIndex because it
|
||||
// employs a binary search which is O(log n). Can use binary search
|
||||
// based on time stamp because the array is guaranteed ordered due
|
||||
// to sorted insertion.
|
||||
var startIx = _.sortedIndex(array, item, this.sortField);
|
||||
var endIx;
|
||||
|
||||
if (this.dupeCheck && startIx !== array.length) {
|
||||
endIx = _.sortedLastIndex(array, item, this.sortField);
|
||||
|
||||
// Create an array of potential dupes, based on having the
|
||||
// same time stamp
|
||||
var potentialDupes = array.slice(startIx, endIx + 1);
|
||||
// Search potential dupes for exact dupe
|
||||
isDuplicate = _.findIndex(potentialDupes, _.isEqual.bind(undefined, item)) > -1;
|
||||
}
|
||||
|
||||
if (!isDuplicate) {
|
||||
array.splice(endIx || startIx, 0, item);
|
||||
|
||||
//Return true if it was added and in bounds
|
||||
return array === this.telemetry;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Add an array of objects to this telemetry collection
|
||||
* @fires TelemetryCollection#added
|
||||
* @param {object[]} items
|
||||
*/
|
||||
TelemetryCollection.prototype.add = function (items) {
|
||||
var added = items.filter(this.addOne);
|
||||
this.emit('added', added);
|
||||
this.dupeCheck = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Clears the contents of the telemetry collection
|
||||
*/
|
||||
TelemetryCollection.prototype.clear = function () {
|
||||
this.telemetry = [];
|
||||
this.highBuffer = [];
|
||||
};
|
||||
|
||||
/**
|
||||
* Sorts the telemetry collection based on the provided sort field
|
||||
* specifier. Subsequent inserts are sorted to maintain specified sport
|
||||
* order.
|
||||
*
|
||||
* @example
|
||||
* // First build some mock telemetry for the purpose of an example
|
||||
* let now = Date.now();
|
||||
* let telemetry = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (value) {
|
||||
* return {
|
||||
* // define an object property to demonstrate nested paths
|
||||
* timestamp: {
|
||||
* ms: now - value * 1000,
|
||||
* text:
|
||||
* },
|
||||
* value: value
|
||||
* }
|
||||
* });
|
||||
* let collection = new TelemetryCollection();
|
||||
*
|
||||
* collection.add(telemetry);
|
||||
*
|
||||
* // Sort by telemetry value
|
||||
* collection.sort("value");
|
||||
*
|
||||
* // Sort by ms since epoch
|
||||
* collection.sort("timestamp.ms");
|
||||
*
|
||||
* // Sort by formatted date text
|
||||
* collection.sort("timestamp.text");
|
||||
*
|
||||
*
|
||||
* @param {string} sortField An object property path.
|
||||
*/
|
||||
TelemetryCollection.prototype.sort = function (sortField) {
|
||||
this.sortField = sortField;
|
||||
if (sortField !== undefined) {
|
||||
this.telemetry = _.sortBy(this.telemetry, this.iteratee);
|
||||
}
|
||||
};
|
||||
|
||||
return TelemetryCollection;
|
||||
}
|
||||
);
|
||||
@@ -1,828 +0,0 @@
|
||||
|
||||
define(
|
||||
[
|
||||
'zepto',
|
||||
'lodash'
|
||||
],
|
||||
function ($, _) {
|
||||
|
||||
/**
|
||||
* A controller for the MCTTable directive. Populates scope with
|
||||
* data used for populating, sorting, and filtering
|
||||
* tables.
|
||||
* @param $scope
|
||||
* @param $timeout
|
||||
* @param element
|
||||
* @constructor
|
||||
*/
|
||||
function MCTTableController($scope, $window, element, exportService, formatService, openmct) {
|
||||
var self = this;
|
||||
|
||||
this.$scope = $scope;
|
||||
this.element = $(element[0]);
|
||||
this.$window = $window;
|
||||
this.maxDisplayRows = 100;
|
||||
|
||||
this.scrollable = this.element.find('.t-scrolling').first();
|
||||
this.resultsHeader = this.element.find('.mct-table>thead').first();
|
||||
this.sizingTableBody = this.element.find('.t-sizing-table>tbody').first();
|
||||
this.$scope.sizingRow = {};
|
||||
this.$scope.calcTableWidthPx = '100%';
|
||||
this.timeApi = openmct.time;
|
||||
this.toiFormatter = undefined;
|
||||
this.formatService = formatService;
|
||||
this.callbacks = {};
|
||||
|
||||
//Bind all class functions to 'this'
|
||||
_.bindAll(this, [
|
||||
'addRows',
|
||||
'binarySearch',
|
||||
'buildLargestRow',
|
||||
'changeBounds',
|
||||
'changeTimeOfInterest',
|
||||
'changeTimeSystem',
|
||||
'destroyConductorListeners',
|
||||
'digest',
|
||||
'filterAndSort',
|
||||
'filterRows',
|
||||
'firstVisible',
|
||||
'insertSorted',
|
||||
'lastVisible',
|
||||
'onRowClick',
|
||||
'onScroll',
|
||||
'removeRows',
|
||||
'resize',
|
||||
'scrollToBottom',
|
||||
'scrollToRow',
|
||||
'setElementSizes',
|
||||
'setHeaders',
|
||||
'setRows',
|
||||
'setTimeOfInterestRow',
|
||||
'setVisibleRows',
|
||||
'sortComparator',
|
||||
'sortRows'
|
||||
]);
|
||||
|
||||
this.scrollable.on('scroll', this.onScroll);
|
||||
|
||||
$scope.visibleRows = [];
|
||||
$scope.displayRows = [];
|
||||
|
||||
/**
|
||||
* Set default values for optional parameters on a given scope
|
||||
*/
|
||||
function setDefaults(scope) {
|
||||
if (typeof scope.enableFilter === 'undefined') {
|
||||
scope.enableFilter = true;
|
||||
scope.filters = {};
|
||||
}
|
||||
if (typeof scope.enableSort === 'undefined') {
|
||||
scope.enableSort = true;
|
||||
scope.sortColumn = undefined;
|
||||
scope.sortDirection = undefined;
|
||||
}
|
||||
if (scope.sortColumn !== undefined) {
|
||||
scope.sortDirection = "asc";
|
||||
}
|
||||
}
|
||||
|
||||
setDefaults($scope);
|
||||
|
||||
$scope.exportAsCSV = function () {
|
||||
var headers = $scope.displayHeaders,
|
||||
filename = $(element[0]).attr('export-as');
|
||||
|
||||
exportService.exportCSV($scope.displayRows.map(function (row) {
|
||||
return headers.reduce(function (r, header) {
|
||||
r[header] = row[header].text;
|
||||
return r;
|
||||
}, {});
|
||||
}), {
|
||||
headers: headers,
|
||||
filename: filename
|
||||
});
|
||||
};
|
||||
|
||||
$scope.toggleSort = function (key) {
|
||||
if (!$scope.enableSort) {
|
||||
return;
|
||||
}
|
||||
if ($scope.sortColumn !== key) {
|
||||
$scope.sortColumn = key;
|
||||
$scope.sortDirection = 'asc';
|
||||
} else if ($scope.sortDirection === 'asc') {
|
||||
$scope.sortDirection = 'desc';
|
||||
} else if ($scope.sortDirection === 'desc') {
|
||||
$scope.sortColumn = undefined;
|
||||
$scope.sortDirection = undefined;
|
||||
} else if ($scope.sortColumn !== undefined &&
|
||||
$scope.sortDirection === undefined) {
|
||||
$scope.sortDirection = 'asc';
|
||||
}
|
||||
self.setRows($scope.rows);
|
||||
self.setTimeOfInterestRow(self.timeApi.timeOfInterest());
|
||||
};
|
||||
|
||||
/*
|
||||
* Define watches to listen for changes to headers and rows.
|
||||
*/
|
||||
$scope.$watchCollection('filters', function () {
|
||||
self.setRows($scope.rows);
|
||||
});
|
||||
$scope.$watch('headers', function (newHeaders, oldHeaders) {
|
||||
if (newHeaders !== oldHeaders) {
|
||||
this.setHeaders(newHeaders);
|
||||
}
|
||||
}.bind(this));
|
||||
$scope.$watch('rows', this.setRows);
|
||||
|
||||
/*
|
||||
* Listen for rows added individually (eg. for real-time tables)
|
||||
*/
|
||||
$scope.$on('add:rows', this.addRows);
|
||||
$scope.$on('remove:rows', this.removeRows);
|
||||
|
||||
/**
|
||||
* Populated from the default-sort attribute on MctTable
|
||||
* directive tag.
|
||||
*/
|
||||
$scope.$watch('defaultSort', function (newColumn, oldColumn) {
|
||||
if (newColumn !== oldColumn) {
|
||||
$scope.toggleSort(newColumn);
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* Listen for resize events to trigger recalculation of table width
|
||||
*/
|
||||
$scope.resize = this.setElementSizes;
|
||||
|
||||
/**
|
||||
* Scope variable that is populated from the 'time-columns'
|
||||
* attribute on the MctTable tag. Indicates which columns, while
|
||||
* sorted, can be used for indicated time of interest.
|
||||
*/
|
||||
$scope.$watch("timeColumns", function (timeColumns) {
|
||||
if (timeColumns) {
|
||||
this.destroyConductorListeners();
|
||||
|
||||
this.timeApi.on('timeSystem', this.changeTimeSystem);
|
||||
this.timeApi.on('timeOfInterest', this.changeTimeOfInterest);
|
||||
this.timeApi.on('bounds', this.changeBounds);
|
||||
|
||||
// If time system defined, set initially
|
||||
if (this.timeApi.timeSystem() !== undefined) {
|
||||
this.changeTimeSystem(this.timeApi.timeSystem());
|
||||
}
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
$scope.$on('$destroy', function () {
|
||||
this.scrollable.off('scroll', this.onScroll);
|
||||
this.destroyConductorListeners();
|
||||
|
||||
}.bind(this));
|
||||
}
|
||||
|
||||
MCTTableController.prototype.destroyConductorListeners = function () {
|
||||
this.timeApi.off('timeSystem', this.changeTimeSystem);
|
||||
this.timeApi.off('timeOfInterest', this.changeTimeOfInterest);
|
||||
this.timeApi.off('bounds', this.changeBounds);
|
||||
};
|
||||
|
||||
MCTTableController.prototype.changeTimeSystem = function (timeSystem) {
|
||||
var format = timeSystem.timeFormat;
|
||||
this.toiFormatter = this.formatService.getFormat(format);
|
||||
};
|
||||
|
||||
/**
|
||||
* If auto-scroll is enabled, this function will scroll to the
|
||||
* bottom of the page
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.scrollToBottom = function () {
|
||||
this.scrollable[0].scrollTop = this.scrollable[0].scrollHeight;
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles a row add event. Rows can be added as needed using the
|
||||
* `add:row` broadcast event.
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.addRows = function (event, rows) {
|
||||
//Does the row pass the current filter?
|
||||
if (this.filterRows(rows).length > 0) {
|
||||
rows.forEach(this.insertSorted.bind(this, this.$scope.displayRows));
|
||||
|
||||
//Resize the columns , then update the rows visible in the table
|
||||
this.resize([this.$scope.sizingRow].concat(rows))
|
||||
.then(this.setVisibleRows)
|
||||
.then(function () {
|
||||
if (this.$scope.autoScroll) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
var toi = this.timeApi.timeOfInterest();
|
||||
if (toi !== -1) {
|
||||
this.setTimeOfInterestRow(toi);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Handles a row remove event. Rows can be removed as needed using the
|
||||
* `remove:row` broadcast event.
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.removeRows = function (event, rows) {
|
||||
var indexInDisplayRows;
|
||||
rows.forEach(function (row) {
|
||||
// Do a sequential search here. Only way of finding row is by
|
||||
// object equality, so array is in effect unsorted.
|
||||
indexInDisplayRows = this.$scope.displayRows.indexOf(row);
|
||||
if (indexInDisplayRows !== -1) {
|
||||
this.$scope.displayRows.splice(indexInDisplayRows, 1);
|
||||
}
|
||||
}, this);
|
||||
|
||||
this.$scope.sizingRow = this.buildLargestRow([this.$scope.sizingRow].concat(rows));
|
||||
|
||||
this.setElementSizes();
|
||||
this.setVisibleRows()
|
||||
.then(function () {
|
||||
if (this.$scope.autoScroll) {
|
||||
this.scrollToBottom();
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.onScroll = function (event) {
|
||||
this.scrollWindow = {
|
||||
top: this.scrollable[0].scrollTop,
|
||||
bottom: this.scrollable[0].scrollTop + this.scrollable[0].offsetHeight,
|
||||
offsetHeight: this.scrollable[0].offsetHeight,
|
||||
height: this.scrollable[0].scrollHeight
|
||||
};
|
||||
this.$window.requestAnimationFrame(function () {
|
||||
this.setVisibleRows();
|
||||
this.digest();
|
||||
|
||||
// If user scrolls away from bottom, disable auto-scroll.
|
||||
// Auto-scroll will be re-enabled if user scrolls to bottom again.
|
||||
if (this.scrollWindow.top <
|
||||
(this.scrollWindow.height - this.scrollWindow.offsetHeight) - 20) {
|
||||
this.$scope.autoScroll = false;
|
||||
} else {
|
||||
this.$scope.autoScroll = true;
|
||||
}
|
||||
this.scrolling = false;
|
||||
delete this.scrollWindow;
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
/**
|
||||
* Return first visible row, based on current scroll state.
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.firstVisible = function () {
|
||||
var topScroll = this.scrollWindow ?
|
||||
this.scrollWindow.top :
|
||||
this.scrollable[0].scrollTop;
|
||||
|
||||
return Math.floor(
|
||||
(topScroll) / this.$scope.rowHeight
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Return last visible row, based on current scroll state.
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.lastVisible = function () {
|
||||
var bottomScroll = this.scrollWindow ?
|
||||
this.scrollWindow.bottom :
|
||||
this.scrollable[0].scrollTop + this.scrollable[0].offsetHeight;
|
||||
|
||||
return Math.ceil(
|
||||
(bottomScroll) /
|
||||
this.$scope.rowHeight
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets visible rows based on array
|
||||
* content and current scroll state.
|
||||
*/
|
||||
MCTTableController.prototype.setVisibleRows = function () {
|
||||
var self = this,
|
||||
totalVisible,
|
||||
numberOffscreen,
|
||||
firstVisible,
|
||||
lastVisible,
|
||||
start,
|
||||
end;
|
||||
|
||||
//No need to scroll
|
||||
if (this.$scope.displayRows.length < this.maxDisplayRows) {
|
||||
start = 0;
|
||||
end = this.$scope.displayRows.length;
|
||||
} else {
|
||||
firstVisible = this.firstVisible();
|
||||
lastVisible = this.lastVisible();
|
||||
totalVisible = lastVisible - firstVisible;
|
||||
numberOffscreen = this.maxDisplayRows - totalVisible;
|
||||
start = firstVisible - Math.floor(numberOffscreen / 2);
|
||||
end = lastVisible + Math.ceil(numberOffscreen / 2);
|
||||
|
||||
if (start < 0) {
|
||||
start = 0;
|
||||
end = Math.min(this.maxDisplayRows,
|
||||
this.$scope.displayRows.length);
|
||||
} else if (end >= this.$scope.displayRows.length) {
|
||||
end = this.$scope.displayRows.length;
|
||||
start = end - this.maxDisplayRows + 1;
|
||||
}
|
||||
if (this.$scope.visibleRows[0] &&
|
||||
this.$scope.visibleRows[0].rowIndex === start &&
|
||||
this.$scope.visibleRows[this.$scope.visibleRows.length - 1]
|
||||
.rowIndex === end) {
|
||||
return this.digest();
|
||||
}
|
||||
}
|
||||
//Set visible rows from display rows, based on calculated offset.
|
||||
this.$scope.visibleRows = this.$scope.displayRows.slice(start, end)
|
||||
.map(function (row, i) {
|
||||
return {
|
||||
rowIndex: start + i,
|
||||
offsetY: ((start + i) * self.$scope.rowHeight),
|
||||
contents: row
|
||||
};
|
||||
});
|
||||
return this.digest();
|
||||
};
|
||||
|
||||
/**
|
||||
* Update table headers with new headers. If filtering is
|
||||
* enabled, reset filters. If sorting is enabled, reset
|
||||
* sorting.
|
||||
*/
|
||||
MCTTableController.prototype.setHeaders = function (newHeaders) {
|
||||
if (!newHeaders) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$scope.displayHeaders = newHeaders;
|
||||
if (this.$scope.enableFilter) {
|
||||
this.$scope.filters = {};
|
||||
}
|
||||
// Reset column sort information unless the new headers
|
||||
// contain the column currently sorted on.
|
||||
if (this.$scope.enableSort &&
|
||||
newHeaders.indexOf(this.$scope.sortColumn) === -1) {
|
||||
this.$scope.sortColumn = undefined;
|
||||
this.$scope.sortDirection = undefined;
|
||||
}
|
||||
this.setRows(this.$scope.rows);
|
||||
};
|
||||
|
||||
/**
|
||||
* Read styles from the DOM and use them to calculate offsets
|
||||
* for individual rows.
|
||||
*/
|
||||
MCTTableController.prototype.setElementSizes = function () {
|
||||
var tbody = this.sizingTableBody,
|
||||
firstRow = tbody.find('tr'),
|
||||
column = firstRow.find('td'),
|
||||
rowHeight = firstRow.prop('offsetHeight'),
|
||||
columnWidth,
|
||||
tableWidth = 0,
|
||||
overallHeight = (rowHeight *
|
||||
(this.$scope.displayRows ? this.$scope.displayRows.length - 1 : 0));
|
||||
|
||||
this.$scope.columnWidths = [];
|
||||
|
||||
while (column.length) {
|
||||
columnWidth = column.prop('offsetWidth');
|
||||
this.$scope.columnWidths.push(column.prop('offsetWidth'));
|
||||
tableWidth += columnWidth;
|
||||
column = column.next();
|
||||
}
|
||||
this.$scope.rowHeight = rowHeight;
|
||||
this.$scope.totalHeight = overallHeight;
|
||||
|
||||
var scrollW = this.scrollable[0].offsetWidth - this.scrollable[0].clientWidth;
|
||||
if (scrollW && scrollW > 0) {
|
||||
this.$scope.calcTableWidthPx = 'calc(100% - ' + scrollW + 'px)';
|
||||
}
|
||||
|
||||
if (tableWidth > 0) {
|
||||
this.$scope.totalWidth = tableWidth + 'px';
|
||||
} else {
|
||||
this.$scope.totalWidth = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Finds the correct insertion point for a new row, which takes into
|
||||
* account duplicates to make sure new rows are inserted in a way that
|
||||
* maintains arrival order.
|
||||
*
|
||||
* @private
|
||||
* @param {Array} searchArray
|
||||
* @param {Object} searchElement Object to find the insertion point for
|
||||
*/
|
||||
MCTTableController.prototype.findInsertionPoint = function (searchArray, searchElement) {
|
||||
var index;
|
||||
var testIndex;
|
||||
var first = searchArray[0];
|
||||
var last = searchArray[searchArray.length - 1];
|
||||
|
||||
if (first) {
|
||||
first = first[this.$scope.sortColumn].text;
|
||||
}
|
||||
if (last) {
|
||||
last = last[this.$scope.sortColumn].text;
|
||||
}
|
||||
// Shortcut check for append/prepend
|
||||
if (first && this.sortComparator(first, searchElement) >= 0) {
|
||||
index = testIndex = 0;
|
||||
} else if (last && this.sortComparator(last, searchElement) <= 0) {
|
||||
index = testIndex = searchArray.length;
|
||||
} else {
|
||||
// use a binary search to find the correct insertion point
|
||||
index = testIndex = this.binarySearch(
|
||||
searchArray,
|
||||
searchElement,
|
||||
0,
|
||||
searchArray.length - 1
|
||||
);
|
||||
}
|
||||
|
||||
//It's possible that the insertion point is a duplicate of the element to be inserted
|
||||
var isDupe = function () {
|
||||
return this.sortComparator(searchElement,
|
||||
searchArray[testIndex][this.$scope.sortColumn].text) === 0;
|
||||
}.bind(this);
|
||||
|
||||
// In the event of a duplicate, scan left or right (depending on
|
||||
// sort order) to find an insertion point that maintains order received
|
||||
while (testIndex >= 0 && testIndex < searchArray.length && isDupe()) {
|
||||
if (this.$scope.sortDirection === 'asc') {
|
||||
index = ++testIndex;
|
||||
} else {
|
||||
index = testIndex--;
|
||||
}
|
||||
}
|
||||
return index;
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.binarySearch = function (searchArray, searchElement, min, max) {
|
||||
var sampleAt = Math.floor((max - min) / 2) + min;
|
||||
|
||||
if (max < min) {
|
||||
return min; // Element is not in array, min gives direction
|
||||
}
|
||||
switch (this.sortComparator(searchElement,
|
||||
searchArray[sampleAt][this.$scope.sortColumn].text)) {
|
||||
case -1:
|
||||
return this.binarySearch(searchArray, searchElement, min,
|
||||
sampleAt - 1);
|
||||
case 0:
|
||||
return sampleAt;
|
||||
case 1:
|
||||
return this.binarySearch(searchArray, searchElement,
|
||||
sampleAt + 1, max);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.insertSorted = function (array, element) {
|
||||
var index = -1;
|
||||
|
||||
if (!this.$scope.sortColumn || !this.$scope.sortDirection) {
|
||||
//No sorting applied, push it on the end.
|
||||
index = array.length;
|
||||
} else {
|
||||
//Sort is enabled, perform binary search to find insertion point
|
||||
index = this.findInsertionPoint(array, element[this.$scope.sortColumn].text);
|
||||
}
|
||||
if (index === -1) {
|
||||
array.unshift(element);
|
||||
} else if (index === array.length) {
|
||||
array.push(element);
|
||||
} else {
|
||||
array.splice(index, 0, element);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Compare two variables, returning a number that represents
|
||||
* which is larger. Similar to the default array sort
|
||||
* comparator, but does not coerce all values to string before
|
||||
* conversion. Strings are lowercased before comparison.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.sortComparator = function (a, b) {
|
||||
var result = 0,
|
||||
sortDirectionMultiplier,
|
||||
numberA,
|
||||
numberB;
|
||||
/**
|
||||
* Given a value, if it is a number, or a string representation of a
|
||||
* number, then return a number representation. Otherwise, return
|
||||
* the original value. It's a little more robust than using just
|
||||
* Number() or parseFloat, or isNaN in isolation, all of which are
|
||||
* fairly inconsistent in their results.
|
||||
* @param value The value to return as a number.
|
||||
* @returns {*} The value cast to a Number, or the original value if
|
||||
* a Number representation is not possible.
|
||||
*/
|
||||
function toNumber(value) {
|
||||
var val = !isNaN(Number(value)) && !isNaN(parseFloat(value)) ? Number(value) : value;
|
||||
return val;
|
||||
}
|
||||
|
||||
numberA = toNumber(a);
|
||||
numberB = toNumber(b);
|
||||
|
||||
//If they're both numbers, then compare them as numbers
|
||||
if (typeof numberA === "number" && typeof numberB === "number") {
|
||||
a = numberA;
|
||||
b = numberB;
|
||||
}
|
||||
|
||||
//If they're both strings, then ignore case
|
||||
if (typeof a === "string" && typeof b === "string") {
|
||||
a = a.toLowerCase();
|
||||
b = b.toLowerCase();
|
||||
}
|
||||
|
||||
if (a < b) {
|
||||
result = -1;
|
||||
}
|
||||
if (a > b) {
|
||||
result = 1;
|
||||
}
|
||||
|
||||
if (this.$scope.sortDirection === 'asc') {
|
||||
sortDirectionMultiplier = 1;
|
||||
} else if (this.$scope.sortDirection === 'desc') {
|
||||
sortDirectionMultiplier = -1;
|
||||
}
|
||||
|
||||
return result * sortDirectionMultiplier;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns a new array which is a result of applying the sort
|
||||
* criteria defined in $scope.
|
||||
*
|
||||
* Does not modify the array that was passed in.
|
||||
*/
|
||||
MCTTableController.prototype.sortRows = function (rowsToSort) {
|
||||
var self = this,
|
||||
sortKey = this.$scope.sortColumn;
|
||||
|
||||
if (!this.$scope.sortColumn || !this.$scope.sortDirection) {
|
||||
return rowsToSort;
|
||||
}
|
||||
|
||||
return rowsToSort.sort(function (a, b) {
|
||||
return self.sortComparator(a[sortKey].text, b[sortKey].text);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns an object which contains the largest values
|
||||
* for each key in the given set of rows. This is used to
|
||||
* pre-calculate optimal column sizes without having to render
|
||||
* every row.
|
||||
*/
|
||||
MCTTableController.prototype.buildLargestRow = function (rows) {
|
||||
var largestRow = rows.reduce(function (prevLargest, row) {
|
||||
Object.keys(row).forEach(function (key) {
|
||||
var currentColumn,
|
||||
currentColumnLength,
|
||||
largestColumn,
|
||||
largestColumnLength;
|
||||
if (row[key]) {
|
||||
currentColumn = (row[key]).text;
|
||||
currentColumnLength =
|
||||
(currentColumn && currentColumn.length) ?
|
||||
currentColumn.length :
|
||||
currentColumn;
|
||||
largestColumn = prevLargest[key] ? prevLargest[key].text : "";
|
||||
largestColumnLength = largestColumn.length;
|
||||
|
||||
if (currentColumnLength > largestColumnLength) {
|
||||
prevLargest[key] = JSON.parse(JSON.stringify(row[key]));
|
||||
}
|
||||
}
|
||||
});
|
||||
return prevLargest;
|
||||
}, JSON.parse(JSON.stringify(rows[0] || {})));
|
||||
return largestRow;
|
||||
};
|
||||
|
||||
// Will effectively cap digests at 60Hz
|
||||
// Also turns digest into a promise allowing code to force digest, then
|
||||
// schedule something to happen afterwards
|
||||
MCTTableController.prototype.digest = function () {
|
||||
var scope = this.$scope;
|
||||
var self = this;
|
||||
var raf = this.$window.requestAnimationFrame;
|
||||
var promise = this.digestPromise;
|
||||
|
||||
if (!promise) {
|
||||
self.digestPromise = promise = new Promise(function (resolve) {
|
||||
raf(function () {
|
||||
scope.$digest();
|
||||
self.digestPromise = undefined;
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return promise;
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the widest row in the table, and if necessary, resizes
|
||||
* the table accordingly
|
||||
*
|
||||
* @param rows the rows on which to resize
|
||||
* @returns {Promise} a promise that will resolve when resizing has
|
||||
* occurred.
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.resize = function (rows) {
|
||||
this.$scope.sizingRow = this.buildLargestRow(rows);
|
||||
return this.digest().then(this.setElementSizes);
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.filterAndSort = function (rows) {
|
||||
var displayRows = rows;
|
||||
if (this.$scope.enableFilter) {
|
||||
displayRows = this.filterRows(displayRows);
|
||||
}
|
||||
|
||||
if (this.$scope.enableSort) {
|
||||
displayRows = this.sortRows(displayRows.slice(0));
|
||||
}
|
||||
return displayRows;
|
||||
};
|
||||
|
||||
/**
|
||||
* Update rows with new data. If filtering is enabled, rows
|
||||
* will be sorted before display.
|
||||
*/
|
||||
MCTTableController.prototype.setRows = function (newRows) {
|
||||
//Nothing to show because no columns visible
|
||||
if (!this.$scope.displayHeaders || !newRows) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$scope.displayRows = this.filterAndSort(newRows || []);
|
||||
return this.resize(newRows)
|
||||
.then(function (rows) {
|
||||
return this.setVisibleRows(rows);
|
||||
}.bind(this))
|
||||
//Timeout following setVisibleRows to allow digest to
|
||||
// perform DOM changes, otherwise scrollTo won't work.
|
||||
.then(function () {
|
||||
//If TOI specified, scroll to it
|
||||
var timeOfInterest = this.timeApi.timeOfInterest();
|
||||
if (timeOfInterest) {
|
||||
this.setTimeOfInterestRow(timeOfInterest);
|
||||
this.scrollToRow(this.$scope.toiRowIndex);
|
||||
}
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
/**
|
||||
* Applies user defined filters to rows. These filters are based on
|
||||
* the text entered in the search areas in each column.
|
||||
* @param rowsToFilter {Object[]} The rows to apply filters to
|
||||
* @returns {Object[]} A filtered copy of the supplied rows
|
||||
*/
|
||||
MCTTableController.prototype.filterRows = function (rowsToFilter) {
|
||||
var filters = {},
|
||||
self = this;
|
||||
|
||||
/**
|
||||
* Returns true if row matches all filters.
|
||||
*/
|
||||
function matchRow(filterMap, row) {
|
||||
return Object.keys(filterMap).every(function (key) {
|
||||
if (!row[key]) {
|
||||
return false;
|
||||
}
|
||||
var testVal = String(row[key].text).toLowerCase();
|
||||
return testVal.indexOf(filterMap[key]) !== -1;
|
||||
});
|
||||
}
|
||||
|
||||
if (!Object.keys(this.$scope.filters).length) {
|
||||
return rowsToFilter;
|
||||
}
|
||||
|
||||
Object.keys(this.$scope.filters).forEach(function (key) {
|
||||
if (!self.$scope.filters[key]) {
|
||||
return;
|
||||
}
|
||||
filters[key] = self.$scope.filters[key].toLowerCase();
|
||||
});
|
||||
|
||||
return rowsToFilter.filter(matchRow.bind(null, filters));
|
||||
};
|
||||
|
||||
/**
|
||||
* Scroll the view to a given row index
|
||||
* @param displayRowIndex {number} The index in the displayed rows
|
||||
* to scroll to.
|
||||
*/
|
||||
MCTTableController.prototype.scrollToRow = function (displayRowIndex) {
|
||||
|
||||
var visible = displayRowIndex > this.firstVisible() && displayRowIndex < this.lastVisible();
|
||||
|
||||
if (!visible) {
|
||||
var scrollTop = displayRowIndex * this.$scope.rowHeight +
|
||||
(this.scrollable[0].offsetHeight / 2);
|
||||
this.scrollable[0].scrollTop = scrollTop;
|
||||
this.setVisibleRows();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Update rows with new data. If filtering is enabled, rows
|
||||
* will be sorted before display.
|
||||
*/
|
||||
MCTTableController.prototype.setTimeOfInterestRow = function (newTOI) {
|
||||
var isSortedByTime =
|
||||
this.$scope.timeColumns &&
|
||||
this.$scope.timeColumns.indexOf(this.$scope.sortColumn) !== -1;
|
||||
|
||||
this.$scope.toiRowIndex = -1;
|
||||
|
||||
if (newTOI && isSortedByTime) {
|
||||
var formattedTOI = this.toiFormatter.format(newTOI);
|
||||
var rowIndex = this.binarySearch(
|
||||
this.$scope.displayRows,
|
||||
formattedTOI,
|
||||
0,
|
||||
this.$scope.displayRows.length - 1);
|
||||
|
||||
if (rowIndex > 0 && rowIndex < this.$scope.displayRows.length) {
|
||||
this.$scope.toiRowIndex = rowIndex;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
MCTTableController.prototype.changeTimeOfInterest = function (newTOI) {
|
||||
this.setTimeOfInterestRow(newTOI);
|
||||
this.scrollToRow(this.$scope.toiRowIndex);
|
||||
};
|
||||
|
||||
/**
|
||||
* On zoom, pan, etc. reset TOI
|
||||
* @param bounds
|
||||
*/
|
||||
MCTTableController.prototype.changeBounds = function (bounds) {
|
||||
this.setTimeOfInterestRow(this.timeApi.timeOfInterest());
|
||||
if (this.$scope.toiRowIndex !== -1) {
|
||||
this.scrollToRow(this.$scope.toiRowIndex);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
MCTTableController.prototype.onRowClick = function (event, rowIndex) {
|
||||
if (this.$scope.timeColumns.indexOf(this.$scope.sortColumn) !== -1) {
|
||||
var selectedTime = this.$scope.displayRows[rowIndex][this.$scope.sortColumn].text;
|
||||
if (selectedTime &&
|
||||
this.toiFormatter.validate(selectedTime) &&
|
||||
event.altKey) {
|
||||
this.timeApi.timeOfInterest(this.toiFormatter.parse(selectedTime));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return MCTTableController;
|
||||
}
|
||||
);
|
||||
@@ -1,113 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
|
||||
/**
|
||||
* Notes on implementation of plot options
|
||||
*
|
||||
* Multiple y-axes will have to be handled with multiple forms as
|
||||
* they will need to be stored on distinct model object
|
||||
*
|
||||
* Likewise plot series options per-child will need to be separate
|
||||
* forms.
|
||||
*/
|
||||
|
||||
/**
|
||||
* The LayoutController is responsible for supporting the
|
||||
* Layout view. It arranges frames according to saved configuration
|
||||
* and provides methods for updating these based on mouse
|
||||
* movement.
|
||||
* @memberof platform/features/plot
|
||||
* @constructor
|
||||
* @param {Scope} $scope the controller's Angular scope
|
||||
*/
|
||||
function TableOptionsController($scope) {
|
||||
|
||||
var self = this;
|
||||
|
||||
this.$scope = $scope;
|
||||
this.domainObject = $scope.domainObject;
|
||||
this.listeners = [];
|
||||
|
||||
$scope.columnsForm = {};
|
||||
|
||||
function unlisten() {
|
||||
self.listeners.forEach(function (listener) {
|
||||
listener();
|
||||
});
|
||||
}
|
||||
|
||||
$scope.$watch('domainObject', function (domainObject) {
|
||||
unlisten();
|
||||
self.populateForm(domainObject.getModel());
|
||||
|
||||
self.listeners.push(self.domainObject.getCapability('mutation').listen(function (model) {
|
||||
self.populateForm(model);
|
||||
}));
|
||||
});
|
||||
|
||||
/**
|
||||
* Maintain a configuration object on scope that stores column
|
||||
* configuration. On change, synchronize with object model.
|
||||
*/
|
||||
$scope.$watchCollection('configuration.table.columns', function (newColumns, oldColumns) {
|
||||
if (newColumns !== oldColumns) {
|
||||
self.domainObject.useCapability('mutation', function (model) {
|
||||
model.configuration.table.columns = newColumns;
|
||||
});
|
||||
self.domainObject.getCapability('persistence').persist();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Destroy all mutation listeners
|
||||
*/
|
||||
$scope.$on('$destroy', unlisten);
|
||||
|
||||
}
|
||||
|
||||
TableOptionsController.prototype.populateForm = function (model) {
|
||||
var columnsDefinition = (((model.configuration || {}).table || {}).columns || {}),
|
||||
rows = [];
|
||||
this.$scope.columnsForm = {
|
||||
'name': 'Columns',
|
||||
'sections': [{
|
||||
'name': 'Columns',
|
||||
'rows': rows
|
||||
}]};
|
||||
|
||||
Object.keys(columnsDefinition).forEach(function (key) {
|
||||
rows.push({
|
||||
'name': key,
|
||||
'control': 'checkbox',
|
||||
'key': key
|
||||
});
|
||||
});
|
||||
this.$scope.configuration = JSON.parse(JSON.stringify(model.configuration || {}));
|
||||
};
|
||||
|
||||
return TableOptionsController;
|
||||
}
|
||||
);
|
||||
@@ -1,450 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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 console*/
|
||||
|
||||
/**
|
||||
* This bundle adds a table view for displaying telemetry data.
|
||||
* @namespace platform/features/table
|
||||
*/
|
||||
define(
|
||||
[
|
||||
'../TableConfiguration',
|
||||
'../../../../../src/api/objects/object-utils',
|
||||
'../TelemetryCollection',
|
||||
'lodash'
|
||||
|
||||
],
|
||||
function (TableConfiguration, objectUtils, TelemetryCollection, _) {
|
||||
|
||||
/**
|
||||
* 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
|
||||
* @constructor
|
||||
*/
|
||||
function TelemetryTableController(
|
||||
$scope,
|
||||
$timeout,
|
||||
openmct
|
||||
) {
|
||||
|
||||
this.$scope = $scope;
|
||||
this.$timeout = $timeout;
|
||||
this.openmct = openmct;
|
||||
this.batchSize = 1000;
|
||||
|
||||
/*
|
||||
* Initialization block
|
||||
*/
|
||||
this.columns = {}; //Range and Domain columns
|
||||
this.unobserveObject = undefined;
|
||||
this.subscriptions = [];
|
||||
this.timeColumns = [];
|
||||
$scope.rows = [];
|
||||
this.table = new TableConfiguration($scope.domainObject,
|
||||
openmct);
|
||||
this.lastBounds = this.openmct.time.bounds();
|
||||
this.lastRequestTime = 0;
|
||||
this.telemetry = new TelemetryCollection();
|
||||
if (this.lastBounds) {
|
||||
this.telemetry.bounds(this.lastBounds);
|
||||
}
|
||||
|
||||
/*
|
||||
* Create a new format object from legacy object, and replace it
|
||||
* when it changes
|
||||
*/
|
||||
this.domainObject = objectUtils.toNewFormat($scope.domainObject.getModel(),
|
||||
$scope.domainObject.getId());
|
||||
|
||||
this.$scope.exportAs = this.$scope.domainObject.getModel().name;
|
||||
|
||||
_.bindAll(this, [
|
||||
'destroy',
|
||||
'sortByTimeSystem',
|
||||
'loadColumns',
|
||||
'getHistoricalData',
|
||||
'subscribeToNewData',
|
||||
'changeBounds',
|
||||
'setClock',
|
||||
'addRowsToTable',
|
||||
'removeRowsFromTable'
|
||||
]);
|
||||
|
||||
// Retrieve data when domain object is available.
|
||||
// Also deferring telemetry request makes testing easier as controller
|
||||
// construction has no unintended consequences.
|
||||
$scope.$watch("domainObject", function () {
|
||||
this.getData();
|
||||
this.registerChangeListeners();
|
||||
}.bind(this));
|
||||
|
||||
this.setClock(this.openmct.time.clock());
|
||||
|
||||
this.$scope.$on("$destroy", this.destroy);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {boolean} scroll
|
||||
*/
|
||||
TelemetryTableController.prototype.setClock = function (clock) {
|
||||
this.$scope.autoScroll = clock !== undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
* Based on the selected time system, find a matching domain column
|
||||
* to sort by. By default will just match on key.
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
TelemetryTableController.prototype.sortByTimeSystem = function () {
|
||||
var scope = this.$scope;
|
||||
var sortColumn;
|
||||
scope.defaultSort = undefined;
|
||||
|
||||
sortColumn = this.table.columns.filter(function (column) {
|
||||
return column.isCurrentTimeSystem();
|
||||
})[0];
|
||||
if (sortColumn) {
|
||||
scope.defaultSort = sortColumn.title();
|
||||
this.telemetry.sort(sortColumn.title() + '.value');
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Attaches listeners that respond to state change in domain object,
|
||||
* conductor, and receipt of telemetry
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
TelemetryTableController.prototype.registerChangeListeners = function () {
|
||||
if (this.unobserveObject) {
|
||||
this.unobserveObject();
|
||||
}
|
||||
|
||||
this.unobserveObject = this.openmct.objects.observe(this.domainObject, "*",
|
||||
function (domainObject) {
|
||||
this.domainObject = domainObject;
|
||||
this.getData();
|
||||
}.bind(this)
|
||||
);
|
||||
|
||||
this.openmct.time.on('timeSystem', this.sortByTimeSystem);
|
||||
this.openmct.time.on('bounds', this.changeBounds);
|
||||
this.openmct.time.on('clock', this.setClock);
|
||||
|
||||
this.telemetry.on('added', this.addRowsToTable);
|
||||
this.telemetry.on('discarded', this.removeRowsFromTable);
|
||||
};
|
||||
|
||||
/**
|
||||
* On receipt of new telemetry, informs mct-table directive that new rows
|
||||
* are available and passes populated rows to it
|
||||
*
|
||||
* @private
|
||||
* @param rows
|
||||
*/
|
||||
TelemetryTableController.prototype.addRowsToTable = function (rows) {
|
||||
this.$scope.$broadcast('add:rows', rows);
|
||||
};
|
||||
|
||||
/**
|
||||
* When rows are to be removed, informs mct-table directive. Row removal
|
||||
* happens when rows call outside the bounds of the time conductor
|
||||
*
|
||||
* @private
|
||||
* @param rows
|
||||
*/
|
||||
TelemetryTableController.prototype.removeRowsFromTable = function (rows) {
|
||||
this.$scope.$broadcast('remove:rows', rows);
|
||||
};
|
||||
|
||||
/**
|
||||
* On Time Conductor bounds change, update displayed telemetry. In the
|
||||
* case of a tick, previously visible telemetry that is now out of band
|
||||
* will be removed from the table.
|
||||
* @param {openmct.TimeConductorBounds~TimeConductorBounds} bounds
|
||||
*/
|
||||
TelemetryTableController.prototype.changeBounds = function (bounds, isTick) {
|
||||
if (isTick) {
|
||||
this.telemetry.bounds(bounds);
|
||||
} else {
|
||||
// Is fixed bounds change
|
||||
this.getData();
|
||||
}
|
||||
this.lastBounds = bounds;
|
||||
};
|
||||
|
||||
/**
|
||||
* Clean controller, deregistering listeners etc.
|
||||
*/
|
||||
TelemetryTableController.prototype.destroy = function () {
|
||||
|
||||
this.openmct.time.off('timeSystem', this.sortByTimeSystem);
|
||||
this.openmct.time.off('bounds', this.changeBounds);
|
||||
this.openmct.time.off('clock', this.setClock);
|
||||
|
||||
this.subscriptions.forEach(function (subscription) {
|
||||
subscription();
|
||||
});
|
||||
|
||||
if (this.unobserveObject) {
|
||||
this.unobserveObject();
|
||||
}
|
||||
this.subscriptions = [];
|
||||
|
||||
if (this.timeoutHandle) {
|
||||
this.$timeout.cancel(this.timeoutHandle);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* For given objects, populate column metadata and table headers.
|
||||
* @private
|
||||
* @param {module:openmct.DomainObject[]} objects the domain objects for
|
||||
* which columns should be populated
|
||||
*/
|
||||
TelemetryTableController.prototype.loadColumns = function (objects) {
|
||||
var telemetryApi = this.openmct.telemetry;
|
||||
|
||||
this.table = new TableConfiguration(this.$scope.domainObject,
|
||||
this.openmct);
|
||||
|
||||
this.$scope.headers = [];
|
||||
|
||||
if (objects.length > 0) {
|
||||
objects.forEach(function (object) {
|
||||
var metadataValues = telemetryApi.getMetadata(object).values();
|
||||
metadataValues.forEach(function (metadatum) {
|
||||
this.table.addColumn(object, metadatum);
|
||||
}.bind(this));
|
||||
}.bind(this));
|
||||
|
||||
this.filterColumns();
|
||||
this.sortByTimeSystem();
|
||||
}
|
||||
|
||||
return objects;
|
||||
};
|
||||
|
||||
/**
|
||||
* Request telemetry data from an historical store for given objects.
|
||||
* @private
|
||||
* @param {object[]} The domain objects to request telemetry for
|
||||
* @returns {Promise} resolved when historical data is available
|
||||
*/
|
||||
TelemetryTableController.prototype.getHistoricalData = function (objects) {
|
||||
var self = this;
|
||||
var openmct = this.openmct;
|
||||
var bounds = openmct.time.bounds();
|
||||
var scope = this.$scope;
|
||||
var rowData = [];
|
||||
var processedObjects = 0;
|
||||
var requestTime = this.lastRequestTime = Date.now();
|
||||
var telemetryCollection = this.telemetry;
|
||||
|
||||
var promise = new Promise(function (resolve, reject) {
|
||||
/*
|
||||
* On completion of batched processing, set the rows on scope
|
||||
*/
|
||||
function finishProcessing() {
|
||||
telemetryCollection.add(rowData);
|
||||
scope.rows = telemetryCollection.telemetry;
|
||||
self.loading(false);
|
||||
|
||||
resolve(scope.rows);
|
||||
}
|
||||
|
||||
/*
|
||||
* Process a batch of historical data
|
||||
*/
|
||||
function processData(object, historicalData, index, limitEvaluator) {
|
||||
if (index >= historicalData.length) {
|
||||
processedObjects++;
|
||||
|
||||
if (processedObjects === objects.length) {
|
||||
finishProcessing();
|
||||
}
|
||||
} else {
|
||||
rowData = rowData.concat(historicalData.slice(index, index + self.batchSize)
|
||||
.map(self.table.getRowValues.bind(self.table, object, limitEvaluator)));
|
||||
/*
|
||||
Use timeout to yield process to other UI activities. On
|
||||
return, process next batch
|
||||
*/
|
||||
self.timeoutHandle = self.$timeout(function () {
|
||||
processData(object, historicalData, index + self.batchSize, limitEvaluator);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function makeTableRows(object, historicalData) {
|
||||
// Only process the most recent request
|
||||
if (requestTime === self.lastRequestTime) {
|
||||
var limitEvaluator = openmct.telemetry.limitEvaluator(object);
|
||||
processData(object, historicalData, 0, limitEvaluator);
|
||||
} else {
|
||||
resolve(rowData);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Use the telemetry API to request telemetry for a given object
|
||||
*/
|
||||
function requestData(object) {
|
||||
return openmct.telemetry.request(object, {
|
||||
start: bounds.start,
|
||||
end: bounds.end
|
||||
}).then(makeTableRows.bind(undefined, object))
|
||||
.catch(reject);
|
||||
}
|
||||
this.$timeout.cancel(this.timeoutHandle);
|
||||
|
||||
if (objects.length > 0) {
|
||||
objects.forEach(requestData);
|
||||
} else {
|
||||
self.loading(false);
|
||||
resolve([]);
|
||||
}
|
||||
}.bind(this));
|
||||
|
||||
return promise;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Subscribe to real-time data for the given objects.
|
||||
* @private
|
||||
* @param {object[]} objects The objects to subscribe to.
|
||||
*/
|
||||
TelemetryTableController.prototype.subscribeToNewData = function (objects) {
|
||||
var telemetryApi = this.openmct.telemetry;
|
||||
var telemetryCollection = this.telemetry;
|
||||
//Set table max length to avoid unbounded growth.
|
||||
var limitEvaluator;
|
||||
var table = this.table;
|
||||
|
||||
this.subscriptions.forEach(function (subscription) {
|
||||
subscription();
|
||||
});
|
||||
this.subscriptions = [];
|
||||
|
||||
function newData(domainObject, datum) {
|
||||
limitEvaluator = telemetryApi.limitEvaluator(domainObject);
|
||||
telemetryCollection.add([table.getRowValues(domainObject, limitEvaluator, datum)]);
|
||||
}
|
||||
|
||||
objects.forEach(function (object) {
|
||||
this.subscriptions.push(
|
||||
telemetryApi.subscribe(object, newData.bind(this, object), {}));
|
||||
}.bind(this));
|
||||
|
||||
return objects;
|
||||
};
|
||||
|
||||
/**
|
||||
* Return an array of telemetry objects in this view that should be
|
||||
* subscribed to.
|
||||
* @private
|
||||
* @returns {Promise<Array>} a promise that resolves with an array of
|
||||
* telemetry objects in this view.
|
||||
*/
|
||||
TelemetryTableController.prototype.getTelemetryObjects = function () {
|
||||
var telemetryApi = this.openmct.telemetry;
|
||||
var compositionApi = this.openmct.composition;
|
||||
|
||||
function filterForTelemetry(objects) {
|
||||
return objects.filter(telemetryApi.isTelemetryObject.bind(telemetryApi));
|
||||
}
|
||||
|
||||
/*
|
||||
* If parent object is a telemetry object, subscribe to it. Do not
|
||||
* test composees.
|
||||
*/
|
||||
if (telemetryApi.isTelemetryObject(this.domainObject)) {
|
||||
return Promise.resolve([this.domainObject]);
|
||||
} else {
|
||||
/*
|
||||
* If parent object is not a telemetry object, subscribe to all
|
||||
* composees that are telemetry producing objects.
|
||||
*/
|
||||
var composition = compositionApi.get(this.domainObject);
|
||||
|
||||
if (composition) {
|
||||
return composition
|
||||
.load()
|
||||
.then(filterForTelemetry);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Request historical data, and subscribe to for real-time data.
|
||||
* @private
|
||||
* @returns {Promise} A promise that is resolved once subscription is
|
||||
* established, and historical telemetry is received and processed.
|
||||
*/
|
||||
TelemetryTableController.prototype.getData = function () {
|
||||
var scope = this.$scope;
|
||||
|
||||
this.telemetry.clear();
|
||||
this.telemetry.bounds(this.openmct.time.bounds());
|
||||
|
||||
this.loading(true);
|
||||
scope.rows = [];
|
||||
|
||||
return this.getTelemetryObjects()
|
||||
.then(this.loadColumns)
|
||||
.then(this.subscribeToNewData)
|
||||
.then(this.getHistoricalData)
|
||||
.catch(function error(e) {
|
||||
this.loading(false);
|
||||
console.error(e.stack || e);
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
TelemetryTableController.prototype.loading = function (loading) {
|
||||
this.$timeout(function () {
|
||||
this.$scope.loading = loading;
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
/**
|
||||
* When column configuration changes, update the visible headers
|
||||
* accordingly.
|
||||
* @private
|
||||
*/
|
||||
TelemetryTableController.prototype.filterColumns = function () {
|
||||
var columnConfig = this.table.buildColumnConfiguration();
|
||||
|
||||
//Populate headers with visible columns (determined by configuration)
|
||||
this.$scope.headers = Object.keys(columnConfig).filter(function (column) {
|
||||
return columnConfig[column];
|
||||
});
|
||||
};
|
||||
|
||||
return TelemetryTableController;
|
||||
}
|
||||
);
|
||||
@@ -1,115 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[
|
||||
"../controllers/MCTTableController",
|
||||
"../../res/templates/mct-table.html"
|
||||
],
|
||||
function (MCTTableController, TableTemplate) {
|
||||
/**
|
||||
* Defines a generic 'Table' component. The table can be populated
|
||||
* en-masse by setting the rows attribute, or rows can be added as
|
||||
* needed via a broadcast 'addRow' event.
|
||||
*
|
||||
* This directive accepts parameters specifying header and row
|
||||
* content, as well as some additional options.
|
||||
*
|
||||
* Two broadcast events for notifying the table that the rows have
|
||||
* changed. For performance reasons, the table does not monitor the
|
||||
* content of `rows` constantly.
|
||||
* - 'add:row': A $broadcast event that will notify the table that
|
||||
* a new row has been added to the table.
|
||||
* eg.
|
||||
* <pre><code>
|
||||
* $scope.rows.push(newRow);
|
||||
* $scope.$broadcast('add:row', $scope.rows.length-1);
|
||||
* </code></pre>
|
||||
* The code above adds a new row, and alerts the table using the
|
||||
* add:row event. Sorting and filtering will be applied
|
||||
* automatically by the table component.
|
||||
*
|
||||
* - 'remove:row': A $broadcast event that will notify the table that a
|
||||
* row should be removed from the table.
|
||||
* eg.
|
||||
* <pre><code>
|
||||
* $scope.rows.slice(5, 1);
|
||||
* $scope.$broadcast('remove:row', 5);
|
||||
* </code></pre>
|
||||
* The code above removes a row from the rows array, and then alerts
|
||||
* the table to its removal.
|
||||
*
|
||||
* @memberof platform/features/table
|
||||
* @param {string[]} headers The column titles to appear at the top
|
||||
* of the table. Corresponding values are specified in the rows
|
||||
* using the header title provided here.
|
||||
* @param {Object[]} rows The row content. Each row is an object
|
||||
* with key-value pairs where the key corresponds to a header
|
||||
* specified in the headers parameter.
|
||||
* @param {boolean} enableFilter If true, values will be searchable
|
||||
* and results filtered
|
||||
* @param {boolean} enableSort If true, sorting will be enabled
|
||||
* allowing sorting by clicking on column headers
|
||||
* @param {boolean} autoScroll If true, table will automatically
|
||||
* scroll to the bottom as new data arrives. Auto-scroll can be
|
||||
* disengaged manually by scrolling away from the bottom of the
|
||||
* table, and can also be enabled manually by scrolling to the bottom of
|
||||
* the table rows.
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
function MCTTable() {
|
||||
return {
|
||||
restrict: "E",
|
||||
template: TableTemplate,
|
||||
controller: [
|
||||
'$scope',
|
||||
'$window',
|
||||
'$element',
|
||||
'exportService',
|
||||
'formatService',
|
||||
'openmct',
|
||||
MCTTableController
|
||||
],
|
||||
controllerAs: "table",
|
||||
scope: {
|
||||
headers: "=",
|
||||
rows: "=",
|
||||
formatCell: "=?",
|
||||
enableFilter: "=?",
|
||||
enableSort: "=?",
|
||||
autoScroll: "=?",
|
||||
// Used to indicate which columns contain time data. This
|
||||
// will be used for determining when the table is sorted
|
||||
// by the column that can be used for time conductor
|
||||
// time of interest.
|
||||
timeColumns: "=?",
|
||||
// Indicate a column to sort on. Allows control of sort
|
||||
// via configuration (eg. for default sort column).
|
||||
defaultSort: "=?"
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return MCTTable;
|
||||
}
|
||||
);
|
||||
@@ -1,214 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[
|
||||
"../src/TableConfiguration"
|
||||
],
|
||||
function (Table) {
|
||||
|
||||
describe("A table", function () {
|
||||
var mockTableObject,
|
||||
mockTelemetryObject,
|
||||
mockAPI,
|
||||
mockTelemetryAPI,
|
||||
table,
|
||||
mockTimeAPI,
|
||||
mockObjectsAPI,
|
||||
mockModel;
|
||||
|
||||
beforeEach(function () {
|
||||
mockTableObject = jasmine.createSpyObj('domainObject',
|
||||
['getModel', 'useCapability', 'getCapability', 'hasCapability']
|
||||
);
|
||||
mockModel = {};
|
||||
mockTableObject.getModel.and.returnValue(mockModel);
|
||||
mockTableObject.getCapability.and.callFake(function (name) {
|
||||
return name === 'editor' && {
|
||||
isEditContextRoot: function () {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
});
|
||||
mockTelemetryObject = {
|
||||
identifier: {
|
||||
namespace: 'mock',
|
||||
key: 'domainObject'
|
||||
}
|
||||
};
|
||||
|
||||
mockTelemetryAPI = jasmine.createSpyObj('telemetryAPI', [
|
||||
'getValueFormatter'
|
||||
]);
|
||||
mockTimeAPI = jasmine.createSpyObj('timeAPI', [
|
||||
'timeSystem'
|
||||
]);
|
||||
mockObjectsAPI = jasmine.createSpyObj('objectsAPI', [
|
||||
'makeKeyString'
|
||||
]);
|
||||
mockObjectsAPI.makeKeyString.and.callFake(function (identifier) {
|
||||
return [identifier.namespace, identifier.key].join(':');
|
||||
});
|
||||
|
||||
mockAPI = {
|
||||
telemetry: mockTelemetryAPI,
|
||||
time: mockTimeAPI,
|
||||
objects: mockObjectsAPI
|
||||
};
|
||||
mockTelemetryAPI.getValueFormatter.and.callFake(function (metadata) {
|
||||
var formatter = jasmine.createSpyObj(
|
||||
'telemetryFormatter:' + metadata.key,
|
||||
[
|
||||
'format',
|
||||
'parse'
|
||||
]
|
||||
);
|
||||
var getter = function (datum) {
|
||||
return datum[metadata.key];
|
||||
};
|
||||
formatter.format.and.callFake(getter);
|
||||
formatter.parse.and.callFake(getter);
|
||||
return formatter;
|
||||
});
|
||||
|
||||
table = new Table(mockTableObject, mockAPI);
|
||||
});
|
||||
|
||||
describe("Building columns from telemetry metadata", function () {
|
||||
var metadata = [
|
||||
{
|
||||
name: 'Range 1',
|
||||
key: 'range1',
|
||||
source: 'range1',
|
||||
hints: {
|
||||
range: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Range 2',
|
||||
key: 'range2',
|
||||
source: 'range2',
|
||||
hints: {
|
||||
range: 2
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Domain 1',
|
||||
key: 'domain1',
|
||||
source: 'domain1',
|
||||
format: 'utc',
|
||||
hints: {
|
||||
domain: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Domain 2',
|
||||
key: 'domain2',
|
||||
source: 'domain2',
|
||||
format: 'utc',
|
||||
hints: {
|
||||
domain: 2
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
beforeEach(function () {
|
||||
mockTimeAPI.timeSystem.and.returnValue({
|
||||
key: 'domain1'
|
||||
});
|
||||
metadata.forEach(function (metadatum) {
|
||||
table.addColumn(mockTelemetryObject, metadatum);
|
||||
});
|
||||
});
|
||||
|
||||
it("populates columns", function () {
|
||||
expect(table.columns.length).toBe(4);
|
||||
});
|
||||
|
||||
it("Produces headers for each column based on metadata name", function () {
|
||||
expect(table.headers.size).toBe(4);
|
||||
Array.from(table.headers.values).forEach(function (header, i) {
|
||||
expect(header).toEqual(metadata[i].name);
|
||||
});
|
||||
});
|
||||
|
||||
it("Provides a default configuration with all columns" +
|
||||
" visible", function () {
|
||||
var configuration = table.buildColumnConfiguration();
|
||||
|
||||
expect(configuration).toBeDefined();
|
||||
expect(Object.keys(configuration).every(function (key) {
|
||||
return configuration[key];
|
||||
}));
|
||||
});
|
||||
|
||||
it("Column configuration exposes persisted configuration", function () {
|
||||
var tableConfig,
|
||||
modelConfig = {
|
||||
table: {
|
||||
columns : {
|
||||
'Range 1': false
|
||||
}
|
||||
}
|
||||
};
|
||||
mockModel.configuration = modelConfig;
|
||||
|
||||
tableConfig = table.buildColumnConfiguration();
|
||||
|
||||
expect(tableConfig).toBeDefined();
|
||||
expect(tableConfig['Range 1']).toBe(false);
|
||||
});
|
||||
|
||||
describe('retrieving row values', function () {
|
||||
var datum,
|
||||
rowValues;
|
||||
|
||||
beforeEach(function () {
|
||||
datum = {
|
||||
'range1': 10,
|
||||
'range2': 20,
|
||||
'domain1': 0,
|
||||
'domain2': 1
|
||||
};
|
||||
var limitEvaluator = {
|
||||
evaluate: function () {
|
||||
return {
|
||||
"cssClass": "alarm-class"
|
||||
};
|
||||
}
|
||||
};
|
||||
rowValues = table.getRowValues(mockTelemetryObject, limitEvaluator, datum);
|
||||
});
|
||||
|
||||
it("Returns a value for every column", function () {
|
||||
expect(rowValues['Range 1'].text).toEqual(10);
|
||||
});
|
||||
|
||||
it("Applies appropriate css class if limit violated.", function () {
|
||||
expect(rowValues['Range 1'].cssClass).toEqual("alarm-class");
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
@@ -1,212 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[
|
||||
"../src/TelemetryCollection"
|
||||
],
|
||||
function (TelemetryCollection) {
|
||||
|
||||
describe("A telemetry collection", function () {
|
||||
|
||||
var collection;
|
||||
var telemetryObjects;
|
||||
var ms;
|
||||
var integerTextMap = ["ZERO", "ONE", "TWO", "THREE", "FOUR", "FIVE",
|
||||
"SIX", "SEVEN", "EIGHT", "NINE", "TEN", "ELEVEN"];
|
||||
|
||||
beforeEach(function () {
|
||||
telemetryObjects = [0,9,2,4,7,8,5,1,3,6].map(function (number) {
|
||||
ms = number * 1000;
|
||||
return {
|
||||
timestamp: ms,
|
||||
value: {
|
||||
integer: number,
|
||||
text: integerTextMap[number]
|
||||
}
|
||||
};
|
||||
});
|
||||
collection = new TelemetryCollection();
|
||||
});
|
||||
|
||||
it("Sorts inserted telemetry by specified field",
|
||||
function () {
|
||||
collection.sort('value.integer');
|
||||
collection.add(telemetryObjects);
|
||||
expect(collection.telemetry[0].value.integer).toBe(0);
|
||||
expect(collection.telemetry[1].value.integer).toBe(1);
|
||||
expect(collection.telemetry[2].value.integer).toBe(2);
|
||||
expect(collection.telemetry[3].value.integer).toBe(3);
|
||||
|
||||
collection.sort('value.text');
|
||||
expect(collection.telemetry[0].value.text).toBe("EIGHT");
|
||||
expect(collection.telemetry[1].value.text).toBe("FIVE");
|
||||
expect(collection.telemetry[2].value.text).toBe("FOUR");
|
||||
expect(collection.telemetry[3].value.text).toBe("NINE");
|
||||
}
|
||||
);
|
||||
|
||||
describe("on bounds change", function () {
|
||||
var discardedCallback;
|
||||
|
||||
beforeEach(function () {
|
||||
discardedCallback = jasmine.createSpy("discarded");
|
||||
collection.on("discarded", discardedCallback);
|
||||
collection.sort("timestamp");
|
||||
collection.add(telemetryObjects);
|
||||
collection.bounds({start: 5000, end: 8000});
|
||||
});
|
||||
|
||||
|
||||
it("emits an event indicating that telemetry has " +
|
||||
"been discarded", function () {
|
||||
expect(discardedCallback).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("discards telemetry data with a time stamp " +
|
||||
"before specified start bound", function () {
|
||||
var discarded = discardedCallback.calls.mostRecent().args[0];
|
||||
|
||||
// Expect 5 because as an optimization, the TelemetryCollection
|
||||
// will not consider telemetry values that exceed the upper
|
||||
// bounds. Arbitrary bounds changes in which the end bound is
|
||||
// decreased is assumed to require a new historical query, and
|
||||
// hence re-population of the collection anyway
|
||||
expect(discarded.length).toBe(5);
|
||||
expect(discarded[0].value.integer).toBe(0);
|
||||
expect(discarded[1].value.integer).toBe(1);
|
||||
expect(discarded[4].value.integer).toBe(4);
|
||||
});
|
||||
});
|
||||
|
||||
describe("when adding telemetry to a collection", function () {
|
||||
var addedCallback;
|
||||
beforeEach(function () {
|
||||
collection.sort("timestamp");
|
||||
collection.add(telemetryObjects);
|
||||
addedCallback = jasmine.createSpy("added");
|
||||
collection.on("added", addedCallback);
|
||||
});
|
||||
|
||||
it("emits an event",
|
||||
function () {
|
||||
var addedObject = {
|
||||
timestamp: 10000,
|
||||
value: {
|
||||
integer: 10,
|
||||
text: integerTextMap[10]
|
||||
}
|
||||
};
|
||||
collection.add([addedObject]);
|
||||
expect(addedCallback).toHaveBeenCalledWith([addedObject]);
|
||||
}
|
||||
);
|
||||
it("inserts in the correct order",
|
||||
function () {
|
||||
var addedObjectA = {
|
||||
timestamp: 10000,
|
||||
value: {
|
||||
integer: 10,
|
||||
text: integerTextMap[10]
|
||||
}
|
||||
};
|
||||
var addedObjectB = {
|
||||
timestamp: 11000,
|
||||
value: {
|
||||
integer: 11,
|
||||
text: integerTextMap[11]
|
||||
}
|
||||
};
|
||||
collection.add([addedObjectB, addedObjectA]);
|
||||
|
||||
expect(collection.telemetry[11]).toBe(addedObjectB);
|
||||
}
|
||||
);
|
||||
it("maintains insertion order in the case of duplicate time stamps",
|
||||
function () {
|
||||
var addedObjectA = {
|
||||
timestamp: 10000,
|
||||
value: {
|
||||
integer: 10,
|
||||
text: integerTextMap[10]
|
||||
}
|
||||
};
|
||||
var addedObjectB = {
|
||||
timestamp: 10000,
|
||||
value: {
|
||||
integer: 11,
|
||||
text: integerTextMap[11]
|
||||
}
|
||||
};
|
||||
collection.add([addedObjectA, addedObjectB]);
|
||||
|
||||
expect(collection.telemetry[11]).toBe(addedObjectB);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
describe("buffers telemetry", function () {
|
||||
var addedObjectA;
|
||||
var addedObjectB;
|
||||
|
||||
beforeEach(function () {
|
||||
collection.sort("timestamp");
|
||||
collection.add(telemetryObjects);
|
||||
|
||||
addedObjectA = {
|
||||
timestamp: 10000,
|
||||
value: {
|
||||
integer: 10,
|
||||
text: integerTextMap[10]
|
||||
}
|
||||
};
|
||||
addedObjectB = {
|
||||
timestamp: 11000,
|
||||
value: {
|
||||
integer: 11,
|
||||
text: integerTextMap[11]
|
||||
}
|
||||
};
|
||||
|
||||
collection.bounds({start: 0, end: 10000});
|
||||
collection.add([addedObjectA, addedObjectB]);
|
||||
});
|
||||
it("when it falls outside of bounds", function () {
|
||||
expect(collection.highBuffer).toBeDefined();
|
||||
expect(collection.highBuffer.length).toBe(1);
|
||||
expect(collection.highBuffer[0]).toBe(addedObjectB);
|
||||
});
|
||||
it("and adds it to collection when it falls within bounds", function () {
|
||||
expect(collection.telemetry.length).toBe(11);
|
||||
collection.bounds({start: 0, end: 11000});
|
||||
expect(collection.telemetry.length).toBe(12);
|
||||
expect(collection.telemetry[11]).toBe(addedObjectB);
|
||||
});
|
||||
it("and removes it from the buffer when it falls within bounds", function () {
|
||||
expect(collection.highBuffer.length).toBe(1);
|
||||
collection.bounds({start: 0, end: 11000});
|
||||
expect(collection.highBuffer.length).toBe(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
@@ -1,598 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[
|
||||
"zepto",
|
||||
"moment",
|
||||
"../../src/controllers/MCTTableController"
|
||||
],
|
||||
function ($, moment, MCTTableController) {
|
||||
|
||||
var MOCK_ELEMENT_TEMPLATE =
|
||||
'<div><div class="l-view-section t-scrolling">' +
|
||||
'<table class="sizing-table"><tbody></tbody></table>' +
|
||||
'<table class="mct-table"><thead></thead></table>' +
|
||||
'</div></div>';
|
||||
|
||||
describe('The MCTTable Controller', function () {
|
||||
|
||||
var controller,
|
||||
mockScope,
|
||||
watches,
|
||||
mockWindow,
|
||||
mockElement,
|
||||
mockExportService,
|
||||
mockConductor,
|
||||
mockFormatService,
|
||||
mockFormat;
|
||||
|
||||
function getCallback(target, event) {
|
||||
return target.calls.all().filter(function (call) {
|
||||
return call.args[0] === event;
|
||||
})[0].args[1];
|
||||
}
|
||||
|
||||
beforeEach(function () {
|
||||
watches = {};
|
||||
|
||||
mockScope = jasmine.createSpyObj('scope', [
|
||||
'$watch',
|
||||
'$on',
|
||||
'$watchCollection',
|
||||
'$digest'
|
||||
]);
|
||||
mockScope.$watchCollection.and.callFake(function (event, callback) {
|
||||
watches[event] = callback;
|
||||
});
|
||||
|
||||
mockElement = $(MOCK_ELEMENT_TEMPLATE);
|
||||
mockExportService = jasmine.createSpyObj('exportService', [
|
||||
'exportCSV'
|
||||
]);
|
||||
|
||||
mockConductor = jasmine.createSpyObj('conductor', [
|
||||
'bounds',
|
||||
'timeOfInterest',
|
||||
'timeSystem',
|
||||
'on',
|
||||
'off'
|
||||
]);
|
||||
|
||||
mockScope.displayHeaders = true;
|
||||
mockWindow = jasmine.createSpyObj('$window', ['requestAnimationFrame']);
|
||||
mockWindow.requestAnimationFrame.and.callFake(function (f) {
|
||||
return f();
|
||||
});
|
||||
|
||||
mockFormat = jasmine.createSpyObj('formatter', [
|
||||
'parse',
|
||||
'format'
|
||||
]);
|
||||
mockFormatService = jasmine.createSpyObj('formatService', [
|
||||
'getFormat'
|
||||
]);
|
||||
mockFormatService.getFormat.and.returnValue(mockFormat);
|
||||
|
||||
controller = new MCTTableController(
|
||||
mockScope,
|
||||
mockWindow,
|
||||
mockElement,
|
||||
mockExportService,
|
||||
mockFormatService,
|
||||
{time: mockConductor}
|
||||
);
|
||||
spyOn(controller, 'setVisibleRows').and.callThrough();
|
||||
});
|
||||
|
||||
it('Reacts to changes to filters, headers, and rows', function () {
|
||||
expect(mockScope.$watchCollection).toHaveBeenCalledWith('filters', jasmine.any(Function));
|
||||
expect(mockScope.$watch).toHaveBeenCalledWith('headers', jasmine.any(Function));
|
||||
expect(mockScope.$watch).toHaveBeenCalledWith('rows', jasmine.any(Function));
|
||||
});
|
||||
|
||||
it('unregisters listeners on destruction', function () {
|
||||
expect(mockScope.$on).toHaveBeenCalledWith('$destroy', jasmine.any(Function));
|
||||
getCallback(mockScope.$on, '$destroy')();
|
||||
|
||||
expect(mockConductor.off).toHaveBeenCalledWith('timeSystem', controller.changeTimeSystem);
|
||||
expect(mockConductor.off).toHaveBeenCalledWith('timeOfInterest', controller.changeTimeOfInterest);
|
||||
expect(mockConductor.off).toHaveBeenCalledWith('bounds', controller.changeBounds);
|
||||
});
|
||||
|
||||
describe('The time of interest', function () {
|
||||
var rowsAsc = [];
|
||||
var rowsDesc = [];
|
||||
beforeEach(function () {
|
||||
rowsAsc = [
|
||||
{
|
||||
'col1': {'text': 'row1 col1 match'},
|
||||
'col2': {'text': '2012-10-31 00:00:00.000Z'},
|
||||
'col3': {'text': 'row1 col3'}
|
||||
},
|
||||
{
|
||||
'col1': {'text': 'row2 col1 match'},
|
||||
'col2': {'text': '2012-11-01 00:00:00.000Z'},
|
||||
'col3': {'text': 'row2 col3'}
|
||||
},
|
||||
{
|
||||
'col1': {'text': 'row3 col1'},
|
||||
'col2': {'text': '2012-11-03 00:00:00.000Z'},
|
||||
'col3': {'text': 'row3 col3'}
|
||||
},
|
||||
{
|
||||
'col1': {'text': 'row3 col1'},
|
||||
'col2': {'text': '2012-11-04 00:00:00.000Z'},
|
||||
'col3': {'text': 'row3 col3'}
|
||||
}
|
||||
];
|
||||
rowsDesc = [
|
||||
{
|
||||
'col1': {'text': 'row1 col1 match'},
|
||||
'col2': {'text': '2012-11-02 00:00:00.000Z'},
|
||||
'col3': {'text': 'row1 col3'}
|
||||
},
|
||||
{
|
||||
'col1': {'text': 'row2 col1 match'},
|
||||
'col2': {'text': '2012-11-01 00:00:00.000Z'},
|
||||
'col3': {'text': 'row2 col3'}
|
||||
},
|
||||
{
|
||||
'col1': {'text': 'row3 col1'},
|
||||
'col2': {'text': '2012-10-30 00:00:00.000Z'},
|
||||
'col3': {'text': 'row3 col3'}
|
||||
},
|
||||
{
|
||||
'col1': {'text': 'row3 col1'},
|
||||
'col2': {'text': '2012-10-29 00:00:00.000Z'},
|
||||
'col3': {'text': 'row3 col3'}
|
||||
}
|
||||
];
|
||||
mockScope.timeColumns = ['col2'];
|
||||
mockScope.sortColumn = 'col2';
|
||||
controller.toiFormatter = mockFormat;
|
||||
});
|
||||
it("is observed for changes", function () {
|
||||
//Mock setting time columns
|
||||
getCallback(mockScope.$watch, 'timeColumns')(['col2']);
|
||||
|
||||
expect(mockConductor.on).toHaveBeenCalledWith('timeOfInterest',
|
||||
jasmine.any(Function));
|
||||
});
|
||||
describe("causes corresponding row to be highlighted", function () {
|
||||
it("when changed and rows sorted ascending", function () {
|
||||
var testDate = "2012-11-02 00:00:00.000Z";
|
||||
mockScope.rows = rowsAsc;
|
||||
mockScope.displayRows = rowsAsc;
|
||||
mockScope.sortDirection = 'asc';
|
||||
|
||||
var toi = moment.utc(testDate).valueOf();
|
||||
mockFormat.parse.and.returnValue(toi);
|
||||
mockFormat.format.and.returnValue(testDate);
|
||||
|
||||
//mock setting the timeColumns parameter
|
||||
getCallback(mockScope.$watch, 'timeColumns')(['col2']);
|
||||
|
||||
var toiCallback = getCallback(mockConductor.on, 'timeOfInterest');
|
||||
toiCallback(toi);
|
||||
|
||||
expect(mockScope.toiRowIndex).toBe(2);
|
||||
});
|
||||
it("when changed and rows sorted descending", function () {
|
||||
var testDate = "2012-10-31 00:00:00.000Z";
|
||||
mockScope.rows = rowsDesc;
|
||||
mockScope.displayRows = rowsDesc;
|
||||
mockScope.sortDirection = 'desc';
|
||||
|
||||
var toi = moment.utc(testDate).valueOf();
|
||||
mockFormat.parse.and.returnValue(toi);
|
||||
mockFormat.format.and.returnValue(testDate);
|
||||
|
||||
//mock setting the timeColumns parameter
|
||||
getCallback(mockScope.$watch, 'timeColumns')(['col2']);
|
||||
|
||||
var toiCallback = getCallback(mockConductor.on, 'timeOfInterest');
|
||||
toiCallback(toi);
|
||||
|
||||
expect(mockScope.toiRowIndex).toBe(2);
|
||||
});
|
||||
it("when rows are set and sorted ascending", function () {
|
||||
var testDate = "2012-11-02 00:00:00.000Z";
|
||||
mockScope.sortDirection = 'asc';
|
||||
|
||||
var toi = moment.utc(testDate).valueOf();
|
||||
mockFormat.parse.and.returnValue(toi);
|
||||
mockFormat.format.and.returnValue(testDate);
|
||||
mockConductor.timeOfInterest.and.returnValue(toi);
|
||||
|
||||
//mock setting the timeColumns parameter
|
||||
getCallback(mockScope.$watch, 'timeColumns')(['col2']);
|
||||
|
||||
//Mock setting the rows on scope
|
||||
var rowsCallback = getCallback(mockScope.$watch, 'rows');
|
||||
var setRowsPromise = rowsCallback(rowsAsc);
|
||||
|
||||
return setRowsPromise.then(function () {
|
||||
expect(mockScope.toiRowIndex).toBe(2);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
describe('rows', function () {
|
||||
var testRows = [];
|
||||
beforeEach(function () {
|
||||
testRows = [
|
||||
{
|
||||
'col1': {'text': 'row1 col1 match'},
|
||||
'col2': {'text': 'def'},
|
||||
'col3': {'text': 'row1 col3'}
|
||||
},
|
||||
{
|
||||
'col1': {'text': 'row2 col1 match'},
|
||||
'col2': {'text': 'abc'},
|
||||
'col3': {'text': 'row2 col3'}
|
||||
},
|
||||
{
|
||||
'col1': {'text': 'row3 col1'},
|
||||
'col2': {'text': 'ghi'},
|
||||
'col3': {'text': 'row3 col3'}
|
||||
}
|
||||
];
|
||||
mockScope.rows = testRows;
|
||||
});
|
||||
|
||||
it('Filters results based on filter input', function () {
|
||||
var filters = {},
|
||||
filteredRows;
|
||||
|
||||
mockScope.filters = filters;
|
||||
|
||||
filteredRows = controller.filterRows(testRows);
|
||||
expect(filteredRows.length).toBe(3);
|
||||
filters.col1 = 'row1';
|
||||
filteredRows = controller.filterRows(testRows);
|
||||
expect(filteredRows.length).toBe(1);
|
||||
filters.col1 = 'match';
|
||||
filteredRows = controller.filterRows(testRows);
|
||||
expect(filteredRows.length).toBe(2);
|
||||
});
|
||||
|
||||
it('Sets rows on scope when rows change', function () {
|
||||
controller.setRows(testRows);
|
||||
expect(mockScope.displayRows.length).toBe(3);
|
||||
expect(mockScope.displayRows).toEqual(testRows);
|
||||
});
|
||||
|
||||
it('Supports adding rows individually', function () {
|
||||
var addRowFunc = getCallback(mockScope.$on, 'add:rows'),
|
||||
row4 = {
|
||||
'col1': {'text': 'row3 col1'},
|
||||
'col2': {'text': 'ghi'},
|
||||
'col3': {'text': 'row3 col3'}
|
||||
};
|
||||
controller.setRows(testRows);
|
||||
expect(mockScope.displayRows.length).toBe(3);
|
||||
testRows.push(row4);
|
||||
addRowFunc(undefined, [row4]);
|
||||
expect(mockScope.displayRows.length).toBe(4);
|
||||
});
|
||||
|
||||
it('Supports removing rows individually', function () {
|
||||
var removeRowFunc = getCallback(mockScope.$on, 'remove:rows');
|
||||
controller.setRows(testRows);
|
||||
expect(mockScope.displayRows.length).toBe(3);
|
||||
removeRowFunc(undefined, [testRows[2]]);
|
||||
expect(mockScope.displayRows.length).toBe(2);
|
||||
expect(controller.setVisibleRows).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("can be exported as CSV", function () {
|
||||
controller.setRows(testRows);
|
||||
controller.setHeaders(Object.keys(testRows[0]));
|
||||
mockScope.exportAsCSV();
|
||||
expect(mockExportService.exportCSV)
|
||||
.toHaveBeenCalled();
|
||||
mockExportService.exportCSV.calls.mostRecent().args[0]
|
||||
.forEach(function (row, i) {
|
||||
Object.keys(row).forEach(function (k) {
|
||||
expect(row[k]).toEqual(
|
||||
mockScope.displayRows[i][k].text
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('sorting', function () {
|
||||
var sortedRows;
|
||||
|
||||
beforeEach(function () {
|
||||
sortedRows = [];
|
||||
});
|
||||
|
||||
it('Sorts rows ascending', function () {
|
||||
mockScope.sortColumn = 'col1';
|
||||
mockScope.sortDirection = 'asc';
|
||||
|
||||
sortedRows = controller.sortRows(testRows);
|
||||
expect(sortedRows[0].col1.text).toEqual('row1 col1 match');
|
||||
expect(sortedRows[1].col1.text).toEqual('row2 col1' +
|
||||
' match');
|
||||
expect(sortedRows[2].col1.text).toEqual('row3 col1');
|
||||
|
||||
});
|
||||
|
||||
it('Sorts rows descending', function () {
|
||||
mockScope.sortColumn = 'col1';
|
||||
mockScope.sortDirection = 'desc';
|
||||
|
||||
sortedRows = controller.sortRows(testRows);
|
||||
expect(sortedRows[0].col1.text).toEqual('row3 col1');
|
||||
expect(sortedRows[1].col1.text).toEqual('row2 col1 match');
|
||||
expect(sortedRows[2].col1.text).toEqual('row1 col1 match');
|
||||
});
|
||||
it('Sorts rows descending based on selected sort column', function () {
|
||||
mockScope.sortColumn = 'col2';
|
||||
mockScope.sortDirection = 'desc';
|
||||
|
||||
sortedRows = controller.sortRows(testRows);
|
||||
expect(sortedRows[0].col2.text).toEqual('ghi');
|
||||
expect(sortedRows[1].col2.text).toEqual('def');
|
||||
expect(sortedRows[2].col2.text).toEqual('abc');
|
||||
});
|
||||
|
||||
it('Allows sort column to be changed externally by ' +
|
||||
'setting or changing sortBy attribute', function () {
|
||||
mockScope.displayRows = testRows;
|
||||
var sortByCB = getCallback(mockScope.$watch, 'defaultSort');
|
||||
sortByCB('col2');
|
||||
|
||||
expect(mockScope.sortDirection).toEqual('asc');
|
||||
|
||||
expect(mockScope.displayRows[0].col2.text).toEqual('abc');
|
||||
expect(mockScope.displayRows[1].col2.text).toEqual('def');
|
||||
expect(mockScope.displayRows[2].col2.text).toEqual('ghi');
|
||||
|
||||
});
|
||||
|
||||
// https://github.com/nasa/openmct/issues/910
|
||||
it('updates visible rows in scope', function () {
|
||||
var oldRows;
|
||||
mockScope.rows = testRows;
|
||||
var setRowsPromise = controller.setRows(testRows);
|
||||
|
||||
oldRows = mockScope.visibleRows;
|
||||
mockScope.toggleSort('col2');
|
||||
|
||||
return setRowsPromise.then(function () {
|
||||
expect(mockScope.visibleRows).not.toEqual(oldRows);
|
||||
});
|
||||
});
|
||||
|
||||
it('correctly sorts rows of differing types', function () {
|
||||
mockScope.sortColumn = 'col2';
|
||||
mockScope.sortDirection = 'desc';
|
||||
|
||||
testRows.push({
|
||||
'col1': {'text': 'row4 col1'},
|
||||
'col2': {'text': '123'},
|
||||
'col3': {'text': 'row4 col3'}
|
||||
});
|
||||
testRows.push({
|
||||
'col1': {'text': 'row5 col1'},
|
||||
'col2': {'text': '456'},
|
||||
'col3': {'text': 'row5 col3'}
|
||||
});
|
||||
testRows.push({
|
||||
'col1': {'text': 'row5 col1'},
|
||||
'col2': {'text': ''},
|
||||
'col3': {'text': 'row5 col3'}
|
||||
});
|
||||
|
||||
sortedRows = controller.sortRows(testRows);
|
||||
expect(sortedRows[0].col2.text).toEqual('ghi');
|
||||
expect(sortedRows[1].col2.text).toEqual('def');
|
||||
expect(sortedRows[2].col2.text).toEqual('abc');
|
||||
|
||||
expect(sortedRows[sortedRows.length - 3].col2.text).toEqual('456');
|
||||
expect(sortedRows[sortedRows.length - 2].col2.text).toEqual('123');
|
||||
expect(sortedRows[sortedRows.length - 1].col2.text).toEqual('');
|
||||
});
|
||||
|
||||
describe('The sort comparator', function () {
|
||||
it('Correctly sorts different data types', function () {
|
||||
var val1 = "",
|
||||
val2 = "1",
|
||||
val3 = "2016-04-05 18:41:30.713Z",
|
||||
val4 = "1.1",
|
||||
val5 = "8.945520958175627e-13";
|
||||
mockScope.sortDirection = "asc";
|
||||
|
||||
expect(controller.sortComparator(val1, val2)).toEqual(-1);
|
||||
expect(controller.sortComparator(val3, val1)).toEqual(1);
|
||||
expect(controller.sortComparator(val3, val2)).toEqual(1);
|
||||
expect(controller.sortComparator(val4, val2)).toEqual(1);
|
||||
expect(controller.sortComparator(val2, val5)).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Adding new rows', function () {
|
||||
var row4,
|
||||
row5,
|
||||
row6;
|
||||
|
||||
beforeEach(function () {
|
||||
row4 = {
|
||||
'col1': {'text': 'row4 col1'},
|
||||
'col2': {'text': 'xyz'},
|
||||
'col3': {'text': 'row4 col3'}
|
||||
};
|
||||
row5 = {
|
||||
'col1': {'text': 'row5 col1'},
|
||||
'col2': {'text': 'aaa'},
|
||||
'col3': {'text': 'row5 col3'}
|
||||
};
|
||||
row6 = {
|
||||
'col1': {'text': 'row6 col1'},
|
||||
'col2': {'text': 'ggg'},
|
||||
'col3': {'text': 'row6 col3'}
|
||||
};
|
||||
});
|
||||
|
||||
it('Adds new rows at the correct sort position when' +
|
||||
' sorted ', function () {
|
||||
mockScope.sortColumn = 'col2';
|
||||
mockScope.sortDirection = 'desc';
|
||||
|
||||
mockScope.displayRows = controller.sortRows(testRows.slice(0));
|
||||
|
||||
controller.addRows(undefined, [row4, row5, row6, row6]);
|
||||
expect(mockScope.displayRows[0].col2.text).toEqual('xyz');
|
||||
expect(mockScope.displayRows[6].col2.text).toEqual('aaa');
|
||||
//Added a duplicate row
|
||||
expect(mockScope.displayRows[2].col2.text).toEqual('ggg');
|
||||
expect(mockScope.displayRows[3].col2.text).toEqual('ggg');
|
||||
});
|
||||
|
||||
it('Inserts duplicate values for sort column in order received when sorted descending', function () {
|
||||
mockScope.sortColumn = 'col2';
|
||||
mockScope.sortDirection = 'desc';
|
||||
|
||||
mockScope.displayRows = controller.sortRows(testRows.slice(0));
|
||||
|
||||
var row6b = {
|
||||
'col1': {'text': 'row6b col1'},
|
||||
'col2': {'text': 'ggg'},
|
||||
'col3': {'text': 'row6b col3'}
|
||||
};
|
||||
var row6c = {
|
||||
'col1': {'text': 'row6c col1'},
|
||||
'col2': {'text': 'ggg'},
|
||||
'col3': {'text': 'row6c col3'}
|
||||
};
|
||||
|
||||
controller.addRows(undefined, [row4, row5]);
|
||||
controller.addRows(undefined, [row6, row6b, row6c]);
|
||||
expect(mockScope.displayRows[0].col2.text).toEqual('xyz');
|
||||
expect(mockScope.displayRows[7].col2.text).toEqual('aaa');
|
||||
|
||||
// Added duplicate rows
|
||||
expect(mockScope.displayRows[2].col2.text).toEqual('ggg');
|
||||
expect(mockScope.displayRows[3].col2.text).toEqual('ggg');
|
||||
expect(mockScope.displayRows[4].col2.text).toEqual('ggg');
|
||||
|
||||
// Check that original order is maintained with dupes
|
||||
expect(mockScope.displayRows[2].col3.text).toEqual('row6c col3');
|
||||
expect(mockScope.displayRows[3].col3.text).toEqual('row6b col3');
|
||||
expect(mockScope.displayRows[4].col3.text).toEqual('row6 col3');
|
||||
});
|
||||
|
||||
it('Inserts duplicate values for sort column in order received when sorted ascending', function () {
|
||||
mockScope.sortColumn = 'col2';
|
||||
mockScope.sortDirection = 'asc';
|
||||
|
||||
mockScope.displayRows = controller.sortRows(testRows.slice(0));
|
||||
|
||||
var row6b = {
|
||||
'col1': {'text': 'row6b col1'},
|
||||
'col2': {'text': 'ggg'},
|
||||
'col3': {'text': 'row6b col3'}
|
||||
};
|
||||
var row6c = {
|
||||
'col1': {'text': 'row6c col1'},
|
||||
'col2': {'text': 'ggg'},
|
||||
'col3': {'text': 'row6c col3'}
|
||||
};
|
||||
|
||||
controller.addRows(undefined, [row4, row5, row6]);
|
||||
controller.addRows(undefined, [row6b, row6c]);
|
||||
expect(mockScope.displayRows[0].col2.text).toEqual('aaa');
|
||||
expect(mockScope.displayRows[7].col2.text).toEqual('xyz');
|
||||
|
||||
// Added duplicate rows
|
||||
expect(mockScope.displayRows[3].col2.text).toEqual('ggg');
|
||||
expect(mockScope.displayRows[4].col2.text).toEqual('ggg');
|
||||
expect(mockScope.displayRows[5].col2.text).toEqual('ggg');
|
||||
// Check that original order is maintained with dupes
|
||||
expect(mockScope.displayRows[3].col3.text).toEqual('row6 col3');
|
||||
expect(mockScope.displayRows[4].col3.text).toEqual('row6b col3');
|
||||
expect(mockScope.displayRows[5].col3.text).toEqual('row6c col3');
|
||||
});
|
||||
|
||||
it('Adds new rows at the correct sort position when' +
|
||||
' sorted and filtered', function () {
|
||||
mockScope.sortColumn = 'col2';
|
||||
mockScope.sortDirection = 'desc';
|
||||
mockScope.filters = {'col2': 'a'};//Include only
|
||||
// rows with 'a'
|
||||
|
||||
mockScope.displayRows = controller.sortRows(testRows.slice(0));
|
||||
mockScope.displayRows = controller.filterRows(testRows);
|
||||
|
||||
controller.addRows(undefined, [row5]);
|
||||
expect(mockScope.displayRows.length).toBe(2);
|
||||
expect(mockScope.displayRows[1].col2.text).toEqual('aaa');
|
||||
|
||||
controller.addRows(undefined, [row6]);
|
||||
expect(mockScope.displayRows.length).toBe(2);
|
||||
//Row was not added because does not match filter
|
||||
});
|
||||
|
||||
it('Adds new rows at the correct sort position when' +
|
||||
' not sorted ', function () {
|
||||
mockScope.sortColumn = undefined;
|
||||
mockScope.sortDirection = undefined;
|
||||
mockScope.filters = {};
|
||||
|
||||
mockScope.displayRows = testRows.slice(0);
|
||||
|
||||
controller.addRows(undefined, [row5]);
|
||||
expect(mockScope.displayRows[3].col2.text).toEqual('aaa');
|
||||
|
||||
controller.addRows(undefined, [row6]);
|
||||
expect(mockScope.displayRows[4].col2.text).toEqual('ggg');
|
||||
});
|
||||
|
||||
it('Resizes columns if length of any columns in new' +
|
||||
' row exceeds corresponding existing column', function () {
|
||||
var row7 = {
|
||||
'col1': {'text': 'row6 col1'},
|
||||
'col2': {'text': 'some longer string'},
|
||||
'col3': {'text': 'row6 col3'}
|
||||
};
|
||||
|
||||
mockScope.sortColumn = undefined;
|
||||
mockScope.sortDirection = undefined;
|
||||
mockScope.filters = {};
|
||||
|
||||
mockScope.displayRows = testRows.slice(0);
|
||||
|
||||
controller.addRows(undefined, [row7]);
|
||||
expect(controller.$scope.sizingRow.col2).toEqual({text: 'some longer string'});
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,113 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[
|
||||
"../../src/controllers/TableOptionsController"
|
||||
],
|
||||
function (TableOptionsController) {
|
||||
|
||||
describe('The Table Options Controller', function () {
|
||||
var mockDomainObject,
|
||||
mockCapability,
|
||||
controller,
|
||||
mockScope;
|
||||
|
||||
beforeEach(function () {
|
||||
mockCapability = jasmine.createSpyObj('mutationCapability', [
|
||||
'listen'
|
||||
]);
|
||||
mockDomainObject = jasmine.createSpyObj('domainObject', [
|
||||
'getCapability',
|
||||
'getModel'
|
||||
]);
|
||||
mockDomainObject.getCapability.and.returnValue(mockCapability);
|
||||
mockDomainObject.getModel.and.returnValue({});
|
||||
|
||||
mockScope = jasmine.createSpyObj('scope', [
|
||||
'$watchCollection',
|
||||
'$watch',
|
||||
'$on'
|
||||
]);
|
||||
mockScope.domainObject = mockDomainObject;
|
||||
|
||||
controller = new TableOptionsController(mockScope);
|
||||
});
|
||||
|
||||
it('Listens for changing domain object', function () {
|
||||
expect(mockScope.$watch).toHaveBeenCalledWith('domainObject', jasmine.any(Function));
|
||||
});
|
||||
|
||||
it('On destruction of controller, destroys listeners', function () {
|
||||
var unlistenFunc = jasmine.createSpy("unlisten");
|
||||
controller.listeners.push(unlistenFunc);
|
||||
expect(mockScope.$on).toHaveBeenCalledWith('$destroy', jasmine.any(Function));
|
||||
mockScope.$on.calls.mostRecent().args[1]();
|
||||
expect(unlistenFunc).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Registers a listener for mutation events on the object', function () {
|
||||
mockScope.$watch.calls.mostRecent().args[1](mockDomainObject);
|
||||
expect(mockCapability.listen).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Listens for changes to object composition and updates' +
|
||||
' options accordingly', function () {
|
||||
expect(mockScope.$watchCollection).toHaveBeenCalledWith('configuration.table.columns', jasmine.any(Function));
|
||||
});
|
||||
|
||||
describe('Populates scope with a form definition based on provided' +
|
||||
' column configuration', function () {
|
||||
var mockModel;
|
||||
|
||||
beforeEach(function () {
|
||||
mockModel = {
|
||||
configuration: {
|
||||
table: {
|
||||
columns: {
|
||||
'column1': true,
|
||||
'column2': true,
|
||||
'column3': false,
|
||||
'column4': true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
controller.populateForm(mockModel);
|
||||
});
|
||||
|
||||
it('creates form on scope', function () {
|
||||
expect(mockScope.columnsForm).toBeDefined();
|
||||
expect(mockScope.columnsForm.sections[0]).toBeDefined();
|
||||
expect(mockScope.columnsForm.sections[0].rows).toBeDefined();
|
||||
expect(mockScope.columnsForm.sections[0].rows.length).toBe(4);
|
||||
});
|
||||
|
||||
it('presents columns as checkboxes', function () {
|
||||
expect(mockScope.columnsForm.sections[0].rows.every(function (row) {
|
||||
return row.control === 'checkbox';
|
||||
})).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
@@ -1,417 +0,0 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[
|
||||
'../../src/controllers/TelemetryTableController',
|
||||
'../../../../../src/api/objects/object-utils',
|
||||
'lodash'
|
||||
],
|
||||
function (TelemetryTableController, objectUtils, _) {
|
||||
|
||||
describe('The TelemetryTableController', function () {
|
||||
|
||||
var controller,
|
||||
mockScope,
|
||||
mockTimeout,
|
||||
mockConductor,
|
||||
mockAPI,
|
||||
mockDomainObject,
|
||||
mockTelemetryAPI,
|
||||
mockObjectAPI,
|
||||
mockCompositionAPI,
|
||||
unobserve,
|
||||
mockBounds;
|
||||
|
||||
function getCallback(target, event) {
|
||||
return target.calls.all().filter(function (call) {
|
||||
return call.args[0] === event;
|
||||
})[0].args[1];
|
||||
}
|
||||
|
||||
beforeEach(function () {
|
||||
mockBounds = {
|
||||
start: 0,
|
||||
end: 10
|
||||
};
|
||||
mockConductor = jasmine.createSpyObj("conductor", [
|
||||
"bounds",
|
||||
"clock",
|
||||
"on",
|
||||
"off",
|
||||
"timeSystem"
|
||||
]);
|
||||
mockConductor.bounds.and.returnValue(mockBounds);
|
||||
mockConductor.clock.and.returnValue(undefined);
|
||||
|
||||
mockDomainObject = jasmine.createSpyObj("domainObject", [
|
||||
"getModel",
|
||||
"getId",
|
||||
"useCapability",
|
||||
"hasCapability"
|
||||
]);
|
||||
mockDomainObject.getModel.and.returnValue({});
|
||||
mockDomainObject.getId.and.returnValue("mockId");
|
||||
mockDomainObject.useCapability.and.returnValue(true);
|
||||
|
||||
mockCompositionAPI = jasmine.createSpyObj("compositionAPI", [
|
||||
"get"
|
||||
]);
|
||||
|
||||
mockObjectAPI = jasmine.createSpyObj("objectAPI", [
|
||||
"observe",
|
||||
"makeKeyString"
|
||||
]);
|
||||
unobserve = jasmine.createSpy("unobserve");
|
||||
mockObjectAPI.observe.and.returnValue(unobserve);
|
||||
|
||||
mockScope = jasmine.createSpyObj("scope", [
|
||||
"$on",
|
||||
"$watch",
|
||||
"$broadcast"
|
||||
]);
|
||||
mockScope.domainObject = mockDomainObject;
|
||||
|
||||
mockTelemetryAPI = jasmine.createSpyObj("telemetryAPI", [
|
||||
"isTelemetryObject",
|
||||
"subscribe",
|
||||
"getMetadata",
|
||||
"commonValuesForHints",
|
||||
"request",
|
||||
"limitEvaluator",
|
||||
"getValueFormatter"
|
||||
]);
|
||||
mockTelemetryAPI.commonValuesForHints.and.returnValue([]);
|
||||
mockTelemetryAPI.request.and.returnValue(Promise.resolve([]));
|
||||
mockTelemetryAPI.getMetadata.and.returnValue({
|
||||
values: function () {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
mockTelemetryAPI.getValueFormatter.and.callFake(function (metadata) {
|
||||
var formatter = jasmine.createSpyObj(
|
||||
'telemetryFormatter:' + metadata.key,
|
||||
[
|
||||
'format',
|
||||
'parse'
|
||||
]
|
||||
);
|
||||
var getter = function (datum) {
|
||||
return datum[metadata.key];
|
||||
};
|
||||
formatter.format.and.callFake(getter);
|
||||
formatter.parse.and.callFake(getter);
|
||||
return formatter;
|
||||
});
|
||||
|
||||
mockTelemetryAPI.isTelemetryObject.and.returnValue(false);
|
||||
|
||||
mockTimeout = jasmine.createSpy("timeout");
|
||||
mockTimeout.and.returnValue(1); // Return something
|
||||
mockTimeout.cancel = jasmine.createSpy("cancel");
|
||||
|
||||
mockAPI = {
|
||||
time: mockConductor,
|
||||
objects: mockObjectAPI,
|
||||
telemetry: mockTelemetryAPI,
|
||||
composition: mockCompositionAPI
|
||||
};
|
||||
controller = new TelemetryTableController(mockScope, mockTimeout, mockAPI);
|
||||
});
|
||||
|
||||
describe('listens for', function () {
|
||||
beforeEach(function () {
|
||||
controller.registerChangeListeners();
|
||||
});
|
||||
it('object mutation', function () {
|
||||
var calledObject = mockObjectAPI.observe.calls.mostRecent().args[0];
|
||||
|
||||
expect(mockObjectAPI.observe).toHaveBeenCalled();
|
||||
expect(calledObject.identifier.key).toEqual(mockDomainObject.getId());
|
||||
});
|
||||
it('conductor changes', function () {
|
||||
expect(mockConductor.on).toHaveBeenCalledWith("timeSystem", jasmine.any(Function));
|
||||
expect(mockConductor.on).toHaveBeenCalledWith("bounds", jasmine.any(Function));
|
||||
expect(mockConductor.on).toHaveBeenCalledWith("clock", jasmine.any(Function));
|
||||
});
|
||||
});
|
||||
|
||||
describe('deregisters all listeners on scope destruction', function () {
|
||||
var timeSystemListener,
|
||||
boundsListener,
|
||||
clockListener;
|
||||
|
||||
beforeEach(function () {
|
||||
controller.registerChangeListeners();
|
||||
|
||||
timeSystemListener = getCallback(mockConductor.on, "timeSystem");
|
||||
boundsListener = getCallback(mockConductor.on, "bounds");
|
||||
clockListener = getCallback(mockConductor.on, "clock");
|
||||
|
||||
var destroy = getCallback(mockScope.$on, "$destroy");
|
||||
destroy();
|
||||
});
|
||||
|
||||
it('object mutation', function () {
|
||||
expect(unobserve).toHaveBeenCalled();
|
||||
});
|
||||
it('conductor changes', function () {
|
||||
expect(mockConductor.off).toHaveBeenCalledWith("timeSystem", timeSystemListener);
|
||||
expect(mockConductor.off).toHaveBeenCalledWith("bounds", boundsListener);
|
||||
expect(mockConductor.off).toHaveBeenCalledWith("clock", clockListener);
|
||||
});
|
||||
});
|
||||
|
||||
describe ('when getting telemetry', function () {
|
||||
var mockComposition,
|
||||
mockTelemetryObject,
|
||||
mockChildren,
|
||||
unsubscribe;
|
||||
|
||||
beforeEach(function () {
|
||||
mockComposition = jasmine.createSpyObj("composition", [
|
||||
"load"
|
||||
]);
|
||||
|
||||
mockTelemetryObject = {};
|
||||
mockTelemetryObject.identifier = {
|
||||
key: "mockTelemetryObject"
|
||||
};
|
||||
|
||||
unsubscribe = jasmine.createSpy("unsubscribe");
|
||||
mockTelemetryAPI.subscribe.and.returnValue(unsubscribe);
|
||||
|
||||
mockChildren = [mockTelemetryObject];
|
||||
mockComposition.load.and.returnValue(Promise.resolve(mockChildren));
|
||||
mockCompositionAPI.get.and.returnValue(mockComposition);
|
||||
|
||||
mockTelemetryAPI.isTelemetryObject.and.callFake(function (obj) {
|
||||
return obj.identifier.key === mockTelemetryObject.identifier.key;
|
||||
});
|
||||
});
|
||||
|
||||
it('fetches historical data for the time period specified by the conductor bounds', function () {
|
||||
return controller.getData().then(function () {
|
||||
expect(mockTelemetryAPI.request).toHaveBeenCalledWith(mockTelemetryObject, mockBounds);
|
||||
});
|
||||
});
|
||||
|
||||
it('unsubscribes on view destruction', function () {
|
||||
return controller.getData().then(function () {
|
||||
var destroy = getCallback(mockScope.$on, "$destroy");
|
||||
destroy();
|
||||
|
||||
expect(unsubscribe).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
it('fetches historical data for the time period specified by the conductor bounds', function () {
|
||||
return controller.getData().then(function () {
|
||||
expect(mockTelemetryAPI.request).toHaveBeenCalledWith(mockTelemetryObject, mockBounds);
|
||||
});
|
||||
});
|
||||
|
||||
it('fetches data for, and subscribes to parent object if it is a telemetry object', function () {
|
||||
return controller.getData().then(function () {
|
||||
expect(mockTelemetryAPI.subscribe).toHaveBeenCalledWith(mockTelemetryObject, jasmine.any(Function), {});
|
||||
expect(mockTelemetryAPI.request).toHaveBeenCalledWith(mockTelemetryObject, jasmine.any(Object));
|
||||
});
|
||||
});
|
||||
it('fetches data for, and subscribes to parent object if it is a telemetry object', function () {
|
||||
return controller.getData().then(function () {
|
||||
expect(mockTelemetryAPI.subscribe).toHaveBeenCalledWith(mockTelemetryObject, jasmine.any(Function), {});
|
||||
expect(mockTelemetryAPI.request).toHaveBeenCalledWith(mockTelemetryObject, jasmine.any(Object));
|
||||
});
|
||||
});
|
||||
|
||||
it('fetches data for, and subscribes to any composees that are telemetry objects if parent is not', function () {
|
||||
mockChildren = [
|
||||
{name: "child 1"}
|
||||
];
|
||||
var mockTelemetryChildren = [
|
||||
{name: "child 2"},
|
||||
{name: "child 3"},
|
||||
{name: "child 4"}
|
||||
];
|
||||
mockChildren = mockChildren.concat(mockTelemetryChildren);
|
||||
mockComposition.load.and.returnValue(Promise.resolve(mockChildren));
|
||||
|
||||
mockTelemetryAPI.isTelemetryObject.and.callFake(function (object) {
|
||||
if (object === mockTelemetryObject) {
|
||||
return false;
|
||||
} else {
|
||||
return mockTelemetryChildren.indexOf(object) !== -1;
|
||||
}
|
||||
});
|
||||
|
||||
return controller.getData().then(function () {
|
||||
mockTelemetryChildren.forEach(function (child) {
|
||||
expect(mockTelemetryAPI.subscribe).toHaveBeenCalledWith(child, jasmine.any(Function), {});
|
||||
});
|
||||
|
||||
mockTelemetryChildren.forEach(function (child) {
|
||||
expect(mockTelemetryAPI.request).toHaveBeenCalledWith(child, jasmine.any(Object));
|
||||
});
|
||||
|
||||
expect(mockTelemetryAPI.subscribe).not.toHaveBeenCalledWith(mockChildren[0], jasmine.any(Function), {});
|
||||
expect(mockTelemetryAPI.subscribe).not.toHaveBeenCalledWith(mockTelemetryObject[0], jasmine.any(Function), {});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('When in real-time mode, enables auto-scroll', function () {
|
||||
controller.registerChangeListeners();
|
||||
|
||||
var clockCallback = getCallback(mockConductor.on, "clock");
|
||||
//Confirm pre-condition
|
||||
expect(mockScope.autoScroll).toBeFalsy();
|
||||
|
||||
//Mock setting the a clock in the Time API
|
||||
clockCallback({});
|
||||
expect(mockScope.autoScroll).toBe(true);
|
||||
});
|
||||
|
||||
describe('populates table columns', function () {
|
||||
var allMetadata;
|
||||
var mockTimeSystem1;
|
||||
var mockTimeSystem2;
|
||||
|
||||
beforeEach(function () {
|
||||
allMetadata = [{
|
||||
key: "column1",
|
||||
name: "Column 1",
|
||||
hints: {
|
||||
domain: 1
|
||||
}
|
||||
}, {
|
||||
key: "column2",
|
||||
name: "Column 2",
|
||||
hints: {
|
||||
domain: 2
|
||||
}
|
||||
}, {
|
||||
key: "column3",
|
||||
name: "Column 3",
|
||||
hints: {}
|
||||
}];
|
||||
|
||||
mockTimeSystem1 = {
|
||||
key: "column1"
|
||||
};
|
||||
mockTimeSystem2 = {
|
||||
key: "column2"
|
||||
};
|
||||
|
||||
mockConductor.timeSystem.and.returnValue(mockTimeSystem1);
|
||||
|
||||
mockTelemetryAPI.getMetadata.and.returnValue({
|
||||
values: function () {
|
||||
return allMetadata;
|
||||
}
|
||||
});
|
||||
|
||||
controller.loadColumns([mockDomainObject]);
|
||||
});
|
||||
|
||||
it('based on metadata for given objects', function () {
|
||||
expect(mockScope.headers).toBeDefined();
|
||||
expect(mockScope.headers.length).toBeGreaterThan(0);
|
||||
expect(mockScope.headers.indexOf(allMetadata[0].name)).not.toBe(-1);
|
||||
expect(mockScope.headers.indexOf(allMetadata[1].name)).not.toBe(-1);
|
||||
expect(mockScope.headers.indexOf(allMetadata[2].name)).not.toBe(-1);
|
||||
});
|
||||
|
||||
it('and sorts by column matching time system', function () {
|
||||
expect(mockScope.defaultSort).toEqual("Column 1");
|
||||
|
||||
mockConductor.timeSystem.and.returnValue(mockTimeSystem2);
|
||||
controller.sortByTimeSystem();
|
||||
|
||||
expect(mockScope.defaultSort).toEqual("Column 2");
|
||||
});
|
||||
|
||||
it('batches processing of rows for performance when receiving historical telemetry', function () {
|
||||
var mockHistoricalData = [
|
||||
{
|
||||
"column1": 1,
|
||||
"column2": 2,
|
||||
"column3": 3
|
||||
},{
|
||||
"column1": 4,
|
||||
"column2": 5,
|
||||
"column3": 6
|
||||
}, {
|
||||
"column1": 7,
|
||||
"column2": 8,
|
||||
"column3": 9
|
||||
}
|
||||
];
|
||||
|
||||
controller.batchSize = 2;
|
||||
mockTelemetryAPI.request.and.returnValue(Promise.resolve(mockHistoricalData));
|
||||
controller.getHistoricalData([mockDomainObject]);
|
||||
|
||||
return new Promise(function (resolve) {
|
||||
mockTimeout.and.callFake(function () {
|
||||
resolve();
|
||||
});
|
||||
}).then(function () {
|
||||
mockTimeout.calls.mostRecent().args[0]();
|
||||
expect(mockTimeout.calls.count()).toBe(2);
|
||||
mockTimeout.calls.mostRecent().args[0]();
|
||||
expect(mockScope.rows.length).toBe(3);
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('Removes telemetry rows from table when they fall out of bounds', function () {
|
||||
var discardedRows = [
|
||||
{"column1": "value 1"},
|
||||
{"column2": "value 2"},
|
||||
{"column3": "value 3"}
|
||||
];
|
||||
|
||||
spyOn(controller.telemetry, "on").and.callThrough();
|
||||
|
||||
controller.registerChangeListeners();
|
||||
expect(controller.telemetry.on).toHaveBeenCalledWith("discarded", jasmine.any(Function));
|
||||
var onDiscard = getCallback(controller.telemetry.on, "discarded");
|
||||
onDiscard(discardedRows);
|
||||
expect(mockScope.$broadcast).toHaveBeenCalledWith("remove:rows", discardedRows);
|
||||
});
|
||||
|
||||
describe('when telemetry is added', function () {
|
||||
var testRows;
|
||||
|
||||
beforeEach(function () {
|
||||
testRows = [{ a: 0 }, { a: 1 }, { a: 2 }];
|
||||
|
||||
controller.registerChangeListeners();
|
||||
controller.telemetry.add(testRows);
|
||||
});
|
||||
|
||||
it("Adds the rows to the MCTTable directive", function () {
|
||||
expect(mockScope.$broadcast).toHaveBeenCalledWith("add:rows", testRows);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -93,7 +93,7 @@ define([
|
||||
|
||||
// Initialize the application
|
||||
$log.info("Initializing application.");
|
||||
initializer.runApplication();
|
||||
return initializer.runApplication();
|
||||
};
|
||||
|
||||
return FrameworkLayer;
|
||||
|
||||
@@ -52,10 +52,7 @@ define(
|
||||
return match ? match[1] : "";
|
||||
}
|
||||
|
||||
|
||||
// Reconfigure base url, since bundle paths will all be relative
|
||||
// to the root now.
|
||||
injector.instantiate(['$http', '$log', FrameworkLayer])
|
||||
return injector.instantiate(['$http', '$log', FrameworkLayer])
|
||||
.initializeApplication(angular, legacyRegistry, logLevel());
|
||||
};
|
||||
|
||||
|
||||
@@ -55,9 +55,12 @@ define(
|
||||
var angular = this.angular,
|
||||
document = this.document,
|
||||
$log = this.$log;
|
||||
$log.info("Bootstrapping application " + (app || {}).name);
|
||||
angular.element(document).ready(function () {
|
||||
angular.bootstrap(document, [app.name], { strictDi: true });
|
||||
return new Promise(function (resolve, reject) {
|
||||
$log.info("Bootstrapping application " + (app || {}).name);
|
||||
angular.element(document).ready(function () {
|
||||
angular.bootstrap(document, [app.name], { strictDi: true });
|
||||
resolve(angular);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -44,6 +44,7 @@ define(function () {
|
||||
function SearchController($scope, searchService) {
|
||||
var controller = this;
|
||||
this.$scope = $scope;
|
||||
this.$scope.ngModel = this.$scope.ngModel || {};
|
||||
this.searchService = searchService;
|
||||
this.numberToDisplay = this.RESULTS_PER_PAGE;
|
||||
this.availabileResults = 0;
|
||||
|
||||
78
src/MCT.js
78
src/MCT.js
@@ -24,28 +24,42 @@ define([
|
||||
'EventEmitter',
|
||||
'legacyRegistry',
|
||||
'uuid',
|
||||
'./defaultRegistry',
|
||||
'./api/api',
|
||||
'./selection/Selection',
|
||||
'./api/objects/object-utils',
|
||||
'./plugins/plugins',
|
||||
'./ui/ViewRegistry',
|
||||
'./ui/InspectorViewRegistry',
|
||||
'./ui/ToolbarRegistry',
|
||||
'./adapter/indicators/legacy-indicators-plugin',
|
||||
'./styles/core.scss'
|
||||
'./plugins/buildInfo/plugin',
|
||||
'./adapter/vue-adapter/install',
|
||||
'./ui/registries/ViewRegistry',
|
||||
'./ui/registries/InspectorViewRegistry',
|
||||
'./ui/registries/ToolbarRegistry',
|
||||
'./ui/router/ApplicationRouter',
|
||||
'../platform/framework/src/Main',
|
||||
'./styles-new/core.scss',
|
||||
'./ui/components/layout/Layout.vue',
|
||||
'vue'
|
||||
], function (
|
||||
EventEmitter,
|
||||
legacyRegistry,
|
||||
uuid,
|
||||
defaultRegistry,
|
||||
api,
|
||||
Selection,
|
||||
objectUtils,
|
||||
plugins,
|
||||
LegacyIndicatorsPlugin,
|
||||
buildInfoPlugin,
|
||||
installVueAdapter,
|
||||
ViewRegistry,
|
||||
InspectorViewRegistry,
|
||||
ToolbarRegistry,
|
||||
LegacyIndicatorsPlugin,
|
||||
coreStyles
|
||||
ApplicationRouter,
|
||||
Main,
|
||||
coreStyles,
|
||||
Layout,
|
||||
Vue
|
||||
) {
|
||||
/**
|
||||
* Open MCT is an extensible web application for building mission
|
||||
@@ -207,6 +221,14 @@ define([
|
||||
|
||||
this.Dialog = api.Dialog;
|
||||
|
||||
this.legacyRegistry = defaultRegistry;
|
||||
this.install(this.plugins.Plot());
|
||||
this.install(this.plugins.TelemetryTable());
|
||||
|
||||
if (typeof BUILD_CONSTANTS !== 'undefined') {
|
||||
this.install(buildInfoPlugin(BUILD_CONSTANTS));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MCT.prototype = Object.create(EventEmitter.prototype);
|
||||
@@ -245,11 +267,6 @@ define([
|
||||
domElement = document.body;
|
||||
}
|
||||
|
||||
var appDiv = document.createElement('div');
|
||||
appDiv.setAttribute('ng-view', '');
|
||||
appDiv.className = 'user-environ';
|
||||
domElement.appendChild(appDiv);
|
||||
|
||||
this.legacyExtension('runs', {
|
||||
depends: ['navigationService'],
|
||||
implementation: function (navigationService) {
|
||||
@@ -265,6 +282,14 @@ define([
|
||||
this.legacyExtension('types', legacyDefinition);
|
||||
}.bind(this));
|
||||
|
||||
// TODO: move this to adapter bundle.
|
||||
this.legacyExtension('runs', {
|
||||
depends: ['types[]'],
|
||||
implementation: (types) => {
|
||||
this.types.importLegacyTypes(types);
|
||||
}
|
||||
});
|
||||
|
||||
this.objectViews.getAllProviders().forEach(function (p) {
|
||||
this.legacyExtension('views', {
|
||||
key: p.key,
|
||||
@@ -282,15 +307,42 @@ define([
|
||||
|
||||
this.install(LegacyIndicatorsPlugin());
|
||||
|
||||
this.router = new ApplicationRouter();
|
||||
|
||||
this.router.route(/^\/$/, () => {
|
||||
this.router.setPath('/browse/mine');
|
||||
});
|
||||
|
||||
/**
|
||||
* Fired by [MCT]{@link module:openmct.MCT} when the application
|
||||
* is started.
|
||||
* @event start
|
||||
* @memberof module:openmct.MCT~
|
||||
*/
|
||||
this.emit('start');
|
||||
};
|
||||
var startPromise = new Main().run(this.legacyRegistry)
|
||||
.then(function (angular) {
|
||||
this.$angular = angular;
|
||||
// OpenMCT Object provider doesn't operate properly unless
|
||||
// something has depended upon objectService. Cool, right?
|
||||
this.$injector.get('objectService');
|
||||
|
||||
console.log('Rendering app layout.');
|
||||
|
||||
var appLayout = new Vue({
|
||||
mixins: [Layout.default],
|
||||
provide: {
|
||||
openmct: this
|
||||
}
|
||||
});
|
||||
domElement.appendChild(appLayout.$mount().$el);
|
||||
|
||||
console.log('Attaching adapter');
|
||||
installVueAdapter(appLayout, this);
|
||||
|
||||
this.router.start();
|
||||
this.emit('start');
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
/**
|
||||
* Install a plugin in MCT.
|
||||
|
||||
41
src/adapter/vue-adapter/inspector-adapter.js
Normal file
41
src/adapter/vue-adapter/inspector-adapter.js
Normal file
@@ -0,0 +1,41 @@
|
||||
define([
|
||||
|
||||
], function (
|
||||
|
||||
) {
|
||||
|
||||
class InspectorAdapter {
|
||||
constructor(layout, openmct) {
|
||||
console.log('installing inspector adapter');
|
||||
|
||||
this.openmct = openmct;
|
||||
this.layout = layout;
|
||||
this.$injector = openmct.$injector;
|
||||
this.angular = openmct.$angular;
|
||||
|
||||
this.objectService = this.$injector.get('objectService');
|
||||
this.templateLinker = this.$injector.get('templateLinker');
|
||||
this.$timeout = this.$injector.get('$timeout');
|
||||
|
||||
this.templateMap = {};
|
||||
this.$injector.get('templates[]').forEach((t) => {
|
||||
this.templateMap[t.key] = this.templateMap[t.key] || t;
|
||||
});
|
||||
|
||||
var $rootScope = this.$injector.get('$rootScope');
|
||||
this.scope = $rootScope.$new();
|
||||
|
||||
this.templateLinker.link(
|
||||
this.scope,
|
||||
angular.element(layout.$refs.inspector.$refs.properties),
|
||||
this.templateMap["inspectorRegion"]
|
||||
);
|
||||
this.$timeout(function () {
|
||||
//hello!
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return InspectorAdapter;
|
||||
|
||||
});
|
||||
16
src/adapter/vue-adapter/install.js
Normal file
16
src/adapter/vue-adapter/install.js
Normal file
@@ -0,0 +1,16 @@
|
||||
define([
|
||||
'./main-adapter',
|
||||
'./tree-adapter',
|
||||
'./inspector-adapter'
|
||||
], function (
|
||||
MainAdapter,
|
||||
TreeAdapter,
|
||||
InspectorAdapter
|
||||
) {
|
||||
|
||||
return function install(layout, openmct) {
|
||||
let main = new MainAdapter(layout, openmct);
|
||||
let tree = new TreeAdapter(layout, openmct);
|
||||
let inspector = new InspectorAdapter(layout, openmct);
|
||||
}
|
||||
});
|
||||
153
src/adapter/vue-adapter/main-adapter.js
Normal file
153
src/adapter/vue-adapter/main-adapter.js
Normal file
@@ -0,0 +1,153 @@
|
||||
define([
|
||||
|
||||
], function (
|
||||
|
||||
) {
|
||||
|
||||
// Find an object in an array of objects.
|
||||
function findObject(domainObjects, id) {
|
||||
var i;
|
||||
for (i = 0; i < domainObjects.length; i += 1) {
|
||||
if (domainObjects[i].getId() === id) {
|
||||
return domainObjects[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// recursively locate and return an object inside of a container
|
||||
// via a path. If at any point in the recursion it fails to find
|
||||
// the next object, it will return the parent.
|
||||
function findViaComposition(containerObject, path) {
|
||||
var nextId = path.shift();
|
||||
if (!nextId) {
|
||||
return containerObject;
|
||||
}
|
||||
return containerObject.useCapability('composition')
|
||||
.then(function (composees) {
|
||||
var nextObject = findObject(composees, nextId);
|
||||
if (!nextObject) {
|
||||
return containerObject;
|
||||
}
|
||||
if (!nextObject.hasCapability('composition')) {
|
||||
return nextObject;
|
||||
}
|
||||
return findViaComposition(nextObject, path);
|
||||
});
|
||||
}
|
||||
|
||||
function getLastChildIfRoot(object) {
|
||||
if (object.getId() !== 'ROOT') {
|
||||
return object;
|
||||
}
|
||||
return object.useCapability('composition')
|
||||
.then(function (composees) {
|
||||
return composees[composees.length - 1];
|
||||
});
|
||||
}
|
||||
|
||||
function pathForObject(domainObject) {
|
||||
var context = domainObject.getCapability('context'),
|
||||
objectPath = context ? context.getPath() : [],
|
||||
ids = objectPath.map(function (domainObj) {
|
||||
return domainObj.getId();
|
||||
});
|
||||
return "/browse/" + ids.slice(1).join("/");
|
||||
}
|
||||
|
||||
class MainAdapter {
|
||||
constructor(layout, openmct) {
|
||||
this.openmct = openmct;
|
||||
this.layout = layout;
|
||||
this.$injector = openmct.$injector;
|
||||
this.angular = openmct.$angular;
|
||||
|
||||
this.objectService = this.$injector.get('objectService');
|
||||
this.templateLinker = this.$injector.get('templateLinker');
|
||||
this.navigationService = this.$injector.get('navigationService');
|
||||
this.$timeout = this.$injector.get('$timeout');
|
||||
|
||||
this.templateMap = {};
|
||||
this.$injector.get('templates[]').forEach((t) => {
|
||||
this.templateMap[t.key] = this.templateMap[t.key] || t;
|
||||
});
|
||||
|
||||
var $rootScope = this.$injector.get('$rootScope');
|
||||
this.scope = $rootScope.$new();
|
||||
this.scope.representation = {};
|
||||
|
||||
openmct.router.route(/^\/browse\/(.*)$/, (path, results) => {
|
||||
let navigatePath = results[1];
|
||||
if (!navigatePath) {
|
||||
navigatePath = 'mine';
|
||||
}
|
||||
this.navigateToPath(navigatePath);
|
||||
});
|
||||
|
||||
this.navigationService.addListener(o => this.navigateToObject(o));
|
||||
}
|
||||
|
||||
navigateToPath(path) {
|
||||
if (!Array.isArray(path)) {
|
||||
path = path.split('/');
|
||||
}
|
||||
return this.getObject('ROOT')
|
||||
.then(root => {
|
||||
return findViaComposition(root, path);
|
||||
})
|
||||
.then(getLastChildIfRoot)
|
||||
.then(object => {
|
||||
this.setMainViewObject(object);
|
||||
});
|
||||
}
|
||||
|
||||
setMainViewObject(object) {
|
||||
this.scope.domainObject = object;
|
||||
this.scope.navigatedObject = object;
|
||||
this.templateLinker.link(
|
||||
this.scope,
|
||||
angular.element(this.layout.$refs.mainContainer),
|
||||
this.templateMap["browseObject"]
|
||||
);
|
||||
document.title = object.getModel().name;
|
||||
this.scheduleDigest();
|
||||
}
|
||||
|
||||
idsForObject(domainObject) {
|
||||
return this.urlService
|
||||
.urlForLocation("", domainObject)
|
||||
.replace('/', '');
|
||||
}
|
||||
|
||||
navigateToObject(object) {
|
||||
let path = pathForObject(object);
|
||||
let views = object.useCapability('view');
|
||||
let params = this.openmct.router.getParams();
|
||||
let currentViewIsValid = views.some(v => v.key === params['view']);
|
||||
if (!currentViewIsValid) {
|
||||
this.scope.representation = {
|
||||
selected: views[0]
|
||||
}
|
||||
this.openmct.router.update(path, {
|
||||
view: views[0].key
|
||||
});
|
||||
} else {
|
||||
this.openmct.router.setPath(path);
|
||||
}
|
||||
}
|
||||
|
||||
scheduleDigest() {
|
||||
this.$timeout(function () {
|
||||
// digest done!
|
||||
});
|
||||
}
|
||||
|
||||
getObject(id) {
|
||||
return this.objectService.getObjects([id])
|
||||
.then(function (results) {
|
||||
return results[id];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return MainAdapter;
|
||||
});
|
||||
15
src/adapter/vue-adapter/tree-adapter.js
Normal file
15
src/adapter/vue-adapter/tree-adapter.js
Normal file
@@ -0,0 +1,15 @@
|
||||
define([
|
||||
|
||||
], function (
|
||||
|
||||
) {
|
||||
|
||||
class TreeAdapter {
|
||||
constructor(layout, openmct) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return TreeAdapter;
|
||||
|
||||
});
|
||||
@@ -32,6 +32,9 @@ define(function () {
|
||||
*/
|
||||
function Type(definition) {
|
||||
this.definition = definition;
|
||||
if (definition.key) {
|
||||
this.key = definition.key;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -70,5 +73,28 @@ define(function () {
|
||||
return def;
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a type definition from a legacy definition.
|
||||
*/
|
||||
Type.definitionFromLegacyDefinition = function (legacyDefinition) {
|
||||
let definition = {};
|
||||
definition.name = legacyDefinition.name;
|
||||
definition.cssClass = legacyDefinition.cssClass;
|
||||
definition.description = legacyDefinition.description;
|
||||
definition.form = legacyDefinition.properties;
|
||||
if (legacyDefinition.model) {
|
||||
definition.initialize = function (model) {
|
||||
for (let [k, v] of Object.entries(legacyDefinition.model)) {
|
||||
model[k] = JSON.parse(JSON.stringify(v));
|
||||
}
|
||||
}
|
||||
}
|
||||
if (Array.isArray(legacyDefinition.creatable) && 'creation' in legacyDefinition.creatable) {
|
||||
definition.creatable = true;
|
||||
}
|
||||
|
||||
return definition;
|
||||
}
|
||||
|
||||
return Type;
|
||||
});
|
||||
|
||||
@@ -98,6 +98,14 @@ define(['./Type'], function (Type) {
|
||||
return this.types[typeKey];
|
||||
};
|
||||
|
||||
TypeRegistry.prototype.importLegacyTypes = function (types) {
|
||||
types.filter((t) => !this.get(t.key))
|
||||
.forEach((type) => {
|
||||
let def = Type.definitionFromLegacyDefinition(type);
|
||||
this.addType(type.key, def);
|
||||
});
|
||||
}
|
||||
|
||||
return TypeRegistry;
|
||||
});
|
||||
|
||||
|
||||
@@ -64,7 +64,6 @@ define([
|
||||
'../platform/features/pages/bundle',
|
||||
'../platform/features/hyperlink/bundle',
|
||||
'../platform/features/static-markup/bundle',
|
||||
'../platform/features/table/bundle',
|
||||
'../platform/features/timeline/bundle',
|
||||
'../platform/forms/bundle',
|
||||
'../platform/framework/bundle',
|
||||
@@ -108,7 +107,6 @@ define([
|
||||
'platform/features/pages',
|
||||
'platform/features/hyperlink',
|
||||
'platform/features/timeline',
|
||||
'platform/features/table',
|
||||
'platform/forms',
|
||||
'platform/identity',
|
||||
'platform/persistence/aggregator',
|
||||
|
||||
37
src/exporters/CSVExporter.js
Normal file
37
src/exporters/CSVExporter.js
Normal file
@@ -0,0 +1,37 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
import CSV from 'comma-separated-values';
|
||||
import {saveAs} from 'file-saver/FileSaver';
|
||||
|
||||
class CSVExporter {
|
||||
export(rows, options) {
|
||||
let headers = (options && options.headers) ||
|
||||
(Object.keys((rows[0] || {})).sort());
|
||||
let filename = (options && options.filename) || "export.csv";
|
||||
let csvText = new CSV(rows, { header: headers }).encode();
|
||||
let blob = new Blob([csvText], { type: "text/csv" });
|
||||
saveAs(blob, filename);
|
||||
}
|
||||
};
|
||||
|
||||
export default CSVExporter;
|
||||
@@ -23,7 +23,7 @@
|
||||
define([
|
||||
'./AutoflowTabularController',
|
||||
'./AutoflowTabularConstants',
|
||||
'../../ui/VueView',
|
||||
'./VueView',
|
||||
'./autoflow-tabular.html'
|
||||
], function (
|
||||
AutoflowTabularController,
|
||||
|
||||
@@ -33,6 +33,7 @@ define([
|
||||
'./URLIndicatorPlugin/URLIndicatorPlugin',
|
||||
'./telemetryMean/plugin',
|
||||
'./plot/plugin',
|
||||
'./telemetryTable/plugin',
|
||||
'./staticRootPlugin/plugin'
|
||||
], function (
|
||||
_,
|
||||
@@ -47,6 +48,7 @@ define([
|
||||
URLIndicatorPlugin,
|
||||
TelemetryMean,
|
||||
PlotPlugin,
|
||||
TelemetryTablePlugin,
|
||||
StaticRootPlugin
|
||||
) {
|
||||
var bundleMap = {
|
||||
@@ -152,7 +154,8 @@ define([
|
||||
|
||||
plugins.ExampleImagery = ExampleImagery;
|
||||
plugins.Plot = PlotPlugin;
|
||||
|
||||
plugins.TelemetryTable = TelemetryTablePlugin;
|
||||
|
||||
plugins.SummaryWidget = SummaryWidget;
|
||||
plugins.TelemetryMean = TelemetryMean;
|
||||
plugins.URLIndicator = URLIndicatorPlugin;
|
||||
|
||||
101
src/plugins/telemetryTable/TableConfigurationViewProvider.js
Normal file
101
src/plugins/telemetryTable/TableConfigurationViewProvider.js
Normal file
@@ -0,0 +1,101 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
'../../api/objects/object-utils',
|
||||
'./components/table-configuration.vue',
|
||||
'./TelemetryTableConfiguration',
|
||||
'vue'
|
||||
], function (
|
||||
objectUtils,
|
||||
TableConfigurationComponent,
|
||||
TelemetryTableConfiguration,
|
||||
Vue
|
||||
) {
|
||||
|
||||
function TableConfigurationViewProvider(openmct) {
|
||||
let instantiateService;
|
||||
|
||||
function isBeingEdited(object) {
|
||||
let oldStyleObject = getOldStyleObject(object);
|
||||
|
||||
return oldStyleObject.hasCapability('editor') &&
|
||||
oldStyleObject.getCapability('editor').inEditContext();
|
||||
}
|
||||
|
||||
function getOldStyleObject(object) {
|
||||
let oldFormatModel = objectUtils.toOldFormat(object);
|
||||
let oldFormatId = objectUtils.makeKeyString(object.identifier);
|
||||
|
||||
return instantiate(oldFormatModel, oldFormatId);
|
||||
}
|
||||
|
||||
function instantiate(model, id) {
|
||||
if (!instantiateService) {
|
||||
instantiateService = openmct.$injector.get('instantiate');
|
||||
}
|
||||
return instantiateService(model, id);
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
key: 'table-configuration',
|
||||
name: 'Telemetry Table Configuration',
|
||||
canView: function (selection) {
|
||||
if (selection.length === 0) {
|
||||
return false;
|
||||
}
|
||||
let object = selection[0].context.item;
|
||||
return object.type === 'table' &&
|
||||
isBeingEdited(object);
|
||||
},
|
||||
view: function (selection) {
|
||||
let component;
|
||||
let domainObject = selection[0].context.item;
|
||||
const tableConfiguration = new TelemetryTableConfiguration(domainObject, openmct);
|
||||
return {
|
||||
show: function (element) {
|
||||
component = new Vue({
|
||||
provide: {
|
||||
openmct,
|
||||
tableConfiguration
|
||||
},
|
||||
components: {
|
||||
TableConfiguration: TableConfigurationComponent.default
|
||||
},
|
||||
template: '<table-configuration></table-configuration>',
|
||||
el: element
|
||||
});
|
||||
},
|
||||
destroy: function (element) {
|
||||
component.$destroy();
|
||||
component = undefined;
|
||||
}
|
||||
}
|
||||
},
|
||||
priority: function () {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
return TableConfigurationViewProvider;
|
||||
});
|
||||
123
src/plugins/telemetryTable/TablePluginSpec.js
Normal file
123
src/plugins/telemetryTable/TablePluginSpec.js
Normal file
@@ -0,0 +1,123 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
import _ from 'lodash';
|
||||
import MCT from '../../MCT.js';
|
||||
import ObjectViewsRegistry from '../../ui/registries/ViewRegistry.js';
|
||||
import InspectorViewsRegistry from '../../ui/registries/InspectorViewRegistry.js';
|
||||
import TelemetryTableViewProvider from './TelemetryTableViewProvider.js';
|
||||
import TableConfigurationViewProvider from './TableConfigurationViewProvider.js';
|
||||
|
||||
fdescribe('The TelemetryTable plugin', function() {
|
||||
let openmct;
|
||||
let tableType;
|
||||
let objectViewsSpy;
|
||||
let inspectorViewsSpy;
|
||||
|
||||
beforeEach(function () {
|
||||
objectViewsSpy = spyOn(ObjectViewsRegistry.prototype, 'addProvider');
|
||||
inspectorViewsSpy = spyOn(InspectorViewsRegistry.prototype, 'addProvider');
|
||||
openmct = new MCT();
|
||||
tableType = openmct.types.get('table');
|
||||
});
|
||||
|
||||
describe('defines a telemetry object type', function () {
|
||||
it('that is registered with the type registry.', function () {
|
||||
expect(tableType).toBeDefined();
|
||||
});
|
||||
|
||||
it('that is createable.', function () {
|
||||
expect(tableType.definition.creatable).toBe(true);
|
||||
});
|
||||
|
||||
describe('that initializes new table object.', function () {
|
||||
let tableObject;
|
||||
|
||||
beforeEach(function () {
|
||||
tableObject = {};
|
||||
tableType.definition.initialize(tableObject);
|
||||
});
|
||||
it('with valid default configuration.', function () {
|
||||
expect(tableObject.configuration.hiddenColumns).toBeDefined();
|
||||
});
|
||||
it('to support composition.', function () {
|
||||
expect(tableObject.composition).toBeDefined();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('registers the table view provider', function () {
|
||||
expect(objectViewsSpy).toHaveBeenCalledWith(new TelemetryTableViewProvider(openmct));
|
||||
});
|
||||
|
||||
it('registers the table configuration view provider', function () {
|
||||
expect(inspectorViewsSpy).toHaveBeenCalledWith(new TableConfigurationViewProvider(openmct));
|
||||
});
|
||||
|
||||
/*
|
||||
it('defines a view for telemetry objects', function() {
|
||||
let tableObject = createTableObject();
|
||||
let views = openmct.objectViews.get(tableObject);
|
||||
|
||||
expect(findTableView(views)).toBeDefined();
|
||||
});
|
||||
|
||||
it('defines a table view for telemetry objects', function() {
|
||||
let telemetryObject = createTelemetryObject();
|
||||
let views = openmct.objectViews.get(telemetryObject);
|
||||
|
||||
expect(findTableView(views)).toBeDefined();
|
||||
});
|
||||
|
||||
it('defines a configuration view for table objects', function() {
|
||||
let tableObject = createTableObject();
|
||||
let selection = createSelection(tableObject);
|
||||
let views = openmct.inspectorViews.get(selection);
|
||||
|
||||
expect(views).toBeDefined();
|
||||
expect(findTableView(views)).toBeDefined();
|
||||
});
|
||||
function findTableView(views) {
|
||||
return views.find(view => view.key === 'table');
|
||||
}
|
||||
|
||||
function createTableObject() {
|
||||
let tableObject = {};
|
||||
tableType.definition.initialize(tableObject);
|
||||
|
||||
return tableObject;
|
||||
}
|
||||
|
||||
function createTelemetryObject() {
|
||||
return {
|
||||
telemetry: {}
|
||||
};
|
||||
}
|
||||
|
||||
function createSelection(object) {
|
||||
return [{
|
||||
context: {
|
||||
item: object
|
||||
}
|
||||
}];
|
||||
}
|
||||
*/
|
||||
});
|
||||
42
src/plugins/telemetryTable/TableViewSpec.js
Normal file
42
src/plugins/telemetryTable/TableViewSpec.js
Normal file
@@ -0,0 +1,42 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
import _ from 'lodash';
|
||||
import MCT from '../../MCT.js';
|
||||
import TelemetryTablePlugin from './plugin.js';
|
||||
|
||||
describe('The TelemetryTable view', function() {
|
||||
let mockTimeSystem;
|
||||
let openmct;
|
||||
let tablePlugin;
|
||||
|
||||
beforeEach(function () {
|
||||
openmct = new MCT();
|
||||
mockTimeSystem = {
|
||||
key: 'utc'
|
||||
};
|
||||
spyOn(openmct.time, 'timeSystem');
|
||||
openmct.time.timeSystem.and.returnValue(mockTimeSystem);
|
||||
});
|
||||
|
||||
//it('allows editing of table objects');
|
||||
//it('does not allow editing of telemetry objects');
|
||||
});
|
||||
201
src/plugins/telemetryTable/TelemetryTable.js
Normal file
201
src/plugins/telemetryTable/TelemetryTable.js
Normal file
@@ -0,0 +1,201 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
'EventEmitter',
|
||||
'lodash',
|
||||
'./collections/BoundedTableRowCollection',
|
||||
'./collections/FilteredTableRowCollection',
|
||||
'./TelemetryTableRow',
|
||||
'./TelemetryTableConfiguration'
|
||||
], function (
|
||||
EventEmitter,
|
||||
_,
|
||||
BoundedTableRowCollection,
|
||||
FilteredTableRowCollection,
|
||||
TelemetryTableRow,
|
||||
TelemetryTableConfiguration
|
||||
) {
|
||||
class TelemetryTable extends EventEmitter {
|
||||
constructor(domainObject, openmct) {
|
||||
super();
|
||||
|
||||
this.domainObject = domainObject;
|
||||
this.openmct = openmct;
|
||||
this.rowCount = 100;
|
||||
this.subscriptions = {};
|
||||
this.tableComposition = undefined;
|
||||
this.telemetryObjects = [];
|
||||
this.outstandingRequests = 0;
|
||||
this.configuration = new TelemetryTableConfiguration(domainObject, openmct);
|
||||
|
||||
this.addTelemetryObject = this.addTelemetryObject.bind(this);
|
||||
this.removeTelemetryObject = this.removeTelemetryObject.bind(this);
|
||||
this.isTelemetryObject = this.isTelemetryObject.bind(this);
|
||||
this.refreshData = this.refreshData.bind(this);
|
||||
this.requestDataFor = this.requestDataFor.bind(this);
|
||||
|
||||
this.createTableRowCollections();
|
||||
openmct.time.on('bounds', this.refreshData);
|
||||
}
|
||||
|
||||
initialize() {
|
||||
if (this.domainObject.type === 'table') {
|
||||
this.loadComposition();
|
||||
} else {
|
||||
this.addTelemetryObject(this.domainObject);
|
||||
}
|
||||
}
|
||||
|
||||
createTableRowCollections() {
|
||||
this.boundedRows = new BoundedTableRowCollection(this.openmct);
|
||||
|
||||
//By default, sort by current time system, ascending.
|
||||
this.filteredRows = new FilteredTableRowCollection(this.boundedRows);
|
||||
this.filteredRows.sortBy({
|
||||
key: this.openmct.time.timeSystem().key,
|
||||
direction: 'asc'
|
||||
});
|
||||
}
|
||||
|
||||
loadComposition() {
|
||||
this.tableComposition = this.openmct.composition.get(this.domainObject);
|
||||
if (this.tableComposition !== undefined){
|
||||
this.tableComposition.load().then((composition)=>{
|
||||
composition = composition.filter(this.isTelemetryObject);
|
||||
|
||||
this.configuration.addColumnsForAllObjects(composition);
|
||||
composition.forEach(this.addTelemetryObject);
|
||||
|
||||
this.tableComposition.on('add', this.addTelemetryObject);
|
||||
this.tableComposition.on('remove', this.removeTelemetryObject);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
addTelemetryObject(telemetryObject) {
|
||||
this.configuration.addColumnsForObject(telemetryObject, true);
|
||||
this.requestDataFor(telemetryObject);
|
||||
this.subscribeTo(telemetryObject);
|
||||
this.telemetryObjects.push(telemetryObject);
|
||||
|
||||
this.emit('object-added', telemetryObject);
|
||||
}
|
||||
|
||||
removeTelemetryObject(objectIdentifier) {
|
||||
this.configuration.removeColumnsForObject(objectIdentifier, true);
|
||||
let keyString = this.openmct.objects.makeKeyString(objectIdentifier);
|
||||
this.boundedRows.removeAllRowsForObject(keyString);
|
||||
this.unsubscribe(keyString);
|
||||
this.telemetryObjects = this.telemetryObjects.filter((object) => !_.eq(objectIdentifier, object.identifier));
|
||||
|
||||
this.emit('object-removed', objectIdentifier);
|
||||
}
|
||||
|
||||
requestDataFor(telemetryObject) {
|
||||
this.incrementOutstandingRequests();
|
||||
|
||||
return this.openmct.telemetry.request(telemetryObject)
|
||||
.then(telemetryData => {
|
||||
let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
|
||||
let columnMap = this.getColumnMapForObject(keyString);
|
||||
let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
|
||||
|
||||
let telemetryRows = telemetryData.map(datum => new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
|
||||
this.boundedRows.add(telemetryRows);
|
||||
console.log('Loaded %i rows', telemetryRows.length);
|
||||
this.decrementOutstandingRequests();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
incrementOutstandingRequests() {
|
||||
if (this.outstandingRequests === 0){
|
||||
this.emit('outstanding-requests', true);
|
||||
}
|
||||
this.outstandingRequests++;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
decrementOutstandingRequests() {
|
||||
this.outstandingRequests--;
|
||||
|
||||
if (this.outstandingRequests === 0){
|
||||
this.emit('outstanding-requests', false);
|
||||
}
|
||||
}
|
||||
|
||||
refreshData(bounds, isTick) {
|
||||
if (!isTick) {
|
||||
this.filteredRows.clear();
|
||||
this.boundedRows.clear();
|
||||
this.telemetryObjects.forEach(this.requestDataFor);
|
||||
}
|
||||
}
|
||||
|
||||
getColumnMapForObject(objectKeyString) {
|
||||
let columns = this.configuration.getColumns();
|
||||
|
||||
return columns[objectKeyString].reduce((map, column) => {
|
||||
map[column.getKey()] = column;
|
||||
return map;
|
||||
}, {});
|
||||
}
|
||||
|
||||
subscribeTo(telemetryObject) {
|
||||
let keyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
|
||||
let columnMap = this.getColumnMapForObject(keyString);
|
||||
let limitEvaluator = this.openmct.telemetry.limitEvaluator(telemetryObject);
|
||||
|
||||
this.subscriptions[keyString] = this.openmct.telemetry.subscribe(telemetryObject, (datum) => {
|
||||
this.boundedRows.add(new TelemetryTableRow(datum, columnMap, keyString, limitEvaluator));
|
||||
});
|
||||
}
|
||||
|
||||
isTelemetryObject(domainObject) {
|
||||
return domainObject.hasOwnProperty('telemetry');
|
||||
}
|
||||
|
||||
unsubscribe(keyString) {
|
||||
this.subscriptions[keyString]();
|
||||
delete this.subscriptions[keyString];
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.boundedRows.destroy();
|
||||
this.filteredRows.destroy();
|
||||
Object.keys(this.subscriptions).forEach(this.unsubscribe, this);
|
||||
this.openmct.time.off('bounds', this.refreshData);
|
||||
|
||||
if (this.tableComposition !== undefined) {
|
||||
this.tableComposition.off('add', this.addTelemetryObject);
|
||||
this.tableComposition.off('remove', this.removeTelemetryObject);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return TelemetryTable;
|
||||
});
|
||||
57
src/plugins/telemetryTable/TelemetryTableColumn.js
Normal file
57
src/plugins/telemetryTable/TelemetryTableColumn.js
Normal file
@@ -0,0 +1,57 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
define(function () {
|
||||
class TelemetryTableColumn {
|
||||
constructor (openmct, metadatum) {
|
||||
this.metadatum = metadatum;
|
||||
this.formatter = openmct.telemetry.getValueFormatter(metadatum);
|
||||
this.titleValue = this.metadatum.name;
|
||||
}
|
||||
|
||||
getKey() {
|
||||
return this.metadatum.key;
|
||||
}
|
||||
|
||||
getTitle() {
|
||||
return this.metadatum.name;
|
||||
}
|
||||
|
||||
getMetadatum() {
|
||||
return this.metadatum;
|
||||
}
|
||||
|
||||
hasValueForDatum(telemetryDatum) {
|
||||
return telemetryDatum.hasOwnProperty(this.metadatum.source);
|
||||
}
|
||||
|
||||
getRawValue(telemetryDatum) {
|
||||
return telemetryDatum[this.metadatum.source];
|
||||
}
|
||||
|
||||
getFormattedValue(telemetryDatum) {
|
||||
return this.formatter.format(telemetryDatum);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return TelemetryTableColumn;
|
||||
});
|
||||
141
src/plugins/telemetryTable/TelemetryTableConfiguration.js
Normal file
141
src/plugins/telemetryTable/TelemetryTableConfiguration.js
Normal file
@@ -0,0 +1,141 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
'lodash',
|
||||
'EventEmitter',
|
||||
'./TelemetryTableColumn',
|
||||
], function (_, EventEmitter, TelemetryTableColumn) {
|
||||
|
||||
class TelemetryTableConfiguration extends EventEmitter{
|
||||
constructor(domainObject, openmct) {
|
||||
super();
|
||||
|
||||
this.domainObject = domainObject;
|
||||
this.openmct = openmct;
|
||||
this.columns = {};
|
||||
|
||||
this.addColumnsForObject = this.addColumnsForObject.bind(this);
|
||||
this.removeColumnsForObject = this.removeColumnsForObject.bind(this);
|
||||
this.objectMutated = this.objectMutated.bind(this);
|
||||
|
||||
this.unlistenFromMutation = openmct.objects.observe(domainObject, '*', this.objectMutated);
|
||||
}
|
||||
|
||||
getConfiguration() {
|
||||
let configuration = this.domainObject.configuration || {};
|
||||
configuration.hiddenColumns = configuration.hiddenColumns || {};
|
||||
return configuration;
|
||||
}
|
||||
|
||||
updateConfiguration(configuration) {
|
||||
this.openmct.objects.mutate(this.domainObject, 'configuration', configuration);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {*} object
|
||||
*/
|
||||
objectMutated(object) {
|
||||
let oldConfiguration = this.domainObject.configuration;
|
||||
|
||||
//Synchronize domain object reference. Duplicate object otherwise change detection becomes impossible.
|
||||
this.domainObject = JSON.parse(JSON.stringify(object));
|
||||
if (!_.eq(object.configuration, oldConfiguration)){
|
||||
this.emit('change', object.configuration);
|
||||
}
|
||||
}
|
||||
|
||||
addColumnsForAllObjects(objects) {
|
||||
objects.forEach(object => this.addColumnsForObject(object, false));
|
||||
}
|
||||
|
||||
addColumnsForObject(telemetryObject) {
|
||||
let metadataValues = this.openmct.telemetry.getMetadata(telemetryObject).values();
|
||||
let objectKeyString = this.openmct.objects.makeKeyString(telemetryObject.identifier);
|
||||
this.columns[objectKeyString] = [];
|
||||
|
||||
metadataValues.forEach(metadatum => {
|
||||
let column = new TelemetryTableColumn(this.openmct, metadatum);
|
||||
this.columns[objectKeyString].push(column);
|
||||
});
|
||||
}
|
||||
|
||||
removeColumnsForObject(objectIdentifier) {
|
||||
let objectKeyString = this.openmct.objects.makeKeyString(objectIdentifier);
|
||||
let columnsToRemove = this.columns[objectKeyString];
|
||||
|
||||
delete this.columns[objectKeyString];
|
||||
columnsToRemove.forEach((column) => {
|
||||
//There may be more than one column with the same key (eg. time system columns)
|
||||
if (!this.hasColumnWithKey(column.getKey())) {
|
||||
let configuration = this.domainObject.configuration;
|
||||
delete configuration.hiddenColumns[column.getKey()];
|
||||
// If there are no more columns with this key, delete any configuration, and trigger
|
||||
// a column refresh.
|
||||
this.openmct.objects.mutate(this.domainObject, 'configuration', configuration);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
hasColumnWithKey(columnKey) {
|
||||
return _.flatten(Object.values(this.columns))
|
||||
.findIndex(column => column.getKey() === columnKey) !== -1;
|
||||
}
|
||||
|
||||
getColumns() {
|
||||
return this.columns;
|
||||
}
|
||||
|
||||
getAllHeaders() {
|
||||
let flattenedColumns = _.flatten(Object.values(this.columns));
|
||||
let headers = _.uniq(flattenedColumns, false, column => column.getKey())
|
||||
.reduce(fromColumnsToHeadersMap, {});
|
||||
|
||||
function fromColumnsToHeadersMap(headersMap, column){
|
||||
headersMap[column.getKey()] = column.getTitle();
|
||||
return headersMap;
|
||||
}
|
||||
|
||||
return headers;
|
||||
}
|
||||
|
||||
getVisibleHeaders() {
|
||||
let headers = this.getAllHeaders();
|
||||
let configuration = this.getConfiguration();
|
||||
|
||||
Object.keys(headers).forEach((headerKey) => {
|
||||
if (configuration.hiddenColumns[headerKey] === true) {
|
||||
delete headers[headerKey];
|
||||
}
|
||||
});
|
||||
|
||||
return headers;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.unlistenFromMutation();
|
||||
}
|
||||
}
|
||||
|
||||
return TelemetryTableConfiguration;
|
||||
});
|
||||
81
src/plugins/telemetryTable/TelemetryTableRow.js
Normal file
81
src/plugins/telemetryTable/TelemetryTableRow.js
Normal file
@@ -0,0 +1,81 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([], function () {
|
||||
class TelemetryTableRow {
|
||||
constructor(datum, columns, objectKeyString, limitEvaluator) {
|
||||
this.columns = columns;
|
||||
|
||||
this.datum = createNormalizedDatum(datum, columns);
|
||||
this.limitEvaluator = limitEvaluator;
|
||||
this.objectKeyString = objectKeyString;
|
||||
}
|
||||
|
||||
getFormattedDatum(headers) {
|
||||
return Object.keys(headers).reduce((formattedDatum, columnKey) => {
|
||||
formattedDatum[columnKey] = this.getFormattedValue(columnKey);
|
||||
return formattedDatum;
|
||||
}, {});
|
||||
}
|
||||
|
||||
getFormattedValue(key) {
|
||||
let column = this.columns[key];
|
||||
return column.getFormattedValue(this.datum[key]);
|
||||
}
|
||||
|
||||
getRowLimitClass() {
|
||||
if (!this.rowLimitClass) {
|
||||
let limitEvaluation = this.limitEvaluator.evaluate(this.datum);
|
||||
this.rowLimitClass = limitEvaluation && limitEvaluation.cssClass;
|
||||
}
|
||||
return this.rowLimitClass;
|
||||
}
|
||||
|
||||
getCellLimitClasses() {
|
||||
if (!this.cellLimitClasses) {
|
||||
this.cellLimitClasses = Object.values(this.columns).reduce((alarmStateMap, column) => {
|
||||
let limitEvaluation = this.limitEvaluator.evaluate(this.datum, column.getMetadatum());
|
||||
alarmStateMap[column.getKey()] = limitEvaluation && limitEvaluation.cssClass;
|
||||
|
||||
return alarmStateMap;
|
||||
}, {});
|
||||
}
|
||||
return this.cellLimitClasses;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalize the structure of datums to assist sorting and merging of columns.
|
||||
* Maps all sources to keys.
|
||||
* @private
|
||||
* @param {*} telemetryDatum
|
||||
* @param {*} metadataValues
|
||||
*/
|
||||
function createNormalizedDatum(datum, columns) {
|
||||
return Object.values(columns).reduce((normalizedDatum, column) => {
|
||||
normalizedDatum[column.getKey()] = column.getRawValue(datum);
|
||||
return normalizedDatum;
|
||||
}, {});
|
||||
}
|
||||
|
||||
return TelemetryTableRow;
|
||||
});
|
||||
39
src/plugins/telemetryTable/TelemetryTableType.js
Normal file
39
src/plugins/telemetryTable/TelemetryTableType.js
Normal file
@@ -0,0 +1,39 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(function () {
|
||||
function TelemetryTableType() {
|
||||
return {
|
||||
name: 'Telemetry Table',
|
||||
description: 'Display telemetry values for the current time bounds in tabular form. Supports filtering and sorting.',
|
||||
creatable: true,
|
||||
cssClass: 'icon-tabular-realtime',
|
||||
initialize(domainObject) {
|
||||
domainObject.composition = [];
|
||||
domainObject.configuration = {
|
||||
hiddenColumns: {}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
return TelemetryTableType;
|
||||
});
|
||||
75
src/plugins/telemetryTable/TelemetryTableViewProvider.js
Normal file
75
src/plugins/telemetryTable/TelemetryTableViewProvider.js
Normal file
@@ -0,0 +1,75 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
'./components/table.vue',
|
||||
'../../exporters/CSVExporter',
|
||||
'./TelemetryTable',
|
||||
'vue'
|
||||
], function (
|
||||
TableComponent,
|
||||
CSVExporter,
|
||||
TelemetryTable,
|
||||
Vue
|
||||
) {
|
||||
function TelemetryTableViewProvider(openmct) {
|
||||
return {
|
||||
key: 'table',
|
||||
name: 'Telemetry Table',
|
||||
editable: function(domainObject) {
|
||||
return domainObject.type === 'table';
|
||||
},
|
||||
canView: function (domainObject) {
|
||||
return domainObject.type === 'table' || domainObject.hasOwnProperty('telemetry');
|
||||
},
|
||||
view: function (domainObject) {
|
||||
let csvExporter = new CSVExporter.default();
|
||||
let table = new TelemetryTable(domainObject, openmct);
|
||||
let component;
|
||||
return {
|
||||
show: function (element) {
|
||||
component = new Vue({
|
||||
components: {
|
||||
TableComponent: TableComponent.default,
|
||||
},
|
||||
provide: {
|
||||
openmct,
|
||||
csvExporter,
|
||||
table
|
||||
},
|
||||
el: element,
|
||||
template: '<table-component></table-component>'
|
||||
});
|
||||
},
|
||||
destroy: function (element) {
|
||||
component.$destroy();
|
||||
component = undefined;
|
||||
}
|
||||
}
|
||||
},
|
||||
priority: function () {
|
||||
return 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
return TelemetryTableViewProvider;
|
||||
});
|
||||
@@ -0,0 +1,139 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[
|
||||
'lodash',
|
||||
'./SortedTableRowCollection'
|
||||
],
|
||||
function (
|
||||
_,
|
||||
SortedTableRowCollection
|
||||
) {
|
||||
|
||||
class BoundedTableRowCollection extends SortedTableRowCollection {
|
||||
constructor (openmct) {
|
||||
super();
|
||||
|
||||
this.futureBuffer = new SortedTableRowCollection();
|
||||
this.openmct = openmct;
|
||||
|
||||
this.sortByTimeSystem = this.sortByTimeSystem.bind(this)
|
||||
this.bounds = this.bounds.bind(this)
|
||||
|
||||
this.sortByTimeSystem(openmct.time.timeSystem());
|
||||
openmct.time.on('timeSystem', this.sortByTimeSystem);
|
||||
|
||||
this.lastBounds = openmct.time.bounds();
|
||||
openmct.time.on('bounds', this.bounds);
|
||||
}
|
||||
|
||||
addOne (item) {
|
||||
// Insert into either in-bounds array, or the future buffer.
|
||||
// Data in the future buffer will be re-evaluated for possible
|
||||
// insertion on next bounds change
|
||||
let beforeStartOfBounds = item.datum[this.sortOptions.key] < this.lastBounds.start;
|
||||
let afterEndOfBounds = item.datum[this.sortOptions.key] > this.lastBounds.end;
|
||||
|
||||
if (!afterEndOfBounds && !beforeStartOfBounds) {
|
||||
return super.addOne(item);
|
||||
} else if (afterEndOfBounds) {
|
||||
this.futureBuffer.addOne(item);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
sortByTimeSystem(timeSystem) {
|
||||
this.sortBy({key: timeSystem.key, direction: 'asc'});
|
||||
this.futureBuffer.sortBy({key: timeSystem.key, direction: 'asc'});
|
||||
}
|
||||
|
||||
/**
|
||||
* This function is optimized for ticking - it assumes that start and end
|
||||
* bounds will only increase and as such this cannot be used for decreasing
|
||||
* bounds changes.
|
||||
*
|
||||
* An implication of this is that data will not be discarded that exceeds
|
||||
* the given end bounds. For arbitrary bounds changes, it's assumed that
|
||||
* a telemetry requery is performed anyway, and the collection is cleared
|
||||
* and repopulated.
|
||||
*
|
||||
* @fires TelemetryCollection#added
|
||||
* @fires TelemetryCollection#discarded
|
||||
* @param bounds
|
||||
*/
|
||||
bounds (bounds) {
|
||||
let startChanged = this.lastBounds.start !== bounds.start;
|
||||
let endChanged = this.lastBounds.end !== bounds.end;
|
||||
|
||||
let startIndex = 0;
|
||||
let endIndex = 0;
|
||||
|
||||
let discarded = [];
|
||||
let added = [];
|
||||
let testValue = {
|
||||
datum: {}
|
||||
};
|
||||
|
||||
this.lastBounds = bounds;
|
||||
|
||||
if (startChanged) {
|
||||
testValue.datum[this.sortOptions.key] = bounds.start;
|
||||
// Calculate the new index of the first item within the bounds
|
||||
startIndex = this.sortedIndex(this.rows, testValue);
|
||||
discarded = this.rows.splice(0, startIndex);
|
||||
}
|
||||
|
||||
if (endChanged) {
|
||||
testValue.datum[this.sortOptions.key] = bounds.end;
|
||||
// Calculate the new index of the last item in bounds
|
||||
endIndex = this.sortedLastIndex(this.futureBuffer.rows, testValue);
|
||||
added = this.futureBuffer.rows.splice(0, endIndex);
|
||||
added.forEach((datum) => this.rows.push(datum));
|
||||
}
|
||||
|
||||
if (discarded && discarded.length > 0) {
|
||||
/**
|
||||
* A `discarded` event is emitted when telemetry data fall out of
|
||||
* bounds due to a bounds change event
|
||||
* @type {object[]} discarded the telemetry data
|
||||
* discarded as a result of the bounds change
|
||||
*/
|
||||
this.emit('remove', discarded);
|
||||
}
|
||||
if (added && added.length > 0) {
|
||||
/**
|
||||
* An `added` event is emitted when a bounds change results in
|
||||
* received telemetry falling within the new bounds.
|
||||
* @type {object[]} added the telemetry data that is now within bounds
|
||||
*/
|
||||
this.emit('add', added);
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.openmct.time.off('timeSystem', this.sortByTimeSystem);
|
||||
this.openmct.time.off('bounds', this.bounds);
|
||||
}
|
||||
}
|
||||
return BoundedTableRowCollection;
|
||||
});
|
||||
@@ -0,0 +1,111 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
import _ from 'lodash';
|
||||
import MCT from '../../../MCT.js';
|
||||
import SortedTableRowCollection from './SortedTableRowCollection.js';
|
||||
|
||||
describe('The SortedTableRowCollection', function() {
|
||||
let mockTimeSystem;
|
||||
let openmct;
|
||||
let rows;
|
||||
let mockSortedIndex;
|
||||
|
||||
beforeEach(function () {
|
||||
openmct = new MCT();
|
||||
mockTimeSystem = {
|
||||
key: 'utc'
|
||||
};
|
||||
spyOn(openmct.time, 'timeSystem');
|
||||
openmct.time.timeSystem.and.returnValue(mockTimeSystem);
|
||||
rows = new BoundedTableRowCollection(openmct);
|
||||
});
|
||||
|
||||
describe('Shortcut behavior', function() {
|
||||
let testTelemetry;
|
||||
beforeEach(function() {
|
||||
testTelemetry = [
|
||||
{
|
||||
datum: {utc: 100}
|
||||
}, {
|
||||
datum: {utc: 200}
|
||||
}, {
|
||||
datum: {utc: 300}
|
||||
}, {
|
||||
datum: {utc: 400}
|
||||
}
|
||||
];
|
||||
rows.add(testTelemetry);
|
||||
mockSortedIndex = spyOn(_, 'sortedIndex');
|
||||
mockSortedIndex.and.callThrough();
|
||||
});
|
||||
describe('when sorted ascending', function () {
|
||||
it('Uses lodash sortedIndex to find insertion point when test value is between first and last values', function () {
|
||||
rows.add({
|
||||
datum: {utc: 250}
|
||||
});
|
||||
expect(mockSortedIndex).toHaveBeenCalled();
|
||||
});
|
||||
it('shortcuts insertion point search when test value is greater than last value', function() {
|
||||
rows.add({
|
||||
datum: {utc: 500}
|
||||
});
|
||||
expect(mockSortedIndex).not.toHaveBeenCalled();
|
||||
});
|
||||
it('shortcuts insertion point search when test value is less than or equal to first value', function () {
|
||||
rows.add({
|
||||
datum: {utc: 100}
|
||||
});
|
||||
|
||||
rows.add({
|
||||
datum: {utc: 50}
|
||||
});
|
||||
expect(mockSortedIndex).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
describe('when sorted descending', function () {
|
||||
it('Uses lodash sortedIndex to find insertion point when test value is between first and last values', function () {
|
||||
rows.add({
|
||||
datum: {utc: 250}
|
||||
});
|
||||
expect(mockSortedIndex).toHaveBeenCalled();
|
||||
});
|
||||
it('shortcuts insertion point search when test value is greater than last value', function() {
|
||||
rows.add({
|
||||
datum: {utc: 500}
|
||||
});
|
||||
expect(mockSortedIndex).not.toHaveBeenCalled();
|
||||
});
|
||||
it('shortcuts insertion point search when test value is less than or equal to first value', function () {
|
||||
rows.add({
|
||||
datum: {utc: 100}
|
||||
});
|
||||
|
||||
rows.add({
|
||||
datum: {utc: 50}
|
||||
});
|
||||
expect(mockSortedIndex).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
it('Evicts old telemetry on bounds change');
|
||||
it('Does not drop data that falls ahead of end bounds');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,112 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[
|
||||
'./SortedTableRowCollection'
|
||||
],
|
||||
function (
|
||||
SortedTableRowCollection
|
||||
) {
|
||||
class FilteredTableRowCollection extends SortedTableRowCollection {
|
||||
constructor(masterCollection) {
|
||||
super();
|
||||
|
||||
this.masterCollection = masterCollection;
|
||||
this.columnFilters = {};
|
||||
|
||||
//Synchronize with master collection
|
||||
this.masterCollection.on('add', this.add);
|
||||
this.masterCollection.on('remove', this.remove);
|
||||
|
||||
//Default to master collection's sort options
|
||||
this.sortOptions = masterCollection.sortBy();
|
||||
}
|
||||
|
||||
setColumnFilter(columnKey, filter) {
|
||||
filter = filter.trim().toLowerCase();
|
||||
|
||||
let rowsToFilter = this.getRowsToFilter(columnKey, filter);
|
||||
if (filter.length === 0) {
|
||||
delete this.columnFilters[columnKey];
|
||||
} else {
|
||||
this.columnFilters[columnKey] = filter;
|
||||
}
|
||||
this.rows = rowsToFilter.filter(this.matchesFilters, this);
|
||||
this.emit('filter');
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
getRowsToFilter(columnKey, filter) {
|
||||
if (this.isSubsetOfCurrentFilter(columnKey, filter)) {
|
||||
return this.getRows();
|
||||
} else {
|
||||
return this.masterCollection.getRows();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
isSubsetOfCurrentFilter(columnKey, filter) {
|
||||
return this.columnFilters[columnKey] &&
|
||||
filter.startsWith(this.columnFilters[columnKey]) &&
|
||||
// startsWith check will otherwise fail when filter cleared
|
||||
// because anyString.startsWith('') === true
|
||||
filter !== '';
|
||||
}
|
||||
|
||||
addOne(row) {
|
||||
return this.matchesFilters(row) && super.addOne(row);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
matchesFilters(row) {
|
||||
let doesMatchFilters = true;
|
||||
for (const key in this.columnFilters) {
|
||||
if (!this.rowHasColumn(row, key)) {
|
||||
return false;
|
||||
} else {
|
||||
let formattedValue = row.getFormattedValue(key).toLowerCase();
|
||||
doesMatchFilters = doesMatchFilters &&
|
||||
formattedValue.indexOf(this.columnFilters[key]) !== -1;
|
||||
}
|
||||
}
|
||||
return doesMatchFilters;
|
||||
}
|
||||
|
||||
rowHasColumn(row, key) {
|
||||
return row.columns.hasOwnProperty(key);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.masterCollection.off('add', this.add);
|
||||
this.masterCollection.off('remove', this.remove);
|
||||
}
|
||||
}
|
||||
|
||||
return FilteredTableRowCollection;
|
||||
});
|
||||
@@ -0,0 +1,240 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define(
|
||||
[
|
||||
'lodash',
|
||||
'EventEmitter'
|
||||
],
|
||||
function (
|
||||
_,
|
||||
EventEmitter
|
||||
) {
|
||||
const LESS_THAN = -1;
|
||||
const EQUAL = 0;
|
||||
const GREATER_THAN = 1;
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
*/
|
||||
class SortedTableRowCollection extends EventEmitter {
|
||||
constructor () {
|
||||
super();
|
||||
|
||||
this.dupeCheck = false;
|
||||
this.rows = [];
|
||||
|
||||
this.add = this.add.bind(this);
|
||||
this.remove = this.remove.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a datum or array of data to this telemetry collection
|
||||
* @fires TelemetryCollection#added
|
||||
* @param {object | object[]} rows
|
||||
*/
|
||||
add(rows) {
|
||||
if (Array.isArray(rows)) {
|
||||
this.dupeCheck = false;
|
||||
|
||||
let rowsAdded = rows.filter(this.addOne, this);
|
||||
if (rowsAdded.length > 0) {
|
||||
this.emit('add', rowsAdded);
|
||||
}
|
||||
this.dupeCheck = true;
|
||||
} else {
|
||||
let wasAdded = this.addOne(rows);
|
||||
if (wasAdded) {
|
||||
this.emit('add', rows);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
addOne(row) {
|
||||
if (this.sortOptions === undefined) {
|
||||
throw 'Please specify sort options';
|
||||
}
|
||||
|
||||
let isDuplicate = false;
|
||||
|
||||
// Going to check for duplicates. Bound the search problem to
|
||||
// items around the given time. Use sortedIndex because it
|
||||
// employs a binary search which is O(log n). Can use binary search
|
||||
// because the array is guaranteed ordered due to sorted insertion.
|
||||
let startIx = this.sortedIndex(this.rows, row);
|
||||
let endIx = undefined;
|
||||
|
||||
if (this.dupeCheck && startIx !== this.rows.length) {
|
||||
endIx = this.sortedLastIndex(this.rows, row);
|
||||
|
||||
// Create an array of potential dupes, based on having the
|
||||
// same time stamp
|
||||
let potentialDupes = this.rows.slice(startIx, endIx + 1);
|
||||
// Search potential dupes for exact dupe
|
||||
isDuplicate = _.findIndex(potentialDupes, _.isEqual.bind(undefined, row)) > -1;
|
||||
}
|
||||
|
||||
if (!isDuplicate) {
|
||||
this.rows.splice(endIx || startIx, 0, row);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
sortedLastIndex(rows, testRow) {
|
||||
return this.sortedIndex(rows, testRow, _.sortedLastIndex);
|
||||
}
|
||||
/**
|
||||
* Finds the correct insertion point for the given row.
|
||||
* Leverages lodash's `sortedIndex` function which implements a binary search.
|
||||
* @private
|
||||
*/
|
||||
sortedIndex(rows, testRow, lodashFunction) {
|
||||
if (this.rows.length === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const sortOptionsKey = this.sortOptions.key;
|
||||
const testRowValue = testRow.datum[sortOptionsKey];
|
||||
const firstValue = this.rows[0].datum[sortOptionsKey];
|
||||
const lastValue = this.rows[this.rows.length - 1].datum[sortOptionsKey];
|
||||
|
||||
lodashFunction = lodashFunction || _.sortedIndex;
|
||||
|
||||
if (this.sortOptions.direction === 'asc') {
|
||||
if (testRowValue > lastValue) {
|
||||
return this.rows.length;
|
||||
} else if (testRowValue === lastValue) {
|
||||
return this.rows.length - 1;
|
||||
} else if (testRowValue <= firstValue) {
|
||||
return 0;
|
||||
} else {
|
||||
return lodashFunction(rows, testRow, (thisRow) => {
|
||||
return thisRow.datum[sortOptionsKey];
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (testRowValue >= firstValue) {
|
||||
return 0;
|
||||
} else if (testRowValue < lastValue) {
|
||||
return this.rows.length;
|
||||
} else if (testRowValue === lastValue) {
|
||||
return this.rows.length - 1;
|
||||
} else {
|
||||
// Use a custom comparison function to support descending sort.
|
||||
return lodashFunction(rows, testRow, (thisRow) => {
|
||||
const thisRowValue = thisRow.datum[sortOptionsKey];
|
||||
if (testRowValue === thisRowValue) {
|
||||
return EQUAL;
|
||||
} else if (testRowValue < thisRowValue) {
|
||||
return LESS_THAN;
|
||||
} else {
|
||||
return GREATER_THAN;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sorts the telemetry collection based on the provided sort field
|
||||
* specifier. Subsequent inserts are sorted to maintain specified sport
|
||||
* order.
|
||||
*
|
||||
* @example
|
||||
* // First build some mock telemetry for the purpose of an example
|
||||
* let now = Date.now();
|
||||
* let telemetry = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (value) {
|
||||
* return {
|
||||
* // define an object property to demonstrate nested paths
|
||||
* timestamp: {
|
||||
* ms: now - value * 1000,
|
||||
* text:
|
||||
* },
|
||||
* value: value
|
||||
* }
|
||||
* });
|
||||
* let collection = new TelemetryCollection();
|
||||
*
|
||||
* collection.add(telemetry);
|
||||
*
|
||||
* // Sort by telemetry value
|
||||
* collection.sortBy({
|
||||
* key: 'value', direction: 'asc'
|
||||
* });
|
||||
*
|
||||
* // Sort by ms since epoch
|
||||
* collection.sort({
|
||||
* key: 'timestamp.ms',
|
||||
* direction: 'asc'
|
||||
* });
|
||||
*
|
||||
* // Sort by 'text' attribute, descending
|
||||
* collection.sort("timestamp.text");
|
||||
*
|
||||
*
|
||||
* @param {object} sortOptions An object specifying a sort key, and direction.
|
||||
*/
|
||||
sortBy(sortOptions) {
|
||||
if (arguments.length > 0) {
|
||||
this.sortOptions = sortOptions;
|
||||
this.rows = _.sortByOrder(this.rows, 'datum.' + sortOptions.key, sortOptions.direction);
|
||||
this.emit('sort');
|
||||
}
|
||||
// Return duplicate to avoid direct modification of underlying object
|
||||
return Object.assign({}, this.sortOptions);
|
||||
}
|
||||
|
||||
removeAllRowsForObject(objectKeyString) {
|
||||
let removed = [];
|
||||
this.rows = this.rows.filter(row => {
|
||||
if (row.objectKeyString === objectKeyString) {
|
||||
removed.push(row);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.emit('remove', removed);
|
||||
}
|
||||
|
||||
remove(removedRows) {
|
||||
this.rows = this.rows.filter(row => {
|
||||
return removedRows.indexOf(row) === -1;
|
||||
});
|
||||
this.emit('remove', removedRows);
|
||||
}
|
||||
|
||||
getRows () {
|
||||
return this.rows;
|
||||
}
|
||||
|
||||
clear() {
|
||||
let removedRows = this.rows;
|
||||
this.rows = [];
|
||||
this.emit('remove', removedRows);
|
||||
}
|
||||
}
|
||||
return SortedTableRowCollection;
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="grid-properties">
|
||||
<!--form class="form" -->
|
||||
<ul class="l-inspector-part">
|
||||
<h2>Table Columns</h2>
|
||||
<li class="grid-row" v-for="(title, key) in headers">
|
||||
<div class="grid-cell label" title="Show or Hide Column"><label :for="key + 'ColumnControl'">{{title}}</label></div>
|
||||
<div class="grid-cell value"><input type="checkbox" :id="key + 'ColumnControl'" :checked="configuration.hiddenColumns[key] !== true" @change="toggleColumn(key)"></div>
|
||||
</li>
|
||||
</ul>
|
||||
<!--/form -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
inject: ['tableConfiguration', 'openmct'],
|
||||
data() {
|
||||
return {
|
||||
headers: {},
|
||||
configuration: this.tableConfiguration.getConfiguration()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateHeaders(headers) {
|
||||
this.headers = headers;
|
||||
},
|
||||
toggleColumn(key) {
|
||||
let isHidden = this.configuration.hiddenColumns[key] === true;
|
||||
|
||||
this.configuration.hiddenColumns[key] = !isHidden;
|
||||
this.tableConfiguration.updateConfiguration(this.configuration);
|
||||
},
|
||||
addObject(domainObject) {
|
||||
this.tableConfiguration.addColumnsForObject(domainObject, true);
|
||||
this.updateHeaders(this.tableConfiguration.getAllHeaders());
|
||||
},
|
||||
removeObject(objectIdentifier) {
|
||||
this.tableConfiguration.removeColumnsForObject(objectIdentifier, true);
|
||||
this.updateHeaders(this.tableConfiguration.getAllHeaders());
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.unlisteners = [];
|
||||
let compositionCollection = this.openmct.composition.get(this.tableConfiguration.domainObject);
|
||||
|
||||
compositionCollection.load()
|
||||
.then((composition) => {
|
||||
this.tableConfiguration.addColumnsForAllObjects(composition);
|
||||
this.updateHeaders(this.tableConfiguration.getAllHeaders());
|
||||
|
||||
compositionCollection.on('add', this.addObject);
|
||||
this.unlisteners.push(compositionCollection.off.bind(compositionCollection, 'add', this.addObject));
|
||||
|
||||
compositionCollection.on('remove', this.removeObject);
|
||||
this.unlisteners.push(compositionCollection.off.bind(compositionCollection, 'remove', this.removeObject));
|
||||
});
|
||||
},
|
||||
destroyed() {
|
||||
this.tableConfiguration.destroy();
|
||||
this.unlisteners.forEach((unlisten) => unlisten());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
76
src/plugins/telemetryTable/components/table-row.vue
Normal file
76
src/plugins/telemetryTable/components/table-row.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<tr :style="{ top: rowTop }" :class="rowLimitClass">
|
||||
<td v-for="(title, key, headerIndex) in headers"
|
||||
:style="{ width: columnWidths[headerIndex], 'max-width': columnWidths[headerIndex]}"
|
||||
:title="formattedRow[key]"
|
||||
:class="cellLimitClasses[key]">{{formattedRow[key]}}</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data: function () {
|
||||
return {
|
||||
rowTop: (this.rowOffset + this.rowIndex) * this.rowHeight + 'px',
|
||||
formattedRow: this.row.getFormattedDatum(this.headers),
|
||||
rowLimitClass: this.row.getRowLimitClass(),
|
||||
cellLimitClasses: this.row.getCellLimitClasses()
|
||||
}
|
||||
},
|
||||
props: {
|
||||
headers: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
row: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
columnWidths: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: [],
|
||||
},
|
||||
rowIndex: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: undefined
|
||||
},
|
||||
rowOffset: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
rowHeight: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 0
|
||||
},
|
||||
configuration: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calculateRowTop: function (rowOffset) {
|
||||
this.rowTop = (rowOffset + this.rowIndex) * this.rowHeight + 'px';
|
||||
},
|
||||
formatRow: function (row) {
|
||||
this.formattedRow = row.getFormattedDatum(this.headers);
|
||||
this.rowLimitClass = row.getRowLimitClass();
|
||||
this.cellLimitClasses = row.getCellLimitClasses();
|
||||
}
|
||||
},
|
||||
// TODO: use computed properties
|
||||
watch: {
|
||||
rowOffset: 'calculateRowTop',
|
||||
row: {
|
||||
handler: 'formatRow',
|
||||
deep: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
539
src/plugins/telemetryTable/components/table.vue
Normal file
539
src/plugins/telemetryTable/components/table.vue
Normal file
@@ -0,0 +1,539 @@
|
||||
<template>
|
||||
<div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
|
||||
:class="{'loading': loading}">
|
||||
<div class="c-table__control-bar c-control-bar">
|
||||
<a class="s-button t-export icon-download labeled"
|
||||
v-on:click="exportAsCSV()"
|
||||
title="Export This View's Data">
|
||||
Export As CSV
|
||||
</a>
|
||||
</div>
|
||||
<!-- Headers table -->
|
||||
<div class="c-table__headers-w js-table__headers-w">
|
||||
<table class="c-table__headers c-telemetry-table__headers"
|
||||
:style="{ 'max-width': totalWidth + 'px'}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th v-for="(title, key, headerIndex) in headers"
|
||||
v-on:click="sortBy(key)"
|
||||
:class="['is-sortable', sortOptions.key === key ? 'is-sorting' : '', sortOptions.direction].join(' ')"
|
||||
:style="{ width: columnWidths[headerIndex], 'max-width': columnWidths[headerIndex]}">{{title}}</th>
|
||||
</tr>
|
||||
<tr class="s-filters">
|
||||
<th v-for="(title, key, headerIndex) in headers"
|
||||
:style="{
|
||||
width: columnWidths[headerIndex],
|
||||
'max-width': columnWidths[headerIndex],
|
||||
}">
|
||||
<div class="holder l-filter flex-elem grows" :class="{active: filters[key]}">
|
||||
<input type="text" v-model="filters[key]" v-on:input="filterChanged(key)" />
|
||||
<a class="clear-icon clear-input icon-x-in-circle" :class="{show: filters[key]}" @click="clearFilter(key)"></a>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Content table -->
|
||||
<div class="c-table__body-w c-telemetry-table__body-w js-telemetry-table__body-w" @scroll="scroll">
|
||||
<div class="c-telemetry-table__scroll-forcer" :style="{ width: totalWidth }"></div>
|
||||
<table class="c-table__body c-telemetry-table__body"
|
||||
:style="{ height: totalHeight + 'px', 'max-width': totalWidth + 'px'}">
|
||||
<tbody>
|
||||
<telemetry-table-row v-for="(row, rowIndex) in visibleRows"
|
||||
:headers="headers"
|
||||
:columnWidths="columnWidths"
|
||||
:rowIndex="rowIndex"
|
||||
:rowOffset="rowOffset"
|
||||
:rowHeight="rowHeight"
|
||||
:row="row"
|
||||
>
|
||||
</telemetry-table-row>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Sizing table -->
|
||||
<table class="c-telemetry-table__sizing js-telemetry-table__sizing"
|
||||
:style="{width: calcTableWidth}">
|
||||
<tr>
|
||||
<th v-for="(title, key, headerIndex) in headers">{{title}}</th>
|
||||
</tr>
|
||||
<telemetry-table-row v-for="(sizingRowData, objectKeyString) in sizingRows"
|
||||
:headers="headers"
|
||||
:row="sizingRowData">
|
||||
</telemetry-table-row>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
.c-table {
|
||||
// Can be used by any type of table, scrolling, LAD, etc.
|
||||
$min-w: 50px;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
|
||||
> [class*="__"] + [class*="__"] {
|
||||
// Don't allow top level elements to grow or shrink
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/******************************* ELEMENTS */
|
||||
th, td {
|
||||
display: block;
|
||||
flex: 1 0 auto;
|
||||
white-space: nowrap;
|
||||
min-width: $min-w;
|
||||
padding: $tabularTdPadTB $tabularTdPadLR;
|
||||
vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
|
||||
}
|
||||
|
||||
td {
|
||||
color: $colorTelemFresh;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&__control-bar {
|
||||
margin-bottom: $interiorMarginSm;
|
||||
}
|
||||
|
||||
/******************************* WRAPPERS */
|
||||
&__headers-w {
|
||||
// Wraps __headers table
|
||||
background: $colorTabHeaderBg;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/******************************* TABLES */
|
||||
&__headers,
|
||||
&__body {
|
||||
tr {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
&__headers {
|
||||
// A table
|
||||
thead {
|
||||
display: block;
|
||||
}
|
||||
|
||||
th {
|
||||
&:not(:first-child) {
|
||||
border-left: 1px solid $colorTabHeaderBorder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
// A table
|
||||
tr {
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $colorTabBorder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************* MODIFIERS */
|
||||
&--filterable {
|
||||
// TODO: discuss using the search.vue custom control here
|
||||
|
||||
.l-filter {
|
||||
input[type="text"],
|
||||
input[type="search"] {
|
||||
$p: 20px;
|
||||
transition: padding 200ms ease-in-out;
|
||||
box-sizing: border-box;
|
||||
padding-right: $p; // Fend off from icon
|
||||
padding-left: $p; // Fend off from icon
|
||||
width: 100%;
|
||||
}
|
||||
&.active {
|
||||
// When user has typed something, hide the icon and collapse left padding
|
||||
&:before {
|
||||
opacity: 0;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="search"] {
|
||||
padding-left: $interiorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sortable {
|
||||
.is-sorting {
|
||||
&:after {
|
||||
color: $colorIconLink;
|
||||
content: $glyph-icon-arrow-tall-up;
|
||||
font-family: symbolsfont;
|
||||
font-size: 8px;
|
||||
display: inline-block;
|
||||
margin-left: $interiorMarginSm;
|
||||
}
|
||||
&.desc:after {
|
||||
content: $glyph-icon-arrow-tall-down;
|
||||
}
|
||||
}
|
||||
.is-sortable {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-telemetry-table {
|
||||
// Table that displays telemetry in a scrolling body area
|
||||
|
||||
/******************************* ELEMENTS */
|
||||
&__scroll-forcer {
|
||||
// Force horz scroll when needed; width set via JS
|
||||
font-size: 0;
|
||||
height: 1px; // Height 0 won't force scroll properly
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/******************************* WRAPPERS */
|
||||
&__body-w {
|
||||
// Wraps __body table provides scrolling
|
||||
flex: 1 1 100% !important; // TODO: temp override on tabular-holder > * { style which sets this to 0 0 auto
|
||||
overflow-x: auto;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/******************************* TABLES */
|
||||
&__body {
|
||||
// A table
|
||||
flex: 1 1 100%;
|
||||
overflow-x: auto;
|
||||
|
||||
tr {
|
||||
display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
|
||||
align-items: stretch;
|
||||
position: absolute;
|
||||
height: 18px; // Needed when a row has empty values in its cells
|
||||
}
|
||||
|
||||
td {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
&__sizing {
|
||||
// A table
|
||||
display: table;
|
||||
z-index: -1;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
position: absolute !important; // TODO: fix tabular-holder > * { which sets this to pos: relative
|
||||
|
||||
//Add some padding to allow for decorations such as limits indicator
|
||||
tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
th, td {
|
||||
display: table-cell;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-table__control-bar {
|
||||
margin-bottom: $interiorMarginSm;
|
||||
}
|
||||
|
||||
/******************************* LEGACY */
|
||||
.s-status-taking-snapshot,
|
||||
.overlay.snapshot {
|
||||
// Handle overflow-y issues with tables and html2canvas
|
||||
// Replaces .l-sticky-headers .l-tabular-body { overflow: auto; }
|
||||
.c-table__body-w { overflow: auto; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import TelemetryTableRow from './table-row.vue';
|
||||
import _ from 'lodash';
|
||||
|
||||
const VISIBLE_ROW_COUNT = 100;
|
||||
const ROW_HEIGHT = 17;
|
||||
const RESIZE_POLL_INTERVAL = 200;
|
||||
const AUTO_SCROLL_TRIGGER_HEIGHT = 20;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TelemetryTableRow
|
||||
},
|
||||
inject: ['table', 'openmct', 'csvExporter'],
|
||||
props: ['configuration'],
|
||||
data() {
|
||||
return {
|
||||
headers: {},
|
||||
visibleRows: [],
|
||||
columnWidths: [],
|
||||
sizingRows: {},
|
||||
rowHeight: ROW_HEIGHT,
|
||||
scrollOffset: 0,
|
||||
totalHeight: 0,
|
||||
totalWidth: 0,
|
||||
rowOffset: 0,
|
||||
autoScroll: true,
|
||||
sortOptions: {},
|
||||
filters: {},
|
||||
loading: false,
|
||||
scrollable: undefined,
|
||||
tableEl: undefined,
|
||||
headersHolderEl: undefined,
|
||||
calcTableWidth: '100%',
|
||||
processingScroll: false,
|
||||
updatingView: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateVisibleRows() {
|
||||
|
||||
let start = 0;
|
||||
let end = VISIBLE_ROW_COUNT;
|
||||
let filteredRows = this.table.filteredRows.getRows();
|
||||
let filteredRowsLength = filteredRows.length;
|
||||
|
||||
this.totalHeight = this.rowHeight * filteredRowsLength - 1;
|
||||
|
||||
if (filteredRowsLength < VISIBLE_ROW_COUNT) {
|
||||
end = filteredRowsLength;
|
||||
} else {
|
||||
let firstVisible = this.calculateFirstVisibleRow();
|
||||
let lastVisible = this.calculateLastVisibleRow();
|
||||
let totalVisible = lastVisible - firstVisible;
|
||||
|
||||
let numberOffscreen = VISIBLE_ROW_COUNT - totalVisible;
|
||||
start = firstVisible - Math.floor(numberOffscreen / 2);
|
||||
end = lastVisible + Math.ceil(numberOffscreen / 2);
|
||||
|
||||
if (start < 0) {
|
||||
start = 0;
|
||||
end = Math.min(VISIBLE_ROW_COUNT, filteredRowsLength);
|
||||
} else if (end >= filteredRowsLength) {
|
||||
end = filteredRowsLength;
|
||||
start = end - VISIBLE_ROW_COUNT + 1;
|
||||
}
|
||||
}
|
||||
this.rowOffset = start;
|
||||
this.visibleRows = filteredRows.slice(start, end);
|
||||
},
|
||||
calculateFirstVisibleRow() {
|
||||
return Math.floor(this.scrollable.scrollTop / this.rowHeight);
|
||||
},
|
||||
calculateLastVisibleRow() {
|
||||
let bottomScroll = this.scrollable.scrollTop + this.scrollable.offsetHeight;
|
||||
return Math.floor(bottomScroll / this.rowHeight);
|
||||
},
|
||||
updateHeaders() {
|
||||
let headers = this.table.configuration.getVisibleHeaders();
|
||||
|
||||
this.headers = headers;
|
||||
this.$nextTick().then(this.calculateColumnWidths);
|
||||
},
|
||||
setSizingTableWidth() {
|
||||
let scrollW = this.scrollable.offsetWidth - this.scrollable.clientWidth;
|
||||
|
||||
if (scrollW && scrollW > 0) {
|
||||
this.calcTableWidth = 'calc(100% - ' + scrollW + 'px)';
|
||||
}
|
||||
},
|
||||
calculateColumnWidths() {
|
||||
let columnWidths = [];
|
||||
let totalWidth = 0;
|
||||
let sizingRowEl = this.sizingTable.children[0];
|
||||
let sizingCells = Array.from(sizingRowEl.children);
|
||||
|
||||
sizingCells.forEach((cell) => {
|
||||
let columnWidth = cell.offsetWidth;
|
||||
columnWidths.push(columnWidth + 'px');
|
||||
totalWidth += columnWidth;
|
||||
});
|
||||
|
||||
this.columnWidths = columnWidths;
|
||||
this.totalWidth = totalWidth;
|
||||
},
|
||||
sortBy(columnKey) {
|
||||
// If sorting by the same column, flip the sort direction.
|
||||
if (this.sortOptions.key === columnKey) {
|
||||
if (this.sortOptions.direction === 'asc') {
|
||||
this.sortOptions.direction = 'desc';
|
||||
} else {
|
||||
this.sortOptions.direction = 'asc';
|
||||
}
|
||||
} else {
|
||||
this.sortOptions = {
|
||||
key: columnKey,
|
||||
direction: 'asc'
|
||||
}
|
||||
}
|
||||
this.table.filteredRows.sortBy(this.sortOptions);
|
||||
},
|
||||
scroll() {
|
||||
if (!this.processingScroll) {
|
||||
this.processingScroll = true;
|
||||
requestAnimationFrame(()=> {
|
||||
this.updateVisibleRows();
|
||||
this.synchronizeScrollX();
|
||||
|
||||
if (this.shouldSnapToBottom()) {
|
||||
this.autoScroll = true;
|
||||
} else {
|
||||
// If user scrolls away from bottom, disable auto-scroll.
|
||||
// Auto-scroll will be re-enabled if user scrolls to bottom again.
|
||||
this.autoScroll = false;
|
||||
}
|
||||
this.processingScroll = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
shouldSnapToBottom() {
|
||||
return this.scrollable.scrollTop >= (this.scrollable.scrollHeight - this.scrollable.offsetHeight - AUTO_SCROLL_TRIGGER_HEIGHT);
|
||||
},
|
||||
scrollToBottom() {
|
||||
this.scrollable.scrollTop = this.scrollable.scrollHeight;
|
||||
},
|
||||
synchronizeScrollX() {
|
||||
this.headersHolderEl.scrollLeft = this.scrollable.scrollLeft;
|
||||
},
|
||||
filterChanged(columnKey) {
|
||||
this.table.filteredRows.setColumnFilter(columnKey, this.filters[columnKey]);
|
||||
},
|
||||
clearFilter(columnKey) {
|
||||
this.filters[columnKey] = '';
|
||||
this.table.filteredRows.setColumnFilter(columnKey, '');
|
||||
},
|
||||
rowsAdded(rows) {
|
||||
let sizingRow;
|
||||
if (Array.isArray(rows)) {
|
||||
sizingRow = rows[0];
|
||||
} else {
|
||||
sizingRow = rows;
|
||||
}
|
||||
if (!this.sizingRows[sizingRow.objectKeyString]) {
|
||||
this.sizingRows[sizingRow.objectKeyString] = sizingRow;
|
||||
this.$nextTick().then(this.calculateColumnWidths);
|
||||
}
|
||||
|
||||
if (!this.updatingView) {
|
||||
this.updatingView = true;
|
||||
requestAnimationFrame(()=> {
|
||||
this.updateVisibleRows();
|
||||
if (this.autoScroll) {
|
||||
this.$nextTick().then(this.scrollToBottom);
|
||||
}
|
||||
this.updatingView = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
rowsRemoved(rows) {
|
||||
if (!this.updatingView) {
|
||||
this.updatingView = true;
|
||||
requestAnimationFrame(()=> {
|
||||
this.updateVisibleRows();
|
||||
this.updatingView = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
exportAsCSV() {
|
||||
const headerKeys = Object.keys(this.headers);
|
||||
const justTheData = this.table.filteredRows.getRows()
|
||||
.map(row => row.getFormattedDatum(this.headers));
|
||||
this.csvExporter.export(justTheData, {
|
||||
filename: this.table.domainObject.name + '.csv',
|
||||
headers: headerKeys
|
||||
});
|
||||
},
|
||||
outstandingRequests(loading) {
|
||||
this.loading = loading;
|
||||
},
|
||||
calculateTableSize() {
|
||||
this.setSizingTableWidth();
|
||||
this.$nextTick().then(this.calculateColumnWidths);
|
||||
},
|
||||
pollForResize() {
|
||||
let el = this.$el;
|
||||
let width = el.clientWidth;
|
||||
let height = el.clientHeight;
|
||||
|
||||
this.resizePollHandle = setInterval(() => {
|
||||
if (el.clientWidth !== width || el.clientHeight !== height) {
|
||||
this.calculateTableSize();
|
||||
width = el.clientWidth;
|
||||
height = el.clientHeight;
|
||||
}
|
||||
}, RESIZE_POLL_INTERVAL);
|
||||
},
|
||||
updateConfiguration(configuration) {
|
||||
this.configuration = configuration;
|
||||
this.updateHeaders();
|
||||
},
|
||||
addObject() {
|
||||
this.updateHeaders();
|
||||
},
|
||||
removeObject(objectIdentifier) {
|
||||
let objectKeyString = this.openmct.objects.makeKeyString(objectIdentifier);
|
||||
delete this.sizingRows[objectKeyString];
|
||||
this.updateHeaders();
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.filterChanged = _.debounce(this.filterChanged, 500);
|
||||
},
|
||||
mounted() {
|
||||
this.table.on('object-added', this.addObject);
|
||||
this.table.on('object-removed', this.removeObject);
|
||||
this.table.on('outstanding-requests', this.outstandingRequests);
|
||||
|
||||
this.table.filteredRows.on('add', this.rowsAdded);
|
||||
this.table.filteredRows.on('remove', this.rowsRemoved);
|
||||
this.table.filteredRows.on('sort', this.updateVisibleRows);
|
||||
this.table.filteredRows.on('filter', this.updateVisibleRows);
|
||||
|
||||
//Default sort
|
||||
this.sortOptions = this.table.filteredRows.sortBy();
|
||||
this.scrollable = this.$el.querySelector('.js-telemetry-table__body-w');
|
||||
this.sizingTable = this.$el.querySelector('.js-telemetry-table__sizing');
|
||||
this.headersHolderEl = this.$el.querySelector('.js-table__headers-w');
|
||||
|
||||
this.table.configuration.on('change', this.updateConfiguration);
|
||||
|
||||
this.calculateTableSize();
|
||||
this.pollForResize();
|
||||
|
||||
this.table.initialize();
|
||||
},
|
||||
destroyed() {
|
||||
this.table.off('object-added', this.addObject);
|
||||
this.table.off('object-removed', this.removeObject);
|
||||
this.table.off('outstanding-requests', this.outstandingRequests);
|
||||
|
||||
this.table.filteredRows.off('add', this.rowsAdded);
|
||||
this.table.filteredRows.off('remove', this.rowsRemoved);
|
||||
this.table.filteredRows.off('sort', this.updateVisibleRows);
|
||||
this.table.filteredRows.off('filter', this.updateVisibleRows);
|
||||
|
||||
this.table.configuration.off('change', this.updateConfiguration);
|
||||
|
||||
clearInterval(this.resizePollHandle);
|
||||
|
||||
this.table.configuration.destroy();
|
||||
|
||||
this.table.destroy();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
39
src/plugins/telemetryTable/plugin.js
Normal file
39
src/plugins/telemetryTable/plugin.js
Normal file
@@ -0,0 +1,39 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
define([
|
||||
'./TelemetryTableViewProvider',
|
||||
'./TableConfigurationViewProvider',
|
||||
'./TelemetryTableType'
|
||||
], function (
|
||||
TelemetryTableViewProvider,
|
||||
TableConfigurationViewProvider,
|
||||
TelemetryTableType
|
||||
) {
|
||||
return function plugin() {
|
||||
return function install(openmct) {
|
||||
openmct.objectViews.addProvider(new TelemetryTableViewProvider(openmct));
|
||||
openmct.inspectorViews.addProvider(new TableConfigurationViewProvider(openmct));
|
||||
openmct.types.addType('table', TelemetryTableType());
|
||||
};
|
||||
};
|
||||
});
|
||||
6
src/plugins/telemetryTable/table-row.html
Normal file
6
src/plugins/telemetryTable/table-row.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<tr :style="{ top: rowTop }" :class="rowLimitClass">
|
||||
<td v-for="(title, key, headerIndex) in headers"
|
||||
:style="{ width: columnWidths[headerIndex], 'max-width': columnWidths[headerIndex]}"
|
||||
:title="formattedRow[key]"
|
||||
:class="cellLimitClasses[key]">{{formattedRow[key]}}</td>
|
||||
</tr>
|
||||
147
src/styles-new/_constants-mobile.scss
Normal file
147
src/styles-new/_constants-mobile.scss
Normal file
@@ -0,0 +1,147 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
|
||||
|
||||
/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
|
||||
$mobileListIconSize: 30px;
|
||||
$mobileTitleDescH: 35px;
|
||||
$mobileOverlayMargin: 20px;
|
||||
$mobileMenuIconD: 34px;
|
||||
$phoneItemH: floor($ueBrowseGridItemLg/4);
|
||||
$tabletItemH: floor($ueBrowseGridItemLg/3);
|
||||
|
||||
/************************** MOBILE TREE MENU DIMENSIONS */
|
||||
$mobileTreeItemH: 35px;
|
||||
$mobileTreeItemIndent: 15px;
|
||||
$mobileTreeRightArrowW: 30px;
|
||||
|
||||
/************************** DEVICE WIDTHS */
|
||||
// IMPORTANT! Usage assumes that ranges are mutually exclusive and have no gaps
|
||||
$phoMaxW: 767px;
|
||||
$tabMinW: 768px;
|
||||
$tabMaxW: 1024px;
|
||||
$desktopMinW: 1025px;
|
||||
|
||||
/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
|
||||
$screenPortrait: "(orientation: portrait)";
|
||||
$screenLandscape: "(orientation: landscape)";
|
||||
|
||||
//$mobileDevice: "(max-device-width: #{$tabMaxW})";
|
||||
|
||||
$phoneCheck: "(max-device-width: #{$phoMaxW})";
|
||||
$tabletCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
|
||||
$desktopCheck: "(min-device-width: #{$desktopMinW}) and (-webkit-min-device-pixel-ratio: 1)";
|
||||
|
||||
/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
|
||||
$phonePortrait: "only screen and #{$screenPortrait} and #{$phoneCheck}";
|
||||
$phoneLandscape: "only screen and #{$screenLandscape} and #{$phoneCheck}";
|
||||
|
||||
$tabletPortrait: "only screen and #{$screenPortrait} and #{$tabletCheck}";
|
||||
$tabletLandscape: "only screen and #{$screenLandscape} and #{$tabletCheck}";
|
||||
|
||||
$desktop: "only screen and #{$desktopCheck}";
|
||||
|
||||
/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
|
||||
$proporMenuOnly: 90%;
|
||||
$proporMenuWithView: 40%;
|
||||
|
||||
// Phones in any orientation
|
||||
@mixin phone {
|
||||
@media #{$phonePortrait},
|
||||
#{$phoneLandscape} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
//Phones in portrait orientation
|
||||
@mixin phonePortrait {
|
||||
@media #{$phonePortrait} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Phones in landscape orientation
|
||||
@mixin phoneLandscape {
|
||||
@media #{$phoneLandscape} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Tablets in any orientation
|
||||
@mixin tablet {
|
||||
@media #{$tabletPortrait},
|
||||
#{$tabletLandscape} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Tablets in portrait orientation
|
||||
@mixin tabletPortrait {
|
||||
@media #{$tabletPortrait} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Tablets in landscape orientation
|
||||
@mixin tabletLandscape {
|
||||
@media #{$tabletLandscape} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Phones and tablets in any orientation
|
||||
@mixin phoneandtablet {
|
||||
@media #{$phonePortrait},
|
||||
#{$phoneLandscape},
|
||||
#{$tabletPortrait},
|
||||
#{$tabletLandscape} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop monitors in any orientation
|
||||
@mixin desktopandtablet {
|
||||
// Keeping only for legacy - should not be used moving forward
|
||||
// Use body.desktop, body.tablet instead.
|
||||
@media #{$tabletPortrait},
|
||||
#{$tabletLandscape},
|
||||
#{$desktop} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Desktop monitors in any orientation
|
||||
@mixin desktop {
|
||||
// Keeping only for legacy - should not be used moving forward
|
||||
// Use body.desktop instead.
|
||||
@media #{$desktop} {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
// Transition used for the slide menu
|
||||
@mixin slMenuTransitions {
|
||||
@include transition-duration(.35s);
|
||||
transition-timing-function: ease;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
290
src/styles-new/_constants-snow.scss
Normal file
290
src/styles-new/_constants-snow.scss
Normal file
@@ -0,0 +1,290 @@
|
||||
@import "constants";
|
||||
|
||||
// Mixins
|
||||
@function pullForward($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, lighter things come forward - opposite for light interfaces
|
||||
@return darken($c, $p);
|
||||
}
|
||||
|
||||
@function pushBack($c: $colorBodyBg, $p: 20%) {
|
||||
// For dark interfaces, darker things move back - opposite for light interfaces
|
||||
@return lighten($c, $p);
|
||||
}
|
||||
|
||||
// Global
|
||||
$colorBodyBg: #fcfcfc;
|
||||
$colorBodyFg: #666;
|
||||
$colorGenBg: #fff;
|
||||
$colorStatusBarBg: #000;
|
||||
$colorStatusBarFg: #999;
|
||||
$colorStatusBarFgHov: #aaa;
|
||||
$colorKey: #0099cc;
|
||||
$colorKeySelectedBg: $colorKey;
|
||||
$colorKeyFg: #fff;
|
||||
$colorKeyHov: #00c0f6;
|
||||
$colorEditAreaBg: #eafaff;
|
||||
$colorEditAreaFg: #4bb1c7;
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorA: #999;
|
||||
$colorAHov: $colorKey;
|
||||
$contrastRatioPercent: 40%;
|
||||
$hoverRatioPercent: 10%;
|
||||
$basicCr: 4px;
|
||||
$controlCr: 3px;
|
||||
$smallCr: 2px;
|
||||
$overlayCr: 11px;
|
||||
$shdwTextSubtle: rgba(black, 0.2) 0 1px 2px;
|
||||
|
||||
// Buttons and Controls
|
||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
|
||||
$colorBtnFg: #fff;
|
||||
$colorBtnFgHov: $colorBtnFg;
|
||||
$colorBtnIcon: #eee;
|
||||
$colorBtnIconHov: $colorBtnFgHov;
|
||||
$colorBtnMajorBg: $colorKey;
|
||||
$colorBtnMajorBgHov: $colorKeyHov;
|
||||
$colorBtnMajorFg: $colorKeyFg;
|
||||
$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
|
||||
$colorClickIcon: $colorKey;
|
||||
$colorClickIconHov: $colorKeyHov;
|
||||
$colorToggleIcon: rgba($colorClickIcon, 0.5);
|
||||
$colorToggleIconActive: $colorKey;
|
||||
$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
|
||||
$colorInvokeMenu: #000;
|
||||
$contrastInvokeMenuPercent: 40%;
|
||||
$shdwBtns: none;
|
||||
$shdwBtnsOverlay: none;
|
||||
$sliderColorBase: $colorKey;
|
||||
$sliderColorRangeHolder: rgba(black, 0.07);
|
||||
$sliderColorRange: rgba($sliderColorBase, 0.2);
|
||||
$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
|
||||
$sliderColorKnob: pushBack($sliderColorBase, 20%);
|
||||
$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
|
||||
$sliderColorRangeValHovBg: $sliderColorRange;
|
||||
$sliderColorRangeValHovFg: $colorBodyFg;
|
||||
$sliderKnobW: 15px;
|
||||
$sliderKnobR: 2px;
|
||||
$timeControllerToiLineColor: $colorBodyFg;
|
||||
$timeControllerToiLineColorHov: #0052b5;
|
||||
$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
|
||||
|
||||
// Foundation Colors
|
||||
$colorAlt1: #776ba2;
|
||||
$colorAlert: #ff3c00;
|
||||
$colorWarningHi: #990000;
|
||||
$colorWarningLo: #ff9900;
|
||||
$colorDiagnostic: #a4b442;
|
||||
$colorCommand: #3693bd;
|
||||
$colorInfo: #2294a2;
|
||||
$colorOk: #33cc33;
|
||||
$colorIconLink: #49dedb;
|
||||
$colorPausedBg: #ff9900;
|
||||
$colorPausedFg: #fff;
|
||||
$colorCreateBtn: $colorKey;
|
||||
$colorGridLines: rgba(#000, 0.05);
|
||||
$colorInvokeMenu: #fff;
|
||||
$colorObjHdrTxt: $colorBodyFg;
|
||||
$colorObjHdrIc: lighten($colorObjHdrTxt, 30%);
|
||||
$colorTick: rgba(black, 0.2);
|
||||
$colorSelectableSelectedPrimary: $colorKey;
|
||||
$colorSelectableHov: rgba($colorBodyFg, 0.4);
|
||||
|
||||
// Menu colors
|
||||
$colorMenuBg: pushBack($colorBodyBg, 10%);
|
||||
$colorMenuFg: pullForward($colorMenuBg, 70%);
|
||||
$colorMenuIc: $colorKey;
|
||||
$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
|
||||
$colorMenuHovFg: $colorMenuFg;
|
||||
$colorMenuHovIc: $colorMenuIc;
|
||||
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
|
||||
$shdwMenuText: none;
|
||||
$colorCreateMenuLgIcon: $colorKey;
|
||||
$colorCreateMenuText: $colorBodyFg;
|
||||
|
||||
// Form colors
|
||||
$colorCheck: $colorKey;
|
||||
$colorFormRequired: $colorKey;
|
||||
$colorFormValid: $colorOk;
|
||||
$colorFormError: $colorWarningHi;
|
||||
$colorFormInvalid: #ff2200;
|
||||
$colorFormFieldErrorBg: $colorFormError;
|
||||
$colorFormFieldErrorFg: rgba(#fff, 0.6);
|
||||
$colorFormLines: rgba(#000, 0.1);
|
||||
$colorFormSectionHeader: rgba(#000, 0.05);
|
||||
$colorInputBg: $colorGenBg;
|
||||
$colorInputFg: $colorBodyFg;
|
||||
$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
|
||||
$colorFormText: pushBack($colorBodyFg, 10%);
|
||||
$colorInputIcon: pushBack($colorBodyFg, 25%);
|
||||
$colorFieldHint: pullForward($colorBodyFg, 40%);
|
||||
|
||||
// Inspector
|
||||
$colorInspectorBg: pullForward($colorBodyBg, 5%);
|
||||
$colorInspectorFg: $colorBodyFg;
|
||||
$colorInspectorPropName: pushBack($colorBodyFg, 20%);
|
||||
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
|
||||
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
|
||||
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Status colors, mainly used for messaging and item ancillary symbols
|
||||
$colorStatusFg: #999;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusAlert: #ffb66c;
|
||||
$colorStatusError: #da0004;
|
||||
$colorStatusBtnBg: #666;
|
||||
$colorProgressBarOuter: rgba(#000, 0.1);
|
||||
$colorProgressBarAmt: #0a0;
|
||||
$progressBarHOverlay: 15px;
|
||||
$progressBarStripeW: 20px;
|
||||
$shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
|
||||
$animPausedPulseDur: 1s;
|
||||
|
||||
// Indicator colors
|
||||
$colorIndicatorAvailable: $colorKey;
|
||||
$colorIndicatorDisabled: #444;
|
||||
$colorIndicatorOn: $colorOk;
|
||||
$colorIndicatorOff: #666;
|
||||
|
||||
// Selects
|
||||
$colorSelectBg: $colorBtnBg;
|
||||
$colorSelectFg: $colorBtnFg;
|
||||
|
||||
// Limits and staleness colors//
|
||||
$colorTelemFresh: pullForward($colorBodyFg, 20%);
|
||||
$colorTelemStale: pushBack($colorBodyFg, 20%);
|
||||
$styleTelemStale: italic;
|
||||
$colorLimitYellowBg: rgba(#ffaa00, 0.3);
|
||||
$colorLimitYellowIc: #ffaa00;
|
||||
$colorLimitRedBg: rgba(red, 0.3);
|
||||
$colorLimitRedIc: red;
|
||||
|
||||
// Bubble colors
|
||||
$colorInfoBubbleBg: $colorMenuBg;
|
||||
$colorInfoBubbleFg: #666;
|
||||
$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
|
||||
$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
|
||||
|
||||
// Overlay
|
||||
$colorOvrBlocker: rgba(black, 0.7);//
|
||||
$colorOvrBg: $colorBodyBg;
|
||||
$colorOvrFg: $colorBodyFg;
|
||||
$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
|
||||
$colorOvrBtnFg: #fff;
|
||||
$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
|
||||
$durLargeViewExpand: 250ms;
|
||||
|
||||
// Items
|
||||
$colorItemBg: #ddd;
|
||||
$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent * 0.7);
|
||||
$colorItemFg: $colorBodyFg;
|
||||
$colorItemFgDetails: pushBack($colorItemFg, 15%);
|
||||
$colorItemIc: $colorKey;
|
||||
$colorItemSubIcons: $colorItemFgDetails;
|
||||
$colorItemOpenIcon: $colorItemFgDetails;
|
||||
$shdwItemText: none;
|
||||
$colorItemBgSelected: $colorKey;
|
||||
|
||||
// Tabular
|
||||
$colorTabBorder: pullForward($colorBodyBg, 10%);
|
||||
$colorTabBodyBg: $colorBodyBg;
|
||||
$colorTabBodyFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
|
||||
$colorTabHeaderFg: pullForward($colorBodyFg, 20%);
|
||||
$colorTabHeaderBorder: $colorBodyBg;
|
||||
|
||||
// Plot
|
||||
$colorPlotBg: rgba(black, 0.05);
|
||||
$colorPlotFg: $colorBodyFg;
|
||||
$colorPlotHash: black;
|
||||
$opacityPlotHash: 0.2;
|
||||
$stylePlotHash: dashed;
|
||||
$colorPlotAreaBorder: $colorInteriorBorder;
|
||||
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
|
||||
$legendCollapsedNameMaxW: 50%;
|
||||
$legendHoverValueBg: rgba($colorBodyFg, 0.2);
|
||||
|
||||
// Tree
|
||||
$colorTreeBg: #f0f0f0; // Used
|
||||
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
|
||||
$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
|
||||
$colorItemTreeIcon: $colorKey; // Used
|
||||
$colorItemTreeIconHover: $colorItemTreeIcon; // Used
|
||||
$colorItemTreeFg: $colorBodyFg;
|
||||
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
|
||||
$colorItemTreeSelectedFg: $colorBodyBg;
|
||||
$colorItemTreeEditingBg: #caf1ff;
|
||||
$colorItemTreeEditingFg: $colorEditAreaFg;
|
||||
$colorItemTreeVC: $colorBodyFg;
|
||||
$colorItemTreeVCHover: $colorKey;
|
||||
$colorItemTreeSelectedVC: $colorBodyBg;
|
||||
$shdwItemTreeIcon: none;
|
||||
|
||||
// Images
|
||||
$colorThumbHoverBg: $colorItemTreeHoverBg;
|
||||
|
||||
// Scrollbar
|
||||
$scrollbarTrackSize: 7px;
|
||||
$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
|
||||
$scrollbarTrackColorBg: rgba(#000, 0.2);
|
||||
$scrollbarThumbColor: darken($colorBodyBg, 50%);
|
||||
$scrollbarThumbColorHov: $colorKey;
|
||||
$scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
|
||||
$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
|
||||
$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
|
||||
$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
|
||||
|
||||
// Splitter
|
||||
$splitterD: 7px;
|
||||
$splitterHandleD: 2px;
|
||||
$splitterGrippyD: ($splitterHandleD - 4, 75px, 50px); // thickness, length, min-length
|
||||
$colorSplitterBaseBg: $colorBodyBg;
|
||||
$colorSplitterBg: pullForward($colorSplitterBaseBg, 20%);
|
||||
$colorSplitterFg: $colorBodyBg;
|
||||
$colorSplitterHover: $colorKey; // pullForward($colorSplitterBg, $hoverRatioPercent * 2);
|
||||
$colorSplitterActive: $colorKey;
|
||||
$splitterBtnD: (16px, 35px);
|
||||
$splitterBtnColorBg: #eee;
|
||||
$splitterBtnColorFg: #999;
|
||||
$splitterBtnColorHoverBg: rgba($colorKey, 1);
|
||||
$splitterBtnColorHoverFg: $colorBodyBg;
|
||||
$colorSplitterGrippy: pullForward($colorSplitterBaseBg, 30%);
|
||||
$splitterShdw: none;
|
||||
$splitterEndCr: none;
|
||||
|
||||
// Minitabs
|
||||
$colorMiniTabBg: $colorSplitterBg;
|
||||
$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
|
||||
$colorMiniTabBgHov: $colorSplitterHover;
|
||||
$colorMiniTabFgHov: #fff;
|
||||
|
||||
// Mobile
|
||||
$colorMobilePaneLeft: darken($colorBodyBg, 2%);
|
||||
$colorMobilePaneLeftTreeItemBg: rgba($colorBodyFg, 0.1); //pullForward($colorMobilePaneLeft, 3%);
|
||||
$colorMobilePaneLeftTreeItemFg: $colorItemTreeFg;
|
||||
$colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
|
||||
|
||||
// Datetime Picker, Calendar
|
||||
$colorCalCellHovBg: $colorKey;
|
||||
$colorCalCellHovFg: $colorKeyFg;
|
||||
$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
|
||||
$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
|
||||
$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
|
||||
|
||||
// Palettes
|
||||
$colorPaletteFg: pullForward($colorMenuBg, 30%);
|
||||
$colorPaletteSelected: #333;
|
||||
$shdwPaletteFg: none;
|
||||
$shdwPaletteSelected: inset 0 0 0 1px #fff;
|
||||
|
||||
// About Screen
|
||||
$colorAboutLink: #84b3ff;
|
||||
|
||||
// Loading
|
||||
$colorLoadingFg: $colorAlt1;
|
||||
$colorLoadingBg: rgba($colorLoadingFg, 0.1);
|
||||
|
||||
// Transitions
|
||||
$transIn: all 50ms ease-in;
|
||||
$transOut: all 250ms ease-out;
|
||||
145
src/styles-new/_constants.scss
Normal file
145
src/styles-new/_constants.scss
Normal file
@@ -0,0 +1,145 @@
|
||||
/************************** PATHS */
|
||||
// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
|
||||
$dirFonts: 'fonts/';
|
||||
$dirImgs: 'images/';
|
||||
|
||||
/************************** TIMINGS */
|
||||
$controlFadeMs: 100ms;
|
||||
$browseToEditAnimMs: 400ms;
|
||||
$editBorderPulseMs: 500ms;
|
||||
|
||||
/************************** SPATIAL */
|
||||
$interiorMarginSm: 3px;
|
||||
$interiorMargin: 5px;
|
||||
$interiorMarginLg: 10px;
|
||||
$inputTextPTopBtm: 2px;
|
||||
$inputTextPLeftRight: 5px;
|
||||
$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
|
||||
$treeItemIndent: 16px;
|
||||
$treeTypeIconW: 18px;
|
||||
/*************** Items */
|
||||
$itemPadLR: 5px;
|
||||
$ueBrowseGridItemLg: 200px;
|
||||
/*************** Tabular */
|
||||
$tabularHeaderH: 22px;
|
||||
$tabularTdPadLR: $itemPadLR;
|
||||
$tabularTdPadTB: 2px;
|
||||
|
||||
|
||||
/************************** VISUAL */
|
||||
$controlDisabledOpacity: 0.3;
|
||||
|
||||
/************************** GLYPH CHAR UNICODES */
|
||||
$glyph-icon-alert-rect: '\e900';
|
||||
$glyph-icon-alert-triangle: '\e901';
|
||||
$glyph-icon-arrow-down: '\e902';
|
||||
$glyph-icon-arrow-left: '\e903';
|
||||
$glyph-icon-arrow-right: '\e904';
|
||||
$glyph-icon-arrow-double-up: '\e905';
|
||||
$glyph-icon-arrow-tall-up: '\e906';
|
||||
$glyph-icon-arrow-tall-down: '\e907';
|
||||
$glyph-icon-arrow-double-down: '\e908';
|
||||
$glyph-icon-arrow-up: '\e909';
|
||||
$glyph-icon-asterisk: '\e910';
|
||||
$glyph-icon-bell: '\e911';
|
||||
$glyph-icon-box: '\e912';
|
||||
$glyph-icon-box-with-arrow: '\e913';
|
||||
$glyph-icon-check: '\e914';
|
||||
$glyph-icon-connectivity: '\e915';
|
||||
$glyph-icon-database-in-brackets: '\e916';
|
||||
$glyph-icon-eye-open: '\e917';
|
||||
$glyph-icon-gear: '\e918';
|
||||
$glyph-icon-hourglass: '\e919';
|
||||
$glyph-icon-info: '\e920';
|
||||
$glyph-icon-link: '\e921';
|
||||
$glyph-icon-lock: '\e922';
|
||||
$glyph-icon-minus: '\e923';
|
||||
$glyph-icon-people: '\e924';
|
||||
$glyph-icon-person: '\e925';
|
||||
$glyph-icon-plus: '\e926';
|
||||
$glyph-icon-trash: '\e927';
|
||||
$glyph-icon-x: '\e928';
|
||||
$glyph-icon-brackets: '\e929';
|
||||
$glyph-icon-crosshair: '\e930';
|
||||
$glyph-icon-grippy: '\e931';
|
||||
$glyph-icon-arrow-right-equilateral: '\e932';
|
||||
$glyph-icon-arrows-out: '\e1000';
|
||||
$glyph-icon-arrows-right-left: '\e1001';
|
||||
$glyph-icon-arrows-up-down: '\e1002';
|
||||
$glyph-icon-bullet: '\e1004';
|
||||
$glyph-icon-calendar: '\e1005';
|
||||
$glyph-icon-chain-links: '\e1006';
|
||||
$glyph-icon-collapse-pane-left: '\e1007';
|
||||
$glyph-icon-collapse-pane-right: '\e1008';
|
||||
$glyph-icon-download: '\e1009';
|
||||
$glyph-icon-duplicate: '\e1010';
|
||||
$glyph-icon-folder-new: '\e1011';
|
||||
$glyph-icon-fullscreen-collapse: '\e1012';
|
||||
$glyph-icon-fullscreen-expand: '\e1013';
|
||||
$glyph-icon-layers: '\e1014';
|
||||
$glyph-icon-line-horz: '\e1015';
|
||||
$glyph-icon-magnify: '\e1016';
|
||||
$glyph-icon-magnify-in: '\e1017';
|
||||
$glyph-icon-magnify-out: '\e1018';
|
||||
$glyph-icon-menu-hamburger: '\e1019';
|
||||
$glyph-icon-move: '\e1020';
|
||||
$glyph-icon-new-window: '\e1021';
|
||||
$glyph-icon-paint-bucket: '\e1022';
|
||||
$glyph-icon-pause: '\e1023';
|
||||
$glyph-icon-pencil: '\e1024';
|
||||
$glyph-icon-play: '\e1025';
|
||||
$glyph-icon-plot-resource: '\e1026';
|
||||
$glyph-icon-pointer-left: '\e1027';
|
||||
$glyph-icon-pointer-right: '\e1028';
|
||||
$glyph-icon-refresh: '\e1029';
|
||||
$glyph-icon-save: '\e1030';
|
||||
$glyph-icon-sine: '\e1031';
|
||||
$glyph-icon-T: '\e1032';
|
||||
$glyph-icon-thumbs-strip: '\e1033';
|
||||
$glyph-icon-two-parts-both: '\e1034';
|
||||
$glyph-icon-two-parts-one-only: '\e1035';
|
||||
$glyph-icon-resync: '\e1036';
|
||||
$glyph-icon-reset: '\e1037';
|
||||
$glyph-icon-x-in-circle: '\e1038';
|
||||
$glyph-icon-brightness: '\e1039';
|
||||
$glyph-icon-contrast: '\e1040';
|
||||
$glyph-icon-expand: '\e1041';
|
||||
$glyph-icon-list-view: '\e1042';
|
||||
$glyph-icon-grid-snap-to: '\e1043';
|
||||
$glyph-icon-grid-snap-no: '\e1044';
|
||||
$glyph-icon-frame-show: '\e1045';
|
||||
$glyph-icon-frame-hide: '\e1046';
|
||||
$glyph-icon-import: '\e1047';
|
||||
$glyph-icon-export: '\e1048';
|
||||
$glyph-icon-activity: '\e1100';
|
||||
$glyph-icon-activity-mode: '\e1101';
|
||||
$glyph-icon-autoflow-tabular: '\e1102';
|
||||
$glyph-icon-clock: '\e1103';
|
||||
$glyph-icon-database: '\e1104';
|
||||
$glyph-icon-database-query: '\e1105';
|
||||
$glyph-icon-dataset: '\e1106';
|
||||
$glyph-icon-datatable: '\e1107';
|
||||
$glyph-icon-dictionary: '\e1108';
|
||||
$glyph-icon-folder: '\e1109';
|
||||
$glyph-icon-image: '\e1110';
|
||||
$glyph-icon-layout: '\e1111';
|
||||
$glyph-icon-object: '\e1112';
|
||||
$glyph-icon-object-unknown: '\e1113';
|
||||
$glyph-icon-packet: '\e1114';
|
||||
$glyph-icon-page: '\e1115';
|
||||
$glyph-icon-plot-overlay: '\e1116';
|
||||
$glyph-icon-plot-stacked: '\e1117';
|
||||
$glyph-icon-session: '\e1118';
|
||||
$glyph-icon-tabular: '\e1119';
|
||||
$glyph-icon-tabular-lad: '\e1120';
|
||||
$glyph-icon-tabular-lad-set: '\e1121';
|
||||
$glyph-icon-tabular-realtime: '\e1122';
|
||||
$glyph-icon-tabular-scrolling: '\e1123';
|
||||
$glyph-icon-telemetry: '\e1124';
|
||||
$glyph-icon-telemetry-panel: '\e1125';
|
||||
$glyph-icon-timeline: '\e1126';
|
||||
$glyph-icon-timer: '\e1127';
|
||||
$glyph-icon-topic: '\e1128';
|
||||
$glyph-icon-box-with-dashed-lines: '\e1129';
|
||||
$glyph-icon-summary-widget: '\e1130';
|
||||
$glyph-icon-notebook: '\e1131';
|
||||
0
src/styles-new/_controls.scss
Normal file
0
src/styles-new/_controls.scss
Normal file
322
src/styles-new/_global.scss
Normal file
322
src/styles-new/_global.scss
Normal file
@@ -0,0 +1,322 @@
|
||||
/************************** FONTS */
|
||||
@font-face {
|
||||
/*
|
||||
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-16px.json to generate font files
|
||||
*/
|
||||
font-family: 'symbolsfont';
|
||||
src: url($dirFonts + 'openmct-symbols-16px.eot');
|
||||
src: url($dirFonts + 'openmct-symbols-16px.eot?#iefix') format('embedded-opentype'),
|
||||
url($dirFonts + 'openmct-symbols-16px.woff') format('woff'),
|
||||
url($dirFonts + 'openmct-symbols-16px.ttf') format('truetype'),
|
||||
url($dirFonts + 'openmct-symbols-16px.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
/*
|
||||
* Use https://icomoon.io/app with icomoon-project-openmct-symbols-12px.json to generate font files
|
||||
*/
|
||||
font-family: 'symbolsfont-12px';
|
||||
src: url($dirFonts + 'openmct-symbols-12px.eot');
|
||||
src: url($dirFonts + 'openmct-symbols-12px.eot?#iefix') format('embedded-opentype'),
|
||||
url($dirFonts + 'openmct-symbols-12px.woff') format('woff'),
|
||||
url($dirFonts + 'openmct-symbols-12px.ttf') format('truetype'),
|
||||
url($dirFonts + 'openmct-symbols-12px.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/******************************* RESETS */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/******************************* UTILITIES */
|
||||
.u-contents {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
/******************************* BROWSER ELEMENTS */
|
||||
body.desktop {
|
||||
::-webkit-scrollbar {
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset $scrollbarTrackShdw;
|
||||
background-color: $scrollbarTrackColorBg;
|
||||
height: $scrollbarTrackSize;
|
||||
width: $scrollbarTrackSize;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
box-sizing: border-box;
|
||||
background: $scrollbarThumbColor;
|
||||
&:hover {
|
||||
background: $scrollbarThumbColorHov;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay ::-webkit-scrollbar-thumb {
|
||||
background: $scrollbarThumbColorOverlay;
|
||||
&:hover {
|
||||
background: $scrollbarThumbColorOverlayHov;
|
||||
}
|
||||
}
|
||||
|
||||
.menu ::-webkit-scrollbar-thumb {
|
||||
background: $scrollbarThumbColorMenu;
|
||||
&:hover {
|
||||
background: $scrollbarThumbColorMenuHov;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** HTML ENTITIES */
|
||||
a {
|
||||
color: $colorA;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $colorAHov;
|
||||
}
|
||||
}
|
||||
|
||||
body, html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
background-color: $colorBodyBg;
|
||||
color: $colorBodyFg;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=search],
|
||||
input[type=number] {
|
||||
@include nice-input();
|
||||
padding: $inputTextP;
|
||||
&.numeric {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
letter-spacing: 0.04em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1em;
|
||||
font-weight: normal !important;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 120%;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: $interiorMarginLg;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/************************** LEGACY */
|
||||
|
||||
mct-container {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: "Lucida Console", monospace;
|
||||
font-size: 0.7em;
|
||||
line-height: 150%;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.codehilite {
|
||||
@extend .code;
|
||||
background-color: rgba($colorBodyFg, 0.1);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.disabled,
|
||||
a.disabled {
|
||||
opacity: $controlDisabledOpacity;
|
||||
pointer-events: none !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
.s-status-missing {
|
||||
// Labels. Expects .s-status-missing to be applied to mct-representation that contains
|
||||
.t-object-label .t-item-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
|
||||
// Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
|
||||
.item .t-item-icon-glyph:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
|
||||
// Object header. Expects .s-status-missing to be applied to mct-representation.object-header
|
||||
&.object-header {
|
||||
.type-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
}
|
||||
|
||||
// Tree item. Expects .s-status-missing to be applied to .tree-item,
|
||||
// and mct-representation.search-item
|
||||
&.tree-item,
|
||||
&.search-item {
|
||||
> .rep-object-label .t-item-icon:before {
|
||||
content: $glyph-icon-object-unknown;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.centered {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-selection {
|
||||
// aka selection = "None". Used in palettes and their menu buttons.
|
||||
$c: red;
|
||||
$s: 48%;
|
||||
$e: 52%;
|
||||
background-image: linear-gradient(-45deg,
|
||||
transparent $s - 5%,
|
||||
$c $s,
|
||||
$c $e,
|
||||
transparent $e + 5%
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.scrolling,
|
||||
.scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.vscroll {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
&.scroll-pad {
|
||||
padding-right: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
.vscroll--persist {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.slidable {
|
||||
cursor: move; // Fallback
|
||||
cursor: grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: -webkit-grab;
|
||||
&.horz {
|
||||
cursor: col-resize;
|
||||
}
|
||||
&.vert {
|
||||
cursor: row-resize;
|
||||
}
|
||||
}
|
||||
|
||||
.no-margin {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ds {
|
||||
box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.hide,
|
||||
.hidden,
|
||||
.t-main-view .hide-in-t-main-view {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hide-nice {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0 !important;
|
||||
transform: scale(0);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sep {
|
||||
color: rgba(#fff, 0.2);
|
||||
}
|
||||
|
||||
.comma-list span {
|
||||
&:not(:first-child) {
|
||||
&:before {
|
||||
content: ', ';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************************** TEMP LEGACY FIXES */
|
||||
.t-imagery {
|
||||
display: contents;
|
||||
}
|
||||
164
src/styles-new/_glyphs.scss
Normal file
164
src/styles-new/_glyphs.scss
Normal file
@@ -0,0 +1,164 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
@mixin glyphBefore($unicode, $family: 'symbolsfont') {
|
||||
&:before {
|
||||
content: $unicode;
|
||||
font-family: $family;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin glyphAfter($unicode, $family: 'symbolsfont') {
|
||||
&:after {
|
||||
content: $unicode;
|
||||
font-family: $family;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="icon-"].labeled {
|
||||
// Moved from .s-button and generalized
|
||||
&:before {
|
||||
// Fend off label from icon when it's included
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** 16 PX CLASSES */
|
||||
|
||||
.icon-alert-rect { @include glyphBefore($glyph-icon-alert-rect); }
|
||||
.icon-alert-triangle { @include glyphBefore($glyph-icon-alert-triangle); }
|
||||
.icon-arrow-down { @include glyphBefore($glyph-icon-arrow-down); }
|
||||
.icon-arrow-left { @include glyphBefore($glyph-icon-arrow-left); }
|
||||
.icon-arrow-right { @include glyphBefore($glyph-icon-arrow-right); }
|
||||
.icon-arrow-double-up { @include glyphBefore($glyph-icon-arrow-double-up); }
|
||||
.icon-arrow-tall-up { @include glyphBefore($glyph-icon-arrow-tall-up); }
|
||||
.icon-arrow-tall-down { @include glyphBefore($glyph-icon-arrow-tall-down); }
|
||||
.icon-arrow-double-down { @include glyphBefore($glyph-icon-arrow-double-down); }
|
||||
.icon-arrow-up { @include glyphBefore($glyph-icon-arrow-up); }
|
||||
.icon-asterisk { @include glyphBefore($glyph-icon-asterisk); }
|
||||
.icon-bell { @include glyphBefore($glyph-icon-bell); }
|
||||
.icon-box { @include glyphBefore($glyph-icon-box); }
|
||||
.icon-box-with-arrow { @include glyphBefore($glyph-icon-box-with-arrow); }
|
||||
.icon-check { @include glyphBefore($glyph-icon-check); }
|
||||
.icon-connectivity { @include glyphBefore($glyph-icon-connectivity); }
|
||||
.icon-database-in-brackets { @include glyphBefore($glyph-icon-database-in-brackets); }
|
||||
.icon-eye-open { @include glyphBefore($glyph-icon-eye-open); }
|
||||
.icon-gear { @include glyphBefore($glyph-icon-gear); }
|
||||
.icon-hourglass { @include glyphBefore($glyph-icon-hourglass); }
|
||||
.icon-info { @include glyphBefore($glyph-icon-info); }
|
||||
.icon-link { @include glyphBefore($glyph-icon-link); }
|
||||
.icon-lock { @include glyphBefore($glyph-icon-lock); }
|
||||
.icon-minus { @include glyphBefore($glyph-icon-minus); }
|
||||
.icon-people { @include glyphBefore($glyph-icon-people); }
|
||||
.icon-person { @include glyphBefore($glyph-icon-person); }
|
||||
.icon-plus { @include glyphBefore($glyph-icon-plus); }
|
||||
.icon-trash { @include glyphBefore($glyph-icon-trash); }
|
||||
.icon-x { @include glyphBefore($glyph-icon-x); }
|
||||
.icon-brackets { @include glyphBefore($glyph-icon-brackets); }
|
||||
.icon-crosshair { @include glyphBefore($glyph-icon-crosshair); }
|
||||
.icon-grippy { @include glyphBefore($glyph-icon-grippy); }
|
||||
.icon-arrow-right-equilateral { @include glyphBefore($glyph-icon-arrow-right-equilateral); }
|
||||
.icon-arrows-out { @include glyphBefore($glyph-icon-arrows-out); }
|
||||
.icon-arrows-right-left { @include glyphBefore($glyph-icon-arrows-right-left); }
|
||||
.icon-arrows-up-down { @include glyphBefore($glyph-icon-arrows-up-down); }
|
||||
.icon-bullet { @include glyphBefore($glyph-icon-bullet); }
|
||||
.icon-calendar { @include glyphBefore($glyph-icon-calendar); }
|
||||
.icon-chain-links { @include glyphBefore($glyph-icon-chain-links); }
|
||||
.icon-collapse-pane-left { @include glyphBefore($glyph-icon-collapse-pane-left); }
|
||||
.icon-collapse-pane-right { @include glyphBefore($glyph-icon-collapse-pane-right); }
|
||||
.icon-download { @include glyphBefore($glyph-icon-download); }
|
||||
.icon-duplicate { @include glyphBefore($glyph-icon-duplicate); }
|
||||
.icon-folder-new { @include glyphBefore($glyph-icon-folder-new); }
|
||||
.icon-fullscreen-collapse { @include glyphBefore($glyph-icon-fullscreen-collapse); }
|
||||
.icon-fullscreen-expand { @include glyphBefore($glyph-icon-fullscreen-expand); }
|
||||
.icon-layers { @include glyphBefore($glyph-icon-layers); }
|
||||
.icon-line-horz { @include glyphBefore($glyph-icon-line-horz); }
|
||||
.icon-magnify { @include glyphBefore($glyph-icon-magnify); }
|
||||
.icon-magnify-in { @include glyphBefore($glyph-icon-magnify-in); }
|
||||
.icon-magnify-out { @include glyphBefore($glyph-icon-magnify-out); }
|
||||
.icon-menu-hamburger { @include glyphBefore($glyph-icon-menu-hamburger); }
|
||||
.icon-move { @include glyphBefore($glyph-icon-move); }
|
||||
.icon-new-window { @include glyphBefore($glyph-icon-new-window); }
|
||||
.icon-paint-bucket { @include glyphBefore($glyph-icon-paint-bucket); }
|
||||
.icon-pause { @include glyphBefore($glyph-icon-pause); }
|
||||
.icon-pencil { @include glyphBefore($glyph-icon-pencil); }
|
||||
.icon-play { @include glyphBefore($glyph-icon-play); }
|
||||
.icon-plot-resource { @include glyphBefore($glyph-icon-plot-resource); }
|
||||
.icon-pointer-left { @include glyphBefore($glyph-icon-pointer-left); }
|
||||
.icon-pointer-right { @include glyphBefore($glyph-icon-pointer-right); }
|
||||
.icon-refresh { @include glyphBefore($glyph-icon-refresh); }
|
||||
.icon-save { @include glyphBefore($glyph-icon-save); }
|
||||
.icon-sine { @include glyphBefore($glyph-icon-sine); }
|
||||
.icon-T { @include glyphBefore($glyph-icon-T); }
|
||||
.icon-thumbs-strip { @include glyphBefore($glyph-icon-thumbs-strip); }
|
||||
.icon-two-parts-both { @include glyphBefore($glyph-icon-two-parts-both); }
|
||||
.icon-two-parts-one-only { @include glyphBefore($glyph-icon-two-parts-one-only); }
|
||||
.icon-resync { @include glyphBefore($glyph-icon-resync); }
|
||||
.icon-reset { @include glyphBefore($glyph-icon-reset); }
|
||||
.icon-x-in-circle { @include glyphBefore($glyph-icon-x-in-circle); }
|
||||
.icon-brightness { @include glyphBefore($glyph-icon-brightness); }
|
||||
.icon-contrast { @include glyphBefore($glyph-icon-contrast); }
|
||||
.icon-expand { @include glyphBefore($glyph-icon-expand); }
|
||||
.icon-list-view { @include glyphBefore($glyph-icon-list-view); }
|
||||
.icon-grid-snap-to { @include glyphBefore($glyph-icon-grid-snap-to); }
|
||||
.icon-grid-snap-no { @include glyphBefore($glyph-icon-grid-snap-no); }
|
||||
.icon-frame-show { @include glyphBefore($glyph-icon-frame-show); }
|
||||
.icon-frame-hide { @include glyphBefore($glyph-icon-frame-hide); }
|
||||
.icon-import { @include glyphBefore($glyph-icon-import); }
|
||||
.icon-export { @include glyphBefore($glyph-icon-export); }
|
||||
.icon-activity { @include glyphBefore($glyph-icon-activity); }
|
||||
.icon-activity-mode { @include glyphBefore($glyph-icon-activity-mode); }
|
||||
.icon-autoflow-tabular { @include glyphBefore($glyph-icon-autoflow-tabular); }
|
||||
.icon-clock { @include glyphBefore($glyph-icon-clock); }
|
||||
.icon-database { @include glyphBefore($glyph-icon-database); }
|
||||
.icon-database-query { @include glyphBefore($glyph-icon-database-query); }
|
||||
.icon-dataset { @include glyphBefore($glyph-icon-dataset); }
|
||||
.icon-datatable { @include glyphBefore($glyph-icon-datatable); }
|
||||
.icon-dictionary { @include glyphBefore($glyph-icon-dictionary); }
|
||||
.icon-folder { @include glyphBefore($glyph-icon-folder); }
|
||||
.icon-image { @include glyphBefore($glyph-icon-image); }
|
||||
.icon-layout { @include glyphBefore($glyph-icon-layout); }
|
||||
.icon-object { @include glyphBefore($glyph-icon-object); }
|
||||
.icon-object-unknown { @include glyphBefore($glyph-icon-object-unknown); }
|
||||
.icon-packet { @include glyphBefore($glyph-icon-packet); }
|
||||
.icon-page { @include glyphBefore($glyph-icon-page); }
|
||||
.icon-plot-overlay { @include glyphBefore($glyph-icon-plot-overlay); }
|
||||
.icon-plot-stacked { @include glyphBefore($glyph-icon-plot-stacked); }
|
||||
.icon-session { @include glyphBefore($glyph-icon-session); }
|
||||
.icon-tabular { @include glyphBefore($glyph-icon-tabular); }
|
||||
.icon-tabular-lad { @include glyphBefore($glyph-icon-tabular-lad); }
|
||||
.icon-tabular-lad-set { @include glyphBefore($glyph-icon-tabular-lad-set); }
|
||||
.icon-tabular-realtime { @include glyphBefore($glyph-icon-tabular-realtime); }
|
||||
.icon-tabular-scrolling { @include glyphBefore($glyph-icon-tabular-scrolling); }
|
||||
.icon-telemetry { @include glyphBefore($glyph-icon-telemetry); }
|
||||
.icon-telemetry-panel { @include glyphBefore($glyph-icon-telemetry-panel); }
|
||||
.icon-timeline { @include glyphBefore($glyph-icon-timeline); }
|
||||
.icon-timer { @include glyphBefore($glyph-icon-timer); }
|
||||
.icon-topic { @include glyphBefore($glyph-icon-topic); }
|
||||
.icon-box-with-dashed-lines { @include glyphBefore($glyph-icon-box-with-dashed-lines); }
|
||||
.icon-summary-widget { @include glyphBefore($glyph-icon-summary-widget); }
|
||||
.icon-notebook { @include glyphBefore($glyph-icon-notebook); }
|
||||
|
||||
/************************** 12 PX CLASSES */
|
||||
.icon-crosshair-12px { @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
|
||||
.icon-folder-12px { @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
|
||||
.icon-list-view-12px { @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }
|
||||
.icon-grippy-12px { @include glyphBefore($glyph-icon-grippy,'symbolsfont-12px'); }
|
||||
128
src/styles-new/_mixins.scss
Normal file
128
src/styles-new/_mixins.scss
Normal file
@@ -0,0 +1,128 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT 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 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.
|
||||
*****************************************************************************/
|
||||
|
||||
/************************** VISUALS */
|
||||
@mixin ancillaryIcon($d, $c) {
|
||||
// Used for small icons used in combination with larger icons,
|
||||
// like the link and alert icons in tree items.
|
||||
color: $c;
|
||||
font-size: $d;
|
||||
line-height: $d;
|
||||
height: $d;
|
||||
width: $d;
|
||||
}
|
||||
|
||||
@mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
background-image: linear-gradient(-45deg,
|
||||
rgba($c, $a) 25%, transparent 25%,
|
||||
transparent 50%, rgba($c, $a) 50%,
|
||||
rgba($c, $a) 75%, transparent 75%,
|
||||
transparent 100%
|
||||
);
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
|
||||
background-image: linear-gradient($angle,
|
||||
rgba($c, $a) 25%, transparent 25%,
|
||||
transparent 50%, rgba($c, $a) 50%,
|
||||
rgba($c, $a) 75%, transparent 75%,
|
||||
transparent 100%
|
||||
);
|
||||
background-repeat: repeat;
|
||||
background-size: $bgsize $bgsize;
|
||||
}
|
||||
|
||||
@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
|
||||
@include background-image(linear-gradient(-90deg,
|
||||
rgba($c, $a) 0%, rgba($c, $a) 50%,
|
||||
transparent 50%, transparent 100%
|
||||
));
|
||||
background-repeat: repeat;
|
||||
background-size: $d $d;
|
||||
}
|
||||
|
||||
/************************** TEXT */
|
||||
@mixin ellipsize() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin reverseEllipsis() {
|
||||
@include ellipsize();
|
||||
direction: rtl;
|
||||
unicode-bidi:bidi-override;
|
||||
}
|
||||
|
||||
@mixin test($c: #ffcc00, $a: 0.2) {
|
||||
background-color: rgba($c, $a) !important;
|
||||
}
|
||||
|
||||
/************************** CONTROLS, BUTTONS */
|
||||
@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
|
||||
appearance: none;
|
||||
background: $bg;
|
||||
border: none;
|
||||
color: $fg;
|
||||
border-radius: $controlCr;
|
||||
box-shadow: inset $shdw;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $colorFormFieldErrorBg;
|
||||
color: $colorFormFieldErrorFg;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button($bg: $colorBtnBg, $fg: $colorBtnFg, $radius: $controlCr, $shdw: none) {
|
||||
background: $bg;
|
||||
color: $fg;
|
||||
border-radius: $radius;
|
||||
box-shadow: $shdw;
|
||||
}
|
||||
|
||||
/************************** MATH */
|
||||
@function percentToDecimal($p) {
|
||||
@return $p / 100%;
|
||||
}
|
||||
|
||||
@function decimalToPercent($d) {
|
||||
@return percentage($d);
|
||||
}
|
||||
|
||||
/************************** UTILITIES */
|
||||
@mixin browserPrefix($prop, $val) {
|
||||
#{$prop}: $val;
|
||||
-ms-#{$prop}: $val;
|
||||
-moz-#{$prop}: $val;
|
||||
-webkit-#{$prop}: $val;
|
||||
}
|
||||
|
||||
@mixin userSelectNone() {
|
||||
@include browserPrefix(user-select, none);
|
||||
}
|
||||
13
src/styles-new/core.scss
Normal file
13
src/styles-new/core.scss
Normal file
@@ -0,0 +1,13 @@
|
||||
@import "vendor/normalize.min.css";
|
||||
@import "sass-base.scss";
|
||||
|
||||
/******************** RENDERS CSS */
|
||||
@import "glyphs";
|
||||
@import "global";
|
||||
@import "controls";
|
||||
|
||||
/******************** LEGACY CSS */
|
||||
$output-bourbon-deprecation-warnings: false;
|
||||
@import "bourbon";
|
||||
@import "legacy-styles";
|
||||
|
||||
233
src/styles-new/fonts/icomoon-project-openmct-symbols-12px.json
Normal file
233
src/styles-new/fonts/icomoon-project-openmct-symbols-12px.json
Normal file
@@ -0,0 +1,233 @@
|
||||
{
|
||||
"metadata": {
|
||||
"name": "openmct-symbols-12px",
|
||||
"lastOpened": 0,
|
||||
"created": 1527031065005
|
||||
},
|
||||
"iconSets": [
|
||||
{
|
||||
"selection": [
|
||||
{
|
||||
"order": 9,
|
||||
"id": 6,
|
||||
"name": "icon12-crosshair",
|
||||
"prevSize": 12,
|
||||
"code": 59696,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 11,
|
||||
"id": 8,
|
||||
"name": "icon12-grippy",
|
||||
"prevSize": 12,
|
||||
"code": 59697,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 10,
|
||||
"id": 7,
|
||||
"name": "icon12-list-view",
|
||||
"prevSize": 12,
|
||||
"code": 921666,
|
||||
"tempChar": ""
|
||||
},
|
||||
{
|
||||
"order": 6,
|
||||
"id": 3,
|
||||
"prevSize": 12,
|
||||
"code": 921865,
|
||||
"name": "icon12-folder",
|
||||
"tempChar": ""
|
||||
}
|
||||
],
|
||||
"id": 0,
|
||||
"metadata": {
|
||||
"name": "openmct-symbols-12px",
|
||||
"importSize": {
|
||||
"width": 279,
|
||||
"height": 384
|
||||
},
|
||||
"designer": "Charles Hacskaylo"
|
||||
},
|
||||
"height": 1024,
|
||||
"prevSize": 12,
|
||||
"icons": [
|
||||
{
|
||||
"id": 6,
|
||||
"paths": [
|
||||
"M597.333 0h-170.667v256h170.667v-256z",
|
||||
"M1024 426.667h-256v170.667h256v-170.667z",
|
||||
"M597.333 768h-170.667v256h170.667v-256z",
|
||||
"M256 426.667h-256v170.667h256v-170.667z"
|
||||
],
|
||||
"attrs": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon12-crosshair"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"paths": [
|
||||
"M186.347 232.64c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M186.347 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M186.347 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M465.573 93.173c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M465.573 372.4c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M379.028 558.728c51.328 3.652 89.978 48.223 86.325 99.551s-48.223 89.978-99.551 86.325c-51.328-3.652-89.978-48.223-86.325-99.551s48.223-89.978 99.551-86.325z",
|
||||
"M379.017 837.96c51.328 3.652 89.978 48.223 86.325 99.551s-48.223 89.978-99.551 86.325c-51.328-3.652-89.978-48.223-86.325-99.551s48.223-89.978 99.551-86.325z",
|
||||
"M744.773 232.64c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M744.773 511.867c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z",
|
||||
"M744.773 791.36c0 51.458-41.715 93.173-93.173 93.173s-93.173-41.715-93.173-93.173c0-51.458 41.715-93.173 93.173-93.173s93.173 41.715 93.173 93.173z"
|
||||
],
|
||||
"attrs": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"width": 745,
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon12-grippy"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751": [
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"paths": [
|
||||
"M0 0h1024v170.667h-1024v-170.667z",
|
||||
"M0 426.667h1024v170.667h-1024v-170.667z",
|
||||
"M0 853.333h1024v170.667h-1024v-170.667z"
|
||||
],
|
||||
"attrs": [
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
],
|
||||
"isMulticolor": false,
|
||||
"isMulticolor2": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon12-list-view"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751": [
|
||||
{},
|
||||
{},
|
||||
{}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"paths": [
|
||||
"M938.667 170.667h-341.333l-110.32-110.32c-33.2-33.2-98.667-60.347-145.68-60.347h-256c-47.073 0.136-85.197 38.26-85.333 85.32l-0 341.346c0.136-47.073 38.26-85.197 85.32-85.333l853.346-0c47.073 0.136 85.197 38.26 85.333 85.32l0-170.654c-0.136-47.073-38.26-85.197-85.32-85.333z",
|
||||
"M85.333 426.667h853.333c47.128 0 85.333 38.205 85.333 85.333v426.667c0 47.128-38.205 85.333-85.333 85.333h-853.333c-47.128 0-85.333-38.205-85.333-85.333v-426.667c0-47.128 38.205-85.333 85.333-85.333z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"grid": 0,
|
||||
"tags": [
|
||||
"icon12-folder"
|
||||
],
|
||||
"colorPermutations": {
|
||||
"1161751": [
|
||||
{
|
||||
"f": 0
|
||||
},
|
||||
{
|
||||
"f": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
"invisible": false,
|
||||
"colorThemes": [
|
||||
[
|
||||
[
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1
|
||||
],
|
||||
[
|
||||
0,
|
||||
161,
|
||||
75,
|
||||
1
|
||||
]
|
||||
]
|
||||
],
|
||||
"colorThemeIdx": 0
|
||||
}
|
||||
],
|
||||
"preferences": {
|
||||
"showGlyphs": true,
|
||||
"showCodes": true,
|
||||
"showQuickUse": true,
|
||||
"showQuickUse2": true,
|
||||
"showSVGs": true,
|
||||
"fontPref": {
|
||||
"prefix": "icon-",
|
||||
"metadata": {
|
||||
"fontFamily": "openmct-symbols-12px",
|
||||
"majorVersion": 1,
|
||||
"minorVersion": 0
|
||||
},
|
||||
"metrics": {
|
||||
"emSize": 1024,
|
||||
"baseline": 6.25,
|
||||
"whitespace": 50
|
||||
},
|
||||
"embed": false
|
||||
},
|
||||
"imagePref": {
|
||||
"prefix": "icon-",
|
||||
"png": true,
|
||||
"useClassSelector": true,
|
||||
"color": 0,
|
||||
"bgColor": 16777215
|
||||
},
|
||||
"historySize": 100,
|
||||
"gridSize": 16
|
||||
},
|
||||
"uid": -1
|
||||
}
|
||||
3760
src/styles-new/fonts/icomoon-project-openmct-symbols-16px.json
Normal file
3760
src/styles-new/fonts/icomoon-project-openmct-symbols-16px.json
Normal file
File diff suppressed because it is too large
Load Diff
BIN
src/styles-new/fonts/openmct-symbols-12px.eot
Executable file
BIN
src/styles-new/fonts/openmct-symbols-12px.eot
Executable file
Binary file not shown.
14
src/styles-new/fonts/openmct-symbols-12px.svg
Executable file
14
src/styles-new/fonts/openmct-symbols-12px.svg
Executable file
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="openmct-symbols-12px" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="icon12-crosshair" d="M597.333 938.667h-170.667v-256h170.667v256zM1024 512h-256v-170.667h256v170.667zM597.333 170.667h-170.667v-256h170.667v256zM256 512h-256v-170.667h256v170.667z" />
|
||||
<glyph unicode="" glyph-name="icon12-grippy" horiz-adv-x="745" d="M186.347 706.027c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM186.347 426.8c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM186.347 147.307c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM465.573 845.494c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM465.573 566.267c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM379.028 379.939c51.328-3.652 89.978-48.223 86.325-99.551s-48.223-89.978-99.551-86.325c-51.328 3.652-89.978 48.223-86.325 99.551s48.223 89.978 99.551 86.325zM379.017 100.707c51.328-3.652 89.978-48.223 86.325-99.551s-48.223-89.978-99.551-86.325c-51.328 3.652-89.978 48.223-86.325 99.551s48.223 89.978 99.551 86.325zM744.773 706.027c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM744.773 426.8c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173zM744.773 147.307c0-51.458-41.715-93.173-93.173-93.173s-93.173 41.715-93.173 93.173c0 51.458 41.715 93.173 93.173 93.173s93.173-41.715 93.173-93.173z" />
|
||||
<glyph unicode="󡁂" glyph-name="icon12-list-view" d="M0 938.667h1024v-170.667h-1024v170.667zM0 512h1024v-170.667h-1024v170.667zM0 85.334h1024v-170.667h-1024v170.667z" />
|
||||
<glyph unicode="󡄉" glyph-name="icon12-folder" d="M938.667 768h-341.333l-110.32 110.32c-33.2 33.2-98.667 60.347-145.68 60.347h-256c-47.073-0.136-85.197-38.26-85.333-85.32v-341.346c0.136 47.073 38.26 85.197 85.32 85.333h853.346c47.073-0.136 85.197-38.26 85.333-85.32v170.654c-0.136 47.073-38.26 85.197-85.32 85.333zM85.333 512h853.333c47.128 0 85.333-38.205 85.333-85.333v-426.667c0-47.128-38.205-85.333-85.333-85.333h-853.333c-47.128 0-85.333 38.205-85.333 85.333v426.667c0 47.128 38.205 85.333 85.333 85.333z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/styles-new/fonts/openmct-symbols-12px.ttf
Executable file
BIN
src/styles-new/fonts/openmct-symbols-12px.ttf
Executable file
Binary file not shown.
BIN
src/styles-new/fonts/openmct-symbols-12px.woff
Executable file
BIN
src/styles-new/fonts/openmct-symbols-12px.woff
Executable file
Binary file not shown.
BIN
src/styles-new/fonts/openmct-symbols-16px.eot
Executable file
BIN
src/styles-new/fonts/openmct-symbols-16px.eot
Executable file
Binary file not shown.
123
src/styles-new/fonts/openmct-symbols-16px.svg
Executable file
123
src/styles-new/fonts/openmct-symbols-16px.svg
Executable file
@@ -0,0 +1,123 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="openmct-symbols-16px" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="icon-alert-rect" d="M896 960h-768c-70.6-0.2-127.8-57.4-128-128v-768c0.2-70.6 57.4-127.8 128-128h768c70.6 0.2 127.8 57.4 128 128v768c-0.2 70.6-57.4 127.8-128 128zM576 64h-128v128h128v-128zM597.8 448l-37.8-192h-96l-37.8 192v384h171.8v-384z" />
|
||||
<glyph unicode="" glyph-name="icon-alert-triangle" d="M998.2 111.2l-422.6 739.6c-35 61.2-92 61.2-127 0l-422.8-739.6c-35-61.2-6-111.2 64.4-111.2h843.4c70.6 0 99.6 50 64.6 111.2zM576 64h-128v128h128v-128zM597.8 448l-37.8-192h-96l-37.8 192v256h171.8v-256z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-down" d="M512 192l512 512h-1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-left" d="M256 448l512-512v1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-right" d="M768 448l-512 512v-1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-double-up" d="M510 450l512-512h-1024zM510 962l512-512h-1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-tall-up" d="M512 960l512-1024h-1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-tall-down" d="M512-64l-512 1024h1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-double-down" d="M510 450l-512 512h1024zM510-62l-512 512h1024z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-up" d="M512 704l-512-512h1024z" />
|
||||
<glyph unicode="" glyph-name="icon-asterisk" d="M1004.166 619.542l-97.522 168.916-330.534-229.414 33.414 400.956h-195.048l33.414-400.956-330.534 229.414-97.522-168.916 363.944-171.542-363.944-171.542 97.522-168.916 330.534 229.414-33.414-400.956h195.048l-33.414 400.956 330.534-229.414 97.522 168.916-363.944 171.542z" />
|
||||
<glyph unicode="" glyph-name="icon-bell" d="M512-64c106 0 192 86 192 192h-384c0-106 86-192 192-192zM896 512v64c0 212-172 384-384 384s-384-172-384-384v-64c0-70.6-57.4-128-128-128v-128h1024v128c-70.6 0-128 57.4-128 128z" />
|
||||
<glyph unicode="" glyph-name="icon-box" d="M0 960h1024v-1024h-1024v1024z" />
|
||||
<glyph unicode="" glyph-name="icon-box-with-arrow-cursor" d="M894 962h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h400c-2.2 3.8-4 7.6-5.8 11.4l-255.2 576.8c-21.4 48.4-10.8 105 26.6 142.4 24.4 24.4 57.2 37.4 90.4 37.4 17.4 0 35.2-3.6 51.8-11l576.6-255.4c4-1.8 7.8-3.8 11.4-5.8v400.2c0.2 70.4-57.4 128-127.8 128zM958.6 322.6l-576.6 255.4 255.4-576.6 64.6 128.6 192-192 128 128-192 192z" />
|
||||
<glyph unicode="" glyph-name="icon-check" d="M1024 960l-640-640-384 384v-384l384-384 640 640z" />
|
||||
<glyph unicode="" glyph-name="icon-connectivity" d="M704 384c0-70.4-57.6-128-128-128h-128c-70.4 0-128 57.6-128 128v128c0 70.4 57.6 128 128 128h128c70.4 0 128-57.6 128-128v-128zM1024 448l-192 320v-640zM0 448l192 320v-640z" />
|
||||
<glyph unicode="" glyph-name="icon-database-in-brackets" d="M768 608c0-53.019-114.615-96-256-96s-256 42.981-256 96c0 53.019 114.615 96 256 96s256-42.981 256-96zM768 288v256c0-53-114.6-96-256-96s-256 43-256 96v-256c0-53 114.6-96 256-96s256 43 256 96zM832 960h-128v-192h127.6c0.2 0 0.2-0.2 0.4-0.4v-639.4c0-0.2-0.2-0.2-0.4-0.4h-127.6v-192h128c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192zM192 128.4v639.4c0 0.2 0.2 0.2 0.4 0.4h127.6v191.8h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192h-127.6c-0.2 0-0.4 0.2-0.4 0.4z" />
|
||||
<glyph unicode="" glyph-name="icon-eye-open" d="M512 843.6c-245.8 0-452.2-168-510.8-395.6 58.6-227.4 265-395.6 510.8-395.6s452.2 168 510.8 395.6c-58.6 227.4-265 395.6-510.8 395.6zM829.2 371.6c-22.6-34.4-50.6-64.8-83-90.4-32.8-25.8-69-45.6-108-59.4-40.4-14.2-82.8-21.4-126-21.4s-85.8 7.2-126 21.4c-39 13.8-75.4 33.8-108 59.4-32.4 25.6-60.4 55.8-83 90.4-15.8 24-28.8 49.6-38.6 76.4 10 26.8 23 52.4 38.6 76.4 22.6 34.4 50.6 64.8 83 90.4 32.8 25.8 69 45.6 108 59.4 40.4 14.2 82.8 21.4 126 21.4s85.8-7.2 126-21.4c39-13.8 75.4-33.8 108-59.4 32.4-25.6 60.4-55.8 83-90.4 15.8-24 28.8-49.6 38.6-76.4-9.8-26.8-22.8-52.4-38.6-76.4zM704 448c0-106.039-85.961-192-192-192s-192 85.961-192 192c0 106.039 85.961 192 192 192s192-85.961 192-192z" />
|
||||
<glyph unicode="" glyph-name="icon-gear" d="M1024 384v128l-140.976 35.244c-8.784 32.922-21.818 64.106-38.504 92.918l74.774 124.622-90.51 90.51-124.622-74.774c-28.812 16.686-59.996 29.72-92.918 38.504l-35.244 140.976h-128l-35.244-140.976c-32.922-8.784-64.106-21.818-92.918-38.504l-124.622 74.774-90.51-90.51 74.774-124.622c-16.686-28.812-29.72-59.996-38.504-92.918l-140.976-35.244v-128l140.976-35.244c8.784-32.922 21.818-64.106 38.504-92.918l-74.774-124.622 90.51-90.51 124.622 74.774c28.812-16.686 59.996-29.72 92.918-38.504l35.244-140.976h128l35.244 140.976c32.922 8.784 64.106 21.818 92.918 38.504l124.622-74.774 90.51 90.51-74.774 124.622c16.686 28.812 29.72 59.996 38.504 92.918l140.976 35.244zM704 448c0-106.038-85.962-192-192-192s-192 85.962-192 192 85.962 192 192 192 192-85.962 192-192z" />
|
||||
<glyph unicode="" glyph-name="icon-hourglass" d="M1024 960h-1024c0-282.8 229.2-512 512-512s512 229.2 512 512zM512 576c-102.6 0-199 40-271.6 112.4-41.2 41.2-72 90.2-90.8 143.6h724.6c-18.8-53.4-49.6-102.4-90.8-143.6-72.4-72.4-168.8-112.4-271.4-112.4zM512 448c-282.8 0-512-229.2-512-512h1024c0 282.8-229.2 512-512 512z" />
|
||||
<glyph unicode="" glyph-name="icon-info" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h64v256h256v-256h64v-128z" />
|
||||
<glyph unicode="" glyph-name="icon-link" d="M1024 448l-512 512v-307.2l-512-204.8v-256h512v-256z" />
|
||||
<glyph unicode="" glyph-name="icon-lock" d="M832 576h-32v96c0 158.8-129.2 288-288 288s-288-129.2-288-288v-96h-32c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h640c70.4 0 128 57.6 128 128v384c0 70.4-57.6 128-128 128zM416 672c0 53 43 96 96 96s96-43 96-96v-96h-192v96z" />
|
||||
<glyph unicode="" glyph-name="icon-minus" d="M960 320c35.2 0 64 28.8 64 64v128c0 35.2-28.8 64-64 64h-896c-35.2 0-64-28.8-64-64v-128c0-35.2 28.8-64 64-64h896z" />
|
||||
<glyph unicode="" glyph-name="icon-people" d="M704 640h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM256 640h64c70.4 0 128 57.6 128 128v64c0 70.4-57.6 128-128 128h-64c-70.4 0-128-57.6-128-128v-64c0-70.4 57.6-128 128-128zM832 576h-192c-34.908 0-67.716-9.448-96-25.904 57.278-33.324 96-95.404 96-166.096v-448h384v448c0 105.6-86.4 192-192 192zM384 576h-192c-105.6 0-192-86.4-192-192v-448h576v448c0 105.6-86.4 192-192 192z" />
|
||||
<glyph unicode="" glyph-name="icon-person" d="M768 704c0-105.6-86.4-192-192-192h-128c-105.6 0-192 86.4-192 192v64c0 105.6 86.4 192 192 192h128c105.6 0 192-86.4 192-192v-64zM64-64v192c0 140.8 115.2 256 256 256h384c140.8 0 256-115.2 256-256v-192z" />
|
||||
<glyph unicode="" glyph-name="icon-plus" d="M960 576h-330v320c0 35.2-28.8 64-64 64h-108c-35.2 0-64-28.8-64-64v-320h-330c-35.2 0-64-28.8-64-64v-128c0-35.2 28.8-64 64-64h330v-320c0-35.2 28.8-64 64-64h108c35.2 0 64 28.8 64 64v320h330c35.2 0 64 28.8 64 64v128c0 35.2-28.8 64-64 64z" />
|
||||
<glyph unicode="" glyph-name="icon-trash" d="M832 832h-192.36v64c0 35.2-28.8 64-64 64h-128c-35.2 0-64-28.8-64-64v-64h-191.64c-105.6 0-192-72-192-160s0-160 0-160h64v-384c0-105.6 86.4-192 192-192h512c105.6 0 192 86.4 192 192v384h64c0 0 0 72 0 160s-86.4 160-192 160zM320 128h-128v384h128v-384zM576 128h-128v384h128v-384zM832 128h-128v384h128v-384z" />
|
||||
<glyph unicode="" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
|
||||
<glyph unicode="" glyph-name="icon-brackets" d="M832 960h-192v-192h191.66l0.34-0.34v-639.32l-0.34-0.34h-191.66v-192h192c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM384 128h-191.66l-0.34 0.34v639.32l0.34 0.34h191.66v192h-192c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h192v192z" />
|
||||
<glyph unicode="" glyph-name="icon-crosshair" d="M574 962h-128v-320h128v320zM1022 514h-320v-128h320v128zM574 258h-128v-320h128v320zM318 514h-320v-128h320v128z" />
|
||||
<glyph unicode="" glyph-name="icon-grippy-v2" horiz-adv-x="586" d="M146.4 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM146.4 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 886.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 667.4c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 448c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 228.6c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM365.8 9.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 777.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 557.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 338.2c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2zM585.2 118.8c0-40.427-32.773-73.2-73.2-73.2s-73.2 32.773-73.2 73.2c0 40.427 32.773 73.2 73.2 73.2s73.2-32.773 73.2-73.2z" />
|
||||
<glyph unicode="" glyph-name="icon-arrow-right-equilateral" d="M962 448l-896-512v1024z" />
|
||||
<glyph unicode="󡀀" glyph-name="icon-arrows-out" d="M0 448l256-256v512zM512 960l-256-256h512zM512-64l256 256h-512zM768 704v-512l256 256z" />
|
||||
<glyph unicode="󡀁" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
|
||||
<glyph unicode="󡀂" glyph-name="icon-arrows-up-down" d="M512 960l512-448h-1024zM0 384l512-448 512 448z" />
|
||||
<glyph unicode="󡀄" glyph-name="icon-bullet" d="M832 208c0-44-36-80-80-80h-480c-44 0-80 36-80 80v480c0 44 36 80 80 80h480c44 0 80-36 80-80v-480z" />
|
||||
<glyph unicode="󡀅" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
|
||||
<glyph unicode="󡀆" glyph-name="icon-chain-links" d="M958.4 894.4c-43.8 43.8-101 65.6-158.4 65.6s-114.6-21.8-158.4-65.6l-128-128c-74-74-85.4-187-34-273l-12.8-12.8c-35.4 20.8-75 31.4-114.8 31.4-57.4 0-114.6-21.8-158.4-65.6l-128-128c-87.4-87.4-87.4-229.4 0-316.8 43.8-43.8 101-65.6 158.4-65.6s114.6 21.8 158.4 65.6l128 128c74 74 85.4 187 34 273l12.8 12.8c35.2-21 75-31.6 114.6-31.6 57.4 0 114.6 21.8 158.4 65.6l128 128c87.6 87.6 87.6 229.6 0.2 317zM419.8 220.2l-128-128c-18-18.2-42.2-28.2-67.8-28.2s-49.8 10-67.8 28.2c-37.4 37.4-37.4 98.4 0 135.8l128 128c18.2 18.2 42.2 28.2 67.8 28.2 5.6 0 11.2-0.6 16.8-1.4l-55.6-55.6c-10.4-10.4-16.2-24.2-16.2-38.8s5.8-28.6 16.2-38.8c10.4-10.4 24.2-16.2 38.8-16.2s28.6 5.8 38.8 16.2l55.6 55.6c5.4-30.4-3.6-62.2-26.6-85zM867.8 668.2l-128-128c-18-18.2-42.2-28.2-67.8-28.2-5.6 0-11.2 0.6-16.8 1.4l55.6 55.6c10.4 10.4 16.2 24.2 16.2 38.8s-5.8 28.6-16.2 38.8c-10.4 10.4-24.2 16.2-38.8 16.2s-28.6-5.8-38.8-16.2l-55.6-55.6c-5.2 29.8 3.6 61.6 26.6 84.6l128 128c18 18.4 42.2 28.4 67.8 28.4s49.8-10 67.8-28.2c37.6-37.4 37.6-98.2 0-135.6z" />
|
||||
<glyph unicode="󡀇" glyph-name="icon-pane-collapse-left" horiz-adv-x="832" d="M0 960h192v-1024h-192v1024zM832 704h-256v256l-320-416 320-416v256h256v320z" />
|
||||
<glyph unicode="󡀈" glyph-name="icon-pane-collapse-right" horiz-adv-x="832" d="M640 960h192v-1024h-192v1024zM0 704h256v256l320-416-320-416v256h-256v320z" />
|
||||
<glyph unicode="󡀉" glyph-name="icon-download" d="M832 384v-255.66l-0.34-0.34-639.66 0.34v255.66h-192v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-192zM512 320l448 448h-256v192h-384v-192h-256l448-448z" />
|
||||
<glyph unicode="󡀐" glyph-name="icon-duplicate" d="M640 704v128c0 70.4-57.6 128-128 128h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h128v139.6c0 134.8 109.6 244.4 244.4 244.4h139.6zM896 576h-384c-70.4 0-128-57.6-128-128v-384c0-70.4 57.6-128 128-128h384c70.4 0 128 57.6 128 128v384c0 70.4-57.6 128-128 128z" />
|
||||
<glyph unicode="󡀑" glyph-name="icon-folder-new" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM704 160h-128v-128h-128v128h-128v128h128v128h128v-128h128v-128z" />
|
||||
<glyph unicode="󡀒" glyph-name="icon-fullscreen-expand" d="M192.344 128c-0.118 0.1-0.244 0.224-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192h192v192h-191.656zM192 767.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656zM832 960h-192v-192h191.656c0.118-0.1 0.244-0.226 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192zM832 128.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656z" />
|
||||
<glyph unicode="󡀓" glyph-name="icon-fullscreen-collapse" d="M191.656 128c0.118-0.1 0.244-0.224 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192h-192v-192h191.656zM192 768.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656zM832 576h192v192h-191.656c-0.118 0.1-0.244 0.226-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192zM832 127.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656z" />
|
||||
<glyph unicode="󡀔" glyph-name="icon-layers" d="M1024 576l-512 384-512-384 512-384zM512 64l-426.666 320-85.334-64 512-384 512 384-85.334 64z" />
|
||||
<glyph unicode="󡀕" glyph-name="icon-line-horz" d="M64 384c-35.346 0-64 28.654-64 64s28.654 64 64 64h896c35.346 0 64-28.654 64-64s-28.654-64-64-64h-896z" />
|
||||
<glyph unicode="󡀖" glyph-name="icon-magnify" d="M1024 64l-256.8 256.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128zM212.4 340.4c-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0 112.4-294.8 0-407.2c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4z" />
|
||||
<glyph unicode="󡀗" glyph-name="icon-magnify-in" d="M1024 64l-256.86 256.86c40.681 62.963 64.861 139.898 64.861 222.481 0 0.232 0 0.464-0.001 0.696v-0.036c0 229.76-186.24 416-416 416s-416-186.24-416-416 186.24-416 416-416c0.196 0 0.427-0.001 0.659-0.001 82.583 0 159.518 24.18 224.112 65.846l-1.631-0.985 256.86-256.86zM212.36 340.36c-52.114 52.117-84.346 124.114-84.346 203.64 0 159.058 128.942 288 288 288s288-128.942 288-288c0-159.058-128.942-288-288-288-0.005 0-0.010 0-0.014 0h0.001c-0.242-0.001-0.529-0.001-0.815-0.001-79.271 0-151.010 32.251-202.811 84.348l-0.013 0.014zM224 608h384v-128h-384v128zM352 736h128v-384h-128v384z" />
|
||||
<glyph unicode="󡀘" glyph-name="icon-magnify-out" d="M767.2 320.8c42.4 66.6 65 144 64.8 223.2 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c79-0.2 156.4 22.4 223.2 64.8l256.8-256.8 128 128-256.8 256.8zM619.6 340.4c-54-54-127.2-84.4-203.6-84.4-76.4-0.2-149.8 30.2-203.6 84.4-112.4 112.4-112.4 294.8 0 407.2s294.8 112.4 407.2 0c112.4-112.4 112.4-294.8 0-407.2zM224 608h384v-128h-384v128z" />
|
||||
<glyph unicode="󡀙" glyph-name="icon-menu" d="M0 832h1024v-128h-1024v128zM0 512h1024v-128h-1024v128zM0 192h1024v-128h-1024v128z" />
|
||||
<glyph unicode="󡀠" glyph-name="icon-move" d="M293.4 448l218.6 218.6 256-256v421.4c0 70.4-57.6 128-128 128h-512c-70.4 0-128-57.6-128-128v-512c0-70.4 57.6-128 128-128h421.4l-256 256zM1024 512h-128v-320l-384 384-128-128 384-384h-320v-128h576z" />
|
||||
<glyph unicode="󡀡" glyph-name="icon-new-window" d="M448 960v-128h320l-384-384 128-128 384 384v-320h128v576zM576 285.726v-157.382c-0.1-0.118-0.226-0.244-0.344-0.344h-383.312c-0.118 0.1-0.244 0.226-0.344 0.344v383.312c0.1 0.118 0.226 0.244 0.344 0.344h157.382l192 192h-349.726c-105.6 0-192-86.4-192-192v-384c0-105.6 86.4-192 192-192h384c105.6 0 192 86.4 192 192v349.726l-192-192z" />
|
||||
<glyph unicode="󡀢" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
|
||||
<glyph unicode="󡀣" glyph-name="icon-pause" d="M126 962h256v-1024h-256v1024zM638 962h256v-1024h-256v1024z" />
|
||||
<glyph unicode="󡀤" glyph-name="icon-pencil" d="M922.344 858.32c-38.612 38.596-81.306 69.232-120.304 86.324-68.848 30.25-104.77 9.078-120.194-6.344l-516.228-516.216-3.136-9.152-162.482-476.932 485.998 165.612 6.73 6.806 509.502 509.506c9.882 9.866 21.768 27.77 21.768 56.578 0.002 50.71-38.996 121.148-101.654 183.818zM237.982 104.34l-69.73 69.728 69.25 203.228 18.498 6.704h64v-128h128v-64l-6.846-18.506-203.172-69.154z" />
|
||||
<glyph unicode="󡀥" glyph-name="icon-play" d="M1024 448l-1024-512v1024z" />
|
||||
<glyph unicode="󡀦" glyph-name="icon-plot-resource" d="M255.884 256c0.040 0.034 0.082 0.074 0.116 0.116v127.884c0 70.58 57.42 128 128 128h255.884c0.040 0.034 0.082 0.074 0.116 0.116v127.884c0 70.58 57.42 128 128 128h143.658c-93.832 117.038-237.98 192-399.658 192-282.77 0-512-229.23-512-512 0-67.904 13.25-132.704 37.256-192h218.628zM768.116 640c-0.040-0.034-0.082-0.074-0.116-0.116v-127.884c0-70.58-57.42-128-128-128h-255.884c-0.040-0.034-0.082-0.074-0.116-0.116v-127.884c0-70.58-57.42-128-128-128h-143.658c93.832-117.038 237.98-192 399.658-192 282.77 0 512 229.23 512 512 0 67.904-13.25 132.704-37.256 192h-218.628z" />
|
||||
<glyph unicode="󡀧" glyph-name="icon-pointer-left" horiz-adv-x="512" d="M510-64l-256 512 256 512h-256l-256-512 256-512z" />
|
||||
<glyph unicode="󡀨" glyph-name="icon-pointer-right" horiz-adv-x="512" d="M-2 960l256-512-256-512h256l256 512-256 512z" />
|
||||
<glyph unicode="󡀩" glyph-name="icon-refresh" d="M960 528v432l-164.8-164.8c-79.8 65.2-178.8 100.8-283.2 100.8-119.6 0-232.2-46.6-316.8-131.2s-131.2-197.2-131.2-316.8 46.6-232.2 131.2-316.8c84.6-84.6 197.2-131.2 316.8-131.2s232.2 46.6 316.8 131.2c69.4 69.4 113.2 157.4 126.6 252.8h-130c-29.8-145.8-159-256-313.6-256-176.4 0-320 143.6-320 320s143.8 320 320.2 320c72 0 138.4-23.8 192-64l-176-176h432z" />
|
||||
<glyph unicode="󡀰" glyph-name="icon-save" d="M192.2 384c-0.2 0-0.2 0 0 0l-0.2-448h640v447.8c0 0 0 0-0.2 0.2h-639.6zM978.8 749.2l-165.4 165.4c-25 25-74.2 45.4-109.4 45.4h-576c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128v448c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64v-448c70.4 0 128 57.6 128 128v576c0 35.2-20.4 84.4-45.2 109.2zM704 704c0-35.2-28.8-64-64-64h-448c-35.2 0-64 28.8-64 64v192h320v-192h128v192h128v-192z" />
|
||||
<glyph unicode="󡀱" glyph-name="icon-sine" d="M1022.294 448c-1.746 7.196-3.476 14.452-5.186 21.786-20.036 85.992-53.302 208.976-98 306.538-22.42 48.938-45.298 86.556-69.946 115.006-48.454 55.93-98.176 67.67-131.356 67.67s-82.902-11.74-131.356-67.672c-24.648-28.45-47.528-66.068-69.948-115.006-44.696-97.558-77.962-220.544-98-306.538-21.646-92.898-46.444-175.138-71.71-237.836-16.308-40.46-30.222-66.358-40.6-82.604-10.378 16.246-24.292 42.142-40.6 82.604-23.272 57.75-46.144 132.088-66.524 216.052h-197.362c1.746-7.196 3.476-14.452 5.186-21.786 20.036-85.992 53.302-208.976 98-306.538 22.42-48.938 45.298-86.556 69.946-115.006 48.454-55.932 98.176-67.672 131.356-67.672s82.902 11.74 131.356 67.672c24.648 28.45 47.528 66.068 69.948 115.006 44.696 97.558 77.962 220.544 98 306.538 21.646 92.898 46.444 175.138 71.71 237.836 16.308 40.46 30.222 66.358 40.6 82.604 10.378-16.246 24.292-42.142 40.6-82.604 23.274-57.748 46.146-132.086 66.526-216.050h197.36z" />
|
||||
<glyph unicode="󡀲" glyph-name="icon-T" d="M0 960v-256h128v64h256v-704h-192v-128h640v128h-192v704h256v-64h128v256z" />
|
||||
<glyph unicode="󡀳" glyph-name="icon-thumbs-strip" d="M448 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 578c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM448 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320zM1024 2c0-35.2-28.8-64-64-64h-320c-35.2 0-64 28.8-64 64v320c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64v-320z" />
|
||||
<glyph unicode="󡀴" glyph-name="icon-two-parts-both" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM128 832h320v-768h-320v768zM896 64h-320v768h320v-768z" />
|
||||
<glyph unicode="󡀵" glyph-name="icon-two-parts-one-only" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 64h-320v768h320v-768z" />
|
||||
<glyph unicode="󡀶" glyph-name="icon-resync" d="M795.2 795.2c-79.8 65.2-178.8 100.8-283.2 100.8-119.6 0-232.2-46.6-316.8-131.2-69.4-69.4-113.2-157.4-126.6-252.8h130c29.6 145.8 158.8 256 313.4 256 72 0 138.4-23.8 192-64l-176-176h432v432l-164.8-164.8zM512 128c-72 0-138.4 23.8-192 64l176 176h-432v-432l164.8 164.8c79.8-65.2 178.8-100.8 283.2-100.8 119.6 0 232.2 46.6 316.8 131.2 69.4 69.4 113.2 157.4 126.6 252.8h-130c-29.6-145.8-158.8-256-313.4-256z" />
|
||||
<glyph unicode="󡀷" glyph-name="icon-reset" d="M460.8 499.2l-187.8 187.8c57.2 42.8 128 68.2 204.8 68.2 188.2 0 341.6-153.2 341.6-341.4s-153.2-341.2-341.4-341.2c-165 0-302.8 117.6-334.6 273h-138.4c14.2-101.8 61-195.6 135-269.6 90.2-90.2 210.4-140 338-140s247.6 49.8 338 140 140 210.4 140 338-49.8 247.6-140 338-210.4 140-338 140c-111.4 0-217-38-302-107.6l-176 175.6v-460.8h460.8z" />
|
||||
<glyph unicode="󡀸" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
|
||||
<glyph unicode="󡀹" glyph-name="icon-brightness" d="M253.414 641.939l-155.172 116.384c-50.233-66.209-85.127-146.713-97.91-234.39l191.586-30.216c8.145 56.552 29.998 106.879 62.068 149.006zM191.98 402.283l-191.919-27.434c13.115-90.459 48.009-170.963 99.174-238.453l154.18 117.665c-31.476 41.347-53.309 91.675-61.231 146.504zM466.283 768.020l-27.434 191.919c-90.459-13.115-170.963-48.009-238.453-99.174l117.665-154.18c41.347 31.476 91.675 53.309 146.504 61.231zM822.323 861.758c-66.209 50.233-146.713 85.127-234.39 97.91l-30.216-191.586c56.552-8.145 106.879-29.998 149.006-62.068zM832.020 493.717l191.919 27.434c-13.115 90.459-48.009 170.963-99.174 238.453l-154.18-117.665c31.476-41.347 53.309-91.675 61.231-146.504zM201.677 34.242c66.209-50.233 146.713-85.127 234.39-97.91l30.216 191.586c-56.552 8.145-106.879 29.998-149.006 62.068zM770.586 254.061l155.131-116.343c50.233 66.209 85.127 146.713 97.91 234.39l-191.586 30.216c-8.125-56.564-29.966-106.906-62.028-149.049zM557.717 127.98l27.434-191.919c90.459 13.115 170.963 48.009 238.453 99.174l-117.665 154.18c-41.347-31.476-91.675-53.309-146.504-61.231zM770.586 448c0-142.813-115.773-258.586-258.586-258.586s-258.586 115.773-258.586 258.586c0 142.813 115.773 258.586 258.586 258.586s258.586-115.773 258.586-258.586z" />
|
||||
<glyph unicode="󡁀" glyph-name="icon-contrast" d="M512 960c-282.78 0-512-229.24-512-512s229.22-512 512-512 512 229.24 512 512-229.22 512-512 512zM783.52 176.48c-69.111-69.481-164.785-112.481-270.502-112.481-0.358 0-0.716 0-1.074 0.001l0.055 768c212.070-0.010 383.982-171.929 383.982-384 0-106.034-42.977-202.031-112.462-271.52z" />
|
||||
<glyph unicode="󡁁" glyph-name="icon-expand" d="M960 960c0 0 0 0 0 0h-320v-128h165.4l-210.6-210.8c-25-25-25-65.6 0-90.6 12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8l210.8 210.8v-165.4h128v384h-64zM896 154.6l-210.8 210.6c-25 25-65.6 25-90.6 0s-25-65.6 0-90.6l210.8-210.6h-165.4v-128h384v384h-128v-165.4zM218.6 832h165.4v128h-320c0 0 0 0 0 0h-64v-384h128v165.4l210.8-210.8c12.4-12.4 28.8-18.8 45.2-18.8s32.8 6.2 45.2 18.8c25 25 25 65.6 0 90.6l-210.6 210.8zM338.8 365.2l-210.8-210.6v165.4h-128v-384h384v128h-165.4l210.8 210.8c25 25 25 65.6 0 90.6-25.2 24.8-65.6 24.8-90.6-0.2z" />
|
||||
<glyph unicode="󡁂" glyph-name="icon-list-view" d="M0 896h1024v-128h-1024v128zM0 640h1024v-128h-1024v128zM0 384h1024v-128h-1024v128zM0 128h1024v-128h-1024v128z" />
|
||||
<glyph unicode="󡁃" glyph-name="icon-grid-snap-to" d="M382 130h448v448h-448v-448zM510 450h192v-192h-192v192zM-2 386h320v-64h-320v64zM894 386h128v-64h-128v64zM574 962h64v-320h-64v320zM574 66h64v-128h-64v128zM574 386h64v-64h-64v64z" />
|
||||
<glyph unicode="󡁄" glyph-name="icon-grid-snap-no" d="M768 384h192v-64h-192v64zM256 384h192v-64h-192v64zM0 384h192v-64h-192v64zM640 448h-64v-64h-64v-64h64v-64h64v64h64v64h-64zM576 704h64v-192h-64v192zM576 960h64v-192h-64v192zM576 192h64v-192h-64v192z" />
|
||||
<glyph unicode="󡁅" glyph-name="icon-frame-show" d="M0 896v-896h1024v896h-1024zM896 128h-768v640h768v-640zM192 704h384v-128h-384v128z" />
|
||||
<glyph unicode="󡁆" glyph-name="icon-frame-hide" d="M128 770h420l104 128h-652v-802.4l128 157.4zM896 130h-420l-104-128h652v802.4l-128-157.4zM832 962l-832-1024h192l832 1024zM392 578l104 128h-304v-128z" />
|
||||
<glyph unicode="󡁇" glyph-name="icon-import" d="M832 767.6v-639.4c0-0.2-0.2-0.2-0.4-0.4h-319.6v-192h320c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192h-320v-192h319.6c0.2 0 0.4-0.2 0.4-0.4zM192 256v-192l384 384-384 384v-192h-192v-384z" />
|
||||
<glyph unicode="󡁈" glyph-name="icon-export" d="M192 128.34v639.32l0.34 0.34h319.66v192h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h320v192h-319.66zM1024 448l-384 384v-192h-192v-384h192v-192l384 384z" />
|
||||
<glyph unicode="󡄀" glyph-name="icon-activity" d="M576 896h-256l320-320h-290.256c-44.264 76.516-126.99 128-221.744 128h-128v-512h128c94.754 0 177.48 51.484 221.744 128h290.256l-320-320h256l448 448-448 448z" />
|
||||
<glyph unicode="󡄁" glyph-name="icon-activity-mode" d="M512 960c-214.866 0-398.786-132.372-474.744-320h90.744c56.86 0 107.938-24.724 143.094-64h240.906l-192 192h256l320-320-320-320h-256l192 192h-240.906c-35.156-39.276-86.234-64-143.094-64h-90.744c75.958-187.628 259.878-320 474.744-320 282.77 0 512 229.23 512 512s-229.23 512-512 512z" />
|
||||
<glyph unicode="󡄂" glyph-name="icon-autoflow-tabular" d="M192 960c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h64v1024h-64zM384 960h256v-1024h-256v1024zM832 960h-64v-704h256v512c0 105.6-86.4 192-192 192z" />
|
||||
<glyph unicode="󡄃" glyph-name="icon-clock" d="M512 960c-282.76 0-512-229.24-512-512s229.24-512 512-512 512 229.24 512 512-229.24 512-512 512zM782 270c-12.681-21.673-35.844-36-62.354-36-0.023 0-0.047 0-0.070 0-0.016 0-0.040 0-0.064 0-13.234 0-25.63 3.587-36.269 9.843l-221.644 127.977q-1.2 0.7-2.38 1.46l-0.86 0.56-1.86 1.28-1.26 0.9-1.26 0.96-1.7 1.34-0.64 0.54c-0.72 0.6-1.44 1.22-2.14 1.84v0c-5.012 4.562-9.331 9.758-12.863 15.491-0.457 0.769-0.717 1.249-0.997 1.709s-0.58 0.98-0.86 1.48c-3.092 5.53-5.561 11.936-7.071 18.704l-0.089 0.596c-0.2 0.92-0.38 1.84-0.54 2.76 0 0.28-0.1 0.56-0.16 0.84-0.12 0.7-0.22 1.42-0.3 2.14s-0.14 1.040-0.2 1.58-0.1 1.020-0.14 1.54-0.12 1.5-0.18 2.24c0 0.34 0 0.68 0 1.040q0 1.4 0 2.78c0 0.1 0 0.22 0 0.32v364.080c0 39.765 32.235 72 72 72s72-32.235 72-72v-322.44l185.7-107.22c21.605-12.697 35.879-35.823 35.879-62.284 0-13.278-3.594-25.716-9.862-36.395z" />
|
||||
<glyph unicode="󡄄" glyph-name="icon-database" d="M1024 768c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 448c-282.77 0-512 85.962-512 192v-512c0-106.038 229.23-192 512-192s512 85.962 512 192v512c0-106.038-229.23-192-512-192z" />
|
||||
<glyph unicode="󡄅" glyph-name="icon-database-query" d="M683.52 140.714c-50.782-28.456-109.284-44.714-171.52-44.714-194.094 0-352 157.906-352 352s157.906 352 352 352 352-157.906 352-352c0-62.236-16.258-120.738-44.714-171.52l191.692-191.692c8.516 13.89 13.022 28.354 13.022 43.212v640c0 106.038-229.23 192-512 192s-512-85.962-512-192v-640c0-106.038 229.23-192 512-192 126.11 0 241.548 17.108 330.776 45.46l-159.256 159.254zM352 448c0-88.224 71.776-160 160-160s160 71.776 160 160-71.776 160-160 160-160-71.776-160-160z" />
|
||||
<glyph unicode="󡄆" glyph-name="icon-dataset" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128zM320 64h-128v320h128v-320zM576 64h-128v320h128v-320zM832 64h-128v320h128v-320z" />
|
||||
<glyph unicode="󡄇" glyph-name="icon-datatable" d="M1024 768c0-106.039-229.23-192-512-192s-512 85.961-512 192c0 106.039 229.23 192 512 192s512-85.961 512-192zM512 448c-282.8 0-512 86-512 192v-512c0-106 229.2-192 512-192s512 86 512 192v512c0-106-229.2-192-512-192zM896 385v-256c-36.6-15.6-79.8-28.8-128-39.4v256c48.2 10.6 91.4 23.8 128 39.4zM256 345.6v-256c-48.2 10.4-91.4 23.8-128 39.4v256c36.6-15.6 79.8-28.8 128-39.4zM384 70v256c41-4 83.8-6 128-6s87 2.2 128 6v-256c-41-4-83.8-6-128-6s-87 2.2-128 6z" />
|
||||
<glyph unicode="󡄈" glyph-name="icon-dictionary" d="M832 320c105.6 0 192 86.4 192 192v256c0 105.6-86.4 192-192 192v-320l-128 64-128-64v320h-384c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v192c0-105.6-86.4-192-192-192h-640v192h640z" />
|
||||
<glyph unicode="󡄉" glyph-name="icon-folder" d="M896 768h-320c-16.4 16.4-96.8 96.8-109.2 109.2l-37.4 37.4c-25 25-74.2 45.4-109.4 45.4h-256c-35.2 0-64-28.8-64-64v-384c0 70.4 57.6 128 128 128h768c70.4 0 128-57.6 128-128v128c0 70.4-57.6 128-128 128zM896 512h-768c-70.4 0-128-57.6-128-128v-320c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v320c0 70.4-57.6 128-128 128z" />
|
||||
<glyph unicode="󡄐" glyph-name="icon-image" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 64h-768v768h768v-768zM320 704l-128-128v-448h640v320l-128 128-128-128z" />
|
||||
<glyph unicode="󡄑" glyph-name="icon-layout" d="M448 960h-256c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h256v1024zM832 960h-256v-577.664h448v385.664c0 105.6-86.4 192-192 192zM576-64h256c105.6 0 192 86.4 192 192v129.664h-448v-321.664z" />
|
||||
<glyph unicode="󡄒" glyph-name="icon-object" d="M512-64l512 320v384l-512.020 320-511.98-320v-384l512-320zM512 768l358.4-224-358.4-224-358.4 224 358.4 224z" />
|
||||
<glyph unicode="󡄓" glyph-name="icon-object-unknown" d="M510 962l-512-320v-384l512-320 512 320v384l-512 320zM585.4 100.8c-21.2-20.8-46-30.8-76-30.8-31.2 0-56.2 9.8-76.2 29.6-20 20-29.6 44.8-29.6 76.2 0 30.4 10.2 55.2 31 76.2s45.2 31.2 74.8 31.2c29.6 0 54.2-10.4 75.6-32s31.8-46.4 31.8-76c-0.2-29-10.8-54-31.4-74.4zM638.2 413.4c-23.6-11.8-37.4-22-43.4-32.4-3.6-6.2-6-14.8-7.4-26.8v-41h-161.4v44.2c0 40.2 4.4 69.8 13 88 8 17.2 22.6 30.2 44.8 40l34.8 15.4c32 14.2 48.2 35.2 48.2 62.8 0 16-6 30.4-17.2 41.8-11.2 11.2-25.6 17.2-41.6 17.2-24 0-54.4-10-62.8-57.4l-2.2-12.2h-147l1.4 16.2c4 44.6 17 82.4 38.8 112.2 19.6 27 45.6 48.6 77 64.6s64.6 24 98.2 24c60.6 0 110.2-19.4 151.4-59.6 41.2-40 61.2-88 61.2-147.2 0-70.8-28.8-121.4-85.8-149.8z" />
|
||||
<glyph unicode="󡄔" glyph-name="icon-packet" d="M511.98 960l-511.98-320v-512c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v512l-512.020 320zM512 768l358.4-224-358.4-224-358.4 224 358.4 224z" />
|
||||
<glyph unicode="󡄕" glyph-name="icon-page" d="M702 452c-105.6 0-192 86.4-192 192v320h-320c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v320h-320zM766 580h256l-384 384v-256c0-70.4 57.6-128 128-128z" />
|
||||
<glyph unicode="󡄖" glyph-name="icon-plot-overlay" d="M830 960h-636c-106.7 0-194-87.3-194-194v-406.82c14.18-18.64 25.66-28.34 32-30.84 14.28 5.62 54.44 47.54 92.96 146 42.46 108.38 116.32 237.66 227.040 237.66 52.4 0 101.42-29.16 145.7-86.68 37.34-48.5 64.84-108.92 81.34-151.080 38.52-98.38 78.68-140.3 92.96-146 14.28 5.62 54.44 47.54 92.96 146 42.46 108.48 116.32 237.76 227.040 237.76 11.354-0.003 22.389-1.366 32.952-3.936l-0.952 57.936c0 106.7-87.3 194-194 194zM992 567.66c-14.28-5.62-54.44-47.52-92.96-146-42.46-108.38-116.32-237.66-227.040-237.66-52.4 0-101.42 29.16-145.7 86.68-37.34 48.5-64.84 108.92-81.34 151.080-38.52 98.38-78.68 140.3-92.96 146-14.28-5.62-54.44-47.52-92.96-146-42.46-108.48-116.32-237.76-227.040-237.76-11.355 0.003-22.389 1.367-32.952 3.936l0.952-57.936c0-106.7 87.3-194 194-194h636c106.7 0 194 87.3 194 194v406.82c-14.18 18.64-25.66 28.34-32 30.84z" />
|
||||
<glyph unicode="󡄗" glyph-name="icon-plot-stacked" d="M89.6 648c24.98 0 48.96 26.52 85.52 70.18 45.42 54.28 102 121.82 196 121.82 44.64 0 86.62-15.46 124.8-46 28.68-22.9 51.16-50.42 72.92-77.060 38.42-46.94 59.16-68.94 83.96-68.94h371.2v118c0 106.7-87.3 194-194 194h-636c-106.7 0-194-87.3-194-194v-118h89.6zM529.5 549.6c-28.24 22.64-50.52 50-72 76.28-35.5 43.48-58.76 70.12-86.3 70.12-25.060 0-49.080-26.54-85.66-70.24-45.4-54.24-102-121.76-196-121.76h-89.54v-112h371.2c44 0 85.54-15.34 123.3-45.6 28.24-22.64 50.52-50 72-76.28 35.5-43.48 58.76-70.12 86.3-70.12 25.060 0 49.080 26.54 85.66 70.24 45.4 54.24 102 121.76 196 121.76h89.54v112h-371.2c-44.060 0-85.54 15.34-123.3 45.6zM934.4 248c-24.98 0-48.96-26.52-85.52-70.18-45.42-54.28-102-121.82-196-121.82-44.64 0-86.62 15.46-124.8 46-28.68 22.9-51.16 50.42-72.92 77.060-38.42 46.94-59.16 68.94-83.96 68.94h-371.2v-118c0-106.7 87.3-194 194-194h636c106.7 0 194 87.3 194 194v118h-89.6z" />
|
||||
<glyph unicode="󡄘" glyph-name="icon-session" d="M635.6 435.6c6.6-4.2 13.2-8.6 19.2-13.6l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l135.2 108c0.2 4.8 0.2 9.4 0.2 14.2 0 52.2-7.8 102.4-22.2 149.8l-154.8-123.6c-58.2-46.6-140.2-59.2-211.4-38.4zM248.6 325.8l120.4 96.4c58 46.4 140 59.2 211.2 38.4-6.6 4.2-13.2 8.6-19.2 13.6l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.6c-40-32-91.4-48-143-48-21.6 0-43 2.8-63.8 8.4 0-0.6 0-1.2 0-1.6 5-3.4 10-6.8 14.6-10.6l120.4-96.4c29.8-23.8 83.8-23.8 113.4 0zM120.6 581.8l120.4 96.4c80.2 64.2 205.6 64.2 285.8 0l120.4-96.4c29.6-23.8 83.8-23.8 113.4 0l181 144.8c-91.2 140.4-249.6 233.4-429.6 233.4-238.6 0-439.2-163.2-496-384.2 30.8-17.6 77.8-15.6 104.6 6zM689 218l-120.4 96.4c-29.6 23.8-83.8 23.8-113.4 0l-120.2-96.4c-40-32-91.4-48-143-48-47.8 0-95.4 13.8-134.2 41.4 85.6-163.6 256.8-275.4 454.2-275.4s368.6 111.8 454.2 275.4c-80.4-57.4-199.8-55.2-277.2 6.6z" />
|
||||
<glyph unicode="󡄙" glyph-name="icon-tabular" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
|
||||
<glyph unicode="󡄠" glyph-name="icon-tabular-lad" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM64 704h256v-192h-256v192zM64 448h256v-192h-256v192zM128 0c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192h-192zM384 0v192h256v-192h-256zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128zM960 448v-192h-576v192h64v64h-64v192h576v-192h-64v-64h64zM782.32 412.62l-110.32 55.16v172.22c0 17.673-14.327 32-32 32s-32-14.327-32-32v-211.78l145.68-72.84c4.172-2.133 9.1-3.383 14.32-3.383 17.675 0 32.003 14.328 32.003 32.003 0 12.454-7.114 23.247-17.501 28.536z" />
|
||||
<glyph unicode="󡄡" glyph-name="icon-tabular-lad-set" d="M128 192v576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979l-576 0.021c-70.606 0.215-127.785 57.394-128 127.979zM896 960h-576c-70.606-0.215-127.785-57.394-128-127.979v-576.021c0.215-70.606 57.394-127.785 127.979-128h576.021c70.606 0.215 127.785 57.394 128 127.979v576.021c-0.215 70.606-57.394 127.785-127.979 128zM256 768h192v-128h-192v128zM256 576h192v-192h-192v192zM320 192c-35.26 0.214-63.786 28.74-64 63.98v64.020h192v-128h-128zM512 192v128h192v-128h-192zM960 256c-0.214-35.26-28.74-63.786-63.98-64h-128.020v128h192v-64zM960 384h-448v384h448v-384zM832 480c0.002 0 0.005 0 0.007 0 17.673 0 32 14.327 32 32 0 14.055-9.062 25.994-21.662 30.293l-74.345 24.767v104.94c0 17.673-14.327 32-32 32s-32-14.327-32-32v-151.060l117.88-39.3c3.018-1.040 6.495-1.64 10.113-1.64 0.003 0 0.005 0 0.008 0z" />
|
||||
<glyph unicode="󡄢" glyph-name="icon-tabular-realtime" d="M896 960h-768c-70.606-0.215-127.785-57.394-128-127.979v-768.021c0.215-70.606 57.394-127.785 127.979-128h768.021c70.606 0.215 127.785 57.394 128 127.979v768.021c-0.215 70.606-57.394 127.785-127.979 128zM448 668l25.060-25.32c7.916-7.922 18.856-12.822 30.94-12.822s23.024 4.9 30.94 12.822l75.5 76.3c29.97 30.338 71.571 49.128 117.56 49.128s87.59-18.79 117.544-49.112l50.456-50.997v-152.2c-24.111 8.83-44.678 22.255-61.542 39.342l-75.518 76.318c-7.916 7.922-18.856 12.822-30.94 12.822s-23.024-4.9-30.94-12.822l-75.5-76.3c-29.971-30.343-71.575-49.137-117.568-49.137-20.084 0-39.331 3.584-57.137 10.146l1.145 151.831zM320 0h-192c-35.26 0.214-63.786 28.74-64 63.98v128.020h256v-192zM320 256h-256v192h256v-192zM320 512h-256v192h256v-192zM640 0h-256v192h256v-192zM448 323.38v174.5c1.88-1.74 3.74-3.5 5.56-5.34l75.5-76.3c7.916-7.922 18.856-12.822 30.94-12.822s23.024 4.9 30.94 12.822l75.5 76.3c29.966 30.333 71.56 49.119 117.542 49.119 43.28 0 82.673-16.644 112.128-43.879l-0.11-174.399c-1.88 1.74-3.74 3.5-5.56 5.34l-75.5 76.3c-7.916 7.922-18.856 12.822-30.94 12.822s-23.024-4.9-30.94-12.822l-75.5-76.3c-29.966-30.333-71.56-49.119-117.542-49.119-43.28 0-82.673 16.644-112.128 43.879zM960 64c-0.214-35.26-28.74-63.786-63.98-64h-192.020v192h256v-128z" />
|
||||
<glyph unicode="󡄣" glyph-name="icon-tabular-scrolling" d="M64 960c-35.2 0-64-28.8-64-64v-192h448v256h-384zM1024 704v192c0 35.2-28.8 64-64 64h-384v-256h448zM0 576v-192c0-35.2 28.8-64 64-64h384v256h-448zM960 320c35.2 0 64 28.8 64 64v192h-448v-256h384zM512-64l-256 256h512z" />
|
||||
<glyph unicode="󡄤" glyph-name="icon-telemetry" d="M32 328.34c14.28 5.62 54.44 47.54 92.96 146 42.46 108.38 116.32 237.66 227.040 237.66 52.4 0 101.42-29.16 145.7-86.68 37.34-48.5 64.84-108.92 81.34-151.080 38.52-98.38 78.68-140.3 92.96-146 14.28 5.62 54.44 47.54 92.96 146 37.4 95.5 99.14 207.14 188.94 232.46-90.462 152.598-254.314 253.3-441.686 253.3-0.075 0-0.15 0-0.226 0-282.748 0-511.988-229.24-511.988-512 0-0.032 0-0.070 0-0.108 0-35.719 3.641-70.587 10.572-104.255 8.968-7.457 16.648-13.417 21.428-15.297zM992 567.66c-14.28-5.62-54.44-47.52-92.96-146-42.46-108.38-116.32-237.66-227.040-237.66-52.4 0-101.42 29.16-145.7 86.68-37.34 48.5-64.84 108.92-81.34 151.080-38.52 98.38-78.68 140.3-92.96 146-14.28-5.62-54.44-47.52-92.96-146-37.4-95.5-99.14-207.14-188.94-232.46 90.462-152.598 254.314-253.3 441.686-253.3 0.075 0 0.15 0 0.226 0 282.748 0 511.988 229.24 511.988 512 0 0.032 0 0.070 0 0.108 0 35.719-3.641 70.587-10.572 104.255-8.968 7.457-16.648 13.417-21.428 15.297z" />
|
||||
<glyph unicode="󡄥" glyph-name="icon-telemetry-panel" d="M169.2 512c14 56.4 33 122 56.6 176.8 15.4 35.8 31.2 63.2 48.2 84 18.4 22.4 49 49.2 91 49.2s72.6-26.8 91-49.2c17-20.6 32.6-48.2 48.2-84 23.6-54.8 42.8-120.4 56.6-176.8h461.2v256c0 105.6-86.4 192-192 192h-640c-105.6 0-192-86.4-192-192v-256h171.2zM718.6 384h-127.2c25-93.4 48.4-144.4 63.6-168.6 15.2 24.2 38.6 75.2 63.6 168.6zM301.4 512h127.2c-25 93.4-48.4 144.4-63.6 168.6-15.2-24.2-38.6-75.2-63.6-168.6zM850.8 384c-14-56.4-33-122-56.6-176.8-15.4-35.8-31.2-63.2-48.2-84-18.4-22.4-49-49.2-91-49.2s-72.6 26.8-91 49.2c-17 20.6-32.6 48.2-48.2 84-23.6 54.8-42.8 120.4-56.6 176.8h-461.2v-256c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v256h-171.2z" />
|
||||
<glyph unicode="󡄦" glyph-name="icon-timeline" d="M256 704h384v-128h-384v128zM384 512h384v-128h-384v128zM320 320h384v-128h-384v128zM832 960h-128v-192h127.6c0.2 0 0.2-0.2 0.4-0.4v-639.4c0-0.2-0.2-0.2-0.4-0.4h-127.6v-192h128c105.6 0 192 86.4 192 192v640.2c0 105.6-86.4 192-192 192zM192 128.4v639.2c0 0.2 0.2 0.2 0.4 0.4h127.6v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192h-127.6c-0.2 0-0.4 0.2-0.4 0.4z" />
|
||||
<glyph unicode="󡄧" glyph-name="icon-timer-v1.5" horiz-adv-x="896" d="M576 813.4v82.58c0 35.346-28.654 64-64 64h-128c-35.346 0-64-28.654-64-64v-82.58c-185.040-55.080-320-226.48-320-429.42 0-247.42 200.58-448 448-448s448 200.58 448 448c0 202.96-135 374.4-320 429.42zM468 363.98l-263.76-211c-57.105 59.935-92.24 141.251-92.24 230.772 0 0.080 0 0.16 0 0.24 0 185.268 150.72 335.988 336 335.988 6.72 0 13.38-0.22 20-0.62v-355.38z" />
|
||||
<glyph unicode="󡄨" glyph-name="icon-topic" d="M454.36 483.36l86.3 86.3c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c19.328-19.358 42.832-34.541 69.047-44.082l1.313 171.722-57.64 57.64c-34.407 34.33-81.9 55.558-134.35 55.558s-99.943-21.228-134.354-55.562l-86.296-86.297c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-28.674 28.654v-172.14c19.045-7.022 41.040-11.084 63.984-11.084 52.463 0 99.966 21.239 134.379 55.587zM505.64 412.64l-86.3-86.3c-9.088-8.965-21.577-14.502-35.36-14.502s-26.272 5.537-35.366 14.507l-86.294 86.294c-2 2-4.2 4-6.36 6v-197.36c33.664-30.72 78.65-49.537 128.031-49.537 52.44 0 99.923 21.22 134.333 55.541l86.296 86.296c9.088 8.965 21.577 14.502 35.36 14.502s26.272-5.537 35.366-14.507l86.294-86.294c2-2 4.2-4 6.36-6v197.36c-33.664 30.72-78.65 49.537-128.031 49.537-52.44 0-99.923-21.22-134.333-55.541zM832 960h-128v-192h127.66l0.34-0.34v-639.32l-0.34-0.34h-127.66v-192h128c105.6 0 192 86.4 192 192v640c0 105.6-86.4 192-192 192zM320 128h-127.66l-0.34 0.34v639.32l0.34 0.34h127.66v192h-128c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h128v192z" />
|
||||
<glyph unicode="󡄩" glyph-name="icon-box-with-dashed-lines" d="M0 576h128v-256h-128v256zM128 831.78l0.22 0.22h191.78v128h-192c-70.606-0.215-127.785-57.394-128-127.979v-192.021h128v191.78zM128 64.22v191.78h-128v-192c0.215-70.606 57.394-127.785 127.979-128h192.021v128h-191.78zM384 960h256v-128h-256v128zM896 64.22l-0.22-0.22h-191.78v-128h192c70.606 0.215 127.785 57.394 128 127.979v192.021h-128v-191.78zM896 960h-192v-128h191.78l0.22-0.22v-191.78h128v192c-0.215 70.606-57.394 127.785-127.979 128zM896 576h128v-256h-128v256zM384 64h256v-128h-256v128zM256 704h512v-512h-512v512z" />
|
||||
<glyph unicode="󡄰" glyph-name="icon-summary-widget" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM847.8 349.6l-82.6-143.2-189.6 131.6 19.2-230h-165.4l19.2 230-189.6-131.6-82.6 143.2 208.6 98.4-208.8 98.4 82.6 143.2 189.6-131.6-19.2 230h165.4l-19.2-230 189.6 131.6 82.6-143.2-208.6-98.4 208.8-98.4z" />
|
||||
<glyph unicode="󡄱" glyph-name="icon-notebook" d="M896 849.2c0 79.8-55.4 127.4-123 105.4l-773-250.6h896v145.2zM896 640h-896v-576c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v448c0 70.4-57.6 128-128 128zM832 128h-384v320h384v-320z" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 44 KiB |
BIN
src/styles-new/fonts/openmct-symbols-16px.ttf
Executable file
BIN
src/styles-new/fonts/openmct-symbols-16px.ttf
Executable file
Binary file not shown.
BIN
src/styles-new/fonts/openmct-symbols-16px.woff
Executable file
BIN
src/styles-new/fonts/openmct-symbols-16px.woff
Executable file
Binary file not shown.
78
src/styles-new/legacy-styles.scss
Normal file
78
src/styles-new/legacy-styles.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
@import "../styles/mixins";
|
||||
@import "../styles/mobile/mixins";
|
||||
@import "../styles/themes/snow/mixins";
|
||||
|
||||
@import "../styles/constants";
|
||||
@import "../styles/mobile/constants";
|
||||
@import "../styles/themes/snow/constants";
|
||||
|
||||
@import "../styles/animations";
|
||||
@import "../styles/effects";
|
||||
@import "../styles/glyphs";
|
||||
@import "../styles/animations";
|
||||
@import "../styles/archetypes";
|
||||
//@import "../styles/about";
|
||||
//@import "../styles/text";
|
||||
@import "../styles/icons";
|
||||
@import "../styles/status";
|
||||
@import "../styles/data-status";
|
||||
@import "../styles/helpers/bubbles";
|
||||
@import "../styles/helpers/splitter";
|
||||
@import "../styles/helpers/wait-spinner";
|
||||
//@import "../styles/inspector";
|
||||
//
|
||||
//!********************************* CONTROLS *!
|
||||
//@import "../styles/controls/breadcrumb";
|
||||
@import "../styles/controls/buttons";
|
||||
@import "../styles/controls/palette";
|
||||
@import "../styles/controls/controls";
|
||||
@import "../styles/controls/lists";
|
||||
@import "../styles/controls/menus";
|
||||
@import "../styles/controls/messages";
|
||||
@import "../styles/controls/indicators";
|
||||
@import "../styles/mobile/controls/menus";
|
||||
//
|
||||
//!********************************* FORMS *!
|
||||
@import "../styles/forms/elems";
|
||||
@import "../styles/forms/channel-selector";
|
||||
@import "../styles/forms/datetime";
|
||||
@import "../styles/forms/validation";
|
||||
@import "../styles/forms/filter";
|
||||
//
|
||||
//!********************************* USER ENVIRON *!
|
||||
@import "../styles/user-environ/layout";
|
||||
@import "../styles/mobile/layout";
|
||||
@import "../styles/edit/editor";
|
||||
//@import "../styles/search/search";
|
||||
//@import "../styles/mobile/search/search";
|
||||
@import "../styles/overlay/overlay";
|
||||
@import "../styles/tree/tree";
|
||||
@import "../styles/object-label";
|
||||
//@import "../styles/mobile/tree";
|
||||
@import "../styles/user-environ/frame";
|
||||
@import "../styles/user-environ/top-bar";
|
||||
@import "../styles/user-environ/tool-bar";
|
||||
@import "../styles/user-environ/selecting";
|
||||
//
|
||||
//!********************************* VIEWS *!
|
||||
@import "../styles/fixed-position";
|
||||
@import "../styles/lists/tabular";
|
||||
@import "../styles/plots/plots-main";
|
||||
@import "../styles/plots/legend";
|
||||
@import "../styles/iframe";
|
||||
@import "../styles/views";
|
||||
@import "../styles/items/item";
|
||||
@import "../styles/mobile/item";
|
||||
@import "../styles/table";
|
||||
@import "../styles/notebook/notebook";
|
||||
//
|
||||
//!********************************* TO BE MOVED *!
|
||||
@import "../styles/autoflow";
|
||||
@import "../styles/features/imagery";
|
||||
@import "../styles/features/time-display";
|
||||
@import "../styles/widgets";
|
||||
//
|
||||
//!********************************* APP STARTUP *!
|
||||
//@import "../styles/app-start";
|
||||
|
||||
@import "../styles/conductor/time-conductor-snow";
|
||||
7
src/styles-new/sass-base.scss
Normal file
7
src/styles-new/sass-base.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
// Imports only constants, mixins, etc.
|
||||
// Meant for use as a single line import in Vue SFC's.
|
||||
// Do not include anything that renders to CSS!
|
||||
@import "constants";
|
||||
@import "constants-mobile";
|
||||
@import "constants-snow"; // TEMP
|
||||
@import "mixins";
|
||||
0
src/styles-new/theme-snow.scss
Normal file
0
src/styles-new/theme-snow.scss
Normal file
1
src/styles-new/vendor/normalize.min.css
vendored
Normal file
1
src/styles-new/vendor/normalize.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
|
||||
@@ -20,47 +20,52 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
mct-table {
|
||||
.mct-sizing-table {
|
||||
z-index: -1;
|
||||
visibility: hidden;
|
||||
position: absolute !important;
|
||||
.mct-sizing-table {
|
||||
z-index: -1;
|
||||
visibility: hidden;
|
||||
position: absolute !important;
|
||||
|
||||
//Add some padding to allow for decorations such as limits indicator
|
||||
td {
|
||||
padding-right: 15px;
|
||||
padding-left: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mct-table {
|
||||
tr {
|
||||
display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
td, th {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
flex: 1 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: block;
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
position: absolute;
|
||||
height: 18px; // Needed when a row has empty values in its cells
|
||||
}
|
||||
|
||||
//Add some padding to allow for decorations such as limits indicator
|
||||
td {
|
||||
padding-right: 15px;
|
||||
padding-left: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mct-table {
|
||||
thead {
|
||||
display: block;
|
||||
tr {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
th {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
td {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
}
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.l-telemetry-table {
|
||||
.l-control-bar {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
@@ -30,7 +30,8 @@
|
||||
.child-frame {
|
||||
.has-control-bar {
|
||||
$btnExportH: $btnFrameH;
|
||||
.l-control-bar {
|
||||
.l-control-bar,
|
||||
.c-control-bar {
|
||||
display: none;
|
||||
}
|
||||
.l-view-section {
|
||||
|
||||
22
src/ui/components/controls/multipane.vue
Normal file
22
src/ui/components/controls/multipane.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="l-multipane"
|
||||
:class="{
|
||||
'l-multipane--vertical': type === 'vertical',
|
||||
'l-multipane--horizontal': type === 'horizontal'
|
||||
}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
validator: function (value) {
|
||||
return ['vertical', 'horizontal'].indexOf(value) !== -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
418
src/ui/components/controls/pane.vue
Normal file
418
src/ui/components/controls/pane.vue
Normal file
@@ -0,0 +1,418 @@
|
||||
<template>
|
||||
<div class="l-pane"
|
||||
:class="{
|
||||
'l-pane--horizontal-handle-before': type === 'horizontal' && handle === 'before',
|
||||
'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
|
||||
'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
|
||||
'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
|
||||
'l-pane--collapsable' : collapsable,
|
||||
'l-pane--collapsed': collapsed,
|
||||
'l-pane--reacts': !handle,
|
||||
'l-pane--resizing': resizing === true
|
||||
}">
|
||||
<div v-if="handle"
|
||||
class="l-pane__handle"
|
||||
@mousedown="start">
|
||||
</div>
|
||||
<a v-if="label"
|
||||
class="l-pane__collapse-button"
|
||||
@click="toggleCollapse">
|
||||
<span class="l-pane__label">{{ label }}</span>
|
||||
</a>
|
||||
<div class="l-pane__contents">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
$hitMargin: 4px;
|
||||
/**************************** BASE - MOBILE AND DESKTOP */
|
||||
.l-multipane {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
|
||||
&--horizontal,
|
||||
> .l-pane {
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
&--vertical,
|
||||
> .l-pane {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
&--vertical {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.l-pane {
|
||||
backface-visibility: hidden;
|
||||
display: flex;
|
||||
min-width: 0px;
|
||||
min-height: 0px;
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
|
||||
&__handle,
|
||||
&__label {
|
||||
// __handle and __label don't appear in mobile
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__collapse-button {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0; right: 0; // Default
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&--reacts {
|
||||
// This is the pane that doesn't hold the handle
|
||||
// It reacts to other panes that are able to resize
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
&--collapsed {
|
||||
flex-basis: 0px !important;
|
||||
transition: all 350ms ease;
|
||||
|
||||
.l-pane__contents {
|
||||
transition: opacity 150ms ease;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--horizontal"] {
|
||||
&.l-pane--collapsed {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--vertical"] {
|
||||
&.l-pane--collapsed {
|
||||
padding-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/************************ CONTENTS */
|
||||
&__contents {
|
||||
flex: 1 1 100%;
|
||||
opacity: 1;
|
||||
padding: $interiorMargin;
|
||||
pointer-events: inherit;
|
||||
transition: opacity 250ms ease 250ms;
|
||||
overflow: auto;
|
||||
|
||||
.l-pane__contents {
|
||||
// Don't pad all nested __contents
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> [class*="__"] + [class*="__"] {
|
||||
// Create margin between elements in a pane
|
||||
// Doesn't match first elem, but will match all subsequent
|
||||
margin-top: $interiorMargin;
|
||||
}
|
||||
}
|
||||
|
||||
/************************ DESKTOP STYLES */
|
||||
body.desktop & {
|
||||
&__handle {
|
||||
background: $colorSplitterBg;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
transition: $transOut;
|
||||
|
||||
&:before {
|
||||
// Extended hit area
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
transition: $transIn;
|
||||
}
|
||||
}
|
||||
|
||||
&__collapse-button {
|
||||
$m: 2px;
|
||||
$h: nth($splitterBtnD, 1) - ($m * 2);
|
||||
color: $splitterBtnColorFg;
|
||||
flex: 0 0 nth($splitterBtnD, 1);
|
||||
font-size: $h * .9;
|
||||
position: relative;
|
||||
justify-content: start;
|
||||
transition: $transOut;
|
||||
|
||||
&:after {
|
||||
// Close icon
|
||||
background: $splitterBtnColorFg;
|
||||
border-radius: 2px;
|
||||
color: $splitterBtnColorBg;
|
||||
content: $glyph-icon-minus;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: .8em;
|
||||
height: $h;
|
||||
line-height: $h;
|
||||
padding: 0 7px;
|
||||
position: absolute;
|
||||
right: $m;
|
||||
top: $m;
|
||||
text-align: right;
|
||||
transition: $transOut;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba(black, 0.1);
|
||||
//color: $splitterBtnColorHoverFg;
|
||||
&:after {
|
||||
background: $splitterBtnColorHoverBg;
|
||||
color: $splitterBtnColorHoverFg;
|
||||
transition: $transIn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
// Name of the pane
|
||||
@include ellipsize();
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
transform-origin: top left;
|
||||
flex: 1 0 90%;
|
||||
}
|
||||
|
||||
&--resizing {
|
||||
// User is dragging the handle and resizing a pane
|
||||
@include userSelectNone();
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
$d: nth($splitterBtnD, 1);
|
||||
flex-basis: $d;
|
||||
min-width: $d !important;
|
||||
min-height: $d !important;
|
||||
|
||||
> .l-pane__handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
background: $splitterBtnColorFg;
|
||||
color: $splitterBtnColorBg;
|
||||
|
||||
&:after {
|
||||
content: $glyph-icon-plus;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $splitterBtnColorHoverBg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .l-pane__collapse-button {
|
||||
height: nth($splitterBtnD, 1);
|
||||
padding: $interiorMarginSm $interiorMarginSm;
|
||||
}
|
||||
|
||||
&[class*="--horizontal"] {
|
||||
> .l-pane__handle {
|
||||
cursor: col-resize;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $splitterHandleD;
|
||||
|
||||
&:before {
|
||||
// Extended hit area
|
||||
top: 0;
|
||||
right: $hitMargin * -1;
|
||||
bottom: 0;
|
||||
left: $hitMargin * -1;
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] {
|
||||
> .l-pane__collapse-button {
|
||||
position: absolute;
|
||||
bottom: 0; left: 0;
|
||||
height: auto;
|
||||
|
||||
[class*="label"] {
|
||||
position: absolute;
|
||||
transform: translate($interiorMarginLg + 1, 18px) rotate(90deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: none;
|
||||
padding: 0;
|
||||
top: $interiorMarginSm;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
width: auto;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Horizontal Splitter Before */
|
||||
&[class*="-before"] {
|
||||
> .l-pane__handle {
|
||||
left: 0;
|
||||
transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Horizontal Splitter After */
|
||||
&[class*="-after"] {
|
||||
> .l-pane__handle {
|
||||
right: 0;
|
||||
transform: translateX(floor($splitterHandleD / 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[class*="--vertical"] {
|
||||
> .l-pane__handle {
|
||||
cursor: row-resize;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: $splitterHandleD;
|
||||
|
||||
&:before {
|
||||
// Extended hit area
|
||||
left: 0;
|
||||
top: $hitMargin * -1;
|
||||
right: 0;
|
||||
bottom: $hitMargin * -1;
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Vertical Splitter Before */
|
||||
&[class*="-before"] {
|
||||
> .l-pane__handle {
|
||||
top: 0;
|
||||
transform: translateY(floor($splitterHandleD / -2)); // Center over the pane edge
|
||||
}
|
||||
}
|
||||
|
||||
/************************** Vertical Splitter After */
|
||||
&[class*="-after"] {
|
||||
> .l-pane__handle {
|
||||
bottom: 0;
|
||||
transform: translateY(floor($splitterHandleD / 2)); // Center over the pane edge
|
||||
}
|
||||
}
|
||||
}
|
||||
} // Ends .body.desktop
|
||||
} // Ends .l-pane
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const COLLAPSE_THRESHOLD_PX = 40;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
handle: {
|
||||
type: String,
|
||||
validator: function (value) {
|
||||
return ['before', 'after'].indexOf(value) !== -1;
|
||||
}
|
||||
},
|
||||
collapsable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
label: String,
|
||||
resizing: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
collapsed: false
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
this.type = this.$parent.type;
|
||||
this.styleProp = (this.type === 'horizontal') ? 'width' : 'height'
|
||||
},
|
||||
methods: {
|
||||
toggleCollapse: function () {
|
||||
this.collapsed = !this.collapsed;
|
||||
if (this.collapsed) {
|
||||
// Pane is expanded and is being collapsed
|
||||
this.currentSize = (this.dragCollapse === true)? this.initial : this.$el.style[this.styleProp];
|
||||
this.$el.style[this.styleProp] = '';
|
||||
} else {
|
||||
// Pane is collapsed and is being expanded
|
||||
this.$el.style[this.styleProp] = this.currentSize;
|
||||
delete this.currentSize;
|
||||
delete this.dragCollapse;
|
||||
}
|
||||
},
|
||||
trackSize: function() {
|
||||
if (!this.dragCollapse === true) {
|
||||
if (this.type === 'vertical') {
|
||||
this.initial = this.$el.offsetHeight;
|
||||
} else if (this.type === 'horizontal') {
|
||||
this.initial = this.$el.offsetWidth;
|
||||
}
|
||||
}
|
||||
},
|
||||
getPosition: function (event) {
|
||||
return this.type === 'horizontal' ?
|
||||
event.pageX :
|
||||
event.pageY;
|
||||
},
|
||||
getNewSize: function (event) {
|
||||
let delta = this.startPosition - this.getPosition(event);
|
||||
if (this.handle === "before") {
|
||||
return `${this.initial + delta}px`;
|
||||
}
|
||||
if (this.handle === "after") {
|
||||
return `${this.initial - delta}px`;
|
||||
}
|
||||
},
|
||||
updatePosition: function (event) {
|
||||
let size = this.getNewSize(event);
|
||||
let intSize = parseInt(size.substr(0, size.length - 2));
|
||||
if (intSize < COLLAPSE_THRESHOLD_PX && this.collapsable === true) {
|
||||
this.dragCollapse = true;
|
||||
this.end();
|
||||
this.toggleCollapse();
|
||||
} else {
|
||||
this.$el.style[this.styleProp] = size;
|
||||
}
|
||||
},
|
||||
start: function (event) {
|
||||
this.startPosition = this.getPosition(event);
|
||||
document.body.addEventListener('mousemove', this.updatePosition);
|
||||
document.body.addEventListener('mouseup', this.end);
|
||||
this.resizing = true;
|
||||
this.trackSize();
|
||||
},
|
||||
end: function (event) {
|
||||
document.body.removeEventListener('mousemove', this.updatePosition);
|
||||
document.body.removeEventListener('mouseup', this.end);
|
||||
this.resizing = false;
|
||||
this.trackSize();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
98
src/ui/components/controls/search.vue
Normal file
98
src/ui/components/controls/search.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="c-search"
|
||||
:class="{ 'is-active': active === true }">
|
||||
<input class="c-search__input" type="search"
|
||||
v-bind:value="searchInput"
|
||||
@input="handleInput($event)"/>
|
||||
<a class="c-search__clear-input icon-x-in-circle"
|
||||
v-on:click="clearInput"></a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";;
|
||||
|
||||
/******************************* SEARCH */
|
||||
.c-search {
|
||||
@include nice-input();
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 4px;
|
||||
|
||||
&:before {
|
||||
// Mag glass icon
|
||||
content: $glyph-icon-magnify;
|
||||
direction: rtl; // Aligns glyph to right-hand side of container, for transition
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
flex: 0 0 auto;
|
||||
opacity: 0.5;
|
||||
overflow: hidden;
|
||||
padding: 2px; // Prevents clipping
|
||||
transition: width 250ms ease;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset rgba(black, 0.8) 0 0px 2px;
|
||||
&:before {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
&--major {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
background: none !important;
|
||||
box-shadow: none !important; // !important needed to override default for [input]
|
||||
flex: 0 1 100%;
|
||||
padding-left: 2px !important;
|
||||
padding-right: 2px !important;
|
||||
min-width: 10px; // Must be set to allow input to collapse below browser min
|
||||
}
|
||||
|
||||
&__clear-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
&:before {
|
||||
padding: 2px 0px;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.c-search__clear-input {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: String
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
searchInput: '',
|
||||
active: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInput(e) {
|
||||
// Grab input as the user types it
|
||||
// and set 'active' based on input length > 0
|
||||
this.searchInput = e.target.value;
|
||||
this.active = (this.searchInput.length > 0);
|
||||
},
|
||||
clearInput() {
|
||||
// Clear the user's input and set 'active' to false
|
||||
this.searchInput = '';
|
||||
this.active = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
133
src/ui/components/controls/splitter.vue
Normal file
133
src/ui/components/controls/splitter.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="c-splitter" :class="{
|
||||
'c-splitter-vertical' : align === 'vertical',
|
||||
'c-splitter-horizontal' : align === 'horizontal',
|
||||
'c-splitter-collapse-left' : collapse === 'to-left',
|
||||
'c-splitter-collapse-right' : collapse === 'to-right',
|
||||
}">
|
||||
<a class="c-splitter__btn"></a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/constants";
|
||||
@import "~styles/constants-snow";
|
||||
@import "~styles/mixins";
|
||||
@import "~styles/glyphs";
|
||||
|
||||
$c: #06f;
|
||||
$size: $splitterHandleD;
|
||||
$margin: 0px;
|
||||
$hitMargin: 4px;
|
||||
|
||||
|
||||
.c-splitter {
|
||||
background: $colorSplitterBg;
|
||||
transition: $transOut;
|
||||
|
||||
&:before {
|
||||
// Bigger hit area
|
||||
//@include test();
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:active, &:hover {
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $colorSplitterActive;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
|
||||
&-vertical {
|
||||
cursor: col-resize;
|
||||
width: $size;
|
||||
margin: 0 $margin;
|
||||
&:before {
|
||||
top: 0;
|
||||
right: $hitMargin * -1;
|
||||
bottom: 0;
|
||||
left: $hitMargin * -1;
|
||||
}
|
||||
}
|
||||
|
||||
&-horizontal {
|
||||
cursor: row-resize;
|
||||
height: $size;
|
||||
margin: $margin 0;
|
||||
&:before {
|
||||
top: $hitMargin * -1;
|
||||
right: 0;
|
||||
bottom: $hitMargin * -1;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-splitter__btn {
|
||||
// Collapse button
|
||||
background: $colorSplitterBg;
|
||||
display: none; // Only display if splitter is collapsible, see below
|
||||
width: $splitterD;
|
||||
height: 40px;
|
||||
transition: $transOut;
|
||||
|
||||
&:active, &:hover {
|
||||
transition: $transIn;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $colorSplitterHover;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: $colorSplitterActive;
|
||||
}
|
||||
|
||||
[class*="collapse"] & {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
&:before {
|
||||
color: $colorSplitterFg;
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
font-family: symbolsfont;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="collapse-left"] & {
|
||||
border-bottom-left-radius: $controlCr;
|
||||
right: 0;
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-left;
|
||||
}
|
||||
}
|
||||
|
||||
[class*="collapse-right"] & {
|
||||
border-bottom-right-radius: $controlCr;
|
||||
left: 0;
|
||||
&:before {
|
||||
content: $glyph-icon-arrow-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
align: String,
|
||||
collapse: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
62
src/ui/components/controls/viewControl.vue
Normal file
62
src/ui/components/controls/viewControl.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<span class="c-view-control"
|
||||
:class="{
|
||||
'c-view-control--expanded' : expanded,
|
||||
'is-enabled' : enabled
|
||||
}"
|
||||
@click="toggle"></span>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";;
|
||||
|
||||
.c-view-control {
|
||||
$d: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
width: $d;
|
||||
position: relative;
|
||||
|
||||
&.is-enabled:before {
|
||||
$s: .65;
|
||||
content: $glyph-icon-arrow-right-equilateral;
|
||||
display: block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1rem * $s;
|
||||
position: absolute;
|
||||
transform-origin: floor(($d / 2) * $s); // This is slightly better than 'center'
|
||||
transition: transform 100ms ease-in-out;
|
||||
}
|
||||
|
||||
&--expanded {
|
||||
&:before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
expanded: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
enabled: {
|
||||
// Provided to allow the view-control to still occupy space without displaying a control icon.
|
||||
// Used as such in the tree - when a node doesn't have children, set disabled to true.
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.expanded = !this.expanded;
|
||||
this.$emit('click', event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
172
src/ui/components/layout/Layout.vue
Normal file
172
src/ui/components/layout/Layout.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="l-shell">
|
||||
<div class="l-shell__head">
|
||||
[ Create Button ]
|
||||
[ App Logo ]
|
||||
</div>
|
||||
<multipane class="l-shell__main"
|
||||
type="horizontal">
|
||||
<pane class="l-shell__pane-tree"
|
||||
handle="after"
|
||||
label="Browse"
|
||||
collapsable>
|
||||
<div class="l-shell__search">
|
||||
<search class="c-search--major" ref="shell-search"></search>
|
||||
</div>
|
||||
<div class="l-shell__tree">
|
||||
<mct-tree :nodes="treeRoots"></mct-tree>
|
||||
</div>
|
||||
</pane>
|
||||
<pane class="l-shell__pane-main">
|
||||
<div class="l-shell__main-container" ref="mainContainer"></div>
|
||||
</pane>
|
||||
<pane class="l-shell__pane-inspector l-pane--holds-multipane"
|
||||
handle="before"
|
||||
label="Inspect"
|
||||
collapsable>
|
||||
<MctInspector ref="inspector"></MctInspector>
|
||||
</pane>
|
||||
</multipane>
|
||||
<div class="l-shell__status">
|
||||
<MctStatus></MctStatus>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
/******************************* SHELL */
|
||||
.l-shell {
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
&__status {
|
||||
background: $colorBodyFg;
|
||||
color: $colorBodyBg;
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
height: 24px;
|
||||
padding: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__pane-tree {
|
||||
background: $colorTreeBg;
|
||||
width: 40%;
|
||||
|
||||
[class*="collapse-button"] {
|
||||
// For mobile, collapse button becomes menu icon
|
||||
body.mobile & {
|
||||
height: $mobileMenuIconD;
|
||||
width: $mobileMenuIconD;
|
||||
transform: translateX(100%);
|
||||
|
||||
&:before {
|
||||
color: $colorKey;
|
||||
content: $glyph-icon-menu-hamburger;
|
||||
font-family: symbolsfont;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__head,
|
||||
&__pane-inspector {
|
||||
body.mobile & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include phonePortrait() {
|
||||
&__pane-tree {
|
||||
width: calc(100% - #{$mobileMenuIconD});
|
||||
|
||||
+ .l-pane {
|
||||
// Hide pane-main when this pane is expanded
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&[class*="--collapsed"] + .l-pane {
|
||||
// Show pane-main when tree is collapsed
|
||||
opacity: 1;
|
||||
pointer-events: inherit;
|
||||
transition: opacity 250ms ease 250ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/********** MAIN AREA */
|
||||
&__main-container {
|
||||
// Wrapper for main views
|
||||
font-size: 16px; // TEMP FOR LEGACY STYLING
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
top: $interiorMargin; right: $interiorMarginLg; bottom: $interiorMargin; left: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&__tree {
|
||||
// Tree component within __pane-tree
|
||||
flex: 1 1 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&__time-conductor {
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
min-height: 50px;
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
|
||||
body.desktop & {
|
||||
/********** HEAD AND STATUS */
|
||||
&__head,
|
||||
&__status {
|
||||
display: block;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
&__head {
|
||||
border-bottom: 1px solid $colorInteriorBorder;
|
||||
height: 40px;
|
||||
padding: $interiorMarginLg;
|
||||
}
|
||||
|
||||
&__pane-tree,
|
||||
&__pane-inspector {
|
||||
max-width: 30%;
|
||||
}
|
||||
|
||||
&__pane-tree {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
&__pane-inspector {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import MctInspector from './MctInspector.vue';
|
||||
import MctMain from './MctMain.vue';
|
||||
import MctStatus from './MctStatus.vue';
|
||||
import MctTree from './mct-tree.vue';
|
||||
import search from '../controls/search.vue';
|
||||
import multipane from '../controls/multipane.vue';
|
||||
import pane from '../controls/pane.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MctInspector,
|
||||
MctMain,
|
||||
MctStatus,
|
||||
MctTree,
|
||||
search,
|
||||
multipane,
|
||||
pane
|
||||
}
|
||||
}
|
||||
</script>
|
||||
25
src/ui/components/layout/MCTSearch.vue
Normal file
25
src/ui/components/layout/MCTSearch.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="c-search c-search--major">
|
||||
<input type="search" placeholder="Search"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/constants";
|
||||
|
||||
/******************************* SEARCH */
|
||||
.c-search {
|
||||
input[type=search] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--major {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
202
src/ui/components/layout/MctInspector.vue
Normal file
202
src/ui/components/layout/MctInspector.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<multipane class="c-inspector"
|
||||
type="vertical">
|
||||
<pane class="c-inspector__properties">
|
||||
<div ref="properties"></div>
|
||||
</pane>
|
||||
<pane class="l-pane c-inspector__elements"
|
||||
handle="before"
|
||||
label="Elements">
|
||||
<div ref="elements">c-inspector__elements 1</div>
|
||||
</pane>
|
||||
</multipane>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
@mixin grid-two-column() {
|
||||
display: grid;
|
||||
grid-row-gap: 0;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
@mixin grid-two-column-span-cols() {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.c-inspector {
|
||||
min-width: 150px;
|
||||
|
||||
> [class*="__"] {
|
||||
min-height: 50px;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $interiorMargin;
|
||||
}
|
||||
|
||||
> .l-pane__contents > * {
|
||||
// Provide margin against scrollbar
|
||||
// TODO: move this into pane.vue
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
&__elements {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.l-inspector-part {
|
||||
display: contents; // Legacy
|
||||
}
|
||||
|
||||
h2 {
|
||||
// Legacy, somewhat
|
||||
@include grid-two-column-span-cols;
|
||||
border-radius: $smallCr;
|
||||
background-color: $colorInspectorSectionHeaderBg;
|
||||
color: $colorInspectorSectionHeaderFg;
|
||||
font-size: .85em;
|
||||
font-weight: normal;
|
||||
margin: $interiorMarginLg 0 $interiorMarginSm 0;
|
||||
padding: $interiorMarginSm $interiorMargin;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.first {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-properties {
|
||||
.label {
|
||||
color: $colorInspectorPropName;
|
||||
}
|
||||
.value {
|
||||
color: $colorInspectorPropVal;
|
||||
word-break: break-all;
|
||||
&:first-child {
|
||||
// If there is no preceding .label element, make value span columns
|
||||
@include grid-two-column-span-cols;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/******************************* PROPERTIES GRID */
|
||||
|
||||
.grid-elem {
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $colorInteriorBorder;
|
||||
}
|
||||
&.label {
|
||||
background-color: rgba(0,0,128,0.2);
|
||||
}
|
||||
&.value {
|
||||
background-color: rgba(0,128,0,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
// Properties grids
|
||||
.grid-properties, // LEGACY
|
||||
.l-grid-properties {
|
||||
@include grid-two-column;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.grid-span-all {
|
||||
@include grid-two-column-span-cols;
|
||||
}
|
||||
|
||||
.grid-row {
|
||||
.grid-cell {
|
||||
padding: 3px $interiorMarginLg 3px 0;
|
||||
&[title] {
|
||||
// When a cell has a title, assume it's helpful text
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
&.force-border,
|
||||
&:not(:first-of-type) {
|
||||
// Row borders, effected via border-top on child elements of the row
|
||||
.grid-cell {
|
||||
border-top: 1px solid $colorInspectorSectionHeaderBg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/************************************************************** LEGACY STYLES */
|
||||
.tree {
|
||||
.grid-properties {
|
||||
margin-left: $treeItemIndent + $interiorMarginLg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.inspector-location {
|
||||
display: inline-block;
|
||||
|
||||
.location-item {
|
||||
$h: 1.2em;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: $h;
|
||||
position: relative;
|
||||
padding: 2px 4px;
|
||||
.t-object-label {
|
||||
.t-item-icon {
|
||||
height: $h;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: $colorItemTreeHoverBg;
|
||||
color: $colorItemTreeHoverFg;
|
||||
.icon {
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.last) .t-object-label .t-title-label:after {
|
||||
color: pushBack($colorInspectorFg, 15%);
|
||||
content: '\e904';
|
||||
display: inline-block;
|
||||
font-family: symbolsfont;
|
||||
font-size: 8px;
|
||||
font-style: normal !important;
|
||||
line-height: inherit;
|
||||
margin-left: $interiorMarginSm;
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Elements pool
|
||||
.holder-elements {
|
||||
.current-elements {
|
||||
position: relative;
|
||||
.tree-item {
|
||||
.t-object-label {
|
||||
// Elements pool is a flat list, so don't indent items.
|
||||
/*font-size: 0.75rem;*/
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import multipane from '../controls/multipane.vue';
|
||||
import pane from '../controls/pane.vue';
|
||||
export default {
|
||||
components: {
|
||||
multipane,
|
||||
pane
|
||||
}
|
||||
}
|
||||
</script>
|
||||
21
src/ui/components/layout/MctMain.vue
Normal file
21
src/ui/components/layout/MctMain.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<mct-representation key='browse-object'></mct-representation>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.MCT_Main {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
top: 0px;
|
||||
bottom: 20px;
|
||||
left: 100px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
14
src/ui/components/layout/MctStatus.vue
Normal file
14
src/ui/components/layout/MctStatus.vue
Normal file
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<span class="c-status">
|
||||
[ Status ]
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
111
src/ui/components/layout/mct-tree.vue
Normal file
111
src/ui/components/layout/mct-tree.vue
Normal file
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<ul class="c-tree">
|
||||
<tree-item v-for="child in children"
|
||||
:key="child.id"
|
||||
:node="child">
|
||||
</tree-item>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
// TODO: make sure hit area encompasses all of the tree item; currently is just the text
|
||||
|
||||
.c-tree {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
|
||||
.c-tree {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
border-radius: $controlCr;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
transition: background 150ms ease;
|
||||
|
||||
&:hover {
|
||||
background: $colorItemTreeHoverBg;
|
||||
.c-tree__item__name:before {
|
||||
// Type icon
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
|
||||
&__view-control {
|
||||
color: $colorItemTreeVC;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__name {
|
||||
color: $colorItemTreeFg;
|
||||
width: 100%;
|
||||
&:before {
|
||||
color: $colorItemTreeIcon;
|
||||
width: $treeTypeIconW;
|
||||
}
|
||||
}
|
||||
|
||||
body.mobile & {
|
||||
@include button($bg: $colorMobilePaneLeftTreeItemBg, $fg: $colorMobilePaneLeftTreeItemFg);
|
||||
height: $mobileTreeItemH;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
[class*="view-control"] {
|
||||
width: ceil($mobileTreeItemH * 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-object-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&:before {
|
||||
// Type icon
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__name {
|
||||
@include ellipsize();
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import treeItem from './tree-item.vue'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
children: []
|
||||
};
|
||||
},
|
||||
inject: ['openmct'],
|
||||
mounted: function () {
|
||||
this.openmct.objects.get('ROOT')
|
||||
.then(root => this.openmct.composition.get(root).load())
|
||||
.then(children => this.children = children.map((c) => {
|
||||
return {
|
||||
id: this.openmct.objects.makeKeyString(c.identifier),
|
||||
object: c,
|
||||
path: [c.identifier]
|
||||
};
|
||||
}))
|
||||
},
|
||||
name: 'mct-tree',
|
||||
components: {
|
||||
treeItem
|
||||
}
|
||||
}
|
||||
</script>
|
||||
91
src/ui/components/layout/tree-item.vue
Normal file
91
src/ui/components/layout/tree-item.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<li class="c-tree__item-h">
|
||||
<div class="c-tree__item">
|
||||
<view-control class="c-tree__item__view-control"
|
||||
:enabled="hasChildren"
|
||||
:expanded="expanded"
|
||||
@click="toggleChildren">
|
||||
</view-control>
|
||||
<a class="c-tree__item__name c-object-name"
|
||||
:class="cssClass"
|
||||
:href="href">
|
||||
<span class="c-object-name__name">{{ node.object.name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul v-if="expanded" class="c-tree">
|
||||
<tree-item v-for="child in children"
|
||||
:key="child.id"
|
||||
:node="child"
|
||||
>
|
||||
</tree-item>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import viewControl from '../controls/viewControl.vue'
|
||||
export default {
|
||||
name: 'tree-item',
|
||||
inject: ['openmct'],
|
||||
props: {
|
||||
node: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hasChildren: false,
|
||||
loaded: false,
|
||||
children: [],
|
||||
expanded: false,
|
||||
cssClass: 'icon-folder'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
href: function () {
|
||||
return '#/browse/' + this.node.path
|
||||
.map(o => this.openmct.objects.makeKeyString(o))
|
||||
.join('/');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// TODO: should update on mutation.
|
||||
// TODO: click navigation should not fubar hash quite so much.
|
||||
// TODO: should highlight if navigated to.
|
||||
// TODO: should have context menu.
|
||||
// TODO: should support drag/drop composition
|
||||
let type = this.openmct.types.get(this.node.object.type);
|
||||
if (type) {
|
||||
this.cssClass = type.definition.cssClass;
|
||||
} else {
|
||||
console.log("Failed to get typeDef for object", this.node.object.name, this.node.object.type);
|
||||
}
|
||||
|
||||
let composition = this.openmct.composition.get(this.node.object);
|
||||
if (!composition) {
|
||||
return;
|
||||
}
|
||||
this.hasChildren = true;
|
||||
|
||||
},
|
||||
methods: {
|
||||
toggleChildren: function () {
|
||||
this.expanded = !this.expanded;
|
||||
if (this.expanded && !this.loaded && this.hasChildren) {
|
||||
this.openmct.composition.get(this.node.object).load()
|
||||
.then(children => {
|
||||
this.children = children.map((c) => {
|
||||
return {
|
||||
id: this.openmct.objects.makeKeyString(c.identifier),
|
||||
object: c,
|
||||
path: this.node.path.concat([c.identifier])
|
||||
};
|
||||
});
|
||||
})
|
||||
.then(() => this.loaded = true);
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
viewControl
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user