first commit

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

@@ -0,0 +1,42 @@
+import test from 'ava';
+import { DateTimeWrapper } from './date-time-wrapper';
+
+test('#getShortDate usual date', t => {
+  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
+  t.is(d.getShortDate(), '24/12/2020')
+})
+
+test('#get24Time usual time', t => {
+  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
+  t.is(d.get24Time(), '17:45')
+})
+
+test('#equalsDate same date, different time', t => {
+  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
+  const e = new DateTimeWrapper('2020-12-24T17:46:01Z')
+  t.true(d.equalsDate(e))
+})
+
+test('#equalsDate different date, different time', t => {
+  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
+  const e = new DateTimeWrapper('2021-11-25T17:46:01Z')
+  t.false(d.equalsDate(e))
+})
+
+test('#equalsDate different day, different time', t => {
+  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
+  const e = new DateTimeWrapper('2020-12-25T17:46:01Z')
+  t.false(d.equalsDate(e))
+})
+
+test('#equalsDate different month, different time', t => {
+  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
+  const e = new DateTimeWrapper('2020-11-24T17:46:01Z')
+  t.false(d.equalsDate(e))
+})
+
+test('#equalsDate different year, different time', t => {
+  const d = new DateTimeWrapper('2020-12-24T16:45:00Z')
+  const e = new DateTimeWrapper('2021-12-24T17:46:01Z')
+  t.false(d.equalsDate(e))
+})

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

@@ -0,0 +1,24 @@
+import { DateTime } from 'luxon';
+
+export class DateTimeWrapper {
+
+  constructor(text) {
+    this.dateTime = DateTime.fromISO(text)
+  }
+
+  getShortDate() {
+    return this.dateTime.toLocaleString(DateTime.DATE_SHORT)
+  }
+
+  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
+  }
+}

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

@@ -0,0 +1,62 @@
+import { DateTimeWrapper } from './date-time-wrapper';
+import * as GraphqlWrapper from './graphql-wrapper'
+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)
+
+      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)
+    }
+  }
+}
+
+function displayErrorMessage(data, lists) {
+  console.error(data)
+  for (let list of lists) {
+    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'))
+    }
+
+    GraphqlWrapper.getEvents({ url, limit: maxEventsCount })
+      .then((data) => displayEvents(data, eventLists))
+      .catch((data) => displayErrorMessage(data, eventLists))
+  }
+})

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

@@ -0,0 +1,19 @@
+import { request, gql } from 'graphql-request'
+
+export function getEvents({ url, limit }) {  
+  const query = gql`
+  query {
+    events(limit:${limit}) {
+      elements {
+        id,
+        title,
+        url,
+        beginsOn,
+        endsOn
+      },
+      total
+    }
+  }
+  `
+  return request(url, query)
+}

source/connector-mobilizon/front/html-creator-test.js

@@ -0,0 +1,15 @@
+import test from 'ava';
+import { JSDOM } from 'jsdom';
+
+import * as HtmlCreator from './html-creator';
+
+test.beforeEach(() => {
+  global.document = new JSDOM().window.document
+})
+
+test('createAnchorElement() usual parameters', t => {
+  const a = HtmlCreator.createAnchorElement({ text: 'a', url: 'b' })
+  t.is(a.tagName, 'A')
+  t.is(a.innerHTML, 'a')
+	t.is(a.getAttribute('href'), 'b')
+})

source/connector-mobilizon/front/html-creator.js

@@ -0,0 +1,7 @@
+export function createAnchorElement({ text, url }) {
+  const a = document.createElement('a')
+  a.setAttribute('href', url)
+  a.setAttribute('target', '_blank')
+  a.innerHTML = text
+  return a
+}