Skip to content

Commit c778806

Browse files
author
Balashov Nikita
committed
PREVIOUS COMMITS
1 parent 40d2252 commit c778806

File tree

20 files changed

+1690
-0
lines changed

20 files changed

+1690
-0
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
phone-book/node_modules
2+
phone-book/img
3+
phone-book/package-lock.json
4+
15
# Logs
26
logs
37
*.log
@@ -62,3 +66,4 @@ typings/
6266

6367
# IDE
6468
.idea
69+

‎phone-book/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
package-lock.json
2+
img

‎phone-book/.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"git.ignoreLimitWarning": true
3+
}

‎phone-book/build/bundle.js‎

Lines changed: 173 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎phone-book/img/icon.ico‎

166 KB
Binary file not shown.

‎phone-book/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<title>Phone Book</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="style/main.css">
9+
<link rel="stylesheet" href="style/keypad.css">
10+
<link rel="stylesheet" href="style/add-user.css">
11+
<link rel="stylesheet" href="style/user-page.css">
12+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
13+
</head>
14+
<body>
15+
<div id="mountMode"></div>
16+
17+
<script src="build/bundle.js"></script>
18+
<script defer="" src="https://use.fontawesome.com/releases/v5.1.1/js/all.js" integrity="sha384-BtvRZcyfv4r0x/phJt9Y9HhnN5ur1Z+kZbKVgzVBAlQZX4jvAuImlIz+bG7TS00a" crossorigin="anonymous"></script>
19+
</body>
20+
</html>

‎phone-book/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "phone-book",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"presets": ["env"],
7+
"scripts": {
8+
"test": "echo \"Error: no test specified\" && exit 1",
9+
"dev": "webpack --mode development",
10+
"build": "webpack --mode production"
11+
},
12+
"keywords": [],
13+
"author": "",
14+
"license": "ISC",
15+
"devDependencies": {
16+
"babel-core": "^6.26.3",
17+
"babel-loader": "^7.1.5",
18+
"babel-preset-env": "^1.7.0",
19+
"webpack": "^4.16.3",
20+
"webpack-cli": "^3.1.0"
21+
}
22+
}

‎phone-book/src/add-user/add-user.js‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import {Url} from '../url/url';
2+
3+
class AddUserPage {
4+
constructor(store) {
5+
this.setStateContact = () => {
6+
const {setState} = store;
7+
const initializeState = {
8+
stateName: 'ADD USER',
9+
activePage: this.render(),
10+
};
11+
setState(initializeState);
12+
}
13+
14+
this.serverSide = new Url();
15+
}
16+
17+
render() {
18+
return /*html*/`
19+
<div id="add-user-page">
20+
21+
<header class="container">
22+
<div class="row d-flex justify-content-center">
23+
<span class="add-user-header">Add new user</span>
24+
</div>
25+
</header>
26+
27+
<main class="container add-user-block">
28+
<form>
29+
30+
<div class="form-group">
31+
<label for="fullName-input">Full name:</label>
32+
<input type="text" name="fullName" class="form-control" id="fullName-input" placeholder="Enter full name" required>
33+
</div>
34+
35+
<div class="form-group">
36+
<label for="email-input">Email address:</label>
37+
<input type="email" name="email" class="form-control" id="email-input" placeholder="Enter email" required>
38+
</div>
39+
40+
<div class="form-group">
41+
<label for="phoneNumber-input">Phone Number:</label>
42+
<input type="number" name="phone" class="form-control" id="phoneNumber-input" placeholder="Enter phone number" required>
43+
</div>
44+
45+
<div class="form-group">
46+
<label for="birthDate-input">Birth date:</label>
47+
<input type="date" name="birthdate" class="form-control" id="birthDate-input">
48+
</div>
49+
50+
<div class="form-group">
51+
<label for="address-input">Address:</label>
52+
<input type="text" name="address" class="form-control" id="address-input" placeholder="Enter address">
53+
</div>
54+
55+
<div class="form-group">
56+
<label for="gender-selection">Gender:</label>
57+
<select name="gender" class="form-control" id="gender-selection">
58+
<option>Male</option>
59+
<option>Female</option>
60+
</select>
61+
</div>
62+
63+
<div class="form-group">
64+
<label for="avatarUrl-input">Avatar url:</label>
65+
<input type="text" name="avatarUrl" class="form-control" id="avatarUrl-input" aria-describedby="avatarHelp" placeholder="Enter avatar url">
66+
<small id="avatarHelp" class="form-text text-muted">ex: https://cloud-drive/photo123456.</small>
67+
</div>
68+
69+
<div class="row d-flex justify-content-center">
70+
<button type="submit" class="btn btn-primary">Add user</button>
71+
</div>
72+
73+
</form>
74+
</main>
75+
76+
</div>
77+
`;
78+
}
79+
80+
applyListenersForAddUserPage() {
81+
// const fullNameInput = document.querySelector('#fullName-input');
82+
// const emailInput = document.querySelector('#email-input');
83+
// const phoneNumberInput = document.querySelector('#phoneNumber-input');
84+
// const birthDateInput = document.querySelector('#birthDate-input');
85+
// const addressInput = document.querySelector('#address-input');
86+
// const genderInput = document.querySelector('#gender-selection');
87+
// const avatarUrlInput = document.querySelector('#avatarUrl-input');
88+
89+
const addUserForm = document.querySelector('form');
90+
const inputs = [...addUserForm.elements]
91+
.filter(elem => elem.tagName === 'INPUT' || elem.tagName === 'SELECT');
92+
93+
addUserForm.addEventListener('submit', (e) => {
94+
95+
const user = inputs.reduce((newUser, input) => {
96+
const KEY = input.name;
97+
const VALUE = input.value;
98+
99+
if(VALUE.lenght !== 0) {
100+
newUser[KEY] = VALUE;
101+
}
102+
if(VALUE === 'Male' || VALUE === 'Female') {
103+
const firstChar = input.value[0];
104+
newUser[KEY] = firstChar;
105+
}
106+
return newUser;
107+
}, {});
108+
109+
this.serverSide.postUser(user);
110+
})
111+
}
112+
113+
isValid() {
114+
115+
}
116+
}
117+
118+
export {AddUserPage};

‎phone-book/src/components/mobile-operators-identifiers.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const MOBILE_OPERATORS_IDENTIFICATORS = {
2+
kuivstar: [
3+
'067',
4+
'096',
5+
'097',
6+
'098',
7+
'068'
8+
],
9+
vodafone: [
10+
'050',
11+
'066',
12+
'095',
13+
'099'
14+
],
15+
life: [
16+
'063',
17+
'093',
18+
'073'
19+
]
20+
};
21+
22+
23+
export {
24+
MOBILE_OPERATORS_IDENTIFICATORS
25+
};

‎phone-book/src/components/users.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {Url} from '../url/url';
2+
3+
const serverSide = new Url();
4+
const users = serverSide.getUsersFromServer();
5+
6+
export {users};

0 commit comments

Comments
 (0)