216 lines
7.8 KiB
JavaScript
Vendored
216 lines
7.8 KiB
JavaScript
Vendored
import m from "mithril"
|
|
import { Toolbar, ToolbarTitle, TextField, Button } from "polythene-mithril"
|
|
import Respondent from "../models/Respondent"
|
|
|
|
const workflow = [
|
|
{
|
|
number: 1,
|
|
text: "Daftarkan email pada kolom email di atas.",
|
|
subText: "Jika sudah pernah mendaftar, lanjut ke langkah 4"
|
|
},
|
|
{
|
|
number: 2,
|
|
text: "Isi formulir data diri."
|
|
},
|
|
{
|
|
number: 3,
|
|
text: "Server mengirim email berupa kode login."
|
|
},
|
|
{
|
|
number: 4,
|
|
text: "Masukkan kode login Anda."
|
|
},
|
|
{
|
|
number: 5,
|
|
text: "Pilih kuesioner yang akan diisi."
|
|
},
|
|
{
|
|
number: 6,
|
|
text: "Selamat mengisi kuesioner!"
|
|
}
|
|
]
|
|
|
|
export const header = {
|
|
oninit: function(vnode) {
|
|
var email = ""
|
|
vnode.state = {email}
|
|
},
|
|
view: function(vnode) {
|
|
var state = vnode.state
|
|
var email = state.email
|
|
return !_.isNil(Respondent.current.data) ?
|
|
_.isEmpty(Respondent.current.data) ?
|
|
m.route.set("/register?u=" + email)
|
|
: m.route.set("/questionnaires")
|
|
: [
|
|
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("i.fa.fa-check-square.fa-fw[aria-hidden=true]"),
|
|
m.trust(" "),
|
|
m("span", "Questionnaire"),
|
|
m.trust(" "),
|
|
m("i.fa.fa-window-close.fa-fw[aria-hidden=true]")
|
|
]),
|
|
m("p", "Web-based kuesioner untuk Yayasan Widya Anindya"),
|
|
m("div", { style: { margin: "5em 0" } }),
|
|
m("form", {
|
|
onsubmit: function(e) {
|
|
e.preventDefault()
|
|
Respondent.fetchByEmail(email)
|
|
}
|
|
}, m(TextField, {
|
|
label: "E-mail",
|
|
id: "header-email",
|
|
name: "email",
|
|
value: email,
|
|
style: {
|
|
padding: ".3em 1em .8em",
|
|
borderRadius: "2px"
|
|
},
|
|
pattern: "[a-z\-\.0-9]+@[a-z\-\.]+[a-z]+",
|
|
validateOnInput: true,
|
|
tone: "dark",
|
|
onChange: function(vstate) {
|
|
state.email = vstate.value
|
|
},
|
|
events: {
|
|
oncreate: function() {
|
|
var target = document.getElementById("header-email")
|
|
var selector = target.querySelector("input")
|
|
selector.onfocus = function() {
|
|
target.style
|
|
.backgroundColor = "rgba(0, 0, 0, .5)"
|
|
}
|
|
selector.autocomplete = "off"
|
|
target.removeChild(
|
|
target.querySelector(
|
|
".pe-textfield__error-placeholder"
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}),
|
|
m(Button, {
|
|
element: "button",
|
|
type: "submit",
|
|
label: [
|
|
m("i.fa.fa-check-square-o.fa-fw[aria-hidden=true]"),
|
|
m.trust(" "),
|
|
"Mulai"
|
|
],
|
|
style: {
|
|
backgroundColor: "#fff",
|
|
padding: ".8em",
|
|
fontSize: "14px",
|
|
lineHeight: "14px",
|
|
fontWeight: "500",
|
|
textTransform: "uppercase",
|
|
whiteSpace: "pre",
|
|
}
|
|
}))
|
|
])),
|
|
m(".header-content", m("article", {
|
|
style: {
|
|
backgroundColor: "#fff",
|
|
}
|
|
}, [
|
|
m("h2.article-title", [
|
|
m("i.fa.fa-rocket[aria-hidden=true]", {
|
|
style: {
|
|
color: "rgb(255, 153, 0)"
|
|
}
|
|
}),
|
|
m("div", {
|
|
style: {
|
|
marginTop: ".3em"
|
|
}
|
|
}, "Workflow")
|
|
]),
|
|
workflow.map(function(v) {
|
|
return m(".workflow-items-wrapper.flex", v.number == workflow.length ? {
|
|
style: {
|
|
marginBottom: "0"
|
|
}
|
|
} : null, [
|
|
m(".workflow-items", m("div", v.number)),
|
|
m(".workflow-items-description", m("p", [
|
|
v.text,
|
|
!_.isNil(v.subText) ?
|
|
[
|
|
m("br"),
|
|
m("i", "(" + v.subText + ")")
|
|
]
|
|
: null
|
|
]))
|
|
])
|
|
}),
|
|
m(".article-break"),
|
|
m("h2.article-title", {
|
|
style: {
|
|
marginBottom: "0"
|
|
}
|
|
}, [
|
|
m("i.fa.fa-space-shuttle.fa-rotate-270[aria-hidden=true]", {
|
|
style: {
|
|
color: "rgb(255, 153, 0)",
|
|
cursor: "pointer",
|
|
transition: "all .5s ease",
|
|
webkitTransition: "all .5s ease",
|
|
mozTransition: "all .5s ease",
|
|
oTransition: "all .5s ease"
|
|
},
|
|
onclick: function() {
|
|
window.scrollTo(0,0)
|
|
document.getElementById("header-email")
|
|
.querySelector("input").focus()
|
|
},
|
|
onmouseover: function() {
|
|
this.style.transform = "translateY(-0.2em) rotate(270deg)"
|
|
var target = document.getElementById("ready-text")
|
|
target
|
|
.style.color = "rgb(255, 153, 0)"
|
|
target
|
|
.innerHTML = target.innerHTML.replace("?", "!")
|
|
},
|
|
onmouseout: function() {
|
|
this.style.transform = "translateY(0) rotate(270deg)"
|
|
var target = document.getElementById("ready-text")
|
|
target
|
|
.style.color = "rgb(0, 0, 0)"
|
|
target
|
|
.innerHTML = target.innerHTML.replace("!", "?")
|
|
}
|
|
}),
|
|
m("#ready-text", {
|
|
style: {
|
|
marginTop: ".3em"
|
|
}
|
|
}, "Siap?")
|
|
]),
|
|
m(".article-break")
|
|
]))
|
|
]
|
|
}
|
|
}
|