Skip to content

Commit eee1fa2

Browse files
NataliaButenkoNataliaButenko
committed
update phoneApp
1 parent 4ff03c0 commit eee1fa2

File tree

9 files changed

+353
-34
lines changed

9 files changed

+353
-34
lines changed

‎phoneApp/addUser.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
class AddUser {
2+
constructor() {
3+
this.basicUserInfo = ['First Name', 'Last Name', 'Company'];
4+
this.additionalUserInfo = [
5+
'add mobile phone', 'add home phone', 'add email', 'add address', 'add birthday', 'add social profile', 'add field'
6+
];
7+
};
8+
9+
fieldsBasicAddUserInfo() {
10+
let open = '<div class="main-info-holder">';
11+
let addPhoto = `
12+
<div class="edit-foto">
13+
<button class="add-foto-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
14+
<span>add foto</span></button>
15+
</div>
16+
`;
17+
let editBasicField = this.basicUserInfo.reduce((start, elem) => {
18+
start += `
19+
<div class="edit-field">
20+
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
21+
<span>${elem}</span>
22+
</button>
23+
</div>
24+
`;
25+
return start;
26+
},'');
27+
let resEditBasicField = addPhoto + open + `${editBasicField}</div>`;
28+
return resEditBasicField;
29+
};
30+
31+
fieldAdditionalAddUserInfo() {
32+
let open = `
33+
<div class="scroll-holder">
34+
<div class="edit-info">
35+
`;
36+
let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => {
37+
start += `
38+
<div class="edit-field">
39+
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
40+
<span>${elem}</span>
41+
</button>
42+
</div>
43+
`;
44+
return start;
45+
}, '');
46+
let buttonDelContacts = `
47+
<div class="edit-field">
48+
<button href="#" class="delete-contact">delete contact</button>
49+
</div>
50+
`;
51+
let resEditAdditionalField = open + `${editAdditionalField}${buttonDelContacts}</div>`;
52+
return resEditAdditionalField;
53+
};
54+
55+
displayEditContact() {
56+
let captionAddUser = document.querySelector('.container.top-radius');
57+
captionAddUser.innerHTML = `
58+
<nav class="user-top-line">
59+
<a href="user.html">Cansel</a>
60+
<button class = "done-btn">Done</button>
61+
</nav>
62+
`;
63+
let mainContainer = document.querySelector('main .container');
64+
mainContainer.innerHTML = `
65+
<div class="edit-main-info">
66+
${this.fieldsBasicAddUserInfo()}
67+
</div>
68+
${this.fieldAdditionalAddUserInfo()}
69+
`;
70+
};
71+
};

‎phoneApp/editContact.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
class EditContact {
2+
constructor() {
3+
this.basicUserInfo = ['First Name', 'Last Name', 'Company'];
4+
this.additionalUserInfo = [
5+
'phone', 'add home phone', 'add email', 'add address', 'add birthday', 'add social profile', 'add field'
6+
];
7+
};
8+
9+
fieldsBasicUserInfo() {
10+
let open = '<div class="main-info-holder">';
11+
let editBasicField = this.basicUserInfo.reduce((start, elem) => {
12+
start += `
13+
<div class="edit-field">
14+
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
15+
<span>${elem}</span>
16+
</button>
17+
</div>
18+
`;
19+
return start;
20+
}, '');
21+
let resEditBasicField = open + editBasicField + '</div>';
22+
return resEditBasicField;
23+
};
24+
25+
fieldAdditionalUserInfo() {
26+
let open = `
27+
<div class="scroll-holder">
28+
<div class="edit-info">
29+
`;
30+
let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => {
31+
if(elem === 'phone') {
32+
start += `
33+
<div class="edit-field">
34+
<button href="#" class="delete-btn"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
35+
<span>${elem}</span>
36+
<span>+38 (063) 733 44 55</span>
37+
</button>
38+
</div>
39+
`;
40+
} else {
41+
start += `
42+
<div class="edit-field">
43+
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
44+
<span>${elem}</span>
45+
</button>
46+
</div>
47+
`;
48+
};
49+
return start;
50+
},'');
51+
let buttonDelContacts = `
52+
<div class="edit-field">
53+
<button href="#" class="delete-contact">delete contact</button>
54+
</div>
55+
`
56+
let resEditAdditionalField = open + editAdditionalField + buttonDelContacts + '</div></div>';
57+
return resEditAdditionalField;
58+
};
59+
60+
displayEditContact() {
61+
let captionEditContact = document.querySelector('.container.top-radius');
62+
captionEditContact.innerHTML = `
63+
<nav class="user-top-line">
64+
<a href="user.html">Cansel</a>
65+
<button type = "submit" form = "edit-contact" formaction="#" formmethod="get" class = "done-btn">Done</button>
66+
</nav>
67+
`;
68+
let mainContainer = document.querySelector('main .container');
69+
mainContainer.innerHTML = `
70+
<div class="edit-main-info">
71+
<div class="edit-foto"><img src="user-face-mini.png" alt="#" class=" user-img img-circle center-block"></div>
72+
${this.fieldsBasicUserInfo()}
73+
</div>
74+
${this.fieldAdditionalUserInfo()}
75+
`;
76+
};
77+
};

‎phoneApp/headerAndFooter.js‎

Lines changed: 46 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ class HeaderAndFooter {
88
{content:'User', icon: 'user'},
99
{content:'Add user', icon: 'plus'}
1010
];
11-
}
11+
};
1212

1313
createHeader() {
1414
let header = `
@@ -17,58 +17,90 @@ class HeaderAndFooter {
1717
<h2>${this.caption}</h2>
1818
</div>
1919
</header>
20-
`
20+
`;
2121
return header;
22-
}
22+
};
2323

2424
createFooter() {
2525
let done = `
2626
<footer class="footer">
2727
<div class="container bottom-radius">
2828
<nav class="main-nav">
29-
`
29+
`;
3030
let testIndexHtml = function(str) {
3131
if(str === 'Contacts') {
3232
return 'index';
3333
} else {
3434
return str;
35-
}
36-
}
35+
};
36+
};
3737

3838
let contentNav = this.renderLink.reduce((start, elem) => {
3939
start += `
4040
<a href="${testIndexHtml(elem.content)}.html" class="tab ${elem.content}">
4141
<span class="glyphicon glyphicon-${elem.icon}" aria-hidden="true"></span>
4242
<span class = "tab-text">${elem.content}</span>
4343
</a>
44-
`
44+
`;
4545
return start;
4646
}, done);
4747

4848
let footer = contentNav + '</nav>\n </div>\n </footer>';
4949
return footer;
50-
}
50+
};
5151

5252
createMain() {
5353
return `
5454
<main class="main">
5555
<div class="container">
5656
</div>
5757
</main>
58-
`
59-
}
58+
`;
59+
};
6060

6161
createTemplate() {
6262
document.body.innerHTML = this.createHeader() + this.createMain() + this.createFooter();
63-
}
63+
};
6464
};
6565
let headerAndFooter = new HeaderAndFooter('Contacts');
6666
headerAndFooter.createTemplate();
6767

6868

6969
let buttonKeypad = document.querySelector('a.Keypad');
70-
buttonKeypad.onclick = function(e) {
71-
e.preventDefault();
70+
71+
buttonKeypad.addEventListener('click', function(event) {
72+
event.preventDefault();
7273
let keypad = new Keypad();
7374
keypad.displayKeypad();
74-
}
75+
let keypadHolder = document.querySelector('div.keypad-holder');
76+
keypadHolder.addEventListener('click', function(e) {
77+
if(e.target.tagName === 'BUTTON') {
78+
keypad.enteringNumbers(e.target.textContent);
79+
};
80+
});
81+
});
82+
83+
84+
let buttonEditContact = document.querySelector('a.Edit');
85+
86+
buttonEditContact.addEventListener('click', function(event) {
87+
event.preventDefault();
88+
let editContact = new EditContact();
89+
editContact.displayEditContact();
90+
});
91+
92+
let buttonUser = document.querySelector('a.User');
93+
94+
buttonUser.addEventListener('click', function(event) {
95+
event.preventDefault();
96+
let user = new User();
97+
user.displayUser();
98+
});
99+
100+
let buttonAddUser = document.querySelector('a.Add');
101+
102+
buttonAddUser.addEventListener('click', function(event) {
103+
event.preventDefault();
104+
let addUser = new AddUser();
105+
addUser.displayEditContact();
106+
});

‎phoneApp/index.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,13 @@
77
<link rel="stylesheet" type="text/css" href="style.css">
88
</head>
99
<body>
10+
1011
<script src="headerAndFooter.js" defer></script>
1112
<script src="index.js" defer></script>
12-
<script src="keypad.js" defer></script>
13+
<script src="keypad.js" defer></script>
14+
<script src="editContact.js" defer></script>
15+
<script src="user.js" defer></script>
16+
<script src="addUser.js" defer></script>
17+
1318
</body>
1419
</html>

‎phoneApp/index.js‎

Lines changed: 66 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ class UsersContacts {
9494
<input type="text" class="form-control" id= "search" placeholder="Search">
9595
</div>
9696
</form>
97-
`
97+
`;
9898
};
9999

100100
createTable() {
@@ -110,19 +110,19 @@ class UsersContacts {
110110
}, '');
111111
let resultThead = openThead + `${createThead}</tr></thead>`;
112112
return resultThead;
113-
}
113+
};
114114
let tbody = function() {
115115
let openTbody = `
116116
<tbody>
117-
`
117+
`;
118118
let createTbody = self.dataUsers.reduce((start, elem) => {
119119
start += `
120120
<tr>
121121
<td>${elem.name}</td>
122122
<td>${elem.lastName}</td>
123123
<td>${elem.email}</td>
124124
</tr>
125-
`
125+
`;
126126
return start;
127127
}, '');
128128
let resultTbody = openTbody + `${createTbody}</tbody>`;
@@ -133,15 +133,73 @@ class UsersContacts {
133133
${thead()}
134134
${tbody()}
135135
</table>
136-
`
136+
`;
137137
return resultTable;
138-
}
138+
};
139139

140140
addForm() {
141141
let mainContainer = document.querySelector('main .container');
142142
mainContainer.innerHTML += `${this.createForm()}${this.createTable()}`;
143-
}
143+
};
144144
};
145145

146146
let usersContacts = new UsersContacts();
147-
usersContacts.addForm();
147+
usersContacts.addForm();
148+
149+
let table = document.querySelector('.table');
150+
151+
table.addEventListener('click', function(e) {
152+
if(e.target.tagName != 'TH') {
153+
return;
154+
};
155+
sortTable(e.target.cellIndex, e.target.textContent);
156+
});
157+
158+
function sortTable(colNum, caption) {
159+
let tbody = table.getElementsByTagName('tbody')[0];
160+
let rowsArray = [].slice.call(tbody.rows);
161+
let compare;
162+
163+
switch (caption) {
164+
case 'Name':
165+
compare = function(rowA, rowB) {
166+
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
167+
return -1;
168+
};
169+
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
170+
return 1;
171+
};
172+
return 0;
173+
};
174+
break;
175+
case 'Last name':
176+
compare = function(rowA, rowB) {
177+
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
178+
return -1;
179+
};
180+
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
181+
return 1;
182+
};
183+
return 0;
184+
};
185+
break;
186+
case 'Email':
187+
compare = function(rowA, rowB) {
188+
if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) {
189+
return -1;
190+
};
191+
if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) {
192+
return 1;
193+
};
194+
return 0;
195+
};
196+
break;
197+
};
198+
199+
rowsArray.sort(compare);
200+
table.removeChild(tbody);
201+
for (let i = 0; i < rowsArray.length; i++) {
202+
tbody.appendChild(rowsArray[i]);
203+
};
204+
table.appendChild(tbody);
205+
};

0 commit comments

Comments
 (0)