diff --git a/phone-book/add-user.html b/phone-book/add-user.html deleted file mode 100644 index 85318fb..0000000 --- a/phone-book/add-user.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - Add contact - - - - - - -
- - - - - \ No newline at end of file diff --git a/phone-book/edit-contact.html b/phone-book/edit-contact.html deleted file mode 100644 index 6b40b9c..0000000 --- a/phone-book/edit-contact.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - Edit contact - - - - - - -
- - - - - - \ No newline at end of file diff --git a/phone-book/index.html b/phone-book/index.html index f73af15..25776d9 100644 --- a/phone-book/index.html +++ b/phone-book/index.html @@ -11,9 +11,17 @@ -
+
+ + + + + + + + diff --git a/phone-book/keypad.html b/phone-book/keypad.html deleted file mode 100644 index 2a79847..0000000 --- a/phone-book/keypad.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - Keypad - - - - - - - -
- - - - - \ No newline at end of file diff --git a/phone-book/node.js b/phone-book/node.js new file mode 100644 index 0000000..b8d19d9 --- /dev/null +++ b/phone-book/node.js @@ -0,0 +1,25 @@ +const http = require('http'); +const fs = require('fs'); +const port = 3000; + +http.createServer( (request, response) =>{ + let path = request.url; + if(path.indexOf('html') != -1 || path == '/'){ + path = '/index.html'; + } + // path = '/index.html'; + + let source = ''; + if (fs.existsSync('.' + path)) { + source = fs.readFileSync('.' + path); + }else{ + source = 'no such resource'; + response.statusCode = 404; + } + response.end(source); +}).listen(port, (err) => { + if (err) { + return console.log('something bad happened', err); + } + console.log(`server is listening on ${port}`) +}) diff --git a/phone-book/src/add-user.js b/phone-book/src/add-user.js deleted file mode 100644 index c9787ac..0000000 --- a/phone-book/src/add-user.js +++ /dev/null @@ -1,132 +0,0 @@ - - -class AddUser { - constructor(containerSelector) { - this.container = document.body.querySelector(containerSelector); - this.pageName = 'Keypad'; - this.users = users; - } - - createHeaderSource(){ - return ` -
-
-

${this.pageName}

-
-
- `; - } - - createMainSource(){ - return ` -
-
-
-
- -
-
-
- -
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
-
- `; - } - - _createFooterIcon(iconData){ - return ` - - - ${iconData.title} - ` - } - - createFooterSource(){ - return ` - - `; - } - createPhoneSource(){ - return ` - ${this.createHeaderSource()} - ${this.createMainSource()} - ${this.createFooterSource()} - `; - } - - render(){ - const phoneSource = this.createPhoneSource(); - this.container.innerHTML = phoneSource; - } -} - -const addUser = new AddUser('.container-holder'); -addUser.render(); \ No newline at end of file diff --git a/phone-book/src/app.js b/phone-book/src/app.js new file mode 100644 index 0000000..8a25bbc --- /dev/null +++ b/phone-book/src/app.js @@ -0,0 +1,177 @@ +class App { + constructor(appContainerId) { + this.state = {}; + this.appContainer = document.getElementById(appContainerId); + this.router = new Router(this); + this.serverAPI = new ServerAPI(); + const userPage = new EditUser(this); + this.pages = { + contacts : { + pageObject : new Contacts(this), + href : '/contacts.html' + }, + keypad : { + pageObject : new Keypad(this), + href : '/keypad.html' + }, + editUser : { + pageObject : userPage, + href : '/edit-contact.html' + }, + user : { + pageObject : new User(this), + href : '/user.html' + }, + addUser : { + pageObject : userPage, + href : '/add-user.html' + } + } + + const appHtml = this.renderAppContainer(); + this.appContainer.innerHTML = appHtml; + this.addRouter(); + + this.state.pageName = 'Contacts'; + this.updateState({activePage : 'contacts'}); + this.router.gotToPage(this.state,'/index.html'); + this.changePageToActive(); + } + + updateState(newState){ + this.state = {}; + Object.assign(this.state,newState); + + + } + + addRouter(){ + this.appContainer.addEventListener('click', (event) => { + event.preventDefault(); + const container = event.currentTarget; + let target = event.target; + while (target != container) { + if (target.getAttribute("data-page") ) { + const newPage = target.getAttribute("data-page"); + const newUser = target.getAttribute("data-user-id"); + const newState = { activePage : newPage }; + if(newUser){ + newState.userId = newUser; + } + this.updateState(newState); + this.router.gotToPage(this.state); + this.changePageToActive(); + return; + } + target = target.parentNode; + } + }); + } + + changePageToActive(){ + this.updateTitle(); + this.insertCurrentPage(); + this.initPageEventListeners(); + } + updateTitle(){ + const currentPage = this.getCurrentPage(); + const title = this.appContainer.querySelector('header > div > h2'); + title.textContent = currentPage.title; + } + + getCurrentPage(){ + const activePage = this.state.activePage; + const currentPage = this.pages[activePage].pageObject; + return currentPage; + } + + initPageEventListeners(){ + const currentPage = this.getCurrentPage(); + currentPage.initEvents(); + } + + renderAppContainer(){ + return ` + ${this.renderAppHead()} + ${this.renderAppPage()} + ${this.renderAppFooter()} + `; + } + + formatformNumber(number) { + if(isNaN(number.charAt(0))){ + return number; + } + const formatedNumber = number.replace(/(\d{0,3})(\d{0,2})?(\d{0,2})?(\d{0,3})?/, (match,g1,g2,g3,g4) => { + let res = '' + if(g1){ + res = `(${g1}`; + } + if(g1.length === 3){ + res += `) `; + } + if(g2){ + res += `${g2}`; + } + if(g3){ + res += `-${g3}`; + } + if(g4){ + res += `-${g4}`; + } + return res + }); + return formatedNumber; + } + + renderAppHead(){ + return ` +
+
+

+
+
+ `; + } + + renderAppFooter(){ + return ` + + `; + } + renderAppPage(){ + return ` +
+
+ `; + } + + insertCurrentPage(){ + const placeForPage = this.appContainer.querySelector('main'); + placeForPage.innerHTML = this.renderCurrentPage(); + } + + renderCurrentPage(){ + const currentPage = this.getCurrentPage(); + return currentPage.render(); + } + + _createFooterIcon(iconData){ + return ` + + + ${iconData.title} + ` + } +} +const app = new App('app'); \ No newline at end of file diff --git a/phone-book/src/contacts.js b/phone-book/src/contacts.js index 2ff8c8c..60db4ac 100644 --- a/phone-book/src/contacts.js +++ b/phone-book/src/contacts.js @@ -1,39 +1,73 @@ - - class Contacts { - constructor(containerSelector) { - this.container = document.body.querySelector(containerSelector); + constructor(app) { + this.title = "Contacts"; + this.app = app; + this.appContainer = app.appContainer; this.pageName = 'Contacts'; - this.users = users; - this.usersOrderDirection = 'asc'; - this.container.addEventListener('click', (event) => { + this.users = []; + this.usersOrderDirection = 'asc'; + } + + initEvents(){ + this.appContainer.querySelector("main > div.container").addEventListener('click', (event) => { if(event.target.nodeName === 'TH'){ let sortBy = event.target.getAttribute("data-name"); this.users = this.sortUsersBy(sortBy); this.usersOrderDirection = this.usersOrderDirection == 'asc' ? 'desc' : 'asc'; - this.insertListOfUsers(); + this.insertListOfUsersToApp(this.users); } - }); - - + }); + this.getListOfUsers(); + this.initSearch(); + } + showUserPage(id){ + let promisWithUsers = []; + const fetcher = new Fetcher(); + promisWithUsers.push(fetcher.getUser(id)); + Promise.all(promisWithUsers).then( (user) => { + + }); } + initSearch(){ document.getElementById('search').addEventListener('keyup', (event) => { - this.users = users; + let filteredUsers = this.users; if(event.target.value !== ''){ - this.users = this.findUser(event.target.value); + filteredUsers = this.findUser(event.target.value); } - this.insertListOfUsers(); + this.insertListOfUsersToApp(filteredUsers); }); } - renderListOfUsers(){ - return this.users.map( user => { + + getListOfUsers(){ + if(this.users.length != 0 ){ + return false; + } + const serverAPI = this.app.serverAPI; + const loadingUsers = serverAPI.getUsers(); + loadingUsers.then( response => { + return response.json(); + }) + .then(users => { + this.users = users + this.insertListOfUsersToApp(this.users); + }) + .catch( err => { + console.error(err.message); + }); + } + + renderListOfUsers(listOfUsers){ + return listOfUsers.map( user => { + const name = user.fullName.split(' ')[0]; + const cname = user.fullName.split(' ')[1] || ''; + const id = user._id; return ` - - ${user.name} - ${user.cname} + + ${name} + ${cname} ${user.email} `; @@ -45,88 +79,49 @@ class Contacts { - - + + - + ${this.renderListOfUsers(this.users)}
NameLast nameNameLast name Email
`; } - insertListOfUsers(){ - const containerForList = this.container.querySelector('table > tbody'); - containerForList.innerHTML = this.renderListOfUsers(); - } - - createHeaderSource(){ - return ` -
-
-

${this.pageName}

-
-
- `; + insertListOfUsersToApp(listOfUsers){ + const containerForList = this.appContainer.querySelector('table > tbody'); + containerForList.innerHTML = this.renderListOfUsers(listOfUsers); } createMainSource(){ return ` -
-
-
-
- - -
-
- ${this.renderContactsList()} -
-
+
+
+
+ + +
+
+ ${this.renderContactsList()} +
`; } - _createFooterIcon(iconData){ - return ` - - - ${iconData.title} - ` - } - - createFooterSource(){ - return ` - - `; - } - createPhoneSource(){ - return ` - ${this.createHeaderSource()} - ${this.createMainSource()} - ${this.createFooterSource()} - `; - } - _cleanStringValue(name) { + + + cleanStringValue(name) { return name.toLowerCase().trim() } + sortUsersBy(prop) { const usersOrderDirection = this.usersOrderDirection == 'asc' ? 1 : -1; return this.users.sort((a, b) => { - const propA = this._cleanStringValue(a[prop]); - const propB = this._cleanStringValue(b[prop]); + const propA = this.cleanStringValue(a[prop]); + const propB = this.cleanStringValue(b[prop]); if (propA < propB) { return -1*usersOrderDirection; } @@ -137,12 +132,11 @@ class Contacts { }) } - findUser(value, prop) { const letFilterBy = user => { if(!prop){ - return user["name"].toLowerCase().indexOf(value.toLowerCase()) !== -1 || - user["cname"].toLowerCase().indexOf(value.toLowerCase()) !== -1 || + return user["fullName"].toLowerCase().indexOf(value.toLowerCase()) !== -1 || + user["fullName"].toLowerCase().indexOf(value.toLowerCase()) !== -1 || user["email"].toLowerCase().indexOf(value.toLowerCase()) !== -1; } return user[prop].toLowerCase().indexOf(value.toLowerCase()) !== -1; @@ -151,12 +145,9 @@ class Contacts { } render(){ - const phoneSource = this.createPhoneSource(); - this.container.innerHTML = phoneSource; - this.insertListOfUsers(); - this.initSearch(); + return ` + ${this.createMainSource()} + ` } } -const contacts = new Contacts('.container-holder'); -contacts.render(); \ No newline at end of file diff --git a/phone-book/src/edit-contact.js b/phone-book/src/edit-contact.js deleted file mode 100644 index aee006f..0000000 --- a/phone-book/src/edit-contact.js +++ /dev/null @@ -1,142 +0,0 @@ - - -class EditContact { - constructor(containerSelector) { - this.container = document.body.querySelector(containerSelector); - this.pageName = 'Edit Contact'; - this.users = users; - - } - prepareEditableFields(){ - const editButtons = this.container.querySelectorAll('a.add-btn'); - editButtons.forEach(( value ) => { - value.children[1].contentEditable = 'true'; - }); - this.container.addEventListener('click', (event) => { - if( event.target.nodeName == 'A' && event.target.classList.contains('add-btn')){ - event.target.children[1].backgroundColor = 'purple'; - } - }); - } - createHeaderSource(){ - return ` -
-
-

${this.pageName}

-
-
- `; - } - - createMainSource(){ - return ` -
-
-
-
#
-
-
- - First Name - -
-
- - Last Name - -
-
- - Company - -
-
-
-
-
-
- - phone - +38 (063) 733 44 55 - -
-
- - add home phone - -
-
- - add email - -
-
- - add address - -
-
- - add birthday - -
-
- - add social profile - -
-
- - add field - -
-
- delete contact -
-
-
-
-
- `; - } - - _createFooterIcon(iconData){ - return ` - - - ${iconData.title} - ` - } - - createFooterSource(){ - return ` - - `; - } - createPhoneSource(){ - return ` - ${this.createHeaderSource()} - ${this.createMainSource()} - ${this.createFooterSource()} - `; - } - - render(){ - const phoneSource = this.createPhoneSource(); - this.container.innerHTML = phoneSource; - this.prepareEditableFields(); - } -} - -const editContact = new EditContact('.container-holder'); -editContact.render(); \ No newline at end of file diff --git a/phone-book/src/edit-user.js b/phone-book/src/edit-user.js new file mode 100644 index 0000000..2d08288 --- /dev/null +++ b/phone-book/src/edit-user.js @@ -0,0 +1,195 @@ + + +class EditUser { + constructor(app) { + this.title = 'Add User' + this.app = app; + this.appContainer = app.appContainer; + } + + initEvents(){ + // this.createPlaceholders(); + this.initSaveEvent(); + if(this.app.state.userId){ + this.initDeleteEvent(); + this.renderUserData(); + } + } + + setCaretToEnd(node) { + let range = document.createRange(); + let sel = window.getSelection(); + range.setStart(node, 1); + range.collapse(true); + sel.removeAllRanges(); + sel.addRange(range); + } + renderUserData(){ + const contactObj = this.app.pages.contacts.pageObject; + const userId = this.app.state.userId; + this.getUser(); + } + + getUser(){ + const userId = this.app.state.userId; + const serverAPI = this.app.serverAPI; + const loadingUser = serverAPI.getUser(userId); + loadingUser.then( response => { + return response.json(); + }) + .then(user => { + const fullNameField = this.appContainer.querySelector('span[data-name="fullName"]'); + fullNameField.textContent = user.fullName; + + const emailField = this.appContainer.querySelector('span[data-name="email"]'); + emailField.textContent = user.email; + + const phoneField = this.appContainer.querySelector('span[data-name="phone"]'); + phoneField.textContent = user.phone; + }) + .catch( err => { + console.error(err.message); + }); + + } + + updateUser(data){ + const serverAPI = this.app.serverAPI; + const updatingUser = serverAPI.updateUser(data); + updatingUser.then( response => { + this.app.pages.contacts.pageObject.users = []; + const newPage = 'contacts'; + const newState = { activePage : newPage }; + this.app.updateState(newState); + this.app.router.gotToPage(this.app.state); + this.app.changePageToActive(); + }) + .catch( err => { + console.error(err.message); + }); + } + + addUserToServer(data){ + const serverAPI = this.app.serverAPI; + const addingUser = serverAPI.addUser(data); + addingUser.then( response => { + return response.json(); + }) + .then(addedUser => { + this.app.pages.contacts.pageObject.users = []; + const newPage = 'user'; + const newUser = addedUser._id; + const newState = { activePage : newPage }; + if(newUser){ + newState.userId = newUser; + } + this.app.updateState(newState); + this.app.router.gotToPage(this.app.state); + this.app.changePageToActive(); + }) + .catch( err => { + console.error(err.message); + }); + } + deleteUser(id){ + const serverAPI = this.app.serverAPI; + const deletingUser = serverAPI.deleteUser(id); + deletingUser.then( response => { + this.app.pages.contacts.pageObject.users = []; + const newPage = 'contacts'; + const newState = { activePage : newPage }; + this.app.updateState(newState); + this.app.router.gotToPage(this.app.state); + this.app.changePageToActive(); + }) + .catch( err => { + console.error(err.message); + }); + } + + initDeleteEvent(){ + const saveButton = this.appContainer.querySelector('button.delete-contact'); + saveButton.style.display = 'inline-block'; + saveButton.addEventListener('click', (event) => { + this.deleteUser(this.app.state.userId); + }); + } + + initSaveEvent(){ + const saveButton = this.appContainer.querySelector('button.save-contact'); + saveButton.addEventListener('click', (event) => { + const newUserData = this.grabUserData(); + if(newUserData.phone && newUserData.email && newUserData.fullName){ + if(!this.app.state.userId){ + this.addUserToServer(newUserData); + }else{ + newUserData.userId = this.app.state.userId; + this.updateUser(newUserData); + } + } + }); + } + + grabUserData(){ + const editableFields = this.appContainer.querySelectorAll('span[data-name]'); + return [...editableFields].reduce( (acc,elem) => { + + if(this.validateField(elem)){ + acc[elem.getAttribute('data-name')] = elem.textContent.trim(); + } + return acc; + },{}); + } + + validateField(elem){ + const classes = elem.parentElement.classList; + if(elem.textContent.trim() != ''){ + classes.remove("delete-btn") + classes.add("add-btn"); + return true; + } + classes.remove("add-btn") + classes.add("delete-btn"); + return false; + } + + + render(){ + return ` +
+
+
+
+
+
+
+ + Full Name: +
+
+
+
+
+
+
+
+ + mobile phone: +
+
+
+
+ + email: +
+
+
+ + +
+
+
+
+ `; + } +} diff --git a/phone-book/src/keypad.js b/phone-book/src/keypad.js index 9f7400b..afba6a5 100644 --- a/phone-book/src/keypad.js +++ b/phone-book/src/keypad.js @@ -1,26 +1,29 @@ - - class Keypad { - constructor(containerSelector) { - this.container = document.body.querySelector(containerSelector); - this.pageName = 'Keypad'; - this.users = users; + constructor(app) { + this.title = "Keypad"; this.currentNumber = ''; - this.container.addEventListener('click', (event) => { + this.app = app; + this.appContainer = app.appContainer; + } + + initEvents(){ + this.appContainer.querySelector("main > div.container").addEventListener('click', (event) => { this.detectClickedNumber(event); - }); + }); - this.container.addEventListener('click', (event) => { + this.appContainer.querySelector("main > div.container").addEventListener('click', (event) => { if(event.target.nodeName === 'SPAN' && event.target.classList.contains('delete-number')){ this.deleteDigitFromNumber(); } }); - document.addEventListener('keyup', (event) => { + + document.addEventListener('keydown', (event) => { this.updateNumbersField(event.key); if(event.keyCode == 8 ){ this.deleteDigitFromNumber(); } - }); + }); + } deleteDigitFromNumber(){ @@ -39,62 +42,16 @@ class Keypad { if( number && /^[\d\*#]$/.test(number) && this.currentNumber.length < 10){ this.currentNumber += number; } - const formatedNumber = this.formatformNumber(this.currentNumber); - this.container.querySelector('main span.numbers').innerHTML = formatedNumber + const formatedNumber = this.app.formatformNumber(this.currentNumber); + this.appContainer.querySelector('main span.numbers').innerHTML = formatedNumber } - formatformNumber(number) { - if(isNaN(number.charAt(0))){ - return number; - } - const formatedNumber = number.replace(/(\d{0,3})(\d{0,2})?(\d{0,2})?(\d{0,3})?/, (match,g1,g2,g3,g4) => { - let res = '' - if(g1){ - res = `(${g1}`; - } - if(g1.length === 3){ - res += `) `; - } - if(g2){ - res += `${g2}`; - } - if(g3){ - res += `-${g3}`; - } - if(g4){ - res += `-${g4}`; - } - return res - }); - /* - if(number.length > 0){ - if(number.length < 3){ - res = `(${number}`; - }else if (number.length < 6) { - res = number.replace(/(\d{3})(\d{0,2})/, '($1) $2'); - }else if (number.length < 8) { - res = number.replace(/(\d{3})(\d{0,2})(\d{0,2})/, '($1) $2-$3'); - }else{ - - } - }*/ - return formatedNumber; - } - createHeaderSource(){ - return ` -
-
-

${this.pageName}

-
-
- `; - } + - createMainSource(){ + render(){ return ` -
@@ -117,46 +74,6 @@ class Keypad {
-
`; } - - _createFooterIcon(iconData){ - return ` - - - ${iconData.title} - ` - } - - createFooterSource(){ - return ` - - `; - } - createPhoneSource(){ - return ` - ${this.createHeaderSource()} - ${this.createMainSource()} - ${this.createFooterSource()} - `; - } - - render(){ - const phoneSource = this.createPhoneSource(); - this.container.innerHTML = phoneSource; - } } - -const keypad = new Keypad('.container-holder'); -keypad.render(); \ No newline at end of file diff --git a/phone-book/src/main.css b/phone-book/src/main.css index d599d48..1830c91 100644 --- a/phone-book/src/main.css +++ b/phone-book/src/main.css @@ -1,25 +1,3 @@ -/** - * Description: main styles - * Version: 1.0.0 - * Last update: 09.01.2017 - * Author: alex.maslennikova19@gmail.com - */ -/*$breakpoints: ( - 'screen-xs': 480px, - 'screen-sm': 768px, - 'screen-md': 992px, - 'screen-lg': 1200px -); -// keywords -$media-expressions: ( - 'screen': 'screen', - 'print': 'print', - 'handheld': 'handheld', - 'landscape': '(orientation: landscape)', - 'portrait': '(orientation: portrait)', - 'retina2x': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)', - 'retina3x': '(-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi)' -);*/ .clearfix:after { content: ''; display: table; @@ -157,6 +135,7 @@ h3 { display: table; width: 100%; table-layout: fixed; + cursor: pointer; } .table > thead > tr > th { @@ -183,6 +162,7 @@ h3 { width: 100px; height: 100px; margin-bottom: 10px; + float:left; } .user-name { @@ -235,6 +215,10 @@ h3 { font-size: 16px; } +.loading{ + color:gray; +} + .options-table { margin-bottom: 20px; font-size: 16px; @@ -321,9 +305,11 @@ h3 { margin-right: 10px; } -.add-btn span:last-child{ +.edit-field span:last-child{ display: inline-block; padding: 2px 3px; + width: 150px; + border: 1px solid black; } .add-btn:hover, .add-btn:focus, .add-btn:active { @@ -334,8 +320,11 @@ h3 { background-color: black; } -.delete-contact { +.edit-contact { color: #e32910; margin: 0 auto; font-weight: bold; +} +.delete-contact{ + display: none; } \ No newline at end of file diff --git a/phone-book/src/router.js b/phone-book/src/router.js new file mode 100644 index 0000000..a9ca4c1 --- /dev/null +++ b/phone-book/src/router.js @@ -0,0 +1,22 @@ +class Router { + constructor(app){ + this.app = app; + window.addEventListener('popstate', event => { + // console.log(event.state); + const popState = { activePage : event.state.activePage }; + if(event.state.userId){ + popState.userId = event.state.userId; + } + + app.updateState(popState); + app.changePageToActive(); + }); + } + + gotToPage(state){ + const activePage = this.app.state.activePage; + const href = this.app.pages[activePage].href; + window.history.pushState(state,'', href); + } + +} \ No newline at end of file diff --git a/phone-book/src/server-api.js b/phone-book/src/server-api.js new file mode 100644 index 0000000..f0d6d8a --- /dev/null +++ b/phone-book/src/server-api.js @@ -0,0 +1,34 @@ +class ServerAPI{ + constructor(){ + this.url = 'https://easycode-js.herokuapp.com/mamax' + } + getUsers(){ + return fetch(this.url + '/users'); + } + getUser(id){ + return fetch(this.url + '/users/' + id); + } + addUser(data){ + return fetch(this.url + '/users' , { + headers : { + 'Content-Type': 'application/json' + }, + method: "POST", + body: JSON.stringify(data) + }); + } + deleteUser(id){ + return fetch(this.url + '/users/' + id , { + method: "DELETE", + }); + } + updateUser(data){ + return fetch(this.url + '/users/' + data.userId , { + headers : { + 'Content-Type': 'application/json' + }, + method: "PATCH", + body: JSON.stringify(data) + }); + } +} diff --git a/phone-book/src/user.js b/phone-book/src/user.js index 782c2f5..57198bc 100644 --- a/phone-book/src/user.js +++ b/phone-book/src/user.js @@ -1,28 +1,74 @@ class User { - constructor(containerSelector) { - this.container = document.body.querySelector(containerSelector); - this.pageName = 'Keypad'; - this.users = users; + constructor(app) { + this.title = "User"; + this.appContainer = app.appContainer; + this.app = app; } - createHeaderSource(){ - return ` -
-
-

${this.pageName}

-
-
- `; + initEvents(){ + + this.getUser(); + + } + + getUser(){ + + const userId = this.app.state.userId; + if(this.user && this.user._id == userId){ + this.fillPageWithUsersData(); + return false; + } + const serverAPI = this.app.serverAPI; + const loadingUser = serverAPI.getUser(userId); + loadingUser.then( response => { + return response.json(); + }) + .then(user => { + this.user = user + this.fillPageWithUsersData(); + }) + .catch( err => { + console.error(err.message); + }); + + } + + fillPageWithUsersData(){ + this.updateName(); + this.updateEmail(); + this.updatePhone(); + this.setUserIDtoAttribute(); + } + + updateName(){ + const nameNode = this.app.appContainer.querySelector('main div.user-name'); + nameNode.innerHTML = this.user.fullName + + } + + updatePhone(){ + const phoneNode = this.app.appContainer.querySelector('main div.tel-number > div'); + const formattedNumber = this.app.formatformNumber(this.user.phone); + phoneNode.innerHTML = formattedNumber; + } + + setUserIDtoAttribute(){ + const editLinks = this.app.appContainer.querySelectorAll("main a.editUser"); + editLinks.forEach( link => { + link.setAttribute('data-user-id', this.user._id); + }); + } + updateEmail(){ - createMainSource(){ + } + + render(){ return ` -
- # -
User Name
+
Loading name...
@@ -43,61 +89,12 @@ class User {

mobile

-
+38 (093) 989 89 89
-
-
-

home

-
+38 (093) 989 89 89
+
Loading phone number...
-
Notes
-
Send message
-
Share contact
-
Add to favorites
-
Share my location
-
Block this caller
+
Edit User
-
- `; - } - - _createFooterIcon(iconData){ - return ` - - - ${iconData.title} - ` - } - - createFooterSource(){ - return ` - - `; - } - createPhoneSource(){ - return ` - ${this.createHeaderSource()} - ${this.createMainSource()} - ${this.createFooterSource()} - `; - } - - render(){ - const phoneSource = this.createPhoneSource(); - this.container.innerHTML = phoneSource; + `; } } - -const user = new User('.container-holder'); -user.render(); \ No newline at end of file diff --git a/phone-book/user.html b/phone-book/user.html deleted file mode 100644 index 493a101..0000000 --- a/phone-book/user.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - User - - - - - - -
- - - - - \ No newline at end of file