EasyCode-JavaScriptReact-v1 · SergeyKostikov · Jul 4, 2018 · Jul 4, 2018 · Jul 4, 2018 · Jul 4, 2018
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,27 @@
+<!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'>
+        <div class='app-contact-list'>
+            <table class='contact-table' cellspacing="0" cellpadding="0">                      
+            </table>
+        </div>
+
+    </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,77 @@
+body{
+    font-family: Helvetica, sans-serif
+}
+h1{
+    color: rebeccapurple
+}
+::-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: #6200EE;
+    padding: 15px 10px;
+    border: 1px solid #858585;
+}
+.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-contact-list{
+    height:700px;
+    overflow:auto;
+    /**/
+}
+.icon-link{
+    text-decoration: none;
+
+}
+tr td{
+    border-bottom: 1px solid #858585;
+}
+tr:hover{
+    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,248 @@
+class PhoneApp{
+  constructor(){
+    this.database = [];
+  }
+
+  addUser (options) {
+    let user = {};
+    user.id = this.database.length + 1;
+
+    if (options.name) {
+      user.name = options.name;
+    }
+    if (options.phone) {
+      if (!this.checkPhoneNumber(options.phone)) {
+        user.phone = options.phone;
+      } else {
+        console.log(
+          "не удалось сохранить номер телефона, Телефон должен состоять только из цифр"
+        );
+      }
+    }
+    if (options.homePhone) {
+      if (!this.checkPhoneNumber(options.homePhone)) {
+        user.homePhone = options.homePhone;
+      } else {
+        console.log(
+          "не удалось сохранить номер телефона, Телефон должен состоять только из цифр"
+        );
+      }
+    }
+    this.database.push(user);
+  };
+  checkPhoneNumber(phone){isNaN(+phone)};
+
+  checkAndFormatPhoneNumber(phone) {
+    if (!isNaN(+phone)) {
+      let phoneCode = phone
+        .split("")
+        .splice(0, 3)
+        .join("");
+      let resultPhone =
+        "(" +
+        phoneCode +
+        ") " +
+        phone.slice(3, 5) +
+        "-" +
+        phone.slice(5, 7) +
+        "-" +
+        phone.slice(7);
+      return resultPhone;
+    }
+  };
+
+  deleteUser(id) {
+    this.database.forEach((elem, index) => {
+      if (elem.id == id) {
+        this.database.splice(index, 1);
+      }
+    });
+  };
+
+  searchUserByName(name) {
+    return this.database.reduce(function(newElem, elem) {
+      if (elem.name == name) {
+        newElem.push(elem);
+      }
+      return newElem;
+    }, []);
+  };
+
+  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) {
+        if (direction == "big") {
+          return a[param] < b[param];
+        }
+        if (direction == "small") {
+          return a[param] > b[param];
+        }
+      } else {
+        return a.id > b.id;
+      }
+    });
+  };
+}
+
+class User{
+  constructor(options){
+    this.name = options.name
+    this.phone = options.phone
+    this.homePhone = options.homePhone
+  }
+}
+
+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" })
+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" })
+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/avatar-2.png')
+
+    let editA = this.newElem('a');
+    editA.setAttribute('href','#');
+    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)
+
+    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);
+// console.log(myPhoneApp.searchUserByName("Anduin"));
+// myPhoneApp.editUser(2, { name: "Voljin" });
+// myPhoneApp.editUser(4, { homePhone: "159357" });
+// console.log(myPhoneApp.filterUser("homePhone"));
+// console.log(myPhoneApp.sortUser("phone", "big"));
+// console.log(myPhoneApp.checkAndFormatPhoneNumber("0993378130"));