work in progress for textfields

	modified:   src/events/newEvent.js
	modified:   src/views/editView.js
	modified:   src/views/elements.js

src/events/newEvent.js

 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(''));
   }

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],

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);
   }
 }