[Time] use clock current value instead of end bounds for current time (#6405)

* use clock current value instead of end bounds for current time

* add unit test
This commit is contained in:
David Tsay
2023-03-16 10:55:01 -07:00
committed by GitHub
parent ff3a20e446
commit 1dc137f95e
2 changed files with 43 additions and 9 deletions

View File

@ -35,7 +35,7 @@
</div> </div>
<input <input
ref="endDate" ref="endDate"
v-model="formattedBounds.end" v-model="formattedCurrentValue"
class="c-input--datetime" class="c-input--datetime"
type="text" type="text"
autocorrect="off" autocorrect="off"
@ -109,6 +109,7 @@ export default {
let timeFormatter = this.getFormatter(timeSystem.timeFormat); let timeFormatter = this.getFormatter(timeSystem.timeFormat);
let bounds = this.bounds || this.openmct.time.bounds(); let bounds = this.bounds || this.openmct.time.bounds();
let offsets = this.openmct.time.clockOffsets(); let offsets = this.openmct.time.clockOffsets();
let currentValue = this.openmct.time.clock()?.currentValue();
return { return {
showTCInputStart: false, showTCInputStart: false,
@ -127,6 +128,8 @@ export default {
start: timeFormatter.format(bounds.start), start: timeFormatter.format(bounds.start),
end: timeFormatter.format(bounds.end) end: timeFormatter.format(bounds.end)
}, },
currentValue,
formattedCurrentValue: timeFormatter.format(currentValue),
isUTCBased: timeSystem.isUTCBased isUTCBased: timeSystem.isUTCBased
}; };
}, },
@ -174,6 +177,7 @@ export default {
handleNewBounds(bounds) { handleNewBounds(bounds) {
this.setBounds(bounds); this.setBounds(bounds);
this.setViewFromBounds(bounds); this.setViewFromBounds(bounds);
this.updateCurrentValue();
}, },
clearAllValidation() { clearAllValidation() {
[this.$refs.startOffset, this.$refs.endOffset].forEach(this.clearValidationForInput); [this.$refs.startOffset, this.$refs.endOffset].forEach(this.clearValidationForInput);
@ -195,6 +199,17 @@ export default {
this.formattedBounds.start = this.timeFormatter.format(bounds.start); this.formattedBounds.start = this.timeFormatter.format(bounds.start);
this.formattedBounds.end = this.timeFormatter.format(bounds.end); this.formattedBounds.end = this.timeFormatter.format(bounds.end);
}, },
updateCurrentValue() {
const currentValue = this.openmct.time.clock()?.currentValue();
if (currentValue !== undefined) {
this.setCurrentValue(currentValue);
}
},
setCurrentValue(value) {
this.currentValue = value;
this.formattedCurrentValue = this.timeFormatter.format(value);
},
setTimeSystem(timeSystem) { setTimeSystem(timeSystem) {
this.timeSystem = timeSystem; this.timeSystem = timeSystem;
this.timeFormatter = this.getFormatter(timeSystem.timeFormat); this.timeFormatter = this.getFormatter(timeSystem.timeFormat);

View File

@ -94,15 +94,17 @@ describe('time conductor', () => {
return resetApplicationState(openmct); return resetApplicationState(openmct);
}); });
it('shows delta inputs in fixed mode', () => { describe('in fixed time mode', () => {
const fixedModeEl = appHolder.querySelector('.is-fixed-mode'); it('shows delta inputs', () => {
const dateTimeInputs = fixedModeEl.querySelectorAll('.c-input--datetime'); const fixedModeEl = appHolder.querySelector('.is-fixed-mode');
expect(dateTimeInputs[0].value).toEqual('1978-01-19 23:30:00.000Z'); const dateTimeInputs = fixedModeEl.querySelectorAll('.c-input--datetime');
expect(dateTimeInputs[1].value).toEqual('1978-01-20 00:00:00.000Z'); expect(dateTimeInputs[0].value).toEqual('1978-01-19 23:30:00.000Z');
expect(fixedModeEl.querySelector('.c-mode-button .c-button__label').innerHTML).toEqual('Fixed Timespan'); 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');
});
}); });
describe('shows delta inputs in realtime mode', () => { describe('in realtime mode', () => {
beforeEach((done) => { beforeEach((done) => {
const switcher = appHolder.querySelector('.c-mode-button'); const switcher = appHolder.querySelector('.c-mode-button');
const clickEvent = createMouseEvent("click"); const clickEvent = createMouseEvent("click");
@ -117,13 +119,30 @@ describe('time conductor', () => {
}); });
}); });
it('shows clock options', () => { it('shows delta inputs', () => {
const realtimeModeEl = appHolder.querySelector('.is-realtime-mode'); const realtimeModeEl = appHolder.querySelector('.is-realtime-mode');
const dateTimeInputs = realtimeModeEl.querySelectorAll('.c-conductor__delta-button'); const dateTimeInputs = realtimeModeEl.querySelectorAll('.c-conductor__delta-button');
expect(dateTimeInputs[0].innerHTML.replace(/[^(\d|:)]/g, '')).toEqual('00:30:00'); expect(dateTimeInputs[0].innerHTML.replace(/[^(\d|:)]/g, '')).toEqual('00:30:00');
expect(dateTimeInputs[1].innerHTML.replace(/[^(\d|:)]/g, '')).toEqual('00:00:30'); expect(dateTimeInputs[1].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'); expect(realtimeModeEl.querySelector('.c-mode-button .c-button__label').innerHTML).toEqual('Local Clock');
}); });
it('shows the current time', () => {
const realtimeModeEl = appHolder.querySelector('.is-realtime-mode');
const currentTimeEl = realtimeModeEl.querySelector('.c-input--datetime');
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);
});
}); });
}); });