diff --git a/src/events/newEvent.js b/src/events/newEvent.js
index 3cff68aa1d0a4391bd6e61ca577ec273ace06f9c..4f808126d9eebd096179510361d817272e9e1d65 100644
--- a/src/events/newEvent.js
+++ b/src/events/newEvent.js
@@ -1,11 +1,22 @@
import m from 'mithril';
-import { TextField, Button, Checkbox, RadioGroup, IconButton, SVG } from 'polythene-mithril';
+import { Button, Checkbox, RadioGroup, IconButton, SVG } 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;
}
@@ -14,6 +25,7 @@ export default class newEvent extends EditView {
if (this.currentpage === 4) {
this.currentpage = 3;
}
+ //m.redraw();
}
subOne() {
@@ -21,126 +33,131 @@ export default class newEvent extends EditView {
if (this.currentpage === 0) {
this.currentpage = 1;
}
+ //m.redraw();
}
- view(vnode) {
+ view() {
if (!this.currentpage) return '';
// German and English Information
- const fieldTitleEn = m(TextField, {
+ const fieldTitleEn = m(textInput, this.bind({
+ name: 'title_en',
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, {
+ const fieldCatchphraseEn = m(textInput, this.bind({
+ name: 'catchphrase_en',
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, {
+ const fieldDescriptionEn = m(textInput, this.bind({
+ name: 'description_en',
label: 'Description [EN]',
required: true,
floatingLabel: true,
- dense: true,
multiLine: true,
rows: 6,
- });
+ }));
- const fieldTitleDe = m(TextField, {
+ const fieldTitleDe = m(textInput, this.bind({
+ name: 'title_de',
label: 'Event Title [DE]',
floatingLabel: true,
- dense: true,
- });
+ }));
- const fieldCatchphraseDe = m(TextField, {
+ const fieldCatchphraseDe = m(textInput, this.bind({
+ name: 'catchphrase_de',
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, {
+ const fieldDescriptionDe = m(textInput, this.bind({
+ name: 'description_de',
label: 'Description [DE]',
floatingLabel: true,
- dense: true,
multiLine: true,
rows: 6,
- });
+ }));
// Start of relevant data
- const fieldPrice = m(TextField, {
+ const fieldPrice = m(textInput, this.bind({
+ name: 'price',
label: 'Price:',
type: 'number',
help: 'In Rappen/Cents',
focusHelp: true,
floatingLabel: true,
required: true,
- });
- const fieldStartDate = m(TextField, {
+ }));
+ const fieldStartDate = m(textInput, this.bind({
+ name: 'time_start',
label: 'Event Start[Date and Time]:',
help: 'Format: 01.01.1970-18:00',
focusHelp: true,
floatingLabel: true,
required: true,
- });
- const fieldEndDate = m(TextField, {
+ }));
+ const fieldEndDate = m(textInput, this.bind({
+ name: 'time_end',
label: 'Event End[Date and Time]:',
help: 'Format: 01.01.1970-1800',
focusHelp: true,
floatingLabel: true,
required: true,
- });
- const fieldStartRegDate = m(TextField, {
+ }));
+ const fieldStartRegDate = m(textInput, this.bind({
+ name: 'time_register_start',
label: 'Registration Start[Date and Time]:',
help: 'Format: 01.01.1970-18:00',
focusHelp: true,
floatingLabel: true,
required: true,
- });
- const fieldEndRegDate = m(TextField, {
+ }));
+ const fieldEndRegDate = m(textInput, this.bind({
+ name: 'time_register_end',
label: 'Registration End[Date and Time]:',
help: 'Format: 01.01.1970-1800',
focusHelp: true,
floatingLabel: true,
required: true,
- });
- const fieldLocation = m(TextField, {
+ }));
+ const fieldLocation = m(textInput, this.bind({
+ name: 'location',
label: 'Location:',
floatingLabel: true,
required: true,
- });
- const fieldNumberOfParticipants = m(TextField, {
+ }));
+ const fieldNumberOfParticipants = m(textInput, this.bind({
+ name: 'spots',
label: 'Number of open spots:',
type: 'number',
floatingLabel: true,
required: true,
- });
-
- // Everything above is working fine atm. (13:35)
-
- const fieldAdvStart = m(TextField, {
+ }));
+ const fieldAdvStart = m(textInput, this.bind({
+ name: 'time_advertising_start',
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, {
+ }));
+ const fieldAdvEnd = m(textInput, this.bind({
+ name: 'time_advertising_end',
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',
@@ -226,22 +243,41 @@ export default class newEvent extends EditView {
});
function layoutWith(page) {
- return m('div', page);
+ return m('div.mywrapper', page);
}
+
+ const page1 = {
+ view: function () {
+ return layoutWith(m(
+ 'h1', 'Event description:', m('br'), iconLeft, iconRight, m('br'),
+ fieldTitleEn, fieldCatchphraseEn, fieldDescriptionEn, fieldTitleDe,
+ ));
+ },
+ };
+ const page2 = {
+ view: function () {
+ return layoutWith(m(
+ 'h1', 'Critical Information:', m('br'), iconLeft, iconRight, m('br'), fieldStartDate, fieldEndDate, fieldStartRegDate,
+ fieldEndRegDate, fieldLocation, fieldPrice, fieldNumberOfParticipants,
+ ));
+ },
+ };
+ const page3 = {
+ view: function () {
+ return layoutWith(m(
+ 'h1', 'Advertise Information', m('br'), iconLeft, iconRight, m('br'), fieldAdvStart, fieldAdvEnd, checkboxWebsite,
+ checkboxAnnounce, checkboxInfoScreen, m('br'), buttonBannerUp, buttonInfoUp, buttonPosterUp,
+ buttonThumbUp, m('br'), buttonUploadAll, m('br'), checkboxAllowMail, radioButtonSelectionMode,
+ ));
+ },
+ };
// checks currentPage and selects the fitting page
if (this.currentpage === 1) {
- return layoutWith(m('h1', 'Event description:', iconLeft, iconRight, m('br'), fieldTitleEn, fieldCatchphraseEn, fieldDescriptionEn, fieldTitleDe, fieldCatchphraseDe, fieldDescriptionDe));
+ return m(page1);
} else if (this.currentpage === 2) {
- return layoutWith(m(
- 'h1', 'Critical Information:', iconLeft, iconRight, m('br'), fieldStartDate, fieldEndDate, fieldStartRegDate,
- fieldEndRegDate, fieldLocation, fieldPrice, fieldNumberOfParticipants,
- ));
+ return m(page2);
} else if (this.currentpage === 3) {
- return layoutWith(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 m(page3);
}
return layoutWith(m(''));
}
diff --git a/src/views/editView.js b/src/views/editView.js
index 91db119c24d2b021f4d0a3111e0625cd4e43b6d4..180a82c00f8f76d044c88723343365cbfba1973f 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,7 +57,8 @@ export default class EditView extends ItemView {
m.request(`${apiUrl}docs/api-docs`).then((schema) => {
const objectSchema = schema.definitions[
objectNameForResource[this.resource]];
- this.ajv.addSchema(objectSchema, 'schema');
+ console.log(schema);
+ //this.ajv.addSchema(objectSchema, 'schema');
});
}
@@ -65,13 +68,15 @@ 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');
+ /*const validate = this.ajv.getSchema('schema');
this.valid = validate(this.data);
console.log(validate.schema);
@@ -87,7 +92,7 @@ export default class EditView extends ItemView {
`.${field}` === error.dataPath);
this.errors[field] = errors.map(error => error.message);
});
- }
+ }*/
},
getErrors: () => this.errors[attrs.name],
value: this.data[attrs.name],
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);
}
}