Skip to content

Commit 7b19f91

Browse files
charlesh88charlesh88
committed
[Frontend] Merge latest from open933
Fixes #933 Resolve conflicts in mode-menu.html, mode-selector.html, time-conductor.html; apply tweaks, language, etc.
2 parents 0a0bc55 + 4e7b69c commit 7b19f91

File tree

4 files changed

+93
-48
lines changed

4 files changed

+93
-48
lines changed

‎platform/features/conductor-v2/res/templates/mode-selector/mode-menu.html

+5-36
Original file line numberDiff line numberDiff line change
@@ -22,46 +22,15 @@
2222
<div class="contents">
2323
<div class="pane left menu-items">
2424
<ul>
25-
<li ng-click="representation.mode='fixed'">
25+
<li ng-repeat="option in ngModel.options"
26+
ng-click="ngModel.selected=option.key">
2627
<a
27-
ng-mouseover="representation.activeMetadata = {
28-
glyph: '\ue604',
29-
name: 'Fixed Timespan Mode',
30-
description: 'Query and explore data that falls between two fixed dates.'
31-
}"
28+
ng-mouseover="representation.activeMetadata = option"
3229
ng-mouseleave="representation.activeMetadata = undefined">
3330
<span class="ui-symbol icon type-icon">
34-
&#xe604;
31+
{{option.glyph}}
3532
</span>
36-
Fixed Timespan Mode
37-
</a>
38-
</li>
39-
<li ng-click="representation.mode='realtime'">
40-
<a
41-
ng-mouseover="representation.activeMetadata = {
42-
glyph: '\u0043',
43-
name: 'Real-time Mode',
44-
description: 'Monitor real-time streaming data as it comes in. The Time Conductor will automatically advance itself based on a UTC clock.'
45-
}"
46-
ng-mouseleave="representation.activeMetadata = undefined">
47-
<span class="ui-symbol icon type-icon">
48-
&#x43;
49-
</span>
50-
Real-time Mode
51-
</a>
52-
</li>
53-
<li ng-click="representation.mode='latest'">
54-
<a
55-
ng-mouseover="representation.activeMetadata = {
56-
glyph: '\u0044',
57-
name: 'Latest Available Data Mode',
58-
description: 'Monitor real-time streaming data as it comes in. The Time Conductor will only advance when data becomes available.'
59-
}"
60-
ng-mouseleave="representation.activeMetadata = undefined">
61-
<span class="ui-symbol icon type-icon">
62-
&#x44;
63-
</span>
64-
Latest Available Data Mode
33+
{{option.name}}
6534
</a>
6635
</li>
6736
</ul>

‎platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
}
2626
.super-menu.mode-selector-menu {
2727
height: 200px;
28+
bottom: 0px;
2829
}
2930
.super-menu.mode-selector-menu .menu-item-description .desc-area.icon {
3031
height: 20%;
@@ -38,12 +39,13 @@
3839
<span ng-controller="ClickAwayController as modeController">
3940
<div class="s-menu-btn"
4041
ng-click="modeController.toggle()">
41-
<span class="title-label">Historical Data Mode</span>
42+
<span class="title-label">{{ngModel.selected}}</span>
4243
</div>
4344
<div class="menu super-menu mini mode-selector-menu"
4445
ng-show="modeController.isActive()">
4546
<mct-representation mct-object="domainObject"
46-
key="'mode-menu'">
47+
key="'mode-menu'"
48+
ng-model="ngModel">
4749
</mct-representation>
4850
</div>
4951
</span>

‎platform/features/conductor-v2/res/templates/time-conductor.html

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
2-
<div class="l-time-conductor follow-mode"
3-
ng-controller="TimeConductorController as tcController" class="l-flex-col">
2+
<div ng-controller="TimeConductorController as tcController"
3+
class="l-time-conductor l-flex-col" ng-class="{'follow-mode': followMode}">
44
<!-- Holds inputs and ticks -->
55
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
66
<form class="abs l-time-conductor-inputs-holder"
@@ -30,7 +30,7 @@
3030
class="time-range-end">
3131
</mct-control>
3232
</span>
33-
<input type="submit" class="hidden">
33+
<input type="submit" class="hidden">
3434
</form>
3535
<mct-conductor-axis></mct-conductor-axis>
3636
</div>
@@ -43,6 +43,7 @@
4343
<mct-representation
4444
key="'mode-selector'"
4545
mct-object="domainObject"
46+
ng-model="modeModel"
4647
class="holder flex-elem menus-up mode-selector">
4748
</mct-representation>
4849
<mct-control

‎platform/features/conductor-v2/src/TimeConductorController.js

+80-7
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,16 @@ define(
2727
var SIX_HOURS = 6 * 60 * 60 * 1000;
2828

2929
function TimeConductorController($scope, $timeout, conductor) {
30-
var now = Date.now();
3130
var self = this;
3231

3332
this.$scope = $scope;
33+
this.$timeout = $timeout;
3434
this.conductor = conductor;
3535

3636
$scope.formModel = {};
37+
$scope.modeSelector = {
38+
value: 'fixed'
39+
};
3740

3841
conductor.on('bounds', function (bounds) {
3942
$scope.formModel = {
@@ -42,19 +45,52 @@ define(
4245
};
4346
});
4447

45-
//Temporary workaround for resizing issue
46-
$timeout(function() {
47-
//Set the time conductor to some default
48-
conductor.bounds({start: now - SIX_HOURS, end: now});
49-
}, 1000);
48+
conductor.on('follow', function (follow){
49+
$scope.followMode = follow;
50+
});
5051

51-
Object.keys(TimeConductorController.prototype).filter(function (key){
52+
Object.keys(TimeConductorController.prototype).filter(function (key) {
5253
return typeof TimeConductorController.prototype[key] === 'function';
5354
}).forEach(function (key) {
5455
self[key] = self[key].bind(self);
5556
});
57+
58+
//Temporary workaround for resizing issue
59+
$timeout(self.initialize, 1000);
60+
61+
$scope.$watch('modeModel.selected', this.switchMode);
62+
63+
$scope.modeModel = {
64+
selected: 'fixed',
65+
options: [
66+
{
67+
key: 'fixed',
68+
glyph: '\ue604',
69+
name: 'Fixed Time-Span',
70+
description: 'Display data that falls between two fixed dates'
71+
},
72+
{
73+
key: 'realtime',
74+
glyph: '\u0043',
75+
name: 'Real-time Mode',
76+
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.'
77+
},
78+
{
79+
key: 'latest',
80+
glyph: '\u0044',
81+
name: 'Latest Available Data',
82+
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.'
83+
}
84+
]
85+
}
5686
}
5787

88+
TimeConductorController.prototype.initialize = function () {
89+
var now = Math.ceil(Date.now() / 1000) * 1000;
90+
//Set the time conductor to some default
91+
this.conductor.bounds({start: now - SIX_HOURS, end: now});
92+
};
93+
5894
TimeConductorController.prototype.validateStart = function (start) {
5995
var bounds = this.conductor.bounds();
6096
return this.conductor.validateBounds({start: start, end: bounds.end}) === true;
@@ -73,6 +109,43 @@ define(
73109
}
74110
};
75111

112+
TimeConductorController.prototype.switchMode = function (newMode) {
113+
if (this.mode) {
114+
this.mode();
115+
}
116+
this.mode = TimeConductorController.modes[newMode].call(this, this.conductor);
117+
};
118+
119+
TimeConductorController.modes = {
120+
'fixed': function (conductor) {
121+
conductor.follow(false);
122+
},
123+
'realtime': function (conductor) {
124+
var tickInterval = 1000;
125+
var $timeout = this.$timeout;
126+
var timeoutPromise = $timeout(tick, tickInterval);
127+
128+
conductor.follow(true);
129+
130+
function tick() {
131+
var bounds = conductor.bounds();
132+
var interval = bounds.end - bounds.start;
133+
var now = Math.ceil(Date.now() / 1000) * 1000;
134+
conductor.bounds({start: now - interval, end: now});
135+
136+
timeoutPromise = $timeout(tick, tickInterval)
137+
}
138+
139+
return function destroy() {
140+
$timeout.cancel(timeoutPromise);
141+
}
142+
},
143+
'latest': function (conductor) {
144+
//Don't know what to do here yet...
145+
conductor.follow(true);
146+
}
147+
};
148+
76149
return TimeConductorController;
77150
}
78151
);

0 commit comments

Comments
 (0)