mirror of
https://github.com/nasa/openmct.git
synced 2024-12-20 21:53:08 +00:00
Merge open933 latest, resolve conflicts
Fixes #933 Fair amount of manual fixing in time-conductor.html
This commit is contained in:
Charles Hacskaylo
commit
8214c8e895
@ -1,4 +1,3 @@
|
||||
|
||||
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
||||
<div ng-controller="TimeConductorController as tcController"
|
||||
class="holder grows flex-elem l-flex-row l-time-conductor {{modeModel.selected}}-mode">
|
||||
@ -10,77 +9,68 @@
|
||||
|
||||
<div class="flex-elem holder grows l-flex-col l-time-conductor-inner">
|
||||
<!-- Holds inputs and ticks -->
|
||||
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
|
||||
<form class="abs l-time-conductor-inputs-holder"
|
||||
ng-submit="tcController.updateBoundsFromForm(formModel)">
|
||||
<span class="l-time-range-w start-w">
|
||||
<span class="l-time-range-input-w start-date">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'utc',
|
||||
validate: tcController.validateStart
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['start'] = true"
|
||||
ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
|
||||
field="'start'"
|
||||
class="time-range-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w time-delta start-delta"
|
||||
ng-class="{'hide':(modeModel.selected === 'fixed')}">
|
||||
-
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'duration',
|
||||
validate: tcController.validateStartDelta
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['startDelta'] = true"
|
||||
ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
|
||||
field="'startDelta'"
|
||||
class="hrs-min-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
|
||||
<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')}">
|
||||
+
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'duration',
|
||||
validate: tcController.validateEndDelta
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['endDelta'] = true"
|
||||
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
|
||||
field="'endDelta'"
|
||||
class="hrs-min-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w end-date"
|
||||
ng-controller="ToggleController as t2">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'utc',
|
||||
validate: tcController.validateEnd
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['end'] = true"
|
||||
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
|
||||
field="'end'"
|
||||
class="time-range-input">
|
||||
</mct-control>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<input type="submit" class="hidden">
|
||||
</form>
|
||||
<mct-conductor-axis></mct-conductor-axis>
|
||||
</div>
|
||||
<div class="l-time-conductor-ticks l-row-elem l-flex-row flex-elem no-margin">
|
||||
<form class="abs l-time-conductor-inputs-holder"
|
||||
ng-submit="tcController.updateBoundsFromForm(formModel)">
|
||||
<span class="l-time-range-input-w start-date">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'utc',
|
||||
validate: tcController.validateStart
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['start'] = true"
|
||||
ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
|
||||
field="'start'"
|
||||
class="time-range-start">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w start-delta"
|
||||
ng-class="{'hide':(modeModel.selected === 'fixed')}">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'duration',
|
||||
validate: tcController.validateStartDelta
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['startDelta'] = true"
|
||||
ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
|
||||
field="'startDelta'"
|
||||
class="time-delta-start">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w end-delta"
|
||||
ng-class="{'hide':(modeModel.selected === 'fixed')}">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'duration',
|
||||
validate: tcController.validateEndDelta
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['endDelta'] = true"
|
||||
ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
|
||||
field="'endDelta'"
|
||||
class="time-delta-end">
|
||||
</mct-control>
|
||||
</span>
|
||||
<span class="l-time-range-input-w end-date"
|
||||
ng-controller="ToggleController as t2">
|
||||
<mct-control key="'datetime-field'"
|
||||
structure="{
|
||||
format: 'utc',
|
||||
validate: tcController.validateEnd
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-mouseup="tcController.changing['end'] = true"
|
||||
ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
|
||||
field="'end'"
|
||||
class="time-range-end">
|
||||
</mct-control>
|
||||
</span>
|
||||
<input type="submit" class="hidden">
|
||||
</form>
|
||||
<mct-conductor-axis></mct-conductor-axis>
|
||||
</div>
|
||||
|
||||
<!-- Holds data availability, time of interest -->
|
||||
<div class="l-data-visualization l-row-elem l-flex-row flex-elem"></div>
|
||||
|
||||
@ -48,7 +48,7 @@ define(
|
||||
.append('svg:svg')
|
||||
.attr('width', '100%')
|
||||
.attr('height', height);
|
||||
var xScale = d3.scaleTime();
|
||||
var xScale = d3.scaleUtc();
|
||||
var xAxis = d3.axisTop();
|
||||
// draw x axis with labels and move to the bottom of the chart area
|
||||
var axisElement = vis.append("g")
|
||||
|
||||
@ -32,16 +32,18 @@ define(
|
||||
this.$scope = $scope;
|
||||
this.$timeout = $timeout;
|
||||
this.conductor = conductor;
|
||||
this.startDelta = FIFTEEN_MINUTES;
|
||||
this.endDelta = 0;
|
||||
|
||||
this.changing = {
|
||||
'start': false,
|
||||
'startDelta': false,
|
||||
'end': false,
|
||||
'endDelta': false
|
||||
'end': false
|
||||
};
|
||||
|
||||
$scope.formModel = {};
|
||||
$scope.formModel = {
|
||||
startDelta: this.startDelta,
|
||||
endDelta: this.endDelta
|
||||
};
|
||||
|
||||
conductor.on('bounds', function (bounds) {
|
||||
if (!self.changing['start']) {
|
||||
@ -50,13 +52,6 @@ define(
|
||||
if (!self.changing['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){
|
||||
@ -148,11 +143,17 @@ define(
|
||||
TimeConductorController.prototype.updateDeltasFromForm = function (formModel) {
|
||||
|
||||
if (this.validateDeltas(formModel)) {
|
||||
var oldBounds = this.conductor.bounds(),
|
||||
newBounds = {
|
||||
start: oldBounds.end - formModel.startDelta,
|
||||
end: oldBounds.end + formModel.endDelta
|
||||
};
|
||||
//Calculate the previous 'true' end value (without delta)
|
||||
var oldEnd = this.conductor.bounds().end - this.endDelta || 0;
|
||||
|
||||
this.startDelta = formModel.startDelta;
|
||||
this.endDelta = formModel.endDelta;
|
||||
|
||||
var newBounds = {
|
||||
start: oldEnd - this.startDelta,
|
||||
end: oldEnd + this.endDelta
|
||||
};
|
||||
|
||||
this.conductor.bounds(newBounds);
|
||||
}
|
||||
};
|
||||
@ -172,22 +173,20 @@ define(
|
||||
var tickInterval = 1000;
|
||||
var conductor = this.conductor;
|
||||
var $timeout = this.$timeout;
|
||||
var self = this;
|
||||
|
||||
conductor.follow(true);
|
||||
setToNowMinus(FIFTEEN_MINUTES);
|
||||
setBoundsToNow(self.startDelta, self.endDelta);
|
||||
|
||||
var timeoutPromise = $timeout(tick, tickInterval);
|
||||
|
||||
function setToNowMinus(delta) {
|
||||
function setBoundsToNow(startDelta, endDelta) {
|
||||
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() {
|
||||
var bounds = conductor.bounds();
|
||||
var delta = bounds.end - bounds.start;
|
||||
setToNowMinus(delta);
|
||||
|
||||
setBoundsToNow(self.startDelta, self.endDelta);
|
||||
timeoutPromise = $timeout(tick, tickInterval)
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user