Added duration

platform/commonUI/formats/bundle.js

@@ -23,10 +23,12 @@
 define([
     "./src/FormatProvider",
     "./src/UTCTimeFormat",
+    "./src/DurationFormat",
     'legacyRegistry'
 ], function (
     FormatProvider,
     UTCTimeFormat,
+    DurationFormat,
     legacyRegistry
 ) {
 
@@ -48,6 +50,10 @@ define([
                 {
                     "key": "utc",
                     "implementation": UTCTimeFormat
+                },
+                {
+                    "key": "duration",
+                    "implementation": DurationFormat
                 }
             ],
             "constants": [

platform/commonUI/formats/src/DurationFormat.js

@@ -0,0 +1,60 @@
+/*****************************************************************************
+ * 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([
+    'moment'
+], function (
+    moment
+) {
+
+    var DATE_FORMAT = "HH:mm:ss",
+        DATE_FORMATS = [
+            DATE_FORMAT
+        ];
+
+
+    /**
+     * Formatter for UTC timestamps. Interprets numeric values as
+     * milliseconds since the start of 1970. Displays only the utc time. Can
+     * be used, with care, for specifying time intervals.
+     *
+     * @implements {Format}
+     * @constructor
+     * @memberof platform/commonUI/formats
+     */
+    function DurationFormat() {
+    }
+
+    DurationFormat.prototype.format = function (value) {
+        return moment.utc(value).format(DATE_FORMAT);
+    };
+
+    DurationFormat.prototype.parse = function (text) {
+        return moment.duration(text).asMilliseconds();
+    };
+
+    DurationFormat.prototype.validate = function (text) {
+        return moment.utc(text, DATE_FORMATS).isValid();
+    };
+
+    return DurationFormat;
+});

platform/commonUI/general/res/templates/controls/datetime-field.html

@@ -23,6 +23,7 @@
     <input type="text"
            ng-model="textValue"
            ng-blur="restoreTextValue(); ngBlur()"
+           ng-mouseup="ngMouseup()"
            ng-class="{
                         error: textInvalid ||
                             (structure.validate &&

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

@@ -1,4 +1,9 @@
 <!-- Parent holder for time conductor. follow-mode | fixed-mode -->
+<style>
+    .start-delta {
+        left: 180px;
+    }
+</style>
 <div ng-controller="TimeConductorController as tcController"
      class="l-time-conductor l-flex-col {{modeModel.selected}}-mode">
     <!-- Holds inputs and ticks -->
@@ -12,11 +17,40 @@
                              validate: tcController.validateStart
                          }"
                          ng-model="formModel"
-                         ng-blur="tcController.updateBoundsFromForm(formModel)"
+                         ng-mouseup="tcController.changing['start'] = true"
+                         ng-blur="tcController.changing['start'] = false; tcController.updateBoundsFromForm(formModel)"
                          field="'start'"
                          class="time-range-start">
             </mct-control>
         </span>
+        <span class="l-time-range-input-w start-delta"
+              ng-class="{'hide':(modeModel.selected === 'fixed')}">
+            <mct-control key="'datetime-field'"
+                         structure="{
+                            format: 'duration',
+                            validate: tcController.validateStartDelta
+                         }"
+                         ng-model="formModel"
+                         ng-mouseup="tcController.changing['startDelta'] = true"
+                         ng-blur="tcController.changing['startDelta'] = false; tcController.updateDeltasFromForm(formModel)"
+                         field="'startDelta'"
+                         class="time-delta-start">
+            </mct-control>
+        </span>
+        <span class="l-time-range-input-w end-delta"
+              ng-class="{'hide':(modeModel.selected === 'fixed')}">
+            <mct-control key="'time-field'"
+                         structure="{
+                            format: 'duration',
+                            validate: tcController.validateEndDelta
+                         }"
+                         ng-model="formModel"
+                         ng-mouseup="tcController.changing['endDelta'] = true"
+                         ng-blur="tcController.changing['endDelta'] = false; tcController.updateDeltasFromForm(formModel)"
+                         field="'endDelta'"
+                         class="time-delta-end">
+            </mct-control>
+        </span>
         <span class="l-time-range-input-w end-date"
               ng-controller="ToggleController as t2">
             <mct-control key="'datetime-field'"
@@ -25,7 +59,8 @@
                              validate: tcController.validateEnd
                          }"
                          ng-model="formModel"
-                         ng-blur="tcController.updateBoundsFromForm(formModel)"
+                         ng-mouseup="tcController.changing['end'] = true"
+                         ng-blur="tcController.changing['end'] = false; tcController.updateBoundsFromForm(formModel)"
                          field="'end'"
                          class="time-range-end">
             </mct-control>

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

@@ -32,17 +32,31 @@ define(
             this.$scope = $scope;
             this.$timeout = $timeout;
             this.conductor = conductor;
+            this.endDelta = 0;
 
-            $scope.formModel = {};
-            $scope.modeSelector = {
-                value: 'fixed'
+            this.changing = {
+                'start': false,
+                'startDelta': false,
+                'end': false,
+                'endDelta': false
             };
 
+            $scope.formModel = {};
+
             conductor.on('bounds', function (bounds) {
-                $scope.formModel = {
-                    start: bounds.start,
-                    end: bounds.end
-                };
+                if (!self.changing['start']) {
+                    $scope.formModel.start = bounds.start;
+                }
+                if (!self.changing['end']) {
+                    $scope.formModel.end = bounds.end;
+                }
+                if (!self.changing['startDelta']) {
+                    $scope.formModel.startDelta = bounds.end - bounds.start;
+                }
+
+                if (!self.changing['endDelta']) {
+                    $scope.formModel.endDelta = 0;
+                }
             });
 
             conductor.on('follow', function (follow){
@@ -89,6 +103,7 @@ define(
             var now = Math.ceil(Date.now() / 1000) * 1000;
             //Set the time conductor to some default
             this.conductor.bounds({start: now - SIX_HOURS, end: now});
+
             this.$scope.modeModel.selected = 'fixed';
             this.conductor.follow(false);
         };
@@ -111,19 +126,46 @@ define(
             }
         };
 
+        TimeConductorController.prototype.validateStartDelta = function (startDelta) {
+            return startDelta > 0;
+        };
+
+        TimeConductorController.prototype.validateEndDelta = function (endDelta) {
+            return endDelta >= 0;
+        };
+
+        TimeConductorController.prototype.validateDeltas = function (formModel) {
+            // Validate that start Delta is some non-zero value, and that end
+            // delta is zero or positive (ie. 'now' or some time in the future).
+            return this.validateStartDelta(formModel.startDelta) && this.validateEndDelta(formModel.endDelta);
+        };
+
+        TimeConductorController.prototype.updateDeltasFromForm = function (formModel) {
+
+            if (this.validateDeltas(formModel)) {
+                var oldBounds = this.conductor.bounds(),
+                    newBounds = {
+                        start: oldBounds.end - formModel.startDelta,
+                        end: oldBounds.end + formModel.endDelta
+                    };
+                this.conductor.bounds(newBounds);
+            }
+        };
+
         TimeConductorController.prototype.switchMode = function (newMode) {
             if (this.mode) {
                 this.mode();
             }
-            this.mode = TimeConductorController.modes[newMode].call(this, this.conductor);
+            this.mode = TimeConductorController.modes[newMode].call(this);
         };
 
         TimeConductorController.modes = {
-            'fixed': function (conductor) {
-                conductor.follow(false);
+            'fixed': function () {
+                this.conductor.follow(false);
             },
-            'realtime': function (conductor) {
+            'realtime': function () {
                 var tickInterval = 1000;
+                var conductor = this.conductor;
                 var $timeout = this.$timeout;
                 var timeoutPromise = $timeout(tick, tickInterval);
 
@@ -144,7 +186,7 @@ define(
             },
             'latest': function (conductor) {
                 //Don't know what to do here yet...
-                conductor.follow(true);
+                this.conductor.follow(true);
             }
         };
 

platform/forms/src/MCTControl.js

@@ -71,6 +71,9 @@ define(
                     // Allow controls to trigger blur-like events
                     ngBlur: "&",
 
+                    // Allow controls to trigger blur-like events
+                    ngMouseup: "&",
+
                     // The state of the form value itself
                     ngModel: "=",