add option to show events of a specific group by indicating its name
This commit is contained in:
parent
47945372f9
commit
4dfeabcb84
|
@ -3,6 +3,7 @@ Added
|
|||
- Add `changelog.txt`
|
||||
- Add changelog maintenance steps to `README.md`
|
||||
- Add link to Github repository to `readme.txt`
|
||||
- Add option to show events of a specific group by indicating its name
|
||||
Changed
|
||||
- Use same Markdown style in `README.md` as in other documents
|
||||
Deprecated
|
||||
|
|
|
@ -40,3 +40,14 @@ test('#equalsDate different year, different time', t => {
|
|||
const e = new DateTimeWrapper('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], ':')
|
||||
})
|
||||
|
|
|
@ -21,4 +21,8 @@ export class DateTimeWrapper {
|
|||
this.dateTime.month === other.dateTime.month &&
|
||||
this.dateTime.year === other.dateTime.year
|
||||
}
|
||||
|
||||
static getCurrentDatetimeAsString() {
|
||||
return DateTime.local().toString();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,59 +4,56 @@ import * as HtmlCreator from './html-creator'
|
|||
|
||||
const NAME = '<wordpress-name>';
|
||||
|
||||
function displayEvents(data, lists) {
|
||||
for (let list of lists) {
|
||||
const maxEventsCount = list.getAttribute('data-maximum')
|
||||
const events = data.events.elements
|
||||
const eventsCount = Math.min(maxEventsCount, events.length)
|
||||
for (let i = 0; i < eventsCount; i++) {
|
||||
const li = document.createElement('li')
|
||||
|
||||
const a = HtmlCreator.createAnchorElement({ text: events[i].title, url: events[i].url });
|
||||
li.appendChild(a)
|
||||
function displayEvents(data, list) {
|
||||
const maxEventsCount = list.getAttribute('data-maximum')
|
||||
const events = data.events ? data.events.elements : data.group.organizedEvents.elements
|
||||
const eventsCount = Math.min(maxEventsCount, events.length)
|
||||
for (let i = 0; i < eventsCount; i++) {
|
||||
const li = document.createElement('li')
|
||||
|
||||
const a = HtmlCreator.createAnchorElement({ text: events[i].title, url: events[i].url });
|
||||
li.appendChild(a)
|
||||
|
||||
const br = document.createElement('br')
|
||||
li.appendChild(br)
|
||||
const br = document.createElement('br')
|
||||
li.appendChild(br)
|
||||
|
||||
const beginsOn = new DateTimeWrapper(events[i].beginsOn)
|
||||
const endsOn = new DateTimeWrapper(events[i].endsOn)
|
||||
let dateText = beginsOn.getShortDate()
|
||||
dateText += ' ' + beginsOn.get24Time()
|
||||
dateText += ' - '
|
||||
if (!beginsOn.equalsDate(endsOn)) {
|
||||
dateText += endsOn.getShortDate() + ' '
|
||||
}
|
||||
dateText += endsOn.get24Time()
|
||||
const textnode = document.createTextNode(dateText);
|
||||
li.appendChild(textnode)
|
||||
|
||||
list.appendChild(li)
|
||||
const beginsOn = new DateTimeWrapper(events[i].beginsOn)
|
||||
const endsOn = new DateTimeWrapper(events[i].endsOn)
|
||||
let dateText = beginsOn.getShortDate()
|
||||
dateText += ' ' + beginsOn.get24Time()
|
||||
dateText += ' - '
|
||||
if (!beginsOn.equalsDate(endsOn)) {
|
||||
dateText += endsOn.getShortDate() + ' '
|
||||
}
|
||||
dateText += endsOn.get24Time()
|
||||
const textnode = document.createTextNode(dateText);
|
||||
li.appendChild(textnode)
|
||||
|
||||
list.appendChild(li)
|
||||
}
|
||||
}
|
||||
|
||||
function displayErrorMessage(data, lists) {
|
||||
function displayErrorMessage(data, list) {
|
||||
console.error(data)
|
||||
for (let list of lists) {
|
||||
for (let i = 0; i < list.children.length; i++) {
|
||||
list.children[i].style.display = 'block'
|
||||
}
|
||||
for (let i = 0; i < list.children.length; i++) {
|
||||
list.children[i].style.display = 'block'
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const eventLists = document.getElementsByClassName(NAME + '_events-list');
|
||||
if (eventLists.length) {
|
||||
// Currently, the URL is the same for all widgets, so just take the first one.
|
||||
const url = eventLists[0].getAttribute('data-url') + '/api';
|
||||
|
||||
let maxEventsCount = 0
|
||||
for (let list of eventLists) {
|
||||
maxEventsCount = Math.max(maxEventsCount, list.getAttribute('data-maximum'))
|
||||
const eventLists = document.getElementsByClassName(NAME + '_events-list')
|
||||
for (let list of eventLists) {
|
||||
const url = list.getAttribute('data-url') + '/api'
|
||||
const limit = list.getAttribute('data-maximum')
|
||||
const groupName = list.getAttribute('data-group-name')
|
||||
if (groupName) {
|
||||
GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
|
||||
.then((data) => displayEvents(data, list))
|
||||
.catch((data) => displayErrorMessage(data, list))
|
||||
} else {
|
||||
GraphqlWrapper.getUpcomingEvents({ url, limit })
|
||||
.then((data) => displayEvents(data, list))
|
||||
.catch((data) => displayErrorMessage(data, list))
|
||||
}
|
||||
|
||||
GraphqlWrapper.getEvents({ url, limit: maxEventsCount })
|
||||
.then((data) => displayEvents(data, eventLists))
|
||||
.catch((data) => displayErrorMessage(data, eventLists))
|
||||
}
|
||||
})
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { request, gql } from 'graphql-request'
|
||||
import { DateTimeWrapper } from './date-time-wrapper'
|
||||
|
||||
export function getEvents({ url, limit }) {
|
||||
export function getUpcomingEvents({ url, limit }) {
|
||||
const query = gql`
|
||||
query {
|
||||
events(limit:${limit}) {
|
||||
|
@ -17,3 +18,24 @@ export function getEvents({ url, limit }) {
|
|||
`
|
||||
return request(url, query)
|
||||
}
|
||||
|
||||
export function getUpcomingEventsByGroupName({ url, limit, groupName }) {
|
||||
const afterDatetime = DateTimeWrapper.getCurrentDatetimeAsString();
|
||||
const query = gql`
|
||||
query {
|
||||
group(preferredUsername:"${groupName}") {
|
||||
organizedEvents(afterDatetime:"${afterDatetime}", limit:${limit}) {
|
||||
elements {
|
||||
id,
|
||||
title,
|
||||
url,
|
||||
beginsOn,
|
||||
endsOn
|
||||
},
|
||||
total
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
return request(url, query)
|
||||
}
|
||||
|
|
|
@ -20,11 +20,13 @@ class EventsListShortcut {
|
|||
$atts_with_overriden_defaults = shortcode_atts(
|
||||
array(
|
||||
'events-count' => DEFAULT_EVENTS_COUNT,
|
||||
'group-name' => '',
|
||||
), $atts
|
||||
);
|
||||
|
||||
$classNamePrefix = NAME;
|
||||
$eventsCount = $atts_with_overriden_defaults['events-count'];
|
||||
$groupName = $atts_with_overriden_defaults['group-name'];
|
||||
$url = Settings::getUrl();
|
||||
$textDomain = TEXT_DOMAIN;
|
||||
|
||||
|
|
|
@ -27,6 +27,7 @@ class EventsListWidget extends \WP_Widget {
|
|||
|
||||
$classNamePrefix = NAME;
|
||||
$eventsCount = $options['eventsCount'];
|
||||
$groupName = isset($options['groupName']) ? $options['groupName'] : '';
|
||||
$url = Settings::getUrl();
|
||||
$textDomain = TEXT_DOMAIN;
|
||||
|
||||
|
@ -38,6 +39,7 @@ class EventsListWidget extends \WP_Widget {
|
|||
public function form($options) {
|
||||
$title = !empty($options['title']) ? $options['title'] : esc_html__('Events', TEXT_DOMAIN);
|
||||
$eventsCount = !empty($options['eventsCount']) ? $options['eventsCount'] : DEFAULT_EVENTS_COUNT;
|
||||
$groupName = !empty($options['groupName']) ? $options['groupName'] : '';
|
||||
$textDomain = TEXT_DOMAIN;
|
||||
|
||||
require dirname(__DIR__) . '/view/events-list-widget/form.php';
|
||||
|
@ -50,6 +52,7 @@ class EventsListWidget extends \WP_Widget {
|
|||
$options = array();
|
||||
$options['title'] = !empty($new_options['title']) ? sanitize_text_field($new_options['title']) : '';
|
||||
$options['eventsCount'] = !empty($new_options['eventsCount']) ? sanitize_text_field($new_options['eventsCount']) : 5;
|
||||
$options['groupName'] = !empty($new_options['groupName']) ? sanitize_text_field($new_options['groupName']) : '';
|
||||
return $options;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -16,6 +16,7 @@ License: <wordpress-license>
|
|||
You can display the upcoming events using a widget and everywhere else using a shortcut.
|
||||
|
||||
Shortcut format with limiting the number of events to show to 3 for example: `[<wordpress-name>-events-list events-count=3]`
|
||||
Optionally, you can only show the events of a specific group by indicatings its name: `[<wordpress-name>-events-list events-count=3 group-name="mygroup"]
|
||||
|
||||
The source code is available on [Github](https://github.com/dwaxweiler/connector-mobilizon).
|
||||
|
||||
|
|
|
@ -12,3 +12,7 @@ if (!defined('ABSPATH')) {
|
|||
<label for="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>"><?php esc_attr_e('Number of events to show', $textDomain); ?>:</label>
|
||||
<input class="tiny-text" id="<?php echo esc_attr($this->get_field_id('eventsCount')); ?>" name="<?php echo esc_attr($this->get_field_name('eventsCount')); ?>" type="number" value="<?php echo esc_attr($eventsCount); ?>" min="1">
|
||||
</p>
|
||||
<p>
|
||||
<label for="<?php echo esc_attr($this->get_field_id('groupName')); ?>"><?php esc_attr_e('Group name (optional)', $textDomain); ?>:</label>
|
||||
<input class="widefat" id="<?php echo esc_attr($this->get_field_id('groupName')); ?>" name="<?php echo esc_attr($this->get_field_name('groupName')); ?>" type="text" value="<?php echo esc_attr($groupName); ?>">
|
||||
</p>
|
||||
|
|
|
@ -5,7 +5,8 @@ if (!defined('ABSPATH')) {
|
|||
}
|
||||
?>
|
||||
<ul class="<?php echo esc_attr($classNamePrefix); ?>_events-list"
|
||||
data-url="<?php echo esc_attr($url); ?>"
|
||||
data-maximum="<?php echo esc_attr($eventsCount); ?>"
|
||||
data-url="<?php echo esc_attr($url); ?>">
|
||||
data-group-name="<?php echo esc_attr($groupName); ?>">
|
||||
<li style="display: none;"><?php echo esc_html_e('The events could not be loaded!', $textDomain); ?></li>
|
||||
</ul>
|
||||
|
|
Loading…
Reference in New Issue