diff --git a/src/eventTool.js b/src/eventTool.js
index 2cdf9fa59ef35f55b9cf7a5e64c1ba79d6b3205b..92d9af899a075f1dc27822e2377ff4380d5b7028 100644
--- a/src/eventTool.js
+++ b/src/eventTool.js
@@ -164,14 +164,3 @@ export class EventModal {
]);
}
}
-
-export class EventTable {
- view() {
- return m(TableView, {
- resource: 'events',
- keys: config.tableKeys,
- titles: config.tableKeys.map(key => config.keyDescriptors[key] || key),
- onAdd: () => { m.route.set('/newevent'); },
- });
- }
-}
diff --git a/src/events/newEvent.js b/src/events/newEvent.js
index 4a41aac85250a417438fc9a17a0bc90f3db7b558..d553ff6ca89881c7edf2e4a5ca38ac6c400a137e 100644
--- a/src/events/newEvent.js
+++ b/src/events/newEvent.js
@@ -1,18 +1,29 @@
import m from 'mithril';
-import { TextField, Button, Checkbox, RadioGroup, IconButton, SVG } from 'polythene-mithril';
+import { Button, Checkbox, RadioGroup, IconButton, SVG, TextField } from 'polythene-mithril';
+import { styler } from 'polythene-core-css';
import EditView from '../views/editView';
-import { icons } from '../views/elements';
+import { icons, textInput } from '../views/elements';
+
+const style = [
+ {
+ '.mywrapper': {
+ padding: '10px',
+ },
+ },
+];
+styler.add('event-add', style);
+
export default class newEvent extends EditView {
constructor(vnode) {
- super(vnode, 'events');
+ super(vnode, 'events', {});
this.currentpage = 1;
}
addOne() {
this.currentpage = this.currentpage + 1;
- if (this.currentpage === 4) {
- this.currentpage = 3;
+ if (this.currentpage === 5) {
+ this.currentpage = 4;
}
}
@@ -23,159 +34,82 @@ export default class newEvent extends EditView {
}
}
- view(vnode) {
+ view() {
if (!this.currentpage) return '';
- // German and English Information
- const fieldTitleEn = m(TextField, {
- label: 'Event Title [EN]',
- required: true,
- floatingLabel: true,
- dense: true,
- onChange: (newState) => { this.title_en = newState.value; console.log(this.title_en); },
- value: vnode.state.title_en,
- });
-
- const fieldCatchphraseEn = m(TextField, {
- label: 'Catchphrase [EN]',
- floatingLabel: true,
- dense: true,
- help: 'Fun description to make your event look more interesting than it is',
- focusHelp: true,
- });
-
- const fieldDescriptionEn = m(TextField, {
- label: 'Description [EN]',
- required: true,
- floatingLabel: true,
- dense: true,
- multiLine: true,
- rows: 6,
- });
-
- const fieldTitleDe = m(TextField, {
- label: 'Event Title [DE]',
- floatingLabel: true,
- dense: true,
- });
-
- const fieldCatchphraseDe = m(TextField, {
- label: 'Catchphrase [DE]',
- floatingLabel: true,
- dense: true,
- help: 'Fun description to make your event look more interesting than it is',
- focusHelp: true,
- });
-
- const fieldDescriptionDe = m(TextField, {
- label: 'Description [DE]',
- floatingLabel: true,
- dense: true,
- multiLine: true,
- rows: 6,
- });
-
- // Start of relevant data
- const fieldPrice = m(TextField, {
- label: 'Price:',
- type: 'number',
- help: 'In Rappen/Cents',
- focusHelp: true,
- floatingLabel: true,
- required: true,
- });
- const fieldStartDate = m(TextField, {
- label: 'Event Start[Date and Time]:',
- help: 'Format: 01.01.1970-18:00',
- focusHelp: true,
- floatingLabel: true,
- required: true,
- });
- const fieldEndDate = m(TextField, {
- label: 'Event End[Date and Time]:',
- help: 'Format: 01.01.1970-1800',
- focusHelp: true,
- floatingLabel: true,
- required: true,
- });
- const fieldStartRegDate = m(TextField, {
- label: 'Registration Start[Date and Time]:',
- help: 'Format: 01.01.1970-18:00',
- focusHelp: true,
- floatingLabel: true,
- required: true,
- });
- const fieldEndRegDate = m(TextField, {
- label: 'Registration End[Date and Time]:',
- help: 'Format: 01.01.1970-1800',
- focusHelp: true,
- floatingLabel: true,
- required: true,
- });
- const fieldLocation = m(TextField, {
- label: 'Location:',
- floatingLabel: true,
- required: true,
- });
- const fieldNumberOfParticipants = m(TextField, {
- label: 'Number of open spots:',
- type: 'number',
- floatingLabel: true,
- required: true,
- });
+ const firstTableInputs = {
+ title_en: {
+ label: 'English Event Title',
+ },
+ catchphrase_en: {
+ label: 'English Catchphrase',
+ },
+ description_en: {
+ label: 'English Description',
+ multiLine: true,
+ rows: 5,
+ },
+ title_de: {
+ label: 'German Event Title',
+ },
+ catchphrase_de: {
+ label: 'German Catchphrase',
+ },
+ description_de: {
+ label: 'German Description',
+ multiLine: true,
+ rows: 5,
+ },
+ };
- // Everything above is working fine atm. (13:35)
+ const secondTableInputs = {
+ location: {
+ label: 'Location',
+ },
+ time_start: {
+ label: 'Event Start [Date and Time]:',
+ help: 'Format: 01.01.1970-18:00',
+ focusHelp: true,
+ },
+ time_end: {
+ label: 'Event End [Date and Time]:',
+ help: 'Format: 01.01.1970-1800',
+ focusHelp: true,
+ },
- const fieldAdvStart = m(TextField, {
- label: 'Registration Start[Date and Time]:',
- type: 'datetime',
- help: 'Format: 01.01.1970-18:00',
- focusHelp: true,
- floatingLabel: true,
- required: true,
- });
- const fieldAdvEnd = m(TextField, {
- label: 'Registration End[Date and Time]:',
- help: 'Format: 01.01.1970-1800',
- focusHelp: true,
- floatingLabel: true,
- required: true,
- });
+ };
- const buttonBannerUp = m(Button, {
- label: 'Select Banner File',
- events: {
- onclick: () => console.log('click'),
+ const thirdTableInputs = {
+ spots: {
+ label: 'Number of Spots',
+ help: '0 for open event',
+ focusHelp: true,
},
- });
-
- const buttonInfoUp = m(Button, {
- label: 'Select Infoscreen File',
- events: {
- onclick: () => console.log('click'),
+ price: {
+ label: 'Price',
},
- });
-
- const buttonPosterUp = m(Button, {
- label: 'Select Poster File',
- events: {
- onclick: () => console.log('click'),
+ time_register_start: {
+ label: 'Start of Registration',
},
- });
-
- const buttonThumbUp = m(Button, {
- label: 'Select Thumbnail File',
- events: {
- onclick: () => console.log('click'),
+ time_register_end: {
+ label: 'End of Registration',
},
- });
+ };
- const buttonUploadAll = m(Button, {
- label: 'Upload',
- events: {
- onclick: () => console.log('click'),
+ const forthTableInputs = {
+ time_advertising_start: {
+ label: 'Start of Advertisement',
+ type: 'datetime',
+ required: true,
},
- });
+ time_advertising_end: {
+ label: 'End of Advertisement',
+ required: true,
+ },
+ priority: {
+ label: 'Priority',
+ }
+ };
const iconRight = m(
IconButton, { events: { onclick: () => { this.addOne(); } } },
@@ -225,45 +159,61 @@ export default class newEvent extends EditView {
],
});
- function layoutWith(page) {
- return m('div', page);
- }
+ const title = [
+ 'Create an Event', 'When and Where?', 'Signups', 'Advertisement'
+ ][this.currentpage - 1];
+
// checks currentPage and selects the fitting page
- if (this.currentpage === 1) {
- return layoutWith(m(
- 'div', { style: { height: '100%', 'overflow-y': 'scroll' } }
- , [
- m(
- 'h1', 'Event description:', iconLeft, iconRight, m('br'),
- fieldTitleEn, fieldCatchphraseEn, fieldDescriptionEn, fieldTitleDe,
- fieldCatchphraseDe, fieldDescriptionDe,
- ),
- ],
- ));
- } else if (this.currentpage === 2) {
- return layoutWith(m(
- 'div', { style: { height: '100%', 'overflow-y': 'scroll' } }
- , [
- m(
- 'h1', 'Critical Information:', iconLeft, iconRight, m('br'), fieldStartDate,
- fieldEndDate, fieldStartRegDate, fieldEndRegDate, fieldLocation, fieldPrice,
- fieldNumberOfParticipants,
- ),
- ],
- ));
- } else if (this.currentpage === 3) {
- return layoutWith(m(
- 'div', { style: { height: '100%', 'overflow-y': 'scroll' } }
- , [
- m(
- 'h1', 'Advertise Information', iconLeft, iconRight, m('br'), fieldAdvStart,
- fieldAdvEnd, checkboxWebsite, checkboxAnnounce, checkboxInfoScreen,
- buttonBannerUp, buttonInfoUp, buttonPosterUp, buttonThumbUp, m('br'),
- buttonUploadAll, m('br'), checkboxAllowMail, radioButtonSelectionMode,
- ),
- ],
- ));
- }
- return layoutWith(m(''));
+ return m('div.mywrapper', [
+ m('h1', title),
+ m('br'),
+ iconLeft,
+ iconRight,
+ m('br'),
+ m('div', {
+ style: {
+ display: (this.currentpage === 1) ? 'block' : 'none',
+ },
+ }, Object.keys(firstTableInputs).map((key) => {
+ const attrs = firstTableInputs[key];
+ const attributes = Object.assign({}, attrs);
+ attributes.name = key;
+ attributes.floatingLabel = true;
+ return m(textInput, this.bind(attributes));
+ })),
+ m('div', {
+ style: {
+ display: (this.currentpage === 2) ? 'block' : 'none',
+ },
+ }, Object.keys(secondTableInputs).map((key) => {
+ const attrs = secondTableInputs[key];
+ const attributes = Object.assign({}, attrs);
+ attributes.name = key;
+ attributes.floatingLabel = true;
+ return m(textInput, this.bind(attributes));
+ })),
+ m('div', {
+ style: {
+ display: (this.currentpage === 3) ? 'block' : 'none',
+ },
+ }, Object.keys(thirdTableInputs).map((key) => {
+ const attrs = thirdTableInputs[key];
+ const attributes = Object.assign({}, attrs);
+ attributes.name = key;
+ attributes.floatingLabel = true;
+ return m(textInput, this.bind(attributes));
+ })),
+ m('div', {
+ style: {
+ display: (this.currentpage === 4) ? 'block' : 'none',
+ },
+ }, Object.keys(forthTableInputs).map((key) => {
+ const attrs = forthTableInputs[key];
+ const attributes = Object.assign({}, attrs);
+ attributes.name = key;
+ attributes.floatingLabel = true;
+ return m(textInput, this.bind(attributes));
+ })),
+ ]);
}
}
diff --git a/src/views/editView.js b/src/views/editView.js
index 91db119c24d2b021f4d0a3111e0625cd4e43b6d4..4b2c4b0badfccf4ae7f8afb03279c977c30e3823 100644
--- a/src/views/editView.js
+++ b/src/views/editView.js
@@ -29,6 +29,7 @@ export default class EditView extends ItemView {
constructor(vnode, resource, embedded, valid = true) {
super(resource, embedded);
this.changed = false;
+ this.resource = resource;
// state for validation
this.valid = valid;
@@ -38,6 +39,7 @@ export default class EditView extends ItemView {
allErrors: true,
});
this.errors = {};
+ this.data = {};
// callback when edit is finished
this.callback = vnode.attrs.onfinish;
@@ -55,6 +57,15 @@ export default class EditView extends ItemView {
m.request(`${apiUrl}docs/api-docs`).then((schema) => {
const objectSchema = schema.definitions[
objectNameForResource[this.resource]];
+ console.log(objectSchema);
+ // filter out any field that is of type media and replace with type
+ // object
+ Object.keys(objectSchema.properties).forEach((property) => {
+ if (objectSchema.properties[property].type === 'media' ||
+ objectSchema.properties[property].type === 'json_schema_object') {
+ objectSchema.properties[property].type = 'object';
+ }
+ });
this.ajv.addSchema(objectSchema, 'schema');
});
}
@@ -65,10 +76,12 @@ export default class EditView extends ItemView {
if (!this.errors[attrs.name]) this.errors[attrs.name] = [];
const boundFormelement = {
- onchange: (e) => {
+ onChange: (name, value) => {
this.changed = true;
// bind changed data
- this.data[e.target.name] = e.target.value;
+ this.data[name] = value;
+
+ console.log(this.data);
// validate against schema
const validate = this.ajv.getSchema('schema');
diff --git a/src/views/elements.js b/src/views/elements.js
index 98cd7d9e67eca4461b7f2cf728dd2bd0b9df6343..0c07cec65b716304c1143f4ae31a8528edc9fccf 100644
--- a/src/views/elements.js
+++ b/src/views/elements.js
@@ -2,12 +2,14 @@ import m from 'mithril';
import { IconButton, TextField } from 'polythene-mithril';
export class textInput {
- constructor({ attrs: { getErrors } }) {
+ constructor({ attrs: { getErrors, name, label } }) {
// Link the error-getting function from the binding
this.getErrors = () => [];
+ this.name = name;
if (getErrors) {
this.getErrors = getErrors;
}
+ this.value = '';
}
view({ attrs }) {
@@ -15,8 +17,14 @@ export class textInput {
const errors = this.getErrors();
const attributes = Object.assign({}, attrs);
- attributes.valid = errors.length > 0;
+ attributes.valid = errors.length === 0;
attributes.error = errors.join(', ');
+ attributes.onChange = ({ value }) => {
+ if (value !== this.value) {
+ this.value = value;
+ attrs.onChange(this.name, value);
+ }
+ };
return m(TextField, attributes);
}
}