ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-12 21:43:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

WIP change replication in time api calls to use composables

Browse Source 
many things broken
will need refactor to account for independent time conductor
This commit is contained in:
David Tsay 2024-04-19 15:28:17 -07:00
parent e624821ab1
commit 00c9d2920b
8 changed files with 116 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/plugins/timeConductor/ConductorAxis.vue
View File

@ -41,21 +41,16 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
import utcMultiTimeFormat from './utcMultiTimeFormat.js'; import utcMultiTimeFormat from './utcMultiTimeFormat.js';
const PADDING = 1; const PADDING = 1;
const DEFAULT_DURATION_FORMATTER = 'duration';
const PIXELS_PER_TICK = 100; const PIXELS_PER_TICK = 100;
const PIXELS_PER_TICK_WIDE = 200; const PIXELS_PER_TICK_WIDE = 200;
export default { export default {
inject: ['openmct'], inject: ['openmct', 'isFixedTimeMode'],
props: { props: {
viewBounds: { viewBounds: {
type: Object, type: Object,
required: true required: true
}, },
isFixed: {
type: Boolean,
required: true
},
altPressed: { altPressed: {
type: Boolean, type: Boolean,
required: true required: true
@ -198,22 +193,8 @@ export default {
this.axisElement.call(this.xAxis); this.axisElement.call(this.xAxis);
this.setScale(); this.setScale();
}, },
getActiveFormatter() {
let timeSystem = this.openmct.time.getTimeSystem();
if (this.isFixed) {
return this.getFormatter(timeSystem.timeFormat);
} else {
return this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER);
}
},
getFormatter(key) {
return this.openmct.telemetry.getValueFormatter({
format: key
}).formatter;
},
dragStart($event) { dragStart($event) {
if (this.isFixed) { if (this.isFixedTimeMode) {
this.dragStartX = $event.clientX; this.dragStartX = $event.clientX;
if (this.altPressed) { if (this.altPressed) {

168
src/plugins/timeConductor/ConductorComponent.vue
View File

@ -27,22 +27,21 @@
{ 'is-zooming': isZooming }, { 'is-zooming': isZooming },
{ 'is-panning': isPanning }, { 'is-panning': isPanning },
{ 'alt-pressed': altPressed }, { 'alt-pressed': altPressed },
isFixed ? 'is-fixed-mode' : 'is-realtime-mode' isFixedTimeMode ? 'is-fixed-mode' : 'is-realtime-mode'
]" ]"
> >
<ConductorModeIcon class="c-conductor__mode-icon" /> <ConductorModeIcon class="c-conductor__mode-icon" />
<div class="c-compact-tc__setting-value u-fade-truncate"> <div class="c-compact-tc__setting-value u-fade-truncate">
<conductor-mode :mode="mode" :read-only="true" /> <conductor-mode :read-only="true" />
<conductor-clock :read-only="true" /> <conductor-clock :read-only="true" />
<conductor-time-system :read-only="true" /> <conductor-time-system :read-only="true" />
</div> </div>
<conductor-inputs-fixed v-if="isFixed" :input-bounds="viewBounds" :read-only="true" /> <conductor-inputs-fixed v-if="isFixedTimeMode" :input-bounds="viewBounds" :read-only="true" />
<conductor-inputs-realtime v-else :input-bounds="viewBounds" :read-only="true" /> <conductor-inputs-realtime v-else :input-bounds="viewBounds" :read-only="true" />
<conductor-axis <conductor-axis
v-if="isFixed" v-if="isFixedTimeMode"
class="c-conductor__ticks" class="c-conductor__ticks"
:view-bounds="viewBounds" :view-bounds="viewBounds"
:is-fixed="isFixed"
:alt-pressed="altPressed" :alt-pressed="altPressed"
@end-pan="endPan" @end-pan="endPan"
@end-zoom="endZoom" @end-zoom="endZoom"
@ -61,9 +60,7 @@
:bottom="false" :bottom="false"
:position-x="positionX" :position-x="positionX"
:position-y="positionY" :position-y="positionY"
:is-fixed="isFixed"
@popup-loaded="initializePopup" @popup-loaded="initializePopup"
@mode-updated="saveMode"
@clock-updated="saveClock" @clock-updated="saveClock"
@fixed-bounds-updated="saveFixedBounds" @fixed-bounds-updated="saveFixedBounds"
@clock-offsets-updated="saveClockOffsets" @clock-offsets-updated="saveClockOffsets"
@ -73,15 +70,9 @@
</template> </template>
<script> <script>
import _ from 'lodash';
import { inject, onMounted, provide } from 'vue'; import { inject, onMounted, provide } from 'vue';
import { import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '../../api/time/constants.js';
FIXED_MODE_KEY,
MODES,
REALTIME_MODE_KEY,
TIME_CONTEXT_EVENTS
} from '../../api/time/constants.js';
import ConductorAxis from './ConductorAxis.vue'; import ConductorAxis from './ConductorAxis.vue';
import ConductorClock from './ConductorClock.vue'; import ConductorClock from './ConductorClock.vue';
import ConductorInputsFixed from './ConductorInputsFixed.vue'; import ConductorInputsFixed from './ConductorInputsFixed.vue';
@ -91,10 +82,11 @@ import ConductorModeIcon from './ConductorModeIcon.vue';
import ConductorPopUp from './ConductorPopUp.vue'; import ConductorPopUp from './ConductorPopUp.vue';
import conductorPopUpManager from './conductorPopUpManager.js'; import conductorPopUpManager from './conductorPopUpManager.js';
import ConductorTimeSystem from './ConductorTimeSystem.vue'; import ConductorTimeSystem from './ConductorTimeSystem.vue';
import { useClockOffsets } from './useClockOffsets.js';
import { useTimeBounds } from './useTimeBounds.js';
import { useTimeMode } from './useTimeMode.js';
import { useTimeSystem } from './useTimeSystem.js'; import { useTimeSystem } from './useTimeSystem.js';
const DEFAULT_DURATION_FORMATTER = 'duration';
export default { export default {
components: { components: {
ConductorTimeSystem, ConductorTimeSystem,
@ -110,46 +102,47 @@ export default {
inject: ['openmct', 'configuration'], inject: ['openmct', 'configuration'],
setup() { setup() {
const openmct = inject('openmct'); const openmct = inject('openmct');
const { observeTimeSystem, timeSystemKey } = useTimeSystem(openmct); const { observeTimeSystem, timeSystemFormatter, timeSystemDurationFormatter } = useTimeSystem(openmct);
const { observeTimeMode, timeMode, isFixedTimeMode, isRealTimeMode } = useTimeMode(openmct);
const { observeTimeBounds, bounds, isTick } = useTimeBounds(openmct);
const { observeClockOffsets, offsets } = useClockOffsets(openmct);
onMounted(() => observeTimeSystem()); onMounted(() => {
observeTimeSystem();
observeTimeMode();
observeTimeBounds();
observeClockOffsets();
});
provide('timeSystemKey', timeSystemKey); provide('timeSystemFormatter', timeSystemFormatter);
provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
return { timeSystemKey }; provide('timeMode', timeMode);
}, provide('isFixedTimeMode', isFixedTimeMode);
data() { provide('isRealTimeMode', isRealTimeMode);
const isFixed = this.openmct.time.isFixed(); provide('bounds', bounds);
const bounds = this.openmct.time.getBounds(); provide('isTick', isTick);
const offsets = this.openmct.time.getClockOffsets(); provide('offsets', offsets);
const timeSystem = this.openmct.time.getTimeSystem();
const timeFormatter = this.getFormatter(timeSystem.timeFormat);
const durationFormatter = this.getFormatter(
timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
);
return { return {
timeSystem, timeSystemFormatter,
timeFormatter, timeSystemDurationFormatter,
durationFormatter, isFixedTimeMode,
offsets: { isRealTimeMode,
start: offsets && durationFormatter.format(Math.abs(offsets.start)), bounds,
end: offsets && durationFormatter.format(Math.abs(offsets.end)) isTick
}, };
bounds: { },
start: bounds.start, data() {
end: bounds.end
}, return {
formattedBounds: { // offsets: {
start: timeFormatter.format(bounds.start), // start: offsets && this.durationFormatter.format(Math.abs(offsets.start)),
end: timeFormatter.format(bounds.end) // end: offsets && this.durationFormatter.format(Math.abs(offsets.end))
}, // },
viewBounds: { viewBounds: {
start: bounds.start, start: this.bounds.start,
end: bounds.end end: this.bounds.end
}, },
isFixed,
isUTCBased: timeSystem.isUTCBased,
showDatePicker: false, showDatePicker: false,
showConductorPopup: false, showConductorPopup: false,
altPressed: false, altPressed: false,
@ -158,38 +151,33 @@ export default {
}; };
}, },
computed: { computed: {
formattedBounds() {
return {
start: this.timeSystemFormatter.format(this.bounds.start),
end: this.timeSystemFormatter.format(this.bounds.end)
};
},
mode() { mode() {
return this.isFixed ? FIXED_MODE_KEY : REALTIME_MODE_KEY; return this.isFixedTimeMode ? FIXED_MODE_KEY : REALTIME_MODE_KEY;
}
},
watch: {
bounds: {
handler() {
this.setViewBounds(this.bounds);
},
deep: true
} }
}, },
mounted() { mounted() {
document.addEventListener('keydown', this.handleKeyDown); document.addEventListener('keydown', this.handleKeyDown);
document.addEventListener('keyup', this.handleKeyUp); document.addEventListener('keyup', this.handleKeyUp);
this.setTimeSystem(this.copy(this.openmct.time.getTimeSystem()));
this.openmct.time.on(TIME_CONTEXT_EVENTS.boundsChanged, _.throttle(this.handleNewBounds, 300));
this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
this.openmct.time.on(TIME_CONTEXT_EVENTS.modeChanged, this.setMode);
}, },
beforeUnmount() { beforeUnmount() {
document.removeEventListener('keydown', this.handleKeyDown); document.removeEventListener('keydown', this.handleKeyDown);
document.removeEventListener('keyup', this.handleKeyUp); document.removeEventListener('keyup', this.handleKeyUp);
this.openmct.time.off(TIME_CONTEXT_EVENTS.boundsChanged, _.throttle(this.handleNewBounds, 300));
this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
this.openmct.time.off(TIME_CONTEXT_EVENTS.modeChanged, this.setMode);
}, },
methods: { methods: {
handleNewBounds(bounds, isTick) {
if (this.openmct.time.isRealTime() || !isTick) {
this.setBounds(bounds);
this.setViewFromBounds(bounds);
}
},
setBounds(bounds) {
this.bounds = bounds;
},
handleKeyDown(event) { handleKeyDown(event) {
if (event.key === 'Alt') { if (event.key === 'Alt') {
this.altPressed = true; this.altPressed = true;
@ -202,7 +190,7 @@ export default {
}, },
pan(bounds) { pan(bounds) {
this.isPanning = true; this.isPanning = true;
this.setViewFromBounds(bounds); this.setViewBounds(bounds);
}, },
endPan(bounds) { endPan(bounds) {
this.isPanning = false; this.isPanning = false;
@ -224,49 +212,23 @@ export default {
if (bounds) { if (bounds) {
this.openmct.time.setBounds(bounds); this.openmct.time.setBounds(bounds);
} else { } else {
this.setViewFromBounds(this.bounds); this.setViewBounds(this.bounds);
} }
}, },
setTimeSystem(timeSystem) { setViewBounds(bounds) {
this.timeSystem = timeSystem; // this.formattedBounds.start = this.timeFormatter.format(bounds.start);
this.timeFormatter = this.getFormatter(timeSystem.timeFormat); // this.formattedBounds.end = this.timeFormatter.format(bounds.end);
this.durationFormatter = this.getFormatter(
timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
);
this.isUTCBased = timeSystem.isUTCBased;
},
setMode() {
this.isFixed = this.openmct.time.isFixed();
},
setViewFromBounds(bounds) {
this.formattedBounds.start = this.timeFormatter.format(bounds.start);
this.formattedBounds.end = this.timeFormatter.format(bounds.end);
this.viewBounds.start = bounds.start; this.viewBounds.start = bounds.start;
this.viewBounds.end = bounds.end; this.viewBounds.end = bounds.end;
}, },
getFormatter(key) {
return this.openmct.telemetry.getValueFormatter({
format: key
}).formatter;
},
getBoundsForMode(mode) {
const isRealTime = mode === MODES.realtime;
return isRealTime ? this.openmct.time.getClockOffsets() : this.openmct.time.getBounds();
},
saveFixedBounds(bounds) { saveFixedBounds(bounds) {
this.openmct.time.setBounds(bounds); // this.openmct.time.setBounds(bounds);
}, },
saveClockOffsets(offsets) { saveClockOffsets(offsets) {
this.openmct.time.setClockOffsets(offsets); // this.openmct.time.setClockOffsets(offsets);
}, },
saveClock(clockOptions) { saveClock(clockOptions) {
this.openmct.time.setClock(clockOptions.clockKey); this.openmct.time.setClock(clockOptions.clockKey);
},
saveMode(mode) {
this.openmct.time.setMode(mode, this.getBoundsForMode(mode));
},
copy(object) {
return JSON.parse(JSON.stringify(object));
} }
} }
}; };

7
src/plugins/timeConductor/ConductorInputsFixed.vue
View File

@ -25,7 +25,6 @@
:input-bounds="bounds" :input-bounds="bounds"
:input-time-system="timeSystem" :input-time-system="timeSystem"
@focus="$event.target.select()" @focus="$event.target.select()"
@update="setBoundsFromView"
@dismiss="dismiss" @dismiss="dismiss"
/> />
<div v-else class="c-compact-tc__setting-wrapper"> <div v-else class="c-compact-tc__setting-wrapper">
@ -166,12 +165,6 @@ export default {
format: key format: key
}).formatter; }).formatter;
}, },
setBoundsFromView(bounds) {
this.$emit('bounds-updated', {
start: bounds.start,
end: bounds.end
});
},
dismiss() { dismiss() {
this.$emit('dismiss-inputs-fixed'); this.$emit('dismiss-inputs-fixed');
} }

19
src/plugins/timeConductor/ConductorMode.vue
View File

@ -43,13 +43,12 @@
</template> </template>
<script> <script>
import { FIXED_MODE_KEY } from '../../api/time/constants';
import modeMixin from './mode-mixin.js'; import modeMixin from './mode-mixin.js';
const TEST_IDS = true;
export default { export default {
mixins: [modeMixin], mixins: [modeMixin],
inject: ['openmct', 'configuration'], inject: ['openmct', 'configuration', 'bounds', 'offsets', 'isFixedTimeMode'],
props: { props: {
mode: { mode: {
type: String, type: String,
@ -69,14 +68,14 @@ export default {
const mode = this.openmct.time.getMode(); const mode = this.openmct.time.getMode();
return { return {
selectedMode: this.getModeMetadata(mode, TEST_IDS), selectedMode: this.getModeMetadata(mode),
modes: [] modes: []
}; };
}, },
watch: { watch: {
mode: { mode: {
handler(newMode) { handler(mode) {
this.setViewFromMode(newMode); this.setMode(mode, this.getBoundsForMode(mode));
} }
} }
}, },
@ -97,12 +96,14 @@ export default {
this.dismiss = this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions); this.dismiss = this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
}, },
setViewFromMode(mode) { setViewFromMode(mode) {
this.selectedMode = this.getModeMetadata(mode, TEST_IDS); this.selectedMode = this.getModeMetadata(mode);
}, },
setMode(mode) { setMode(mode) {
this.openmct.time.setMode(mode);
this.setViewFromMode(mode); this.setViewFromMode(mode);
},
this.$emit('mode-updated', mode); getBoundsForMode(mode) {
return mode === FIXED_MODE_KEY ? this.bounds : this.offsets;
} }
} }
}; };

20
src/plugins/timeConductor/ConductorPopUp.vue
View File

@ -13,7 +13,6 @@
class="c-conductor__mode-select" class="c-conductor__mode-select"
title="Sets the Time Conductor's mode." title="Sets the Time Conductor's mode."
:button-css-class="'c-icon-button'" :button-css-class="'c-icon-button'"
@mode-updated="saveMode"
/> />
<IndependentClock <IndependentClock
v-if="isIndependent" v-if="isIndependent"
@ -45,7 +44,7 @@
/> />
</div> </div>
<conductor-inputs-fixed <conductor-inputs-fixed
v-if="isFixed" v-if="isFixedTimeMode"
:input-bounds="bounds" :input-bounds="bounds"
:object-path="objectPath" :object-path="objectPath"
@bounds-updated="saveFixedBounds" @bounds-updated="saveFixedBounds"
@ -88,7 +87,8 @@ export default {
configuration: { configuration: {
from: 'configuration', from: 'configuration',
default: undefined default: undefined
} },
isFixedTimeMode: 'isFixedTimeMode'
}, },
props: { props: {
positionX: { positionX: {
@ -99,10 +99,6 @@ export default {
type: Number, type: Number,
required: true required: true
}, },
isFixed: {
type: Boolean,
required: true
},
isIndependent: { isIndependent: {
type: Boolean, type: Boolean,
default() { default() {
@ -135,7 +131,6 @@ export default {
'fixed-bounds-updated', 'fixed-bounds-updated',
'clock-offsets-updated', 'clock-offsets-updated',
'clock-updated', 'clock-updated',
'mode-updated',
'independent-mode-updated' 'independent-mode-updated'
], ],
data() { data() {
@ -164,7 +159,7 @@ export default {
}, },
popupClasses() { popupClasses() {
const value = this.bottom ? 'c-tc-input-popup--bottom ' : ''; const value = this.bottom ? 'c-tc-input-popup--bottom ' : '';
const mode = this.isFixed ? 'fixed-mode' : 'realtime-mode'; const mode = this.isFixedTimeMode ? 'fixed-mode' : 'realtime-mode';
const independentClass = this.isIndependent ? 'itc-popout ' : ''; const independentClass = this.isIndependent ? 'itc-popout ' : '';
return `${independentClass}${value}c-tc-input-popup--${mode}`; return `${independentClass}${value}c-tc-input-popup--${mode}`;
@ -215,12 +210,12 @@ export default {
this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.setBounds); this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.setBounds);
}, },
setViewFromClock() { setViewFromClock() {
this.bounds = this.isFixed this.bounds = this.isFixedTimeMode
? this.timeContext.getBounds() ? this.timeContext.getBounds()
: this.openmct.time.getClockOffsets(); : this.openmct.time.getClockOffsets();
}, },
setBounds(bounds, isTick) { setBounds(bounds, isTick) {
if (this.isFixed || !isTick) { if (this.isFixedTimeMode || !isTick) {
this.bounds = bounds; this.bounds = bounds;
} }
}, },
@ -233,9 +228,6 @@ export default {
saveClock(clockOptions) { saveClock(clockOptions) {
this.$emit('clock-updated', clockOptions); this.$emit('clock-updated', clockOptions);
}, },
saveMode(mode) {
this.$emit('mode-updated', mode);
},
saveIndependentMode(mode) { saveIndependentMode(mode) {
this.$emit('independent-mode-updated', mode); this.$emit('independent-mode-updated', mode);
}, },

4
src/plugins/timeConductor/DatePicker.vue
View File

@ -107,10 +107,6 @@ export default {
type: String, type: String,
default: undefined default: undefined
}, },
formatter: {
type: Object,
required: true
},
bottom: { bottom: {
type: Boolean, type: Boolean,
default() { default() {

117
src/plugins/timeConductor/TimePopupFixed.vue
View File

@ -41,11 +41,10 @@
aria-label="Start date" aria-label="Start date"
@change="validateAllBounds('startDate')" @change="validateAllBounds('startDate')"
/> />
<date-picker <DatePicker
v-if="isUTCBased" v-if="isTimeSystemUTCBased"
class="c-ctrl-wrapper--menus-right" class="c-ctrl-wrapper--menus-right"
:default-date-time="formattedBounds.start" :default-date-time="formattedBounds.start"
:formatter="timeFormatter"
@date-selected="startDateSelected" @date-selected="startDateSelected"
/> />
</div> </div>
@ -78,11 +77,10 @@
aria-label="End date" aria-label="End date"
@change="validateAllBounds('endDate')" @change="validateAllBounds('endDate')"
/> />
<date-picker <DatePicker
v-if="isUTCBased" v-if="isTimeSystemUTCBased"
class="c-ctrl-wrapper--menus-left" class="c-ctrl-wrapper--menus-left"
:default-date-time="formattedBounds.end" :default-date-time="formattedBounds.end"
:formatter="timeFormatter"
@date-selected="endDateSelected" @date-selected="endDateSelected"
/> />
</div> </div>
@ -118,78 +116,37 @@
</template> </template>
<script> <script>
import _ from 'lodash';
import DatePicker from './DatePicker.vue'; import DatePicker from './DatePicker.vue';
const DEFAULT_DURATION_FORMATTER = 'duration';
export default { export default {
components: { components: {
DatePicker DatePicker
}, },
inject: ['openmct'], inject: ['openmct', 'isTimeSystemUTCBased', 'timeSystemFormatter', 'timeSystemDurationFormatter', 'bounds'],
props: {
inputBounds: {
type: Object,
required: true
},
inputTimeSystem: {
type: Object,
required: true
}
},
emits: ['update', 'dismiss'], emits: ['update', 'dismiss'],
data() { data() {
let timeSystem = this.openmct.time.getTimeSystem();
let durationFormatter = this.getFormatter(
timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
);
let timeFormatter = this.getFormatter(timeSystem.timeFormat);
let bounds = this.bounds || this.openmct.time.getBounds();
return { return {
timeFormatter, formattedBounds: {},
durationFormatter,
bounds: {
start: bounds.start,
end: bounds.end
},
formattedBounds: {
start: timeFormatter.format(bounds.start).split(' ')[0],
end: timeFormatter.format(bounds.end).split(' ')[0],
startTime: durationFormatter.format(Math.abs(bounds.start)),
endTime: durationFormatter.format(Math.abs(bounds.end))
},
isUTCBased: timeSystem.isUTCBased,
isDisabled: false isDisabled: false
}; };
}, },
watch: { watch: {
inputBounds: { bounds: {
handler(newBounds) { handler() {
this.handleNewBounds(newBounds); this.handleNewBounds();
},
deep: true
},
inputTimeSystem: {
handler(newTimeSystem) {
this.setTimeSystem(newTimeSystem);
}, },
deep: true deep: true
} }
}, },
mounted() { created() {
this.handleNewBounds = _.throttle(this.handleNewBounds, 300); this.setViewFromBounds();
this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
}, },
beforeUnmount() { beforeUnmount() {
this.clearAllValidation(); this.clearAllValidation();
}, },
methods: { methods: {
handleNewBounds(bounds) { handleNewBounds() {
this.setBounds(bounds); this.setViewFromBounds();
this.setViewFromBounds(bounds);
}, },
clearAllValidation() { clearAllValidation() {
[this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput); [this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
@ -198,38 +155,26 @@ export default {
input.setCustomValidity(''); input.setCustomValidity('');
input.title = ''; input.title = '';
}, },
setBounds(bounds) { setViewFromBounds() {
this.bounds = bounds; const formattedBounds = {};
},
setViewFromBounds(bounds) { formattedBounds.start = this.timeSystemFormatter.format(this.bounds.start).split(' ')[0];
this.formattedBounds.start = this.timeFormatter.format(bounds.start).split(' ')[0]; formattedBounds.end = this.timeSystemFormatter.format(this.bounds.end).split(' ')[0];
this.formattedBounds.end = this.timeFormatter.format(bounds.end).split(' ')[0]; formattedBounds.startTime = this.timeSystemDurationFormatter.format(Math.abs(this.bounds.start));
this.formattedBounds.startTime = this.durationFormatter.format(Math.abs(bounds.start)); formattedBounds.endTime = this.timeSystemDurationFormatter.format(Math.abs(this.bounds.end));
this.formattedBounds.endTime = this.durationFormatter.format(Math.abs(bounds.end));
}, this.formattedBounds = formattedBounds;
setTimeSystem(timeSystem) {
this.timeSystem = timeSystem;
this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
this.durationFormatter = this.getFormatter(
timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
);
this.isUTCBased = timeSystem.isUTCBased;
},
getFormatter(key) {
return this.openmct.telemetry.getValueFormatter({
format: key
}).formatter;
}, },
setBoundsFromView(dismiss) { setBoundsFromView(dismiss) {
if (this.$refs.fixedDeltaInput.checkValidity()) { if (this.$refs.fixedDeltaInput.checkValidity()) {
let start = this.timeFormatter.parse( let start = this.timeSystemFormatter.parse(
`${this.formattedBounds.start} ${this.formattedBounds.startTime}` `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
); );
let end = this.timeFormatter.parse( let end = this.timeSystemFormatter.parse(
`${this.formattedBounds.end} ${this.formattedBounds.endTime}` `${this.formattedBounds.end} ${this.formattedBounds.endTime}`
); );
this.$emit('update', { this.openmct.time.setBounds({
start: start, start: start,
end: end end: end
}); });
@ -263,10 +208,10 @@ export default {
return [this.$refs.startDate, this.$refs.endDate].every((input) => { return [this.$refs.startDate, this.$refs.endDate].every((input) => {
let boundsValues = { let boundsValues = {
start: this.timeFormatter.parse( start: this.timeSystemFormatter.parse(
`${this.formattedBounds.start} ${this.formattedBounds.startTime}` `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
), ),
end: this.timeFormatter.parse( end: this.timeSystemFormatter.parse(
`${this.formattedBounds.end} ${this.formattedBounds.endTime}` `${this.formattedBounds.end} ${this.formattedBounds.endTime}`
) )
}; };
@ -274,7 +219,7 @@ export default {
// const limit = this.getBoundsLimit(); // const limit = this.getBoundsLimit();
const limit = false; const limit = false;
if (this.timeSystem.isUTCBased && limit && boundsValues.end - boundsValues.start > limit) { if (this.isTimeSystemUTCBased && limit && boundsValues.end - boundsValues.start > limit) {
if (input === currentInput) { if (input === currentInput) {
validationResult = { validationResult = {
valid: false, valid: false,
@ -300,7 +245,7 @@ export default {
input === this.$refs.startDate input === this.$refs.startDate
? `${this.formattedBounds.start} ${this.formattedBounds.startTime}` ? `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
: `${this.formattedBounds.end} ${this.formattedBounds.endTime}`; : `${this.formattedBounds.end} ${this.formattedBounds.endTime}`;
if (!this.timeFormatter.validate(formattedDate)) { if (!this.timeSystemFormatter.validate(formattedDate)) {
validationResult = { validationResult = {
valid: false, valid: false,
message: 'Invalid date' message: 'Invalid date'
@ -335,11 +280,11 @@ export default {
return validationResult.valid; return validationResult.valid;
}, },
startDateSelected(date) { startDateSelected(date) {
this.formattedBounds.start = this.timeFormatter.format(date).split(' ')[0]; this.formattedBounds.start = this.timeSystemFormatter.format(date).split(' ')[0];
this.validateAllBounds('startDate'); this.validateAllBounds('startDate');
}, },
endDateSelected(date) { endDateSelected(date) {
this.formattedBounds.end = this.timeFormatter.format(date).split(' ')[0]; this.formattedBounds.end = this.timeSystemFormatter.format(date).split(' ')[0];
this.validateAllBounds('endDate'); this.validateAllBounds('endDate');
}, },
hide($event) { hide($event) {

2
src/plugins/timeConductor/useTimeMode.js
View File

@ -36,6 +36,7 @@ import {
* @param {OpenMCT} openmct the Open MCT API * @param {OpenMCT} openmct the Open MCT API
* @returns {{ * @returns {{
* observeTimeMode: () => void, * observeTimeMode: () => void,
* timeMode: import('vue').Ref<string>,
* isFixedTimeMode: import('vue').Ref<boolean>, * isFixedTimeMode: import('vue').Ref<boolean>,
* isRealTimeMode: import('vue').Ref<boolean> * isRealTimeMode: import('vue').Ref<boolean>
* }} * }}
@ -60,6 +61,7 @@ export function useTimeMode(openmct, options) {
return { return {
observeTimeMode, observeTimeMode,
timeMode,
isFixedTimeMode, isFixedTimeMode,
isRealTimeMode isRealTimeMode
}; };