gregorio/questionnaire
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Created registration form

Browse Source
This commit is contained in:
Gregorio Chiko Putra 2018-01-17 10:34:31 +07:00
parent 3f66ec9a4c
commit f679c7a4b1
6 changed files with 2010 additions and 1618 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

356
assets/js/components/client/register.js vendored Normal file
View 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

62
assets/js/components/header.js vendored
View File

@ -1,12 +1,6 @@
import m from "mithril" import m from "mithril"
import { Toolbar, ToolbarTitle, TextField, Button } from "polythene-mithril" import { Toolbar, ToolbarTitle, TextField, Button } from "polythene-mithril"
// import { User } from "../models/User" import Respondent from "../models/Respondent"
var email = {
value: "",
setValue: function(v) { email.value = v },
getValue: function() { return email.value }
}
const workflow = [ const workflow = [
{ {
@ -24,21 +18,31 @@ const workflow = [
}, },
{ {
number: 4, number: 4,
text: "Pilih kuesioner yang akan diisi." text: "Masukkan kode login Anda."
}, },
{ {
number: 5, number: 5,
text: "Masukkan kode login Anda (langkah 3)." text: "Pilih kuesioner yang akan diisi."
}, },
{ {
number: 6, number: 6,
text: "Silahkan isi kuesioner!" text: "Selamat mengisi kuesioner!"
} }
] ]
export const header = { export const header = {
view: function() { oninit: function(vnode) {
return [ 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", { m(".header-img", {
style: { style: {
backgroundImage: "url('img/head1.jpg')" backgroundImage: "url('img/head1.jpg')"
@ -73,23 +77,13 @@ export const header = {
m("form", { m("form", {
onsubmit: function(e) { onsubmit: function(e) {
e.preventDefault() e.preventDefault()
/* upload data email */ Respondent.fetchByEmail(email)
/* alias */
// if (email.value == "admin@questionnaire.dev") {
// m.route.set("/questionnaires")
// } else if (email.value == "") {
// document.getElementById("header-email")
// .querySelector("input").focus()
// } else {
// m.route.set("/auth/register/?invoker=" + email.value)
// }
m.route.set("/auth/register")
} }
}, m(TextField, { }, m(TextField, {
label: "E-mail", label: "E-mail",
id: "header-email", id: "header-email",
name: "email", name: "email",
value: User.current.email, value: email,
style: { style: {
padding: ".3em 1em .8em", padding: ".3em 1em .8em",
borderRadius: "2px" borderRadius: "2px"
@ -97,8 +91,8 @@ export const header = {
pattern: "[a-z\-\.0-9]+@[a-z\-\.]+[a-z]+", pattern: "[a-z\-\.0-9]+@[a-z\-\.]+[a-z]+",
validateOnInput: true, validateOnInput: true,
tone: "dark", tone: "dark",
onChange: function(state) { onChange: function(vstate) {
User.current.email = state.value state.email = vstate.value
}, },
events: { events: {
oncreate: function() { oncreate: function() {
@ -187,19 +181,9 @@ export const header = {
oTransition: "all .5s ease" oTransition: "all .5s ease"
}, },
onclick: function() { onclick: function() {
var scrollValue = 1 window.scrollTo(0,0)
var scrolling = setInterval(function() { document.getElementById("header-email")
window.scrollTo(0, window.scrollY - scrollValue) .querySelector("input").focus()
if (window.scrollY <= 100) {
scrollValue--
} else if (window.scrollY <= 0) {
window.clearInterval(scrolling)
document.getElementById("header-email")
.querySelector("input").focus()
} else {
scrollValue++
}
}, 10)
}, },
onmouseover: function() { onmouseover: function() {
this.style.transform = "translateY(-0.2em) rotate(270deg)" this.style.transform = "translateY(-0.2em) rotate(270deg)"

5
assets/js/index.js vendored
View File

@ -11,10 +11,10 @@ import { section } from "./components/section"
import { editSection } from "./components/editSection" import { editSection } from "./components/editSection"
import { question } from "./components/question" import { question } from "./components/question"
import clientQuestion from "./components/client/question" import clientQuestion from "./components/client/question"
import clientQuestionRedirect from "./components/client/questionRedirect"
import { editQuestion } from "./components/editQuestion" import { editQuestion } from "./components/editQuestion"
import signup from "./components/hello" import signup from "./components/hello"
import {userList, userAll} from "./components/beta/userList" import {userList, userAll} from "./components/beta/userList"
import registerForm from "./components/client/register"
m.route.prefix("#") m.route.prefix("#")
m.route(document.body, "/", { m.route(document.body, "/", {
@ -37,5 +37,6 @@ m.route(document.body, "/", {
"/user/questions/:id": question, "/user/questions/:id": question,
"/user/questions/:id/edit": editQuestion, "/user/questions/:id/edit": editQuestion,
"/beta/departments/:id": userList, "/beta/departments/:id": userList,
"/beta/users": userAll "/beta/users": userAll,
"/register": registerForm
}) })

26
assets/js/models/Category.js vendored Normal file
View File

@ -0,0 +1,26 @@
import m from "mithril"
const Category = {
current: {},
list: [],
fetch: function(id) {
m.request({
url: "http://api.questionnaire.dev/v1/categories/" + id,
method: "GET"
})
.then(function(res) {
Category.current = res
})
},
loadList: function() {
m.request({
url: "http://api.questionnaire.dev/v1/categories",
method: "GET"
})
.then(function(res) {
Category.list = res
})
}
}
export default Category

13
assets/js/models/Respondent.js vendored
View File

@ -14,6 +14,19 @@ const Respondent = {
Respondent.current = res Respondent.current = res
Respondent.loading = false Respondent.loading = false
}) })
},
fetchByEmail: function(email) {
Respondent.loading = true
m.request({
url: "http://api.questionnaire.dev/v1/respondents",
method: "POST",
data: {email}
})
.then(function(res) {
Respondent.current = res
Respondent.loading = false
console.log(Respondent.current, res);
})
} }
} }

3166
public/js/index.js vendored
View File

File diff suppressed because one or more lines are too long