add option to show events of a specific group by indicating its name

source/connector-mobilizon/changelog.txt

@@ -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

source/connector-mobilizon/front/date-time-wrapper-test.js

@@ -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], ':')
+})

source/connector-mobilizon/front/date-time-wrapper.js

@@ -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();
+  }
 }

source/connector-mobilizon/front/events-loader.js

@@ -4,59 +4,56 @@ import * as HtmlCreator from './html-creator'
 
 const NAME = '<wordpress-name>';
 
-function displayEvents(data, lists) {
+function displayEvents(data, list) {
-  for (let list of lists) {
+  const maxEventsCount = list.getAttribute('data-maximum')
-    const maxEventsCount = list.getAttribute('data-maximum')
+  const events = data.events ? data.events.elements : data.group.organizedEvents.elements
-    const events = data.events.elements
+  const eventsCount = Math.min(maxEventsCount, events.length)
-    const eventsCount = Math.min(maxEventsCount, events.length)
+  for (let i = 0; i < eventsCount; i++) {
-    for (let i = 0; i < eventsCount; i++) {
+    const li = document.createElement('li')
-      const li = document.createElement('li')
+    
-      
+    const a = HtmlCreator.createAnchorElement({ text: events[i].title, url: events[i].url });
-      const a = HtmlCreator.createAnchorElement({ text: events[i].title, url: events[i].url });
+    li.appendChild(a)
-      li.appendChild(a)
 
-      const br = document.createElement('br')
+    const br = document.createElement('br')
-      li.appendChild(br)
+    li.appendChild(br)
 
-      const beginsOn = new DateTimeWrapper(events[i].beginsOn)
+    const beginsOn = new DateTimeWrapper(events[i].beginsOn)
-      const endsOn = new DateTimeWrapper(events[i].endsOn)
+    const endsOn = new DateTimeWrapper(events[i].endsOn)
-      let dateText = beginsOn.getShortDate()
+    let dateText = beginsOn.getShortDate()
-      dateText += ' ' + beginsOn.get24Time()
+    dateText += ' ' + beginsOn.get24Time()
-      dateText += ' - '
+    dateText += ' - '
-      if (!beginsOn.equalsDate(endsOn)) {
+    if (!beginsOn.equalsDate(endsOn)) {
-          dateText += endsOn.getShortDate() + ' '
+        dateText += endsOn.getShortDate() + ' '
-      }
-      dateText += endsOn.get24Time()
-      const textnode = document.createTextNode(dateText);
-      li.appendChild(textnode)
-
-      list.appendChild(li)
     }
+    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++) {
-    for (let i = 0; i < list.children.length; i++) {
+    list.children[i].style.display = 'block'
-      list.children[i].style.display = 'block'
-    }
   }
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-  const eventLists = document.getElementsByClassName(NAME + '_events-list');
+  const eventLists = document.getElementsByClassName(NAME + '_events-list')
-  if (eventLists.length) {
+  for (let list of eventLists) {
-    // Currently, the URL is the same for all widgets, so just take the first one.
+    const url = list.getAttribute('data-url') + '/api'
-    const url = eventLists[0].getAttribute('data-url') + '/api';
+    const limit = list.getAttribute('data-maximum')
-
+    const groupName = list.getAttribute('data-group-name')
-    let maxEventsCount = 0
+    if (groupName) {
-    for (let list of eventLists) {
+      GraphqlWrapper.getUpcomingEventsByGroupName({ url, limit, groupName })
-      maxEventsCount = Math.max(maxEventsCount, list.getAttribute('data-maximum'))
+        .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))
   }
 })

source/connector-mobilizon/front/graphql-wrapper.js

@@ -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)
+}

source/connector-mobilizon/includes/events-list-shortcut.php

@@ -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;
 

source/connector-mobilizon/includes/events-list-widget.php

@@ -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;
   }
 }

source/connector-mobilizon/readme.txt

@@ -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).
 

source/connector-mobilizon/view/events-list-widget/form.php

@@ -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>

source/connector-mobilizon/view/events-list.php

@@ -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>