EasyCode-JavaScriptReact-v1 · NataliaButenko · Jul 24, 2018 · Jul 31, 2018 · Jul 31, 2018 · Aug 3, 2018
diff --git a/phoneApp/app/addUser.js b/phoneApp/app/addUser.js
@@ -0,0 +1,111 @@
+import {basicUserInfo, additionalUserInfo} from "./constants";
+import {API_URL} from './constants';
+import User from './user';
+
+class AddUser {
+
+  	fieldsBasicAddUserInfo() {
+  		let open = '<div class="main-info-holder">';
+  		let addPhoto = `
+        	<div class="edit-foto">
+          		<button class="add-foto-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
+            	<span>add foto</span></button>
+        	</div>
+  		`;
+  		let editBasicField = basicUserInfo.reduce((start, elem) => {
+          start +=`
+            <div class="edit-field add-btn">
+            			<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
+            			<input type="text" class="glyphicon-plus-sign ${elem.fieldName}" placeholder="${elem.placeholder}"/>
+
+            </div>
+          `;
+  			return start;
+  		},'');
+  		let resEditBasicField = `${addPhoto} ${open} ${editBasicField}</div>`;
+  		return resEditBasicField;
+  	};
+
+  	fieldAdditionalAddUserInfo() {
+  		let open = `
+        	<div class="scroll-holder">
+          		<div class="edit-info">
+  		`;
+  		let editAdditionalField = additionalUserInfo.reduce((start, elem) => {
+       /* let addClass =  elem.replace(/\s/g, '_');*/
+  			start += `
+            	<div class="edit-field add-btn">
+              	<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
+                	<input type="text" class="glyphicon-plus-sign ${elem.fieldName}" placeholder="${elem.placeholder}"/>
+            	</div>
+  			`;
+  			return start;
+  		}, '');
+  		let buttonDelContacts = `
+            <div class="edit-field">
+              	<button href="#" class="delete-contact">delete contact</button>
+            </div>
+  		`;
+  		let resEditAdditionalField = `${open} ${editAdditionalField}${buttonDelContacts}</div>`;
+  		return resEditAdditionalField;
+  	};
+
+    addEvents() {
+      let delEnteredData = document.querySelector('button.delete-contact');
+      delEnteredData.addEventListener('click', function() {
+        let input = document.querySelectorAll('input[placeholder]');
+        [...input].forEach(elem => {
+          elem.value = '';
+        })
+      });
+      let addUser = document.querySelector('button.done-btn');
+      addUser.addEventListener('click', function() {
+        let input = document.querySelectorAll('input[placeholder]');
+      	let objUser = [...input].reduce((done, elem) => {
+      		if(elem.className === 'glyphicon-plus-sign email') {
+      			done.email = elem.value;
+					} else if(elem.className === 'glyphicon-plus-sign firstName') {
+      		  done.fullName = `${elem.value} `;
+          } else if(elem.className === 'glyphicon-plus-sign lastName') {
+            done.fullName += elem.value;
+          } else if(elem.className === 'glyphicon-plus-sign phone') {
+            done.phone = elem.value;
+          };
+      		return done;
+				}, {});
+
+        fetch(API_URL, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(objUser)
+        })
+          .then(response => response.json())
+          .then(data => {
+            let user = new User(data);
+            user.renderUser();
+          })
+			});
+    }
+
+  	renderAddUser() {
+  		let captionAddUser = document.querySelector('.container.top-radius');
+  		captionAddUser.innerHTML = `
+   			<nav class="user-top-line">
+          		<a href="user.html">Cancel</a>
+          		<button class = "done-btn">Done</button>
+        		</nav>
+  		`;
+  		let mainContainer = document.querySelector('main .container');
+  		mainContainer.innerHTML = `
+        		<div class="edit-main-info">
+        		${this.fieldsBasicAddUserInfo()}
+        		</div>
+        		${this.fieldAdditionalAddUserInfo()}
+  		`;
+      this.addEvents();
+  	};
+};
+
+export default AddUser;
diff --git a/phoneApp/app/constants.js b/phoneApp/app/constants.js
@@ -0,0 +1,26 @@
+export const API_URL = 'http://easycode-js.herokuapp.com/Butenko_N/users';
+export let data = {users: []};
+export const additionalOptions = [
+  'Notes', 'Send message', 'Share contact', 'Add to favorites', 'Share my location', 'Block this caller'
+];
+export const buttonsContent = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#'];
+export const options = [
+  {option: 'message', class: 'glyphicon-comment'},
+	{option: 'call', class: 'glyphicon-earphone'},
+	{option: 'video', class: 'glyphicon-facetime-video'},
+	{option: 'mail', class: 'glyphicon-envelope'}
+];
+export const basicUserInfo = [
+  {placeholder: 'First Name', fieldName: 'firstName'},
+  {placeholder: 'Last Name', fieldName: 'lastName'},
+  {placeholder: 'Mobile phone', fieldName: 'phone'},
+  {placeholder: 'Email', fieldName: 'email'}
+];
+export const additionalUserInfo = [
+  {placeholder: 'add home phone', fieldName: 'addHomePhone'},
+  {placeholder: 'company', fieldName: 'company'},
+  {placeholder: 'add address', fieldName: 'addAddres'},
+  {placeholder: 'add birthday', fieldName: 'addBirthday'},
+  {placeholder: 'add social profile', fieldName: 'addSocialProfile'},
+  {placeholder: 'add field', fieldName: 'addField'}
+];
diff --git a/phoneApp/app/editContact.js b/phoneApp/app/editContact.js
@@ -0,0 +1,116 @@
+import {basicUserInfo, additionalUserInfo, API_URL, data} from "./constants";
+import User from "./user";
+
+class EditContact {
+	constructor(user) {
+		this.user = user;
+	};
+
+	fieldsBasicUserInfo() {
+		let open = '<div class="main-info-holder">';
+		let editBasicField = basicUserInfo.reduce((start, elem) => {
+			start += `
+          		<div class="edit-field add-btn">
+            		<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
+            		<input type="text" class="glyphicon-plus-sign ${elem.fieldName}" placeholder="${elem.placeholder}"/>
+          		</div>
+			`;
+			return start;
+		}, '');
+		let resEditBasicField = `${open} ${editBasicField} </div>`;
+		return resEditBasicField;
+	};
+
+	fieldAdditionalUserInfo() {
+		let open = `
+		<div class="scroll-holder">
+        	<div class="edit-info">
+        `;
+        let editAdditionalField = additionalUserInfo.reduce((start, elem) => {
+        	start += `
+        		<div class="edit-field add-btn">
+        			<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
+            	<input type="text" class="glyphicon-plus-sign ${elem.fieldName}" placeholder="${elem.placeholder}"/>
+        		</div>
+        	`;
+        	return start;
+        },'');
+        let buttonDelContacts = `
+            <div class="edit-field">
+              <button href="#" class="delete-contact">delete contact</button>
+            </div>
+        `;
+        let resEditAdditionalField = `${open} ${editAdditionalField} ${buttonDelContacts} </div></div>`;
+        return resEditAdditionalField;
+	};
+
+	addEvents() {
+		let self = this;
+		let saveChanges = document.querySelector('button.editContacts');
+		saveChanges.addEventListener('click', function() {
+      let input = document.querySelectorAll('input[placeholder]');
+      let objUserForFetch = [...input].reduce((done, elem) => {
+        if(elem.className === 'glyphicon-plus-sign email') {
+          done.email = elem.value;
+        } else if(elem.className === 'glyphicon-plus-sign firstName') {
+          done.fullName = `${elem.value} `;
+        } else if(elem.className === 'glyphicon-plus-sign lastName') {
+          done.fullName += elem.value;
+        } else if(elem.className === 'glyphicon-plus-sign phone') {
+          done.phone = elem.value;
+        };
+        return done;
+      }, {});
+
+      let url = `${API_URL}/${self.user.id}`;
+      fetch(url, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+				body: JSON.stringify(objUserForFetch)
+      })
+				.then((user) => {
+					return user.json();
+				})
+        .then(userJson => {
+          let userChenges = new User(userJson);
+          userChenges.renderUser()
+				})
+		});
+	};
+
+	renderEditContact() {
+		let captionEditContact = document.querySelector('.container.top-radius');
+		captionEditContact.innerHTML = `
+	      	<nav class="user-top-line">
+	        	<a href="user.html">Cancel</a>
+	        	<button  type = "submit" form = "edit-contact" formaction="#" formmethod="get" class = "done-btn editContacts">Done</button>
+	      	</nav>
+		`;
+		let mainContainer = document.querySelector('main .container');
+		mainContainer.innerHTML = `
+			<div class="edit-main-info">
+ 				<div class="edit-foto"><img src="user_img.png" alt="#" class=" user-img img-circle center-block"></div>
+					${this.fieldsBasicUserInfo()}
+					</div>
+					${this.fieldAdditionalUserInfo()}
+		`;
+    let input = document.querySelectorAll('input.glyphicon-plus-sign');
+    [...input].forEach((elem) => {
+    	if(elem.placeholder == "First Name") {
+    		elem.value = this.user.name;
+			} else if(elem.placeholder == "Last Name") {
+        elem.value = this.user.lastName;
+			} else if(elem.placeholder == "Mobile phone") {
+        elem.value = this.user.phone;
+			} else if(elem.placeholder == "Email") {
+        elem.value = this.user.email;
+			};
+		});
+    this.addEvents();
+	};
+
+};
+
+export default EditContact;
diff --git a/phoneApp/app/headerAndFooter.js b/phoneApp/app/headerAndFooter.js
@@ -0,0 +1,57 @@
+class HeaderAndFooter {
+	constructor(caption) {
+		this.caption = caption;
+	};
+
+	createHeader() {
+		let header = `
+		  	<header class="header">
+    			<div class="container top-radius">
+      				<h2>${this.caption}</h2>
+    			</div>
+  			</header>
+  		`;
+  		return header;
+	};
+
+  renderLink({href, icon}) {
+    return `
+				<a href="${href}" class="tab ${href}">
+						 <span class="glyphicon glyphicon-${icon}" aria-hidden="true"></span>
+							<span class = "tab-text">${href}</span>
+				</a>
+			`;
+  };
+
+  createFooter() {
+    return `
+			<footer class="footer">
+					<div class="container bottom-radius">
+							<nav class="main-nav">
+							${ this.renderLink({ href:'Contacts', icon: 'search' }) }
+							${ this.renderLink({ href:'Keypad', icon: 'th' }) }
+							${ this.renderLink({ href:'Edit contact',  icon: 'pencil' }) }
+							${ this.renderLink({ href:'User',  icon: 'user' }) }
+							${ this.renderLink({ href:'Add user',  icon: 'plus' }) }
+							</nav>
+				 <div>
+			</footer> 
+			`;
+  };
+
+	createMain() {
+		return `
+		  	<main class="main">
+    			<div class="container">
+    			</div>
+  			</main>
+    	`;
+	};
+
+	renderTemplate() {
+		document.body.innerHTML = this.createHeader() + this.createMain() + this.createFooter();
+	};
+
+};
+
+export default HeaderAndFooter;
diff --git a/phoneApp/app/index.html b/phoneApp/app/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+   <head>
+      <title>phoneApp</title>
+      <meta charset="utf-8" />
+      <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+      <link rel="stylesheet" type="text/css" href="style.css">
+   </head>
+   <body>
+      <!--<script src="constants.js" ></script>-->
+      <!--<script src="headerAndFooter.js" ></script>-->
+      <!--<script src="keypad.js" ></script>-->
+      <!--<script src="editContact.js" ></script>-->
+      <!--<script src="user.js" ></script>-->
+      <!--<script src="userContacts.js" ></script>-->
+      <!--<script src="addUser.js" ></script>-->
+      <!--<script src="router.js" ></script>-->
+      <!--<script src="main.js" ></script>-->
+      <script src="../dist/bundle.js"></script>
+   </body>
+</html>