mirror of
https://github.com/nasa/openmct.git
synced 2025-03-18 18:15:29 +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="contents">
|
||||||
<div class="pane left menu-items">
|
<div class="pane left menu-items">
|
||||||
<ul>
|
<ul>
|
||||||
<li ng-click="representation.mode='fixed'">
|
<li ng-repeat="option in ngModel.options"
|
||||||
|
ng-click="ngModel.selected=option.key">
|
||||||
<a
|
<a
|
||||||
ng-mouseover="representation.activeMetadata = {
|
ng-mouseover="representation.activeMetadata = option"
|
||||||
glyph: '\ue604',
|
|
||||||
name: 'Fixed Time-Span',
|
|
||||||
description: 'Display data that falls between two fixed dates'
|
|
||||||
}"
|
|
||||||
ng-mouseleave="representation.activeMetadata = undefined">
|
ng-mouseleave="representation.activeMetadata = undefined">
|
||||||
<span class="ui-symbol icon type-icon">
|
<span class="ui-symbol icon type-icon">
|
||||||

|
{{option.glyph}}
|
||||||
</span>
|
</span>
|
||||||
Fixed Time-span
|
{{option.name}}
|
||||||
</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
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -39,12 +39,13 @@
|
|||||||
<span ng-controller="ClickAwayController as modeController">
|
<span ng-controller="ClickAwayController as modeController">
|
||||||
<div class="s-menu-btn"
|
<div class="s-menu-btn"
|
||||||
ng-click="modeController.toggle()">
|
ng-click="modeController.toggle()">
|
||||||
<span class="title-label">Fixed Time Span</span>
|
<span class="title-label">{{ngModel.selected}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="menu super-menu mode-selector-menu"
|
<div class="menu super-menu mode-selector-menu"
|
||||||
ng-show="modeController.isActive()">
|
ng-show="modeController.isActive()">
|
||||||
<mct-representation mct-object="domainObject"
|
<mct-representation mct-object="domainObject"
|
||||||
key="'mode-menu'">
|
key="'mode-menu'"
|
||||||
|
ng-model="ngModel">
|
||||||
</mct-representation>
|
</mct-representation>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
@ -27,8 +27,8 @@
|
|||||||
|
|
||||||
</style>
|
</style>
|
||||||
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
||||||
<div class="follow-mode"
|
<div ng-controller="TimeConductorController as tcController"
|
||||||
ng-controller="TimeConductorController as tcController" class="l-flex-col">
|
class="l-flex-col" ng-class="{'follow-mode': followMode}">
|
||||||
<!-- Holds date selectors and ticks -->
|
<!-- Holds date selectors and ticks -->
|
||||||
<div class="l-conductor-dates">
|
<div class="l-conductor-dates">
|
||||||
<form class="l-time-range-inputs-holder l-flex-row flex-elem"
|
<form class="l-time-range-inputs-holder l-flex-row flex-elem"
|
||||||
@ -74,6 +74,7 @@
|
|||||||
<mct-representation
|
<mct-representation
|
||||||
key="'mode-selector'"
|
key="'mode-selector'"
|
||||||
mct-object="domainObject"
|
mct-object="domainObject"
|
||||||
|
ng-model="modeModel"
|
||||||
class="holder flex-elem">
|
class="holder flex-elem">
|
||||||
</mct-representation>
|
</mct-representation>
|
||||||
<mct-control
|
<mct-control
|
||||||
|
@ -27,13 +27,16 @@ define(
|
|||||||
var SIX_HOURS = 6 * 60 * 60 * 1000;
|
var SIX_HOURS = 6 * 60 * 60 * 1000;
|
||||||
|
|
||||||
function TimeConductorController($scope, $timeout, conductor) {
|
function TimeConductorController($scope, $timeout, conductor) {
|
||||||
var now = Math.ceil(Date.now() / 1000) * 1000;
|
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
this.$scope = $scope;
|
this.$scope = $scope;
|
||||||
|
this.$timeout = $timeout;
|
||||||
this.conductor = conductor;
|
this.conductor = conductor;
|
||||||
|
|
||||||
$scope.formModel = {};
|
$scope.formModel = {};
|
||||||
|
$scope.modeSelector = {
|
||||||
|
value: 'fixed'
|
||||||
|
};
|
||||||
|
|
||||||
conductor.on('bounds', function (bounds) {
|
conductor.on('bounds', function (bounds) {
|
||||||
$scope.formModel = {
|
$scope.formModel = {
|
||||||
@ -42,18 +45,51 @@ define(
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
//Temporary workaround for resizing issue
|
conductor.on('follow', function (follow){
|
||||||
$timeout(function() {
|
$scope.followMode = follow;
|
||||||
//Set the time conductor to some default
|
});
|
||||||
conductor.bounds({start: now - SIX_HOURS, end: now});
|
|
||||||
}, 1000);
|
|
||||||
|
|
||||||
Object.keys(TimeConductorController.prototype).filter(function (key) {
|
Object.keys(TimeConductorController.prototype).filter(function (key) {
|
||||||
return typeof TimeConductorController.prototype[key] === 'function';
|
return typeof TimeConductorController.prototype[key] === 'function';
|
||||||
}).forEach(function (key) {
|
}).forEach(function (key) {
|
||||||
self[key] = self[key].bind(self);
|
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) {
|
TimeConductorController.prototype.validateStart = function (start) {
|
||||||
var bounds = this.conductor.bounds();
|
var bounds = this.conductor.bounds();
|
||||||
@ -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;
|
return TimeConductorController;
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user