EasyCode-JavaScriptReact-v1 · SergeyKostikov · Jul 4, 2018 · Jul 4, 2018 · Jul 4, 2018 · Jul 4, 2018
diff --git a/js-core/homeworks/contact-list/contact.html b/js-core/homeworks/contact-list/contact.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="src/main.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
+    <meta charset="UTF-8">
+    <title>Contact</title>
+</head>
+<body>
+<div class="main">
+    <div class="app-header">
+        My Phone App
+    </div>
+    <div class="app-content">
+
+    </div>
+    <div class="app-footer">
+        <div></div>
+    </div>
+</div>
+<script src="src/main.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/contact-list/img/avatar-2.png b/js-core/homeworks/contact-list/img/avatar-2.png
diff --git a/js-core/homeworks/contact-list/img/boy-1.png b/js-core/homeworks/contact-list/img/boy-1.png
diff --git a/js-core/homeworks/contact-list/img/boy.png b/js-core/homeworks/contact-list/img/boy.png
diff --git a/js-core/homeworks/contact-list/img/girl-1.png b/js-core/homeworks/contact-list/img/girl-1.png
diff --git a/js-core/homeworks/contact-list/img/girl.png b/js-core/homeworks/contact-list/img/girl.png
diff --git a/js-core/homeworks/contact-list/img/man-1.png b/js-core/homeworks/contact-list/img/man-1.png
diff --git a/js-core/homeworks/contact-list/img/man-2.png b/js-core/homeworks/contact-list/img/man-2.png
diff --git a/js-core/homeworks/contact-list/img/man-3.png b/js-core/homeworks/contact-list/img/man-3.png
diff --git a/js-core/homeworks/contact-list/img/man-4.png b/js-core/homeworks/contact-list/img/man-4.png
diff --git a/js-core/homeworks/contact-list/img/man.png b/js-core/homeworks/contact-list/img/man.png
diff --git a/js-core/homeworks/contact-list/index.html b/js-core/homeworks/contact-list/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link href="src/main.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
+    <meta charset="UTF-8">
+    <title>Phone App</title>
+</head>
+<body>
+<div class="main">
+    <div class="app-header">
+        My Phone App
+    </div>
+    <div class="app-content">
+        <table class="contact-table" cellspacing="0" cellpadding="0">                      
+        </table>
+
+    </div>
+    <div class="app-footer">
+        <div></div>
+    </div>
+</div>
+<script src="src/main.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/contact-list/src/main.css 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
@@ -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'));