src/localStorage.js

@@ -34,4 +34,3 @@ export function set(key, value, shortSession = false) {
     window.localStorage.setItem(`glob-${key}`, value);
   }
 }
-

src/membershipTool.js

+import m from 'mithril';
 import EditView from './views/editView';
-import SelectList from './views/selectList';
 
-const m = require('mithril');
-
-export class MembershipView extends EditView {
+export default class MembershipView extends EditView {
   constructor(vnode) {
     super(vnode, 'groupmemberships', { user: 1, group: 1 });
   }
@@ -23,17 +21,3 @@ export class MembershipView extends EditView {
     ]);
   }
 }
-
-export class NewMembership {
-  constructor() {
-    this.selectUser = new SelectList('users', ['firstname', 'lastname'], {
-      view(vnode) {
-        return m('span', `${vnode.attrs.firstname} ${vnode.attrs.lastname}`);
-      },
-    });
-  }
-
-  view() {
-    return m(this.selectUser);
-  }
-}

src/networkConfig.dev.json

 {
   "apiUrl": "https://api-dev.amiv.ethz.ch",
   "ownUrl": "https://admin-dev.amiv.ethz.ch",
-  "oAuthID": "AMIV Admintool"
+  "hookUrl": "https://webhooks.amiv.ethz.ch/hook/websitepipeline",
+  "oAuthID": "AMIV Admintool Dev"
 }

src/networkConfig.json

 {
   "apiUrl": "https://api-dev.amiv.ethz.ch",
   "ownUrl": "http://localhost:9000",
+  "hookUrl": "http://0.0.0.0:5000/hook/websitepipeline",
   "oAuthID": "Local Tool"
 }

src/networkConfig.local.json

+{
+  "apiUrl": "http://127.0.0.1:5000",
+  "ownUrl": "http://localhost:9000",
+  "hookUrl": "http://0.0.0.0:6000/hook/websitepipeline",
+  "oAuthID": "Local Tool"
+}

src/networkConfig.prod.json

 {
   "apiUrl": "https://api.amiv.ethz.ch",
   "ownUrl": "https://admin.amiv.ethz.ch",
-  "oAuthID": "Admintools"
+  "hookUrl": "https://webhooks.amiv.ethz.ch/hook/websitepipeline",
+  "oAuthID": "AMIV Admintool"
 }

src/networkConfig.staging.json

+{
+  "apiUrl": "https://api-staging.amiv.ethz.ch",
+  "ownUrl": "https://admin-staging.amiv.ethz.ch",
+  "hookUrl": "https://webhooks.amiv.ethz.ch/hook/websitepipeline",
+  "oAuthID": "AMIV Admintool Staging"
+}

src/relationlistcontroller.js

+import m from 'mithril';
+import Stream from 'mithril/stream';
+import { ResourceHandler } from './auth';
+import { debounce } from './utils';
+// IS NOT IN USE
+// IS NOT IN USE
+// IS NOT IN USE
+// IS NOT IN USE
+// IS NOT IN USE
+
+// IS NOT IN USE
+// IS NOT IN USE
+// IS NOT IN USE
+// IS NOT IN USE
+// IS NOT IN USE
+export default class RelationlistController {
+  /*
+   * Controller for a list of data embedding a relationship.
+   * The secondary api endpoint is embedded into the list items of the primary endpoint results.
+   * Searches are applied to both resources, queries and filters need to be specified for each.
+   *
+   * @param {bool} includeWithoutRelation - Specifies what to do in case the relation is undefined.
+   *   By default, such items are excluded, if true they will be included into the list.
+   */
+  constructor({
+    primary,
+    secondary,
+    query = {},
+    searchKeys = [],
+    secondaryQuery = {},
+    secondarySearchKeys = [],
+    includeWithoutRelation = false,
+  }) {
+    this.handler = new ResourceHandler(primary, searchKeys);
+    this.handler2 = new ResourceHandler(secondary, secondarySearchKeys);
+    this.secondaryKey = secondary.slice(0, -1);
+    this.query = query || {};
+    this.query2 = secondaryQuery || {};
+    this.filter = null;
+    this.filter2 = null;
+    this.sort = null;
+    this.includeWithoutRelation = includeWithoutRelation;
+    // state pointer that is counted up every time the table is refreshed so
+    // we can tell infinite scroll that the data-version has changed.
+    this.stateCounter = Stream(0);
+    this.refresh();
+    this.debouncedSearch = debounce((search) => {
+      this.setSearch(search);
+      this.refresh();
+      m.redraw();
+    }, 100);
+    // keep track of the total number of pages
+    this.totalPages = null;
+  }
+
+  refresh() {
+    this.stateCounter(this.stateCounter() + 1);
+  }
+
+  infiniteScrollParams(item) {
+    return {
+      item,
+      pageData: pageNum => this.getPageData(pageNum),
+      pageKey: pageNum => `${pageNum}-${this.stateCounter()}`,
+      maxPages: this.totalPages ? this.totalPages : undefined,
+    };
+  }
+
+  getPageData(pageNum) {
+    // We first query the primary resource for a list of items and then query the secondary
+    // resource for the items specified by the relation in the primary resource
+    // We apply Queries for both resources seperately.
+    const query = Object.assign({}, this.query);
+    query.max_results = 50;
+    query.page = pageNum;
+    query.where = { ...this.filter, ...this.query.where };
+    query.sort = this.sort || query.sort;
+    return new Promise((resolve) => {
+      this.handler.get(query).then((data) => {
+        // update total number of pages
+        this.totalPages = Math.ceil(data._meta.total / 50);
+
+        const itemsWithoutRelation = data._items.filter(item => !(this.secondaryKey in item));
+        const itemsWithRelation = data._items.filter(item => (this.secondaryKey in item));
+
+        const query2 = Object.assign({}, this.query2);
+        query2.where = {
+          _id: { $in: itemsWithRelation.map(item => item[this.secondaryKey]) },
+          ...this.filter2,
+          ...this.query2.where,
+        };
+        this.handler2.get(query2).then((secondaryData) => {
+          // check which secondary items were filtered out
+          const secondaryIds = secondaryData._items.map(item => item._id);
+          // filter the primary list to only include those items that have a relation to
+          // the queried secondary IDs
+          const filteredPrimaries = itemsWithRelation.filter(
+            item => secondaryIds.includes(item[this.secondaryKey]),
+          );
+          // embed the secondary data
+          const embeddedList = filteredPrimaries.map((item) => {
+            const itemCopy = Object.assign({}, item);
+            itemCopy[this.secondaryKey] = secondaryData._items.find(
+              relItem => relItem._id === item[this.secondaryKey],
+            );
+            return itemCopy;
+          });
+          // now return the list of filteredPrimaries with the secondary data embedded
+          if (this.includeWithoutRelation) resolve([...embeddedList, ...itemsWithoutRelation]);
+          else resolve(embeddedList);
+        });
+      });
+    });
+  }
+
+  /*
+   * Get all available pages
+   */
+  getFullList() {
+    return new Promise((resolve) => {
+      // get first page to refresh total page count
+      this.getPageData(1).then((firstPage) => {
+        const pages = { 1: firstPage };
+        // save totalPages as a constant to avoid race condition with pages added during this
+        // process
+        const { totalPages } = this;
+
+        if (totalPages === 1) {
+          resolve(firstPage);
+        }
+
+        // now fetch all the missing pages
+        Array.from(new Array(totalPages - 1), (x, i) => i + 2).forEach((pageNum) => {
+          this.getPageData(pageNum).then((newPage) => {
+            pages[pageNum] = newPage;
+            // look if all pages were collected
+            const missingPages = Array.from(new Array(totalPages), (x, i) => i + 1).filter(
+              i => !(i in pages),
+            );
+            // eslint-disable-next-line no-console
+            console.log('missingPages', missingPages);
+            if (missingPages.length === 0) {
+              // collect all the so-far loaded pages in order (sorted keys)
+              // and flatten them into 1 array
+              resolve([].concat(...Object.keys(pages).sort().map(key => pages[key])));
+            }
+          });
+        });
+      });
+    });
+  }
+
+  setSearch(search) {
+    this.query.search = search;
+    this.query2.search = search;
+  }
+
+  setFilter(filter) {
+    this.filter = {};
+    this.filter2 = {};
+    // split up filters between resouce and relation
+    Object.keys(filter).forEach((key) => {
+      if (key.startsWith(`${this.secondaryKey}.`)) {
+        this.filter2[key.slice(this.secondaryKey.length + 1)] = filter[key];
+      } else {
+        this.filter[key] = filter[key];
+      }
+    });
+    this.refresh();
+  }
+
+  setQuery(query) {
+    this.query = Object.assign({}, query, { search: this.query.search });
+    this.refresh();
+  }
+
+  setSort(sort) {
+    this.sort = sort;
+    this.refresh();
+  }
+}

src/resourceConfig.json

-{
-    "apiUrl": "https://api-dev.amiv.ethz.ch/",
-    "events": {
-        "keyDescriptors": {
-            "title_de": "German Title",
-            "title_en": "English Title",
-            "location": "Location",
-            "show_website": "Event is shown on the website",
-            "priority": "Priority",
-            "time_end": "Ending time",
-            "time_register_end": "Deadline for registration",
-            "time_start": "Starting time",
-            "spots": "Spots available",
-            "allow_email_signup": "Event open for non-AMIV members",
-            "price": "Price",
-            "signup_count": "Signed-up participants",
-            "catchphrase_en": "Catchphrase in English. Announce and Website.",
-            "catchphrase_de": "Schlagwort auf Deutsch",
-            "description_de": "Beschreibung auf Deutsch",
-            "description_en": "Description in English",
-            "img_banner": "Banner as png",
-            "img_poster": "Poster as png",
-            "img_thumbnail": "Thumbnail as png",
-            "show_infoscreen": "Does the event show on the infoscreen?",
-            "img_infoscreen": "Infoscreen as png",
-            "time_advertising_end": "Advertisment ends on",
-            "time_advertising_start": "Advertisement starts on",
-            "selection_strategy": "TODO what is this?",
-            "show_announce": "Does it belong to announce?",
-            "_id": "TODO Event ID how is this generated?"
-        },
-        "tableKeys": [
-            "title_de",
-            "time_start",
-            "time_end",
-            "time_register_end",
-            "show_website",
-            "priority"
-        ],
-        "notPatchableKeys": [
-            "signup_count"
-        ]
-    },
-    "users": {
-        "keyDescriptors": {
-            "legi": "Legi Number",
-            "firstname": "First Name",
-            "lastname": "Last Name",
-            "rfid": "RFID",
-            "phone": "Phone",
-            "nethz": "nethz Account",
-            "gender": "Gender",
-            "department": "Department",
-            "email": "Email"
-        },
-        "tableKeys": [
-            "firstname",
-            "lastname",
-            "nethz",
-            "legi",
-            "membership"
-        ],
-        "searchKeys": [
-            "firstname",
-            "lastname",
-            "nethz",
-            "legi",
-            "email"
-        ],
-        "notPatchableKeys": [
-            "password_set"
-        ]
-    },
-    "joboffers":{
-        "keyDescriptors": {
-            "company": "Company",
-            "email": "Email",
-            "description_en": "Job description",
-            "description_de": "Job Beschreibung",
-            "logo": "Logo as png",
-            "pdf": "PDF provided by company",
-            "time_end": "Application deadline",
-            "title_de": "Stelle auf Deutsch",
-            "title_de": "Position title in English",
-            "show_website": "Is the job listed on the website?",
-            "_id":"Job ID."
-        },
-        "tableKeys": [
-            "title_de",
-            "time_end",
-            "show_website"
-        ]
-    },
-    "groups": {
-        "keyDescriptors": {
-            "name": "Name"
-        },
-        "searchKeys": ["name"],
-        "patchableKeys": ["name"]
-    },
-    "groupmemberships": {
-        "patchableKeys": ["user", "group"]
-    },
-    "eventsignups": {
-        "patchableKeys": ["event"],
-        "tableKeys": [
-            "_created",
-            "user.lastname",
-            "user.firstname",
-            "email"
-        ],
-        "searchKeys": []
-    }
-}

src/studydocs/editDoc.js

+import m from 'mithril';
+import { FileInput } from 'amiv-web-ui-components';
+import { Button, List, ListTile, Snackbar } from 'polythene-mithril';
+import EditView from '../views/editView';
+import { getSchema } from '../auth';
+
+
+export default class editDoc extends EditView {
+  // constructor zu file upload
+  constructor(vnode) {
+    // remove the files list as it is impossible to validate
+    const docSchema = getSchema().definitions['Study Document'];
+    delete docSchema.properties.files;
+    super(vnode);
+    if (!('files' in this.form.data)) {
+      this.form.data.files = [{ name: 'add file' }];
+    }
+  }
+
+  beforeSubmit() {
+    // check if there are files uploaded
+    const files = [];
+    Object.keys(this.form.data).forEach((key) => {
+      if (key.startsWith('new_file_') && this.form.data[key]) {
+        files.push(this.form.data[key]);
+        delete this.form.data[key];
+      }
+    });
+    // in case that there are no files, eject an error
+    if (this.controller.modus === 'new' && files.length === 0) {
+      Snackbar.show({ title: 'You need to upload at least one file.' });
+      this.form.valid = false;
+      return;
+    }
+    // now post all together as FormData
+    const submitData = new FormData();
+    Object.keys(this.form.data).forEach((key) => {
+      if (key !== 'files') submitData.append(key, this.form.data[key]);
+    });
+    files.forEach((file) => { submitData.append('files', file); });
+    this.submit(submitData).then(() => this.controller.changeModus('view'));
+  }
+
+  view() {
+    return this.layout([
+      m('h3', 'Add a New Studydocument'),
+      this.form._renderField('semester', {
+        ...this.form.schema.properties.semester,
+        style: { width: '100px' },
+      }),
+      ...this.form.renderSchema(['type', 'lecture', 'title', 'course_year', 'professor', 'author']),
+      // file upload: work in progress, so far all files get deleted with a patch
+      m('div', [
+        'WARNING: Files added here will remove all files currently uploaded. If you want to add',
+        '/edit a file in this studydoc, reupload all other files as well.',
+        m(List, {
+          tiles: [...this.form.data.files.entries()].map(numAndFile => m(ListTile, {
+            content: [
+              m(FileInput, this.form.bind({
+                name: `new_file_${numAndFile[0]}`,
+                label: numAndFile[1].name,
+              })),
+            ],
+          })),
+        }),
+        // additional file
+        m(Button, {
+          label: 'Additional File',
+          className: 'blue-button',
+          border: true,
+          events: { onclick: () => { this.form.data.files.push({ name: 'add file' }); } },
+        }),
+      ]),
+    ]);
+  }
+}

src/studydocs/item.js

+import m from 'mithril';
+import viewDoc from './viewDoc';
+import editDoc from './editDoc';
+import ItemController from '../itemcontroller';
+import { loadingScreen } from '../layout';
+
+export default class studydocItem {
+  constructor() {
+    this.controller = new ItemController('studydocuments');
+  }
+
+  view() {
+    if (!this.controller || (!this.controller.data && this.controller.modus !== 'new')) {
+      return m(loadingScreen);
+    }
+    if (this.controller.modus !== 'view') return m(editDoc, { controller: this.controller });
+    return m(viewDoc, { controller: this.controller });
+  }
+}

src/studydocs/list.js

+import m from 'mithril';
+import { DatalistController } from 'amiv-web-ui-components';
+import TableView from '../views/tableView';
+import { ResourceHandler } from '../auth';
+
+
+/* Table of all studydocuments */
+export default class StudydocTable {
+  constructor() {
+    this.handler = new ResourceHandler('studydocuments');
+    this.ctrl = new DatalistController((query, search) => this.handler.get({ search, ...query }));
+  }
+
+  getItemData(data) {
+    return [
+      m('div', { style: { width: 'calc(100% - 36em)' } }, data.title),
+      m('div', { style: { width: '8em' } }, data.author),
+      m('div', { style: { width: '4em' } }, data.course_year),
+      m('div', { style: { width: '4em' } }, data.semester),
+      m('div', { style: { width: '10em' } }, data.lecture),
+      m('div', { style: { width: '10em' } }, data.files.map((file) => {
+        const splittedFilenames = file.name.split('.');
+        return `.${splittedFilenames[splittedFilenames.length - 1]} `;
+      })),
+    ];
+  }
+
+  view() {
+    return m(TableView, {
+      controller: this.ctrl,
+      keys: ['title', 'author', 'course_year', 'semester', 'lecture'],
+      tileContent: this.getItemData,
+      titles: [
+        { text: 'Title', width: 'calc(100% - 36em)' },
+        { text: 'Author', width: '8em' },
+        { text: 'Year', width: '4em' },
+        { text: 'Sem.', width: '4em' },
+        { text: 'Lecture', width: '10em' },
+        { text: 'Files', width: '10em' },
+      ],
+      onAdd: () => { m.route.set('/newstudydocument'); },
+    });
+  }
+}

src/studydocs/viewDoc.js

+import m from 'mithril';
+import ItemView from '../views/itemView';
+import { Property } from '../views/elements';
+
+
+export default class viewDoc extends ItemView {
+  view() {
+    const stdMarg = { margin: '5px' };
+
+    return this.layout(m('div.maincontainer', [
+      m('h3', {
+        style: { 'margin-top': '0px', 'margin-bottom': '0px' },
+      }, this.data.title),
+      // below the title, most important details are listed
+      m('div', { style: { display: 'flex' } }, [
+        this.data.lecture && m(Property, {
+          title: 'Lecture',
+          style: stdMarg,
+        }, `${this.data.lecture} ${this.data.department.toUpperCase()}`),
+        this.data.semster && m(Property, {
+          title: 'Semester',
+          style: stdMarg,
+        }, this.data.semester),
+        this.data.department && !this.data.lecture && m(Property, {
+          title: 'Department',
+          style: stdMarg,
+        }, this.data.department.toUpperCase()),
+        this.data.professor && m(Property, {
+          title: 'Professor',
+          style: stdMarg,
+        }, this.data.professor),
+        this.data.author && m(Property, {
+          title: 'Author',
+          style: stdMarg,
+        }, this.data.author),
+        this.data.uploader && m(Property, {
+          title: 'Uploader',
+          style: stdMarg,
+        }, this.data.uploader),
+      ]),
+    ]));
+  }
+}

src/style.js

@@ -3,13 +3,15 @@ import { styler } from 'polythene-core-css';
 
 addTypography();
 
-// https://material.io/tools/color/#!/?view.left=0&view.right=1&secondary.color=e8462b&primary.color=274284
+// https://material.io/tools/color/#!/?view.left=0&view.right=1
+// &secondary.color=e8462b&primary.color=274284
+// eslint-disable-next-line import/prefer-default-export
 export const colors = {
   amiv_blue: '#1F2D54',
   amiv_red: '#e8462b',
   green: '#4ef599',
   blue: '#274284',
-  //light_blue: '#5378E1',
+  // light_blue: '#5378E1',
   light_blue: '#5a6db4',
   orange: 'orange',
 };
@@ -31,6 +33,14 @@ ButtonCSS.addStyle('.red-row-button', {
   margin_h: 0,
 });
 
+ButtonCSS.addStyle('.blue-row-button', {
+  color_light_text: 'white',
+  color_light_background: colors.light_blue,
+  padding_h: 0,
+  font_size: 12,
+  margin_h: 0,
+});
+
 CardCSS.addStyle('.pe-card', {
   border_radius: '4',
 });
@@ -61,7 +71,10 @@ const style = [
     },
     p: {
       margin: '0',
-    }
+    },
+    a: {
+      color: 'rgba(0, 0, 0, 0.87)',
+    },
   },
 ];
-styler.add('containers', style);
\ No newline at end of file
+styler.add('containers', style);

src/testlist.js

-import m from 'mithril';
-import infinite from 'mithril-infinite';
-
-
-const pageSize = 5;
-const getIndex = pageNum => (pageNum - 1) * pageSize;
-
-function item(data, opts, itemIndex){
-  return m('div', data.firstname);
-}
-
-function pageData(pageNum) {
-  return new Promise((resolve, reject) => {
-    m.request({
-      method: 'GET',
-      dataType: 'jsonp',
-      headers: {
-        'Authorization': 'root'
-      },
-      url: `https://amiv-api.ethz.ch/users?max_results=5&page=${pageNum}`,
-    }).then((response) => {
-      resolve(response._items);
-    });
-  });
-}
-
-export default {
-  view: function() {
-    return m('div', {
-      style: {
-        height: '400px'
-      }
-      //className: 'experiment_list',
-      /*header: {
-        title: 'Users'
-      },*/
-    }, m(infinite, {
-        item,
-        pageData,
-      }),
-    );
-  }
-}

src/utils.js

@@ -18,10 +18,11 @@ export function debounce(func, wait, immediate) {
   };
 }
 
-export function dateFormatter(datestring) {
+export function dateFormatter(datestring, time = true) {
   // converts an API datestring into the standard format 01.01.1990, 10:21
   if (!datestring) return '';
   const date = new Date(datestring);
+  if (!time) return date.toLocaleDateString('de-DE');
   return date.toLocaleString('de-DE', {
     day: '2-digit',
     month: '2-digit',