diff options
author | Dixsie Wolmers <dixsie@ibm.com> | 2020-06-05 15:00:06 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-07-10 04:13:23 +0300 |
commit | 739e459610d92a6fd3021a65398ecb4517cced89 (patch) | |
tree | 247ad85d6e7924f838a1c59efc20b65b6e4812ad /src/views | |
parent | 2f8bbbfe198087497c475029c573727e0711eb04 (diff) | |
download | webui-vue-739e459610d92a6fd3021a65398ecb4517cced89.tar.xz |
Add date and time settings
Adds ablity to change date and time manually, or
configure using NTP servers.
- If NTP is selected, user is required to enter at least one
NTP address
- Date and time are ISO formatted
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I0d67c80487fdd815eacc3539ccd702b23618260e
Diffstat (limited to 'src/views')
-rw-r--r-- | src/views/Configuration/DateTimeSettings/DateTimeSettings.vue | 352 | ||||
-rw-r--r-- | src/views/Configuration/DateTimeSettings/index.js | 2 |
2 files changed, 354 insertions, 0 deletions
diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue new file mode 100644 index 00000000..d7b97d1a --- /dev/null +++ b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue @@ -0,0 +1,352 @@ +<template> + <b-container fluid="xl"> + <page-title /> + <b-row> + <b-col md="8" xl="6"> + <alert variant="info" class="mb-4"> + <span> + {{ $t('pageDateTimeSettings.alert.message') }} + <b-link to="/profile-settings"> + {{ $t('pageDateTimeSettings.alert.link') }}</b-link + > + </span> + </alert> + </b-col> + </b-row> + <page-section> + <b-row> + <b-col lg="3"> + <dl> + <dt>{{ $t('pageDateTimeSettings.form.date') }}</dt> + <dd v-if="bmcTime">{{ bmcTime | formatDate }}</dd> + <dd v-else>--</dd> + </dl> + </b-col> + <b-col lg="3"> + <dl> + <dt>{{ $t('pageDateTimeSettings.form.time') }}</dt> + <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd> + <dd v-else>--</dd> + </dl> + </b-col> + </b-row> + </page-section> + <page-section :section-title="$t('pageDateTimeSettings.configureSettings')"> + <b-form novalidate @submit.prevent="submitForm"> + <b-form-group label="Configure date and time" label-sr-only> + <b-form-radio + v-model="form.configurationSelected" + value="manual" + @change="onChangeConfigType" + > + {{ $t('pageDateTimeSettings.form.manual') }} + </b-form-radio> + <b-row class="mt-3 ml-3"> + <b-col sm="6" lg="4" xl="3"> + <b-form-group + :label="$t('pageDateTimeSettings.form.date')" + label-for="input-manual-date" + > + <b-form-text id="date-format-help">(YYYY-MM-DD)</b-form-text> + <b-input-group> + <b-form-input + id="input-manual-date" + v-model="form.manual.date" + :state="getValidationState($v.form.manual.date)" + :disabled="form.configurationSelected === 'ntp'" + @blur="$v.form.manual.date.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <div v-if="!$v.form.manual.date.pattern"> + {{ $t('global.form.invalidFormat') }} + </div> + <div v-if="!$v.form.manual.time.required"> + {{ $t('global.form.fieldRequired') }} + </div> + </b-form-invalid-feedback> + <b-form-datepicker + v-model="form.manual.date" + button-only + right + size="sm" + :hide-header="true" + :locale="locale" + :label-help=" + $t('global.calendar.useCursorKeysToNavigateCalendarDates') + " + :disabled="form.configurationSelected === 'ntp'" + button-variant="link" + aria-controls="input-manual-date" + > + <template v-slot:button-content> + <icon-calendar /> + <span class="sr-only"> + {{ $t('global.calendar.openDatePicker') }} + </span> + </template> + </b-form-datepicker> + </b-input-group> + </b-form-group> + </b-col> + <b-col sm="6" lg="4" xl="3"> + <b-form-group + :label="$t('pageDateTimeSettings.form.time')" + label-for="input-manual-time" + > + <b-form-text id="time-format-help">(HH:MM)</b-form-text> + <b-input-group> + <b-form-input + id="input-manual-time" + v-model="form.manual.time" + :state="getValidationState($v.form.manual.time)" + :disabled="form.configurationSelected === 'ntp'" + @blur="$v.form.manual.time.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <div v-if="!$v.form.manual.time.pattern"> + {{ $t('global.form.invalidFormat') }} + </div> + <div v-if="!$v.form.manual.time.required"> + {{ $t('global.form.fieldRequired') }} + </div> + </b-form-invalid-feedback> + </b-input-group> + </b-form-group> + </b-col> + </b-row> + <b-form-radio + v-model="form.configurationSelected" + value="ntp" + @change="onChangeConfigType" + > + NTP + </b-form-radio> + <b-row class="mt-3 ml-3"> + <b-col sm="6" lg="4" xl="3"> + <b-form-group + :label="$t('pageDateTimeSettings.form.ntpServers.server1')" + label-for="input-ntp-1" + > + <b-input-group> + <b-form-input + id="input-ntp-1" + v-model="form.ntp.firstAddress" + :state="getValidationState($v.form.ntp.firstAddress)" + :disabled="form.configurationSelected === 'manual'" + @blur="$v.form.ntp.firstAddress.$touch()" + /> + <b-form-invalid-feedback role="alert"> + <div v-if="!$v.form.ntp.firstAddress.required"> + {{ $t('global.form.fieldRequired') }} + </div> + </b-form-invalid-feedback> + </b-input-group> + </b-form-group> + </b-col> + <b-col sm="6" lg="4" xl="3"> + <b-form-group + :label="$t('pageDateTimeSettings.form.ntpServers.server2')" + label-for="input-ntp-2" + > + <b-input-group> + <b-form-input + id="input-ntp-2" + v-model="form.ntp.secondAddress" + :disabled="form.configurationSelected === 'manual'" + @blur="$v.form.ntp.secondAddress.$touch()" + /> + </b-input-group> + </b-form-group> + </b-col> + <b-col sm="6" lg="4" xl="3"> + <b-form-group + :label="$t('pageDateTimeSettings.form.ntpServers.server3')" + label-for="input-ntp-3" + > + <b-input-group> + <b-form-input + id="input-ntp-3" + v-model="form.ntp.thirdAddress" + :disabled="form.configurationSelected === 'manual'" + @blur="$v.form.ntp.thirdAddress.$touch()" + /> + </b-input-group> + </b-form-group> + </b-col> + </b-row> + </b-form-group> + <b-button variant="primary" type="submit"> + {{ $t('global.action.saveSettings') }} + </b-button> + </b-form> + </page-section> + </b-container> +</template> + +<script> +import Alert from '@/components/Global/Alert'; +import IconCalendar from '@carbon/icons-vue/es/calendar/20'; +import PageTitle from '@/components/Global/PageTitle'; +import PageSection from '@/components/Global/PageSection'; + +import BVToastMixin from '@/components/Mixins/BVToastMixin'; +import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; + +import { mapState } from 'vuex'; +import { requiredIf, helpers } from 'vuelidate/lib/validators'; + +const isoDateRegex = /([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/; +const isoTimeRegex = /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/; + +export default { + name: 'DateTimeSettings', + components: { Alert, IconCalendar, PageTitle, PageSection }, + mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin], + data() { + return { + locale: this.$store.getters['global/languagePreference'], + form: { + configurationSelected: '', + manual: { + date: '', + time: '' + }, + ntp: { firstAddress: '', secondAddress: '', thirdAddress: '' } + } + }; + }, + validations() { + return { + form: { + manual: { + date: { + required: requiredIf(function() { + return this.form.configurationSelected === 'manual'; + }), + pattern: helpers.regex('pattern', isoDateRegex) + }, + time: { + required: requiredIf(function() { + return this.form.configurationSelected === 'manual'; + }), + pattern: helpers.regex('pattern', isoTimeRegex) + } + }, + ntp: { + firstAddress: { + required: requiredIf(function() { + return this.form.configurationSelected === 'ntp'; + }) + }, + secondAddress: {}, + thirdAddress: {} + } + } + }; + }, + computed: { + ...mapState('dateTime', ['ntpServers', 'isNtpProtocolEnabled']), + bmcTime() { + return this.$store.getters['global/bmcTime']; + } + }, + watch: { + ntpServers() { + this.setNtpValues(); + }, + manualDate() { + this.emitChange(); + } + }, + created() { + this.startLoader(); + Promise.all([ + this.$store.dispatch('global/getBmcTime'), + this.$store.dispatch('dateTime/getNtpData') + ]).finally(() => this.endLoader()); + }, + beforeRouteLeave(to, from, next) { + this.hideLoader(); + next(); + }, + methods: { + emitChange() { + if (this.$v.$invalid) return; + this.$v.$reset(); //reset to re-validate on blur + this.$emit('change', { + manualDate: this.manualDate ? new Date(this.manualDate) : null + }); + }, + setNtpValues() { + this.form.configurationSelected = this.isNtpProtocolEnabled + ? 'ntp' + : 'manual'; + this.form.ntp.firstAddress = this.ntpServers[0] || ''; + this.form.ntp.secondAddress = this.ntpServers[1] || ''; + this.form.ntp.thirdAddress = this.ntpServers[2] || ''; + }, + onChangeConfigType() { + this.$v.form.$reset(); + this.setNtpValues(); + }, + submitForm() { + this.$v.$touch(); + if (this.$v.$invalid) return; + this.startLoader(); + + let dateTimeForm = {}; + let ntpFirstAddress; + let ntpSecondAddress; + let ntpThirdAddress; + let isNTPEnabled = this.form.configurationSelected === 'ntp'; + + if (!isNTPEnabled) { + dateTimeForm.ntpProtocolEnabled = false; + dateTimeForm.updatedDateTime = new Date( + `${this.form.manual.date} ${this.form.manual.time}` + ).toISOString(); + } else { + ntpFirstAddress = this.form.ntp.firstAddress; + ntpSecondAddress = this.form.ntp.secondAddress; + ntpThirdAddress = this.form.ntp.thirdAddress; + dateTimeForm.ntpProtocolEnabled = true; + dateTimeForm.ntpServersArray = [ + ntpFirstAddress, + ntpSecondAddress, + ntpThirdAddress + ]; + } + + this.$store + .dispatch('dateTime/updateDateTimeSettings', dateTimeForm) + .then(success => { + this.successToast(success); + if (!isNTPEnabled) return; + // Shift address up if second address is empty + // to avoid refreshing after delay when updating NTP + if (ntpSecondAddress === '' && ntpThirdAddress !== '') { + this.form.ntp.secondAddress = ntpThirdAddress; + this.form.ntp.thirdAddress = ''; + } + }) + .catch(({ message }) => this.errorToast(message)) + .finally(() => { + this.$v.form.$reset(); + this.endLoader(); + }); + } + } +}; +</script> + +<style lang="scss" scoped> +@import 'src/assets/styles/helpers'; + +.b-form-datepicker { + position: absolute; + right: 0; + top: 0; + z-index: $zindex-dropdown + 1; +} +</style> diff --git a/src/views/Configuration/DateTimeSettings/index.js b/src/views/Configuration/DateTimeSettings/index.js new file mode 100644 index 00000000..c8b5c08f --- /dev/null +++ b/src/views/Configuration/DateTimeSettings/index.js @@ -0,0 +1,2 @@ +import DateTimeSettings from './DateTimeSettings.vue'; +export default DateTimeSettings; |