Skip to content

Commit 3b946f2

Browse files
NataliaButenkoNataliaButenko
committed
update phomeApp (12.08.18)
1 parent 7725d89 commit 3b946f2

File tree

5 files changed

+266
-268
lines changed

5 files changed

+266
-268
lines changed

‎phoneApp/constants.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
const API_URL = 'http://easycode-js.herokuapp.com/Butenko_N/users';

‎phoneApp/headerAndFooter.js‎

Lines changed: 0 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -63,48 +63,3 @@ class HeaderAndFooter {
6363
};
6464

6565
};
66-
67-
let headerAndFooter = new HeaderAndFooter('Contacts');
68-
headerAndFooter.renderTemplate();
69-
70-
71-
let buttonKeypad = document.querySelector('a.Keypad');
72-
73-
buttonKeypad.addEventListener('click', function(event) {
74-
event.preventDefault();
75-
let keypad = new Keypad();
76-
keypad.renderKeypad();
77-
});
78-
79-
80-
let buttonEditContact = document.querySelector('a.Edit');
81-
82-
buttonEditContact.addEventListener('click', function(event) {
83-
event.preventDefault();
84-
let editContact = new EditContact();
85-
editContact.renderEditContact();
86-
});
87-
88-
let buttonUser = document.querySelector('a.User');
89-
90-
buttonUser.addEventListener('click', function(event) {
91-
event.preventDefault();
92-
let user = new User();
93-
user.renderUser();
94-
});
95-
96-
let buttonAddUser = document.querySelector('a.Add');
97-
98-
buttonAddUser.addEventListener('click', function(event) {
99-
event.preventDefault();
100-
let addUser = new AddUser();
101-
addUser.renderAddUser();
102-
});
103-
104-
let buttonContacts = document.querySelector('a.Contacts');
105-
106-
buttonContacts.addEventListener('click', function(event) {
107-
event.preventDefault();
108-
let contacts = new UsersContacts();
109-
contacts.renderForm();
110-
});

‎phoneApp/index.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@
88
</head>
99
<body>
1010

11+
<script src="constants.js" defer></script>
1112
<script src="headerAndFooter.js" defer></script>
12-
<script src="index.js" defer></script>
13-
<script src="keypad.js" defer></script>
13+
<script src="keypad.js" defer></script>
1414
<script src="editContact.js" defer></script>
1515
<script src="user.js" defer></script>
16+
<script src="userContacts.js" defer></script>
1617
<script src="addUser.js" defer></script>
18+
<script src="index.js" defer></script>
1719

1820
</body>
1921
</html>

‎phoneApp/index.js‎

Lines changed: 35 additions & 221 deletions
Original file line numberDiff line numberDiff line change
@@ -1,233 +1,47 @@
11
//Task3
2-
class UsersContacts {
3-
constructor() {
4-
this.dataUsers = [
5-
// {
6-
// name: 'Иван',
7-
// lastName: 'Петров',
8-
// email: '[email protected]'
9-
// },
10-
// {
11-
// name: 'Сергей',
12-
// lastName: 'Сергей',
13-
// email: '[email protected]'
14-
// },
15-
// {
16-
// name: 'Иван',
17-
// lastName: 'Иванов',
18-
// email: '[email protected]'
19-
// },
20-
// {
21-
// name: 'Александр',
22-
// lastName: 'Александров',
23-
// email: '[email protected]'
24-
// },
25-
// {
26-
// name: 'Алекс',
27-
// lastName: 'Смирнов',
28-
// email: '[email protected]'
29-
// },
30-
// {
31-
// name: 'Сергей',
32-
// lastName: 'Волков',
33-
// email: '[email protected]'
34-
// },
35-
// {
36-
// name: 'Мария',
37-
// lastName: 'Шарапова',
38-
// email: '[email protected]'
39-
// },
40-
// {
41-
// name: 'Александр',
42-
// lastName: 'Винник',
43-
// email: '[email protected]'
44-
// },
45-
// {
46-
// name: 'Дарий',
47-
// lastName: 'Смирнов',
48-
// email: '[email protected]'
49-
// },
50-
// {
51-
// name: 'Елена',
52-
// lastName: 'Лещенко',
53-
// email: '[email protected]'
54-
// },
55-
// {
56-
// name: 'Ольга',
57-
// lastName: 'Новикова',
58-
// email: '[email protected]'
59-
// },
60-
// {
61-
// name: 'Наталья',
62-
// lastName: 'Шемякина',
63-
// email: '[email protected]'
64-
// },
65-
// {
66-
// name: 'Анна',
67-
// lastName: 'Донцова',
68-
// email: '[email protected]'
69-
// },
70-
// {
71-
// name: 'Влад',
72-
// lastName: 'Яма',
73-
// email: '[email protected]'
74-
// },
75-
// {
76-
// name: 'Кира',
77-
// lastName: 'Воробьева',
78-
// email: '[email protected]'
79-
// },
80-
// {
81-
// name: 'Виктор',
82-
// lastName: 'Кривенко',
83-
// email: '[email protected]'
84-
// }
85-
];
86-
this.columnHeadings = ['Name', 'Last name', 'Email'];
87-
};
2+
let headerAndFooter = new HeaderAndFooter('Contacts');
3+
headerAndFooter.renderTemplate();
884

89-
createForm() {
90-
return `
91-
<form class="form-inline search-form">
92-
<div class="form-group">
93-
<label class="sr-only" for="search">Search</label>
94-
<input type="text" class="form-control" id= "search" placeholder="Search">
95-
</div>
96-
</form>
97-
`;
98-
};
5+
let usersContacts = new UsersContacts();
6+
usersContacts.loadData();
997

100-
createTable() {
101-
let self = this;
102-
let thead = function() {
103-
let openThead = `
104-
<thead>
105-
<tr>
106-
`;
107-
let createThead = self.columnHeadings.reduce((start, elem) => {
108-
start += `<th>${elem}</th>\n`
109-
return start;
110-
}, '');
111-
let resultThead = openThead + `${createThead}</tr></thead>`;
112-
return resultThead;
113-
};
114-
let tbody = function() {
115-
let openTbody = `
116-
<tbody>
117-
`;
118-
let createTbody = self.dataUsers.reduce((start, elem) => {
119-
start += `
120-
<tr>
121-
<td>${elem.name}</td>
122-
<td>${elem.lastName}</td>
123-
<td>${elem.email}</td>
124-
</tr>
125-
`;
126-
return start;
127-
}, '');
128-
let resultTbody = openTbody + `${createTbody}</tbody>`;
129-
return resultTbody;
130-
};
131-
let resultTable = `
132-
<table class="table table-hover contacts">
133-
${thead()}
134-
${tbody()}
135-
</table>
136-
`;
137-
return resultTable;
138-
};
8+
let buttonKeypad = document.querySelector('a.Keypad');
1399

140-
sort() {
141-
let table = document.querySelector('.table');
10+
buttonKeypad.addEventListener('click', function(event) {
11+
event.preventDefault();
12+
let keypad = new Keypad();
13+
keypad.renderKeypad();
14+
});
14215

143-
table.addEventListener('click', function(e) {
144-
if(e.target.tagName != 'TH') {
145-
return;
146-
};
147-
sortTable(e.target.cellIndex, e.target.textContent);
148-
});
14916

150-
function sortTable(colNum, caption) {
151-
let tbody = table.getElementsByTagName('tbody')[0];
152-
let rowsArray = [].slice.call(tbody.rows);
153-
let compare;
17+
let buttonEditContact = document.querySelector('a.Edit');
15418

155-
switch (caption) {
156-
case 'Name':
157-
compare = function(rowA, rowB) {
158-
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
159-
return -1;
160-
};
161-
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
162-
return 1;
163-
};
164-
return 0;
165-
};
166-
break;
167-
case 'Last name':
168-
compare = function(rowA, rowB) {
169-
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
170-
return -1;
171-
};
172-
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
173-
return 1;
174-
};
175-
return 0;
176-
};
177-
break;
178-
case 'Email':
179-
compare = function(rowA, rowB) {
180-
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
181-
return -1;
182-
};
183-
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
184-
return 1;
185-
};
186-
return 0;
187-
};
188-
break;
189-
};
19+
buttonEditContact.addEventListener('click', function(event) {
20+
event.preventDefault();
21+
let editContact = new EditContact();
22+
editContact.renderEditContact();
23+
});
19024

191-
rowsArray.sort(compare);
192-
table.removeChild(tbody);
193-
for (let i = 0; i < rowsArray.length; i++) {
194-
tbody.appendChild(rowsArray[i]);
195-
};
196-
table.appendChild(tbody);
197-
};
198-
};
25+
let buttonUser = document.querySelector('a.User');
19926

200-
renderForm() {
201-
let mainContainer = document.querySelector('main .container');
202-
mainContainer.innerHTML = `${this.createForm()}${this.createTable()}`;
203-
this.sort();
204-
};
27+
buttonUser.addEventListener('click', function(event) {
28+
event.preventDefault();
29+
let user = new User();
30+
user.renderUser();
31+
});
20532

206-
uploadingData() {
207-
const url = 'http://easycode-js.herokuapp.com/Butenko_N/users';
208-
const xhr = new XMLHttpRequest();
209-
xhr.onreadystatechange = () => {
210-
if(xhr.readyState === XMLHttpRequest.DONE) {
211-
//this.dataUsers = xhr.responseText;
212-
let usersArr = JSON.parse(xhr.responseText);
213-
let newUsers = usersArr.map((elem) => {
214-
return {
215-
email: elem.email,
216-
name: elem.fullName.split(' ')[0],
217-
lastName: elem.fullName.split(' ')[1],
218-
};
219-
});
220-
this.dataUsers = newUsers;
221-
this.renderForm();
222-
};
223-
};
224-
xhr.open('GET', url, true);
225-
xhr.send();
226-
227-
};
228-
229-
};
33+
let buttonAddUser = document.querySelector('a.Add');
23034

231-
let usersContacts = new UsersContacts();
232-
usersContacts.uploadingData();
35+
buttonAddUser.addEventListener('click', function(event) {
36+
event.preventDefault();
37+
let addUser = new AddUser();
38+
addUser.renderAddUser();
39+
});
40+
41+
let buttonContacts = document.querySelector('a.Contacts');
23342

43+
buttonContacts.addEventListener('click', function(event) {
44+
event.preventDefault();
45+
let contacts = new UsersContacts();
46+
contacts.loadData();
47+
});

0 commit comments

Comments
 (0)