mirror of
https://github.com/nasa/openmct.git
synced 2025-06-15 13:48:12 +00:00
Time sync via conductor
This commit is contained in:
@ -52,6 +52,7 @@ define([
|
|||||||
"implementation": TimeConductorController,
|
"implementation": TimeConductorController,
|
||||||
"depends": [
|
"depends": [
|
||||||
"$scope",
|
"$scope",
|
||||||
|
"$timeout",
|
||||||
"timeConductor"
|
"timeConductor"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@ -60,7 +61,9 @@ define([
|
|||||||
{
|
{
|
||||||
"key": "mctConductorAxis",
|
"key": "mctConductorAxis",
|
||||||
"implementation": MCTConductorAxis,
|
"implementation": MCTConductorAxis,
|
||||||
"depends": ["$timeout"]
|
"depends": [
|
||||||
|
"timeConductor"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"representations": [
|
"representations": [
|
||||||
|
@ -25,8 +25,6 @@
|
|||||||
stroke: #A0A0A0;
|
stroke: #A0A0A0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.l-axis-holder svg>g
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
||||||
<div class="follow-mode"
|
<div class="follow-mode"
|
||||||
@ -43,7 +41,7 @@
|
|||||||
validate: tcController.validateStart
|
validate: tcController.validateStart
|
||||||
}"
|
}"
|
||||||
ng-model="formModel"
|
ng-model="formModel"
|
||||||
ng-blur="tcController.updateBoundsFromForm()"
|
ng-blur="tcController.updateBoundsFromForm(formModel)"
|
||||||
field="'start'"
|
field="'start'"
|
||||||
class="time-range-start">
|
class="time-range-start">
|
||||||
</mct-control>
|
</mct-control>
|
||||||
@ -56,7 +54,7 @@
|
|||||||
validate: tcController.validateEnd
|
validate: tcController.validateEnd
|
||||||
}"
|
}"
|
||||||
ng-model="formModel"
|
ng-model="formModel"
|
||||||
ng-blur="trCtrl.updateBoundsFromForm()"
|
ng-blur="tcController.updateBoundsFromForm(formModel)"
|
||||||
field="'end'"
|
field="'end'"
|
||||||
class="time-range-end">
|
class="time-range-end">
|
||||||
</mct-control>
|
</mct-control>
|
||||||
|
@ -37,41 +37,34 @@ define(
|
|||||||
* @constructor
|
* @constructor
|
||||||
* @memberof platform/forms
|
* @memberof platform/forms
|
||||||
*/
|
*/
|
||||||
function MCTConductorAxis($timeout) {
|
function MCTConductorAxis(conductor) {
|
||||||
|
|
||||||
function link(scope, element, attrs, ngModelController) {
|
function link(scope, element, attrs, ngModelController) {
|
||||||
$timeout(function () {
|
var target = element[0].firstChild,
|
||||||
var target = element[0].firstChild,
|
height = target.offsetHeight,
|
||||||
width = target.offsetWidth,
|
padding = 1;
|
||||||
height = target.offsetHeight,
|
|
||||||
padding = 1;
|
|
||||||
|
|
||||||
var vis = d3.select(target)
|
var vis = d3.select(target)
|
||||||
.append('svg:svg')
|
.append('svg:svg')
|
||||||
//.attr('viewBox', '0 0 ' + width + ' ' +
|
.attr('width', '100%')
|
||||||
// height)
|
.attr('height', height);
|
||||||
.attr('width', '100%')
|
var xScale = d3.scaleTime();
|
||||||
.attr('height', height);
|
var xAxis = d3.axisTop();
|
||||||
//.attr('preserveAspectRatio', 'xMidYMid meet');
|
// draw x axis with labels and move to the bottom of the chart area
|
||||||
|
var axisElement = vis.append("g")
|
||||||
|
.attr("transform", "translate(0," + (height - padding) + ")");
|
||||||
|
|
||||||
// define the x scale (horizontal)
|
function setBounds(start, end) {
|
||||||
var mindate = new Date(2012,0,1),
|
var width = target.offsetWidth;
|
||||||
maxdate = new Date(2016,0,1);
|
xScale.domain([new Date(start), new Date(end)])
|
||||||
|
|
||||||
var xScale = d3.scaleTime()
|
|
||||||
.domain([mindate, maxdate])
|
|
||||||
.range([padding, width - padding * 2]);
|
.range([padding, width - padding * 2]);
|
||||||
|
xAxis.scale(xScale);
|
||||||
var xAxis = d3.axisTop()
|
|
||||||
.scale(xScale);
|
|
||||||
|
|
||||||
// draw x axis with labels and move to the bottom of the chart area
|
|
||||||
var axisElement = vis.append("g")
|
|
||||||
.attr("class", "xaxis") // give it a class so it can be used to select only xaxis labels below
|
|
||||||
.attr("transform", "translate(0," + (height - padding) + ")");
|
|
||||||
|
|
||||||
axisElement.call(xAxis);
|
axisElement.call(xAxis);
|
||||||
}, 1000);
|
}
|
||||||
|
|
||||||
|
conductor.on('bounds', function (bounds) {
|
||||||
|
setBounds(bounds.start, bounds.end);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
@ -24,31 +24,53 @@ define(
|
|||||||
[],
|
[],
|
||||||
function () {
|
function () {
|
||||||
|
|
||||||
function TimeConductorController($scope, conductor) {
|
var SIX_HOURS = 6 * 60 * 60 * 1000;
|
||||||
|
|
||||||
|
function TimeConductorController($scope, $timeout, conductor) {
|
||||||
|
var now = Date.now();
|
||||||
|
var self = this;
|
||||||
|
|
||||||
this.$scope = $scope;
|
this.$scope = $scope;
|
||||||
this.conductor = conductor;
|
this.conductor = conductor;
|
||||||
|
|
||||||
/*
|
$scope.formModel = {};
|
||||||
Stuff to put on scope
|
|
||||||
- parameters
|
conductor.on('bounds', function (bounds) {
|
||||||
- formModel
|
$scope.formModel = {
|
||||||
*/
|
start: bounds.start,
|
||||||
this.$scope.formModel = {
|
end: bounds.end
|
||||||
start: '2012-01-01 00:00:00.000Z',
|
};
|
||||||
end: '2016-01-01 00:00:00.000Z'
|
});
|
||||||
};
|
|
||||||
|
//Temporary workaround for resizing issue
|
||||||
|
$timeout(function() {
|
||||||
|
//Set the time conductor to some default
|
||||||
|
conductor.bounds({start: now - SIX_HOURS, end: now});
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
Object.keys(TimeConductorController.prototype).filter(function (key){
|
||||||
|
return typeof TimeConductorController.prototype[key] === 'function';
|
||||||
|
}).forEach(function (key) {
|
||||||
|
self[key] = self[key].bind(self);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
TimeConductorController.prototype.validateStart = function () {
|
TimeConductorController.prototype.validateStart = function (start) {
|
||||||
return true;
|
var bounds = this.conductor.bounds();
|
||||||
|
return this.conductor.validateBounds({start: start, end: bounds.end}) === true;
|
||||||
};
|
};
|
||||||
|
|
||||||
TimeConductorController.prototype.validateEnd = function () {
|
TimeConductorController.prototype.validateEnd = function (end) {
|
||||||
return true;
|
var bounds = this.conductor.bounds();
|
||||||
|
return this.conductor.validateBounds({start: bounds.start, end: end}) === true;
|
||||||
};
|
};
|
||||||
|
|
||||||
TimeConductorController.prototype.updateBoundsFromForm = function () {
|
TimeConductorController.prototype.updateBoundsFromForm = function (formModel) {
|
||||||
|
var newBounds = {start: formModel.start, end: formModel.end};
|
||||||
|
|
||||||
|
if (this.conductor.validateBounds(newBounds) === true) {
|
||||||
|
this.conductor.bounds(newBounds);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return TimeConductorController;
|
return TimeConductorController;
|
||||||
|
Reference in New Issue
Block a user