diff --git a/src/auth.js b/src/auth.js index 7dfc654cc63bd6229328d7237a649363e4a4ab15..24d8cdc5753cf8b1d3db32a4572288a5f84c9abb 100644 --- a/src/auth.js +++ b/src/auth.js @@ -196,13 +196,23 @@ export class ResourceHandler { }); } - patch(item) { + patch(item, formData = false) { return new Promise((resolve, reject) => { getSession().then((api) => { // not all fields in the item can be patched. We filter out the fields // we are allowed to send - const submitData = Object.assign({}, item); - this.noPatchKeys.forEach((key) => { delete submitData[key]; }); + let submitData; + if (formData) { + submitData = new FormData(); + Object.keys(item).forEach((key) => { + if (!this.noPatchKeys.includes(key)) { + submitData.append(key, item[key]); + } + }); + } else { + submitData = Object.assign({}, item); + this.noPatchKeys.forEach((key) => { delete submitData[key]; }); + } api.patch(`${this.resource}/${item._id}`, submitData, { headers: { 'If-Match': item._etag }, diff --git a/src/config.json b/src/config.json index d33005de0c77893a05e55e95ea4814bfd25ddf2f..f87cc19f58acaf2ead3197594c8dcb4af83f8a61 100644 --- a/src/config.json +++ b/src/config.json @@ -1,5 +1,5 @@ { - "apiUrl": "https://api-dev.amiv.ethz.ch", + "apiUrl": "https://api-dev.amiv.ethz.ch/", "events": { "keyDescriptors": { "title_de": "German Title", diff --git a/src/events/newEvent.js b/src/events/newEvent.js index 20b83b5e1a1edc4391339252399d5f72b7f0e181..89546c86604fbb01904be38e586889a0218de055 100644 --- a/src/events/newEvent.js +++ b/src/events/newEvent.js @@ -2,6 +2,7 @@ import m from 'mithril'; import { RaisedButton, RadioGroup, Slider } from 'polythene-mithril'; import { styler } from 'polythene-core-css'; import EditView from '../views/editView'; +import { fileInput } from '../views/elements'; const style = [ { @@ -24,10 +25,10 @@ export default class newEvent extends EditView { const buttonRight = m(RaisedButton, { label: 'next', - disabled: this.currentpage === 4, + disabled: this.currentpage === 5, events: { onclick: () => { - this.currentpage = Math.min(this.currentpage + 1, 4); + this.currentpage = Math.min(this.currentpage + 1, 5); }, }, }); @@ -101,13 +102,13 @@ export default class newEvent extends EditView { this.data.additional_fields = JSON.stringify(additionalFields); } console.log(this.data); - this.submit('POST'); + this.submit(true); }, }, }); const title = [ - 'Create an Event', 'When and Where?', 'Signups', 'Advertisement', + 'Create an Event', 'When and Where?', 'Signups', 'Advertisement', 'Images', ][this.currentpage - 1]; // checks currentPage and selects the fitting page @@ -215,6 +216,17 @@ export default class newEvent extends EditView { m('br'), buttonFinish, ]), + m('div', { + style: { display: (this.currentpage === 5) ? 'block' : 'none' }, + }, [ + m(fileInput, this.bind({ + name: 'img_thumbnail', + label: 'Thumbnail', + accept: 'image/png, image/jpeg', + })), + m('br'), + buttonFinish, + ]), ]); } } diff --git a/src/views/elements.js b/src/views/elements.js index b91caf69e6baabc78ed1b635b49af9d917c07e81..204c98e0d2f27bb9744b7d48a54f1a1fedc8053c 100644 --- a/src/views/elements.js +++ b/src/views/elements.js @@ -146,6 +146,55 @@ export class datetimeInput { } +export class fileInput { + constructor({ attrs: { getErrors, name, onChange } }) { + // Link the error-getting function from the binding + this.getErrors = () => []; + this.name = name; + if (getErrors) { this.getErrors = getErrors; } + this.onChangeCallback = onChange; + this.file = null; + } + + onChange() { + + } + + view({ attrs: { label, accept } }) { + // set display-settings accoridng to error-state + const errors = this.getErrors(); + + const image = { + type: 'file', + accept, + onchange: ({ target: { files: [file] } }) => { + if (file !== this.file) { + // as we only accept one file, it is always the first element + // of the list + this.file = file; + console.log(this.file); + this.onChangeCallback(this.name, this.file); + } + }, + valid: errors.length === 0, + error: errors.join(', '), + }; + + return m('div', [ + m(TextField, { + label, + disabled: true, + style: { + width: '200px', + float: 'left', + }, + }), + m('input', image), + ]); + } +} + + // a card that is usually collapsed, but pops out when clicked on the title export class DropdownCard { constructor() {