Merge pull request #1595 from dhrubomoy/timezone_dropdown_feature
[CLOCK] Allow clock to set timezone with autocomplete dropdown option.
This commit is contained in:
Victor Woeltjen
@@ -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,
|
||||
|
||||
46
platform/forms/res/templates/controls/autocomplete.html
Normal file
46
platform/forms/res/templates/controls/autocomplete.html
Normal file
@@ -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>
|
||||
138
platform/forms/src/controllers/AutocompleteController.js
Normal file
138
platform/forms/src/controllers/AutocompleteController.js
Normal file
@@ -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;
|
||||
|
||||
}
|
||||
);
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user