TOI working in time conductor

platform/features/conductor-v2/conductor/bundle.js

@@ -25,6 +25,7 @@ define([
     "./src/ui/TimeConductorController",
     "./src/TimeConductor",
     "./src/ui/ConductorAxisController",
+    "./src/ui/ConductorTOIController",
     "./src/ui/MctConductorAxis",
     "./src/ui/NumberFormat",
     "text!./res/templates/time-conductor.html",
@@ -36,6 +37,7 @@ define([
     TimeConductorController,
     TimeConductor,
     ConductorAxisController,
+    ConductorTOIController,
     MCTConductorAxis,
     NumberFormat,
     timeConductorTemplate,
@@ -83,11 +85,13 @@ define([
                     ]
                 },
                 {
-                    "key": "ConductorAxisController",
+                    "key": "ConductorTOIController",
-                    "implementation": ConductorAxisController,
+                    "implementation": ConductorTOIController,
                     "depends": [
+                        "$scope",
                         "timeConductor",
-                        "formatService"
+                        "timeConductorViewService",
+                        "$timeout"
                     ]
                 }
             ],

platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss

@@ -246,7 +246,9 @@
             &:hover {
                 // Hide the cursor, because the TOI element essentially "becomes" the cursor
                 // when the user is hovering over the visualization area.
-                cursor: none;
+
+                // AH - not any more it doesn't?
+                //cursor: none;
                 .l-toi-holder.hover {
                     opacity: 1;
                 }

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

@@ -0,0 +1,15 @@
+<a class="l-page-button s-icon-button icon-pointer-left"></a>
+<div class="l-data-visualization">
+    <!-- Note:
+    - val-to-right should be applied when l-toi-holder left < 160px
+    -->
+    <div class="l-toi-holder"
+         ng-class="{ 'pinned': true, 'val-to-right': false }"
+         ng-click="this.pinned = false"
+         style="left: 70%">
+        <div class="l-toi">
+            <div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
+        </div>
+    </div>
+</div>
+<a class="l-page-button align-right s-icon-button icon-pointer-right"></a>

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

@@ -95,19 +95,20 @@
         </div>
 
         <!-- Holds data visualization, time of interest -->
-        <div class="l-data-visualization-holder l-row-elem flex-elem">
+        <div class="l-data-visualization-holder l-row-elem flex-elem"
+             ng-controller="ConductorTOIController as toi"
+             ng-click="toi.click($event)">
             <a class="l-page-button s-icon-button icon-pointer-left"></a>
             <div class="l-data-visualization">
                 <!-- Note:
                 - val-to-right should be applied when l-toi-holder left < 160px
                 -->
                 <div class="l-toi-holder"
-                     ng-class="{ 'pinned': true, 'val-to-right': false }"
+                     ng-class="{ 'pinned': toi.pinned, 'val-to-right': false }"
-                     ng-click="this.pinned = false"
+                     ng-style="{'left': toi.left + '%'}">
-                    style="left: 70%">
                     <div class="l-toi">
-                        <a class="t-button-unpin icon-button" ng-click="unpin()"></a>
+                        <a class="t-button-unpin icon-button" ng-click="toi.pinned = false"></a>
-                        <span class="l-toi-val">21:31:30</span>
+                        <div class="l-toi-val">2016-09-15 21:31:30.000Z</div>
                     </div>
                 </div>
             </div>

platform/features/conductor-v2/conductor/src/ui/ConductorTOIController.js

@@ -0,0 +1,114 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+    ["zepto"],
+    function ($) {
+
+        /**
+         * The mct-conductor-axis renders a horizontal axis with regular
+         * labelled 'ticks'. It requires 'start' and 'end' integer values to
+         * be specified as attributes.
+         */
+        function ConductorTOIController($scope, conductor, conductorViewService, $timeout) {
+            this.conductor = conductor;
+            this.conductorViewService = conductorViewService;
+
+            //Bind all class functions to 'this'
+            Object.keys(ConductorTOIController.prototype).filter(function (key) {
+                return typeof ConductorTOIController.prototype[key] === 'function';
+            }).forEach(function (key) {
+                this[key] = ConductorTOIController.prototype[key].bind(this);
+            }.bind(this));
+
+            this.conductor.on('timeOfInterest', this.changeTimeOfInterest);
+            this.conductorViewService.on('zoom', this.setOffsetFromBounds);
+            this.conductorViewService.on('pan', this.setOffsetFromBounds);
+
+            this.$timeout = $timeout;
+
+            var generateRandomTOI = function () {
+                var bounds = conductor.bounds();
+                var range = bounds.end - bounds.start;
+                var toi = Math.random() * range + bounds.start;
+                console.log('calculated random TOI of ' + toi);
+                conductor.timeOfInterest(toi);
+                //this.timeoutHandle = $timeout(generateRandomTOI, 1000);
+            }.bind(this);
+
+            //this.timeoutHandle = $timeout(generateRandomTOI, 2000);
+
+            $scope.$on('$destroy', this.destroy);
+
+        }
+
+        ConductorTOIController.prototype.destroy = function () {
+            this.conductor.off('timeOfInterest', this.setOffsetFromBounds);
+            this.conductorViewService.off('zoom', this.setOffsetFromBounds);
+            this.conductorViewService.off('pan', this.setOffsetFromBounds);
+
+            this.$timeout.cancel(this.timeoutHandle);
+        };
+
+        ConductorTOIController.prototype.setOffsetFromBounds = function (bounds) {
+            var toi = this.conductor.timeOfInterest();
+            var offset = toi - bounds.start;
+            this.left = offset / (bounds.end - bounds.start) * 100;
+        };
+
+        ConductorTOIController.prototype.changeTimeOfInterest = function () {
+            var bounds = this.conductor.bounds();
+            if (bounds) {
+                this.setOffsetFromBounds(bounds);
+                this.pinned = true;
+            }
+        };
+
+        ConductorTOIController.prototype.click = function (e) {
+            if (e.altKey) {
+                var element = $(e.currentTarget);
+                var width = element.width();
+                var relativeX = e.pageX - element.offset().left;
+                var percX = relativeX / width;
+                var bounds = this.conductor.bounds();
+                var timeRange = bounds.end - bounds.start;
+
+                this.conductor.timeOfInterest(timeRange * percX + bounds.start);
+            }
+        };
+
+        /*
+        ConductorTOIController.prototype.zoom = function (bounds) {
+            this.changeTOI(bounds)
+        };
+
+        ConductorTOIController.prototype.pan = function (bounds) {
+            this.changeTOI(bounds)
+        };*/
+
+        ConductorTOIController.prototype.resize = function () {
+            //Do something
+        };
+
+        return ConductorTOIController;
+    }
+);

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

@@ -99,7 +99,6 @@ define(
             // Watch scope for selection of mode or time system by user
             this.$scope.$watch('modeModel.selectedKey', this.setMode);
             this.conductorViewService.on('pan', this.pan);
-
             this.conductorViewService.on('pan-stop', this.panStop);
 
             this.$scope.$on('$destroy', this.destroy);