';
+ let addPhoto = `
+
+
+
+ `;
+ let editBasicField = basicUserInfo.reduce((start, elem) => {
+ start +=`
+
+
+
+
+
+ `;
+ return start;
+ },'');
+ let resEditBasicField = `${addPhoto} ${open} ${editBasicField}
+
+ `;
+ let editAdditionalField = additionalUserInfo.reduce((start, elem) => {
+ /* let addClass = elem.replace(/\s/g, '_');*/
+ start += `
+
+
+
+
+ `;
+ return start;
+ }, '');
+ let buttonDelContacts = `
+
+
+
+ `;
+ let resEditAdditionalField = `${open} ${editAdditionalField}${buttonDelContacts}
`;
+ 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 = `
+
+ `;
+ let mainContainer = document.querySelector('main .container');
+ mainContainer.innerHTML = `
+
+ ${this.fieldsBasicAddUserInfo()}
+
+ ${this.fieldAdditionalAddUserInfo()}
+ `;
+ this.addEvents();
+ };
+};
+
+export default AddUser;
diff --git a/phoneApp/app/constants.js b/phoneApp/app/constants.js
new file mode 100644
index 0000000..cb8d7df
--- /dev/null
+++ 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
new file mode 100644
index 0000000..787f9d1
--- /dev/null
+++ 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 = '
';
+ let editBasicField = basicUserInfo.reduce((start, elem) => {
+ start += `
+
+
+
+
+ `;
+ return start;
+ }, '');
+ let resEditBasicField = `${open} ${editBasicField}
`;
+ return resEditBasicField;
+ };
+
+ fieldAdditionalUserInfo() {
+ let open = `
+
`;
+ 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 = `
+
+ `;
+ let mainContainer = document.querySelector('main .container');
+ mainContainer.innerHTML = `
+
+
+ ${this.fieldsBasicUserInfo()}
+
+ ${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
new file mode 100644
index 0000000..282a860
--- /dev/null
+++ b/phoneApp/app/headerAndFooter.js
@@ -0,0 +1,57 @@
+class HeaderAndFooter {
+ constructor(caption) {
+ this.caption = caption;
+ };
+
+ createHeader() {
+ let header = `
+
+ `;
+ return header;
+ };
+
+ renderLink({href, icon}) {
+ return `
+
+
+ ${href}
+
+ `;
+ };
+
+ createFooter() {
+ return `
+
