EasyCode-JavaScriptReact-v1 · horidon · Aug 20, 2018 · Aug 20, 2018 · Aug 20, 2018 · Aug 20, 2018
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,7 @@
+phone-book/node_modules
+phone-book/img
+phone-book/package-lock.json
+
 # Logs
 logs
 *.log
@@ -62,3 +66,4 @@ typings/
 
 # IDE
 .idea
+
diff --git a/phone-book/.gitignore b/phone-book/.gitignore
@@ -0,0 +1,2 @@
+package-lock.json
+img
diff --git a/phone-book/.vscode/settings.json b/phone-book/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+"git.ignoreLimitWarning": true
+}
diff --git a/phone-book/build/bundle.js b/phone-book/build/bundle.js
diff --git a/phone-book/img/icon.ico b/phone-book/img/icon.ico
diff --git a/phone-book/index.html b/phone-book/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+
+ <head>
+ <link rel="icon" href="img/icon.ico">
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <title>Phone Book</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="stylesheet" href="style/main.css">
+ <link rel="stylesheet" href="style/keypad.css">
+ <link rel="stylesheet" href="style/add-user.css">
+ <link rel="stylesheet" href="style/user-page.css">
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
+ </head>
+ <body>
+ <div id="mountMode"></div>
+
+ <script src="build/bundle.js"></script>
+ <script defer="" src="https://use.fontawesome.com/releases/v5.1.1/js/all.js" integrity="sha384-BtvRZcyfv4r0x/phJt9Y9HhnN5ur1Z+kZbKVgzVBAlQZX4jvAuImlIz+bG7TS00a" crossorigin="anonymous"></script>
+ </body>
+</html>
diff --git a/phone-book/package.json b/phone-book/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "phone-book",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "presets": ["env"],
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "dev": "webpack --mode development",
+ "build": "webpack --mode production"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "ISC",
+ "devDependencies": {
+ "babel-core": "^6.26.3",
+ "babel-loader": "^7.1.5",
+ "babel-preset-env": "^1.7.0",
+ "webpack": "^4.16.3",
+ "webpack-cli": "^3.1.0"
+ }
+}
diff --git a/phone-book/src/add-user/add-user.js b/phone-book/src/add-user/add-user.js
@@ -0,0 +1,272 @@
+import {Url} from '../url/url';
+
+class AddUserPage {
+ constructor(store, accountName) {
+ this.setStateAddUser = () => {
+ const {setState} = store;
+ const initializeState = {
+ stateName: 'ADD USER',
+ activePage: this.render(),
+ };
+ setState(initializeState);
+ window.history.pushState(initializeState.activePage, initializeState.stateName);
+ }
+
+ this.url = new Url(accountName);
+ }
+
+ render() {
+ return /*html*/`
+ <div id="add-user-page">
+
+ <header class="container">
+ <div class="row d-flex justify-content-center">
+ <span class="add-user-header">Add new user</span>
+ </div>
+ </header>
+
+ <main class="container add-user-block">
+ <form>
+
+ <div class="form-group">
+ <label for="fullName-input"><span class="required">*</span>Full name:</label>
+ <input type="text" name="fullName" class="form-control" id="fullName-input" placeholder="Enter full name" required>
+ </div>
+
+ <div class="form-group">
+ <label for="email-input"><span class="required">*</span>Email address:</label>
+ <input type="email" name="email" class="form-control" id="email-input" placeholder="Enter email" required>
+ </div>
+
+ <div class="form-group">
+ <label for="phoneNumber-input"><span class="required">*</span>Phone Number:</label>
+ <input type="number" name="phone" class="form-control" id="phoneNumber-input" placeholder="Enter phone number" required>
+ </div>
+
+ <div class="form-group">
+ <label for="birthDate-input">Birth date:</label>
+ <input type="date" name="birthdate" class="form-control" id="birthDate-input">
+ </div>
+
+ <div class="form-group">
+ <label for="address-input">Address:</label>
+ <input type="text" name="address" class="form-control" id="address-input" placeholder="Enter address">
+ </div>
+
+ <div class="form-group">
+ <label for="gender-selection">Gender:</label>
+ <select name="gender" class="form-control" id="gender-selection">
+ <option>Male</option>
+ <option>Female</option>
+ </select>
+ </div>
+
+ <div class="form-group">
+ <label for="avatarUrl-input">Avatar url:</label>
+ <input type="text" name="avatarUrl" class="form-control" id="avatarUrl-input" aria-describedby="avatarHelp" placeholder="Enter avatar url">
+ <small id="avatarHelp" class="form-text text-muted">ex: https://cloud-drive/photo123456.</small>
+ </div>
+
+ <div class="row d-flex justify-content-center">
+ <button type="submit" class="btn btn-primary">Add user</button> 
+ </div>
+
+ </form>
+ </main>
+
+ </div>
+ `;
+ }
+
+ applyListenersForAddUserPage() {
+
+ const addUserForm = document.querySelector('form');
+
+ const handlerForInputs = (e) => {
+ if(e.target.name === 'fullName') {
+ const VALUE = e.target.value;
+
+ if(VALUE.length === 0) {
+ e.target.classList.remove('wrong')
+ e.target.classList.remove('correct')
+ return;
+ }
+
+ if(this.isValidFullName(VALUE)) {
+ e.target.classList.add('correct')
+ e.target.classList.remove('wrong')
+ } else {
+ e.target.classList.add('wrong')
+ e.target.classList.remove('correct')
+ } 
+ }
+
+ if(e.target.name === 'email') {
+ const VALUE = e.target.value;
+
+ if(VALUE.length === 0) {
+ e.target.classList.remove('wrong')
+ e.target.classList.remove('correct')
+ return;
+ }
+
+ if(this.isValidEmail(VALUE)) {
+ e.target.classList.add('correct')
+ e.target.classList.remove('wrong')
+ } else {
+ e.target.classList.add('wrong')
+ e.target.classList.remove('correct')
+ }
+ }
+
+ if(e.target.name === 'phone') {
+ const VALUE = e.target.value;
+
+ if(VALUE.length === 0) {
+ e.target.classList.remove('wrong')
+ e.target.classList.remove('correct')
+ return;
+ }
+
+ if(VALUE.length > 9) {
+ e.target.classList.add('correct')
+ e.target.classList.remove('wrong')
+ } else {
+ e.target.classList.add('wrong')
+ e.target.classList.remove('correct')
+ }
+ }
+
+ if(e.target.name === 'birthdate') {
+ const VALUE = e.target.value;
+
+ if(VALUE.length === 0) {
+ e.target.classList.remove('correct')
+ return;
+ }
+
+ if(VALUE.length > 9) {
+ e.target.classList.add('correct')
+ }
+ }
+
+ if(e.target.name === 'address') {
+ const VALUE = e.target.value;
+
+ if(VALUE.length === 0) {
+ e.target.classList.remove('correct')
+ return;
+ }
+
+ if(VALUE.length > 0) {
+ e.target.classList.add('correct')
+ }
+ }
+
+ if(e.target.name === "avatarUrl") {
+ const VALUE = e.target.value;
+
+ if(VALUE.length === 0) {
+ e.target.classList.remove('wrong')
+ e.target.classList.remove('correct')
+ return;
+ }
+
+ if(this.isValidURL(VALUE)) {
+ e.target.classList.add('correct')
+ e.target.classList.remove('wrong')
+ } else {
+ e.target.classList.add('wrong')
+ e.target.classList.remove('correct')
+ }
+ }
+
+ };
+
+ addUserForm.addEventListener('input', handlerForInputs)
+
+ const inputs = [...addUserForm.elements]
+ .filter(elem => elem.tagName === 'INPUT' || elem.tagName === 'SELECT');
+
+ const handlerForSubmit = (e) => {
+ e.preventDefault();
+
+ const user = inputs.reduce((newUser, input) => {
+ if(input.classList.contains('wrong')) {
+ alert(`${input.name} is incorrect!`);
+ return;
+ };
+ if(input.value.length !== 0 
+ && input.name !== 'phone' 
+ && input.name !== 'gender'
+ && input.name !== 'fullName'
+ ) {
+ newUser[input.name] = input.value;
+ }
+ if(input.value.length !== 0 && input.name === 'phone') {
+ newUser[input.name] = input.value.replace(/(.{3})(.{3})(.{2})/g, '($1) $2-$3-');
+ }
+ if(input.name === 'gender') {
+ input.value === "Male"
+ ? newUser[input.name] = "M"
+ : newUser[input.name] = "F"
+ }
+ if(input.value.length !== 0 && input.name === 'fullName') {
+ const formatedFullName = input.value.split(' ').reduce((output, word, index) => {
+ const splitedWord = word.toLowerCase().split('');
+ const firstLetter = splitedWord[0].toUpperCase();
+ splitedWord[0] = firstLetter;
+ output += splitedWord.join('');
+
+ if(index === 0) {
+ output += ' ';
+ }
+
+ return output;
+ }, '');
+
+ newUser[input.name] = formatedFullName;
+ }
+ return newUser;
+ }, {})
+
+ if(user) {
+ this.url.postUser(user);
+
+ inputs.forEach(input => {
+ if(input.tagName !== "SELECT") {
+ input.value = "";
+ input.classList.remove('correct');
+ }
+ })
+ } else {
+ alert('Something is incorrect!')
+ }
+ }
+
+ addUserForm.addEventListener('submit', handlerForSubmit)
+ }
+
+ isValidFullName(value) {
+ const splitedValue = value.split(' ');
+
+ return splitedValue.length === 2 && splitedValue[0].length > 0 && splitedValue[1].length > 0;
+ }
+
+ isValidEmail(value) {
+ const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+ return re.test(String(value).toLowerCase()); 
+ }
+
+ isValidURL(value) {
+ const re = new RegExp('^(https?:\\/\\/)?'+ // protocol
+ '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+ // domain name
+ '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
+ '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
+ '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
+ '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
+ return re.test(String(value).toLowerCase());
+ }
+}
+
+export {AddUserPage};
diff --git a/phone-book/src/authorization-page/authorization-page.js b/phone-book/src/authorization-page/authorization-page.js
@@ -0,0 +1,27 @@
+class AuthorizationPage{
+ constructor(store) {
+ this.setStateAuthorization = (listeners) => {
+ const {setState} = store;
+ const initializeState = {
+ stateName: 'AUTHORIZATION',
+ activePage: this.render()
+ };
+ setState(initializeState);
+ window.history.pushState(initializeState.activePage, initializeState.stateName);
+ }
+ }
+
+ render() {
+ return /*html*/`
+ <div class="authorization-block">
+ <h1 class="au-title">Authorization</h1>
+ <div class="wraper-for-authorization-inputs">
+ <input class="au-input" type="text" placeholder="Login">
+ <button id="log-in" class="au-btn btn btn-primary">Log in</button>
+ </div>
+ </div>
+ `;
+ }
+}
+
+export {AuthorizationPage};
diff --git a/phone-book/src/components/mobile-operators-identifiers.js b/phone-book/src/components/mobile-operators-identifiers.js
@@ -0,0 +1,25 @@
+const MOBILE_OPERATORS_IDENTIFICATORS = {
+ kuivstar: [
+ '067',
+ '096',
+ '097',
+ '098',
+ '068'
+ ],
+ vodafone: [
+ '050',
+ '066',
+ '095',
+ '099'
+ ],
+ life: [
+ '063',
+ '093',
+ '073'
+ ]
+};
+
+
+export {
+ MOBILE_OPERATORS_IDENTIFICATORS
+};