diff --git a/js-core/homeworks/contact-list/contact.html b/js-core/homeworks/contact-list/contact.html new file mode 100644 index 0000000..ebbb8b3 --- /dev/null +++ b/js-core/homeworks/contact-list/contact.html @@ -0,0 +1,23 @@ + + + + + + + Contact + + +
+
+ My Phone App +
+
+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/js-core/homeworks/contact-list/img/avatar-2.png b/js-core/homeworks/contact-list/img/avatar-2.png new file mode 100644 index 0000000..70f7603 Binary files /dev/null and b/js-core/homeworks/contact-list/img/avatar-2.png differ diff --git a/js-core/homeworks/contact-list/img/boy-1.png b/js-core/homeworks/contact-list/img/boy-1.png new file mode 100644 index 0000000..bc02054 Binary files /dev/null and b/js-core/homeworks/contact-list/img/boy-1.png differ diff --git a/js-core/homeworks/contact-list/img/boy.png b/js-core/homeworks/contact-list/img/boy.png new file mode 100644 index 0000000..223eaef Binary files /dev/null and b/js-core/homeworks/contact-list/img/boy.png differ diff --git a/js-core/homeworks/contact-list/img/girl-1.png b/js-core/homeworks/contact-list/img/girl-1.png new file mode 100644 index 0000000..8d35fd0 Binary files /dev/null and b/js-core/homeworks/contact-list/img/girl-1.png differ diff --git a/js-core/homeworks/contact-list/img/girl.png b/js-core/homeworks/contact-list/img/girl.png new file mode 100644 index 0000000..abf10fe Binary files /dev/null and b/js-core/homeworks/contact-list/img/girl.png differ diff --git a/js-core/homeworks/contact-list/img/man-1.png b/js-core/homeworks/contact-list/img/man-1.png new file mode 100644 index 0000000..f2f65cc Binary files /dev/null and b/js-core/homeworks/contact-list/img/man-1.png differ diff --git a/js-core/homeworks/contact-list/img/man-2.png b/js-core/homeworks/contact-list/img/man-2.png new file mode 100644 index 0000000..af1e7b0 Binary files /dev/null and b/js-core/homeworks/contact-list/img/man-2.png differ diff --git a/js-core/homeworks/contact-list/img/man-3.png b/js-core/homeworks/contact-list/img/man-3.png new file mode 100644 index 0000000..b56112e Binary files /dev/null and b/js-core/homeworks/contact-list/img/man-3.png differ diff --git a/js-core/homeworks/contact-list/img/man-4.png b/js-core/homeworks/contact-list/img/man-4.png new file mode 100644 index 0000000..ef3d7bb Binary files /dev/null and b/js-core/homeworks/contact-list/img/man-4.png differ diff --git a/js-core/homeworks/contact-list/img/man.png b/js-core/homeworks/contact-list/img/man.png new file mode 100644 index 0000000..14409fc Binary files /dev/null and b/js-core/homeworks/contact-list/img/man.png differ diff --git a/js-core/homeworks/contact-list/index.html b/js-core/homeworks/contact-list/index.html new file mode 100644 index 0000000..5e01bb0 --- /dev/null +++ b/js-core/homeworks/contact-list/index.html @@ -0,0 +1,25 @@ + + + + + + + Phone App + + +
+
+ My Phone App +
+
+ +
+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/js-core/homeworks/contact-list/src/main.css b/js-core/homeworks/contact-list/src/main.css new file mode 100644 index 0000000..f10361c --- /dev/null +++ b/js-core/homeworks/contact-list/src/main.css @@ -0,0 +1,81 @@ +body{ + font-family: Helvetica, sans-serif +} +::-webkit-scrollbar { + width: 5px; +} + +/* Track */ +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: #858585; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: #555; +} + +div.main{ + margin: auto; + position: relative; + width: 500px; + border: 1px solid #858585; + box-shadow: 0 0 15px #858585; +} +div.app-header, div.app-footer{ + text-align: center; + max-width: 478px; + width: 100%; + min-height: 25px; + color: #fff; + background: #3367d6; + padding: 15px 10px; + border: 1px solid #3367d6; +} +.app-contact-buttons{ + text-align: center; + font-size: 20px; + +} +.app-contact-buttons a{ + color:#000; +} +.app-contact-avatar, .app-contact-buttons{ + width: 13.3%; + height: 50px; + padding: 15px +} +.app-contact-avatar img{ + width: 50px; +} +.app-content{ + height:700px; + overflow:auto; + /**/ +} +.icon-link{ + text-decoration: none; + +} +tr td{ + border-bottom: 1px solid #858585; +} +tr:hover td{ + height: 60px; + border-top: 1px solid #858585; + border-bottom: 2px solid #858585; +} +tr:hover{ + cursor: pointer; + background-color: #f1f1f1; + +} +.round-avatar{ + overflow:hidden; + border-radius: 25px; +} diff --git a/js-core/homeworks/contact-list/src/main.js b/js-core/homeworks/contact-list/src/main.js new file mode 100644 index 0000000..68e44e8 --- /dev/null +++ b/js-core/homeworks/contact-list/src/main.js @@ -0,0 +1,233 @@ +class PhoneApp{ + constructor(){ + this.database = []; + } + + addUser (user) { + let currentUser = {}; + currentUser.id = this.database.length + 1; + currentUser.avatar = user.avatar || "avatar-2" + if (user.name) { + currentUser.name = user.name; + } + if (user.phone) { + if (!this.checkPhoneNumber(user.phone)) { + currentUser.phone = user.phone; + } else { + console.log( + "не удалось сохранить номер телефона, Телефон должен состоять только из цифр" + ); + } + } + if (user.homePhone) { + if (!this.checkPhoneNumber(user.homePhone)) { + currentUser.homePhone = user.homePhone; + } else { + console.log( + "не удалось сохранить номер телефона, Телефон должен состоять только из цифр" + ); + } + } + this.database.push(currentUser); + }; + + checkPhoneNumber(phone){ + isNaN(+phone) + }; + + + deleteUser(id) { + this.database.filter((elem, index) => { + if (elem.id == id) { + this.database.splice(index, 1); + } + }); + }; + + searchUserByName(name) { + return this.database.filter(function(elem) { + if (elem.name == name) { + return elem; + } + }); + }; + + editUser(id, options) { + this.database.map(elem => { + if (elem.id == id) { + if (options.name) { + elem.name = options.name; + } + if (options.phone) { + elem.phone = options.phone; + } + if (options.homePhone) { + elem.homePhone = options.homePhone; + } + } + }); + }; + + filterUser(param) { + return this.database.filter(elem => { + if (elem[param]) { + return elem; + } + }); + }; + + sortUser(param, direction) { + return this.database.sort((a, b) => { + if (direction) { + //from small value to big value + if (direction == "up") { + return a[param] < b[param]; + } + //from big value to small value + if (direction == "down") { + return a[param] > b[param]; + } + //default + } else { + return a.id > b.id; + } + }); + }; +} + +class User{ + constructor(options){ + this.name = options.name + this.phone = options.phone + this.homePhone = options.homePhone + this.avatar = options.avatar + } +} + +let vasya = new User({ + name: "Vasya", + phone: "123456789", + homePhone: "11111" +}) +let petja = new User({ name: "Petja", phone: "123456798" }) +let brigitte = new User({ name: "Brigitte", phone: "123457689", avatar:"girl-1" }) +let tracer = new User({ name: "Tracer", phone: "123546789" }) +let anduin = new User({ + name: "Anduin", + phone: "113456789", + homePhone: "535353" +}) +let torgrim = new User({ name: "Torgrim", phone: "321456789", avatar:"man-2" }) +let anduin2 = new User({ + name: "Anduin", + phone: "113451189", + homePhone: "222222" +}) +let user = new User({ + name: "User", + phone: "113451189", + homePhone: "222222" +}) +let name = new User({ + name: "Name", + phone: "113451189", + homePhone: "222222" +}) +let someUaser = new User({ + name: "someUaser", + phone: "113451189", + homePhone: "222222" +}) +let blabla = new User({ + name: "blabla", + phone: "113451189", + homePhone: "222222" +}) + +class App{ + constructor(){ + this.baseBlock = document.querySelector(".contact-table"); + } + + createUsersList(users){ + users.database.forEach(elem => { + this.render(this.createUserTR(elem)) + }) + } + + createUserTR(user){ + let tr = this.newElem("tr"); + tr.className = "borderdered"; + + let avatarTD = this.newElem("td"); + let infoTD = this.newElem("td"); + let buttonTD = this.newElem("td"); + + avatarTD.className = "app-contact-avatar" + infoTD.className = "app-contact-name" + buttonTD.className = "app-contact-buttons" + + let p_name = this.newElem("p") + p_name.textContent = user.name + let p_phone = this.newElem("p") + p_phone.textContent = user.phone + + let avatarDIV = this.newElem("div") + avatarDIV.className = "round-avatar" + + let avatarImg = this.newElem("img"); + avatarImg.setAttribute("src","img/"+user.avatar+".png") + + let editA = this.newElem("a"); + editA.setAttribute("href","contact.html?do=edit"); + editA.className = "icon-link"; + + let editIconAwesome = this.newElem("i"); + editIconAwesome.classList.add("far","fa-edit"); + + editA.appendChild(editIconAwesome); + buttonTD.appendChild(editA); + + infoTD.appendChild(p_name) + infoTD.appendChild(p_phone) + + avatarDIV.appendChild(avatarImg) + avatarTD.appendChild(avatarDIV) + + tr.appendChild(avatarTD); + tr.appendChild(infoTD) + tr.appendChild(buttonTD) + tr.setAttribute("onclick", "window.location.href = 'contact.html'"); + + return tr + } + + render(elem){ + this.baseBlock.appendChild(elem) + } + + newElem(elem){ + return document.createElement(elem); + } +} + +let app = new App() + + +const myPhoneApp = new PhoneApp(); +myPhoneApp.addUser(vasya); +myPhoneApp.addUser(petja); +myPhoneApp.addUser(brigitte); +myPhoneApp.addUser(tracer); +myPhoneApp.addUser(anduin); +myPhoneApp.addUser(torgrim); +myPhoneApp.addUser(anduin2); +myPhoneApp.addUser(user); +myPhoneApp.addUser(name); +myPhoneApp.addUser(someUaser); +myPhoneApp.addUser(blabla); + +console.log(app.createUsersList(myPhoneApp)) +console.log(myPhoneApp) + +console.log(myPhoneApp.searchUserByName('Anduin')); \ No newline at end of file