Enabled fixed and real-time modes

platform/features/conductor-v2/res/templates/mode-selector/mode-menu.html

@@ -22,46 +22,15 @@
 <div class="contents">
     <div class="pane left menu-items">
         <ul>
-            <li ng-click="representation.mode='fixed'">
+            <li ng-repeat="option in ngModel.options"
+                ng-click="ngModel.selected=option.key">
                 <a
-                   ng-mouseover="representation.activeMetadata = {
-                        glyph: '\ue604',
-                        name: 'Fixed Time-Span',
-                        description: 'Display data that falls between two fixed dates'
-                    }"
+                   ng-mouseover="representation.activeMetadata = option"
                    ng-mouseleave="representation.activeMetadata = undefined">
                     <span class="ui-symbol icon type-icon">
-                        &#xe604;
+                        {{option.glyph}}
                     </span>
-                    Fixed Time-span
-                </a>
-            </li>
-            <li ng-click="representation.mode='realtime'">
-                <a
-                        ng-mouseover="representation.activeMetadata = {
-                        glyph: '\u0043',
-                        name: 'Real-time Mode',
-                        description: 'Monitor real-time streaming data as it comes in to the application. The Time Conductor will automatically advance itself based on a UTC clock.'
-                    }"
-                        ng-mouseleave="representation.activeMetadata = undefined">
-                    <span class="ui-symbol icon type-icon">
-                        &#x43;
-                    </span>
-                    Real-time
-                </a>
-            </li>
-            <li ng-click="representation.mode='latest'">
-                <a
-                        ng-mouseover="representation.activeMetadata = {
-                        glyph: '\u0044',
-                        name: 'Latest Available Data',
-                        description: 'Monitor real-time streaming data as it comes in to the application. In contrast to real-time mode the time conductor will only advance when data becomes available.'
-                    }"
-                        ng-mouseleave="representation.activeMetadata = undefined">
-                    <span class="ui-symbol icon type-icon">
-                        &#x44;
-                    </span>
-                    Latest Available Data
+                    {{option.name}}
                 </a>
             </li>
         </ul>

platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html

@@ -39,12 +39,13 @@
 <span ng-controller="ClickAwayController as modeController">
     <div class="s-menu-btn"
          ng-click="modeController.toggle()">
-		<span class="title-label">Fixed Time Span</span>
+		<span class="title-label">{{ngModel.selected}}</span>
     </div>
     <div class="menu super-menu mode-selector-menu"
          ng-show="modeController.isActive()">
         <mct-representation mct-object="domainObject"
-                            key="'mode-menu'">
+                            key="'mode-menu'"
+                            ng-model="ngModel">
         </mct-representation>
     </div>
 </span>

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

@@ -27,8 +27,8 @@
 
 </style>
 <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
-<div class="follow-mode"
-     ng-controller="TimeConductorController as tcController" class="l-flex-col">
+<div ng-controller="TimeConductorController as tcController"
+     class="l-flex-col" ng-class="{'follow-mode': followMode}">
     <!-- Holds date selectors and ticks -->
     <div class="l-conductor-dates">
         <form class="l-time-range-inputs-holder l-flex-row flex-elem"
@@ -74,6 +74,7 @@
         <mct-representation
             key="'mode-selector'"
             mct-object="domainObject"
+            ng-model="modeModel"
             class="holder flex-elem">
         </mct-representation>
         <mct-control

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

@@ -27,13 +27,16 @@ define(
         var SIX_HOURS = 6 * 60 * 60 * 1000;
 
         function TimeConductorController($scope, $timeout, conductor) {
-            var now = Math.ceil(Date.now() / 1000) * 1000;
             var self = this;
 
             this.$scope = $scope;
+            this.$timeout = $timeout;
             this.conductor = conductor;
 
             $scope.formModel = {};
+            $scope.modeSelector = {
+                value: 'fixed'
+            };
 
             conductor.on('bounds', function (bounds) {
                 $scope.formModel = {
@@ -42,19 +45,52 @@ define(
                 };
             });
 
-            //Temporary workaround for resizing issue
-            $timeout(function() {
-                //Set the time conductor to some default
-                conductor.bounds({start: now - SIX_HOURS, end: now});
-            }, 1000);
+            conductor.on('follow', function (follow){
+                $scope.followMode = follow;
+            });
 
-            Object.keys(TimeConductorController.prototype).filter(function (key){
+            Object.keys(TimeConductorController.prototype).filter(function (key) {
                 return typeof TimeConductorController.prototype[key] === 'function';
             }).forEach(function (key) {
                 self[key] = self[key].bind(self);
             });
+
+            //Temporary workaround for resizing issue
+            $timeout(self.initialize, 1000);
+
+            $scope.$watch('modeModel.selected', this.switchMode);
+
+            $scope.modeModel = {
+                selected: 'fixed',
+                options: [
+                    {
+                        key: 'fixed',
+                        glyph: '\ue604',
+                        name: 'Fixed Time-Span',
+                        description: 'Display data that falls between two fixed dates'
+                    },
+                    {
+                        key: 'realtime',
+                        glyph: '\u0043',
+                        name: 'Real-time Mode',
+                        description: 'Monitor real-time streaming data as it comes in to the application. The Time Conductor will automatically advance itself based on a UTC clock.'
+                    },
+                    {
+                        key: 'latest',
+                        glyph: '\u0044',
+                        name: 'Latest Available Data',
+                        description: 'Monitor real-time streaming data as it comes in to the application. In contrast to real-time mode the time conductor will only advance when data becomes available.'
+                    }
+                ]
+            }
         }
 
+        TimeConductorController.prototype.initialize = function () {
+            var now = Math.ceil(Date.now() / 1000) * 1000;
+            //Set the time conductor to some default
+            this.conductor.bounds({start: now - SIX_HOURS, end: now});
+        };
+
         TimeConductorController.prototype.validateStart = function (start) {
             var bounds = this.conductor.bounds();
             return this.conductor.validateBounds({start: start, end: bounds.end}) === true;
@@ -73,6 +109,43 @@ define(
             }
         };
 
+        TimeConductorController.prototype.switchMode = function (newMode) {
+            if (this.mode) {
+                this.mode();
+            }
+            this.mode = TimeConductorController.modes[newMode].call(this, this.conductor);
+        };
+
+        TimeConductorController.modes = {
+            'fixed': function (conductor) {
+                conductor.follow(false);
+            },
+            'realtime': function (conductor) {
+                var tickInterval = 1000;
+                var $timeout = this.$timeout;
+                var timeoutPromise = $timeout(tick, tickInterval);
+
+                conductor.follow(true);
+
+                function tick() {
+                    var bounds = conductor.bounds();
+                    var interval = bounds.end - bounds.start;
+                    var now = Math.ceil(Date.now() / 1000) * 1000;
+                    conductor.bounds({start: now - interval, end: now});
+
+                    timeoutPromise = $timeout(tick, tickInterval)
+                }
+
+                return function destroy() {
+                    $timeout.cancel(timeoutPromise);
+                }
+            },
+            'latest': function (conductor) {
+                //Don't know what to do here yet...
+                conductor.follow(true);
+            }
+        };
+
         return TimeConductorController;
     }
 );