diff --git a/src/config.json b/src/config.json index aa3ea512d383ddccacc0716cde112ddbf8b397b0..91e740875945e126e5b51c791d31a56674c99ca2 100644 --- a/src/config.json +++ b/src/config.json @@ -31,7 +31,6 @@ }, "tableKeys": [ "title_de", - "location", "time_start", "time_end", "time_register_end", diff --git a/src/events/table.js b/src/events/table.js index 5b53297a03f3b6640919fabcb9103f075a163a7f..9b3d2247f4b679ab6f9c5820a1b10bb755fb3338 100644 --- a/src/events/table.js +++ b/src/events/table.js @@ -4,16 +4,49 @@ import TableView from '../views/tableView'; import DatalistController from '../listcontroller'; +/* Table of all Events + * + * Makes use of the standard TableView + */ + + +function dateFormatter(datestring) { + // converts an API datestring into the standard format 01.01.1990, 10:21 + if (!datestring) return ''; + const date = new Date(datestring); + return date.toLocaleString('de-DE', { + day: '2-digit', + month: '2-digit', + year: '2-digit', + hour: '2-digit', + minute: '2-digit', + }); +} + + export default class EventTable { constructor() { this.ctrl = new DatalistController('events', {}, config.tableKeys); } + getItemData(data) { + return [ + m('div', { style: { width: 'calc(100% - 18em)' } }, data.title_de || data.title_en), + m('div', { style: { width: '9em' } }, dateFormatter(data.time_start)), + m('div', { style: { width: '9em' } }, dateFormatter(data.time_end)), + ]; + } + view() { return m(TableView, { controller: this.ctrl, keys: config.tableKeys, - titles: config.tableKeys.map(key => config.keyDescriptors[key] || key), + tileContent: this.getItemData, + titles: [ + { text: 'Titel', width: 'calc(100% - 18em)' }, + { text: 'Start', width: '9em' }, + { text: 'End', width: '9em' }, + ], onAdd: () => { m.route.set('/newevent'); }, }); } diff --git a/src/views/tableView.js b/src/views/tableView.js index f46a3ba044bc86bd882c7a0847d6fdf09e06a58d..a7ef8ef525c36d4d1d633a10491ed64ba8bfe016 100644 --- a/src/views/tableView.js +++ b/src/views/tableView.js @@ -41,9 +41,10 @@ export default class TableView { * { embedded: { event: 1 } } to a list of eventsignups, * you can display event.title_de as a table key */ - constructor({ attrs: { keys } }) { + constructor({ attrs: { keys, tileContent } }) { this.search = ''; this.tableKeys = keys; + this.tileContent = tileContent; } getItemData(data) { @@ -68,7 +69,7 @@ export default class TableView { onclick() { m.route.set(`/${data._links.self.href}`); }, className: 'tableTile', style: { width: '100%', display: 'flex' }, - }, this.getItemData(data)), + }, this.tileContent ? this.tileContent(data) : this.getItemData(data)), }); } @@ -114,9 +115,11 @@ export default class TableView { content: m( 'div', { style: { width: '100%', display: 'flex' } }, + // Either titles is a list of titles that are distributed equally, + // or it is a list of objects with text and width titles.map(title => m('div', { - style: { width: `${98 / this.tableKeys.length}%` }, - }, title)), + style: { width: title.width || `${98 / this.tableKeys.length}%` }, + }, title.width ? title.text : title)), ), }), m(infinite, controller.infiniteScrollParams(this.item())),