mirror of
https://github.com/nasa/openmct.git
synced 2025-06-18 15:18:12 +00:00
Refactor Angular Clock and Clock Indicator as plugin (#4106)
* clock and clock indicator installed as a plugin
* { enableIndicator: true } to install indicator
* Vue for views
This commit is contained in:
Khalid Adil
GitHub
@ -195,6 +195,7 @@
|
|||||||
['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
|
['table', 'telemetry.plot.overlay', 'telemetry.plot.stacked'],
|
||||||
{indicator: true}
|
{indicator: true}
|
||||||
));
|
));
|
||||||
|
openmct.install(openmct.plugins.Clock({ enableClockIndicator: true }));
|
||||||
openmct.start();
|
openmct.start();
|
||||||
</script>
|
</script>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -21,32 +21,24 @@
|
|||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
||||||
define([
|
define([
|
||||||
"moment-timezone",
|
|
||||||
"./src/indicators/ClockIndicator",
|
|
||||||
"./src/services/TickerService",
|
"./src/services/TickerService",
|
||||||
"./src/services/TimerService",
|
"./src/services/TimerService",
|
||||||
"./src/controllers/ClockController",
|
|
||||||
"./src/controllers/TimerController",
|
"./src/controllers/TimerController",
|
||||||
"./src/controllers/RefreshingController",
|
"./src/controllers/RefreshingController",
|
||||||
"./src/actions/StartTimerAction",
|
"./src/actions/StartTimerAction",
|
||||||
"./src/actions/RestartTimerAction",
|
"./src/actions/RestartTimerAction",
|
||||||
"./src/actions/StopTimerAction",
|
"./src/actions/StopTimerAction",
|
||||||
"./src/actions/PauseTimerAction",
|
"./src/actions/PauseTimerAction",
|
||||||
"./res/templates/clock.html",
|
|
||||||
"./res/templates/timer.html"
|
"./res/templates/timer.html"
|
||||||
], function (
|
], function (
|
||||||
MomentTimezone,
|
|
||||||
ClockIndicator,
|
|
||||||
TickerService,
|
TickerService,
|
||||||
TimerService,
|
TimerService,
|
||||||
ClockController,
|
|
||||||
TimerController,
|
TimerController,
|
||||||
RefreshingController,
|
RefreshingController,
|
||||||
StartTimerAction,
|
StartTimerAction,
|
||||||
RestartTimerAction,
|
RestartTimerAction,
|
||||||
StopTimerAction,
|
StopTimerAction,
|
||||||
PauseTimerAction,
|
PauseTimerAction,
|
||||||
clockTemplate,
|
|
||||||
timerTemplate
|
timerTemplate
|
||||||
) {
|
) {
|
||||||
return {
|
return {
|
||||||
@ -73,16 +65,6 @@ define([
|
|||||||
"value": "YYYY/MM/DD HH:mm:ss"
|
"value": "YYYY/MM/DD HH:mm:ss"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"indicators": [
|
|
||||||
{
|
|
||||||
"implementation": ClockIndicator,
|
|
||||||
"depends": [
|
|
||||||
"tickerService",
|
|
||||||
"CLOCK_INDICATOR_FORMAT"
|
|
||||||
],
|
|
||||||
"priority": "preferred"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"services": [
|
"services": [
|
||||||
{
|
{
|
||||||
"key": "tickerService",
|
"key": "tickerService",
|
||||||
@ -99,14 +81,6 @@ define([
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"controllers": [
|
"controllers": [
|
||||||
{
|
|
||||||
"key": "ClockController",
|
|
||||||
"implementation": ClockController,
|
|
||||||
"depends": [
|
|
||||||
"$scope",
|
|
||||||
"tickerService"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"key": "TimerController",
|
"key": "TimerController",
|
||||||
"implementation": TimerController,
|
"implementation": TimerController,
|
||||||
@ -126,12 +100,6 @@ define([
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"views": [
|
"views": [
|
||||||
{
|
|
||||||
"key": "clock",
|
|
||||||
"type": "clock",
|
|
||||||
"editable": false,
|
|
||||||
"template": clockTemplate
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"key": "timer",
|
"key": "timer",
|
||||||
"type": "timer",
|
"type": "timer",
|
||||||
@ -186,70 +154,6 @@ define([
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"types": [
|
"types": [
|
||||||
{
|
|
||||||
"key": "clock",
|
|
||||||
"name": "Clock",
|
|
||||||
"cssClass": "icon-clock",
|
|
||||||
"description": "A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts.",
|
|
||||||
"priority": 101,
|
|
||||||
"features": [
|
|
||||||
"creation"
|
|
||||||
],
|
|
||||||
"properties": [
|
|
||||||
{
|
|
||||||
"key": "clockFormat",
|
|
||||||
"name": "Display Format",
|
|
||||||
"control": "composite",
|
|
||||||
"items": [
|
|
||||||
{
|
|
||||||
"control": "select",
|
|
||||||
"options": [
|
|
||||||
{
|
|
||||||
"value": "YYYY/MM/DD hh:mm:ss",
|
|
||||||
"name": "YYYY/MM/DD hh:mm:ss"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"value": "YYYY/DDD hh:mm:ss",
|
|
||||||
"name": "YYYY/DDD hh:mm:ss"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"value": "hh:mm:ss",
|
|
||||||
"name": "hh:mm:ss"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"cssClass": "l-inline"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"control": "select",
|
|
||||||
"options": [
|
|
||||||
{
|
|
||||||
"value": "clock12",
|
|
||||||
"name": "12hr"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"value": "clock24",
|
|
||||||
"name": "24hr"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"cssClass": "l-inline"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"key": "timezone",
|
|
||||||
"name": "Timezone",
|
|
||||||
"control": "autocomplete",
|
|
||||||
"options": MomentTimezone.tz.names()
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"model": {
|
|
||||||
"clockFormat": [
|
|
||||||
"YYYY/MM/DD hh:mm:ss",
|
|
||||||
"clock12"
|
|
||||||
],
|
|
||||||
"timezone": "UTC"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"key": "timer",
|
"key": "timer",
|
||||||
"name": "Timer",
|
"name": "Timer",
|
||||||
|
|||||||
@ -1,32 +0,0 @@
|
|||||||
<!--
|
|
||||||
Open MCT, Copyright (c) 2009-2016, 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 class="c-clock l-time-display u-style-receiver js-style-receiver" ng-controller="ClockController as clock">
|
|
||||||
<div class="c-clock__timezone">
|
|
||||||
{{clock.zone()}}
|
|
||||||
</div>
|
|
||||||
<div class="c-clock__value">
|
|
||||||
{{clock.text()}}
|
|
||||||
</div>
|
|
||||||
<div class="c-clock__ampm">
|
|
||||||
{{clock.ampm()}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
/*****************************************************************************
|
|
||||||
* Open MCT, Copyright (c) 2009-2016, 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([
|
|
||||||
'moment',
|
|
||||||
'moment-timezone'
|
|
||||||
],
|
|
||||||
function (
|
|
||||||
moment,
|
|
||||||
momentTimezone
|
|
||||||
) {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Controller for views of a Clock domain object.
|
|
||||||
*
|
|
||||||
* @constructor
|
|
||||||
* @memberof platform/features/clock
|
|
||||||
* @param {angular.Scope} $scope the Angular scope
|
|
||||||
* @param {platform/features/clock.TickerService} tickerService
|
|
||||||
* a service used to align behavior with clock ticks
|
|
||||||
*/
|
|
||||||
function ClockController($scope, tickerService) {
|
|
||||||
var lastTimestamp,
|
|
||||||
unlisten,
|
|
||||||
timeFormat,
|
|
||||||
zoneName,
|
|
||||||
self = this;
|
|
||||||
|
|
||||||
function update() {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
function tick(timestamp) {
|
|
||||||
lastTimestamp = timestamp;
|
|
||||||
update();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateModel(model) {
|
|
||||||
var baseFormat;
|
|
||||||
if (model !== undefined) {
|
|
||||||
baseFormat = model.clockFormat[0];
|
|
||||||
|
|
||||||
self.use24 = model.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 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);
|
|
||||||
$scope.$on('$destroy', unlisten);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the clock's time zone, as displayable text.
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
ClockController.prototype.zone = function () {
|
|
||||||
return this.zoneAbbr;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the current time, as displayable text.
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
ClockController.prototype.text = function () {
|
|
||||||
return this.textValue;
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get the text to display to qualify a time as AM or PM.
|
|
||||||
* @returns {string}
|
|
||||||
*/
|
|
||||||
ClockController.prototype.ampm = function () {
|
|
||||||
return this.use24 ? '' : this.ampmValue;
|
|
||||||
};
|
|
||||||
|
|
||||||
return ClockController;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
/*****************************************************************************
|
|
||||||
* Open MCT, Copyright (c) 2009-2016, 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(
|
|
||||||
['moment'],
|
|
||||||
function (moment) {
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Indicator that displays the current UTC time in the status area.
|
|
||||||
* @implements {Indicator}
|
|
||||||
* @memberof platform/features/clock
|
|
||||||
* @param {platform/features/clock.TickerService} tickerService
|
|
||||||
* a service used to align behavior with clock ticks
|
|
||||||
* @param {string} indicatorFormat format string for timestamps
|
|
||||||
* shown in this indicator
|
|
||||||
*/
|
|
||||||
function ClockIndicator(tickerService, indicatorFormat) {
|
|
||||||
var self = this;
|
|
||||||
|
|
||||||
this.text = "";
|
|
||||||
|
|
||||||
tickerService.listen(function (timestamp) {
|
|
||||||
self.text = moment.utc(timestamp)
|
|
||||||
.format(indicatorFormat) + " UTC";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
ClockIndicator.prototype.getGlyphClass = function () {
|
|
||||||
return "";
|
|
||||||
};
|
|
||||||
|
|
||||||
ClockIndicator.prototype.getCssClass = function () {
|
|
||||||
return "t-indicator-clock icon-clock no-minify c-indicator--not-clickable";
|
|
||||||
};
|
|
||||||
|
|
||||||
ClockIndicator.prototype.getText = function () {
|
|
||||||
return this.text;
|
|
||||||
};
|
|
||||||
|
|
||||||
ClockIndicator.prototype.getDescription = function () {
|
|
||||||
return "";
|
|
||||||
};
|
|
||||||
|
|
||||||
return ClockIndicator;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
@ -1,107 +0,0 @@
|
|||||||
/*****************************************************************************
|
|
||||||
* Open MCT, Copyright (c) 2009-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/ClockController"],
|
|
||||||
function (ClockController) {
|
|
||||||
|
|
||||||
// Wed, 03 Jun 2015 17:56:14 GMT
|
|
||||||
var TEST_TIMESTAMP = 1433354174000;
|
|
||||||
|
|
||||||
describe("A clock view's controller", function () {
|
|
||||||
var mockScope,
|
|
||||||
mockTicker,
|
|
||||||
mockUnticker,
|
|
||||||
controller;
|
|
||||||
|
|
||||||
beforeEach(function () {
|
|
||||||
mockScope = jasmine.createSpyObj('$scope', ['$watch', '$on']);
|
|
||||||
mockTicker = jasmine.createSpyObj('ticker', ['listen']);
|
|
||||||
mockUnticker = jasmine.createSpy('unticker');
|
|
||||||
|
|
||||||
mockTicker.listen.and.returnValue(mockUnticker);
|
|
||||||
|
|
||||||
controller = new ClockController(mockScope, mockTicker);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("watches for model (clockFormat and timezone) from the domain object model", function () {
|
|
||||||
expect(mockScope.$watch).toHaveBeenCalledWith(
|
|
||||||
"model",
|
|
||||||
jasmine.any(Function)
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("subscribes to clock ticks", function () {
|
|
||||||
expect(mockTicker.listen)
|
|
||||||
.toHaveBeenCalledWith(jasmine.any(Function));
|
|
||||||
});
|
|
||||||
|
|
||||||
it("unsubscribes to ticks when destroyed", function () {
|
|
||||||
// Make sure $destroy is being listened for...
|
|
||||||
expect(mockScope.$on.calls.mostRecent().args[0]).toEqual('$destroy');
|
|
||||||
expect(mockUnticker).not.toHaveBeenCalled();
|
|
||||||
|
|
||||||
// ...and makes sure that its listener unsubscribes from ticker
|
|
||||||
mockScope.$on.calls.mostRecent().args[1]();
|
|
||||||
expect(mockUnticker).toHaveBeenCalled();
|
|
||||||
});
|
|
||||||
|
|
||||||
it("formats using the format string from the model", function () {
|
|
||||||
mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
|
|
||||||
mockScope.$watch.calls.mostRecent().args[1]({
|
|
||||||
"clockFormat": [
|
|
||||||
"YYYY-DDD hh:mm:ss",
|
|
||||||
"clock24"
|
|
||||||
],
|
|
||||||
"timezone": "Canada/Eastern"
|
|
||||||
});
|
|
||||||
|
|
||||||
expect(controller.zone()).toEqual("EDT");
|
|
||||||
expect(controller.text()).toEqual("2015-154 13:56:14");
|
|
||||||
expect(controller.ampm()).toEqual("");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("formats 12-hour time", function () {
|
|
||||||
mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
|
|
||||||
mockScope.$watch.calls.mostRecent().args[1]({
|
|
||||||
"clockFormat": [
|
|
||||||
"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 model is undefined", function () {
|
|
||||||
mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
|
|
||||||
expect(function () {
|
|
||||||
mockScope.$watch.calls.mostRecent().args[1](undefined);
|
|
||||||
}).not.toThrow();
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
@ -1,58 +0,0 @@
|
|||||||
/*****************************************************************************
|
|
||||||
* Open MCT, Copyright (c) 2009-2016, 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/indicators/ClockIndicator"],
|
|
||||||
function (ClockIndicator) {
|
|
||||||
|
|
||||||
// Wed, 03 Jun 2015 17:56:14 GMT
|
|
||||||
var TEST_TIMESTAMP = 1433354174000,
|
|
||||||
TEST_FORMAT = "YYYY-DDD HH:mm:ss";
|
|
||||||
|
|
||||||
describe("The clock indicator", function () {
|
|
||||||
var mockTicker,
|
|
||||||
mockUnticker,
|
|
||||||
indicator;
|
|
||||||
|
|
||||||
beforeEach(function () {
|
|
||||||
mockTicker = jasmine.createSpyObj('ticker', ['listen']);
|
|
||||||
mockUnticker = jasmine.createSpy('unticker');
|
|
||||||
|
|
||||||
mockTicker.listen.and.returnValue(mockUnticker);
|
|
||||||
|
|
||||||
indicator = new ClockIndicator(mockTicker, TEST_FORMAT);
|
|
||||||
});
|
|
||||||
|
|
||||||
it("displays the current time", function () {
|
|
||||||
mockTicker.listen.calls.mostRecent().args[0](TEST_TIMESTAMP);
|
|
||||||
expect(indicator.getText()).toEqual("2015-154 17:56:14 UTC");
|
|
||||||
});
|
|
||||||
|
|
||||||
it("implements the Indicator interface", function () {
|
|
||||||
expect(indicator.getCssClass()).toEqual(jasmine.any(String));
|
|
||||||
expect(indicator.getText()).toEqual(jasmine.any(String));
|
|
||||||
expect(indicator.getDescription()).toEqual(jasmine.any(String));
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
59
src/plugins/clock/ClockViewProvider.js
Normal file
59
src/plugins/clock/ClockViewProvider.js
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
/*****************************************************************************
|
||||||
|
* Open MCT, Copyright (c) 2014-2021, 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.
|
||||||
|
*****************************************************************************/
|
||||||
|
|
||||||
|
import Clock from './components/Clock.vue';
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
export default function ClockViewProvider(openmct) {
|
||||||
|
return {
|
||||||
|
key: 'clock.view',
|
||||||
|
name: 'Clock',
|
||||||
|
cssClass: 'icon-clock',
|
||||||
|
canView(domainObject) {
|
||||||
|
return domainObject.type === 'clock';
|
||||||
|
},
|
||||||
|
|
||||||
|
view: function (domainObject) {
|
||||||
|
let component;
|
||||||
|
|
||||||
|
return {
|
||||||
|
show: function (element) {
|
||||||
|
component = new Vue({
|
||||||
|
el: element,
|
||||||
|
components: {
|
||||||
|
Clock
|
||||||
|
},
|
||||||
|
provide: {
|
||||||
|
openmct,
|
||||||
|
domainObject
|
||||||
|
},
|
||||||
|
template: '<clock />'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
destroy: function () {
|
||||||
|
component.$destroy();
|
||||||
|
component = undefined;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
99
src/plugins/clock/components/Clock.vue
Normal file
99
src/plugins/clock/components/Clock.vue
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
<!--
|
||||||
|
Open MCT, Copyright (c) 2014-2021, 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.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="l-angular-ov-wrapper">
|
||||||
|
<div class="u-contents">
|
||||||
|
<div class="c-clock l-time-display u-style-receiver js-style-receiver">
|
||||||
|
<div class="c-clock__timezone">
|
||||||
|
{{ timeZoneAbbr }}
|
||||||
|
</div>
|
||||||
|
<div class="c-clock__value">
|
||||||
|
{{ timeTextValue }}
|
||||||
|
</div>
|
||||||
|
<div class="c-clock__ampm">
|
||||||
|
{{ timeAmPm }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from 'moment';
|
||||||
|
import momentTimezone from 'moment-timezone';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
inject: ['openmct', 'domainObject'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lastTimestamp: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
configuration() {
|
||||||
|
return this.domainObject.configuration;
|
||||||
|
},
|
||||||
|
baseFormat() {
|
||||||
|
return this.configuration.baseFormat;
|
||||||
|
},
|
||||||
|
use24() {
|
||||||
|
return this.configuration.use24 === 'clock24';
|
||||||
|
},
|
||||||
|
timezone() {
|
||||||
|
return this.configuration.timezone;
|
||||||
|
},
|
||||||
|
timeFormat() {
|
||||||
|
return this.use24 ? this.baseFormat.replace('hh', "HH") : this.baseFormat;
|
||||||
|
},
|
||||||
|
zoneName() {
|
||||||
|
return momentTimezone.tz.names().includes(this.timezone) ? this.timezone : "UTC";
|
||||||
|
},
|
||||||
|
momentTime() {
|
||||||
|
return this.zoneName ? moment.utc(this.lastTimestamp).tz(this.zoneName) : moment.utc(this.lastTimestamp);
|
||||||
|
},
|
||||||
|
timeZoneAbbr() {
|
||||||
|
return this.momentTime.zoneAbbr();
|
||||||
|
},
|
||||||
|
timeTextValue() {
|
||||||
|
return this.timeFormat && this.momentTime.format(this.timeFormat);
|
||||||
|
},
|
||||||
|
timeAmPm() {
|
||||||
|
return this.use24 ? '' : this.momentTime.format("A");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const TickerService = this.openmct.$injector.get('tickerService');
|
||||||
|
this.unlisten = TickerService.listen(this.tick);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.unlisten) {
|
||||||
|
this.unlisten();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tick(timestamp) {
|
||||||
|
this.lastTimestamp = timestamp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
64
src/plugins/clock/components/ClockIndicator.vue
Normal file
64
src/plugins/clock/components/ClockIndicator.vue
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<!--
|
||||||
|
Open MCT, Copyright (c) 2014-2021, 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.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="c-indicator t-indicator-clock icon-clock no-minify c-indicator--not-clickable">
|
||||||
|
<span class="label c-indicator__label">
|
||||||
|
{{ timeTextValue }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
inject: ['openmct'],
|
||||||
|
props: {
|
||||||
|
indicatorFormat: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
timeTextValue: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.openmct.on('start', () => {
|
||||||
|
const TickerService = this.openmct.$injector.get('tickerService');
|
||||||
|
this.unlisten = TickerService.listen(this.tick);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (this.unlisten) {
|
||||||
|
this.unlisten();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tick(timestamp) {
|
||||||
|
this.timeTextValue = `${moment.utc(timestamp).format(this.indicatorFormat)} UTC`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
154
src/plugins/clock/plugin.js
Normal file
154
src/plugins/clock/plugin.js
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
|
||||||
|
/*****************************************************************************
|
||||||
|
* Open MCT, Copyright (c) 2014-2021, 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.
|
||||||
|
*****************************************************************************/
|
||||||
|
|
||||||
|
import ClockViewProvider from './ClockViewProvider';
|
||||||
|
import ClockIndicator from './components/ClockIndicator.vue';
|
||||||
|
|
||||||
|
import momentTimezone from 'moment-timezone';
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
export default function ClockPlugin(options) {
|
||||||
|
return function install(openmct) {
|
||||||
|
const CLOCK_INDICATOR_FORMAT = 'YYYY/MM/DD HH:mm:ss';
|
||||||
|
openmct.types.addType('clock', {
|
||||||
|
name: 'Clock',
|
||||||
|
description: 'A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts.',
|
||||||
|
creatable: true,
|
||||||
|
cssClass: 'icon-clock',
|
||||||
|
initialize: function (domainObject) {
|
||||||
|
domainObject.configuration = {
|
||||||
|
baseFormat: 'YYYY/MM/DD hh:mm:ss',
|
||||||
|
use24: 'clock12',
|
||||||
|
timezone: 'UTC'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
"form": [
|
||||||
|
{
|
||||||
|
"key": "displayFormat",
|
||||||
|
"name": "Display Format",
|
||||||
|
control: 'select',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: 'YYYY/MM/DD hh:mm:ss',
|
||||||
|
name: 'YYYY/MM/DD hh:mm:ss'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'YYYY/DDD hh:mm:ss',
|
||||||
|
name: 'YYYY/DDD hh:mm:ss'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'hh:mm:ss',
|
||||||
|
name: 'hh:mm:ss'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
cssClass: 'l-inline',
|
||||||
|
property: [
|
||||||
|
'configuration',
|
||||||
|
'baseFormat'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
control: 'select',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: 'clock12',
|
||||||
|
name: '12hr'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'clock24',
|
||||||
|
name: '24hr'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
cssClass: 'l-inline',
|
||||||
|
property: [
|
||||||
|
'configuration',
|
||||||
|
'use24'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"key": "timezone",
|
||||||
|
"name": "Timezone",
|
||||||
|
"control": "autocomplete",
|
||||||
|
"options": momentTimezone.tz.names(),
|
||||||
|
property: [
|
||||||
|
'configuration',
|
||||||
|
'timezone'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
openmct.objectViews.addProvider(new ClockViewProvider(openmct));
|
||||||
|
|
||||||
|
if (options && options.enableClockIndicator === true) {
|
||||||
|
const clockIndicator = new Vue ({
|
||||||
|
components: {
|
||||||
|
ClockIndicator
|
||||||
|
},
|
||||||
|
provide: {
|
||||||
|
openmct
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
indicatorFormat: CLOCK_INDICATOR_FORMAT
|
||||||
|
};
|
||||||
|
},
|
||||||
|
template: '<ClockIndicator :indicator-format="indicatorFormat" />'
|
||||||
|
});
|
||||||
|
const indicator = {
|
||||||
|
element: clockIndicator.$mount().$el,
|
||||||
|
key: 'clock-indicator'
|
||||||
|
};
|
||||||
|
|
||||||
|
openmct.indicators.add(indicator);
|
||||||
|
}
|
||||||
|
|
||||||
|
openmct.objects.addGetInterceptor({
|
||||||
|
appliesTo: (identifier, domainObject) => {
|
||||||
|
return domainObject && domainObject.type === 'clock';
|
||||||
|
},
|
||||||
|
invoke: (identifier, domainObject) => {
|
||||||
|
if (domainObject.configuration) {
|
||||||
|
return domainObject;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (domainObject.clockFormat
|
||||||
|
&& domainObject.timezone) {
|
||||||
|
const baseFormat = domainObject.clockFormat[0];
|
||||||
|
const use24 = domainObject.clockFormat[1];
|
||||||
|
const timezone = domainObject.timezone;
|
||||||
|
|
||||||
|
domainObject.configuration = {
|
||||||
|
baseFormat,
|
||||||
|
use24,
|
||||||
|
timezone
|
||||||
|
};
|
||||||
|
|
||||||
|
openmct.objects.mutate(domainObject, 'configuration', domainObject.configuration);
|
||||||
|
}
|
||||||
|
|
||||||
|
return domainObject;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
231
src/plugins/clock/pluginSpec.js
Normal file
231
src/plugins/clock/pluginSpec.js
Normal file
@ -0,0 +1,231 @@
|
|||||||
|
/*****************************************************************************
|
||||||
|
* Open MCT, Copyright (c) 2014-2021, 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.
|
||||||
|
*****************************************************************************/
|
||||||
|
|
||||||
|
import { createOpenMct, resetApplicationState } from 'utils/testing';
|
||||||
|
import clockPlugin from './plugin';
|
||||||
|
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
describe("Clock plugin:", () => {
|
||||||
|
let openmct;
|
||||||
|
let clockDefinition;
|
||||||
|
let element;
|
||||||
|
let child;
|
||||||
|
let appHolder;
|
||||||
|
|
||||||
|
let clockDomainObject;
|
||||||
|
|
||||||
|
function setupClock(enableClockIndicator) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
clockDomainObject = {
|
||||||
|
identifier: {
|
||||||
|
key: 'clock',
|
||||||
|
namespace: 'test-namespace'
|
||||||
|
},
|
||||||
|
type: 'clock'
|
||||||
|
};
|
||||||
|
|
||||||
|
appHolder = document.createElement('div');
|
||||||
|
appHolder.style.width = '640px';
|
||||||
|
appHolder.style.height = '480px';
|
||||||
|
document.body.appendChild(appHolder);
|
||||||
|
|
||||||
|
openmct = createOpenMct();
|
||||||
|
|
||||||
|
element = document.createElement('div');
|
||||||
|
child = document.createElement('div');
|
||||||
|
element.appendChild(child);
|
||||||
|
|
||||||
|
openmct.install(clockPlugin({ enableClockIndicator }));
|
||||||
|
|
||||||
|
clockDefinition = openmct.types.get('clock').definition;
|
||||||
|
clockDefinition.initialize(clockDomainObject);
|
||||||
|
|
||||||
|
openmct.on('start', resolve);
|
||||||
|
openmct.start(appHolder);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
describe("Clock view:", () => {
|
||||||
|
let clockViewProvider;
|
||||||
|
let clockView;
|
||||||
|
let clockViewObject;
|
||||||
|
let mutableClockObject;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await setupClock(true);
|
||||||
|
|
||||||
|
clockViewObject = {
|
||||||
|
...clockDomainObject,
|
||||||
|
id: "test-object",
|
||||||
|
name: 'Clock',
|
||||||
|
configuration: {
|
||||||
|
baseFormat: 'YYYY/MM/DD hh:mm:ss',
|
||||||
|
use24: 'clock12',
|
||||||
|
timezone: 'UTC'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
spyOn(openmct.objects, 'get').and.returnValue(Promise.resolve(clockViewObject));
|
||||||
|
spyOn(openmct.objects, 'save').and.returnValue(Promise.resolve(true));
|
||||||
|
|
||||||
|
const applicableViews = openmct.objectViews.get(clockViewObject, [clockViewObject]);
|
||||||
|
clockViewProvider = applicableViews.find(viewProvider => viewProvider.key === 'clock.view');
|
||||||
|
|
||||||
|
mutableClockObject = await openmct.objects.getMutable(clockViewObject.identifier);
|
||||||
|
|
||||||
|
clockView = clockViewProvider.view(mutableClockObject);
|
||||||
|
clockView.show(child);
|
||||||
|
|
||||||
|
await Vue.nextTick();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
clockView.destroy();
|
||||||
|
openmct.objects.destroyMutable(mutableClockObject);
|
||||||
|
if (appHolder) {
|
||||||
|
appHolder.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
return resetApplicationState(openmct);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("has name as Clock", () => {
|
||||||
|
expect(clockDefinition.name).toEqual('Clock');
|
||||||
|
});
|
||||||
|
|
||||||
|
it("is creatable", () => {
|
||||||
|
expect(clockDefinition.creatable).toEqual(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("provides clock view", () => {
|
||||||
|
expect(clockViewProvider).toBeDefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders clock element", () => {
|
||||||
|
const clockElement = element.querySelectorAll('.c-clock');
|
||||||
|
expect(clockElement.length).toBe(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders major elements", () => {
|
||||||
|
const clockElement = element.querySelector('.c-clock');
|
||||||
|
const timezone = clockElement.querySelector('.c-clock__timezone');
|
||||||
|
const time = clockElement.querySelector('.c-clock__value');
|
||||||
|
const amPm = clockElement.querySelector('.c-clock__ampm');
|
||||||
|
const hasMajorElements = Boolean(timezone && time && amPm);
|
||||||
|
|
||||||
|
expect(hasMajorElements).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renders time in UTC", () => {
|
||||||
|
const clockElement = element.querySelector('.c-clock');
|
||||||
|
const timezone = clockElement.querySelector('.c-clock__timezone').textContent.trim();
|
||||||
|
|
||||||
|
expect(timezone).toBe('UTC');
|
||||||
|
});
|
||||||
|
|
||||||
|
it("updates the 24 hour option in the configuration", (done) => {
|
||||||
|
expect(clockDomainObject.configuration.use24).toBe('clock12');
|
||||||
|
const new24Option = 'clock24';
|
||||||
|
|
||||||
|
openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
|
||||||
|
expect(changedDomainObject.use24).toBe(new24Option);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
openmct.objects.mutate(clockViewObject, 'configuration.use24', new24Option);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("updates the timezone option in the configuration", (done) => {
|
||||||
|
expect(clockDomainObject.configuration.timezone).toBe('UTC');
|
||||||
|
const newZone = 'CST6CDT';
|
||||||
|
|
||||||
|
openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
|
||||||
|
expect(changedDomainObject.timezone).toBe(newZone);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
openmct.objects.mutate(clockViewObject, 'configuration.timezone', newZone);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("updates the time format option in the configuration", (done) => {
|
||||||
|
expect(clockDomainObject.configuration.baseFormat).toBe('YYYY/MM/DD hh:mm:ss');
|
||||||
|
const newFormat = 'hh:mm:ss';
|
||||||
|
|
||||||
|
openmct.objects.observe(clockViewObject, 'configuration', (changedDomainObject) => {
|
||||||
|
expect(changedDomainObject.baseFormat).toBe(newFormat);
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
|
||||||
|
openmct.objects.mutate(clockViewObject, 'configuration.baseFormat', newFormat);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Clock Indicator view:", () => {
|
||||||
|
let clockIndicator;
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
if (clockIndicator) {
|
||||||
|
clockIndicator.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
clockIndicator = undefined;
|
||||||
|
if (appHolder) {
|
||||||
|
appHolder.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
return resetApplicationState(openmct);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("doesn't exist", async () => {
|
||||||
|
await setupClock(false);
|
||||||
|
|
||||||
|
clockIndicator = openmct.indicators.indicatorObjects
|
||||||
|
.find(indicator => indicator.key === 'clock-indicator');
|
||||||
|
|
||||||
|
const clockIndicatorMissing = clockIndicator === null || clockIndicator === undefined;
|
||||||
|
expect(clockIndicatorMissing).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("exists", async () => {
|
||||||
|
await setupClock(true);
|
||||||
|
|
||||||
|
clockIndicator = openmct.indicators.indicatorObjects
|
||||||
|
.find(indicator => indicator.key === 'clock-indicator').element;
|
||||||
|
|
||||||
|
const hasClockIndicator = clockIndicator !== null && clockIndicator !== undefined;
|
||||||
|
expect(hasClockIndicator).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("contains text", async () => {
|
||||||
|
await setupClock(true);
|
||||||
|
|
||||||
|
clockIndicator = openmct.indicators.indicatorObjects
|
||||||
|
.find(indicator => indicator.key === 'clock-indicator').element;
|
||||||
|
|
||||||
|
const clockIndicatorText = clockIndicator.textContent.trim();
|
||||||
|
const textIncludesUTC = clockIndicatorText.includes('UTC');
|
||||||
|
|
||||||
|
expect(textIncludesUTC).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -69,6 +69,7 @@ define([
|
|||||||
'./CouchDBSearchFolder/plugin',
|
'./CouchDBSearchFolder/plugin',
|
||||||
'./timeline/plugin',
|
'./timeline/plugin',
|
||||||
'./hyperlink/plugin',
|
'./hyperlink/plugin',
|
||||||
|
'./clock/plugin',
|
||||||
'./DeviceClassifier/plugin'
|
'./DeviceClassifier/plugin'
|
||||||
], function (
|
], function (
|
||||||
_,
|
_,
|
||||||
@ -119,6 +120,7 @@ define([
|
|||||||
CouchDBSearchFolder,
|
CouchDBSearchFolder,
|
||||||
Timeline,
|
Timeline,
|
||||||
Hyperlink,
|
Hyperlink,
|
||||||
|
Clock,
|
||||||
DeviceClassifier
|
DeviceClassifier
|
||||||
) {
|
) {
|
||||||
const bundleMap = {
|
const bundleMap = {
|
||||||
@ -223,6 +225,7 @@ define([
|
|||||||
plugins.CouchDBSearchFolder = CouchDBSearchFolder.default;
|
plugins.CouchDBSearchFolder = CouchDBSearchFolder.default;
|
||||||
plugins.Timeline = Timeline.default;
|
plugins.Timeline = Timeline.default;
|
||||||
plugins.Hyperlink = Hyperlink.default;
|
plugins.Hyperlink = Hyperlink.default;
|
||||||
|
plugins.Clock = Clock.default;
|
||||||
plugins.DeviceClassifier = DeviceClassifier.default;
|
plugins.DeviceClassifier = DeviceClassifier.default;
|
||||||
|
|
||||||
return plugins;
|
return plugins;
|
||||||
|
|||||||
Reference in New Issue
Block a user