ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-19 15:43:48 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[Time] Conductors and API Enhancements (#6768)

Browse Source 
* Fixed #4975 - Compact Time Conductor styling
* Fixed #5773 - Ubiquitous global clock
* Mode functionality added to TimeAPI
* TimeAPI modified to always have a ticking clock
* Mode dropdown added to independent and regular time conductors
* Overall conductor appearance modifications and enhancements
* TimeAPI methods deprecated with warnings
* Significant updates to markup, styling and behavior of main Time Conductor and independent version.


---------

Co-authored-by: Charles Hacskaylo <charlesh88@gmail.com>
Co-authored-by: Shefali <simplyrender@gmail.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>
Co-authored-by: Scott Bell <scott@traclabs.com>
This commit is contained in:
Jamie V
2023-07-18 17:32:05 -07:00
committed by GitHub
parent 85974fc5f1
commit 42b545917c
94 changed files with 3959 additions and 1969 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/plugins/timeConductor/pluginSpec.js
View File

@ -24,6 +24,7 @@ import { createMouseEvent, createOpenMct, resetApplicationState } from 'utils/te
import { millisecondsToDHMS, getPreciseDuration } from '../../utils/duration';
import ConductorPlugin from './plugin';
import Vue from 'vue';
import { FIXED_MODE_KEY } from '../../api/time/constants';
const THIRTY_SECONDS = 30 * 1000;
const ONE_MINUTE = THIRTY_SECONDS * 2;
@ -65,7 +66,6 @@ describe('time conductor', () => {
beforeEach((done) => {
openmct = createOpenMct();
openmct.install(new ConductorPlugin(config));
element = document.createElement('div');
element.style.width = '640px';
element.style.height = '480px';
@ -75,7 +75,7 @@ describe('time conductor', () => {
element.appendChild(child);
openmct.on('start', () => {
openmct.time.bounds({
openmct.time.setMode(FIXED_MODE_KEY, {
start: config.menuOptions[0].bounds.start,
end: config.menuOptions[0].bounds.end
});
@ -97,55 +97,63 @@ describe('time conductor', () => {
describe('in fixed time mode', () => {
it('shows delta inputs', () => {
const fixedModeEl = appHolder.querySelector('.is-fixed-mode');
const dateTimeInputs = fixedModeEl.querySelectorAll('.c-input--datetime');
expect(dateTimeInputs[0].value).toEqual('1978-01-19 23:30:00.000Z');
expect(dateTimeInputs[1].value).toEqual('1978-01-20 00:00:00.000Z');
expect(fixedModeEl.querySelector('.c-mode-button .c-button__label').innerHTML).toEqual(
'Fixed Timespan'
);
const dateTimeInputs = fixedModeEl.querySelectorAll('.c-compact-tc__setting-value__elem');
expect(dateTimeInputs[0].innerHTML.trim()).toEqual('Fixed Timespan');
expect(dateTimeInputs[1].innerHTML.trim()).toEqual('Local Clock');
expect(dateTimeInputs[2].innerHTML.trim()).toEqual('UTC');
const dateTimes = fixedModeEl.querySelectorAll('.c-compact-tc__setting-value');
expect(dateTimes[1].innerHTML.trim()).toEqual('1978-01-19 23:30:00.000Z');
expect(dateTimes[2].innerHTML.trim()).toEqual('1978-01-20 00:00:00.000Z');
});
});
describe('in realtime mode', () => {
beforeEach((done) => {
const switcher = appHolder.querySelector('.c-mode-button');
const switcher = appHolder.querySelector('.is-fixed-mode');
const clickEvent = createMouseEvent('click');
switcher.dispatchEvent(clickEvent);
Vue.nextTick(() => {
const clockItem = document.querySelectorAll('.c-conductor__mode-menu li')[1];
clockItem.dispatchEvent(clickEvent);
const modeButton = switcher.querySelector('.c-tc-input-popup .c-button--menu');
const clickEvent1 = createMouseEvent('click');
modeButton.dispatchEvent(clickEvent1);
Vue.nextTick(() => {
done();
const clockItem = document.querySelectorAll(
'.c-conductor__mode-menu .c-super-menu__menu li'
)[1];
const clickEvent2 = createMouseEvent('click');
clockItem.dispatchEvent(clickEvent2);
Vue.nextTick(() => {
done();
});
});
});
});
it('shows delta inputs', () => {
const realtimeModeEl = appHolder.querySelector('.is-realtime-mode');
const dateTimeInputs = realtimeModeEl.querySelectorAll('.c-conductor__delta-button');
const dateTimeInputs = realtimeModeEl.querySelectorAll('.c-compact-tc__setting-value__elem');
expect(dateTimeInputs[0].innerHTML.trim()).toEqual('Real-Time');
expect(dateTimeInputs[0].innerHTML.replace(/[^(\d|:)]/g, '')).toEqual('00:30:00');
expect(dateTimeInputs[1].innerHTML.replace(/[^(\d|:)]/g, '')).toEqual('00:00:30');
const dateTimes = realtimeModeEl.querySelectorAll('.c-compact-tc__setting-value');
expect(dateTimes[1].innerHTML.replace(/[^(\d|:)]/g, '')).toEqual('00:30:00');
expect(dateTimes[2].innerHTML.replace(/[^(\d|:)]/g, '')).toEqual('00:00:30');
});
it('shows clock options', () => {
const realtimeModeEl = appHolder.querySelector('.is-realtime-mode');
expect(realtimeModeEl.querySelector('.c-mode-button .c-button__label').innerHTML).toEqual(
'Local Clock'
);
const dateTimeInputs = realtimeModeEl.querySelectorAll('.c-compact-tc__setting-value__elem');
expect(dateTimeInputs[1].innerHTML.trim()).toEqual('Local Clock');
});
it('shows the current time', () => {
const realtimeModeEl = appHolder.querySelector('.is-realtime-mode');
const currentTimeEl = realtimeModeEl.querySelector('.c-input--datetime');
const currentTimeEl = realtimeModeEl.querySelector('.c-compact-tc__current-update');
const currentTime = openmct.time.clock().currentValue();
const { start, end } = openmct.time.bounds();
expect(currentTime).toBeGreaterThan(start);
expect(currentTime).toBeLessThanOrEqual(end);
expect(currentTimeEl.value.length).toBeGreaterThan(0);
expect(currentTimeEl.innerHTML.trim().length).toBeGreaterThan(0);
});
});
});