make tableView columns variable and use this for the event table

src/config.json

@@ -31,7 +31,6 @@
         },
         "tableKeys": [
             "title_de",
-            "location",
             "time_start",
             "time_end",
             "time_register_end",

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'); },
     });
   }

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())),