From ae66e3bc3266c8bb83259cf04e99f6cb82a8b2ec Mon Sep 17 00:00:00 2001
From: Aqeeb Imtiaz Harun <aqeebimtiaz@gmail.com>
Date: Fri, 29 Jun 2018 10:23:34 +0800
Subject: [PATCH] added Contacts page frontend and search contacts page is
 complete

---
 public/contacts.html       | 198 +++++++++++++++++++++++++++++++++++++
 public/home.html           |   4 +-
 public/search-contact.html |   4 +-
 3 files changed, 202 insertions(+), 4 deletions(-)
 create mode 100644 public/contacts.html
diff --git a/public/contacts.html b/public/contacts.html
new file mode 100644
index 0000000..1c70d56
--- /dev/null
+++ b/public/contacts.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>AzureUI - CONTACT</title>
+    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,900" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
+    <link rel="stylesheet" type="text/css" href="css/global.style.css">
+    <style>
+    </style>
+</head>
+<body>
+
+
+    <!-- Wrapper Content Start Here -->
+    <div class="wrapper">
+
+        <!-- Wrapper Inline Start Here -->
+        <div class="wrapper-inline">
+            <div class="search-result-header fix-searchbar">
+                    <a id="btnback" type="button" class="search-result-btn" href="javascript:history.back();"><i class="fa fa-arrow-left"></i></a>
+                </form>
+            </div>
+
+            <!-- Page Content Start Here -->
+            <main class="fix-top-menu">
+                <section class="container">
+
+                    <!-- Navigation Body Start Here -->
+                    <div class="cont-menu">
+
+                        <!-- Navigation Menu Start Here -->
+                        <cont class="menu">
+                            <div class="form-divider"></div>
+                            <a>&nbsp; Add New Friend</a>
+                            <div class="list-box-emp">
+                                <a href="#" class="list-item">
+                                    <i class="fa fa-user"></i>
+                                    <em class="seperate-contact"></em>
+                                    <span class="list-item-title-contact">Chua</span>
+                                    <br />
+                                    <span class="list-item-title-contact" style="margin-top:-13px; color: #029900">Izyim Exist</span>
+                                    <span class="list-item-title-role" style="margin-top:-13px; float: right">Add</span>
+                                </a>
+                            </div>
+                            <div class="list-box-emp">
+                                <a href="#" class="list-item">
+                                    <i class="fa fa-user" style="color: #000"></i>
+                                    <em class="seperate-contact"></em>
+                                    <span class="list-item-title-contact">John</span>
+                                    <br />
+                                    <span class="list-item-title-contact" style="margin-top:-13px;">012-3124455</span>
+                                    <span class="list-item-title-role" style="margin-top:-13px; float: right">Invite</span>
+                                </a>
+                            </div>
+                            <!-- Menu navigation start -->
+                            <div class="cont-container">
+                                <ul id="search_results" class="main-menu" style="background-color: #FFF">
+
+                                </ul>
+                                <div class="form-divider"></div>
+                            </div>
+                            <!-- Menu navigation end -->
+
+                        </cont>
+                        <!-- Navigation Menu End Here-->
+
+                    </div>
+                    <!-- Navigation Body Start Here -->
+
+                </section>
+            </main>
+            <!-- Page Content End Here -->
+
+        </div>
+        <!-- Wrapper Inline End Here -->
+
+    </div>
+    <!-- Wrapper Content End Here -->
+
+    <div class="popup-overlay" id="formPopup5" style="display: none">
+        <!-- if you dont want overlay add class .no-overlay -->
+        <div class="popup-container">
+            <div class="popup-header">
+                <h3 class="popup-title" >Add a Contact</h3>
+                <span class="popup-close" data-dismiss="true"><i class="fa fa-times"></i></span>
+            </div>
+            <div class="popup-content">
+
+                <div class="form-row-group with-icons-no-padding">
+                    <div class="form-row no-padding">
+                        <div class="form-element-title">
+                            <label id="companyname" style="color: #000">Company Name</label>
+                        </div>
+                    </div>
+                    <div class="form-divider"></div>
+
+                    <div class="form-row no-padding">
+                        <div class="form-element-title">
+                            <label id="telno" style="color: #000">Telephone number</label>
+                        </div>
+                    </div>
+                    <div class="form-divider"></div>
+
+                    <div class="form-row no-padding">
+                        <div class="form-element-title">
+                            <label id="contactpers" style="color: #000">Contact Person</label>
+                        </div>
+                    </div>
+                    <div class="form-divider"></div>
+                </div>
+
+            </div>
+            <div class="popup-footer">
+                <button class="button blue" id="addContact" data-dismiss="true">Add Contact</button>
+            </div>
+        </div>
+    </div>
+    <!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="js/global.script.js"></script>
+    <!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
+
+    <script type="text/javascript">
+    //var company_name, tel_no, contact_person;
+    $('#search').on('keyup', function(){
+        $('#search_results').empty();
+        var ul, li, data;
+        $.ajax({
+            type: "GET",
+            url: "api/company/search",
+            headers: {"Authorization": 'Bearer' + localStorage.getItem('token')},
+            data: {search: $('#search').val()},
+
+            success:function(data){
+                console.log(data);
+                for(i=0; i<data.length; i++){
+                    $('#search_results').append('<li style="display: show;"> <a href="#" onclick="displayCompany(' + "'" + data[i].company_name + "'" + ',' + "'" + data[i].tel_no + "'" +  ',' + "'" + data[i].contact_person + "'" + ',' + "'" + data[i].com_id + "'" + ')"> <i class="fa fa-user"></i>' + data[i].company_name + '<span class="list-item-title-role" style="margin-top:-10px">' + data[i].tel_no + '</span> <br> <span class="list-item-title-role" style="margin-top:-10px">'+ data[i].contact_person);
+                }
+                //$('#searchresults').show();
+            },
+            error:function(data){
+                console.log(data);
+            }
+        });
+
+    })
+    //displayCompany.apply(this, data);
+    function displayCompany(company_name, tel_no, contact_person, com_id){
+        $('#companyname').text(company_name);
+        $('#telno').text(tel_no);
+        $('#contactpers').text(contact_person);
+
+        $('#formPopup5').show();
+        $('#addContact').click(function() {
+                $.ajax({
+                    type: "POST",
+                    url: "api/contacts",
+                    headers: {"Authorization": 'Bearer' + localStorage.getItem('token')},
+                data: {
+                    com_id: com_id,
+                    },
+                success: function(data) {
+                    console.log(data);
+                }
+                })
+        })
+        }
+
+        // function CSearch() {
+        //     // Declare variables
+        //     var input, filter, ul, li, a, i;
+        //     input = document.getElementById('searchInput');
+        //     filter = input.value.toUpperCase();
+        //     ul = document.getElementById("searchresults");
+        //     li = ul.getElementsByTagName('li');
+        //     if (input.value.length == 0) {
+        //         ul.style.display = "none";
+        //     } else {
+        //         ul.style.display = "block";
+        //     }
+        //     // Loop through all list items, and hide those who don't match the search query
+        //     for (i = 0; i < li.length; i++) {
+        //         a = li[i].getElementsByTagName("a")[0];
+        //         if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
+        //             li[i].style.display = "block";
+        //         } else {
+        //             li[i].style.display = "none";
+        //         }
+        //     }
+        // }
+        // document.getElementById("btnback").onclick = function () {
+        //     javascript: history.back();
+        // };
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/home.html b/public/home.html
index 99888ce..cda90ce 100644
--- a/public/home.html
+++ b/public/home.html
@@ -1241,7 +1241,7 @@
                 <div class="popup-footer">
                     <div class="txt-center">
                         <button class="button red" data-dismiss="true">Delete Contact</button>
-                    </div> 
+                    </div>
                 </div>
             </div>
         </div>
@@ -1268,7 +1268,7 @@
                     <a href="#" class="button block blue">Print Marking</a>
                     <div class="form-divider-2"></div>
                     <a href="#" class="button block blue">Delete</a>
-                </div>  
+                </div>
             </div>
         </div>
     </div>
diff --git a/public/search-contact.html b/public/search-contact.html
index 26a1f6b..88d0473 100644
--- a/public/search-contact.html
+++ b/public/search-contact.html
@@ -23,9 +23,9 @@
                 <!-- or without .fix-searchbar -->
                 <form class="fix-searchbar">
                     <input type="text" id="search" name="search" class="form-element" placeholder="search by company/phone no/name">
-<!--
+                <!--
                     <input type="text" id="searchInput" class="form-element" placeholder="search by company/phone no/name" onkeyup="CSearch()">-->
-                    <button id="btnback" type="button" class="search-result-btn"><i class="fa fa-arrow-left"></i></button>
+                    <a id="btnback" type="button" class="search-result-btn" href="javascript:history.back();"><i class="fa fa-arrow-left"></i></a>
                 </form>
             </div>
 
