Skip to content

Commit 8214c8e

Browse files
charlesh88charlesh88
committed
Merge open933 latest, resolve conflicts
Fixes #933 Fair amount of manual fixing in time-conductor.html
2 parents 33b2225 + 14463d3 commit 8214c8e

File tree

3 files changed

+85
-96
lines changed

3 files changed

+85
-96
lines changed

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

+62-72
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
32
<div ng-controller="TimeConductorController as tcController"
43
class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selected}}-mode">
@@ -10,77 +9,68 @@
109

1110
<div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
1211
<!-- Holds inputs and ticks -->
13-
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
14-
<form class="abs l-time-conductor-inputs-holder"
15-
ng-submit="tcController.updateBoundsFromForm(formModel)">
16-
<span class="l-time-range-w start-w">
17-
<span class="l-time-range-input-w start-date">
18-
<mct-control key="'datetime-field'"
19-
structure="{
20-
format: 'utc',
21-
validate: tcController.validateStart
22-
}"
23-
ng-model="formModel"
24-
ng-mouseup="tcController.changing['start'] = true"
25-
ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
26-
field="'start'"
27-
class="time-range-input">
28-
</mct-control>
29-
</span>
30-
<span class="l-time-range-input-w time-delta start-delta"
31-
ng-class="{'hide':(modeModel.selected === 'fixed')}">
32-
-
33-
<mct-control key="'datetime-field'"
34-
structure="{
35-
format: 'duration',
36-
validate: tcController.validateStartDelta
37-
}"
38-
ng-model="formModel"
39-
ng-mouseup="tcController.changing['startDelta'] = true"
40-
ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
41-
field="'startDelta'"
42-
class="hrs-min-input">
43-
</mct-control>
44-
</span>
45-
</span>
46-
47-
48-
<span class="l-time-range-w end-w">
49-
<span class="l-time-range-input-w time-delta end-delta"
50-
ng-class="{'hide':(modeModel.selected === 'fixed')}">
51-
+
52-
<mct-control key="'datetime-field'"
53-
structure="{
54-
format: 'duration',
55-
validate: tcController.validateEndDelta
56-
}"
57-
ng-model="formModel"
58-
ng-mouseup="tcController.changing['endDelta'] = true"
59-
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
60-
field="'endDelta'"
61-
class="hrs-min-input">
62-
</mct-control>
63-
</span>
64-
<span class="l-time-range-input-w end-date"
65-
ng-controller="ToggleController as t2">
66-
<mct-control key="'datetime-field'"
67-
structure="{
68-
format: 'utc',
69-
validate: tcController.validateEnd
70-
}"
71-
ng-model="formModel"
72-
ng-mouseup="tcController.changing['end'] = true"
73-
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
74-
field="'end'"
75-
class="time-range-input">
76-
</mct-control>
77-
</span>
78-
</span>
79-
80-
<input type="submit" class="hidden">
81-
</form>
82-
<mct-conductor-axis></mct-conductor-axis>
83-
</div>
12+
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
13+
<form class="abs l-time-conductor-inputs-holder"
14+
ng-submit="tcController.updateBoundsFromForm(formModel)">
15+
<span class="l-time-range-input-w start-date">
16+
<mct-control key="'datetime-field'"
17+
structure="{
18+
format: 'utc',
19+
validate: tcController.validateStart
20+
}"
21+
ng-model="formModel"
22+
ng-mouseup="tcController.changing['start'] = true"
23+
ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
24+
field="'start'"
25+
class="time-range-start">
26+
</mct-control>
27+
</span>
28+
<span class="l-time-range-input-w start-delta"
29+
ng-class="{'hide':(modeModel.selected === 'fixed')}">
30+
<mct-control key="'datetime-field'"
31+
structure="{
32+
format: 'duration',
33+
validate: tcController.validateStartDelta
34+
}"
35+
ng-model="formModel"
36+
ng-mouseup="tcController.changing['startDelta'] = true"
37+
ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
38+
field="'startDelta'"
39+
class="time-delta-start">
40+
</mct-control>
41+
</span>
42+
<span class="l-time-range-input-w end-delta"
43+
ng-class="{'hide':(modeModel.selected === 'fixed')}">
44+
<mct-control key="'datetime-field'"
45+
structure="{
46+
format: 'duration',
47+
validate: tcController.validateEndDelta
48+
}"
49+
ng-model="formModel"
50+
ng-mouseup="tcController.changing['endDelta'] = true"
51+
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
52+
field="'endDelta'"
53+
class="time-delta-end">
54+
</mct-control>
55+
</span>
56+
<span class="l-time-range-input-w end-date"
57+
ng-controller="ToggleController as t2">
58+
<mct-control key="'datetime-field'"
59+
structure="{
60+
format: 'utc',
61+
validate: tcController.validateEnd
62+
}"
63+
ng-model="formModel"
64+
ng-mouseup="tcController.changing['end'] = true"
65+
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
66+
field="'end'"
67+
class="time-range-end">
68+
</mct-control>
69+
</span>
70+
<input type="submit" class="hidden">
71+
</form>
72+
<mct-conductor-axis></mct-conductor-axis>
73+
</div>
8474

8575
<!-- Holds data availability, time of interest -->
8676
<div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ define(
4848
.append('svg:svg')
4949
.attr('width', '100%')
5050
.attr('height', height);
51-
var xScale = d3.scaleTime();
51+
var xScale = d3.scaleUtc();
5252
var xAxis = d3.axisTop();
5353
// draw x axis with labels and move to the bottom of the chart area
5454
var axisElement = vis.append("g")

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

+22-23
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,18 @@ define(
3232
this.$scope = $scope;
3333
this.$timeout = $timeout;
3434
this.conductor = conductor;
35+
this.startDelta = FIFTEEN_MINUTES;
3536
this.endDelta = 0;
3637

3738
this.changing = {
3839
'start': false,
39-
'startDelta': false,
40-
'end': false,
41-
'endDelta': false
40+
'end': false
4241
};
4342

44-
$scope.formModel = {};
43+
$scope.formModel = {
44+
startDelta: this.startDelta,
45+
endDelta: this.endDelta
46+
};
4547

4648
conductor.on('bounds', function (bounds) {
4749
if (!self.changing['start']) {
@@ -50,13 +52,6 @@ define(
5052
if (!self.changing['end']) {
5153
$scope.formModel.end = bounds.end;
5254
}
53-
if (!self.changing['startDelta']) {
54-
$scope.formModel.startDelta = bounds.end - bounds.start;
55-
}
56-
57-
if (!self.changing['endDelta']) {
58-
$scope.formModel.endDelta = 0;
59-
}
6055
});
6156

6257
conductor.on('follow', function (follow){
@@ -148,11 +143,17 @@ define(
148143
TimeConductorController.prototype.updateDeltasFromForm = function (formModel) {
149144

150145
if (this.validateDeltas(formModel)) {
151-
var oldBounds = this.conductor.bounds(),
152-
newBounds = {
153-
start: oldBounds.end - formModel.startDelta,
154-
end: oldBounds.end + formModel.endDelta
155-
};
146+
//Calculate the previous 'true' end value (without delta)
147+
var oldEnd = this.conductor.bounds().end - this.endDelta || 0;
148+
149+
this.startDelta = formModel.startDelta;
150+
this.endDelta = formModel.endDelta;
151+
152+
var newBounds = {
153+
start: oldEnd - this.startDelta,
154+
end: oldEnd + this.endDelta
155+
};
156+
156157
this.conductor.bounds(newBounds);
157158
}
158159
};
@@ -172,22 +173,20 @@ define(
172173
var tickInterval = 1000;
173174
var conductor = this.conductor;
174175
var $timeout = this.$timeout;
176+
var self = this;
175177

176178
conductor.follow(true);
177-
setToNowMinus(FIFTEEN_MINUTES);
179+
setBoundsToNow(self.startDelta, self.endDelta);
178180

179181
var timeoutPromise = $timeout(tick, tickInterval);
180182

181-
function setToNowMinus(delta) {
183+
function setBoundsToNow(startDelta, endDelta) {
182184
var now = Math.ceil(Date.now() / 1000) * 1000;
183-
conductor.bounds({start: now - delta, end: now});
185+
conductor.bounds({start: now - startDelta, end: now + endDelta});
184186
}
185187

186188
function tick() {
187-
var bounds = conductor.bounds();
188-
var delta = bounds.end - bounds.start;
189-
setToNowMinus(delta);
190-
189+
setBoundsToNow(self.startDelta, self.endDelta);
191190
timeoutPromise = $timeout(tick, tickInterval)
192191
}
193192

0 commit comments

Comments
 (0)