Skip to content

Commit 59872b9

Browse files
adminadmin
admin
authored and
admin
committed
update phoneApp (13.08.18)
1 parent 3b946f2 commit 59872b9

File tree

10 files changed

+139
-94
lines changed

10 files changed

+139
-94
lines changed

‎phoneApp/addUser.js‎

Lines changed: 46 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
class AddUser {
22
constructor() {
3-
this.basicUserInfo = ['First Name', 'Last Name', 'Company'];
3+
this.basicUserInfo = ['First Name', 'Last Name', 'Mobile phone', 'Email'];
44
this.additionalUserInfo = [
5-
'add mobile phone', 'add home phone', 'add email', 'add address', 'add birthday', 'add social profile', 'add field'
5+
'add home phone', 'company', 'add address', 'add birthday', 'add social profile', 'add field'
66
];
77
};
88

@@ -15,18 +15,14 @@ class AddUser {
1515
</div>
1616
`;
1717
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-
<label>
24-
<input type="text" class="${elem}"/>
25-
<button class="save">s</button>
26-
<button class="cancel">c</button>
27-
</label>
28-
</div>
29-
`;
18+
let addClass = elem.replace(/\s/g, '_');
19+
start +=`
20+
<div class="edit-field add-btn">
21+
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
22+
<input type="text" class="glyphicon-plus-sign ${addClass}" placeholder="${elem}"/>
23+
24+
</div>
25+
`;
3026
return start;
3127
},'');
3228
let resEditBasicField = addPhoto + open + `${editBasicField}</div>`;
@@ -39,12 +35,11 @@ class AddUser {
3935
<div class="edit-info">
4036
`;
4137
let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => {
42-
let addClass = elem.replace(/\s/g, '_');
38+
/* let addClass = elem.replace(/\s/g, '_');*/
4339
start += `
44-
<div class="edit-field ${addClass}">
45-
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
46-
<span>${elem}</span>
47-
</button>
40+
<div class="edit-field add-btn">
41+
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
42+
<input type="text" class="glyphicon-plus-sign" placeholder="${elem}"/>
4843
</div>
4944
`;
5045
return start;
@@ -59,18 +54,40 @@ class AddUser {
5954
};
6055

6156
addEvents() {
62-
let test = document.querySelector('.main-info-holder');
63-
test.addEventListener('click', function(e) {
64-
if(e.target.tagName == "BUTTON" || e.target.parentNode.tagName == "BUTTON") {
65-
let label = document.querySelectorAll('div.edit-field label');
66-
[...label].forEach((elem) => {
67-
if(elem.firstElementChild.className == e.target.textContent){
68-
elem.style.display = 'block';
69-
};
70-
});
71-
};
57+
let delEnteredData = document.querySelector('button.delete-contact');
58+
delEnteredData.addEventListener('click', function() {
59+
let input = document.querySelectorAll('input[placeholder]');
60+
[...input].forEach(elem => {
61+
elem.value = '';
62+
})
7263
});
64+
let addUser = document.querySelector('button.done-btn');
65+
addUser.addEventListener('click', function() {
66+
let input = document.querySelectorAll('input[placeholder]');
67+
let objUser = [...input].reduce((done, elem) => {
68+
if(elem.className === 'glyphicon-plus-sign Email') {
69+
done.email = elem.value;
70+
} else if(elem.className === 'glyphicon-plus-sign First_Name') {
71+
done.fullName = `${elem.value} `;
72+
} else if(elem.className === 'glyphicon-plus-sign Last_Name') {
73+
done.fullName += elem.value;
74+
} else if(elem.className === 'glyphicon-plus-sign Mobile_phone') {
75+
done.phone = elem.value;
76+
} else {
77+
let key = elem.placeholder.replace(/\s/g, '_');
78+
done[key] = elem.value;
79+
};
80+
return done;
81+
}, {});
7382

83+
fetch(API_URL, {
84+
method: 'POST',
85+
headers: {
86+
'Content-Type': 'application/json'
87+
},
88+
body: JSON.stringify(objUser)
89+
});
90+
});
7491
}
7592

7693
renderAddUser() {

‎phoneApp/constants.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
const API_URL = 'http://easycode-js.herokuapp.com/Butenko_N/users';
1+
const API_URL = 'http://easycode-js.herokuapp.com/Butenko_N/users';
2+
let dataUsers = [];

‎phoneApp/editContact.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
class EditContact {
2-
constructor() {
2+
constructor(user) {
3+
this.user = user;
34
this.basicUserInfo = ['First Name', 'Last Name', 'Company'];
45
this.additionalUserInfo = [
56
'phone', 'add home phone', 'add email', 'add address', 'add birthday', 'add social profile', 'add field'
@@ -61,18 +62,18 @@ class EditContact {
6162
let captionEditContact = document.querySelector('.container.top-radius');
6263
captionEditContact.innerHTML = `
6364
<nav class="user-top-line">
64-
<a href="user.html">Cansel</a>
65+
<a href="user.html">Cancel</a>
6566
<button type = "submit" form = "edit-contact" formaction="#" formmethod="get" class = "done-btn">Done</button>
6667
</nav>
6768
`;
6869
let mainContainer = document.querySelector('main .container');
6970
mainContainer.innerHTML = `
7071
<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+
<div class="edit-foto"><img src="user_img.png" alt="#" class=" user-img img-circle center-block"></div>
7273
${this.fieldsBasicUserInfo()}
7374
</div>
7475
${this.fieldAdditionalUserInfo()}
7576
`;
7677
};
7778

78-
};
79+
};

‎phoneApp/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<title>homework_15</title>
4+
<title>phoneApp</title>
55
<meta charset="utf-8" />
66
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
77
<link rel="stylesheet" type="text/css" href="style.css">

‎phoneApp/index.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
//Task3
21
let headerAndFooter = new HeaderAndFooter('Contacts');
32
headerAndFooter.renderTemplate();
43

@@ -26,8 +25,8 @@ let buttonUser = document.querySelector('a.User');
2625

2726
buttonUser.addEventListener('click', function(event) {
2827
event.preventDefault();
29-
let user = new User();
30-
user.renderUser();
28+
/* let user = new User();
29+
user.renderUser();*/
3130
});
3231

3332
let buttonAddUser = document.querySelector('a.Add');

‎phoneApp/keypad.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,8 @@ class Keypad {
8383
addNum.addEventListener('click', function(e) {
8484
let addUser = new AddUser();
8585
addUser.renderAddUser();
86-
let placeNum = document.querySelector('.add_mobile_phone');
87-
placeNum.innerHTML = `
88-
<span>
89-
+38 ${input.value}
90-
</span>
91-
`;
86+
let placeNum = document.querySelector('.Mobile_phone');
87+
placeNum.value = `+38 ${input.value}`;
9288
});
9389
};
9490

‎phoneApp/style.css‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,6 @@ h2 {
4747
margin: 0;
4848
}
4949

50-
h3 {
51-
margin: 0;
52-
}
5350

5451
.container {
5552
width: 400px;
@@ -60,6 +57,7 @@ h3 {
6057
.top-radius {
6158
border-top-left-radius: 30px;
6259
border-top-right-radius: 30px;
60+
padding-bottom: 0px;
6361
}
6462

6563
.bottom-radius {
@@ -230,7 +228,6 @@ h3 {
230228
}
231229

232230
.tel-number {
233-
margin-bottom: 20px;
234231
font-size: 16px;
235232
}
236233

@@ -293,16 +290,11 @@ h3 {
293290

294291
.edit-foto {
295292
margin-right: 10px;
296-
/* width: 100px;
297-
height: 100px;*/
298-
}
299293

300294
.edit-field {
301295
padding: 5px 0;
302296
border-bottom: 1px solid #fff;
303297
width: 100%;
304-
display: flex;
305-
flex-direction: column;
306298
}
307299

308300
.delete-btn {
@@ -344,15 +336,30 @@ input[type ="text"].numbers {
344336
outline: none;
345337
}
346338

347-
div.edit-field label {
348-
display: none;
339+
input.glyphicon-plus-sign {
340+
width: 222px;
341+
color: #333;
342+
border: none;
343+
background: #ccc !important;
344+
outline: none;
349345
}
350346

351-
div.edit-field label button {
352-
width: 20px;
353-
height: 26px;
347+
input::-webkit-input-placeholder {
348+
color: #4cda64;
349+
}
350+
351+
h4 {
352+
margin-bottom: 5px;
353+
margin-top: 0px;
354+
}
355+
356+
button.remove-btn {
357+
border: none;
358+
background-color: #ccc;
354359
}
355360

356-
div.edit-field label input {
357-
width: 192px;
361+
button.buttonEdit {
362+
color: #e32910;
363+
font-weight: bold;
364+
margin-left: 105px;
358365
}

‎phoneApp/user.js‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
class User {
2-
constructor() {
2+
constructor(user) {
3+
this.user = user;
34
this.options = [
45
{option: 'message', class: 'glyphicon-comment'},
56
{option: 'call', class: 'glyphicon-earphone'},
@@ -13,8 +14,8 @@ class User {
1314

1415
showUser() {
1516
return `
16-
<img src="user-face-mini.png" alt="#" class=" user-img img-circle center-block">
17-
<div class="user-name">User Name</div>
17+
<img src="user_img.png" alt="#" class=" user-img img-circle center-block">
18+
<div class="user-name ${this.user.id}">${this.user.name} ${this.user.lastName}</div>
1819
`;
1920
};
2021

@@ -36,12 +37,12 @@ class User {
3637
telNumber() {
3738
return `
3839
<div class="tel-number">
39-
<h3>mobile</h3>
40-
<div> +38 (093) 989 89 89</div>
40+
<h4>mobile</h4>
41+
<div>${this.user.phone}</div>
4142
</div>
4243
<div class="tel-number">
43-
<h3>home</h3>
44-
<div> +38 (093) 989 89 89</div>
44+
<h4>home</h4>
45+
<div> - - - - </div>
4546
</div>
4647
`;
4748
};
@@ -52,20 +53,33 @@ class User {
5253
start += `<div class ="options-item"><a href="#">${elem}</a></div>`;
5354
return start;
5455
}, '');
55-
let resOptionTable = open + `${optionsTable}</div>`;
56+
let buttonEdit = `<button class="buttonEdit"> edit contact user </button>`
57+
let resOptionTable = open + `${optionsTable}</div> ${buttonEdit}`;
5658
return resOptionTable;
5759
};
5860

61+
addEvents() {
62+
let self = this;
63+
let buttonEdit = document.querySelector('button.buttonEdit');
64+
//console.log(buttonEdit);
65+
buttonEdit.addEventListener('click', function () {
66+
let editContacts = new EditContact(self.user);
67+
editContacts.renderEditContact();
68+
})
69+
70+
}
71+
5972
renderUser() {
6073
let captionUser = document.querySelector('.container.top-radius');
6174
captionUser.innerHTML = `
6275
<nav class="user-top-line">
63-
<a href="user.html">Cansel</a>
64-
<button type = "submit" form = "edit-contact" formaction="#" formmethod="get" class = "done-btn">Done</button>
76+
<a href="user.html">Cancel</a>
77+
<button type = "submit" form = "edit-contact" formaction="#" formmethod="get" class = "remove-btn">Remove</button>
6578
</nav>
6679
`;
6780
let mainContainer = document.querySelector('main .container');
6881
mainContainer.innerHTML = `${this.showUser()}${this.lineOptions()}${this.telNumber()}${this.tableOption()}`;
82+
this.addEvents();
6983
};
7084

7185
};

0 commit comments

Comments
 (0)