mirror of
https://github.com/nasa/openmct.git
synced 2025-01-20 11:38:56 +00:00
WIP change replication in time api calls to use composables
many things broken will need refactor to account for independent time conductor
This commit is contained in:
David Tsay
parent
e624821ab1
commit
00c9d2920b
@ -41,21 +41,16 @@ import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
|
||||
import utcMultiTimeFormat from './utcMultiTimeFormat.js';
|
||||
|
||||
const PADDING = 1;
|
||||
const DEFAULT_DURATION_FORMATTER = 'duration';
|
||||
const PIXELS_PER_TICK = 100;
|
||||
const PIXELS_PER_TICK_WIDE = 200;
|
||||
|
||||
export default {
|
||||
inject: ['openmct'],
|
||||
inject: ['openmct', 'isFixedTimeMode'],
|
||||
props: {
|
||||
viewBounds: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
altPressed: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
@ -198,22 +193,8 @@ export default {
|
||||
this.axisElement.call(this.xAxis);
|
||||
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) {
|
||||
if (this.isFixed) {
|
||||
if (this.isFixedTimeMode) {
|
||||
this.dragStartX = $event.clientX;
|
||||
|
||||
if (this.altPressed) {
|
||||
|
||||
@ -27,22 +27,21 @@
|
||||
{ 'is-zooming': isZooming },
|
||||
{ 'is-panning': isPanning },
|
||||
{ 'alt-pressed': altPressed },
|
||||
isFixed ? 'is-fixed-mode' : 'is-realtime-mode'
|
||||
isFixedTimeMode ? 'is-fixed-mode' : 'is-realtime-mode'
|
||||
]"
|
||||
>
|
||||
<ConductorModeIcon class="c-conductor__mode-icon" />
|
||||
<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-time-system :read-only="true" />
|
||||
</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-axis
|
||||
v-if="isFixed"
|
||||
v-if="isFixedTimeMode"
|
||||
class="c-conductor__ticks"
|
||||
:view-bounds="viewBounds"
|
||||
:is-fixed="isFixed"
|
||||
:alt-pressed="altPressed"
|
||||
@end-pan="endPan"
|
||||
@end-zoom="endZoom"
|
||||
@ -61,9 +60,7 @@
|
||||
:bottom="false"
|
||||
:position-x="positionX"
|
||||
:position-y="positionY"
|
||||
:is-fixed="isFixed"
|
||||
@popup-loaded="initializePopup"
|
||||
@mode-updated="saveMode"
|
||||
@clock-updated="saveClock"
|
||||
@fixed-bounds-updated="saveFixedBounds"
|
||||
@clock-offsets-updated="saveClockOffsets"
|
||||
@ -73,15 +70,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
import { inject, onMounted, provide } from 'vue';
|
||||
|
||||
import {
|
||||
FIXED_MODE_KEY,
|
||||
MODES,
|
||||
REALTIME_MODE_KEY,
|
||||
TIME_CONTEXT_EVENTS
|
||||
} from '../../api/time/constants.js';
|
||||
import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '../../api/time/constants.js';
|
||||
import ConductorAxis from './ConductorAxis.vue';
|
||||
import ConductorClock from './ConductorClock.vue';
|
||||
import ConductorInputsFixed from './ConductorInputsFixed.vue';
|
||||
@ -91,10 +82,11 @@ import ConductorModeIcon from './ConductorModeIcon.vue';
|
||||
import ConductorPopUp from './ConductorPopUp.vue';
|
||||
import conductorPopUpManager from './conductorPopUpManager.js';
|
||||
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';
|
||||
|
||||
const DEFAULT_DURATION_FORMATTER = 'duration';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ConductorTimeSystem,
|
||||
@ -110,46 +102,47 @@ export default {
|
||||
inject: ['openmct', 'configuration'],
|
||||
setup() {
|
||||
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);
|
||||
|
||||
return { timeSystemKey };
|
||||
},
|
||||
data() {
|
||||
const isFixed = this.openmct.time.isFixed();
|
||||
const bounds = this.openmct.time.getBounds();
|
||||
const offsets = this.openmct.time.getClockOffsets();
|
||||
const timeSystem = this.openmct.time.getTimeSystem();
|
||||
const timeFormatter = this.getFormatter(timeSystem.timeFormat);
|
||||
const durationFormatter = this.getFormatter(
|
||||
timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
|
||||
);
|
||||
provide('timeSystemFormatter', timeSystemFormatter);
|
||||
provide('timeSystemDurationFormatter', timeSystemDurationFormatter);
|
||||
provide('timeMode', timeMode);
|
||||
provide('isFixedTimeMode', isFixedTimeMode);
|
||||
provide('isRealTimeMode', isRealTimeMode);
|
||||
provide('bounds', bounds);
|
||||
provide('isTick', isTick);
|
||||
provide('offsets', offsets);
|
||||
|
||||
return {
|
||||
timeSystem,
|
||||
timeFormatter,
|
||||
durationFormatter,
|
||||
offsets: {
|
||||
start: offsets && durationFormatter.format(Math.abs(offsets.start)),
|
||||
end: offsets && durationFormatter.format(Math.abs(offsets.end))
|
||||
},
|
||||
bounds: {
|
||||
start: bounds.start,
|
||||
end: bounds.end
|
||||
},
|
||||
formattedBounds: {
|
||||
start: timeFormatter.format(bounds.start),
|
||||
end: timeFormatter.format(bounds.end)
|
||||
},
|
||||
timeSystemFormatter,
|
||||
timeSystemDurationFormatter,
|
||||
isFixedTimeMode,
|
||||
isRealTimeMode,
|
||||
bounds,
|
||||
isTick
|
||||
};
|
||||
},
|
||||
data() {
|
||||
|
||||
return {
|
||||
// offsets: {
|
||||
// start: offsets && this.durationFormatter.format(Math.abs(offsets.start)),
|
||||
// end: offsets && this.durationFormatter.format(Math.abs(offsets.end))
|
||||
// },
|
||||
viewBounds: {
|
||||
start: bounds.start,
|
||||
end: bounds.end
|
||||
start: this.bounds.start,
|
||||
end: this.bounds.end
|
||||
},
|
||||
isFixed,
|
||||
isUTCBased: timeSystem.isUTCBased,
|
||||
showDatePicker: false,
|
||||
showConductorPopup: false,
|
||||
altPressed: false,
|
||||
@ -158,38 +151,33 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
formattedBounds() {
|
||||
return {
|
||||
start: this.timeSystemFormatter.format(this.bounds.start),
|
||||
end: this.timeSystemFormatter.format(this.bounds.end)
|
||||
};
|
||||
},
|
||||
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() {
|
||||
document.addEventListener('keydown', this.handleKeyDown);
|
||||
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() {
|
||||
document.removeEventListener('keydown', this.handleKeyDown);
|
||||
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: {
|
||||
handleNewBounds(bounds, isTick) {
|
||||
if (this.openmct.time.isRealTime() || !isTick) {
|
||||
this.setBounds(bounds);
|
||||
this.setViewFromBounds(bounds);
|
||||
}
|
||||
},
|
||||
setBounds(bounds) {
|
||||
this.bounds = bounds;
|
||||
},
|
||||
handleKeyDown(event) {
|
||||
if (event.key === 'Alt') {
|
||||
this.altPressed = true;
|
||||
@ -202,7 +190,7 @@ export default {
|
||||
},
|
||||
pan(bounds) {
|
||||
this.isPanning = true;
|
||||
this.setViewFromBounds(bounds);
|
||||
this.setViewBounds(bounds);
|
||||
},
|
||||
endPan(bounds) {
|
||||
this.isPanning = false;
|
||||
@ -224,49 +212,23 @@ export default {
|
||||
if (bounds) {
|
||||
this.openmct.time.setBounds(bounds);
|
||||
} else {
|
||||
this.setViewFromBounds(this.bounds);
|
||||
this.setViewBounds(this.bounds);
|
||||
}
|
||||
},
|
||||
setTimeSystem(timeSystem) {
|
||||
this.timeSystem = timeSystem;
|
||||
this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
|
||||
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);
|
||||
setViewBounds(bounds) {
|
||||
// this.formattedBounds.start = this.timeFormatter.format(bounds.start);
|
||||
// this.formattedBounds.end = this.timeFormatter.format(bounds.end);
|
||||
this.viewBounds.start = bounds.start;
|
||||
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) {
|
||||
this.openmct.time.setBounds(bounds);
|
||||
// this.openmct.time.setBounds(bounds);
|
||||
},
|
||||
saveClockOffsets(offsets) {
|
||||
this.openmct.time.setClockOffsets(offsets);
|
||||
// this.openmct.time.setClockOffsets(offsets);
|
||||
},
|
||||
saveClock(clockOptions) {
|
||||
this.openmct.time.setClock(clockOptions.clockKey);
|
||||
},
|
||||
saveMode(mode) {
|
||||
this.openmct.time.setMode(mode, this.getBoundsForMode(mode));
|
||||
},
|
||||
copy(object) {
|
||||
return JSON.parse(JSON.stringify(object));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -25,7 +25,6 @@
|
||||
:input-bounds="bounds"
|
||||
:input-time-system="timeSystem"
|
||||
@focus="$event.target.select()"
|
||||
@update="setBoundsFromView"
|
||||
@dismiss="dismiss"
|
||||
/>
|
||||
<div v-else class="c-compact-tc__setting-wrapper">
|
||||
@ -166,12 +165,6 @@ export default {
|
||||
format: key
|
||||
}).formatter;
|
||||
},
|
||||
setBoundsFromView(bounds) {
|
||||
this.$emit('bounds-updated', {
|
||||
start: bounds.start,
|
||||
end: bounds.end
|
||||
});
|
||||
},
|
||||
dismiss() {
|
||||
this.$emit('dismiss-inputs-fixed');
|
||||
}
|
||||
|
||||
@ -43,13 +43,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FIXED_MODE_KEY } from '../../api/time/constants';
|
||||
import modeMixin from './mode-mixin.js';
|
||||
|
||||
const TEST_IDS = true;
|
||||
|
||||
export default {
|
||||
mixins: [modeMixin],
|
||||
inject: ['openmct', 'configuration'],
|
||||
inject: ['openmct', 'configuration', 'bounds', 'offsets', 'isFixedTimeMode'],
|
||||
props: {
|
||||
mode: {
|
||||
type: String,
|
||||
@ -69,14 +68,14 @@ export default {
|
||||
const mode = this.openmct.time.getMode();
|
||||
|
||||
return {
|
||||
selectedMode: this.getModeMetadata(mode, TEST_IDS),
|
||||
selectedMode: this.getModeMetadata(mode),
|
||||
modes: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
mode: {
|
||||
handler(newMode) {
|
||||
this.setViewFromMode(newMode);
|
||||
handler(mode) {
|
||||
this.setMode(mode, this.getBoundsForMode(mode));
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -97,12 +96,14 @@ export default {
|
||||
this.dismiss = this.openmct.menus.showSuperMenu(x, y, this.modes, menuOptions);
|
||||
},
|
||||
setViewFromMode(mode) {
|
||||
this.selectedMode = this.getModeMetadata(mode, TEST_IDS);
|
||||
this.selectedMode = this.getModeMetadata(mode);
|
||||
},
|
||||
setMode(mode) {
|
||||
this.openmct.time.setMode(mode);
|
||||
this.setViewFromMode(mode);
|
||||
|
||||
this.$emit('mode-updated', mode);
|
||||
},
|
||||
getBoundsForMode(mode) {
|
||||
return mode === FIXED_MODE_KEY ? this.bounds : this.offsets;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -13,7 +13,6 @@
|
||||
class="c-conductor__mode-select"
|
||||
title="Sets the Time Conductor's mode."
|
||||
:button-css-class="'c-icon-button'"
|
||||
@mode-updated="saveMode"
|
||||
/>
|
||||
<IndependentClock
|
||||
v-if="isIndependent"
|
||||
@ -45,7 +44,7 @@
|
||||
/>
|
||||
</div>
|
||||
<conductor-inputs-fixed
|
||||
v-if="isFixed"
|
||||
v-if="isFixedTimeMode"
|
||||
:input-bounds="bounds"
|
||||
:object-path="objectPath"
|
||||
@bounds-updated="saveFixedBounds"
|
||||
@ -88,7 +87,8 @@ export default {
|
||||
configuration: {
|
||||
from: 'configuration',
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
isFixedTimeMode: 'isFixedTimeMode'
|
||||
},
|
||||
props: {
|
||||
positionX: {
|
||||
@ -99,10 +99,6 @@ export default {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
isFixed: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
isIndependent: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
@ -135,7 +131,6 @@ export default {
|
||||
'fixed-bounds-updated',
|
||||
'clock-offsets-updated',
|
||||
'clock-updated',
|
||||
'mode-updated',
|
||||
'independent-mode-updated'
|
||||
],
|
||||
data() {
|
||||
@ -164,7 +159,7 @@ export default {
|
||||
},
|
||||
popupClasses() {
|
||||
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 ' : '';
|
||||
|
||||
return `${independentClass}${value}c-tc-input-popup--${mode}`;
|
||||
@ -215,12 +210,12 @@ export default {
|
||||
this.timeContext.off(TIME_CONTEXT_EVENTS.boundsChanged, this.setBounds);
|
||||
},
|
||||
setViewFromClock() {
|
||||
this.bounds = this.isFixed
|
||||
this.bounds = this.isFixedTimeMode
|
||||
? this.timeContext.getBounds()
|
||||
: this.openmct.time.getClockOffsets();
|
||||
},
|
||||
setBounds(bounds, isTick) {
|
||||
if (this.isFixed || !isTick) {
|
||||
if (this.isFixedTimeMode || !isTick) {
|
||||
this.bounds = bounds;
|
||||
}
|
||||
},
|
||||
@ -233,9 +228,6 @@ export default {
|
||||
saveClock(clockOptions) {
|
||||
this.$emit('clock-updated', clockOptions);
|
||||
},
|
||||
saveMode(mode) {
|
||||
this.$emit('mode-updated', mode);
|
||||
},
|
||||
saveIndependentMode(mode) {
|
||||
this.$emit('independent-mode-updated', mode);
|
||||
},
|
||||
|
||||
@ -107,10 +107,6 @@ export default {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
formatter: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
bottom: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
|
||||
@ -41,11 +41,10 @@
|
||||
aria-label="Start date"
|
||||
@change="validateAllBounds('startDate')"
|
||||
/>
|
||||
<date-picker
|
||||
v-if="isUTCBased"
|
||||
<DatePicker
|
||||
v-if="isTimeSystemUTCBased"
|
||||
class="c-ctrl-wrapper--menus-right"
|
||||
:default-date-time="formattedBounds.start"
|
||||
:formatter="timeFormatter"
|
||||
@date-selected="startDateSelected"
|
||||
/>
|
||||
</div>
|
||||
@ -78,11 +77,10 @@
|
||||
aria-label="End date"
|
||||
@change="validateAllBounds('endDate')"
|
||||
/>
|
||||
<date-picker
|
||||
v-if="isUTCBased"
|
||||
<DatePicker
|
||||
v-if="isTimeSystemUTCBased"
|
||||
class="c-ctrl-wrapper--menus-left"
|
||||
:default-date-time="formattedBounds.end"
|
||||
:formatter="timeFormatter"
|
||||
@date-selected="endDateSelected"
|
||||
/>
|
||||
</div>
|
||||
@ -118,78 +116,37 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash';
|
||||
|
||||
import DatePicker from './DatePicker.vue';
|
||||
|
||||
const DEFAULT_DURATION_FORMATTER = 'duration';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DatePicker
|
||||
},
|
||||
inject: ['openmct'],
|
||||
props: {
|
||||
inputBounds: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
inputTimeSystem: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
inject: ['openmct', 'isTimeSystemUTCBased', 'timeSystemFormatter', 'timeSystemDurationFormatter', 'bounds'],
|
||||
emits: ['update', 'dismiss'],
|
||||
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 {
|
||||
timeFormatter,
|
||||
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,
|
||||
formattedBounds: {},
|
||||
isDisabled: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
inputBounds: {
|
||||
handler(newBounds) {
|
||||
this.handleNewBounds(newBounds);
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
inputTimeSystem: {
|
||||
handler(newTimeSystem) {
|
||||
this.setTimeSystem(newTimeSystem);
|
||||
bounds: {
|
||||
handler() {
|
||||
this.handleNewBounds();
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.handleNewBounds = _.throttle(this.handleNewBounds, 300);
|
||||
this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.getTimeSystem())));
|
||||
created() {
|
||||
this.setViewFromBounds();
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.clearAllValidation();
|
||||
},
|
||||
methods: {
|
||||
handleNewBounds(bounds) {
|
||||
this.setBounds(bounds);
|
||||
this.setViewFromBounds(bounds);
|
||||
handleNewBounds() {
|
||||
this.setViewFromBounds();
|
||||
},
|
||||
clearAllValidation() {
|
||||
[this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
|
||||
@ -198,38 +155,26 @@ export default {
|
||||
input.setCustomValidity('');
|
||||
input.title = '';
|
||||
},
|
||||
setBounds(bounds) {
|
||||
this.bounds = bounds;
|
||||
},
|
||||
setViewFromBounds(bounds) {
|
||||
this.formattedBounds.start = this.timeFormatter.format(bounds.start).split(' ')[0];
|
||||
this.formattedBounds.end = this.timeFormatter.format(bounds.end).split(' ')[0];
|
||||
this.formattedBounds.startTime = this.durationFormatter.format(Math.abs(bounds.start));
|
||||
this.formattedBounds.endTime = this.durationFormatter.format(Math.abs(bounds.end));
|
||||
},
|
||||
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;
|
||||
setViewFromBounds() {
|
||||
const formattedBounds = {};
|
||||
|
||||
formattedBounds.start = this.timeSystemFormatter.format(this.bounds.start).split(' ')[0];
|
||||
formattedBounds.end = this.timeSystemFormatter.format(this.bounds.end).split(' ')[0];
|
||||
formattedBounds.startTime = this.timeSystemDurationFormatter.format(Math.abs(this.bounds.start));
|
||||
formattedBounds.endTime = this.timeSystemDurationFormatter.format(Math.abs(this.bounds.end));
|
||||
|
||||
this.formattedBounds = formattedBounds;
|
||||
},
|
||||
setBoundsFromView(dismiss) {
|
||||
if (this.$refs.fixedDeltaInput.checkValidity()) {
|
||||
let start = this.timeFormatter.parse(
|
||||
let start = this.timeSystemFormatter.parse(
|
||||
`${this.formattedBounds.start} ${this.formattedBounds.startTime}`
|
||||
);
|
||||
let end = this.timeFormatter.parse(
|
||||
let end = this.timeSystemFormatter.parse(
|
||||
`${this.formattedBounds.end} ${this.formattedBounds.endTime}`
|
||||
);
|
||||
|
||||
this.$emit('update', {
|
||||
this.openmct.time.setBounds({
|
||||
start: start,
|
||||
end: end
|
||||
});
|
||||
@ -263,10 +208,10 @@ export default {
|
||||
|
||||
return [this.$refs.startDate, this.$refs.endDate].every((input) => {
|
||||
let boundsValues = {
|
||||
start: this.timeFormatter.parse(
|
||||
start: this.timeSystemFormatter.parse(
|
||||
`${this.formattedBounds.start} ${this.formattedBounds.startTime}`
|
||||
),
|
||||
end: this.timeFormatter.parse(
|
||||
end: this.timeSystemFormatter.parse(
|
||||
`${this.formattedBounds.end} ${this.formattedBounds.endTime}`
|
||||
)
|
||||
};
|
||||
@ -274,7 +219,7 @@ export default {
|
||||
// const limit = this.getBoundsLimit();
|
||||
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) {
|
||||
validationResult = {
|
||||
valid: false,
|
||||
@ -300,7 +245,7 @@ export default {
|
||||
input === this.$refs.startDate
|
||||
? `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
|
||||
: `${this.formattedBounds.end} ${this.formattedBounds.endTime}`;
|
||||
if (!this.timeFormatter.validate(formattedDate)) {
|
||||
if (!this.timeSystemFormatter.validate(formattedDate)) {
|
||||
validationResult = {
|
||||
valid: false,
|
||||
message: 'Invalid date'
|
||||
@ -335,11 +280,11 @@ export default {
|
||||
return validationResult.valid;
|
||||
},
|
||||
startDateSelected(date) {
|
||||
this.formattedBounds.start = this.timeFormatter.format(date).split(' ')[0];
|
||||
this.formattedBounds.start = this.timeSystemFormatter.format(date).split(' ')[0];
|
||||
this.validateAllBounds('startDate');
|
||||
},
|
||||
endDateSelected(date) {
|
||||
this.formattedBounds.end = this.timeFormatter.format(date).split(' ')[0];
|
||||
this.formattedBounds.end = this.timeSystemFormatter.format(date).split(' ')[0];
|
||||
this.validateAllBounds('endDate');
|
||||
},
|
||||
hide($event) {
|
||||
|
||||
@ -36,6 +36,7 @@ import {
|
||||
* @param {OpenMCT} openmct the Open MCT API
|
||||
* @returns {{
|
||||
* observeTimeMode: () => void,
|
||||
* timeMode: import('vue').Ref<string>,
|
||||
* isFixedTimeMode: import('vue').Ref<boolean>,
|
||||
* isRealTimeMode: import('vue').Ref<boolean>
|
||||
* }}
|
||||
@ -60,6 +61,7 @@ export function useTimeMode(openmct, options) {
|
||||
|
||||
return {
|
||||
observeTimeMode,
|
||||
timeMode,
|
||||
isFixedTimeMode,
|
||||
isRealTimeMode
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user