From a897dd9cb5037f70d8a117d883b4b026ed101082 Mon Sep 17 00:00:00 2001
From: Hermann Blum <hermannsblum@yahoo.de>
Date: Sat, 17 Mar 2018 04:34:20 +0100
Subject: [PATCH] make tableView columns variable and use this for the event
table
---
src/config.json | 1 -
src/events/table.js | 35 ++++++++++++++++++++++++++++++++++-
src/views/tableView.js | 11 +++++++----
3 files changed, 41 insertions(+), 6 deletions(-)
diff --git a/src/config.json b/src/config.json
index aa3ea51..91e7408 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 5b53297..9b3d224 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 f46a3ba..a7ef8ef 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())),
--
GitLab