'Dropdown menus included in to study docs

Merge remote-tracking branch 'origin/master' into listview

package.json

@@ -30,6 +30,7 @@
     "eslint": "^4.10.0",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-plugin-import": "^2.8.0",
+    "i18n4v": "^0.2.2",
     "mithril": "^1.1.5",
     "polythene-css": "^1.0.0",
     "polythene-mithril": "^1.0.0",

src/index.js

 // src/index.js
 import m from 'mithril';
+import { getLang } from './models/language';
 import studydocList from './views/studydocs/studydocList';
 import studydocNew from './views/studydocs/studydocNew';
 import eventList from './views/events/eventList';
@@ -19,6 +20,8 @@ import companyList from './views/companies/companyList';
 import companyDetail from './views/companies/companyDetail';
 import './views/styles/base.less';
 
+getLang();
+
 m.route(document.body, '/', {
   '/': {
     render() {

src/languages/de.json

+{
+    "values": {
+        "AMIV": "AMIV",
+        "Events": "Events",
+        "Studienunterlagen": "Studienunterlagen",
+        "Jobs": "Jobs",
+        "Login": "Login",
+        "Profil": "Profil",
+        "example content": "beispiel Inhalte",
+        "Vorstand": "Vorstand",
+        "Aufenthaltsraum": "Aufenthaltsraum",
+        "Statuten": "Statuten",
+        "Kommissionen": "Kommissionen",
+        "Protokolle": "Protokolle",
+        "language_button": "EN",
+        "event.title": "TItel",
+        "event.start_time": "Start Zeit",
+        "event.signup_count": "Anmeldungen",
+        "event.spots": "Freie Plätze"
+
+    }
+}

src/languages/en.json

+{
+    "values": {
+        "AMIV": "AMIV",
+        "Events": "Events",
+        "Studienunterlagen": "Study Documents",
+        "Jobs": "Jobbies",
+        "Login": "Login",
+        "Profil": "Profile",
+        "example content": "blablabla",
+        "Vorstand": "Board Members",
+        "Aufenthaltsraum": "Aufenthaltsraum in englisch",
+        "Statuten": "Statuten in english",
+        "Kommissionen": "Commissions",
+        "Protokolle": "Protocols",
+        "language_button": "DE",
+        "event.title": "Title",
+        "event.start_time": "Starting time",
+        "event.signup_count": "Signup count",
+        "event.spots": "Spots"
+
+    }
+}

src/models/language.js

+import i18n from 'i18n4v';
+import german from '../languages/de.json';
+import english from '../languages/en.json';
+
+let currentLang;
+
+function changeLanguage(lang) {
+  i18n.translator.reset();
+  if (lang === 'de') {
+    currentLang = 'de';
+    i18n.translator.add(german);
+  } else {
+    currentLang = 'en';
+    i18n.translator.add(english);
+  }
+  localStorage.setItem('lanuage', currentLang);
+}
+
+function getLang() {
+  let lang = localStorage.getItem('lanuage');
+  if (!lang) {
+    if (navigator.languages !== undefined) {
+      lang = navigator.languages.toString();
+    } else {
+      lang = navigator.language;
+    }
+  }
+  if (lang.indexOf('de') !== -1) {
+    changeLanguage('de');
+  } else {
+    changeLanguage('en');
+  }
+}
+
+function switchLanguage() {
+  if (currentLang === 'en') {
+    changeLanguage('de');
+  } else {
+    changeLanguage('en');
+  }
+}
+
+function currentLanguage() {
+  return currentLang;
+}
+
+export { i18n, changeLanguage, switchLanguage, currentLanguage, getLang };

src/views/amiv/amivLayout.js

 import m from 'mithril';
+import { i18n } from '../../models/language';
 
 module.exports = {
   view(vnode) {
     return m('div', [
       m('ul', [
-        m('li', m('a', { href: '/amiv/board', oncreate: m.route.link }, 'Vorstand')),
         m(
           'li',
-          m('a', { href: '/amiv/aufenthaltsraum', oncreate: m.route.link }, 'Aufenthaltsraum')
+          m(
+            'a',
+            {
+              href: '/amiv/board',
+              oncreate: m.route.link,
+            },
+            i18n('Vorstand')
+          )
+        ),
+        m(
+          'li',
+          m(
+            'a',
+            {
+              href: '/amiv/aufenthaltsraum',
+              oncreate: m.route.link,
+            },
+            i18n('Aufenthaltsraum')
+          )
+        ),
+        m(
+          'li',
+          m(
+            'a',
+            {
+              href: '/amiv/statuten',
+              oncreate: m.route.link,
+            },
+            i18n('Statuten')
+          )
+        ),
+        m(
+          'li',
+          m(
+            'a',
+            {
+              href: '/amiv/comissions',
+              oncreate: m.route.link,
+            },
+            i18n('Kommissionen')
+          )
+        ),
+        m(
+          'li',
+          m(
+            'a',
+            {
+              href: '/amiv/protocols',
+              oncreate: m.route.link,
+            },
+            i18n('Protokolle')
+          )
         ),
-        m('li', m('a', { href: '/amiv/statuten', oncreate: m.route.link }, 'Statuten')),
-        m('li', m('a', { href: '/amiv/comissions', oncreate: m.route.link }, 'Kommissionen')),
-        m('li', m('a', { href: '/amiv/protocols', oncreate: m.route.link }, 'Protokolle')),
       ]),
       m('main', vnode.children),
     ]);

src/views/events/eventList.js

 import m from 'mithril';
+import { i18n } from '../../models/language';
 import * as events from '../../models/events';
 
 const date = `${new Date().toISOString().split('.')[0]}Z`;
@@ -26,10 +27,10 @@ export default class EventList {
     return m('table', [
       m('thead', [
         m('tr', [
-          m('th', 'Title'),
-          m('th', 'Starting time'),
-          m('th', 'Signup count'),
-          m('th', 'Spots'),
+          m('th', i18n('event.title')),
+          m('th', i18n('event.start_time')),
+          m('th', i18n('event.signup_count')),
+          m('th', i18n('event.spots')),
         ]),
       ]),
       m(

src/views/frontpage.js

 import m from 'mithril';
+import { apiUrl } from '../models/config';
 import * as events from '../models/events';
 
 const date = `${new Date().toISOString().split('.')[0]}Z`;
 
 // Render the frontpage cards, with href and imageurl
 const renderCards = item => {
-  const { title, href, imageurl } = item;
+  const { title, href } = item;
+  const imageurl = item.img_infoscreen ? `${apiUrl}${item.img_infoscreen.file}` : '';
   return m(
     'div.frontpage-card',
     { style: `background-image: url(${imageurl})` },
@@ -15,7 +17,8 @@ const renderCards = item => {
 
 // Render the Hot Cards, with link and imageurl
 const renderHotCards = (item, index) => {
-  const { title, href, imageurl } = item;
+  const { title, href } = item;
+  const imageurl = item.img_infoscreen ? `${apiUrl}${item.img_infoscreen.file}` : '';
   if (index === 0) {
     return m(
       'div.hot-first-card',
@@ -82,9 +85,13 @@ export default class Frontpage {
 
   view() {
     return m('div#frontpage-container', [
+      m('h2', "What's HOT right now?"),
       m('div.hot-row', this.hot.map((item, index) => renderHotCards(item, index))),
+      m('h2', 'Events'),
       m('div.frontpage-row', this.events.map(item => renderCards(item))),
+      m('h2', 'Jobs'),
       m('div.frontpage-row', this.jobs.map(item => renderCards(item))),
+      m('h2', 'Join us on social media!'),
       m('div.frontpage-row', this.socialmedia.map(item => renderCards(item))),
     ]);
   }

src/views/layout.js

 import m from 'mithril';
+import { i18n, switchLanguage } from '../models/language';
+import { Tabs, Button } from '../components';
 import { checkLogin, isLoggedIn, logout } from '../models/auth';
-import { Tabs } from '../components';
 
 const defaultTabs = ['AMIV', 'Events', 'Studienunterlagen', 'Jobs'];
 const tabsLoggedOut = ['Login'];
@@ -72,6 +73,10 @@ export default class Layout {
         tabs: this.tabs.map(tab => ({ label: tab })),
         selectedTab: this.selectedTabIndex,
       }),
+      m(Button, {
+        label: i18n('language_button'),
+        events: { onclick: () => switchLanguage() },
+      }),
       m('main', vnode.children),
     ]);
   }

src/views/styles/frontpage.less

@@ -6,13 +6,21 @@
     align-content: center;
     text-align: center;
     border: none;
+
+    h2 {
+        text-align: center;
+        color: blue;
+        font-family: 'Times New Roman', Times, serif;
+        grid-column-start: 1;
+        grid-column-end: 13;
+    }
     
     // Hot sector on the frontpage
     .hot-row {
         // Grid of 12 frame colums
         grid-column-start: 1;
         grid-column-end: 13;
-        grid-row-start: 1;
+        grid-row-start: 2;
         grid-row-end: 15;
 
         // Grid declaration for sub items, 2 frame columns