Merge pull request #1595 from dhrubomoy/timezone_dropdown_feature

[CLOCK] Allow clock to set timezone with autocomplete dropdown option.

bower.json

@@ -22,6 +22,7 @@
     "eventemitter3": "^1.2.0",
     "lodash": "3.10.1",
     "almond": "~0.3.2",
-    "html2canvas": "^0.4.1"
+    "html2canvas": "^0.4.1",
+    "moment-timezone": "^0.5.13"
   }
 }

openmct.js

@@ -32,6 +32,7 @@ requirejs.config({
         "html2canvas": "bower_components/html2canvas/build/html2canvas.min",
         "moment": "bower_components/moment/moment",
         "moment-duration-format": "bower_components/moment-duration-format/lib/moment-duration-format",
+        "moment-timezone": "bower_components/moment-timezone/builds/moment-timezone-with-data",
         "saveAs": "bower_components/FileSaver.js/FileSaver.min",
         "screenfull": "bower_components/screenfull/dist/screenfull.min",
         "text": "bower_components/text/text",

platform/commonUI/general/res/sass/controls/_controls.scss

@@ -307,6 +307,40 @@ textarea.lg { position: relative; height: 300px; }
     }
 }
 
+/******************************************************** AUTOCOMPLETE */
+.autocomplete {
+    input {
+        width: 226px;
+        padding: 5px 0px 5px 7px;
+    }
+    .icon-arrow-down {
+        position: absolute;
+        top: 8px;
+        left: 210px;
+        font-size: 10px;
+        cursor: pointer;
+    }
+    .autocompleteOptions {
+        border: 1px solid $colorFormLines;
+        border-radius: 5px;
+        width: 224px;
+        max-height: 170px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        li {
+            border: 1px solid $colorFormLines;
+            padding: 8px 0px 8px 5px;
+            .optionText {
+                cursor: pointer;
+            }
+        }
+        .optionPreSelected {
+            background-color: $colorInspectorSectionHeaderBg;
+            color: $colorInspectorSectionHeaderFg;
+        }
+    }
+}
+
 /******************************************************** OBJECT-HEADER */
 .object-header {
     font-size: 1em;

platform/features/clock/bundle.js

@@ -21,6 +21,7 @@
  *****************************************************************************/
 
 define([
+    "moment-timezone",
     "./src/indicators/ClockIndicator",
     "./src/services/TickerService",
     "./src/controllers/ClockController",
@@ -34,6 +35,7 @@ define([
     "text!./res/templates/timer.html",
     'legacyRegistry'
 ], function (
+    MomentTimezone,
     ClockIndicator,
     TickerService,
     ClockController,
@@ -226,13 +228,20 @@ define([
                                     "cssClass": "l-inline"
                                 }
                             ]
+                        },
+                        {
+                            "key": "timezone",
+                            "name": "Timezone",
+                            "control": "autocomplete",
+                            "options": MomentTimezone.tz.names()
                         }
                     ],
                     "model": {
                         "clockFormat": [
                             "YYYY/MM/DD hh:mm:ss",
                             "clock12"
-                        ]
+                        ],
+                        "timezone": "UTC"
                     }
                 },
                 {

platform/features/clock/src/controllers/ClockController.js

@@ -20,9 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define(
+define([
-    ['moment'],
+    'moment',
-    function (moment) {
+    'moment-timezone'
+    ],
+    function (
+        moment,
+        momentTimezone
+    ) {
 
         /**
          * Controller for views of a Clock domain object.
@@ -37,10 +42,13 @@ define(
             var lastTimestamp,
                 unlisten,
                 timeFormat,
+                zoneName,
                 self = this;
 
             function update() {
-                var m = moment.utc(lastTimestamp);
+                var m = zoneName ?
+                    moment.utc(lastTimestamp).tz(zoneName) : moment.utc(lastTimestamp);
+                self.zoneAbbr = m.zoneAbbr();
                 self.textValue = timeFormat && m.format(timeFormat);
                 self.ampmValue = m.format("A"); // Just the AM or PM part
             }
@@ -50,21 +58,23 @@ define(
                 update();
             }
 
-            function updateFormat(clockFormat) {
+            function updateModel(model) {
                 var baseFormat;
+                if (model !== undefined) {
+                    baseFormat = model.clockFormat[0];
 
-                if (clockFormat !== undefined) {
+                    self.use24 = model.clockFormat[1] === 'clock24';
-                    baseFormat = clockFormat[0];
-
-                    self.use24 = clockFormat[1] === 'clock24';
                     timeFormat = self.use24 ?
                             baseFormat.replace('hh', "HH") : baseFormat;
-
+                    // If wrong timezone is provided, the UTC will be used
+                    zoneName = momentTimezone.tz.names().includes(model.timezone) ?
+                        model.timezone : "UTC";
                     update();
                 }
             }
-            // Pull in the clock format from the domain object model
+
-            $scope.$watch('model.clockFormat', updateFormat);
+            // Pull in the model (clockFormat and timezone) from the domain object model
+            $scope.$watch('model', updateModel);
 
             // Listen for clock ticks ... and stop listening on destroy
             unlisten = tickerService.listen(tick);
@@ -76,7 +86,7 @@ define(
          * @returns {string}
          */
         ClockController.prototype.zone = function () {
-            return "UTC";
+            return this.zoneAbbr;
         };
 
         /**

platform/features/clock/test/controllers/ClockControllerSpec.js

@@ -1,5 +1,5 @@
 /*****************************************************************************
- * Open MCT, Copyright (c) 2009-2016, United States Government
+ * Open MCT, Copyright (c) 2009-2017, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
  * Administration. All rights reserved.
  *
@@ -43,9 +43,9 @@ define(
                 controller = new ClockController(mockScope, mockTicker);
             });
 
-            it("watches for clock format from the domain object model", function () {
+            it("watches for model (clockFormat and timezone) from the domain object model", function () {
                 expect(mockScope.$watch).toHaveBeenCalledWith(
-                    "model.clockFormat",
+                    "model",
                     jasmine.any(Function)
                 );
             });
@@ -67,29 +67,35 @@ define(
 
             it("formats using the format string from the model", function () {
                 mockTicker.listen.mostRecentCall.args[0](TEST_TIMESTAMP);
-                mockScope.$watch.mostRecentCall.args[1]([
+                mockScope.$watch.mostRecentCall.args[1]({
-                    "YYYY-DDD hh:mm:ss",
+                    "clockFormat": [
-                    "clock24"
+                        "YYYY-DDD hh:mm:ss",
-                ]);
+                        "clock24"
+                    ],
+                    "timezone": "Canada/Eastern"
+                });
 
-                expect(controller.zone()).toEqual("UTC");
+                expect(controller.zone()).toEqual("EDT");
-                expect(controller.text()).toEqual("2015-154 17:56:14");
+                expect(controller.text()).toEqual("2015-154 13:56:14");
                 expect(controller.ampm()).toEqual("");
             });
 
             it("formats 12-hour time", function () {
                 mockTicker.listen.mostRecentCall.args[0](TEST_TIMESTAMP);
-                mockScope.$watch.mostRecentCall.args[1]([
+                mockScope.$watch.mostRecentCall.args[1]({
-                    "YYYY-DDD hh:mm:ss",
+                    "clockFormat": [
-                    "clock12"
+                        "YYYY-DDD hh:mm:ss",
-                ]);
+                        "clock12"
+                    ],
+                    "timezone": ""
+                });
 
                 expect(controller.zone()).toEqual("UTC");
                 expect(controller.text()).toEqual("2015-154 05:56:14");
                 expect(controller.ampm()).toEqual("PM");
             });
 
-            it("does not throw exceptions when clockFormat is undefined", function () {
+            it("does not throw exceptions when model is undefined", function () {
                 mockTicker.listen.mostRecentCall.args[0](TEST_TIMESTAMP);
                 expect(function () {
                     mockScope.$watch.mostRecentCall.args[1](undefined);

platform/forms/bundle.js

@@ -24,10 +24,12 @@ define([
     "./src/MCTForm",
     "./src/MCTToolbar",
     "./src/MCTControl",
+    "./src/controllers/AutocompleteController",
     "./src/controllers/DateTimeController",
     "./src/controllers/CompositeController",
     "./src/controllers/ColorController",
     "./src/controllers/DialogButtonController",
+    "text!./res/templates/controls/autocomplete.html",
     "text!./res/templates/controls/checkbox.html",
     "text!./res/templates/controls/datetime.html",
     "text!./res/templates/controls/select.html",
@@ -45,10 +47,12 @@ define([
     MCTForm,
     MCTToolbar,
     MCTControl,
+    AutocompleteController,
     DateTimeController,
     CompositeController,
     ColorController,
     DialogButtonController,
+    autocompleteTemplate,
     checkboxTemplate,
     datetimeTemplate,
     selectTemplate,
@@ -87,6 +91,10 @@ define([
                 }
             ],
             "controls": [
+                {
+                    "key": "autocomplete",
+                    "template": autocompleteTemplate
+                },
                 {
                     "key": "checkbox",
                     "template": checkboxTemplate
@@ -137,6 +145,14 @@ define([
                 }
             ],
             "controllers": [
+                {
+                    "key": "AutocompleteController",
+                    "implementation": AutocompleteController,
+                    "depends": [
+                        "$scope",
+                        "$element"
+                    ]
+                },
                 {
                     "key": "DateTimeController",
                     "implementation": DateTimeController,

platform/forms/res/templates/controls/autocomplete.html

@@ -0,0 +1,46 @@
+<!--
+ Open MCT, Copyright (c) 2014-2017, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT 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 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.
+-->
+
+<div ng-controller="AutocompleteController"
+     class='form-control autocomplete'>
+    <input class="autocompleteInput"
+           type="text"
+           ng-model="ngModel[field]"
+           ng-change="filterOptions(ngModel[field])"
+           ng-click="inputClicked()"
+           ng-keydown="keyDown($event)"/>
+    <span class="icon-arrow-down"
+          ng-click="arrowClicked()"></span>
+    <div class="autocompleteOptions"
+         ng-init="hideOptions = true"
+         ng-hide="hideOptions"
+         mct-click-elsewhere="hideOptions = true">
+        <ul>  
+            <li ng-repeat="opt in filteredOptions"
+                ng-click="fillInput(opt.name)"
+                ng-mouseover="optionMouseover(opt.optionId)"
+                ng-class="optionIndex === opt.optionId ? 'optionPreSelected' : ''">
+                <span class="optionText">{{opt.name}}</span>
+            </li>
+        </ul>  
+    </div>
+</div>

platform/forms/src/controllers/AutocompleteController.js

@@ -0,0 +1,138 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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(
+    [],
+    function () {
+
+        /**
+         * Controller for the `autocomplete` form control.
+         *
+         * @memberof platform/forms
+         * @constructor
+         */
+        function AutocompleteController($scope, $element) {
+
+            var key = {
+                        down: 40,
+                        up: 38,
+                        enter: 13
+                    },
+                autocompleteInputElement = $element[0].getElementsByClassName('autocompleteInput')[0];
+
+            if ($scope.options[0].name) {
+                // If "options" include name, value pair
+                $scope.optionNames = $scope.options.map(function (opt) {
+                    return opt.name;
+                });
+            } else {
+                // If options is only an array of string.
+                $scope.optionNames = $scope.options;
+            }
+
+            function fillInputWithIndexedOption() {
+                if ($scope.filteredOptions[$scope.optionIndex]) {
+                    $scope.ngModel[$scope.field] = $scope.filteredOptions[$scope.optionIndex].name;
+                }
+            }
+
+            function decrementOptionIndex() {
+                if ($scope.optionIndex === 0) {
+                    $scope.optionIndex = $scope.filteredOptions.length;
+                }
+                $scope.optionIndex--;
+                fillInputWithIndexedOption();
+            }
+
+            function incrementOptionIndex() {
+                if ($scope.optionIndex === $scope.filteredOptions.length - 1) {
+                    $scope.optionIndex = -1;
+                }
+                $scope.optionIndex++;
+                fillInputWithIndexedOption();
+            }
+
+            function fillInputWithString(string) {
+                $scope.hideOptions = true;
+                $scope.ngModel[$scope.field] = string;
+            }
+
+            function showOptions(string) {
+                $scope.hideOptions = false;
+                $scope.filterOptions(string);
+                $scope.optionIndex = 0;
+            }
+
+            $scope.keyDown = function ($event) {
+                if ($scope.filteredOptions) {
+                    var keyCode = $event.keyCode;
+                    switch (keyCode) {
+                        case key.down:
+                            incrementOptionIndex();
+                            break;
+                        case key.up:
+                            $event.preventDefault();    // Prevents cursor jumping back and forth
+                            decrementOptionIndex();
+                            break;
+                        case key.enter:
+                            if ($scope.filteredOptions[$scope.optionIndex]) {
+                                fillInputWithString($scope.filteredOptions[$scope.optionIndex].name);
+                            }
+                    }
+                }
+            };
+
+            $scope.filterOptions = function (string) {
+                $scope.hideOptions = false;
+                $scope.filteredOptions = $scope.optionNames.filter(function (option) {
+                    return option.toLowerCase().indexOf(string.toLowerCase()) >= 0;
+                }).map(function (option, index) {
+                    return {
+                        optionId: index,
+                        name: option
+                    };
+                });
+            };
+
+            $scope.inputClicked = function () {
+                autocompleteInputElement.select();
+                showOptions(autocompleteInputElement.value);
+            };
+
+            $scope.arrowClicked = function () {
+                autocompleteInputElement.select();
+                showOptions('');
+            };
+
+            $scope.fillInput = function (string) {
+                fillInputWithString(string);
+            };
+
+            $scope.optionMouseover = function (optionId) {
+                $scope.optionIndex = optionId;
+            };
+        }
+
+        return AutocompleteController;
+
+    }
+);

platform/forms/test/controllers/AutocompleteControllerSpec.js

@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT 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 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([
+    "../../src/controllers/AutocompleteController",
+    "angular"
+], function (
+    AutocompleteController,
+    angular
+) {
+
+    describe("The autocomplete controller", function () {
+        var mockScope,
+            mockElement,
+            controller;
+
+        beforeEach(function () {
+            mockScope = jasmine.createSpyObj("$scope", ["$watch"]);
+            mockScope.options = ['Asia/Dhaka', 'UTC', 'Toronto', 'Asia/Shanghai', 'Hotel California'];
+            mockScope.ngModel = [null, null, null, null, null];
+            mockScope.field = 4;
+            mockElement = angular.element("<div></div>");
+            controller = new AutocompleteController(mockScope, mockElement);
+        });
+
+        it("makes optionNames array equal to options if options is an array of string", function () {
+            expect(mockScope.optionNames).toEqual(mockScope.options);
+        });
+
+        it("filters options by returning array containing optionId and name", function () {
+            mockScope.filterOptions('Asia');
+            var filteredOptions = [{ optionId : 0, name : 'Asia/Dhaka' },
+                                    { optionId : 1, name : 'Asia/Shanghai' }];
+            expect(mockScope.filteredOptions).toEqual(filteredOptions);
+        });
+
+        it("fills input with given string", function () {
+            var str = "UTC";
+            mockScope.fillInput(str);
+            expect(mockScope.hideOptions).toEqual(true);
+            expect(mockScope.ngModel[mockScope.field]).toEqual(str);
+        });
+
+        it("sets a new optionIndex on mouse hover", function () {
+            mockScope.optionMouseover(1);
+            expect(mockScope.optionIndex).toEqual(1);
+        });
+
+    });
+});

test-main.js

@@ -58,6 +58,7 @@ requirejs.config({
         "html2canvas": "bower_components/html2canvas/build/html2canvas.min",
         "moment": "bower_components/moment/moment",
         "moment-duration-format": "bower_components/moment-duration-format/lib/moment-duration-format",
+        "moment-timezone": "bower_components/moment-timezone/builds/moment-timezone-with-data",
         "saveAs": "bower_components/FileSaver.js/FileSaver.min",
         "screenfull": "bower_components/screenfull/dist/screenfull.min",
         "text": "bower_components/text/text",