Merge branch 'codingweekendfs18' of https://gitlab.ethz.ch/amiv/amiv-admintool...

Merge branch 'codingweekendfs18' of https://gitlab.ethz.ch/amiv/amiv-admintool into codingweekendfs18

.gitignore

@@ -2,3 +2,5 @@
 .ftpconfig
 node_modules/
 package-lock.json
+
+.idea/

.idea/inspectionProfiles/Project_Default.xml

-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="ERROR" enabled_by_default="true" />
-  </profile>
-</component>
\ No newline at end of file

.idea/vcs.xml

-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>
\ No newline at end of file

src/events/eventDraft.js

 import m from 'mithril';
-import { Button, Card, TextField } from "polythene-mithril"
+import { Button} from "polythene-mithril"
 import EditView from '../views/editView';
 import { styler } from 'polythene-core-css';
 
+
+
 const draftStyle = [
 	{
 		'.footer': {
@@ -10,9 +12,9 @@ const draftStyle = [
 		    left: 0,
 		    bottom: 0,
 		    width: '100%', 
-		    'background-color': 'red',
-		    color: 'white',
-		    'text-align': 'center',
+		    'background-color': '#E8462B',
+		    color: '#FFFFFF',
+		    'text-align': 'right',
 		}
 	}
 ]
@@ -26,25 +28,21 @@ export default class eventDraft extends EditView {
   }
 
   view() {
-  	
-  	const fieldDescriptionEn = m(TextField, { 
-            label: 'Description [EN]', 
-            required: true, 
-            floatingLabel: true, 
-            dense: true, 
-            multiLine: true, 
-            rows: 6, 
-        });
-        
-    const buttonMaker = m(Button, {
+  	//Submit Button
+  	 const buttonMaker = m(Button, {
     	label: "Submit Request",
+    	color:   "white",
 
-    });
+    	 //Error pop-up in case not all mandatory fields were completed
+    	 //CURRENTLY: Error triggered onclick
+    	events: {
+					onclick: () => alert("You did not complete all prioritary fields!")
+				}
+     });
 
 
-    //	])
     return m('div',[
-    	m('h1', {class: "title"}, "Request a new event"),
+    	m('h2', {class: "title"}, "Creating a new event:"),
     	m('div.footer', buttonMaker),
     ]);
   }

src/events/eventWithExport.js

@@ -5,10 +5,27 @@ import {
     Card
 } from 'polythene-mithril';
 import EditView from '../views/editView';
+import {styler} from 'polythene-core-css';
+
+const draftStyle = [
+    {
+        '.footer': {
+            position: 'fixed',
+            left: 0,
+            bottom: 0,
+            width: '100%', 
+            'background-color': '#E8462B',
+            'text-align': 'right',
+        }
+    }
+]
+
+styler.add('eventDraft', draftStyle);
 
 export default class eventWithExport extends EditView {
     constructor(vnode) {
         super(vnode, 'events');
+        this.performedEdits = 0;
     }
 
     view() {
@@ -18,6 +35,8 @@ export default class eventWithExport extends EditView {
             required: true,
             floatingLabel: true,
             dense: true,
+            onChange : (newState) => {this.title_en = this.title_en;},
+            value: this.title_en,
         });
         const fieldDescriptionEn = m(TextField, { 
             label: 'Description [EN]', 
@@ -25,21 +44,26 @@ export default class eventWithExport extends EditView {
             floatingLabel: true, 
             dense: true, 
             multiLine: true, 
-            rows: 6, 
-        });
-        const creatorButton = m(Button, {
-            label: 'EXPORT'
-            // label: 'Create a hyperlink string describing your project.'
+            rows: 6,
+            onChange : (newState) => {this.fieldDescriptionEn = this.fieldDescriptionEn;},
+            value: this.fieldDescriptionEn,
         });
         // Needs administrator (Kulturi).
         const fieldLocation = m(TextField, {
             label: 'Location:',
             floatingLabel: true,
             required: true,
+            onChange : (newState) => {this.fieldLocation = this.fieldLocation;},
+            value: this.fieldLocation,
+        });
+        const buttonMaker = m(Button, {
+        label: "Submit Request!",
+        onClick: () => alert("You did not finish the editing of the fields.")
         });
 
         return m('div', [
-            m('h1', 'For the event creator:', fieldTitleEn, fieldDescriptionEn, 'For the AMIV administrator:', fieldLocation, creatorButton),
+            m('h1', 'For the event creator:', fieldTitleEn  , fieldDescriptionEn, 'For the AMIV administrator:', fieldLocation),
+            m('div.footer', buttonMaker),
         ]);
     }
 }
\ No newline at end of file

src/events/newEvent.js

 import m from 'mithril';
+import { TextField, Button, Checkbox, RadioGroup, IconButton, SVG } from 'polythene-mithril';
 import EditView from '../views/editView';
-
+import { icons } from '../views/elements';
 
 export default class newEvent extends EditView {
   constructor(vnode) {
     super(vnode, 'events');
+    this.currentpage = 1;
+  }
+
+  addOne() {
+    this.currentpage = this.currentpage + 1;
+    if (this.currentpage === 4) {
+      this.currentpage = 3;
+    }
   }
 
-  view() {
-    return m('h1', 'Hello World');
+  subOne() {
+    this.currentpage = this.currentpage - 1;
+    if (this.currentpage === 0) {
+      this.currentpage = 1;
+    }
+  }
+
+  view(vnode) {
+    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,
+    });
+
+    // Everything above is working fine atm. (13:35)
+
+    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 buttonInfoUp = m(Button, {
+      label: 'Select Infoscreen File',
+      events: {
+        onclick: () => console.log('click'),
+      },
+    });
+
+    const buttonPosterUp = m(Button, {
+      label: 'Select Poster File',
+      events: {
+        onclick: () => console.log('click'),
+      },
+    });
+
+    const buttonThumbUp = m(Button, {
+      label: 'Select Thumbnail File',
+      events: {
+        onclick: () => console.log('click'),
+      },
+    });
+
+    const buttonUploadAll = m(Button, {
+      label: 'Upload',
+      events: {
+        onclick: () => console.log('click'),
+      },
+    });
+
+    const iconRight = m(
+      IconButton, { events: { onclick: () => { this.addOne(); } } },
+      m(SVG, m.trust(icons.ArrowRight)),
+    );
+
+    const iconLeft = m(
+      IconButton, { events: { onclick: () => { this.subOne(); } } },
+      m(SVG, m.trust(icons.ArrowLeft)),
+    );
+
+    const checkboxAnnounce = m(Checkbox, {
+      defaultChecked: false,
+      label: 'Advertise in Announce?',
+      value: '100',
+    });
+
+    const checkboxWebsite = m(Checkbox, {
+      defaultChecked: false,
+      label: 'Advertise on Website?',
+      value: '100',
+    });
+
+    const checkboxInfoScreen = m(Checkbox, {
+      defaultChecked: false,
+      label: 'Advertise on Infoscreen?',
+      value: '100',
+    });
+
+    const checkboxAllowMail = m(Checkbox, {
+      defaultChecked: false,
+      label: 'Allow non AMIV Members?',
+      value: '100',
+    });
+
+    const radioButtonSelectionMode = m(RadioGroup, {
+      name: 'Selection Mode',
+      buttons: [
+        {
+          value: 'fcfs',
+          label: 'First come, first serve',
+        },
+        {
+          value: 'manual',
+          label: 'Selection made by organizer',
+        },
+      ],
+    });
+
+    function layoutWith(page) {
+      return m('div', page);
+    }
+    // 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));
+    } else if (this.currentpage === 2) {
+      return layoutWith(m(
+        'h1', 'Critical Information:', iconLeft, iconRight, m('br'), fieldStartDate, fieldEndDate, fieldStartRegDate,
+        fieldEndRegDate, fieldLocation, fieldPrice, fieldNumberOfParticipants,
+      ));
+    } 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 layoutWith(m(''));
   }
 }

src/views/elements.js

@@ -52,6 +52,7 @@ export const icons = {
   ArrowDown: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/><path d="M0-.75h24v24H0z" fill="none"/></svg>',
   iconUsersSVG: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
   iconEventSVG: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
+  ArrowLeft: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>',
 };
 
 export const BackButton = {