mirror of
https://github.com/nasa/openmct.git
synced 2025-02-21 01:42:31 +00:00
Time sync via conductor
This commit is contained in:
parent
bca5eb0fdb
commit
58ed500ecf
@ -52,6 +52,7 @@ define([
|
||||
"implementation": TimeConductorController,
|
||||
"depends": [
|
||||
"$scope",
|
||||
"$timeout",
|
||||
"timeConductor"
|
||||
]
|
||||
}
|
||||
@ -60,7 +61,9 @@ define([
|
||||
{
|
||||
"key": "mctConductorAxis",
|
||||
"implementation": MCTConductorAxis,
|
||||
"depends": ["$timeout"]
|
||||
"depends": [
|
||||
"timeConductor"
|
||||
]
|
||||
}
|
||||
],
|
||||
"representations": [
|
||||
|
@ -25,8 +25,6 @@
|
||||
stroke: #A0A0A0;
|
||||
}
|
||||
|
||||
.l-axis-holder svg>g
|
||||
|
||||
</style>
|
||||
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
|
||||
<div class="follow-mode"
|
||||
@ -43,7 +41,7 @@
|
||||
validate: tcController.validateStart
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-blur="tcController.updateBoundsFromForm()"
|
||||
ng-blur="tcController.updateBoundsFromForm(formModel)"
|
||||
field="'start'"
|
||||
class="time-range-start">
|
||||
</mct-control>
|
||||
@ -56,7 +54,7 @@
|
||||
validate: tcController.validateEnd
|
||||
}"
|
||||
ng-model="formModel"
|
||||
ng-blur="trCtrl.updateBoundsFromForm()"
|
||||
ng-blur="tcController.updateBoundsFromForm(formModel)"
|
||||
field="'end'"
|
||||
class="time-range-end">
|
||||
</mct-control>
|
||||
|
@ -37,41 +37,34 @@ define(
|
||||
* @constructor
|
||||
* @memberof platform/forms
|
||||
*/
|
||||
function MCTConductorAxis($timeout) {
|
||||
function MCTConductorAxis(conductor) {
|
||||
|
||||
function link(scope, element, attrs, ngModelController) {
|
||||
$timeout(function () {
|
||||
var target = element[0].firstChild,
|
||||
width = target.offsetWidth,
|
||||
height = target.offsetHeight,
|
||||
padding = 1;
|
||||
var target = element[0].firstChild,
|
||||
height = target.offsetHeight,
|
||||
padding = 1;
|
||||
|
||||
var vis = d3.select(target)
|
||||
.append('svg:svg')
|
||||
//.attr('viewBox', '0 0 ' + width + ' ' +
|
||||
// height)
|
||||
.attr('width', '100%')
|
||||
.attr('height', height);
|
||||
//.attr('preserveAspectRatio', 'xMidYMid meet');
|
||||
var vis = d3.select(target)
|
||||
.append('svg:svg')
|
||||
.attr('width', '100%')
|
||||
.attr('height', height);
|
||||
var xScale = d3.scaleTime();
|
||||
var xAxis = d3.axisTop();
|
||||
// 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)
|
||||
var mindate = new Date(2012,0,1),
|
||||
maxdate = new Date(2016,0,1);
|
||||
|
||||
var xScale = d3.scaleTime()
|
||||
.domain([mindate, maxdate])
|
||||
function setBounds(start, end) {
|
||||
var width = target.offsetWidth;
|
||||
xScale.domain([new Date(start), new Date(end)])
|
||||
.range([padding, width - padding * 2]);
|
||||
|
||||
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) + ")");
|
||||
|
||||
xAxis.scale(xScale);
|
||||
axisElement.call(xAxis);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
conductor.on('bounds', function (bounds) {
|
||||
setBounds(bounds.start, bounds.end);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
|
@ -24,31 +24,53 @@ define(
|
||||
[],
|
||||
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.conductor = conductor;
|
||||
|
||||
/*
|
||||
Stuff to put on scope
|
||||
- parameters
|
||||
- formModel
|
||||
*/
|
||||
this.$scope.formModel = {
|
||||
start: '2012-01-01 00:00:00.000Z',
|
||||
end: '2016-01-01 00:00:00.000Z'
|
||||
};
|
||||
$scope.formModel = {};
|
||||
|
||||
conductor.on('bounds', function (bounds) {
|
||||
$scope.formModel = {
|
||||
start: bounds.start,
|
||||
end: bounds.end
|
||||
};
|
||||
});
|
||||
|
||||
//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 () {
|
||||
return true;
|
||||
TimeConductorController.prototype.validateStart = function (start) {
|
||||
var bounds = this.conductor.bounds();
|
||||
return this.conductor.validateBounds({start: start, end: bounds.end}) === true;
|
||||
};
|
||||
|
||||
TimeConductorController.prototype.validateEnd = function () {
|
||||
return true;
|
||||
TimeConductorController.prototype.validateEnd = function (end) {
|
||||
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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user