119 lines
3.3 KiB
JavaScript
119 lines
3.3 KiB
JavaScript
const m = require('mithril')
|
|
const Authentication = require('./authentication')
|
|
const PageTree = require('./page_tree')
|
|
|
|
const DarkModeStorageName = 'nfp_sites_darkmode'
|
|
|
|
const Menu = {
|
|
oninit: function(vnode) {
|
|
this.currentActive = 'home'
|
|
this.error = ''
|
|
this.loading = false
|
|
this.onbeforeupdate()
|
|
|
|
if (!PageTree.Tree.length) {
|
|
this.refreshTree()
|
|
}
|
|
|
|
|
|
},
|
|
|
|
onbeforeupdate: function() {
|
|
this.darkIsOn = localStorage.getItem(DarkModeStorageName)
|
|
|
|
let currentPath = m.route.get()
|
|
|
|
if (currentPath === '/') this.currentActive = 'home'
|
|
else if (currentPath === '/login') this.currentActive = 'login'
|
|
else if (currentPath && currentPath.startsWith('/page')) this.currentActive = currentPath.slice(currentPath.lastIndexOf('/') + 1)
|
|
},
|
|
|
|
refreshTree: function(vnode) {
|
|
this.loading = true
|
|
this.error = ''
|
|
|
|
PageTree.refreshTree()
|
|
.catch((err) => {
|
|
this.error = 'Error while getting menu tree: ' + err.message + '. Click here to try again.'
|
|
})
|
|
.then(() => {
|
|
this.loading = false
|
|
m.redraw()
|
|
})
|
|
},
|
|
|
|
logOut: function() {
|
|
Authentication.clearToken()
|
|
m.route.set('/')
|
|
},
|
|
|
|
toggleDarkMode: function() {
|
|
this.darkIsOn = !this.darkIsOn
|
|
if (this.darkIsOn) {
|
|
localStorage.setItem(DarkModeStorageName, true)
|
|
} else {
|
|
localStorage.removeItem(DarkModeStorageName)
|
|
}
|
|
document.body.className = (this.darkIsOn ? 'nightmode ' : 'daymode ')
|
|
+ (window.supportsavif ? 'avifsupport' : 'jpegonly')
|
|
},
|
|
|
|
view: function() {
|
|
return [
|
|
m('header', [
|
|
m('div.inside', [
|
|
m(m.route.Link,
|
|
{ href: '/', class: 'title' },
|
|
[
|
|
m('div.logo.spritesheet'),
|
|
m('h1', 'NFP Moe'),
|
|
]
|
|
),
|
|
m('aside', [
|
|
Authentication.currentUser
|
|
? [
|
|
m('p', [
|
|
'Welcome ' + Authentication.currentUser.name + '. ',
|
|
m('button', { onclick: this.logOut }, '(Log out)'),
|
|
]),
|
|
m('div', [
|
|
m(m.route.Link, { href: '/admin/articles/add' }, 'Create article'),
|
|
m(m.route.Link, { href: '/admin/articles' }, 'Articles'),
|
|
m(m.route.Link, { href: '/admin/pages' }, 'Pages'),
|
|
// m(m.route.Link, { hidden: Authentication.currentUser.rank < 100, href: '/admin/staff' }, 'Staff'),
|
|
])
|
|
]
|
|
: null,
|
|
m('button',
|
|
{ onclick: this.toggleDarkMode.bind(this) },
|
|
this.darkIsOn ? 'Day mode' : 'Night mode'
|
|
),
|
|
])
|
|
]),
|
|
]),
|
|
m('nav', [
|
|
m('div.inside', [
|
|
m(m.route.Link, {
|
|
href: '/',
|
|
class: this.currentActive === 'home' ? 'active' : '',
|
|
}, 'Home'),
|
|
this.loading ? m('div.loading-spinner') : null,
|
|
PageTree.Tree.map((page) => {
|
|
let className = ''
|
|
if (this.currentActive === page.path) {
|
|
className += 'active '
|
|
}
|
|
return m(m.route.Link, {
|
|
href: '/page/' + page.path,
|
|
class: className,
|
|
}, page.name)
|
|
}),
|
|
])
|
|
]),
|
|
this.error ? m('div.error', { onclick: this.refreshTree.bind(this) }, this.error) : null,
|
|
]
|
|
},
|
|
}
|
|
|
|
module.exports = Menu
|