1 files changed, 78 insertions, 0 deletions
diff --git a/csci4131/hw7/public/contacts.html b/csci4131/hw7/public/contacts.html
new file mode 100644
index 0000000..5cd2907
--- /dev/null
+++ b/csci4131/hw7/public/contacts.html
@@ -0,0 +1,78 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+        <script type="text/javascript" defer>
+        //Get JSON
+          var xmlhttp = new XMLHttpRequest();
+          var url = "api/contacts";
+          xmlhttp.onreadystatechange = function () {
+            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
+              var parse = JSON.parse(xmlhttp.responseText);
+              process(parse);
+            }
+          }
+          xmlhttp.open("GET", url, true);
+          xmlhttp.send();
+
+          function process(a) {
+            var table = document.getElementsByTagName("tbody")[0];
+            var contacts = a;
+            for (let i = 0; i < contacts.length; i++) {
+              var contact = contacts[i];
+              var row = table.insertRow();
+              for (var j in contact) {
+                if (j === "contact_id") continue;
+                if (j === "website_url") {
+                  var url = row.insertCell();
+                  url.innerHTML = "<a href =" + contact[j] + ">" + contact[j] + "</a>";
+                } else if (j === "email") {
+                  var email = row.insertCell();
+                  email.innerHTML = "<a href =mailto://" + contact[j] + ">" + contact[j] + "</a>";
+                } else {
+                  var value = row.insertCell();
+                  value.innerHTML = contact[j];
+                }
+              }
+            }
+          }
+
+        </script>
+  </head>
+  <body>
+    <nav class="navbar navbar-default">
+      <div class="container-fluid">
+        <ul class="nav navbar-nav">
+          <li><a href="/"><b>Home</b></a></li>
+          <li><a href="contacts"><b>Contacts</b></a></li>
+          <li><a href="addContact"><b>Add Contact</b></a></li>
+          <li><a href="stock"><b>Stock Page</b></a></li>
+          <li><a href="logout"><b>Logout</b></a></li>
+        </ul>
+      </div>
+    </nav>
+    <br><br>
+
+    <div class="container">
+      <table class="table" id="contactsTable">
+        <thead>
+          <tr>
+            <th scope="col">Name</th>
+            <th scope="col">Category</th>
+            <th scope="col">Location</th>
+            <th scope="col">Contact Information</th>
+            <th scope="col">Email</th>
+            <th scope="col">Website <br> (URL) </th>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
+    <script type="text/javascript">
+    
+    </script>
+  </body>
+</html>