-
Notifications
You must be signed in to change notification settings - Fork 1
/
contacts.html
164 lines (156 loc) · 6.81 KB
/
contacts.html
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
<!DOCTYPE html>
<html lang="en">
<!--Registration Page-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="js/md5.js"></script>
<script src="js/code.js"></script>
<script src="js/contact.js"></script>
<link rel="stylesheet" type="text/css" href="styles/global.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cantora+One&family=Montserrat+Alternates:wght@600&family=Nunito+Sans:wght@300&display=swap" rel="stylesheet">
<title>Contacts</title>
<link rel="shortcut icon" type="image/png" href="UCF_Knightro_logo.png"/>
</head>
<body>
<div class="box2" id="box2">
<div class="hamburger" onclick="openHamburger(this)" style="width: 100%">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="myLinks">
<button type="button" id="deleteAccountButton" onclick="window.location.href='https://contacts.rruiz.dev/preferences.html'">Preferences</button>
<button type="button" id="logoutButton" onclick="logout()">Log out</button>
</div>
</div>
<div class="row"><hr /></div>
<div class="row">
<h1 style="float: left">Contacts</h1>
</div>
<!--Either keep the popup over the button or hide the button (JQuery) -->
<div class="row">
<button type="button" onclick="openPopup('contact-popup')" id="open">Add Contact</button>
</div>
<!--This hr shows through everything for some reason(top layer on screen)-->
<hr/>
<div class="row">
<button type="button" id="showResultsButton" onclick="showAndHide()">Show/Hide Search Results</button>
<input style="margin-right: 5px" type="text" id ="searchValue" placeholder="Search..." required>
<span id="errorSearch"></span>
<button type="button" id="searchButton" onclick="doSearch(0)">Search</button>
</div>
<div class="row">
</div>
<!--Makes it so that hitting "enter" when the cursor is inside the password input section, the login button is pressed-->
<script>
document.getElementById("searchValue").addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("searchButton").click();
}
}
);
</script>
<div class="row">
<div class="table">
<p id="noSearchResults" style="display: none"></p>
<table style="display: none;" id="searchResults"></table>
</div>
</div>
<!-- May have to move this below the div -->
<!-- When clicked, will grab more contacts from database -->
<div class="row">
<button type="button" id="loadMore-btn" style="display: none;" onclick="getMore()">Show more</button>
</div>
</div>
</div>
</div>
<div class="modal" id="deleteAccount-popup">
<div class="modal-content">
<span onclick="closePopup('deleteAccount-popup')" class="modal-button">×</span>
<h2>Are You Sure You Want To Permanently Delete Your Account?</h2>
<!-- Took out the row to make the pop up taller-->
<div class="row">
<button style="color:red" type="button" id="deleteAccountButton-popup" onclick="deleteAccount()"><strong>Delete My Account</strong></button>
<!--May also have to move this to be under the open button -->
<p id="deleteAccountResult"></p>
<button type="button" id="cancelDeleteAccountButton" onclick="closePopup('deleteAccount-popup')">Cancel</button>
</div>
</div>
</div>
<div class="modal" id="deleteContact-popup">
<div class="modal-content">
<span onclick="closePopup('deleteContact-popup')" class="modal-button">×</span>
<h2>Are You Sure You Want To Permanently Delete This Contact?</h2>
<!-- Took out the row to make the pop up taller-->
<div class="row">
<button style="color:red" type="button" id="deleteContactButton-popup" onclick="deleteContact('u_id, element.c_id')"><strong>Delete This Contact</strong></button>
<!--May also have to move this to be under the open button -->
<p id="deleteContactResult"></p>
<button type="button" id="cancelDeleteContactButton" onclick="closePopup('deleteContact-popup')">Cancel</button>
</div>
</div>
</div>
<div class="modal" id="contact-popup">
<div class="modal-content">
<span onclick="closePopup('contact-popup')" class="modal-button">×</span>
<h2>Add Contact</h2>
<!-- Took out the row to make the pop up taller-->
<div class="modal-container">
<label for="firstName">First Name</label>
<input class="thinnerInput" type="text" id="firstName" placeholder="Enter First Name"><br>
<label for="lastName">Last Name</label>
<input class="thinnerInput" type="text" id="lastName" placeholder="Enter Last Name"><br>
<label for="phone">Phone Number</label>
<input class="thinnerInput" type="text" id="phone" placeholder="Enter Phone Number"><br>
<label for="phone">Email Address</label>
<input class="thinnerInput" type="text" id="email" placeholder="Enter Email Address"><br>
<label for="address">Street Address</label>
<input class="thinnerInput" type="text" id="address" placeholder="Enter Address"><br>
</div>
<div class="row">
<button type="button" id="addButton" onclick="addContact()">Add</button>
</div>
<div class="row">
<button type="button" id="cancelButton" onclick="closePopup('contact-popup')">Close</button>
</div>
<div class="row">
<!--May also have to move this to be under the open button -->
<p id="contactResult"></p>
</div>
</div>
</div>
<div class="modal" id="editContact-popup">
<div class="modal-content">
<span onclick="closePopup('editContact-popup')" class="modal-button">×</span>
<h2>Edit Contact</h2>
<!-- Took out the row to make the pop up taller-->
<div class="modal-container">
<label for="firstName">First Name</label>
<input class="thinnerInput" type="text" id="editFirstName"><br>
<label for="lastName">Last Name</label>
<input class="thinnerInput" type="text" id="editLastName"><br>
<label for="phone">Phone Number</label>
<input class="thinnerInput" type="text" id="editPhone"><br>
<label for="phone">Email</label>
<input class="thinnerInput" type="text" id="editEmail"><br>
<label for="address">Enter Address</label>
<input class="thinnerInput" type="text" id="editAddress"><br>
</div>
<div class="row">
<button type="button" id="editContactButton">Update</button>
</div>
<div class="row">
<button type="button" id="cancelEditContactButton" onclick="closePopup('editContact-popup')">Close</button>
</div>
<div class="row">
<!--May also have to move this to be under the open button -->
<p id="editContactResult"></p>
</div>
</div>
</div>
</body>
</html>