Mobilizon/connector-wordpress
1
0
Fork 0
mirror of https://github.com/dwaxweiler/connector-mobilizon synced 2025-06-05 21:59:25 +02:00
Code Issues Releases Wiki Activity

let frontend dates and times be formatted by backend before sending

Browse Source
This commit is contained in:
Daniel Waxweiler
2025-05-28 10:20:57 +02:00
parent 1c3ea8462e
commit 108e677abe
9 changed files with 54 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
source/connector-mobilizon.php
View File

@ -79,8 +79,6 @@ final class Mobilizon_Connector {
private function load_settings_globally_before_script($scriptName) {
$settings = array(
'locale' => str_replace('_', '-', get_locale()),
'timeZone' => wp_timezone_string(),
'url' => MobilizonConnector\Settings::getUrl()
);
wp_add_inline_script($scriptName, 'var MOBILIZON_CONNECTOR = ' . json_encode($settings), 'before');

87
source/front/date-time-wrapper-test.js
View File

@ -1,87 +0,0 @@
import test from 'ava'
import DateTimeWrapper from './date-time-wrapper.js'
test('#getShortDate usual date', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
t.is(d.getShortDate(), '24/12/2020')
})
test('#getShortDate usual date with timezone string', (t) => {
const d = new DateTimeWrapper({
text: '2020-12-24T16:45:00Z',
timeZone: 'Europe/Rome',
})
t.is(d.getShortDate(), '24/12/2020')
})
test('#getShortDate usual date with fixed offset', (t) => {
const d = new DateTimeWrapper({
text: '2020-12-24T16:45:00Z',
timeZone: 'UTC+02:00',
})
t.is(d.getShortDate(), '24/12/2020')
})
test('#getShortDate usual date with fixed offset without UTC prefix', (t) => {
const d = new DateTimeWrapper({
text: '2020-12-24T16:45:00Z',
timeZone: '+02:00',
})
t.is(d.getShortDate(), '24/12/2020')
})
test('#getShortDate usual date with empty time zone', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z', timeZone: '' })
t.is(d.getShortDate(), '24/12/2020')
})
test('#get24Time usual time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
t.is(d.get24Time(), '16:45')
})
test('#equalsDate same date, different time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
const e = new DateTimeWrapper({ text: '2020-12-24T17:46:01Z' })
t.true(d.equalsDate(e))
})
test('#equalsDate different date, different time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
const e = new DateTimeWrapper({ text: '2021-11-25T17:46:01Z' })
t.false(d.equalsDate(e))
})
test('#equalsDate different day, different time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
const e = new DateTimeWrapper({ text: '2020-12-25T17:46:01Z' })
t.false(d.equalsDate(e))
})
test('#equalsDate different month, different time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
const e = new DateTimeWrapper({ text: '2020-11-24T17:46:01Z' })
t.false(d.equalsDate(e))
})
test('#equalsDate different year, different time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
const e = new DateTimeWrapper({ text: '2021-12-24T17:46:01Z' })
t.false(d.equalsDate(e))
})
test('#getCurrentDatetimeAsString correct format', (t) => {
const d = DateTimeWrapper.getCurrentDatetimeAsString()
t.is(d[4], '-')
t.is(d[7], '-')
t.is(d[10], 'T')
t.is(d[13], ':')
t.is(d[16], ':')
t.is(d[19], '.')
t.is(d[d.length - 3], ':')
})
test('#getShortOffsetName usual time', (t) => {
const d = new DateTimeWrapper({ text: '2020-12-24T16:45:00Z' })
t.is(d.getShortOffsetName(), 'UTC')
})

42
source/front/date-time-wrapper.js
View File

@ -1,42 +0,0 @@
import { DateTime } from 'luxon'
export default class DateTimeWrapper {
constructor({ locale = 'en-GB', text, timeZone = 'utc' } = {}) {
if (!timeZone) {
timeZone = 'utc'
}
if (
timeZone.includes(':') &&
timeZone.substring(0, 3).toUpperCase() !== 'UTC'
) {
timeZone = 'UTC' + timeZone
}
this.dateTime = DateTime.fromISO(text, { locale, zone: timeZone })
}
getShortDate() {
return this.dateTime.toLocaleString(DateTime.DATE_SHORT)
}
getShortOffsetName() {
return this.dateTime.offsetNameShort
}
get24Time() {
return this.dateTime.toLocaleString(DateTime.TIME_24_SIMPLE)
}
equalsDate(other) {
return (
this.dateTime &&
other.dateTime &&
this.dateTime.day === other.dateTime.day &&
this.dateTime.month === other.dateTime.month &&
this.dateTime.year === other.dateTime.year
)
}
static getCurrentDatetimeAsString() {
return DateTime.now().toString()
}
}

4
source/front/events-displayer-test.js
View File

@ -51,6 +51,10 @@ test('#displayEvents one event', (t) => {
description: 'c',
locality: 'd',
},
startDateFormatted: '15/04/2021',
startTimeFormatted: '10:30',
endDateFormatted: '15/04/2021',
endTimeFormatted: '15:30',
},
]
const container = t.context.container

14
source/front/events-displayer.js
View File

@ -9,11 +9,6 @@ export function clearEventsList(container) {
export function displayEvents({ events, document, container, maxEventsCount }) {
hideLoadingIndicator(container)
const isShortOffsetNameShown =
window.MOBILIZON_CONNECTOR.isShortOffsetNameShown || false // TODO remove
const locale = window.MOBILIZON_CONNECTOR.locale
const timeZone = window.MOBILIZON_CONNECTOR.timeZone
const eventsCount = Math.min(maxEventsCount, events.length)
const list = container.querySelector('ul')
for (let i = 0; i < eventsCount; i++) {
@ -43,11 +38,10 @@ export function displayEvents({ events, document, container, maxEventsCount }) {
li.appendChild(br)
const date = Formatter.formatDate({
locale,
start: events[i].beginsOn,
end: events[i].endsOn,
timeZone,
isShortOffsetNameShown,
startDateFormatted: events[i].startDateFormatted,
startTimeFormatted: events[i].startTimeFormatted,
endDateFormatted: events[i].endDateFormatted,
endTimeFormatted: events[i].endTimeFormatted,
})
const textnode = document.createTextNode(date)
li.appendChild(textnode)

45
source/front/formatter-test.js
View File

@ -15,55 +15,34 @@ test('#escapeHTML', (t) => {
test('#formatDate one date', (t) => {
const date = Formatter.formatDate({
start: '2021-04-15T10:30:00Z',
end: '2021-04-15T15:30:00Z',
startDateFormatted: '15/04/2021',
startTimeFormatted: '10:30',
endDateFormatted: '15/04/2021',
endTimeFormatted: '15:30',
})
t.is(date, '15/04/2021 10:30 - 15:30')
})
test('#formatDate one date with short offset name', (t) => {
const date = Formatter.formatDate({
start: '2021-04-15T10:30:00Z',
end: '2021-04-15T15:30:00Z',
isShortOffsetNameShown: true,
})
t.is(date, '15/04/2021 10:30 - 15:30 (UTC)')
})
test('#formatDate two dates', (t) => {
const date = Formatter.formatDate({
start: '2021-04-15T10:30:00Z',
end: '2021-04-16T15:30:00Z',
startDateFormatted: '15/04/2021',
startTimeFormatted: '10:30',
endDateFormatted: '16/04/2021',
endTimeFormatted: '15:30',
})
t.is(date, '15/04/2021 10:30 - 16/04/2021 15:30')
})
test('#formatDate two dates with short offset name', (t) => {
const date = Formatter.formatDate({
start: '2021-04-15T10:30:00Z',
end: '2021-04-16T15:30:00Z',
isShortOffsetNameShown: true,
})
t.is(date, '15/04/2021 10:30 - 16/04/2021 15:30 (UTC)')
})
test('#formatDate second date is null', (t) => {
const date = Formatter.formatDate({
start: '2021-04-15T10:30:00Z',
end: null,
startDateFormatted: '15/04/2021',
startTimeFormatted: '10:30',
endDateFormatted: undefined,
endTimeFormatted: undefined,
})
t.is(date, '15/04/2021 10:30')
})
test('#formatDate second date is null with short offset name', (t) => {
const date = Formatter.formatDate({
start: '2021-04-15T10:30:00Z',
end: null,
isShortOffsetNameShown: true,
})
t.is(date, '15/04/2021 10:30 (UTC)')
})
test('#formatLocation both parameters', (t) => {
const location = Formatter.formatLocation({ description: 'a', locality: 'b' })
t.is(location, 'a, b')

35
source/front/formatter.js
View File

@ -1,5 +1,3 @@
import DateTimeWrapper from './date-time-wrapper.js'
export default class Formatter {
static escapeHTML(input) {
const div = document.createElement('div')
@ -7,31 +5,22 @@ export default class Formatter {
return div.innerHTML
}
static formatDate({ locale, timeZone, start, end, isShortOffsetNameShown }) {
// TODO also use WP general site settings
const startDateTime = new DateTimeWrapper({
locale,
text: start,
timeZone,
})
let dateText = startDateTime.getShortDate()
dateText += ' ' + startDateTime.get24Time()
if (!end && isShortOffsetNameShown) {
dateText += ' (' + startDateTime.getShortOffsetName() + ')'
}
if (end) {
const endDateTime = new DateTimeWrapper({ locale, text: end, timeZone })
if (!startDateTime.equalsDate(endDateTime)) {
static formatDate({
startDateFormatted,
startTimeFormatted,
endDateFormatted,
endTimeFormatted,
}) {
let dateText = startDateFormatted
dateText += ' ' + startTimeFormatted
if (endDateFormatted) {
if (startDateFormatted !== endDateFormatted) {
dateText += ' - '
dateText += endDateTime.getShortDate() + ' '
dateText += endDateFormatted + ' '
} else {
dateText += ' - '
}
dateText += endDateTime.get24Time()
if (isShortOffsetNameShown) {
dateText += ' (' + endDateTime.getShortOffsetName() + ')'
}
dateText += endTimeFormatted
}
return dateText
}

18
source/includes/Api.php
View File

@ -43,6 +43,7 @@ class Api {
} else {
$events = GraphQlClient::get_upcoming_events($url, (int) $eventsCount);
}
$events = array_map([self::class, 'addDateAndTimeFormats'], $events);
return $events;
} catch (GeneralException $e) {
return new \WP_Error('events_not_loading', 'The events could not be loaded!', array('status' => 500));
@ -50,4 +51,21 @@ class Api {
return new \WP_Error('group_not_found', sprintf('The group "%s" could not be found!', $groupName), array('status' => 404));
}
}
public static function addDateAndTimeFormats($event) {
$dateFormat = SiteSettings::getDateFormat();
$timeFormat = SiteSettings::getTimeFormat();
$timeZone = SiteSettings::getTimeZone();
$startDateTime = new LocalDateTime($event['beginsOn'], $timeZone);
$event['startDateFormatted'] = LocalDateTimeFormatter::format($startDateTime, $dateFormat);
$event['startTimeFormatted'] = LocalDateTimeFormatter::format($startDateTime, $timeFormat);
if ($event['endsOn']) {
$endDateTime = new LocalDateTime($event['endsOn'], $timeZone);
$event['endDateFormatted'] = LocalDateTimeFormatter::format($endDateTime, $dateFormat);
$event['endTimeFormatted'] = LocalDateTimeFormatter::format($endDateTime, $timeFormat);
}
return $event;
}
}

4
source/includes/SiteSettings.php
View File

@ -18,4 +18,8 @@ class SiteSettings {
return wp_timezone();
}
public static function getTimeZoneString() {
return wp_timezone_string();
}
}