package.json

@@ -21,6 +21,8 @@
     "amiv-web-ui-components": "git+https://git@gitlab.ethz.ch/amiv/web-ui-components.git#61e129378f57e98d3f60106298251c3b0f4b2286",
     "axios": "^0.17.1",
     "client-oauth2": "^4.2.0",
+    "html-escape": "^2.0.0",
+    "marked": "^0.3.18",
     "mithril": "^1.1.6",
     "mithril-infinite": "^1.2.4",
     "polythene-core-css": "^1.2.0",

src/jobs/editJob.js

 import m from 'mithril';
+import { RaisedButton } from 'polythene-mithril';
+import { fileInput } from 'amiv-web-ui-components';
+// eslint-disable-next-line import/extensions
+import { apiUrl } from 'networkConfig';
 import EditView from '../views/editView';
 
-
 export default class newJob extends EditView {
   view() {
+    const buttonRight = m(RaisedButton, {
+      label: 'next',
+      disabled: this.currentpage === 5,
+      events: {
+        onclick: () => {
+          this.currentpage = Math.min(this.currentpage + 1, 5);
+        },
+      },
+    });
+
+    const buttonLeft = m(RaisedButton, {
+      label: 'previous',
+      disabled: this.currentpage === 1,
+      events: {
+        onclick: () => {
+          this.currentpage = Math.max(1, this.currentpage - 1);
+        },
+      },
+    });
+
+    const title = [
+      'Job Description', 'Advertisement', 'Logo'][this.currentpage - 1];
+
     return this.layout([
-      m('h3', 'Add a New Job Offer'),
-      ...this.form.renderPage({
-        title_de: { type: 'text', label: 'German Title' },
-      }),
+      m('h3', title),
+      buttonLeft,
+      m.trust(' '),
+      buttonRight,
+      m('br'),
+      m('div', {
+        style: { display: (this.currentpage === 1) ? 'block' : 'none' },
+      }, this.form.renderPage({
+        title_en: { type: 'text', label: 'English Job Title' },
+        description_en: {
+          type: 'text',
+          label: 'English Description',
+          multiLine: true,
+          rows: 5,
+        },
+        title_de: { type: 'text', label: 'German Job Title' },
+        description_de: {
+          type: 'text',
+          label: 'German Description',
+          multiLine: true,
+          rows: 5,
+        },
+        // location: { type: 'text', label: 'Location' },
+        time_end: { type: 'datetime', label: 'Prospective Job End Time' },
+        time_start: {
+          type: 'datetime',
+          label: 'Desired Job Start Time',
+          hint: 'If as soon as possible, write nothing.',
+        },
+      })),
+      m('div', {
+        style: { display: (this.currentpage === 2) ? 'block' : 'none' },
+      }, [
+        ...this.form.renderPage({
+          time_advertising_start: {
+            type: 'datetime',
+            label: 'Start of Advertisement on Website',
+            required: false,
+          },
+          time_advertising_end: {
+            type: 'datetime',
+            label: 'End of Advertisement on Website',
+            required: false,
+          },
+        }),
+        ...this.form.renderPage({
+          show_website: { type: 'checkbox', label: 'Advertise on Website' },
+        }),
+      ]),
+      m('div', {
+        style: { display: (this.currentpage === 3) ? 'block' : 'none' },
+      }, [
+        ['logo'].map(key => [ // think about adding a thumbnail.
+          this.data[`img_${key}`] ? m('img', {
+            src: `${apiUrl}${this.data[`img_${key}`].file}`,
+            style: { 'max-height': '50px', 'max-width': '100px' },
+          }) : m('div', `currently no ${key} image set`),
+          m(fileInput, this.form.bind({
+            name: `new_${key}`,
+            label: `New ${key} Image`,
+            accept: 'image/png, image/jpeg',
+          })),
+        ]),
+      ]),
     ]);
   }
 }

src/jobs/item.js

@@ -4,7 +4,7 @@ import editJob from './editJob';
 import ItemController from '../itemcontroller';
 import { loadingScreen } from '../layout';
 
-export default class jobModal {
+export default class JobItem {
   constructor() {
     this.controller = new ItemController('joboffers');
   }

src/jobs/viewJob.js

 import m from 'mithril';
-// eslint-disable-next-line import/extensions
-import { apiUrl } from 'networkConfig';
+import marked from 'marked';
+import escape from 'html-escape';
+import { Card, Toolbar, ToolbarTitle, Button, TextField} from 'polythene-mithril';
 import ItemView from '../views/itemView';
 import { dateFormatter } from '../utils';
-import { Property } from '../views/elements';
+import { Property, icons, svgWithTitle, imgWithTitle } from '../views/elements';
 
-// small helper class to display both German and English content together, dependent
-// on which content is available.
-class DuoLangProperty {
-  view({ attrs: { title, de, en } }) {
-    // TODO Lang indicators should be smaller and there should be less margin
-    // between languages
-    return m(
-      Property,
-      { title },
-      de ? m('div', [
-        m('div', { className: 'propertyLangIndicator' }, 'DE'),
-        m('p', de),
-      ]) : '',
-      en ? m('div', [
-        m('div', { className: 'propertyLangIndicator' }, 'EN'),
-        m('p', en),
-      ]) : '',
-    );
+export default class viewJob extends ItemView {
+  constructor(vnode) {
+    super(vnode);
+    this.editingGerman = false;
+    this.editingEnglish = false;
   }
-}
 
-export default class viewJob extends ItemView {
   view() {
+    const stdMargin = { margin: '5px' };
+
     return this.layout([
       m('div', [
         // company logo if existing
-        this.data.img_thumbnail ? m('img', {
-          src: `${apiUrl}/${this.data.logo.file}`,
-          height: '50px',
+        this.data.img_thumbnail ? m(imgWithTitle, {
+          svg: icons.iconUnknownCompany,
+          title: this.data.company,
+          margin: '4px',
           style: { float: 'left' },
-        }) : '',
+        }) : m(svgWithTitle, {
+          svg: icons.iconUnknownCompany,
+          title: this.data.company,
+          margin: '4px',
+          style: { float: 'left' },
+        }),
         m('h3', {
+          // margin: '100px',
           style: { 'margin-top': '0px', 'margin-bottom': '0px' },
         }, [this.data.title_de || this.data.title_en]),
       ]),
       // below the title, most important details are listed
-      this.data.time_end ? m(Property, {
-        title: 'Offer Ends',
-      }, `${dateFormatter(this.data.time_end)}`) : '',
+      m('div', { style: { display: 'flex' } }, [
+        m(
+          Property, { title: 'Expected starting time:', style: stdMargin },
+          this.data.time_start ? `${dateFormatter(this.data.time_start)}` : 'Unknown.',
+        ),
+        m(
+          Property, { title: 'Potential duration:', style: stdMargin },
+          this.data.duration ? `${dateFormatter(this.data.duration)}` : 'Unknown.',
+        ),
+        m(
+          Property, { title: 'Offer ends:', style: stdMargin },
+          this.data.time_advertising_end ? `${dateFormatter(this.data.time_advertising_end)}` : '',
+        ),
+      ]),
+      // m('div.viewcontainercolumn', [
+      m('div.viewcontainer', [
+        m('div.viewcontainercolumn', m(Card, {
+          content: m('div', [
+            m(Toolbar, { compact: true }, [
+              m(ToolbarTitle, { text: 'Deutsche Beschreibung' }),
+              m(Button, {
+                className: 'blue-button',
+                label: 'Beschreibung erfassen',
+                events: { onclick: () => { this.editingGerman = !this.editingGerman; } },
+              }),
+            ]),
+            this.editingGerman ? m(TextField, {
+              multiLine: true,
+            }) : m('p', m.trust(marked(escape(this.data.description_de)))),
+          ]),
+        })),
+        m('div.viewcontainercolumn', m(Card, {
+          // style: { height: '350px' },
+          content: m('div', [
+            m(Toolbar, { compact: true }, [
+              m(ToolbarTitle, { text: 'English description' }),
+              m(Button, {
+                className: 'blue-button',
+                label: 'Write description',
+                events: { onclick: () => { this.editingEnglish = !this.editingEnglish; } },
+              }),
+            ]),
+            this.editingEnglish ? m(TextField, {
+              multiLine: true,
+            }) : m('p', m.trust(marked(escape(this.data.description_en)))),
+          ]),
+        })),
+      ]),
+      // m(Card, [
+      //   this.data.location ? m(Property, { title: 'Location' }, `${this.data.location}`) :
+      //     m(Property, { title: 'Location' }, 'Unknown location.'),
+      //   m(chip, {
+      //     svg: this.data.show_website ? icons.checked : icons.clear,
+      //     border: '1px #aaaaaa solid',
+      //   }, 'website'),
+      //   m(DuoLangProperty, {
+      //     title: 'Description',
+      //     de: m('p', m.trust(marked(escape(this.data.description_de)))),
+      //     en: m('p', m.trust(marked(escape(this.data.description_en)))),
+      //   }),
+      // ]),
     ]);
   }
 }

src/testlist.js

-import m from 'mithril';
-import infinite from 'mithril-infinite';
-
-
-const pageSize = 5;
-const getIndex = pageNum => (pageNum - 1) * pageSize;
-
-function item(data, opts, itemIndex){
-  return m('div', data.firstname);
-}
-
-function pageData(pageNum) {
-  return new Promise((resolve, reject) => {
-    m.request({
-      method: 'GET',
-      dataType: 'jsonp',
-      headers: {
-        'Authorization': 'root'
-      },
-      url: `https://amiv-api.ethz.ch/users?max_results=5&page=${pageNum}`,
-    }).then((response) => {
-      resolve(response._items);
-    });
-  });
-}
-
-export default {
-  view: function() {
-    return m('div', {
-      style: {
-        height: '400px'
-      }
-      //className: 'experiment_list',
-      /*header: {
-        title: 'Users'
-      },*/
-    }, m(infinite, {
-        item,
-        pageData,
-      }),
-    );
-  }
-}

src/views/any_company.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/></svg>
\ No newline at end of file

src/views/elements.js

@@ -7,6 +7,7 @@ export const icons = {
   clear: '<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>',
+  iconUnknownCompany: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 10v7h3v-7H4zm6 0v7h3v-7h-3zM2 22h19v-3H2v3zm14-12v7h3v-7h-3zm-4.5-9L2 6v2h19V6l-9.5-5z"/></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>',
   iconJobsSVG: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>',
@@ -93,6 +94,59 @@ export class chip {
   }
 }
 
+export class svgWithTitle {
+  view({
+    attrs: {
+      svg,
+      title,
+      background = '#ffffff',
+      textColor = '#000000',
+      svgColor = '#000000',
+    },
+    children,
+  }) {
+    return m('div', {
+      style: {
+        height: '40px',
+        'background-color': background,
+        color: textColor,
+        'border-radius': '16px',
+        display: 'inline-flex',
+      },
+    }, [
+      svg && m(Icon, { svg: { content: m.trust(svg) }, size: 'large', style: { svgColor } }),
+      title && m('div', { style: { 'font-size': '26px' } }, title),
+      m('span', { style: { 'line-height': '2px' } }, children),
+    ]);
+  }
+}
+
+export class imgWithTitle {
+  view({
+    attrs: {
+      img,
+      title,
+      background = '#ffffff',
+      textColor = '#000000',
+    },
+    children,
+  }) {
+    return m('div', {
+      style: {
+        height: '40px',
+        'background-color': background,
+        color: textColor,
+        'border-radius': '16px',
+        display: 'inline-flex',
+      },
+    }, [
+      img && m('img', { height: '40' }),
+      title && m('div', { style: { 'font-size': '26px' } }, title),
+      m('span', { style: { 'line-height': '2px' } }, children),
+    ]);
+  }
+}
+
 export class submitButton {
   view({ attrs: { args, active, text } }) {
     const argsCopy = args;