PersonalContactManager/contact.html at main · COP4331C-Project-Group/PersonalContactManager · GitHub

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
<!--
  Contact page, shows details for an individual contact
  If edit button clicked, pops up a modal that allows editing contact details
  If delete button clicked, pop up a confirmation dialog
-->
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="js/common.js" defer></script>
  <script type="text/javascript" src="js/contact.js" defer></script>
  <script type="text/javascript" src="js/image.js" defer></script>
  <link rel="stylesheet" href="css/contact.css">
  <title>PCM - *insert contact name here*</title>
  <link rel="icon" type="image/x-icon" href="images/favicon.ico">

  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function()
    {
      readCookie();
    }, false);
  </script>
</head>
<body id="newBody" onload="displayContact()">
  <span id="title">Name of Contact</span>
  <div id="contactDiv">
    <img id="displayPicture" alt="Default">
    <label class="phoneNumberLabel">Phone Number</label>
    <label id="displayContactPhoneNumber" class="phoneNumberDisplay"></label>
    <label class="emailLabel">Email</label>
    <label id="displayContactEmail" class="emailDisplay"></label>
    <!-- Trigger/Open The Edit Contact Modal -->
    <button type="button" id="openEditContactBtn" class="editButton">Edit</button>
    <!-- Delete Contact button -->
    <button type="button" id="deleteContactButton" class="deleteButton" onclick="doDeleteContact();">Delete</button>
  </div>

  <!-- Edit Contact Modal -->
  <div id="editContactModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
      <div id="modal-title">Update Contact</div>
      <span class="close">&times;</span>
      <img id="profilePicture" class="imgmodal" style="cursor:pointer" />
      <input type="file" id="fileUpload" name="fileUpload" style="display:none" />
      <input type="text" id="firstName" class="updateContactFirstNameInput" placeholder="First Name"/><br />
      <input type="text" id="lastName" class="updateContactLastNameInput" placeholder="Last Name"/><br />
      <input type="text" id="phone" class="updatePhoneNumberInput" placeholder="Phone Number"/><br />
      <input type="text" id="email" class="updateEmailInput" placeholder="Email Address"/><br />
      <button type="button" id="confirmBtn" class="updateButton" onclick="doUpdateContact();">Update</button>
      <img id= "firstContactAlert" class="firstContactAlert" src="images/alerticon.png" alt="Default">
      <img id= "lastContactAlert" class="lastContactAlert" src="images/alerticon.png" alt="Default">
      <img id= "phoneContactAlert" class="phoneContactAlert" src="images/alerticon.png" alt="Default">
      <img id= "emailContactAlert" class="emailContactAlert" src="images/alerticon.png" alt="Default">
      <img id= "authContactAlert" class="authContactAlert" src="images/alerticon.png" alt="Default">
      <div id= firstContactAlertMessage>
        <span id="authContactFirstResult"></span>
      </div>
      <div id= lastContactAlertMessage>
        <span id="authContactLastResult"></span>
      </div>
      <div id= phoneContactAlertMessage>
        <span id="authContactPhoneResult"></span>
      </div>
      <div id= emailContactAlertMessage>
        <span id="authContactEmailResult"></span>
      </div>
      <div id= authContactAlertMessage>
        <span id="authContactResult"></span>
      </div>
      <span id="editError"></span>
    </div>
  </div>
</body>
</html>