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

.eslintrc.js

@@ -11,5 +11,6 @@ module.exports = {
         "class-methods-use-this": 0,
         "prefer-destructuring": 1,
         "no-underscore-dangle": 0,
+        "linebreak-style": 0,
     }
 };

src/events/eventDraft.js

 import m from 'mithril';
+import { Button, Card, TextField } 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': 'red',
+		    color: 'white',
+		    'text-align': 'center',
+		}
+	}
+]
+
+styler.add('eventDraft', draftStyle);
 
 
 export default class eventDraft extends EditView {
@@ -8,6 +26,26 @@ export default class eventDraft extends EditView {
   }
 
   view() {
-    return m('h1', 'Hello World');
+  	
+  	const fieldDescriptionEn = m(TextField, { 
+            label: 'Description [EN]', 
+            required: true, 
+            floatingLabel: true, 
+            dense: true, 
+            multiLine: true, 
+            rows: 6, 
+        });
+        
+    const buttonMaker = m(Button, {
+    	label: "Submit Request",
+
+    });
+
+
+    //	])
+    return m('div',[
+    	m('h1', {class: "title"}, "Request a new event"),
+    	m('div.footer', buttonMaker),
+    ]);
   }
 }

src/events/eventWithExport.js

+import m from 'mithril';
+import { 
+    TextField,
+    Button,
+    Card
+} from 'polythene-mithril';
+import EditView from '../views/editView';
+
+export default class eventWithExport extends EditView {
+    constructor(vnode) {
+        super(vnode, 'events');
+    }
+
+    view() {
+        // Editable by event creator.
+        const fieldTitleEn = m(TextField, {
+            label: 'Event Title [EN]',
+            required: true,
+            floatingLabel: true,
+            dense: true,
+        });
+        const fieldDescriptionEn = m(TextField, { 
+            label: 'Description [EN]', 
+            required: true, 
+            floatingLabel: true, 
+            dense: true, 
+            multiLine: true, 
+            rows: 6, 
+        });
+        const creatorButton = m(Button, {
+            label: 'EXPORT'
+            // label: 'Create a hyperlink string describing your project.'
+        });
+        // Needs administrator (Kulturi).
+        const fieldLocation = m(TextField, {
+            label: 'Location:',
+            floatingLabel: true,
+            required: true,
+        });
+
+        return m('div', [
+            m('h1', 'For the event creator:', fieldTitleEn, fieldDescriptionEn, 'For the AMIV administrator:', fieldLocation, creatorButton),
+        ]);
+    }
+}
\ No newline at end of file

src/events/viewEvent.js

 import m from 'mithril';
 import ItemView from '../views/itemView';
-
+import {Button, Card, IconButton, Toolbar, ToolbarTitle } from "polythene-mithril"
+import { icons } from '../views/elements';
 
 export default class viewEvent extends ItemView {
-  constructor() {
-    super('events');
-  }
+    constructor() {
+        super('events');
+        this.details = false;
+        this.participants = false;
+        this.waitlist = false;
+        this.emailAdresses = false;
+    }
+
+    view() {
+        if (!this.data) return '';
+        console.log(Object.keys(this));
+        console.log(this['data']);
+
+        let displayCatchphraseDe = null;
+        let displayCatchphraseEn = null;
+        let displayDescriptionDe = null;
+        let displayDescriptionEn = null;
+        let displayPriority = null;
+
+        if(this.data.catchphrase_de) {
+            displayCatchphraseDe = m("t3", {class: "text"}, this.data.catchphrase_de);
+        }
+
+        if(this.data.catchphrase_en) {
+            displayCatchphraseEn = m("t3", {class: "text"}, this.data.catchphrase_en);
+        }
+
+        if(this.data.description_de) {
+            displayDescriptionDe = m("t3", {class: "text"}, this.data.description_de);
+        }
+
+        if(this.data.description_en) {
+            displayDescriptionEn = m("t3", {class: "text"}, this.data.description_en);
+        }
+
+        if(this.data.priority) {
+            displayPriority = m("t3", {class: "text"}, this.data.priority);
+        }
+
+        let displayDetailsButton = m(Toolbar, { compact: true, events: { onclick: () => this.details = !this.details } }, [
+            m(IconButton, { icon: { svg: m.trust(icons.ArrowRight) } }),
+            m(ToolbarTitle, { text: "details" }),
+        ]);
+        let displayParticipantsButton = m(Toolbar, { compact: true, events: { onclick: () => this.participants = !this.participants } }, [
+            m(IconButton, { icon: { svg: m.trust(icons.ArrowRight) } }),
+            m(ToolbarTitle, { text: "participants" }),
+        ]);
+        let displayWaitlistButton = m(Toolbar, { compact: true, events: { onclick: () => this.waitlist = !this.waitlist } }, [
+            m(IconButton, { icon: { svg: m.trust(icons.ArrowRight) } }),
+            m(ToolbarTitle, { text: "waitlist" }),
+        ]);
+        let displayEmailAdressesButton = m(Toolbar, { compact: true, events: { onclick: () => this.emailAdresses = !this.emailAdresses } }, [
+            m(IconButton, { icon: { svg: m.trust(icons.ArrowRight) } }),
+            m(ToolbarTitle, { text: "email adresses" }),
+        ]);
+
+
+
+        let displayDetails = null;
+        let displayParticipants = null;
+        let displayWaitlist = null;
+        let displayEmailAdresses = null;
+
+        if (this.details) {
+            displayDetailsButton = m(Toolbar, { compact: true, events: { onclick: () => this.details = !this.details } }, [
+                m(IconButton, { icon: { svg: m.trust(icons.ArrowDown) } }),
+                m(ToolbarTitle, { text: "details" }),
+            ]);
+            displayDetails = m(Card, {
+                content: [
+                    {
+                        primary: {
+                            title: "Catchphrase DE",
+                            subtitle: displayCatchphraseDe
+                        }
+                    },
+                    {
+                        primary: {
+                            title: "Catchphrase EN",
+                            subtitle: displayCatchphraseEn
+                        }
+                    },
+                    {
+                        primary: {
+                            title: "Description DE",
+                            subtitle: displayDescriptionDe
+                        }
+                    },
+                    {
+                        primary: {
+                            title: "Description EN",
+                            subtitle: displayDescriptionEn
+                        }
+                    },
+                    {
+                        primary: {
+                            title: "Priority",
+                            subtitle: displayPriority
+                        }
+                    },
+                    {
+                        actions: {
+                            content: [
+                                m(Button, {
+                                    label: "Action 1"
+                                }),
+                                m(Button, {
+                                    label: "Action 2"
+                                })
+                            ]
+                        }
+                    },
+                    {
+                        text: {
+                            content: "More text"
+                        }
+                    }
+                ]
+
+            })
+        }
+
+        if (this.participants) {
+            displayParticipantsButton = m(Toolbar, { compact: true, events: { onclick: () => this.participants = !this.participants } }, [
+                m(IconButton, { icon: { svg: m.trust(icons.ArrowDown) } }),
+                m(ToolbarTitle, { text: "participants" }),
+            ]);
+            displayParticipants = m(Card, {
+                content: [
+                    {
+                        primary: {
+                            title: "Primary title",
+                            subtitle: "Subtitle"
+                        }
+                    },
+                    {
+                        actions: {
+                            content: [
+                                m(Button, {
+                                    label: "Action 1"
+                                }),
+                                m(Button, {
+                                    label: "Action 2"
+                                })
+                            ]
+                        }
+                    },
+                    {
+                        text: {
+                            content: "More text"
+                        }
+                    }
+                ]
+
+            })
+        }
+
+        if (this.waitlist) {
+            displayWaitlistButton = m(Toolbar, { compact: true, events: { onclick: () => this.waitlist = !this.waitlist } }, [
+                m(IconButton, { icon: { svg: m.trust(icons.ArrowDown) } }),
+                m(ToolbarTitle, { text: "waitlist" }),
+            ]);
+            displayWaitlist = m(Card, {
+                content: [
+                    {
+                        primary: {
+                            title: "Primary title",
+                            subtitle: "Subtitle"
+                        }
+                    },
+                    {
+                        actions: {
+                            content: [
+                                m(Button, {
+                                    label: "Action 1"
+                                }),
+                                m(Button, {
+                                    label: "Action 2"
+                                })
+                            ]
+                        }
+                    },
+                    {
+                        text: {
+                            content: "More text"
+                        }
+                    }
+                ]
+
+            })
+        }
+
+        if (this.emailAdresses) {
+            displayEmailAdressesButton = m(Toolbar, { compact: true, events: { onclick: () => this.emailAdresses = !this.emailAdresses } }, [
+                m(IconButton, { icon: { svg: m.trust(icons.ArrowDown) } }),
+                m(ToolbarTitle, { text: "email adresses" }),
+            ]);
+            displayEmailAdresses = m(Card, {
+                content: [
+                    {
+                        primary: {
+                            title: "Primary title",
+                            subtitle: "Subtitle"
+                        }
+                    },
+                    {
+                        actions: {
+                            content: [
+                                m(Button, {
+                                    label: "Action 1"
+                                }),
+                                m(Button, {
+                                    label: "Action 2"
+                                })
+                            ]
+                        }
+                    },
+                    {
+                        text: {
+                            content: "More text"
+                        }
+                    }
+                ]
+
+            })
+        }
+
+
+        return m("div", {
+            style: { height: '100%', 'overflow-y': 'scroll'}
+            },[
+            m("h1", {class: "title"}, this.data.title_de),
+            m(Button, {element: 'div', label: "Update Event"}),
+
+            displayDetailsButton,
+            displayDetails,
+
+            displayParticipantsButton,
+            displayParticipants,
+
+            displayWaitlistButton,
+            displayWaitlist,
+
+            displayEmailAdressesButton,
+            displayEmailAdresses,
+
+        ])
+    }
+
 
-  view() {
-    return m('h1', 'Hello World');
-  }
 }

src/index.js

@@ -7,6 +7,7 @@ import EventTable from './events/table';
 import newEvent from './events/newEvent';
 import viewEvent from './events/viewEvent';
 import eventDraft from './events/eventDraft';
+import eventWithExport from './events/eventWithExport';
 import Layout from './layout';
 // import AnnounceTool from './announceTool';
 import './style';
@@ -33,6 +34,7 @@ m.route(root, '/users', {
   '/events/:id': layoutWith(viewEvent),
   '/newevent': layoutWith(newEvent),
   '/draftevent': layoutWith(eventDraft),
+  '/eventwithexport': layoutWith(eventWithExport),
   '/groups': layoutWith({
     view() {
       return m(TableView, {

src/views/elements.js

@@ -48,6 +48,8 @@ export const icons = {
   iconSearchSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>',
   iconBackSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>',
   iconClearSVG: '<svg width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>',
+  ArrowRight: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>',
+  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>',
 };