To receive notifications about scheduled maintenance, please subscribe to the mailing-list gitlab-operations@sympa.ethz.ch. You can subscribe to the mailing-list at https://sympa.ethz.ch

Commit 3f3883fb authored by scmoritz's avatar scmoritz
Browse files

Consistent usage of DateTimeFormatter

Fix #116
parent 0a820aeb
......@@ -98,4 +98,118 @@ function i18n(key, values = null) {
return i18next.t(key);
}
export { i18n, changeLanguage, currentLanguage, currentLocale, loadLanguage, isLanguageValid };
const dateFormatOptions = {
hour: 'numeric',
minute: 'numeric',
hour12: false,
timeZone: 'Europe/Zurich',
};
// Note that we need seperate objects for the different languages
// (or they would need to be reinitialized on language change)
const dateFormatter = {
en: {
short: new Intl.DateTimeFormat('en-GB', {
...dateFormatOptions,
timeZoneName: 'short',
}),
weekday: new Intl.DateTimeFormat('en-GB', {
...dateFormatOptions,
year: 'numeric',
month: 'numeric',
day: 'numeric',
weekday: 'long',
}),
weekdayTimezone: new Intl.DateTimeFormat('en-GB', {
...dateFormatOptions,
year: 'numeric',
month: 'numeric',
day: 'numeric',
weekday: 'long',
timeZoneName: 'short',
}),
},
de: {
short: new Intl.DateTimeFormat('de-DE', {
...dateFormatOptions,
timeZoneName: 'short',
}),
weekday: new Intl.DateTimeFormat('de-DE', {
...dateFormatOptions,
year: 'numeric',
month: 'numeric',
day: 'numeric',
weekday: 'long',
}),
weekdayTimezone: new Intl.DateTimeFormat('de-DE', {
...dateFormatOptions,
year: 'numeric',
month: 'numeric',
day: 'numeric',
weekday: 'long',
timeZoneName: 'short',
}),
},
};
/**
* Format date
*
* @param {Date} date
*
* @return formatted date in a {string}
*/
function formatDate(date) {
// check if the dates are valid
if (date instanceof Date && !Number.isNaN(date.valueOf())) {
return dateFormatter[i18next.language].weekdayTimezone.format(date);
}
return {};
}
/**
* Format duration between `start_date` and `end_date`
*
* @param {Date} date_start
* @param {Date} date_end
*
* @return formatted dates in a list of strings
*/
function formatDateDuration(date_start, date_end) {
// check if the dates are valid
if (
date_start instanceof Date &&
!Number.isNaN(date_start.valueOf()) &&
date_end instanceof Date &&
!Number.isNaN(date_end.valueOf())
) {
if (
date_start.getDate() === date_end.getDate() ||
(date_start.getDate() === date_end.getDate() - 1 &&
date_start.getHours() > date_end.getHours())
) {
return [
dateFormatter[i18next.language].weekday.format(date_start),
dateFormatter[i18next.language].short.format(date_end),
];
}
return [
dateFormatter[i18next.language].weekday.format(date_start),
dateFormatter[i18next.language].weekdayTimezone.format(date_end),
];
}
return [];
}
export {
i18n,
changeLanguage,
currentLanguage,
currentLocale,
loadLanguage,
isLanguageValid,
formatDate,
formatDateDuration,
};
......@@ -10,7 +10,7 @@ import { log } from '../../models/log';
import { isLoggedIn, login } from '../../models/auth';
import Button from '../../components/Button';
import ActionBar from '../../components/ActionBar';
import { i18n, currentLocale, currentLanguage } from '../../models/language';
import { i18n, currentLanguage, formatDate } from '../../models/language';
import icons from '../../images/icons';
import { copyToClipboard } from '../../utils';
......@@ -171,17 +171,7 @@ export default class EventDetails {
} else {
eventSignupForm = m('div', [
m('p', i18n('events.registration.startsAt')),
m(
'p.colored',
registerStart.toLocaleString(currentLocale(), {
weekday: 'long',
day: '2-digit',
month: '2-digit',
year: '2-digit',
hour: '2-digit',
minute: '2-digit',
})
),
m('p.colored', formatDate(registerStart)),
]);
}
......
......@@ -3,7 +3,7 @@ import { apiUrl } from 'config';
import ExpansionPanel from 'amiv-web-ui-components/src/expansionPanel';
import Spinner from 'amiv-web-ui-components/src/spinner';
import logos from '../../images/logos';
import { i18n, currentLocale } from '../../models/language';
import { i18n, formatDateDuration } from '../../models/language';
import { EventController } from '../../models/events';
import { FilteredListPage, FilteredListDataStore } from '../filteredListPage';
import EventCalendar from './eventCalendar';
......@@ -11,32 +11,6 @@ import EventCalendar from './eventCalendar';
const controller = new EventController({}, true);
const dataStore = new FilteredListDataStore();
const dateFormatOptions = {
hour: 'numeric',
minute: 'numeric',
hour12: false,
timeZone: 'Europe/Zurich',
};
const dateFormatter = new Intl.DateTimeFormat(currentLocale, {
...dateFormatOptions,
timeZoneName: 'short',
});
const dateFormatterWeekday = new Intl.DateTimeFormat(currentLocale, {
...dateFormatOptions,
year: 'numeric',
month: 'numeric',
day: 'numeric',
weekday: 'long',
});
const dateFormatterWeekdayTimezone = new Intl.DateTimeFormat(currentLocale, {
...dateFormatOptions,
year: 'numeric',
month: 'numeric',
day: 'numeric',
weekday: 'long',
timeZoneName: 'short',
});
let eventDetailsModule;
/**
......@@ -282,33 +256,11 @@ export default class EventList extends FilteredListPage {
const date_start = new Date(time_start);
const date_end = new Date(time_end);
// check if the dates are valid
if (
date_start instanceof Date &&
!Number.isNaN(date_start.valueOf()) &&
date_end instanceof Date &&
!Number.isNaN(date_end.valueOf())
) {
if (
date_start.getDate() === date_end.getDate() ||
(date_start.getDate() === date_end.getDate() - 1 &&
date_start.getHours() > date_end.getHours())
) {
return [
m('span', dateFormatterWeekday.format(date_start)),
'',
m('span', dateFormatter.format(date_end)),
];
}
return [
m('span', dateFormatterWeekday.format(date_start)),
'',
m('span', dateFormatterWeekdayTimezone.format(date_end)),
];
const dates = formatDateDuration(date_start, date_end);
if (dates.length === 2) {
return [m('span', dates[0]), '', m('span', dates[1])];
}
// Do not display anything if no date is set
return {};
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment