Skip to content

Commit

Permalink
Enabled fixed and real-time modes
Browse files Browse the repository at this point in the history
  • Loading branch information
@akhenry
akhenry committed Jul 8, 2016
1 parent e230b92 commit 4e7b69c
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 47 deletions.
41 changes: 5 additions & 36 deletions platform/features/conductor-v2/res/templates/mode-selector/mode-menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
5 changes: 3 additions & 2 deletions platform/features/conductor-v2/res/templates/time-conductor.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -74,6 +74,7 @@
<mct-representation
key="'mode-selector'"
mct-object="domainObject"
ng-model="modeModel"
class="holder flex-elem">
</mct-representation>
<mct-control
Expand Down
87 changes: 80 additions & 7 deletions platform/features/conductor-v2/src/TimeConductorController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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;
Expand All @@ -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;
}
);

0 comments on commit 4e7b69c

Please sign in to comment.