Files
izyim-api/public/contacts.html
T
2018-07-02 10:50:20 +08:00

233 lines
10 KiB
HTML

<!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">
<header style="background-color: #FFF">
<a class="go-back-link" href="javascript:history.back();"><i class="fa fa-arrow-left"></i></a>
<h1 id="HT" class="page-title" style="color: #000">Contacts</h1>
<div class="navi-menu-button" onclick="sideMenu()">
<em></em>
<em></em>
<em></em>
</div>
</header>
<!-- Page Content Start Here -->
<main class="fix-top-menu">
<section class="container">
<div class="list-box">
<div id="all-contacts">
<div class="form-divider-2"></div>
<a href="search-contact.html" class="list-item">
<i class="fa fa-user-plus"></i>
<em class="seperate"></em>
<span class="list-item-title">Add Contact</span>
</a>
<a>Favourite/Company</a>
<div class="form-divider-2"></div>
<a href="#" class="list-item">
<i class="fa fa-users"></i>
<em class="seperate"></em>
<span class="list-item-title">CIEF</span>
<span class="list-item-title-role">Importer</span>
</a>
<a href="#" class="list-item">
<i class="fa fa-users"></i>
<em class="seperate"></em>
<span class="list-item-title">FedEx</span>
<span class="list-item-title-role">Forwarder</span>
</a>
<a>Request send</a>
<div class="form-divider-2"></div>
<a href="#" class="list-item">
<i class="fa fa-user"></i>
<em class="seperate-contact"></em>
<span class="list-item-title-contact">Casey</span>
<br />
<span class="list-item-title-contact" style="margin-top:-13px; color:#069">Resquest sent</span>
<span class="list-item-title-role" style="margin-top:-13px">Importer</span>
</a>
<a>Waiting for approval</a>
<div class="form-divider-2"></div>
<a href="#" class="list-item" data-popup="formPopup6">
<i class="fa fa-user" style="color: red"></i>
<em class="seperate-contact"></em>
<span class="list-item-title-contact">Alexander</span>
<br />
<span class="list-item-title-contact" style="margin-top:-13px; color: #069">Waiting for appproval</span>
<span class="list-item-title-role" style="margin-top:-13px">Forwarder</span>
</a>
</div>
<div class="form-divider"></div>
<div class="form-divider"></div>
<!-- Content List Spawner End Here-->
</div>
<div class="form-fixed"></div>
</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">Contact Details</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">
//$(document).ready(function() {
function displayContacts(){
$.ajax({
type: "GET",
url: "api/contacts/display",
headers: {"Authorization": 'Bearer' + localStorage.getItem('token')},
success:function(data){
data.foreach($contacts=>{
console.log(data.com_id);
console.log(data.status);
});
// {{$contact->name}}
// foreach($contact->companies as $company
// {{ $company->name }};
console.log(data);
},
error:function(data){
console.log(data);
}
});
}
//})
window.onload = displayContacts;
function sideMenu()
{
console.log('success');
}
//var company_name, tel_no, contact_person;
$('#search').on('keyup', function(){
$('#search_results').empty();
var ul, li, data;
$.ajax({
type: "GET",
url: "api/contacts",
headers: {"Authorization": 'Bearer' + localStorage.getItem('token')},
success:function(data){
console.log(data);
// for(i=0; i<data.length; i++){
// $('#all-contacts').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>