Commit 25300917 authored by scmoritz's avatar scmoritz Committed by scmoritz
Browse files

refactored navbar into own view

parent 70be4444
......@@ -10,6 +10,7 @@ import layout from './views/layout';
import amivLayout from './views/amiv/amivLayout';
import frontpage from './views/frontpage';
import login from './views/login';
import logout from './views/logout';
import statuten from './views/amiv/statuten';
import contact from './views/contact';
import aufenthaltsraum from './views/amiv/aufenthaltsraum';
......@@ -48,6 +49,11 @@ m.route(document.body, '/', {
return m(layout, m(login));
},
},
'/logout': {
render() {
return m(layout, m(logout));
},
},
'/amiv/board': {
render() {
return m(layout, m(amivLayout, m(board)));
......
import m from 'mithril';
import { i18n, switchLanguage } from '../models/language';
import { Tabs, Button } from '../components';
import { checkLogin, isLoggedIn, logout } from '../models/auth';
const defaultTabs = ['AMIV', 'Events', 'Studienunterlagen', 'Jobs'];
const tabsLoggedOut = ['Login'];
const tabsLoggedIn = ['Profil', 'Logout'];
const gotoRoute = route => {
const current = m.route.get();
if (current !== route) m.route.set(route);
};
import { Button } from '../components';
import Navbar from './navbar';
export default class Layout {
constructor() {
checkLogin();
this.setTabs();
this.selectedTabIndex = 0;
this.wasLoggedIn = isLoggedIn();
}
setTabs() {
const tabOptions = isLoggedIn() ? tabsLoggedIn : tabsLoggedOut;
this.tabs = [...defaultTabs, ...tabOptions];
}
selectTab(tabIndex) {
const tabString = this.tabs[tabIndex];
switch (tabString) {
case 'AMIV':
gotoRoute('/');
break;
case 'Events':
gotoRoute('/events');
break;
case 'Studienunterlagen':
gotoRoute('/studydocuments');
break;
case 'Jobs':
gotoRoute('/jobs');
break;
case 'Profil':
gotoRoute('/profile');
break;
case 'Logout':
gotoRoute('/');
logout();
break;
case 'Login':
gotoRoute('/login');
break;
default:
console.log('Tab not known!');
}
}
onupdate() {
if (this.wasLoggedIn !== isLoggedIn()) {
this.selectedTabIndex = 0;
this.wasLoggedIn = isLoggedIn();
this.setTabs();
}
}
view(vnode) {
static view(vnode) {
return m('div#amiv-container', [
m(Tabs, {
onChange: ({ index }) => {
this.selectedTabIndex = index;
this.selectTab(index);
},
tabs: this.tabs.map(tab => ({ label: tab })),
selectedTab: this.selectedTabIndex,
}),
m(Navbar),
m(Button, {
label: i18n('language_button'),
events: { onclick: () => switchLanguage() },
......
import m from 'mithril';
import { logout } from '../models/auth';
module.exports = {
oninit() {
logout();
m.route.set('/');
},
view() {
return m('');
},
};
import m from 'mithril';
import { Tabs } from '../components';
import { checkLogin, isLoggedIn } from '../models/auth';
const defaultTabs = ['AMIV', 'Events', 'Studienunterlagen', 'Jobs'];
const tabsLoggedOut = ['Login'];
const tabsLoggedIn = ['Profile', 'Logout'];
const tabToUrl = {
AMIV: { href: '/', onupdate: m.route.link, index: 0 },
Events: { href: '/events', onupdate: m.route.link, index: 1 },
Studienunterlagen: { href: '/studydocuments', onupdate: m.route.link, index: 2 },
Jobs: { href: '/jobs', onupdate: m.route.link, index: 3 },
Login: { href: '/login', onupdate: m.route.link, index: 4 },
Profile: { href: '/profile', onupdate: m.route.link, index: 4 },
Logout: { href: '/logout', onupdate: m.route.link, index: 5 },
};
export default class Navbar {
constructor() {
checkLogin();
this.wasLoggedIn = isLoggedIn();
this.selectedTabIndex = 0;
Object.values(tabToUrl)
.filter(tab => m.route.get().includes(tab.href))
.forEach(tab => {
this.selectedTabIndex = tab.index;
});
this.tabOptions = {
className: 'themed-tabs',
activeSelected: true,
element: 'tab',
selectedTab: this.selectedTabIndex,
};
this.setTabs();
}
setTabs() {
if (isLoggedIn()) {
this.tabs = [...defaultTabs, ...tabsLoggedIn];
} else {
this.tabs = [...defaultTabs, ...tabsLoggedOut];
}
this.tabOptions.tabs = [];
this.tabs.forEach(tab => {
this.tabOptions.tabs.push({
label: tab,
url: tabToUrl[tab],
});
});
}
onupdate() {
Object.values(tabToUrl)
.filter(tab => m.route.get().includes(tab.href))
.forEach(tab => {
this.selectedTabIndex = tab.index;
});
this.tabOptions.selectedTab = this.selectedTabIndex;
if (this.wasLoggedIn !== isLoggedIn()) {
this.wasLoggedIn = isLoggedIn();
this.setTabs();
}
}
view() {
return m(Tabs, this.tabOptions);
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment