Created registration form
This commit is contained in:
356
assets/js/components/client/register.js
vendored
Normal file
356
assets/js/components/client/register.js
vendored
Normal file
@@ -0,0 +1,356 @@
|
||||
import m from "mithril"
|
||||
import powerform from "powerform"
|
||||
import moment from "moment"
|
||||
import DatePicker from "../../custom/mithril-datepicker"
|
||||
import {
|
||||
Card,
|
||||
Button,
|
||||
TextField,
|
||||
RadioGroup,
|
||||
List,
|
||||
ListTile
|
||||
} from "polythene-mithril"
|
||||
import Category from "../../models/Category"
|
||||
import Respondent from "../../models/Respondent"
|
||||
|
||||
const registerForm = {
|
||||
form: powerform({
|
||||
name: function(v) {
|
||||
if (_.isEmpty(v)) {
|
||||
return "Tuliskan nama Anda"
|
||||
}
|
||||
},
|
||||
gender: function(v) {
|
||||
if (_.isEmpty(v)) return "Pilih salah satu"
|
||||
},
|
||||
birthdate: function(v) {
|
||||
|
||||
},
|
||||
handphone: function(v) {
|
||||
if (_.isEmpty(v)) return "Tuliskan nomor telepon Anda"
|
||||
},
|
||||
occupation: function(v) {
|
||||
if (_.isEmpty(v)) return "Tuliskan pekerjaan Anda saat ini"
|
||||
},
|
||||
category: function(v) {
|
||||
if (_.isEmpty(v)) return "Pilih kategori Anda"
|
||||
}
|
||||
}),
|
||||
oninit: function(vnode) {
|
||||
registerForm.form.name("")
|
||||
registerForm.form.gender("")
|
||||
registerForm.form.birthdate(moment().format("YYYY-MM-DD HH:mm:ss"))
|
||||
registerForm.form.handphone("")
|
||||
registerForm.form.occupation("")
|
||||
registerForm.form.category("")
|
||||
|
||||
Category.loadList()
|
||||
var showCategory = false
|
||||
vnode.state = {showCategory}
|
||||
},
|
||||
view: function(vnode) {
|
||||
var state = vnode.state
|
||||
var showCategory = state.showCategory
|
||||
return _.isEmpty(Category.list) ?
|
||||
[m(".signal"), m(".signal.late")] : [
|
||||
m(".header-img", {
|
||||
style: {
|
||||
backgroundImage: "url('img/head1.jpg')"
|
||||
}
|
||||
}),
|
||||
m(".header-content", {
|
||||
style: {top: 0}
|
||||
}, m("article", {
|
||||
style: {backgroundColor: "#fff"}
|
||||
}, [
|
||||
m("h2.article-title", {
|
||||
style: {marginBottom: ".5em"}
|
||||
}, m("div", {
|
||||
style: {marginTop: ".3em"}
|
||||
}, "Registrasi")),
|
||||
m(".flex"),
|
||||
m(".header-title", {
|
||||
style: {
|
||||
display: "table"
|
||||
}
|
||||
}, m("form", {
|
||||
onsubmit: function(e) {
|
||||
e.preventDefault()
|
||||
m.route.set("/questionnaires")
|
||||
},
|
||||
style: {
|
||||
padding: "1em",
|
||||
display: "table",
|
||||
height: "100%",
|
||||
width: "100%"
|
||||
}
|
||||
}, m("div", {
|
||||
style: {
|
||||
display: "table-cell",
|
||||
verticalAlign: "middle",
|
||||
}
|
||||
}, m(".flex", {
|
||||
style: {
|
||||
width: "100%",
|
||||
}
|
||||
}, m(".constant"), m(Card, {
|
||||
className: "front-card",
|
||||
style: {
|
||||
height: "100%",
|
||||
margin: "0"
|
||||
},
|
||||
content: [
|
||||
{
|
||||
primary: {
|
||||
title: "Data Diri",
|
||||
subtitle: "Silahkan isi data diri Anda terlebih dahulu"
|
||||
}
|
||||
},
|
||||
{
|
||||
text: {
|
||||
className: "flex but",
|
||||
content: [
|
||||
m("div", {
|
||||
style: {
|
||||
flexBasis: "45%"
|
||||
}
|
||||
}, [
|
||||
m(TextField, {
|
||||
className: "firstInput",
|
||||
label: "Nama Lengkap",
|
||||
floatingLabel: true,
|
||||
tight: true,
|
||||
autofocus: true,
|
||||
value: registerForm.form.name(),
|
||||
events: {
|
||||
oninput: function() {
|
||||
registerForm.form.name()
|
||||
}
|
||||
},
|
||||
validate: function() {
|
||||
return {
|
||||
valid: registerForm.form.name.isValid(),
|
||||
error: registerForm.form.name.error()
|
||||
}
|
||||
}
|
||||
}),
|
||||
m("span", {
|
||||
style: {
|
||||
color: "rgba(0, 0, 0, .4)",
|
||||
fontSize: "16px",
|
||||
fontWeight: "400",
|
||||
lineHeight: "24px"
|
||||
}
|
||||
}, "Jenis Kelamin *"),
|
||||
m(RadioGroup, {
|
||||
id: "gender",
|
||||
name: "gender",
|
||||
style: {
|
||||
margin: ".5rem 0"
|
||||
},
|
||||
buttons: [
|
||||
{
|
||||
id: "gender-m",
|
||||
value: "m",
|
||||
label: "Laki-laki",
|
||||
events: {
|
||||
oncreate: function() {
|
||||
document.getElementById("gender-m")
|
||||
.querySelector("input")
|
||||
.required = "required"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "gender-f",
|
||||
value: "f",
|
||||
label: "Perempuan",
|
||||
events: {
|
||||
oncreate: function() {
|
||||
document.getElementById("gender-f")
|
||||
.querySelector("input")
|
||||
.required = "required"
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
onChange: function(state) {
|
||||
registerForm.form.gender(state.value)
|
||||
}
|
||||
}),
|
||||
m("div", {
|
||||
style: {
|
||||
color: "rgba(0, 0, 0, .4)",
|
||||
fontSize: "16px",
|
||||
fontWeight: "400",
|
||||
lineHeight: "24px",
|
||||
marginBottom: ".5em"
|
||||
}
|
||||
}, "Tanggal Lahir *"),
|
||||
m(DatePicker, {
|
||||
date: registerForm.form.birthdate(),
|
||||
locale: "id-id",
|
||||
onchange: function(chosenDate) {
|
||||
registerForm.form.birthdate(moment(chosenDate).format("YYYY-MM-DD HH:mm:ss"))
|
||||
},
|
||||
oncreate: function() {
|
||||
var target = document.querySelector(".mithril-date-picker")
|
||||
var click = target.childNodes[0].onclick
|
||||
var className = target.childNodes[0].className
|
||||
return m.mount(target, {
|
||||
view: function() {
|
||||
return m("input", {
|
||||
className: className,
|
||||
value: moment(registerForm.form.birthdate()).format("ddd, DD MMM YYYY"),
|
||||
onclick: click,
|
||||
required: "required",
|
||||
readonly: "readonly",
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
]),
|
||||
m("div", {
|
||||
style: {
|
||||
flexGrow: "1"
|
||||
}
|
||||
}),
|
||||
m("div", {
|
||||
style: {
|
||||
flexBasis: "45%"
|
||||
}
|
||||
}, [
|
||||
m(TextField, {
|
||||
label: "No. Handphone",
|
||||
floatingLabel: true,
|
||||
tight: true,
|
||||
validateOnInput: true,
|
||||
events: {
|
||||
oninput: function() {
|
||||
registerForm.form.handphone(this.value)
|
||||
}
|
||||
},
|
||||
value: registerForm.form.handphone(),
|
||||
validate: function() {
|
||||
return {
|
||||
valid: registerForm.form.handphone.isValid(),
|
||||
error: registerForm.form.handphone.error()
|
||||
}
|
||||
}
|
||||
}),
|
||||
m(TextField, {
|
||||
className: "lastInput",
|
||||
label: "Pekerjaan",
|
||||
floatingLabel: true,
|
||||
tight: true,
|
||||
events: {
|
||||
oninput: function() {
|
||||
registerForm.form.occupation(this.value)
|
||||
}
|
||||
},
|
||||
value: registerForm.form.occupation(),
|
||||
validate: function() {
|
||||
return {
|
||||
valid: registerForm.form.occupation.isValid(),
|
||||
error: registerForm.form.occupation.error()
|
||||
}
|
||||
}
|
||||
}),
|
||||
m(TextField, {
|
||||
id: "category",
|
||||
label: "Kategori",
|
||||
events: {
|
||||
onfocus: function() {
|
||||
state.showCategory = true
|
||||
}
|
||||
},
|
||||
validate: function() {
|
||||
return {
|
||||
valid: registerForm.form.category.isValid(),
|
||||
error: registerForm.form.category.error()
|
||||
}
|
||||
},
|
||||
validateOnInput: true,
|
||||
value: registerForm.form.category().name
|
||||
}),
|
||||
m(List, {
|
||||
tiles: Category.list.data.map(function(o) {
|
||||
return m(ListTile, {
|
||||
title: o.name,
|
||||
value: o.id,
|
||||
hoverable: true,
|
||||
events: {
|
||||
onclick: function() {
|
||||
registerForm.form.category(o)
|
||||
state.showCategory = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}),
|
||||
compact: true,
|
||||
borders: true,
|
||||
style: {
|
||||
backgroundColor: "rgba(0, 0, 0, .04)",
|
||||
display: showCategory ? "block" : "none"
|
||||
}
|
||||
})
|
||||
])
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
actions: {
|
||||
content: [
|
||||
m(".flex", [
|
||||
m(Button, {
|
||||
element: "button",
|
||||
label: [
|
||||
m("i.fa.fa-chevron-left.fa-fw[aria-hidden=true]"),
|
||||
m.trust(" "),
|
||||
"kembali"
|
||||
],
|
||||
style: {
|
||||
backgroundColor: "rgb(255, 153, 0)",
|
||||
padding: ".8em",
|
||||
fontSize: "14px",
|
||||
lineHeight: "14px",
|
||||
fontWeight: "500",
|
||||
textTransform: "uppercase",
|
||||
whiteSpace: "pre"
|
||||
},
|
||||
tone: "dark"
|
||||
}),
|
||||
m(".flex"),
|
||||
m(Button, {
|
||||
element: "button",
|
||||
label: [
|
||||
"kirim",
|
||||
m.trust(" "),
|
||||
m("i.fa.fa-upload.fa-fw[aria-hidden=true]")
|
||||
],
|
||||
type: "submit",
|
||||
style: {
|
||||
backgroundColor: "rgb(255, 153, 0)",
|
||||
padding: ".8em",
|
||||
fontSize: "14px",
|
||||
lineHeight: "14px",
|
||||
fontWeight: "500",
|
||||
textTransform: "uppercase",
|
||||
whiteSpace: "pre"
|
||||
},
|
||||
tone: "dark"
|
||||
})
|
||||
])
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}), m(".constant"))))),
|
||||
m(".flex")
|
||||
]))
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export default registerForm
|
||||
Reference in New Issue
Block a user