Skip to content
Snippets Groups Projects
Commit f6b25bf6 authored by Hermann's avatar Hermann
Browse files

Merge branch 'feature/polythene_validation_binding' into codingweekendfs18

parents 8482c15e 94beaf7e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/eventTool.js
+ 0
− 11
View file @ f6b25bf6
...@@ -164,14 +164,3 @@ export class EventModal { ...@@ -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'); },
});
}
}
src/events/newEvent.js
+ 136
− 186
View file @ f6b25bf6
import m from 'mithril'; 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 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 { export default class newEvent extends EditView {
constructor(vnode) { constructor(vnode) {
super(vnode, 'events'); super(vnode, 'events', {});
this.currentpage = 1; this.currentpage = 1;
} }
addOne() { addOne() {
this.currentpage = this.currentpage + 1; this.currentpage = this.currentpage + 1;
if (this.currentpage === 4) { if (this.currentpage === 5) {
this.currentpage = 3; this.currentpage = 4;
} }
} }
...@@ -23,159 +34,82 @@ export default class newEvent extends EditView { ...@@ -23,159 +34,82 @@ export default class newEvent extends EditView {
} }
} }
view(vnode) { view() {
if (!this.currentpage) return ''; 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, { const firstTableInputs = {
label: 'Price:', title_en: {
type: 'number', label: 'English Event Title',
help: 'In Rappen/Cents', },
focusHelp: true, catchphrase_en: {
floatingLabel: true, label: 'English Catchphrase',
required: true, },
}); description_en: {
const fieldStartDate = m(TextField, { label: 'English Description',
label: 'Event Start[Date and Time]:', multiLine: true,
help: 'Format: 01.01.1970-18:00', rows: 5,
focusHelp: true, },
floatingLabel: true, title_de: {
required: true, label: 'German Event Title',
}); },
const fieldEndDate = m(TextField, { catchphrase_de: {
label: 'Event End[Date and Time]:', label: 'German Catchphrase',
help: 'Format: 01.01.1970-1800', },
focusHelp: true, description_de: {
floatingLabel: true, label: 'German Description',
required: true, multiLine: true,
}); rows: 5,
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,
});
// 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, { const thirdTableInputs = {
label: 'Select Banner File', spots: {
events: { label: 'Number of Spots',
onclick: () => console.log('click'), help: '0 for open event',
focusHelp: true,
}, },
}); price: {
label: 'Price',
const buttonInfoUp = m(Button, {
label: 'Select Infoscreen File',
events: {
onclick: () => console.log('click'),
}, },
}); time_register_start: {
label: 'Start of Registration',
const buttonPosterUp = m(Button, {
label: 'Select Poster File',
events: {
onclick: () => console.log('click'),
}, },
}); time_register_end: {
label: 'End of Registration',
const buttonThumbUp = m(Button, {
label: 'Select Thumbnail File',
events: {
onclick: () => console.log('click'),
}, },
}); };
const buttonUploadAll = m(Button, { const forthTableInputs = {
label: 'Upload', time_advertising_start: {
events: { label: 'Start of Advertisement',
onclick: () => console.log('click'), type: 'datetime',
required: true,
}, },
}); time_advertising_end: {
label: 'End of Advertisement',
required: true,
},
priority: {
label: 'Priority',
}
};
const iconRight = m( const iconRight = m(
IconButton, { events: { onclick: () => { this.addOne(); } } }, IconButton, { events: { onclick: () => { this.addOne(); } } },
...@@ -225,45 +159,61 @@ export default class newEvent extends EditView { ...@@ -225,45 +159,61 @@ export default class newEvent extends EditView {
], ],
}); });
function layoutWith(page) { const title = [
return m('div', page); 'Create an Event', 'When and Where?', 'Signups', 'Advertisement'
} ][this.currentpage - 1];
// checks currentPage and selects the fitting page // checks currentPage and selects the fitting page
if (this.currentpage === 1) { return m('div.mywrapper', [
return layoutWith(m( m('h1', title),
'div', { style: { height: '100%', 'overflow-y': 'scroll' } } m('br'),
, [ iconLeft,
m( iconRight,
'h1', 'Event description:', iconLeft, iconRight, m('br'), m('br'),
fieldTitleEn, fieldCatchphraseEn, fieldDescriptionEn, fieldTitleDe, m('div', {
fieldCatchphraseDe, fieldDescriptionDe, style: {
), display: (this.currentpage === 1) ? 'block' : 'none',
], },
)); }, Object.keys(firstTableInputs).map((key) => {
} else if (this.currentpage === 2) { const attrs = firstTableInputs[key];
return layoutWith(m( const attributes = Object.assign({}, attrs);
'div', { style: { height: '100%', 'overflow-y': 'scroll' } } attributes.name = key;
, [ attributes.floatingLabel = true;
m( return m(textInput, this.bind(attributes));
'h1', 'Critical Information:', iconLeft, iconRight, m('br'), fieldStartDate, })),
fieldEndDate, fieldStartRegDate, fieldEndRegDate, fieldLocation, fieldPrice, m('div', {
fieldNumberOfParticipants, style: {
), display: (this.currentpage === 2) ? 'block' : 'none',
], },
)); }, Object.keys(secondTableInputs).map((key) => {
} else if (this.currentpage === 3) { const attrs = secondTableInputs[key];
return layoutWith(m( const attributes = Object.assign({}, attrs);
'div', { style: { height: '100%', 'overflow-y': 'scroll' } } attributes.name = key;
, [ attributes.floatingLabel = true;
m( return m(textInput, this.bind(attributes));
'h1', 'Advertise Information', iconLeft, iconRight, m('br'), fieldAdvStart, })),
fieldAdvEnd, checkboxWebsite, checkboxAnnounce, checkboxInfoScreen, m('div', {
buttonBannerUp, buttonInfoUp, buttonPosterUp, buttonThumbUp, m('br'), style: {
buttonUploadAll, m('br'), checkboxAllowMail, radioButtonSelectionMode, display: (this.currentpage === 3) ? 'block' : 'none',
), },
], }, Object.keys(thirdTableInputs).map((key) => {
)); const attrs = thirdTableInputs[key];
} const attributes = Object.assign({}, attrs);
return layoutWith(m('')); 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));
})),
]);
} }
} }
src/views/editView.js
+ 15
− 2
View file @ f6b25bf6
...@@ -29,6 +29,7 @@ export default class EditView extends ItemView { ...@@ -29,6 +29,7 @@ export default class EditView extends ItemView {
constructor(vnode, resource, embedded, valid = true) { constructor(vnode, resource, embedded, valid = true) {
super(resource, embedded); super(resource, embedded);
this.changed = false; this.changed = false;
this.resource = resource;
// state for validation // state for validation
this.valid = valid; this.valid = valid;
...@@ -38,6 +39,7 @@ export default class EditView extends ItemView { ...@@ -38,6 +39,7 @@ export default class EditView extends ItemView {
allErrors: true, allErrors: true,
}); });
this.errors = {}; this.errors = {};
this.data = {};
// callback when edit is finished // callback when edit is finished
this.callback = vnode.attrs.onfinish; this.callback = vnode.attrs.onfinish;
...@@ -55,6 +57,15 @@ export default class EditView extends ItemView { ...@@ -55,6 +57,15 @@ export default class EditView extends ItemView {
m.request(`${apiUrl}docs/api-docs`).then((schema) => { m.request(`${apiUrl}docs/api-docs`).then((schema) => {
const objectSchema = schema.definitions[ const objectSchema = schema.definitions[
objectNameForResource[this.resource]]; 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'); this.ajv.addSchema(objectSchema, 'schema');
}); });
} }
...@@ -65,10 +76,12 @@ export default class EditView extends ItemView { ...@@ -65,10 +76,12 @@ export default class EditView extends ItemView {
if (!this.errors[attrs.name]) this.errors[attrs.name] = []; if (!this.errors[attrs.name]) this.errors[attrs.name] = [];
const boundFormelement = { const boundFormelement = {
onchange: (e) => { onChange: (name, value) => {
this.changed = true; this.changed = true;
// bind changed data // bind changed data
this.data[e.target.name] = e.target.value; this.data[name] = value;
console.log(this.data);
// validate against schema // validate against schema
const validate = this.ajv.getSchema('schema'); const validate = this.ajv.getSchema('schema');
......
src/views/elements.js
+ 10
− 2
View file @ f6b25bf6
...@@ -2,12 +2,14 @@ import m from 'mithril'; ...@@ -2,12 +2,14 @@ import m from 'mithril';
import { IconButton, TextField } from 'polythene-mithril'; import { IconButton, TextField } from 'polythene-mithril';
export class textInput { export class textInput {
constructor({ attrs: { getErrors } }) { constructor({ attrs: { getErrors, name, label } }) {
// Link the error-getting function from the binding // Link the error-getting function from the binding
this.getErrors = () => []; this.getErrors = () => [];
this.name = name;
if (getErrors) { if (getErrors) {
this.getErrors = getErrors; this.getErrors = getErrors;
} }
this.value = '';
} }
view({ attrs }) { view({ attrs }) {
...@@ -15,8 +17,14 @@ export class textInput { ...@@ -15,8 +17,14 @@ export class textInput {
const errors = this.getErrors(); const errors = this.getErrors();
const attributes = Object.assign({}, attrs); const attributes = Object.assign({}, attrs);
attributes.valid = errors.length > 0; attributes.valid = errors.length === 0;
attributes.error = errors.join(', '); attributes.error = errors.join(', ');
attributes.onChange = ({ value }) => {
if (value !== this.value) {
this.value = value;
attrs.onChange(this.name, value);
}
};
return m(TextField, attributes); return m(TextField, attributes);
} }
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment