Merge open933 latest, resolve conflicts

Fixes #933
Fair amount of manual fixing in time-conductor.html
This commit is contained in:
Charles Hacskaylo 2016-07-13 19:16:00 -07:00
commit 8214c8e895
3 changed files with 85 additions and 96 deletions

View File

@ -1,4 +1,3 @@
<!-- Parent holder for time conductor. follow-mode | fixed-mode --> <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
<div ng-controller="TimeConductorController as tcController" <div ng-controller="TimeConductorController as tcController"
class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selected}}-mode"> class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selected}}-mode">
@ -13,7 +12,6 @@
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin"> <div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
<form class="abs l-time-conductor-inputs-holder" <form class="abs l-time-conductor-inputs-holder"
ng-submit="tcController.updateBoundsFromForm(formModel)"> ng-submit="tcController.updateBoundsFromForm(formModel)">
<span class="l-time-range-w start-w">
<span class="l-time-range-input-w start-date"> <span class="l-time-range-input-w start-date">
<mct-control key="'datetime-field'" <mct-control key="'datetime-field'"
structure="{ structure="{
@ -24,12 +22,11 @@
ng-mouseup="tcController.changing['start'] = true" ng-mouseup="tcController.changing['start'] = true"
ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)" ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
field="'start'" field="'start'"
class="time-range-input"> class="time-range-start">
</mct-control> </mct-control>
</span> </span>
<span class="l-time-range-input-w time-delta start-delta" <span class="l-time-range-input-w start-delta"
ng-class="{'hide':(modeModel.selected === 'fixed')}"> ng-class="{'hide':(modeModel.selected === 'fixed')}">
-
<mct-control key="'datetime-field'" <mct-control key="'datetime-field'"
structure="{ structure="{
format: 'duration', format: 'duration',
@ -39,16 +36,11 @@
ng-mouseup="tcController.changing['startDelta'] = true" ng-mouseup="tcController.changing['startDelta'] = true"
ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)" ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
field="'startDelta'" field="'startDelta'"
class="hrs-min-input"> class="time-delta-start">
</mct-control> </mct-control>
</span> </span>
</span> <span class="l-time-range-input-w end-delta"
<span class="l-time-range-w end-w">
<span class="l-time-range-input-w time-delta end-delta"
ng-class="{'hide':(modeModel.selected === 'fixed')}"> ng-class="{'hide':(modeModel.selected === 'fixed')}">
+
<mct-control key="'datetime-field'" <mct-control key="'datetime-field'"
structure="{ structure="{
format: 'duration', format: 'duration',
@ -58,7 +50,7 @@
ng-mouseup="tcController.changing['endDelta'] = true" ng-mouseup="tcController.changing['endDelta'] = true"
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)" ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
field="'endDelta'" field="'endDelta'"
class="hrs-min-input"> class="time-delta-end">
</mct-control> </mct-control>
</span> </span>
<span class="l-time-range-input-w end-date" <span class="l-time-range-input-w end-date"
@ -72,11 +64,9 @@
ng-mouseup="tcController.changing['end'] = true" ng-mouseup="tcController.changing['end'] = true"
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)" ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
field="'end'" field="'end'"
class="time-range-input"> class="time-range-end">
</mct-control> </mct-control>
</span> </span>
</span>
<input type="submit" class="hidden"> <input type="submit" class="hidden">
</form> </form>
<mct-conductor-axis></mct-conductor-axis> <mct-conductor-axis></mct-conductor-axis>

View File

@ -48,7 +48,7 @@ define(
.append('svg:svg') .append('svg:svg')
.attr('width', '100%') .attr('width', '100%')
.attr('height', height); .attr('height', height);
var xScale = d3.scaleTime(); var xScale = d3.scaleUtc();
var xAxis = d3.axisTop(); var xAxis = d3.axisTop();
// draw x axis with labels and move to the bottom of the chart area // draw x axis with labels and move to the bottom of the chart area
var axisElement = vis.append("g") var axisElement = vis.append("g")

View File

@ -32,16 +32,18 @@ define(
this.$scope = $scope; this.$scope = $scope;
this.$timeout = $timeout; this.$timeout = $timeout;
this.conductor = conductor; this.conductor = conductor;
this.startDelta = FIFTEEN_MINUTES;
this.endDelta = 0; this.endDelta = 0;
this.changing = { this.changing = {
'start': false, 'start': false,
'startDelta': false, 'end': false
'end': false,
'endDelta': false
}; };
$scope.formModel = {}; $scope.formModel = {
startDelta: this.startDelta,
endDelta: this.endDelta
};
conductor.on('bounds', function (bounds) { conductor.on('bounds', function (bounds) {
if (!self.changing['start']) { if (!self.changing['start']) {
@ -50,13 +52,6 @@ define(
if (!self.changing['end']) { if (!self.changing['end']) {
$scope.formModel.end = bounds.end; $scope.formModel.end = bounds.end;
} }
if (!self.changing['startDelta']) {
$scope.formModel.startDelta = bounds.end - bounds.start;
}
if (!self.changing['endDelta']) {
$scope.formModel.endDelta = 0;
}
}); });
conductor.on('follow', function (follow){ conductor.on('follow', function (follow){
@ -148,11 +143,17 @@ define(
TimeConductorController.prototype.updateDeltasFromForm = function (formModel) { TimeConductorController.prototype.updateDeltasFromForm = function (formModel) {
if (this.validateDeltas(formModel)) { if (this.validateDeltas(formModel)) {
var oldBounds = this.conductor.bounds(), //Calculate the previous 'true' end value (without delta)
newBounds = { var oldEnd = this.conductor.bounds().end - this.endDelta || 0;
start: oldBounds.end - formModel.startDelta,
end: oldBounds.end + formModel.endDelta this.startDelta = formModel.startDelta;
this.endDelta = formModel.endDelta;
var newBounds = {
start: oldEnd - this.startDelta,
end: oldEnd + this.endDelta
}; };
this.conductor.bounds(newBounds); this.conductor.bounds(newBounds);
} }
}; };
@ -172,22 +173,20 @@ define(
var tickInterval = 1000; var tickInterval = 1000;
var conductor = this.conductor; var conductor = this.conductor;
var $timeout = this.$timeout; var $timeout = this.$timeout;
var self = this;
conductor.follow(true); conductor.follow(true);
setToNowMinus(FIFTEEN_MINUTES); setBoundsToNow(self.startDelta, self.endDelta);
var timeoutPromise = $timeout(tick, tickInterval); var timeoutPromise = $timeout(tick, tickInterval);
function setToNowMinus(delta) { function setBoundsToNow(startDelta, endDelta) {
var now = Math.ceil(Date.now() / 1000) * 1000; var now = Math.ceil(Date.now() / 1000) * 1000;
conductor.bounds({start: now - delta, end: now}); conductor.bounds({start: now - startDelta, end: now + endDelta});
} }
function tick() { function tick() {
var bounds = conductor.bounds(); setBoundsToNow(self.startDelta, self.endDelta);
var delta = bounds.end - bounds.start;
setToNowMinus(delta);
timeoutPromise = $timeout(tick, tickInterval) timeoutPromise = $timeout(tick, tickInterval)
} }