Time sync via conductor

Author: akhenry

platform/features/conductor-v2/bundle.js

@@ -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": [

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

@@ -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>

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

@@ -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 {

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

@@ -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;