Enabled fixed and real-time modes

This commit is contained in:
Henry 2016-07-08 16:57:50 -07:00
parent e230b92946
commit 4e7b69c4df
4 changed files with 91 additions and 47 deletions

View File

@ -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">
&#xe604;
{{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">
&#x43;
</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">
&#x44;
</span>
Latest Available Data
{{option.name}}
</a>
</li>
</ul>

View File

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

View File

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

View File

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