mirror of
https://github.com/nasa/openmct.git
synced 2024-12-24 07:16:39 +00:00
Bugfix/7873 time conductor input validation (#7886)
* validate on change because input is too aggressive * validate logical bounds on submit * perfection
This commit is contained in:
parent
890ddcac4e
commit
7c2bb16bfd
@ -510,6 +510,10 @@ async function setTimeConductorBounds(page, { submitChanges = true, ...bounds })
|
|||||||
// Open the time conductor popup
|
// Open the time conductor popup
|
||||||
await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
|
await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
|
||||||
|
|
||||||
|
// FIXME: https://github.com/nasa/openmct/pull/7818
|
||||||
|
// eslint-disable-next-line playwright/no-wait-for-timeout
|
||||||
|
await page.waitForTimeout(500);
|
||||||
|
|
||||||
if (startDate) {
|
if (startDate) {
|
||||||
await page.getByLabel('Start date').fill(startDate);
|
await page.getByLabel('Start date').fill(startDate);
|
||||||
}
|
}
|
||||||
|
@ -117,7 +117,8 @@ test.describe('Telemetry Table', () => {
|
|||||||
|
|
||||||
endTimeStamp.setUTCMinutes(endTimeStamp.getUTCMinutes() - 5);
|
endTimeStamp.setUTCMinutes(endTimeStamp.getUTCMinutes() - 5);
|
||||||
const endDate = endTimeStamp.toISOString().split('T')[0];
|
const endDate = endTimeStamp.toISOString().split('T')[0];
|
||||||
const endTime = endTimeStamp.toISOString().split('T')[1];
|
const milliseconds = endTimeStamp.getMilliseconds();
|
||||||
|
const endTime = endTimeStamp.toISOString().split('T')[1].replace(`.${milliseconds}Z`, '');
|
||||||
|
|
||||||
await setTimeConductorBounds(page, { endDate, endTime });
|
await setTimeConductorBounds(page, { endDate, endTime });
|
||||||
|
|
||||||
|
@ -24,65 +24,210 @@ import {
|
|||||||
setEndOffset,
|
setEndOffset,
|
||||||
setFixedTimeMode,
|
setFixedTimeMode,
|
||||||
setRealTimeMode,
|
setRealTimeMode,
|
||||||
setStartOffset,
|
setStartOffset
|
||||||
setTimeConductorBounds
|
|
||||||
} from '../../../../appActions.js';
|
} from '../../../../appActions.js';
|
||||||
import { expect, test } from '../../../../pluginFixtures.js';
|
import { expect, test } from '../../../../pluginFixtures.js';
|
||||||
|
|
||||||
test.describe('Time conductor operations', () => {
|
test.describe('Time conductor operations', () => {
|
||||||
test('validate start time does not exceed end time', async ({ page }) => {
|
const DAY = '2024-01-01';
|
||||||
|
const DAY_AFTER = '2024-01-02';
|
||||||
|
const ONE_O_CLOCK = '01:00:00';
|
||||||
|
const TWO_O_CLOCK = '02:00:00';
|
||||||
|
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
// Go to baseURL
|
// Go to baseURL
|
||||||
await page.goto('./', { waitUntil: 'domcontentloaded' });
|
await page.goto('./', { waitUntil: 'domcontentloaded' });
|
||||||
const year = new Date().getFullYear();
|
});
|
||||||
|
|
||||||
// Set initial valid time bounds
|
test('validate date and time inputs are validated on input event', async ({ page }) => {
|
||||||
const startDate = `${year}-01-01`;
|
const submitButtonLocator = page.getByLabel('Submit time bounds');
|
||||||
const startTime = '01:00:00';
|
|
||||||
const endDate = `${year}-01-01`;
|
|
||||||
const endTime = '02:00:00';
|
|
||||||
await setTimeConductorBounds(page, { startDate, startTime, endDate, endTime });
|
|
||||||
|
|
||||||
// Open the time conductor popup
|
// Open the time conductor popup
|
||||||
await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
|
await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
|
||||||
|
|
||||||
// Test invalid start date
|
await test.step('invalid start date disables submit button', async () => {
|
||||||
const invalidStartDate = `${year}-01-02`;
|
const initialStartDate = await page.getByLabel('Start date').inputValue();
|
||||||
|
const invalidStartDate = `${initialStartDate.substring(0, 5)}${initialStartDate.substring(6)}`;
|
||||||
|
|
||||||
await page.getByLabel('Start date').fill(invalidStartDate);
|
await page.getByLabel('Start date').fill(invalidStartDate);
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
|
await expect(submitButtonLocator).toBeDisabled();
|
||||||
await page.getByLabel('Start date').fill(startDate);
|
await page.getByLabel('Start date').fill(initialStartDate);
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
|
await expect(submitButtonLocator).toBeEnabled();
|
||||||
|
});
|
||||||
|
|
||||||
// Test invalid end date
|
await test.step('invalid start time disables submit button', async () => {
|
||||||
const invalidEndDate = `${year - 1}-12-31`;
|
const initialStartTime = await page.getByLabel('Start time').inputValue();
|
||||||
await page.getByLabel('End date').fill(invalidEndDate);
|
const invalidStartTime = `${initialStartTime.substring(0, 5)}${initialStartTime.substring(6)}`;
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
|
|
||||||
await page.getByLabel('End date').fill(endDate);
|
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
|
|
||||||
|
|
||||||
// Test invalid start time
|
|
||||||
const invalidStartTime = '42:00:00';
|
|
||||||
await page.getByLabel('Start time').fill(invalidStartTime);
|
await page.getByLabel('Start time').fill(invalidStartTime);
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
|
await expect(submitButtonLocator).toBeDisabled();
|
||||||
await page.getByLabel('Start time').fill(startTime);
|
await page.getByLabel('Start time').fill(initialStartTime);
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
|
await expect(submitButtonLocator).toBeEnabled();
|
||||||
|
});
|
||||||
|
|
||||||
|
await test.step('disable/enable submit button also works with multiple invalid inputs', async () => {
|
||||||
|
const initialEndDate = await page.getByLabel('End date').inputValue();
|
||||||
|
const invalidEndDate = `${initialEndDate.substring(0, 5)}${initialEndDate.substring(6)}`;
|
||||||
|
const initialStartTime = await page.getByLabel('Start time').inputValue();
|
||||||
|
const invalidStartTime = `${initialStartTime.substring(0, 5)}${initialStartTime.substring(6)}`;
|
||||||
|
|
||||||
|
await page.getByLabel('Start time').fill(invalidStartTime);
|
||||||
|
await expect(submitButtonLocator).toBeDisabled();
|
||||||
|
await page.getByLabel('End date').fill(invalidEndDate);
|
||||||
|
await expect(submitButtonLocator).toBeDisabled();
|
||||||
|
await page.getByLabel('End date').fill(initialEndDate);
|
||||||
|
await expect(submitButtonLocator).toBeDisabled();
|
||||||
|
await page.getByLabel('Start time').fill(initialStartTime);
|
||||||
|
await expect(submitButtonLocator).toBeEnabled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test('validate date and time inputs validation is reported on change event', async ({ page }) => {
|
||||||
|
// Open the time conductor popup
|
||||||
|
await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
|
||||||
|
|
||||||
|
await test.step('invalid start date is reported on change event, not on input event', async () => {
|
||||||
|
const initialStartDate = await page.getByLabel('Start date').inputValue();
|
||||||
|
const invalidStartDate = `${initialStartDate.substring(0, 5)}${initialStartDate.substring(6)}`;
|
||||||
|
|
||||||
|
await page.getByLabel('Start date').fill(invalidStartDate);
|
||||||
|
await expect(page.getByLabel('Start date')).not.toHaveAttribute('title', 'Invalid Date');
|
||||||
|
await page.getByLabel('Start date').press('Tab');
|
||||||
|
await expect(page.getByLabel('Start date')).toHaveAttribute('title', 'Invalid Date');
|
||||||
|
await page.getByLabel('Start date').fill(initialStartDate);
|
||||||
|
await expect(page.getByLabel('Start date')).not.toHaveAttribute('title', 'Invalid Date');
|
||||||
|
});
|
||||||
|
|
||||||
|
await test.step('invalid start time is reported on change event, not on input event', async () => {
|
||||||
|
const initialStartTime = await page.getByLabel('Start time').inputValue();
|
||||||
|
const invalidStartTime = `${initialStartTime.substring(0, 5)}${initialStartTime.substring(6)}`;
|
||||||
|
|
||||||
|
await page.getByLabel('Start time').fill(invalidStartTime);
|
||||||
|
await expect(page.getByLabel('Start time')).not.toHaveAttribute('title', 'Invalid Time');
|
||||||
|
await page.getByLabel('Start time').press('Tab');
|
||||||
|
await expect(page.getByLabel('Start time')).toHaveAttribute('title', 'Invalid Time');
|
||||||
|
await page.getByLabel('Start time').fill(initialStartTime);
|
||||||
|
await expect(page.getByLabel('Start time')).not.toHaveAttribute('title', 'Invalid Time');
|
||||||
|
});
|
||||||
|
|
||||||
|
await test.step('invalid end date is reported on change event, not on input event', async () => {
|
||||||
|
const initialEndDate = await page.getByLabel('End date').inputValue();
|
||||||
|
const invalidEndDate = `${initialEndDate.substring(0, 5)}${initialEndDate.substring(6)}`;
|
||||||
|
|
||||||
|
await page.getByLabel('End date').fill(invalidEndDate);
|
||||||
|
await expect(page.getByLabel('End date')).not.toHaveAttribute('title', 'Invalid Date');
|
||||||
|
await page.getByLabel('End date').press('Tab');
|
||||||
|
await expect(page.getByLabel('End date')).toHaveAttribute('title', 'Invalid Date');
|
||||||
|
await page.getByLabel('End date').fill(initialEndDate);
|
||||||
|
await expect(page.getByLabel('End date')).not.toHaveAttribute('title', 'Invalid Date');
|
||||||
|
});
|
||||||
|
|
||||||
|
await test.step('invalid end time is reported on change event, not on input event', async () => {
|
||||||
|
const initialEndTime = await page.getByLabel('End time').inputValue();
|
||||||
|
const invalidEndTime = `${initialEndTime.substring(0, 5)}${initialEndTime.substring(6)}`;
|
||||||
|
|
||||||
// Test invalid end time
|
|
||||||
const invalidEndTime = '43:00:00';
|
|
||||||
await page.getByLabel('End time').fill(invalidEndTime);
|
await page.getByLabel('End time').fill(invalidEndTime);
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
|
await expect(page.getByLabel('End time')).not.toHaveAttribute('title', 'Invalid Time');
|
||||||
await page.getByLabel('End time').fill(endTime);
|
await page.getByLabel('End time').press('Tab');
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
|
await expect(page.getByLabel('End time')).toHaveAttribute('title', 'Invalid Time');
|
||||||
|
await page.getByLabel('End time').fill(initialEndTime);
|
||||||
|
await expect(page.getByLabel('End time')).not.toHaveAttribute('title', 'Invalid Time');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Submit valid time bounds
|
test('validate start time does not exceed end time on submit', async ({ page }) => {
|
||||||
|
// Open the time conductor popup
|
||||||
|
await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
|
||||||
|
|
||||||
|
// FIXME: https://github.com/nasa/openmct/pull/7818
|
||||||
|
// eslint-disable-next-line playwright/no-wait-for-timeout
|
||||||
|
await page.waitForTimeout(500);
|
||||||
|
|
||||||
|
await page.getByLabel('Start date').fill(DAY);
|
||||||
|
await page.getByLabel('Start time').fill(TWO_O_CLOCK);
|
||||||
|
await page.getByLabel('End date').fill(DAY);
|
||||||
|
await page.getByLabel('End time').fill(ONE_O_CLOCK);
|
||||||
await page.getByLabel('Submit time bounds').click();
|
await page.getByLabel('Submit time bounds').click();
|
||||||
|
|
||||||
// Verify the submitted time bounds
|
await expect(page.getByLabel('Start date')).toHaveAttribute(
|
||||||
await expect(page.getByLabel('Start bounds')).toHaveText(
|
'title',
|
||||||
new RegExp(`${startDate} ${startTime}.000Z`)
|
'Specified start date exceeds end bound'
|
||||||
);
|
);
|
||||||
await expect(page.getByLabel('End bounds')).toHaveText(
|
await expect(page.getByLabel('Start bounds')).not.toHaveText(`${DAY} ${TWO_O_CLOCK}.000Z`);
|
||||||
new RegExp(`${endDate} ${endTime}.000Z`)
|
await expect(page.getByLabel('End bounds')).not.toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
|
||||||
|
|
||||||
|
await page.getByLabel('Start date').fill(DAY);
|
||||||
|
await page.getByLabel('Start time').fill(ONE_O_CLOCK);
|
||||||
|
await page.getByLabel('End date').fill(DAY);
|
||||||
|
await page.getByLabel('End time').fill(TWO_O_CLOCK);
|
||||||
|
await page.getByLabel('Submit time bounds').click();
|
||||||
|
|
||||||
|
await expect(page.getByLabel('Start bounds')).toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
|
||||||
|
await expect(page.getByLabel('End bounds')).toHaveText(`${DAY} ${TWO_O_CLOCK}.000Z`);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('validate start datetime does not exceed end datetime on submit', async ({ page }) => {
|
||||||
|
// Open the time conductor popup
|
||||||
|
await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
|
||||||
|
|
||||||
|
// FIXME: https://github.com/nasa/openmct/pull/7818
|
||||||
|
// eslint-disable-next-line playwright/no-wait-for-timeout
|
||||||
|
await page.waitForTimeout(500);
|
||||||
|
|
||||||
|
await page.getByLabel('Start date').fill(DAY_AFTER);
|
||||||
|
await page.getByLabel('Start time').fill(ONE_O_CLOCK);
|
||||||
|
await page.getByLabel('End date').fill(DAY);
|
||||||
|
await page.getByLabel('End time').fill(ONE_O_CLOCK);
|
||||||
|
await page.getByLabel('Submit time bounds').click();
|
||||||
|
|
||||||
|
await expect(page.getByLabel('Start date')).toHaveAttribute(
|
||||||
|
'title',
|
||||||
|
'Specified start date exceeds end bound'
|
||||||
);
|
);
|
||||||
|
await expect(page.getByLabel('Start bounds')).not.toHaveText(
|
||||||
|
`${DAY_AFTER} ${ONE_O_CLOCK}.000Z`
|
||||||
|
);
|
||||||
|
await expect(page.getByLabel('End bounds')).not.toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
|
||||||
|
|
||||||
|
await page.getByLabel('Start date').fill(DAY);
|
||||||
|
await page.getByLabel('Start time').fill(ONE_O_CLOCK);
|
||||||
|
await page.getByLabel('End date').fill(DAY_AFTER);
|
||||||
|
await page.getByLabel('End time').fill(ONE_O_CLOCK);
|
||||||
|
await page.getByLabel('Submit time bounds').click();
|
||||||
|
|
||||||
|
await expect(page.getByLabel('Start bounds')).toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
|
||||||
|
await expect(page.getByLabel('End bounds')).toHaveText(`${DAY_AFTER} ${ONE_O_CLOCK}.000Z`);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('cancelling form does not set bounds', async ({ page }) => {
|
||||||
|
test.info().annotations.push({
|
||||||
|
type: 'issue',
|
||||||
|
description: 'https://github.com/nasa/openmct/issues/7791'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Open the time conductor popup
|
||||||
|
await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
|
||||||
|
|
||||||
|
await page.getByLabel('Start date').fill(DAY);
|
||||||
|
await page.getByLabel('Start time').fill(ONE_O_CLOCK);
|
||||||
|
await page.getByLabel('End date').fill(DAY_AFTER);
|
||||||
|
await page.getByLabel('End time').fill(ONE_O_CLOCK);
|
||||||
|
await page.getByLabel('Discard changes and close time popup').click();
|
||||||
|
|
||||||
|
await expect(page.getByLabel('Start bounds')).not.toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
|
||||||
|
await expect(page.getByLabel('End bounds')).not.toHaveText(`${DAY_AFTER} ${ONE_O_CLOCK}.000Z`);
|
||||||
|
|
||||||
|
// Open the time conductor popup
|
||||||
|
await page.getByRole('button', { name: 'Time Conductor Mode', exact: true }).click();
|
||||||
|
|
||||||
|
await page.getByLabel('Start date').fill(DAY);
|
||||||
|
await page.getByLabel('Start time').fill(ONE_O_CLOCK);
|
||||||
|
await page.getByLabel('End date').fill(DAY_AFTER);
|
||||||
|
await page.getByLabel('End time').fill(ONE_O_CLOCK);
|
||||||
|
await page.getByLabel('Submit time bounds').click();
|
||||||
|
|
||||||
|
await expect(page.getByLabel('Start bounds')).toHaveText(`${DAY} ${ONE_O_CLOCK}.000Z`);
|
||||||
|
await expect(page.getByLabel('End bounds')).toHaveText(`${DAY_AFTER} ${ONE_O_CLOCK}.000Z`);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -131,77 +276,6 @@ test.describe('Global Time Conductor', () => {
|
|||||||
await expect(page.getByLabel('End offset: 01:30:31')).toBeVisible();
|
await expect(page.getByLabel('End offset: 01:30:31')).toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
test('Input field validation: fixed time mode', async ({ page }) => {
|
|
||||||
test.info().annotations.push({
|
|
||||||
type: 'issue',
|
|
||||||
description: 'https://github.com/nasa/openmct/issues/7791'
|
|
||||||
});
|
|
||||||
// Switch to fixed time mode
|
|
||||||
await setFixedTimeMode(page);
|
|
||||||
|
|
||||||
// Define valid time bounds for testing
|
|
||||||
const validBounds = {
|
|
||||||
startDate: '2024-04-20',
|
|
||||||
startTime: '00:04:20',
|
|
||||||
endDate: '2024-04-20',
|
|
||||||
endTime: '16:04:20'
|
|
||||||
};
|
|
||||||
// Set valid time conductor bounds ✌️
|
|
||||||
await setTimeConductorBounds(page, validBounds);
|
|
||||||
|
|
||||||
// Verify that the time bounds are set correctly
|
|
||||||
await expect(page.getByLabel(`Start bounds: 2024-04-20 00:04:20.000Z`)).toBeVisible();
|
|
||||||
await expect(page.getByLabel(`End bounds: 2024-04-20 16:04:20.000Z`)).toBeVisible();
|
|
||||||
|
|
||||||
// Open the Time Conductor Mode popup
|
|
||||||
await page.getByLabel('Time Conductor Mode').click();
|
|
||||||
|
|
||||||
// Test invalid start date
|
|
||||||
const invalidStartDate = '2024-04-21';
|
|
||||||
await page.getByLabel('Start date').fill(invalidStartDate);
|
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
|
|
||||||
await page.getByLabel('Start date').fill(validBounds.startDate);
|
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
|
|
||||||
|
|
||||||
// Test invalid end date
|
|
||||||
const invalidEndDate = '2024-04-19';
|
|
||||||
await page.getByLabel('End date').fill(invalidEndDate);
|
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
|
|
||||||
await page.getByLabel('End date').fill(validBounds.endDate);
|
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
|
|
||||||
|
|
||||||
// Test invalid start time
|
|
||||||
const invalidStartTime = '16:04:21';
|
|
||||||
await page.getByLabel('Start time').fill(invalidStartTime);
|
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
|
|
||||||
await page.getByLabel('Start time').fill(validBounds.startTime);
|
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
|
|
||||||
|
|
||||||
// Test invalid end time
|
|
||||||
const invalidEndTime = '00:04:19';
|
|
||||||
await page.getByLabel('End time').fill(invalidEndTime);
|
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeDisabled();
|
|
||||||
await page.getByLabel('End time').fill(validBounds.endTime);
|
|
||||||
await expect(page.getByLabel('Submit time bounds')).toBeEnabled();
|
|
||||||
|
|
||||||
// Verify that the time bounds remain unchanged after invalid inputs
|
|
||||||
await expect(page.getByLabel(`Start bounds: 2024-04-20 00:04:20.000Z`)).toBeVisible();
|
|
||||||
await expect(page.getByLabel(`End bounds: 2024-04-20 16:04:20.000Z`)).toBeVisible();
|
|
||||||
|
|
||||||
// Discard changes and verify that bounds remain unchanged
|
|
||||||
await setTimeConductorBounds(page, {
|
|
||||||
startDate: validBounds.startDate,
|
|
||||||
startTime: '04:20:00',
|
|
||||||
endDate: validBounds.endDate,
|
|
||||||
endTime: '04:20:20',
|
|
||||||
submitChanges: false
|
|
||||||
});
|
|
||||||
|
|
||||||
// Verify that the original time bounds are still displayed after discarding changes
|
|
||||||
await expect(page.getByLabel(`Start bounds: 2024-04-20 00:04:20.000Z`)).toBeVisible();
|
|
||||||
await expect(page.getByLabel(`End bounds: 2024-04-20 16:04:20.000Z`)).toBeVisible();
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Verify that offsets and url params are preserved when switching
|
* Verify that offsets and url params are preserved when switching
|
||||||
* between fixed timespan and real-time mode.
|
* between fixed timespan and real-time mode.
|
||||||
|
@ -11,18 +11,19 @@
|
|||||||
>
|
>
|
||||||
<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"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
aria-label="Start date"
|
aria-label="Start date"
|
||||||
@input="validateAllBounds('startDate')"
|
@input="validateInput('startDate')"
|
||||||
|
@change="reportValidity('startDate')"
|
||||||
/>
|
/>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
v-if="isUTCBased"
|
v-if="isUTCBased"
|
||||||
class="c-ctrl-wrapper--menus-right"
|
class="c-ctrl-wrapper--menus-right"
|
||||||
:default-date-time="formattedBounds.start"
|
:default-date-time="formattedBounds.startDate"
|
||||||
:formatter="timeFormatter"
|
:formatter="timeFormatter"
|
||||||
@date-selected="startDateSelected"
|
@date-selected="startDateSelected"
|
||||||
/>
|
/>
|
||||||
@ -37,7 +38,8 @@
|
|||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
aria-label="Start time"
|
aria-label="Start time"
|
||||||
@input="validateAllBounds('startDate')"
|
@input="validateInput('startTime')"
|
||||||
|
@change="reportValidity('startTime')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -48,18 +50,19 @@
|
|||||||
>
|
>
|
||||||
<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"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
aria-label="End date"
|
aria-label="End date"
|
||||||
@input="validateAllBounds('endDate')"
|
@input="validateInput('endDate')"
|
||||||
|
@change="reportValidity('endDate')"
|
||||||
/>
|
/>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
v-if="isUTCBased"
|
v-if="isUTCBased"
|
||||||
class="c-ctrl-wrapper--menus-left"
|
class="c-ctrl-wrapper--menus-left"
|
||||||
:default-date-time="formattedBounds.end"
|
:default-date-time="formattedBounds.endDate"
|
||||||
:formatter="timeFormatter"
|
:formatter="timeFormatter"
|
||||||
@date-selected="endDateSelected"
|
@date-selected="endDateSelected"
|
||||||
/>
|
/>
|
||||||
@ -74,14 +77,15 @@
|
|||||||
autocorrect="off"
|
autocorrect="off"
|
||||||
spellcheck="false"
|
spellcheck="false"
|
||||||
aria-label="End time"
|
aria-label="End time"
|
||||||
@input="validateAllBounds('endDate')"
|
@input="validateInput('endTime')"
|
||||||
|
@change="reportValidity('endTime')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pr-time-input pr-time-input--buttons">
|
<div class="pr-time-input pr-time-input--buttons">
|
||||||
<button
|
<button
|
||||||
class="c-button c-button--major icon-check"
|
class="c-button c-button--major icon-check"
|
||||||
:disabled="isDisabled"
|
:disabled="hasInputValidityError"
|
||||||
aria-label="Submit time bounds"
|
aria-label="Submit time bounds"
|
||||||
@click.prevent="handleFormSubmission(true)"
|
@click.prevent="handleFormSubmission(true)"
|
||||||
></button>
|
></button>
|
||||||
@ -125,6 +129,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
timeFormatter: this.getFormatter(timeSystem.timeFormat),
|
timeFormatter: this.getFormatter(timeSystem.timeFormat),
|
||||||
durationFormatter: this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER),
|
durationFormatter: this.getFormatter(timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER),
|
||||||
|
timeSystemKey: timeSystem.key,
|
||||||
bounds: {
|
bounds: {
|
||||||
start: bounds.start,
|
start: bounds.start,
|
||||||
end: bounds.end
|
end: bounds.end
|
||||||
@ -136,9 +141,29 @@ export default {
|
|||||||
endTime: ''
|
endTime: ''
|
||||||
},
|
},
|
||||||
isUTCBased: timeSystem.isUTCBased,
|
isUTCBased: timeSystem.isUTCBased,
|
||||||
isDisabled: false
|
inputValidityMap: {
|
||||||
|
startDate: { valid: true },
|
||||||
|
startTime: { valid: true },
|
||||||
|
endDate: { valid: true },
|
||||||
|
endTime: { valid: true }
|
||||||
|
},
|
||||||
|
logicalValidityMap: {
|
||||||
|
limit: { valid: true },
|
||||||
|
bounds: { valid: true }
|
||||||
|
}
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
hasInputValidityError() {
|
||||||
|
return Object.values(this.inputValidityMap).some((isValid) => !isValid.valid);
|
||||||
|
},
|
||||||
|
hasLogicalValidationErrors() {
|
||||||
|
return Object.values(this.logicalValidityMap).some((isValid) => !isValid.valid);
|
||||||
|
},
|
||||||
|
isValid() {
|
||||||
|
return !this.hasInputValidityError && !this.hasLogicalValidationErrors;
|
||||||
|
}
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
inputBounds: {
|
inputBounds: {
|
||||||
handler(newBounds) {
|
handler(newBounds) {
|
||||||
@ -168,25 +193,17 @@ export default {
|
|||||||
this.setBounds(bounds);
|
this.setBounds(bounds);
|
||||||
this.setViewFromBounds(bounds);
|
this.setViewFromBounds(bounds);
|
||||||
},
|
},
|
||||||
clearAllValidation() {
|
|
||||||
[this.$refs.startDate, this.$refs.endDate].forEach(this.clearValidationForInput);
|
|
||||||
},
|
|
||||||
clearValidationForInput(input) {
|
|
||||||
if (input) {
|
|
||||||
input.setCustomValidity('');
|
|
||||||
input.title = '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setBounds(bounds) {
|
setBounds(bounds) {
|
||||||
this.bounds = bounds;
|
this.bounds = bounds;
|
||||||
},
|
},
|
||||||
setViewFromBounds(bounds) {
|
setViewFromBounds(bounds) {
|
||||||
this.formattedBounds.start = this.timeFormatter.format(bounds.start).split(' ')[0];
|
this.formattedBounds.startDate = this.timeFormatter.format(bounds.start).split(' ')[0];
|
||||||
this.formattedBounds.end = this.timeFormatter.format(bounds.end).split(' ')[0];
|
this.formattedBounds.endDate = this.timeFormatter.format(bounds.end).split(' ')[0];
|
||||||
this.formattedBounds.startTime = this.durationFormatter.format(Math.abs(bounds.start));
|
this.formattedBounds.startTime = this.durationFormatter.format(Math.abs(bounds.start));
|
||||||
this.formattedBounds.endTime = this.durationFormatter.format(Math.abs(bounds.end));
|
this.formattedBounds.endTime = this.durationFormatter.format(Math.abs(bounds.end));
|
||||||
},
|
},
|
||||||
setTimeSystem(timeSystem) {
|
setTimeSystem(timeSystem) {
|
||||||
|
this.timeSystemKey = timeSystem.key;
|
||||||
this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
|
this.timeFormatter = this.getFormatter(timeSystem.timeFormat);
|
||||||
this.durationFormatter = this.getFormatter(
|
this.durationFormatter = this.getFormatter(
|
||||||
timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
|
timeSystem.durationFormat || DEFAULT_DURATION_FORMATTER
|
||||||
@ -201,10 +218,10 @@ export default {
|
|||||||
setBoundsFromView(dismiss) {
|
setBoundsFromView(dismiss) {
|
||||||
if (this.$refs.fixedDeltaInput.checkValidity()) {
|
if (this.$refs.fixedDeltaInput.checkValidity()) {
|
||||||
let start = this.timeFormatter.parse(
|
let start = this.timeFormatter.parse(
|
||||||
`${this.formattedBounds.start} ${this.formattedBounds.startTime}`
|
`${this.formattedBounds.startDate} ${this.formattedBounds.startTime}`
|
||||||
);
|
);
|
||||||
let end = this.timeFormatter.parse(
|
let end = this.timeFormatter.parse(
|
||||||
`${this.formattedBounds.end} ${this.formattedBounds.endTime}`
|
`${this.formattedBounds.endDate} ${this.formattedBounds.endTime}`
|
||||||
);
|
);
|
||||||
|
|
||||||
this.$emit('update', { start, end });
|
this.$emit('update', { start, end });
|
||||||
@ -215,96 +232,93 @@ export default {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleFormSubmission(shouldDismiss) {
|
clearAllValidation() {
|
||||||
this.validateAllBounds('startDate');
|
Object.keys(this.inputValidityMap).forEach(this.clearValidation);
|
||||||
this.validateAllBounds('endDate');
|
},
|
||||||
|
clearValidation(refName) {
|
||||||
|
const input = this.getInput(refName);
|
||||||
|
|
||||||
if (!this.isDisabled) {
|
input.setCustomValidity('');
|
||||||
|
input.title = '';
|
||||||
|
},
|
||||||
|
handleFormSubmission(shouldDismiss) {
|
||||||
|
this.validateLimit();
|
||||||
|
this.reportValidity('limit');
|
||||||
|
this.validateBounds();
|
||||||
|
this.reportValidity('bounds');
|
||||||
|
|
||||||
|
if (this.isValid) {
|
||||||
this.setBoundsFromView(shouldDismiss);
|
this.setBoundsFromView(shouldDismiss);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
validateAllBounds(ref) {
|
validateInput(refName) {
|
||||||
this.isDisabled = false;
|
this.clearAllValidation();
|
||||||
|
|
||||||
if (!this.areBoundsFormatsValid()) {
|
const inputType = refName.includes('Date') ? 'Date' : 'Time';
|
||||||
this.isDisabled = true;
|
const formatter = inputType === 'Date' ? this.timeFormatter : this.durationFormatter;
|
||||||
return false;
|
const validationResult = formatter.validate(this.formattedBounds[refName])
|
||||||
}
|
? { valid: true }
|
||||||
|
: { valid: false, message: `Invalid ${inputType}` };
|
||||||
|
|
||||||
let validationResult = { valid: true };
|
this.inputValidityMap[refName] = validationResult;
|
||||||
const currentInput = this.$refs[ref];
|
},
|
||||||
|
validateBounds() {
|
||||||
return [this.$refs.startDate, this.$refs.endDate].every((input) => {
|
const bounds = {
|
||||||
let boundsValues = {
|
|
||||||
start: this.timeFormatter.parse(
|
start: this.timeFormatter.parse(
|
||||||
`${this.formattedBounds.start} ${this.formattedBounds.startTime}`
|
`${this.formattedBounds.startDate} ${this.formattedBounds.startTime}`
|
||||||
),
|
),
|
||||||
end: this.timeFormatter.parse(
|
end: this.timeFormatter.parse(
|
||||||
`${this.formattedBounds.end} ${this.formattedBounds.endTime}`
|
`${this.formattedBounds.endDate} ${this.formattedBounds.endTime}`
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
//TODO: Do we need limits here? We have conductor limits disabled right now
|
|
||||||
// const limit = this.getBoundsLimit();
|
|
||||||
const limit = false;
|
|
||||||
|
|
||||||
if (this.isUTCBased && limit && boundsValues.end - boundsValues.start > limit) {
|
this.logicalValidityMap.bounds = this.openmct.time.validateBounds(bounds);
|
||||||
if (input === currentInput) {
|
},
|
||||||
validationResult = {
|
validateLimit(bounds) {
|
||||||
|
const limit = this.configuration?.menuOptions
|
||||||
|
?.filter((option) => option.timeSystem === this.timeSystemKey)
|
||||||
|
?.find((option) => option.limit)?.limit;
|
||||||
|
|
||||||
|
if (this.isUTCBased && limit && bounds.end - bounds.start > limit) {
|
||||||
|
this.logicalValidityMap.limit = {
|
||||||
valid: false,
|
valid: false,
|
||||||
message: 'Start and end difference exceeds allowable limit'
|
message: 'Start and end difference exceeds allowable limit'
|
||||||
};
|
};
|
||||||
|
} else {
|
||||||
|
this.logicalValidityMap.limit = { valid: true };
|
||||||
}
|
}
|
||||||
} else if (input === currentInput) {
|
|
||||||
validationResult = this.openmct.time.validateBounds(boundsValues);
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.handleValidationResults(input, validationResult);
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
areBoundsFormatsValid() {
|
reportValidity(refName) {
|
||||||
return [this.$refs.startDate, this.$refs.endDate].every((input) => {
|
const input = this.getInput(refName);
|
||||||
const formattedDate =
|
const validationResult = this.inputValidityMap[refName] ?? this.logicalValidityMap[refName];
|
||||||
input === this.$refs.startDate
|
|
||||||
? `${this.formattedBounds.start} ${this.formattedBounds.startTime}`
|
|
||||||
: `${this.formattedBounds.end} ${this.formattedBounds.endTime}`;
|
|
||||||
|
|
||||||
const validationResult = this.timeFormatter.validate(formattedDate)
|
|
||||||
? { valid: true }
|
|
||||||
: { valid: false, message: 'Invalid date' };
|
|
||||||
|
|
||||||
return this.handleValidationResults(input, validationResult);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getBoundsLimit() {
|
|
||||||
const configuration = this.configuration.menuOptions
|
|
||||||
.filter((option) => option.timeSystem === this.timeSystem.key)
|
|
||||||
.find((option) => option.limit);
|
|
||||||
|
|
||||||
const limit = configuration ? configuration.limit : undefined;
|
|
||||||
|
|
||||||
return limit;
|
|
||||||
},
|
|
||||||
handleValidationResults(input, validationResult) {
|
|
||||||
if (validationResult.valid !== true) {
|
if (validationResult.valid !== true) {
|
||||||
input.setCustomValidity(validationResult.message);
|
input.setCustomValidity(validationResult.message);
|
||||||
input.title = validationResult.message;
|
input.title = validationResult.message;
|
||||||
this.isDisabled = true;
|
this.hasLogicalValidationErrors = true;
|
||||||
} else {
|
} else {
|
||||||
input.setCustomValidity('');
|
input.setCustomValidity('');
|
||||||
input.title = '';
|
input.title = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$refs.fixedDeltaInput.reportValidity();
|
this.$refs.fixedDeltaInput.reportValidity();
|
||||||
|
},
|
||||||
|
getInput(refName) {
|
||||||
|
if (Object.keys(this.inputValidityMap).includes(refName)) {
|
||||||
|
return this.$refs[refName];
|
||||||
|
}
|
||||||
|
|
||||||
return validationResult.valid;
|
return this.$refs.startDate;
|
||||||
},
|
},
|
||||||
startDateSelected(date) {
|
startDateSelected(date) {
|
||||||
this.formattedBounds.start = this.timeFormatter.format(date).split(' ')[0];
|
this.formattedBounds.startDate = this.timeFormatter.format(date).split(' ')[0];
|
||||||
this.validateAllBounds('startDate');
|
this.validateInput('startDate');
|
||||||
|
this.reportValidity('startDate');
|
||||||
},
|
},
|
||||||
endDateSelected(date) {
|
endDateSelected(date) {
|
||||||
this.formattedBounds.end = this.timeFormatter.format(date).split(' ')[0];
|
this.formattedBounds.endDate = this.timeFormatter.format(date).split(' ')[0];
|
||||||
this.validateAllBounds('endDate');
|
this.validateInput('endDate');
|
||||||
|
this.reportValidity('endDate');
|
||||||
},
|
},
|
||||||
hide($event) {
|
hide($event) {
|
||||||
if ($event.target.className.indexOf('c-button icon-x') > -1) {
|
if ($event.target.className.indexOf('c-button icon-x') > -1) {
|
||||||
|
Loading…
Reference in New Issue
Block a user