-
Notifications
You must be signed in to change notification settings - Fork 0
/
core2.js
170 lines (164 loc) · 7.15 KB
/
core2.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
//Entry Class: Represent each entry in the parking lot
class Entry{
constructor(firstName,lastName,mobileNumber,licensePlate,entryDate,exitDate){
this.firstName = firstName;
this.lastName = lastName;
this.mobileNumber = mobileNumber;
this.licensePlate = licensePlate;
this.entryDate = entryDate;
this.exitDate = exitDate;
}
}
//UI Class: Handle User Interface Tasks
class UI{
static displayEntries(){
const entries = Store.getEntries();
entries.forEach((entry) => UI.addEntryToTable(entry));
}
static addEntryToTable(entry){
const tableBody=document.querySelector('#tableBody');
const row = document.createElement('tr');
row.innerHTML = ` <td>${entry.firstName}</td>
<td>${entry.lastName}</td>
<td>${entry.mobileNumber}</td>
<td>${entry.licensePlate}</td>
<td>${entry.entryDate}</td>
<td>${entry.exitDate}</td>
<td><button class="btn btn-danger delete">X</button></td>
`;
tableBody.appendChild(row);
}
static clearInput(){
//Selects all the inputs
const inputs = document.querySelectorAll('.form-control');
//Clear the content of each input
inputs.forEach((input)=>input.value="");
}
static deleteEntry(target){
if(target.classList.contains('delete')){
target.parentElement.parentElement.remove();
}
}
static showAlert(message,className){
const div = document.createElement('div');
div.className=`alert alert-${className} w-50 mx-auto`;
div.appendChild(document.createTextNode(message));
const formContainer = document.querySelector('.form-container');
const form = document.querySelector('#entryForm');
formContainer.insertBefore(div,form);
setTimeout(() => document.querySelector('.alert').remove(),3000);
}
static validateInputs(){
const firstName = document.querySelector('#firstName').value;
const lastName = document.querySelector('#lastName').value;
const mobileNumber = document.querySelector('#mobileNumber').value;
const licensePlate = document.querySelector('#licensePlate').value;
const entryDate = document.querySelector('#entryDate').value;
const exitDate = document.querySelector('#exitDate').value;
var licensePlateRegex = /[A-Z]{2}-[0-9]{2}[ -]?[A-Z]{1}-[0-9]{4}/;
if(firstName === '' || lastName === '' || mobileNumber === '' || licensePlate === '' || entryDate === '' || exitDate === ''){
UI.showAlert('All fields must me filled!','danger');
return false;
}
if(exitDate < entryDate){
UI.showAlert('Exit Date cannot be lower than Entry Date','danger');
return false;
}
if(!licensePlateRegex.test(licensePlate)){
UI.showAlert('License Plate must be like MH-12 K-1234','danger');
return false;
}
return true;
}
}
//Store Class: Handle Local Storage
class Store{
static getEntries(){
let entries;
if(localStorage.getItem('entries') === null){
entries = [];
}
else{
entries = JSON.parse(localStorage.getItem('entries'));
}
return entries;
}
static addEntries(entry){
const entries = Store.getEntries();
entries.push(entry);
localStorage.setItem('entries', JSON.stringify(entries));
}
static removeEntries(licensePlate){
const entries = Store.getEntries();
entries.forEach((entry,index) => {
if(entry.licensePlate === licensePlate){
entries.splice(index, 1);
}
});
localStorage.setItem('entries', JSON.stringify(entries));
}
}
//Event Display
document.addEventListener('DOMContentLoaded',UI.displayEntries);
//Event Add
document.querySelector('#entryForm').addEventListener('submit',(e)=>{
// e.preventDefault();
//Declare Variables
const firstName = document.querySelector('#firstName').value;
const lastName = document.querySelector('#lastName').value;
const mobileNumber = document.querySelector('#mobileNumber').value;
const licensePlate = document.querySelector('#licensePlate').value;
const entryDate = document.querySelector('#entryDate').value;
const exitDate = document.querySelector('#exitDate').value;
if(!UI.validateInputs()){
return;
}
//Instatiate Entry
const entry = new Entry(firstName, lastName, mobileNumber, licensePlate, entryDate, exitDate);
//Add the entry do de UI table
UI.addEntryToTable(entry);
Store.addEntries(entry);
//Delete content of input's
UI.clearInput();
UI.showAlert('Car successfully added to the parking lot','success');
});
//Event Remove
document.querySelector('#tableBody').addEventListener('click',(e)=>{
//Call to UI function that removes entry from the table
UI.deleteEntry(e.target);
//Get license plate to use as unique element of an entry
var licensePlate = e.target.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.textContent;
//Call to Store function to remove entry from the local storage
Store.removeEntries(licensePlate);
var mobileNumber = e.target.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.textContent;
Store.removeEntries(mobileNumber);
//Show alert that entry was removed
UI.showAlert('Car successfully removed from the parking lot list','success');
})
//Event Search
document.querySelector('#searchInput').addEventListener('keyup', function searchTable(){
//Get value of the input search
const searchValue = document.querySelector('#searchInput').value.toUpperCase();
//Get all lines of table body
const tableLine = (document.querySelector('#tableBody')).querySelectorAll('tr');
//for loop #1 (used to pass all the lines)
for(let i = 0; i < tableLine.length; i++){
var count = 0;
//Get all collumns of each line
const lineValues = tableLine[i].querySelectorAll('td');
//for loop #2 (used to pass all the collumns)
for(let j = 0; j < lineValues.length - 1; j++){
//Check if any collumn of the line starts with the input search string
if((lineValues[j].innerHTML.toUpperCase()).startsWith(searchValue)){
count++;
}
}
if(count > 0){
//If any collumn contains the search value the display block
tableLine[i].style.display = '';
}else{
//Else display none
tableLine[i].style.display = 'none';
}
}
})