diff options
| -rw-r--r-- | src/components/Mixins/LocalTimezoneLabelMixin.js | 14 | ||||
| -rw-r--r-- | src/locales/en-US.json | 7 | ||||
| -rw-r--r-- | src/views/Configuration/DateTimeSettings/DateTimeSettings.vue | 27 | ||||
| -rw-r--r-- | src/views/ProfileSettings/ProfileSettings.vue | 14 |
4 files changed, 49 insertions, 13 deletions
diff --git a/src/components/Mixins/LocalTimezoneLabelMixin.js b/src/components/Mixins/LocalTimezoneLabelMixin.js new file mode 100644 index 00000000..0f96a45f --- /dev/null +++ b/src/components/Mixins/LocalTimezoneLabelMixin.js @@ -0,0 +1,14 @@ +import { format } from 'date-fns-tz'; + +const LocalTimezoneLabelMixin = { + methods: { + localOffset() { + const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; + const shortTz = this.$options.filters.shortTimeZone(new Date()); + const pattern = `'${shortTz}' O`; + return format(new Date(), pattern, { timezone }).replace('GMT', 'UTC'); + } + } +}; + +export default LocalTimezoneLabelMixin; diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 63c75367..fa00c86e 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -134,12 +134,15 @@ "alert": { "message": "To change how date and time are displayed (either UTC or browser offset) throughout the application, visit ", "link": "Profile Settings" - }, + }, "configureSettings": "Configure settings", "form": { "date": "Date", "manual": "Manual", - "time": "Time", + "time": { + "label": "24-hour time", + "timezone": "@:pageDateTimeSettings.form.time.label (%{timezone})" + }, "ntpServers": { "server1": "Server 1", "server2": "Server 2", diff --git a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue index f1b64751..3d9dc3b6 100644 --- a/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue +++ b/src/views/Configuration/DateTimeSettings/DateTimeSettings.vue @@ -24,7 +24,7 @@ </b-col> <b-col lg="3"> <dl> - <dt>{{ $t('pageDateTimeSettings.form.time') }}</dt> + <dt>{{ $t('pageDateTimeSettings.form.time.label') }}</dt> <dd v-if="bmcTime">{{ bmcTime | formatTime }}</dd> <dd v-else>--</dd> </dl> @@ -52,7 +52,7 @@ :label="$t('pageDateTimeSettings.form.date')" label-for="input-manual-date" > - <b-form-text id="date-format-help">(YYYY-MM-DD)</b-form-text> + <b-form-text id="date-format-help">YYYY-MM-DD</b-form-text> <b-input-group> <b-form-input id="input-manual-date" @@ -96,10 +96,12 @@ </b-col> <b-col sm="6" lg="4" xl="3"> <b-form-group - :label="$t('pageDateTimeSettings.form.time')" + :label=" + $t('pageDateTimeSettings.form.time.timezone', { timezone }) + " label-for="input-manual-time" > - <b-form-text id="time-format-help">(HH:MM)</b-form-text> + <b-form-text id="time-format-help">HH:MM</b-form-text> <b-input-group> <b-form-input id="input-manual-time" @@ -206,6 +208,7 @@ import PageSection from '@/components/Global/PageSection'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin'; import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; import { mapState } from 'vuex'; @@ -217,7 +220,12 @@ 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], + mixins: [ + BVToastMixin, + LoadingBarMixin, + LocalTimezoneLabelMixin, + VuelidateMixin + ], data() { return { locale: this.$store.getters['global/languagePreference'], @@ -264,6 +272,15 @@ export default { ...mapState('dateTime', ['ntpServers', 'isNtpProtocolEnabled']), bmcTime() { return this.$store.getters['global/bmcTime']; + }, + isUtcDisplay() { + return this.$store.getters['global/isUtcDisplay']; + }, + timezone() { + if (this.isUtcDisplay) { + return 'UTC'; + } + return this.localOffset(); } }, watch: { diff --git a/src/views/ProfileSettings/ProfileSettings.vue b/src/views/ProfileSettings/ProfileSettings.vue index 81ea7b67..dee8d399 100644 --- a/src/views/ProfileSettings/ProfileSettings.vue +++ b/src/views/ProfileSettings/ProfileSettings.vue @@ -131,7 +131,6 @@ import i18n from '@/i18n'; import BVToastMixin from '@/components/Mixins/BVToastMixin'; import InputPasswordToggle from '@/components/Global/InputPasswordToggle'; -import { format } from 'date-fns-tz'; import { maxLength, minLength, @@ -139,6 +138,7 @@ import { sameAs } from 'vuelidate/lib/validators'; import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin'; +import LocalTimezoneLabelMixin from '@/components/Mixins/LocalTimezoneLabelMixin'; import PageTitle from '@/components/Global/PageTitle'; import PageSection from '@/components/Global/PageSection'; import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; @@ -146,7 +146,12 @@ import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js'; export default { name: 'ProfileSettings', components: { InputPasswordToggle, PageSection, PageTitle }, - mixins: [BVToastMixin, LoadingBarMixin, VuelidateMixin], + mixins: [ + BVToastMixin, + LocalTimezoneLabelMixin, + LoadingBarMixin, + VuelidateMixin + ], data() { return { form: { @@ -164,10 +169,7 @@ export default { return this.$store.getters['localUsers/accountPasswordRequirements']; }, timezone() { - const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; - const shortTz = this.$options.filters.shortTimeZone(new Date()); - const pattern = `'${shortTz}' O`; - return format(new Date(), pattern, { timezone }).replace('GMT', 'UTC'); + return this.localOffset(); } }, created() { |