ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-16 15:29:20 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Time Conductor] Addressing comments from code review

Browse Source
This commit is contained in:
Henry 2017-05-01 15:01:24 -07:00
parent 46a51bd8db
commit 92d2ec7cf4
8 changed files with 143 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
platform/features/conductor/core/bundle.js
View File

@ -21,12 +21,12 @@
*****************************************************************************/
define([
"./src/ui/TimeConductorViewService",
"./src/ui/TimeConductorController",
"./src/ui/ConductorAxisController",
"./src/ui/ConductorTOIController",
"./src/ui/ConductorTOIDirective",
"./src/ui/TimeOfInterestController",
"./src/ui/MctConductorAxis",
"./src/ui/ConductorAxisDirective",
"./src/ui/NumberFormat",
"text!./res/templates/time-conductor.html",
"text!./res/templates/mode-selector/mode-selector.html",
@ -34,12 +34,12 @@ define([
"text!./res/templates/time-of-interest.html",
"legacyRegistry"
], function (
TimeConductorViewService,
TimeConductorController,
ConductorAxisController,
ConductorTOIController,
ConductorTOIDirective,
TimeOfInterestController,
MCTConductorAxis,
ConductorAxisDirective,
NumberFormat,
timeConductorTemplate,
modeSelectorTemplate,
@ -50,16 +50,6 @@ define([
legacyRegistry.register("platform/features/conductor/core", {
"extensions": {
"services": [
{
"key": "timeConductorViewService",
"implementation": TimeConductorViewService,
"depends": [
"openmct",
"timeSystems[]"
]
}
],
"controllers": [
{
"key": "TimeConductorController",
@ -68,7 +58,6 @@ define([
"$scope",
"$window",
"openmct",
"timeConductorViewService",
"formatService",
"CONDUCTOR_CONFIG"
]
@ -79,7 +68,6 @@ define([
"depends": [
"$scope",
"openmct",
"timeConductorViewService",
"formatService"
]
},
@ -95,12 +83,16 @@ define([
],
"directives": [
{
"key": "mctConductorAxis",
"implementation": MCTConductorAxis,
"key": "conductorAxis",
"implementation": ConductorAxisDirective,
"depends": [
"openmct",
"formatService"
]
},
{
"key": "conductorTOI",
"implementation": ConductorTOIDirective
}
],
"stylesheets": [

22
platform/features/conductor/core/res/templates/time-conductor.html
View File

@ -1,6 +1,6 @@
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
<div ng-controller="TimeConductorController as tcController"
class="holder grows flex-elem l-flex-row l-time-conductor {{tcController.mode}}-mode {{timeSystemModel.selected.metadata.key}}-time-system"
class="holder grows flex-elem l-flex-row l-time-conductor {{tcController.isFixed ? 'fixed-mode' : 'realtime-mode'}} {{timeSystemModel.selected.metadata.key}}-time-system"
ng-class="{'status-panning': tcController.panning}">
<div class="flex-elem holder time-conductor-icon">
<div class="hand-little"></div>
@ -28,7 +28,7 @@
</mct-control>
</span>
<span class="l-time-range-input-w time-delta start-delta"
ng-class="{'hide':(tcController.mode === 'fixed')}">
ng-class="{'hide':tcController.isFixed}">
-
<mct-control key="'datetime-field'"
structure="{
@ -55,13 +55,13 @@
}"
ng-model="boundsModel"
ng-blur="tcController.setBoundsFromView(boundsModel)"
ng-disabled="tcController.mode !== 'fixed'"
ng-disabled="!tcController.isFixed"
field="'end'"
class="time-range-input">
</mct-control>
</span>
<span class="l-time-range-input-w time-delta end-delta"
ng-class="{'hide':(tcController.mode === 'fixed')}">
ng-class="{'hide': tcController.isFixed}">
+
<mct-control key="'datetime-field'"
structure="{
@ -79,21 +79,11 @@
<input type="submit" class="hidden">
</form>
<mct-conductor-axis></mct-conductor-axis>
<conductor-axis view-service="tcController.conductorViewService"></conductor-axis>
</div>
<!-- Holds data visualization, time of interest -->
<div class="l-data-visualization-holder l-row-elem flex-elem"
ng-controller="ConductorTOIController as toi">
<a class="l-page-button s-icon-button icon-pointer-left"></a>
<div class="l-data-visualization" ng-click="toi.setTOIFromPosition($event)">
<mct-include key="'time-of-interest'"
class="l-toi-holder show-val"
ng-class="{ pinned: toi.pinned, 'val-to-left': toi.left > 80 }"
ng-style="{'left': toi.left + '%'}"></mct-include>
</div>
<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>
</div>
<conductor-toi view-service="tcController.conductorViewService"></conductor-toi>
<!-- Holds time system and session selectors, and zoom control -->
<div class="l-time-conductor-controls l-row-elem l-flex-row flex-elem">

15
platform/features/conductor/core/src/ui/ConductorAxisController.js
View File

@ -34,11 +34,10 @@ define(
* Used by the mct-conductor-axis directive
* @constructor
*/
function ConductorAxisController(openmct, formatService, conductorViewService, scope, element) {
function ConductorAxisController(openmct, formatService, scope, element) {
// Dependencies
this.formatService = formatService;
this.timeAPI = openmct.time;
this.conductorViewService = conductorViewService;
this.scope = scope;
@ -60,8 +59,8 @@ define(
ConductorAxisController.prototype.destroy = function () {
this.timeAPI.off('timeSystem', this.changeTimeSystem);
this.timeAPI.off('bounds', this.changeBounds);
this.conductorViewService.off("zoom", this.onZoom);
this.conductorViewService.off("zoom-stop", this.onZoomStop);
this.viewService.off("zoom", this.onZoom);
this.viewService.off("zoom-stop", this.onZoomStop);
};
/**
@ -92,8 +91,8 @@ define(
this.scope.$on("$destroy", this.destroy);
this.conductorViewService.on("zoom", this.onZoom);
this.conductorViewService.on("zoom-stop", this.onZoomStop);
this.viewService.on("zoom", this.onZoom);
this.viewService.on("zoom-stop", this.onZoomStop);
};
/**
@ -175,7 +174,7 @@ define(
*/
ConductorAxisController.prototype.panStop = function () {
//resync view bounds with time conductor bounds
this.conductorViewService.emit("pan-stop");
this.viewService.emit("pan-stop");
this.timeAPI.bounds(this.bounds);
};
@ -222,7 +221,7 @@ define(
end: end
};
this.setScale();
this.conductorViewService.emit("pan", this.bounds);
this.viewService.emit("pan", this.bounds);
}
};

10
platform/features/conductor/core/src/ui/MctConductorAxis.js → platform/features/conductor/core/src/ui/ConductorAxisDirective.js
View File

@ -21,23 +21,25 @@
*****************************************************************************/
define(['./ConductorAxisController'], function (ConductorAxisController) {
function MctConductorAxis() {
function ConductorAxisDirective() {
/**
* The mct-conductor-axis renders a horizontal axis with regular
* labelled 'ticks'. It requires 'start' and 'end' integer values to
* be specified as attributes.
*/
return {
controller: [
'openmct',
'formatService',
'timeConductorViewService',
'$scope',
'$element',
ConductorAxisController
],
controllerAs: 'axis',
scope: {
viewService: "="
},
bindToController: true,
restrict: 'E',
priority: 1000,
@ -50,5 +52,5 @@ define(['./ConductorAxisController'], function (ConductorAxisController) {
};
}
return MctConductorAxis;
return ConductorAxisDirective;
});

3
platform/features/conductor/core/src/ui/ConductorTOIController.js
View File

@ -29,9 +29,8 @@ define(
* TOI indicator based on the current value of the TOI, and the width of the TOI conductor.
* @memberof platform.features.conductor
*/
function ConductorTOIController($scope, openmct, conductorViewService) {
function ConductorTOIController($scope, openmct) {
this.timeAPI = openmct.time;
this.conductorViewService = conductorViewService;
//Bind all class functions to 'this'
Object.keys(ConductorTOIController.prototype).filter(function (key) {

63
platform/features/conductor/core/src/ui/ConductorTOIDirective.js Normal file
View File

@ -0,0 +1,63 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(['./ConductorTOIController'], function (ConductorTOIController) {
/**
* A directive that encapsulates the TOI specific behavior of the Time Conductor UI.
* @constructor
*/
function ConductorTOIDirective() {
/**
* The mct-conductor-axis renders a horizontal axis with regular
* labelled 'ticks'. It requires 'start' and 'end' integer values to
* be specified as attributes.
*/
return {
controller: [
'$scope',
'openmct',
ConductorTOIController
],
controllerAs: 'toi',
scope: {
viewService: "="
},
bindToController: true,
restrict: 'E',
priority: 1000,
template:
'<div class="l-data-visualization-holder l-row-elem flex-elem">' +
' <a class="l-page-button s-icon-button icon-pointer-left"></a>' +
' <div class="l-data-visualization" ng-click="toi.setTOIFromPosition($event)">' +
' <mct-include key="\'time-of-interest\'" class="l-toi-holder show-val" ' +
' ng-class="{ pinned: toi.pinned, \'val-to-left\': toi.left > 80 }" ' +
' ng-style="{\'left\': toi.left + \'%\'}"></mct-include>' +
' </div>' +
' <a class="l-page-button align-right s-icon-button icon-pointer-right"></a>' +
'</div>'
};
}
return ConductorTOIDirective;
});

37
platform/features/conductor/core/src/ui/TimeConductorController.js
View File

@ -24,9 +24,14 @@
define(
[
'moment',
'./TimeConductorValidation'
'./TimeConductorValidation',
'./TimeConductorViewService'
],
function (moment, TimeConductorValidation) {
function (
moment,
TimeConductorValidation,
TimeConductorViewService
) {
var timeUnitsMegastructure = [
["Decades", function (r) {
@ -67,7 +72,6 @@ define(
$scope,
$window,
openmct,
conductorViewService,
formatService,
config
) {
@ -89,8 +93,8 @@ define(
this.$scope = $scope;
this.$window = $window;
this.conductorViewService = conductorViewService;
this.timeAPI = openmct.time;
this.conductorViewService = new TimeConductorViewService(openmct);
this.validation = new TimeConductorValidation(this.timeAPI);
this.formatService = formatService;
this.config = config;
@ -99,7 +103,12 @@ define(
this.$scope.timeSystemModel = {};
this.$scope.boundsModel = {};
this.mode = this.timeAPI.clock() === undefined ? 'fixed' : 'realtime';
this.timeSystems = this.timeAPI.getAllTimeSystems().reduce(function (map, timeSystem) {
map[timeSystem.key] = timeSystem;
return map;
}, {});
this.isFixed = this.timeAPI.clock() === undefined;
var options = this.optionsFromConfig(config);
this.menu = {
@ -107,11 +116,6 @@ define(
options: options
};
// Construct the provided time system definitions
this.timeSystems = config.menuOptions.map(function (menuOption) {
return this.getTimeSystem(menuOption.timeSystem);
}.bind(this));
//Set the initial state of the UI from the conductor state
var timeSystem = this.timeAPI.timeSystem();
if (timeSystem) {
@ -224,7 +228,7 @@ define(
var clock = this.getClock(menuOption.clock);
var clockKey = menuOption.clock || 'fixed';
var timeSystem = this.getTimeSystem(menuOption.timeSystem);
var timeSystem = this.timeSystems[menuOption.timeSystem];
if (timeSystem !== undefined) {
if (clock !== undefined) {
// Use an associative array to built a set of unique
@ -400,7 +404,7 @@ define(
}
}
this.mode = clock === undefined ? 'fixed' : 'realtime';
this.isFixed = clock === undefined;
if (clock !== undefined) {
this.setViewFromOffsets(this.timeAPI.clockOffsets());
@ -423,7 +427,7 @@ define(
*/
TimeConductorController.prototype.setTimeSystemFromView = function (key) {
var clock = this.menu.selected.clock;
var timeSystem = this.getTimeSystem(key);
var timeSystem = this.timeSystems[key];
var config = this.getConfig(timeSystem, clock);
var bounds;
@ -445,7 +449,12 @@ define(
this.timeAPI.timeSystem(timeSystem, bounds);
var configOffsets = config.clockOffsets;
var apiOffsets = this.timeAPI.clockOffsets();
if (configOffsets.start !== apiOffsets.start || configOffsets.end !== apiOffsets.end) {
//Checking if a clock is actually set on the Time API before
// trying to set offsets.
if (this.timeAPI.clock() !== undefined &&
(configOffsets.start !== apiOffsets.start ||
configOffsets.end !== apiOffsets.end)) {
this.timeAPI.clockOffsets(configOffsets);
}
}

53
src/api/time/TimeAPI.js
View File

@ -22,8 +22,6 @@
define(['EventEmitter'], function (EventEmitter) {
var tick;
/**
* The public API for setting and querying the temporal state of the
* application. The concept of time is integral to Open MCT, and at least
@ -61,24 +59,7 @@ define(['EventEmitter'], function (EventEmitter) {
this.activeClock = undefined;
this.offsets = undefined;
/**
* Tick is private to avoid misuse.
*/
tick = function (timestamp) {
var newBounds = {
start: timestamp + this.offsets.start,
end: timestamp + this.offsets.end
};
this.boundsVal = newBounds;
this.emit('bounds', this.boundsVal, true);
// If a bounds change results in a TOI outside of the current
// bounds, unset it
if (this.toi < newBounds.start || this.toi > newBounds.end) {
this.timeOfInterest(undefined);
}
}.bind(this);
this.tick = this.tick.bind(this);
}
@ -194,10 +175,8 @@ define(['EventEmitter'], function (EventEmitter) {
isNaN(offsets.end)
) {
return "Start and end offsets must be specified as integer values";
} else if (offsets.start >= 0) {
return "Specified start offset must less than 0";
} else if (offsets.end < 0) {
return "Specified end offset must greater than or equal to 0";
} else if (offsets.start >= offsets.end) {
return "Specified start offset must be < end offset";
}
return true;
};
@ -330,6 +309,28 @@ define(['EventEmitter'], function (EventEmitter) {
return this.toi;
};
/**
* Update bounds based on provided time and current offsets
* @private
* @param {number} timestamp A time from which boudns will be calculated
* using current offsets.
*/
TimeAPI.prototype.tick = function (timestamp) {
var newBounds = {
start: timestamp + this.offsets.start,
end: timestamp + this.offsets.end
};
this.boundsVal = newBounds;
this.emit('bounds', this.boundsVal, true);
// If a bounds change results in a TOI outside of the current
// bounds, unset it
if (this.toi < newBounds.start || this.toi > newBounds.end) {
this.timeOfInterest(undefined);
}
};
/**
* Set the active clock. Tick source will be immediately subscribed to
* and ticking will begin. Offsets from 'now' must also be provided. A clock
@ -360,14 +361,14 @@ define(['EventEmitter'], function (EventEmitter) {
var previousClock = this.activeClock;
if (previousClock !== undefined) {
previousClock.off("tick", tick);
previousClock.off("tick", this.tick);
}
this.activeClock = clock;
if (this.activeClock !== undefined) {
this.offsets = offsets;
this.activeClock.on("tick", tick);
this.activeClock.on("tick", this.tick);
}
/**