questionnaire/assets/js/components/client/questionnaireList.js

137 lines
5.5 KiB
JavaScript
Vendored

import m from "mithril"
import { Card, Shadow } from "polythene-mithril"
import Questionnaire from "../../models/Questionnaire"
export const questionnaireList = {
oninit: function() {
Questionnaire.loadList()
},
view: function() {
return [
m(".header-img", {
style: {
backgroundImage: "url('img/head1.jpg')"
}
}),
m(".header-title#header-top", {
style: {
display: "table",
color: "#fff",
position: "fixed"
}
}, m("div", {
style: {
display: "table-cell",
verticalAlign: "middle",
textAlign: "center"
}
}, [
m("h1", {
style: {
fontWeight: "bold"
}
}, m("span", "Questionnaire List")),
m("p", "Daftar kuesioner yang dapat Anda isi"),
m("div", {
style: {padding: "3em 0"}
}),
m("span.fa-stack.fa-2x", {
id: "down",
style: {cursor: "pointer"},
onclick: function() {
var scrollValue = 1
var scrolling = setInterval(function() {
window.scrollTo(0, window.scrollY + scrollValue)
if (
window.pageYOffset
>= document.querySelector(".header-title").offsetHeight
|| window.pageYOffset
>= document.querySelector("article").offsetHeight
) {
window.clearInterval(scrolling)
}
scrollValue++
}, 10)
},
onmouseover: function() {
this.childNodes[0]
.style.color = "#fff"
this.childNodes[1]
.style.transform = "translateY(0.15em)"
this.childNodes[1]
.style.color = "#000"
},
onmouseout: function() {
this.childNodes[0]
.style.color = "rgba(0, 0, 0, .4)"
this.childNodes[1]
.style.transform = "translateY(0)"
this.childNodes[1]
.style.color = "#fff"
},
oncreate: function() {
document.getElementById("down")
.childNodes[0].style.color = "rgba(0, 0, 0, .4)"
document.getElementById("down")
.childNodes[1].style.color = "#fff"
}
}, [
m("i.fa.fa-circle.fa-stack-2x", {
style: {
transition: "all .3s ease .05s",
webkitTransition: "all .3s ease .05s",
mozTransition: "all .3s ease .05s",
oTransition: "all .3s ease .05s"
},
}),
m("i.fa.fa-angle-double-down.fa-stack-1x", {
style: {
transition: "all .3s ease .05s",
webkitTransition: "all .3s ease .05s",
mozTransition: "all .3s ease .05s",
oTransition: "all .3s ease .05s"
}
})
])
])),
m(".header-content", m("article", {
style: {backgroundColor: "#fff"}
}, [
m("h2.article-title", [
m("i.fa.fa-graduation-cap[aria-hidden=true]", {
style: {color: "rgb(255, 153, 0)"}
}),
m("div", {
style: {marginTop: ".3em"}
}, "Mahasiswa STIE BISMA LEPISI")
]),
m(".flex", {
style: {flexFlow: "row wrap"}
}, Questionnaire.loading ? null : Questionnaire.list.map(function(o) {
return m(Card, {
style: {width: "100%"},
before: m(Shadow),
content: [
{
primary: {
title: m("a", {
style: {cursor: "pointer"},
onclick: function() {
m.route.set("/questionnaires/" + o.id)
}
}, o.title),
// subtitle: o.description.length > 56 ?
// o.description.substr(0, 50) + " ..."
// : o.description
subtitle: o.description
}
}
]
})
// }
}))
]))
]
}
}