-
Notifications
You must be signed in to change notification settings - Fork 0
/
add.html
89 lines (71 loc) · 3.16 KB
/
add.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/gold-email-input/gold-email-input.html">
<link rel="import" href="bower_components/gold-phone-input/gold-phone-input.html">
<link rel="import" href="bower_components/paper-input/paper-textarea.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/iron-form/iron-form.html">
<style is="custom-style">
/* TODO: Share the style across the pages for a consistent look. */
:root {
/* Label and underline color when the input is not focused */
--paper-input-container-color: var(--paper-orange-400);
/* Label and underline color when the input is focused */
--paper-input-container-focus-color: var(--paper-orange-400);
/* Label and underline color when the input is invalid
--paper-input-container-invalid-color: green; */
/* Input foreground color */
--paper-input-container-input-color: var(--paper-orange-400);
--paper-fab-background: var(--paper-orange-400);
--gold-phone-input-country-code: {
color: var(--paper-orange-400);
};
}
</style>
<body unresolved>
<form is="iron-form" id="form">
<paper-input label="First name" id="firstName" always-float-label autofocus></paper-input>
<paper-input label="Last name" id="lastName" always-float-label></paper-input>
<paper-textarea id="address" label="Address" always-float-label></paper-textarea>
<gold-phone-input auto-validate label="Phone" id="tel" always-float-label></gold-phone-input>
<gold-email-input auto-validate label="Email" id="email" always-float-label></gold-email-input>
</form>
<paper-fab mini icon="add" id="addMember"></paper-fab>
<script>
function realRequest() {
return {
"firstName": document.getElementById('firstName').value,
"lastName": document.getElementById('lastName').value,
"address": document.getElementById('address').value,
"tel": document.getElementById('tel').value,
"email": document.getElementById('email').value
};
}
function error() {
document.body.appendChild(document.createTextNode("Error adding new contact"));
}
function success() {
var addedText = document.createTextNode("Added new member!");
document.body.appendChild(addedText);
window.setTimeout(function() {
document.body.removeChild(addedText);
}, 5000);
document.getElementById("addMember").removeAttribute("disabled");
form.reset();
}
function fillAddRequest() {
// Poor man's prevention of double-clicks :)
document.getElementById("addMember").setAttribute("disabled", true);
this.request.method = "POST";
this.request.url = "/add";
this.request.params = "";
this.request.body = JSON.stringify(realRequest());
this.request.addEventListener("error", error);
this.request.addEventListener("response", success);
}
form.addEventListener("iron-form-presubmit", fillAddRequest, true);
addMember.addEventListener("click", function() { form.submit(); });
</script>