mirror of
https://github.com/nasa/openmct.git
synced 2025-03-18 10:05:22 +00:00
Enabled fixed and real-time modes
This commit is contained in:
parent
e230b92946
commit
4e7b69c4df
@ -22,46 +22,15 @@
|
||||
<div class="contents">
|
||||
<div class="pane left menu-items">
|
||||
<ul>
|
||||
<li ng-click="representation.mode='fixed'">
|
||||
<li ng-repeat="option in ngModel.options"
|
||||
ng-click="ngModel.selected=option.key">
|
||||
<a
|
||||
ng-mouseover="representation.activeMetadata = {
|
||||
glyph: '\ue604',
|
||||
name: 'Fixed Time-Span',
|
||||
description: 'Display data that falls between two fixed dates'
|
||||
}"
|
||||
ng-mouseover="representation.activeMetadata = option"
|
||||
ng-mouseleave="representation.activeMetadata = undefined">
|
||||
<span class="ui-symbol icon type-icon">
|
||||

|
||||
{{option.glyph}}
|
||||
</span>
|
||||
Fixed Time-span
|
||||
</a>
|
||||
</li>
|
||||
<li ng-click="representation.mode='realtime'">
|
||||
<a
|
||||
ng-mouseover="representation.activeMetadata = {
|
||||
glyph: '\u0043',
|
||||
name: 'Real-time Mode',
|
||||
description: 'Monitor real-time streaming data as it comes in to the application. The Time Conductor will automatically advance itself based on a UTC clock.'
|
||||
}"
|
||||
ng-mouseleave="representation.activeMetadata = undefined">
|
||||
<span class="ui-symbol icon type-icon">
|
||||
C
|
||||
</span>
|
||||
Real-time
|
||||
</a>
|
||||
</li>
|
||||
<li ng-click="representation.mode='latest'">
|
||||
<a
|
||||
ng-mouseover="representation.activeMetadata = {
|
||||
glyph: '\u0044',
|
||||
name: 'Latest Available Data',
|
||||
description: 'Monitor real-time streaming data as it comes in to the application. In contrast to real-time mode the time conductor will only advance when data becomes available.'
|
||||
}"
|
||||
ng-mouseleave="representation.activeMetadata = undefined">
|
||||
<span class="ui-symbol icon type-icon">
|
||||
D
|
||||
</span>
|
||||
Latest Available Data
|
||||
{{option.name}}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -39,12 +39,13 @@
|
||||
<span ng-controller="ClickAwayController as modeController">
|
||||
<div class="s-menu-btn"
|
||||
ng-click="modeController.toggle()">
|
||||
<span class="title-label">Fixed Time Span</span>
|
||||
<span class="title-label">{{ngModel.selected}}</span>
|
||||
</div>
|
||||
<div class="menu super-menu mode-selector-menu"
|
||||
ng-show="modeController.isActive()">
|
||||
<mct-representation mct-object="domainObject"
|
||||
key="'mode-menu'">
|
||||
key="'mode-menu'"
|
||||
ng-model="ngModel">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</span>
|
@ -27,8 +27,8 @@
|
||||
|
||||
</style>
|
||||
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
||||
<div class="follow-mode"
|
||||
ng-controller="TimeConductorController as tcController" class="l-flex-col">
|
||||
<div ng-controller="TimeConductorController as tcController"
|
||||
class="l-flex-col" ng-class="{'follow-mode': followMode}">
|
||||
<!-- Holds date selectors and ticks -->
|
||||
<div class="l-conductor-dates">
|
||||
<form class="l-time-range-inputs-holder l-flex-row flex-elem"
|
||||
@ -74,6 +74,7 @@
|
||||
<mct-representation
|
||||
key="'mode-selector'"
|
||||
mct-object="domainObject"
|
||||
ng-model="modeModel"
|
||||
class="holder flex-elem">
|
||||
</mct-representation>
|
||||
<mct-control
|
||||
|
@ -27,13 +27,16 @@ define(
|
||||
var SIX_HOURS = 6 * 60 * 60 * 1000;
|
||||
|
||||
function TimeConductorController($scope, $timeout, conductor) {
|
||||
var now = Math.ceil(Date.now() / 1000) * 1000;
|
||||
var self = this;
|
||||
|
||||
this.$scope = $scope;
|
||||
this.$timeout = $timeout;
|
||||
this.conductor = conductor;
|
||||
|
||||
$scope.formModel = {};
|
||||
$scope.modeSelector = {
|
||||
value: 'fixed'
|
||||
};
|
||||
|
||||
conductor.on('bounds', function (bounds) {
|
||||
$scope.formModel = {
|
||||
@ -42,19 +45,52 @@ define(
|
||||
};
|
||||
});
|
||||
|
||||
//Temporary workaround for resizing issue
|
||||
$timeout(function() {
|
||||
//Set the time conductor to some default
|
||||
conductor.bounds({start: now - SIX_HOURS, end: now});
|
||||
}, 1000);
|
||||
conductor.on('follow', function (follow){
|
||||
$scope.followMode = follow;
|
||||
});
|
||||
|
||||
Object.keys(TimeConductorController.prototype).filter(function (key){
|
||||
Object.keys(TimeConductorController.prototype).filter(function (key) {
|
||||
return typeof TimeConductorController.prototype[key] === 'function';
|
||||
}).forEach(function (key) {
|
||||
self[key] = self[key].bind(self);
|
||||
});
|
||||
|
||||
//Temporary workaround for resizing issue
|
||||
$timeout(self.initialize, 1000);
|
||||
|
||||
$scope.$watch('modeModel.selected', this.switchMode);
|
||||
|
||||
$scope.modeModel = {
|
||||
selected: 'fixed',
|
||||
options: [
|
||||
{
|
||||
key: 'fixed',
|
||||
glyph: '\ue604',
|
||||
name: 'Fixed Time-Span',
|
||||
description: 'Display data that falls between two fixed dates'
|
||||
},
|
||||
{
|
||||
key: 'realtime',
|
||||
glyph: '\u0043',
|
||||
name: 'Real-time Mode',
|
||||
description: 'Monitor real-time streaming data as it comes in to the application. The Time Conductor will automatically advance itself based on a UTC clock.'
|
||||
},
|
||||
{
|
||||
key: 'latest',
|
||||
glyph: '\u0044',
|
||||
name: 'Latest Available Data',
|
||||
description: 'Monitor real-time streaming data as it comes in to the application. In contrast to real-time mode the time conductor will only advance when data becomes available.'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
TimeConductorController.prototype.initialize = function () {
|
||||
var now = Math.ceil(Date.now() / 1000) * 1000;
|
||||
//Set the time conductor to some default
|
||||
this.conductor.bounds({start: now - SIX_HOURS, end: now});
|
||||
};
|
||||
|
||||
TimeConductorController.prototype.validateStart = function (start) {
|
||||
var bounds = this.conductor.bounds();
|
||||
return this.conductor.validateBounds({start: start, end: bounds.end}) === true;
|
||||
@ -73,6 +109,43 @@ define(
|
||||
}
|
||||
};
|
||||
|
||||
TimeConductorController.prototype.switchMode = function (newMode) {
|
||||
if (this.mode) {
|
||||
this.mode();
|
||||
}
|
||||
this.mode = TimeConductorController.modes[newMode].call(this, this.conductor);
|
||||
};
|
||||
|
||||
TimeConductorController.modes = {
|
||||
'fixed': function (conductor) {
|
||||
conductor.follow(false);
|
||||
},
|
||||
'realtime': function (conductor) {
|
||||
var tickInterval = 1000;
|
||||
var $timeout = this.$timeout;
|
||||
var timeoutPromise = $timeout(tick, tickInterval);
|
||||
|
||||
conductor.follow(true);
|
||||
|
||||
function tick() {
|
||||
var bounds = conductor.bounds();
|
||||
var interval = bounds.end - bounds.start;
|
||||
var now = Math.ceil(Date.now() / 1000) * 1000;
|
||||
conductor.bounds({start: now - interval, end: now});
|
||||
|
||||
timeoutPromise = $timeout(tick, tickInterval)
|
||||
}
|
||||
|
||||
return function destroy() {
|
||||
$timeout.cancel(timeoutPromise);
|
||||
}
|
||||
},
|
||||
'latest': function (conductor) {
|
||||
//Don't know what to do here yet...
|
||||
conductor.follow(true);
|
||||
}
|
||||
};
|
||||
|
||||
return TimeConductorController;
|
||||
}
|
||||
);
|
||||
|
Loading…
x
Reference in New Issue
Block a user