From 942c810d8fe07e208bb31f7ed27385950b842141 Mon Sep 17 00:00:00 2001
From: Hermann <blumh@student.ethz.ch>
Date: Sun, 29 Apr 2018 16:52:00 +0200
Subject: [PATCH] add option to upload pictures to events
---
src/auth.js | 16 +++++++++++---
src/config.json | 2 +-
src/events/newEvent.js | 20 +++++++++++++----
src/views/elements.js | 49 ++++++++++++++++++++++++++++++++++++++++++
4 files changed, 79 insertions(+), 8 deletions(-)
diff --git a/src/auth.js b/src/auth.js
index 7dfc654..24d8cdc 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 d33005d..f87cc19 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 20b83b5..89546c8 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 b91caf6..204c98e 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() {
--
GitLab