onlyforbopi
9/27/2018 - 7:27 AM
JS.Objects.Classes.Contact manager version 3 with visualization in an HTML table
JS.Objects.Classes.Contact manager version 3 with visualization in an HTML table
table {
margin-top: 20px;
}
table, tr, td {
border: 1px solid;
} window.onload= init;
// The contact manager as a global variable
let cm;
function init() {
// create an instance of the contact manager
cm = new ContactManager();
cm.addTestData();
cm.printContactsToConsole();
// Display contacts in a table
// Pass the id of the HTML element that will contain the table
cm.displayContactsAsATable("contacts");
}
class Contact {
constructor(name, email) {
this.name = name;
this.email = email;
}
}
class ContactManager {
constructor() {
// when we build the contact manager, it
// has an empty list of contacts
this.listOfContacts = [];
}
addTestData() {
let c1 = new Contact("Jimi Hendrix", "jimi@rip.com");
let c2 = new Contact("Robert Fripp", "robert.fripp@kingcrimson.com");
let c3 = new Contact("Angus Young", "angus@acdc.com");
let c4 = new Contact("Arnold Schwarzenneger", "T2@terminator.com");
this.add(c1);
this.add(c2);
this.add(c3);
this.add(c4);
// Let's sort the list of contacts by Name
this.sort();
}
// Will erase all contacts
empty() {
this.listOfContacts = [];
}
add(contact) {
this.listOfContacts.push(contact);
}
remove(contact) {
for(let i = 0; i < this.listOfContacts.length; i++) {
let c = this.listOfContacts[i];
if(c.email === contact.email) {
// remove the contact at index i
this.listOfContacts.splice(i, i);
// stop/exit the loop
break;
}
}
}
sort() {
// As our array contains objects, we need to pass as argument
// a method that can compare two contacts.
// we use for that a class method, similar to the distance(p1, p2)
// method we saw in the ES6 Point class in module 4
// We always call such methods using the name of the class followed
// by the dot operator
this.listOfContacts.sort(ContactManager.compareByName);
}
// class method for comparing two contacts by name
static compareByName(c1, c2) {
// JavaScript has builtin capabilities for comparing strings
// in alphabetical order
if (c1.name < c2.name)
return -1;
if (c1.name > c2.name)
return 1;
return 0;
}
printContactsToConsole() {
this.listOfContacts.forEach(function(c) {
console.log(c.name);
});
}
load() {
if(localStorage.contacts !== undefined) {
// the array of contacts is savec in JSON, let's convert
// it back to a reak JavaScript object.
this.listOfContacts = JSON.parse(localStorage.contacts);
}
}
save() {
// We can only save strings in local Storage. So, let's convert
// ou array of contacts to JSON
localStorage.contacts = JSON.stringify(this.listOfContacts);
}
displayContactsAsATable(idOfContainer) {
// empty the container that contains the results
let container = document.querySelector("#" + idOfContainer);
container.innerHTML = "";
if(this.listOfContacts.length === 0) {
container.innerHTML = "<p>No contacts to display!</p>";
// stop the execution of this method
return;
}
// creates and populate the table with users
let table = document.createElement("table");
// iterate on the array of users
this.listOfContacts.forEach(function(currentContact) {
// creates a row
let row = table.insertRow();
row.innerHTML = "<td>" + currentContact.name + "</td>"
+ "<td>" + currentContact.email + "</td>"
});
// adds the table to the div
container.appendChild(table);
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>A contact manager, v3</title>
<meta charset="utf-8"/>
</head>
<body>
<p>List of contacts</p>
<div id="contacts"></div>
</body>
</html>