ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-10 21:01:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

update to use composables

Browse Source
This commit is contained in:
David Tsay 2024-07-03 11:33:36 -07:00
parent f1cf12d412
commit b3c99aef80
1 changed files with 48 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,9 +31,15 @@
<div <div
class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-start-date" class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-start-date"
> >
<DatePicker
v-if="canSplitDateTime"
class="c-ctrl-wrapper--menus-right"
:default-date-time="formattedBounds.startDate"
@date-selected="startDateSelected"
/>
<input <input
ref="startDate" ref="startDate"
v-model="formattedBounds.start" v-model="formattedBounds.startDate"
class="c-input--datetime" class="c-input--datetime"
type="text" type="text"
autocorrect="off" autocorrect="off"
@ -41,12 +47,6 @@
aria-label="Start date" aria-label="Start date"
@change="validateAllBounds('startDate')" @change="validateAllBounds('startDate')"
/> />
<DatePicker
v-if="isTimeSystemUTCBased"
class="c-ctrl-wrapper--menus-right"
:default-date-time="formattedBounds.start"
@date-selected="startDateSelected"
/>
</div> </div>
<div class="pr-time-input pr-time-input--time pr-time-input-start-time"> <div class="pr-time-input pr-time-input--time pr-time-input-start-time">
@ -67,9 +67,15 @@
<div <div
class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-end-date" class="pr-time-input pr-time-input--date pr-time-input--input-and-button pr-time-input-end-date"
> >
<DatePicker
v-if="canSplitDateTime"
class="c-ctrl-wrapper--menus-left"
:default-date-time="formattedBounds.endDate"
@date-selected="endDateSelected"
/>
<input <input
ref="endDate" ref="endDate"
v-model="formattedBounds.end" v-model="formattedBounds.endDate"
class="c-input--datetime" class="c-input--datetime"
type="text" type="text"
autocorrect="off" autocorrect="off"
@ -77,12 +83,6 @@
aria-label="End date" aria-label="End date"
@change="validateAllBounds('endDate')" @change="validateAllBounds('endDate')"
/> />
<DatePicker
v-if="isTimeSystemUTCBased"
class="c-ctrl-wrapper--menus-left"
:default-date-time="formattedBounds.end"
@date-selected="endDateSelected"
/>
</div> </div>
<div class="pr-time-input pr-time-input--time pr-time-input-end-time"> <div class="pr-time-input pr-time-input--time pr-time-input-end-time">
@ -137,24 +137,30 @@ export default {
isDisabled: false isDisabled: false
}; };
}, },
computed: {
canSplitDateTime() {
return Boolean(
this.isTimeSystemUTCBased &&
this.timeSystemFormatter?.getDelimiter
);
}
},
watch: { watch: {
bounds: { bounds: {
handler() { handler() {
this.handleNewBounds(); console.log(this.bounds);
}, this.setViewFromBounds();
deep: true }
} }
}, },
created() { mounted() {
this.delimiter = this.timeSystemFormatter.getDelimiter?.();
this.setViewFromBounds(); this.setViewFromBounds();
}, },
beforeUnmount() { beforeUnmount() {
this.clearAllValidation(); this.clearAllValidation();
}, },
methods: { methods: {
handleNewBounds() {
this.setViewFromBounds();
},
clearAllValidation() { clearAllValidation() {
[this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput); [this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
}, },
@ -163,27 +169,28 @@ export default {
input.title = ''; input.title = '';
}, },
setViewFromBounds() { setViewFromBounds() {
const formattedBounds = {}; const formattedStartBounds = this.timeSystemFormatter.format(this.bounds.start);
const formattedEndBounds = this.timeSystemFormatter.format(this.bounds.end);
formattedBounds.start = this.timeSystemFormatter.format(this.bounds.start).split(' ')[0]; this.formattedBounds = {
formattedBounds.end = this.timeSystemFormatter.format(this.bounds.end).split(' ')[0]; startDate: formattedStartBounds.split(this.delimiter)[0],
formattedBounds.startTime = this.timeSystemDurationFormatter.format(Math.abs(this.bounds.start)); startTime: formattedStartBounds.split(this.delimiter)[1],
formattedBounds.endTime = this.timeSystemDurationFormatter.format(Math.abs(this.bounds.end)); endDate: formattedEndBounds.split(this.delimiter)[0],
endTime: formattedEndBounds.split(this.delimiter)[1]
this.formattedBounds = formattedBounds; };
}, },
setBoundsFromView(dismiss) { setBoundsFromView(dismiss) {
if (this.$refs.fixedDeltaInput.checkValidity()) { if (this.$refs.fixedDeltaInput.checkValidity()) {
let start = this.timeSystemFormatter.parse( const start = this.timeSystemFormatter.parse(
`${this.formattedBounds.start} ${this.formattedBounds.startTime}` `${this.formattedBounds.startDate}${this.delimiter}${this.formattedBounds.startTime}`
); );
let end = this.timeSystemFormatter.parse( const end = this.timeSystemFormatter.parse(
`${this.formattedBounds.end} ${this.formattedBounds.endTime}` `${this.formattedBounds.endDate}${this.delimiter}${this.formattedBounds.endTime}`
); );
this.timeContext.setBounds({ this.timeContext.setBounds({
start: start, start,
end: end end
}); });
} }
@ -214,12 +221,12 @@ export default {
const currentInput = this.$refs[ref]; const currentInput = this.$refs[ref];
return [this.$refs.startDate, this.$refs.endDate].every((input) => { return [this.$refs.startDate, this.$refs.endDate].every((input) => {
let boundsValues = { const boundsValues = {
start: this.timeSystemFormatter.parse( start: this.timeSystemFormatter.parse(
`${this.formattedBounds.start} ${this.formattedBounds.startTime}` `${this.formattedBounds.startDate}${this.delimiter}${this.formattedBounds.startTime}`
), ),
end: this.timeSystemFormatter.parse( end: this.timeSystemFormatter.parse(
`${this.formattedBounds.end} ${this.formattedBounds.endTime}` `${this.formattedBounds.endDate}${this.delimiter}${this.formattedBounds.endTime}`
) )
}; };
//TODO: Do we need limits here? We have conductor limits disabled right now //TODO: Do we need limits here? We have conductor limits disabled right now
@ -250,8 +257,8 @@ export default {
return [this.$refs.startDate, this.$refs.endDate].every((input) => { return [this.$refs.startDate, this.$refs.endDate].every((input) => {
const formattedDate = const formattedDate =
input === this.$refs.startDate input === this.$refs.startDate
? `${this.formattedBounds.start} ${this.formattedBounds.startTime}` ? `${this.formattedBounds.startDate}${this.delimiter}${this.formattedBounds.startTime}`
: `${this.formattedBounds.end} ${this.formattedBounds.endTime}`; : `${this.formattedBounds.endDate}${this.delimiter}${this.formattedBounds.endTime}`;
if (!this.timeSystemFormatter.validate(formattedDate)) { if (!this.timeSystemFormatter.validate(formattedDate)) {
validationResult = { validationResult = {
valid: false, valid: false,
@ -287,11 +294,11 @@ export default {
return validationResult.valid; return validationResult.valid;
}, },
startDateSelected(date) { startDateSelected(date) {
this.formattedBounds.start = this.timeSystemFormatter.format(date).split(' ')[0]; this.formattedBounds.startDate = this.timeSystemFormatter.format(date).split(this.delimiter)[0];
this.validateAllBounds('startDate'); this.validateAllBounds('startDate');
}, },
endDateSelected(date) { endDateSelected(date) {
this.formattedBounds.end = this.timeSystemFormatter.format(date).split(' ')[0]; this.formattedBounds.endDate = this.timeSystemFormatter.format(date).split(this.delimiter)[0];
this.validateAllBounds('endDate'); this.validateAllBounds('endDate');
}, },
hide($event) { hide($event) {