125 lines
4.7 KiB
JavaScript
Vendored
125 lines
4.7 KiB
JavaScript
Vendored
import m from "mithril"
|
|
import stream from "mithril/stream"
|
|
import {
|
|
Toolbar,
|
|
ToolbarTitle,
|
|
Shadow,
|
|
List,
|
|
ListTile,
|
|
Search,
|
|
IconButton
|
|
} from "polythene-mithril"
|
|
import Dept from "../../models/beta/Dept"
|
|
|
|
const barsIcon = "<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z\" fill=\"#fff\"/></svg>"
|
|
const backIcon = "<svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1664 896v128q0 53-32.5 90.5t-84.5 37.5h-704l293 294q38 36 38 90t-38 90l-75 76q-37 37-90 37-52 0-91-37l-651-652q-37-37-37-90 0-52 37-91l651-650q38-38 91-38 52 0 90 38l75 74q38 38 38 91t-38 91l-293 293h704q52 0 84.5 37.5t32.5 90.5z\"/></svg>"
|
|
const searchIcon = "<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>"
|
|
|
|
const searchBox = {
|
|
view: function() {
|
|
return m(Search, {
|
|
textfield: {label: "Search"},
|
|
buttons: {
|
|
none: {
|
|
after: m(IconButton, {
|
|
icon: {svg: m.trust(searchIcon)},
|
|
inactive: true
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
const menuList = {
|
|
oninit: function(vnode) {
|
|
const show = stream(false)
|
|
vnode.state = {
|
|
show
|
|
}
|
|
},
|
|
view: function(vnode) {
|
|
const state = vnode.state
|
|
const show = state.show()
|
|
return m("div", [
|
|
m(Toolbar, {
|
|
style: {
|
|
position: "fixed",
|
|
zIndex: "11",
|
|
width: "100%",
|
|
backgroundColor: "rgba(255, 255, 255, .93)"
|
|
}
|
|
}, [
|
|
m("#bars", {
|
|
style: {cursor: "pointer", display: "inline-block", marginLeft: "1em"},
|
|
onclick: function() {
|
|
this.classList.toggle("change")
|
|
state.show(!state.show())
|
|
}
|
|
}, [
|
|
m(".bar1"),
|
|
m(".bar2"),
|
|
m(".bar3")
|
|
]),
|
|
m(ToolbarTitle, {
|
|
text: vnode.attrs.title
|
|
})
|
|
]),
|
|
m("#menu", {
|
|
style: {
|
|
left: show ? "0" : "-100%"
|
|
}
|
|
}, [
|
|
m(Shadow),
|
|
m(List, {
|
|
id: "menu-list",
|
|
tiles: [
|
|
m(ListTile, {
|
|
title: "All Users",
|
|
hoverable: true,
|
|
events: {
|
|
onclick: function() {
|
|
m.route.set("/beta/users")
|
|
}
|
|
}
|
|
}),
|
|
m(ListTile, {
|
|
header: true,
|
|
title: "Department List"
|
|
}),
|
|
vnode.attrs.list.map(function(o) {
|
|
return m(ListTile, {
|
|
title: o.name,
|
|
hoverable: true,
|
|
events: {
|
|
onclick: function() {
|
|
state.show(false)
|
|
document.getElementById("bars")
|
|
.classList.toggle("change")
|
|
m.route.set("/beta/departments/" + o.id)
|
|
}
|
|
}
|
|
})
|
|
})
|
|
]
|
|
})
|
|
]),
|
|
m("#menu-overlay", {
|
|
style: {
|
|
opacity: ".4",
|
|
display: show ? "block" : "none"
|
|
},
|
|
onclick: function() {
|
|
if (show) {
|
|
state.show(false)
|
|
document.getElementById("bars")
|
|
.classList.toggle("change")
|
|
}
|
|
}
|
|
})
|
|
])
|
|
}
|
|
}
|
|
|
|
export default menuList
|