Skip to content

Callbook #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GeorgeTsendra wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Callbook #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cb2f1eb
10.07.18 first push
Jul 10, 2018
1791ba7
12.07.18 second push
Jul 12, 2018
d92ad3c
20.07 second push
Jul 20, 2018
6ebcdbb
23.07fourthCommit
Jul 23, 2018
ab9e8d1
29.07 fifth commit
Jul 29, 2018
9c0b7c7
callBook in classes 31.07
Jul 31, 2018
1a7816f
07.08 add Search and Keypad validation
Aug 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions Call Book/add-user.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Edit contact</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>

<body>
<div id="app">

</div>
<div id="footer">

</div>
<script src="js/add-user.js"></script>
<script src="js/footer.js"></script>
</body>
</html>
24 changes: 24 additions & 0 deletions Call Book/edit-contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Edit contact</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>

<body>
<div id="app">

</div>
<div id="footer">

</div>

<script src="js/edit-contact.js"></script>
<script src="js/footer.js"></script>
</body>
</html>
26 changes: 26 additions & 0 deletions Call Book/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contacts</title>
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>

<body>
<div id="app">

</div>
<div id="footer">

</div>



<script src="js/context.js"></script>
<script src="js/footer.js"></script>
</body>
</html>
64 changes: 64 additions & 0 deletions Call Book/js/add-user.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
class addUser{
constructor(options){

}

addEditFieldToMainInfo (arr){
const fields = arr.map(value =>
`<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>${value}</span>
</button>
</div>`
).join("")
return `<div class="main-info-holder"> ${fields}</div> `
}

addEditFieldToScrollHolder (arr) {
const scrollHolder = arr.map(value =>
`<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>${value}</span>
</button>
</div>`
).join("")

return `<div class="scroll-holder">
<div class="edit-info">
${scrollHolder}
<div class="edit-field">
<button href="#" class="delete-contact">delete contact</button>
</div>
</div>
</div>`
}

addUserPageOutput (){
let main = document.getElementById('app')

main.innerHTML += `<header class="header">
<div class="container top-radius">
<nav class="user-top-line">
<a href="user.html">Cansel</a>
<button class = "done-btn">Done</button>
</nav>
</div>
</header>
<main class="main">
<div class="container">
<div class="edit-main-info">
<div class="edit-foto">
<button class="add-foto-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add foto</span></button>
</div>
${this.addEditFieldToMainInfo(["First Name",'Last Name','Company'])}
</div>
${this.addEditFieldToScrollHolder(['add mobile phone','add home phone',
'add email','add address','add birthday','add social profile', 'add field'])}
</div>
</main>`
}
}

let myAddUser = new addUser()
myAddUser.addUserPageOutput()
166 changes: 166 additions & 0 deletions Call Book/js/context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@

class Context {
constructor() {

this.dataBase = [{
id: 1,
name: 'Vasya',
surname: "Ivanov",
numb: `(099)33-78-130`
},
{
id: 2,
name: 'Dima',
surname: "Petrov",
numb: `(099)33-78-130`
},
{
id: 3,
name: 'Grisha',
surname: "Adianow",
numb: `(099)33-78-130`
},
{
id: 4,
name: 'Jora',
surname: "Shewshenko",
numb: `(099)33-78-130`
},
{
id: 5,
name: 'Jora',
surname: "Ivanov",
numb: `(099)33-78-130`
},
{
id: 6,
name: 'Dima',
surname: "Dimonov",
numb: `(099)33-78-130`
}
]
}

searchUsers(username) {
let allUsers = [];
this.dataBase.forEach((value, index, arr)=> {

if (value.name == username) {
allUsers.push(this.dataBase[index]);

}
})

this.dataBase = allUsers
this.buildHtmlTags()
return this.dataBase
}


createTh(arr){
const innerTr = arr.map(value =>
`<td OnClick = "myContext.sortUsers('${value}')">${value}</td>`
).join('');
return `<thead><tr>
${innerTr}
</tr></thead>`
}


buildHtmlTags (){
let main = document.getElementById('app')
main.innerHTML = `<header class="header">
<div class="container top-radius">
<h2>Contacts</h2>
</div>
</header>
<main>
<div class="container">
<form class="form-inline search-form">
<div class="form-group">
<label class="sr-only" for="search">Search</label>
<input type="text" class="form-control" id= "search" placeholder="Search">
</div>
</form>
<table class="table table-hover contacts">

${this.createTh(['name','surname', 'number'])}

<tbody id="tbody_id">
</tbody>
</table>
</div>
</main>`
this.outputDataArray(this.dataBase)


let formToSearch = document.querySelector(".form-control")

window.addEventListener("keydown", e => {

if (e.keyCode == 13) {
this.searchUsers(`${formToSearch.value}`)
}
// console.log(`${formToSearch.value}`);
})
this.checkUser()
}

createElement (value, key, index){
let td = document.createElement('td');
let rtById = document.getElementById(`tr_${index}`)
rtById.appendChild(td)
td.textContent = value[key]
}

outputDataArray(options) {
let tabelBody = document.getElementById("tbody_id")
options.forEach((value, index, arr) => {
let tr = document.createElement('tr')
tr.setAttribute('id', `tr_${index}`);
tr.setAttribute('class', `tr_class`);
tabelBody.appendChild(tr);
this.createElement(value, 'name', index)
this.createElement(value, 'surname', index)
this.createElement(value, 'numb', index)
})
}

sortUsers(property){

var newArray = this.dataBase.sort((a, b) => {
return a[property] == b[property] ? 0 : a[property] < b[property] ? -1 : 1;
})
let tabelBody = document.getElementById("tbody_id")
tabelBody.innerHTML = "";
return this.outputDataArray(newArray)
}

checkUser(){
let allTr = document.querySelectorAll(".tr_class")
allTr.forEach((tr, index, arr)=>{
tr.addEventListener("click", a =>{
let allTd = tr.querySelectorAll("td")

let innerTdName = allTd[0].innerHTML
let innerTdSurname = allTd[1].innerHTML
let innerTdNumber = allTd[2].innerHTML

console.log(innerTdName);
console.log(innerTdSurname);
console.log(innerTdNumber);

})
})


}




}


let myContext = new Context();
myContext.buildHtmlTags()
64 changes: 64 additions & 0 deletions Call Book/js/edit-contact.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
class EditContact {
constructor (options){

}
addEditFieldToMainInfo (arr){
const fields = arr.map(value =>
`<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>${value}</span>
</button>
</div>`
).join("")
return `<div class="main-info-holder"> ${fields}</div> `
}

addEditFieldToScrollHolder(arr){
const scrollHolder = arr.map(value =>
`<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>${value}</span>
</button>
</div>`
).join("")

return `<div class="scroll-holder">
<div class="edit-info">
${scrollHolder}
<div class="edit-field">
<button href="#" class="delete-contact">delete contact</button>
</div>
</div>
</div>`
}

editContactPageOutput(){
let main = document.getElementById('app')

main.innerHTML = `<header class="header">
<div class="container top-radius">
<nav class="user-top-line">
<a href="user.html">Cansel</a>
<button type = "submit" form = "edit-contact" formaction="#" formmethod="get" class = "done-btn">Done</button>
</nav>
</div>
</header>
<main class="main">
<div class="container">
<div class="edit-main-info">
<div class="edit-foto"><img src="images/user-face-mini.png" alt="#" class=" user-img img-circle center-block"></div>
${this.addEditFieldToMainInfo(["First Name",'Last Name','Company'])}

</div>

${this.addEditFieldToScrollHolder(['add mobile phone','add home phone',
'add email','add address','add birthday','add social profile', 'add field'])}

</div>
</main>`

}
}

let myEditContact = new EditContact()
myEditContact.editContactPageOutput()
Loading