Phone app #17
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,183 @@ | ||
| class App { | ||
| constructor(){ | ||
| this.state = { //равен ссылке, которая ведет на объект | ||
| people: [ | ||
| { | ||
| name: 'Иван', | ||
| lastName: 'Петров', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Сергей', | ||
| lastName: 'Сергеев', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Иван', | ||
| lastName: 'Иванов', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Александр', | ||
| lastName: 'Александров', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Алекс', | ||
| lastName: 'Смирнов', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Сергей', | ||
| lastName: 'Волков', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Мария', | ||
| lastName: 'Шарапова', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Александр', | ||
| lastName: 'Винник', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Дарий', | ||
| lastName: 'Смирнов', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Елена', | ||
| lastName: 'Лещенко', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Ольга', | ||
| lastName: 'Новикова', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Наталья', | ||
| lastName: 'Шемякина', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Анна', | ||
| lastName: 'Донцова', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Влад', | ||
| lastName: 'Яма', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Кира', | ||
| lastName: 'Воробьева', | ||
| email: '[email protected]' | ||
| }, | ||
| { | ||
| name: 'Виктор', | ||
| lastName: 'Кривенко', | ||
| email: '[email protected]' | ||
| } | ||
| ], | ||
| activePage: 'contacts' | ||
| }; | ||
|
|
||
| this.pages = { | ||
| contacts: new ContactsPage(this.state), // тут передали ссылку на this.state | ||
| adduser: new AddUser(this.state), | ||
| keypad: new KeypadPage(this.state), | ||
| editcontact: new EditContact(this.state), | ||
| user: new User(this.state) | ||
| }; | ||
|
|
||
| this.initializeRouter(); | ||
| this.switchRouter(); | ||
|
|
||
| } | ||
|
|
||
| initializeRouter () { | ||
|
||
| const mountNode = document.getElementById('mountNode'); | ||
| //console.log(mountNode); | ||
| mountNode.innerHTML = ` | ||
| <div id="app"></div> | ||
| <footer class="footer"> | ||
| <div class="container bottom-radius"> | ||
| <nav class="main-nav"> | ||
| ${this.renderLink({href:'contacts', glyphicon:'search', text:'Contacts', active: true})} | ||
| ${this.renderLink({href:'keypad', glyphicon:'th', text:'Keypad', active: false})} | ||
| ${this.renderLink({href:'edit-contact', glyphicon:'pencil', text:'Edit contact', active: false})} | ||
| ${this.renderLink({href:'user', glyphicon:'user', text:'User', active: false})} | ||
| ${this.renderLink({href:'add-user', glyphicon:'plus', text:'Add user', active: false})} | ||
| </nav> | ||
| </div> | ||
| </footer>`; | ||
|
|
||
| //this.initializeRouterHandlers(); | ||
| this.appDOMNode = mountNode.querySelector('#app'); // сюда будем делать рендер всех страниц | ||
|
||
| // и это не будет затрагивать футер и его события | ||
| } | ||
|
|
||
| renderNewPage() { | ||
|
|
||
| this.appDOMNode.innerHTML = this.pages[this.state.activePage].render(); | ||
| } | ||
|
|
||
| renderLink(options) { | ||
| let {href, glyphicon, text, active} = options; | ||
|
||
| let activeClass = active ? 'active' : ''; | ||
|
|
||
| return `<a href="${href}" class="tab ${activeClass}"> | ||
| <span class="glyphicon glyphicon-${glyphicon}" aria-hidden="true"></span> | ||
| <span class = "tab-text">${text}</span> | ||
| </a> ` | ||
| } | ||
|
|
||
|
|
||
| switchRouter() { | ||
| const parent = document.querySelector('.main-nav'); | ||
|
||
| parent.addEventListener('click', (e) => { | ||
| e.preventDefault(); | ||
| //let target = e && e.target; | ||
| let target = e && e.target && (e.target.closest('a') || e.target.classList.contains('tab')); | ||
|
||
| if (target == false) return; | ||
|
|
||
| //console.log(target); | ||
|
|
||
| if (target.classList.contains('active')) return; | ||
| if (target.classList.contains('tab')) { | ||
| let active = document.querySelector('.active'); | ||
|
||
|
|
||
| active.classList.remove('active'); | ||
| target.classList.add('active'); | ||
|
|
||
| let href = target.getAttribute('href'); | ||
| //console.log(href); | ||
| this.state.activePage = href.replace(/-/g, '').toLowerCase(); | ||
|
||
| //console.log(this.state.activePage); | ||
| this.renderNewPage(); | ||
| } | ||
| return; | ||
| }) | ||
| } | ||
| // updateView() { | ||
| // const activePage = this.state.activePage; | ||
| // this.pages[activePage].updateState(this.state); //updateState делаем на каждой странице | ||
| // | ||
| // } | ||
| render() { | ||
| const {activePage} = this.state; | ||
| //const activePage = this.state.activePage; // то же самое | ||
|
|
||
| // this.updateView(); | ||
| this.appDOMNode.innerHTML = this.pages[activePage].render(); // и отрендерь ту страничку, | ||
| // которая сейчас указана как activePage в this.state | ||
|
|
||
| } | ||
| } | ||
|
|
||
| const app = new App(); | ||
| app.render(); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess there a typo with formatting