mirror of https://github.com/itflow-org/itflow
Cleaned up unused files, did some code tidying
This commit is contained in:
root
parent
f9d6f4d316
commit
f5377409b0
88
calendar.php
88
calendar.php
|
|
@ -1,88 +0,0 @@
|
|||
<?php include("header.php"); ?>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="float-left mt-1"><i class="fa fa-calendar"></i> Janurary 2019</h6>
|
||||
<button type="button" class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#print"><i class="fas fa-print"></i> Print</button>
|
||||
<select class="form-control mt-5">
|
||||
<option>Janurary</option>
|
||||
<option>February</option>
|
||||
<option>March</option>
|
||||
<option>April</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th class="text-center">Sunday</th>
|
||||
<th class="text-center">Monday</th>
|
||||
<th class="text-center">Tuesday</th>
|
||||
<th class="text-center">Wednesday</th>
|
||||
<th class="text-center">Thursday</th>
|
||||
<th class="text-center">Friday</th>
|
||||
<th class="text-center">Saturday</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p>1</p>
|
||||
<span class="badge badge-primary">Security Assessment</span>
|
||||
<br>
|
||||
<span class="badge badge-danger">INV-001 Overdue</span>
|
||||
</td>
|
||||
<td>2</td>
|
||||
<td>3</td>
|
||||
<td>4</td>
|
||||
<td>5</td>
|
||||
<td>6</td>
|
||||
<td>7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>9</td>
|
||||
<td>10</td>
|
||||
<td>11</td>
|
||||
<td>12</td>
|
||||
<td>13</td>
|
||||
<td>14</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15</td>
|
||||
<td>16</td>
|
||||
<td>17</td>
|
||||
<td>18</td>
|
||||
<td>19</td>
|
||||
<td>20</td>
|
||||
<td>21</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22</td>
|
||||
<td>23</td>
|
||||
<td>24</td>
|
||||
<td>25</td>
|
||||
<td>26</td>
|
||||
<td>27</td>
|
||||
<td>28</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>29</td>
|
||||
<td>30</td>
|
||||
<td>31</td>
|
||||
<td colspan="4"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<strong>Calendars</strong>
|
||||
<ul class="list-unstyled">
|
||||
<li><span class="badge badge-primary">Jobs</span></li>
|
||||
<li><span class="badge badge-danger">Alerts</span></li>
|
||||
<li><span class="badge badge-warning">Expiration</span></li>
|
||||
<li><span class="badge badge-success">Payments</span></li>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include("footer.php");
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="card-body">
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-borderless table-hover" id="dT" width="100%" cellspacing="0">
|
||||
<table class="table table-striped table-borderless table-hover" id="dataTable" width="100%" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Number</th>
|
||||
|
|
|
|||
133
client_nav.php
133
client_nav.php
|
|
@ -1,133 +0,0 @@
|
|||
<ul class="nav nav-pills nav-fill">
|
||||
<?php if($num_contacts > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "contacts") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=contacts">
|
||||
<i class="fa fa-users"></i><br>
|
||||
Contacts<br>
|
||||
<span class="badge badge-pill badge-light"><?php echo $num_contacts; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_locations > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "locations") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=locations">
|
||||
<i class="fa fa-map-marker"></i><br>
|
||||
Locations<br>
|
||||
<span class="badge badge-pill badge-fark"><?php echo $num_locations; ?></span>
|
||||
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_assets > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "assets") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=assets">
|
||||
<i class="fa fa-tag"></i><br>
|
||||
Assets<br>
|
||||
<span class="badge badge-pill badge-dark"><?php echo $num_assets; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_vendors > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "vendors") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=vendors">
|
||||
<i class="fa fa-building"></i><br>
|
||||
Vendors<br>
|
||||
<span class="badge badge-pill badge-secondary"><?php echo $num_vendors; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_logins > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "logins") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=logins">
|
||||
<i class="fa fa-key"></i><br>
|
||||
Logins<br>
|
||||
<span class="badge badge-pill badge-dark"><?php echo $num_logins; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_networks > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "networks") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=networks">
|
||||
<i class="fa fa-network-wired"></i><br>
|
||||
Networks<br>
|
||||
<span class="badge badge-pill badge-dark"><?php echo $num_networks; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_domains > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "domains") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=domains">
|
||||
<i class="fa fa-globe"></i><br>
|
||||
Domains<br>
|
||||
<span class="badge badge-pill badge-dark"><?php echo $num_domains; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_applications > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "applications") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=applications">
|
||||
<i class="fa fa-box"></i><br>
|
||||
Applications<br>
|
||||
<span class="badge badge-pill badge-dark"><?php echo $num_applications; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_invoices > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "invoices") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=invoices">
|
||||
<i class="fa fa-file"></i><br>
|
||||
Invoices<br>
|
||||
<span class="badge badge-pill badge-dark"><?php echo $num_invoices; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_recurring > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "recurring") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=recurring">
|
||||
<i class="fa fa-copy"></i><br>
|
||||
Recurring<br>
|
||||
<span class="badge badge-pill badge-dark"><?php echo $num_recurring; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_quotes > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "quotes") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=quotes">
|
||||
<i class="fa fa-file-o"></i><br>
|
||||
Quotes<br>
|
||||
<span class="badge badge-pill badge-dark"><?php echo $num_quotes; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_files > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "files") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=files">
|
||||
<i class="fa fa-paperclip"></i><br>
|
||||
Files<br>
|
||||
<span class="badge badge-pill badge-dark"><?php echo $num_files; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
<?php if($num_notes > 0){ ?>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link <?php if($_GET['tab'] == "notes") { echo "active"; } ?>"
|
||||
href="?client_id=<?php echo $client_id; ?>&tab=notes">
|
||||
<i class="fa fa-edit"></i><br>
|
||||
Notes<br>
|
||||
<span class="badge badge-pill badge-dark"><?php echo $num_notes; ?></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-borderless table-hover" id="dT" width="100%" cellspacing="0">
|
||||
<table class="table table-striped table-borderless table-hover" id="dataTable" width="100%" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Number</th>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="card-body">
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-borderless table-hover" id="dT" width="100%" cellspacing="0">
|
||||
<table class="table table-striped table-borderless table-hover" id="dataTable" width="100%" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Frequency</th>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?php include("header.php"); ?>
|
||||
|
||||
<?php $sql = mysqli_query($mysqli,"SELECT * FROM clients ORDER BY client_id DESC"); ?>
|
||||
<?php $sql = mysqli_query($mysqli,"SELECT * FROM clients ORDER BY client_name ASC"); ?>
|
||||
|
||||
|
||||
<div class="card mb-3">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-borderless table-hover" id="dT" width="100%" cellspacing="0">
|
||||
<table class="table table-striped table-borderless table-hover" id="dataTable" width="100%" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
<script src="vendor/datatables/jquery.dataTables.js"></script>
|
||||
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>
|
||||
<script src="vendor/easy-markdown-editor-2.5.1/dist/easymde.min.js"></script>
|
||||
<script src="vendor/Bootstrap-3-Typeahead/bootstrap3-typeahead.min.js"></script>
|
||||
|
||||
<!-- Custom scripts for all pages-->
|
||||
<script src="js/sb-admin.min.js"></script>
|
||||
|
|
|
|||
112
graph.php
112
graph.php
|
|
@ -1,112 +0,0 @@
|
|||
<?php //include("header.php"); ?>
|
||||
|
||||
<?php
|
||||
|
||||
include("config.php");
|
||||
//include("check_login.php");
|
||||
//include("vendor/Parsedown.php");
|
||||
//include("functions.php");
|
||||
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title><?php echo $config_company_name; ?></title>
|
||||
|
||||
|
||||
<!-- Page level plugin CSS-->
|
||||
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Custom fonts for this template-->
|
||||
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Custom styles for this template-->
|
||||
<link href="css/sb-admin.css" rel="stylesheet" type="text/css">
|
||||
|
||||
</head>
|
||||
|
||||
<body id="page-top">
|
||||
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<div id="content-wrapper">
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<canvas id="myAreaChart" width="100%" height="30"></canvas>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
Bar Chart Example</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myBarChart" width="100%" height="50"></canvas>
|
||||
</div>
|
||||
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-chart-pie"></i>
|
||||
Pie Chart Example</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myPieChart" width="100%" height="100"></canvas>
|
||||
</div>
|
||||
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
|
||||
</div>
|
||||
<!-- /#wrapper -->
|
||||
|
||||
<!-- Scroll to Top Button-->
|
||||
<a class="scroll-to-top rounded" href="#page-top">
|
||||
<i class="fas fa-angle-up"></i>
|
||||
</a>
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="vendor/jquery/jquery.min.js"></script>
|
||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Core plugin JavaScript-->
|
||||
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||
|
||||
<!-- Page level plugin JavaScript-->
|
||||
<script src="vendor/chart.js/Chart.min.js"></script>
|
||||
|
||||
<!-- Custom scripts for all pages-->
|
||||
<script src="js/sb-admin.min.js"></script>
|
||||
|
||||
<script src="js/demo/chart-area-demo.js"></script>
|
||||
<script src="js/demo/chart-bar-demo.js"></script>
|
||||
<script src="js/demo/chart-pie-demo.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<?php //include("footer.php"); ?>
|
||||
241
graph2.php
241
graph2.php
|
|
@ -1,241 +0,0 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>SB Admin - Charts</title>
|
||||
|
||||
<!-- Custom fonts for this template-->
|
||||
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- Page level plugin CSS-->
|
||||
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template-->
|
||||
<link href="css/sb-admin.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body id="page-top">
|
||||
|
||||
<nav class="navbar navbar-expand navbar-dark bg-dark static-top">
|
||||
|
||||
<a class="navbar-brand mr-1" href="index.html">Start Bootstrap</a>
|
||||
|
||||
<button class="btn btn-link btn-sm text-white order-1 order-sm-0" id="sidebarToggle" href="#">
|
||||
<i class="fas fa-bars"></i>
|
||||
</button>
|
||||
|
||||
<!-- Navbar Search -->
|
||||
<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Navbar -->
|
||||
<ul class="navbar-nav ml-auto ml-md-0">
|
||||
<li class="nav-item dropdown no-arrow mx-1">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fas fa-bell fa-fw"></i>
|
||||
<span class="badge badge-danger">9+</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown no-arrow mx-1">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fas fa-envelope fa-fw"></i>
|
||||
<span class="badge badge-danger">7</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="messagesDropdown">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown no-arrow">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fas fa-user-circle fa-fw"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
|
||||
<a class="dropdown-item" href="#">Settings</a>
|
||||
<a class="dropdown-item" href="#">Activity Log</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
<div id="wrapper">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<ul class="sidebar navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="index.html">
|
||||
<i class="fas fa-fw fa-tachometer-alt"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fas fa-fw fa-folder"></i>
|
||||
<span>Pages</span>
|
||||
</a>
|
||||
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
|
||||
<h6 class="dropdown-header">Login Screens:</h6>
|
||||
<a class="dropdown-item" href="login.html">Login</a>
|
||||
<a class="dropdown-item" href="register.html">Register</a>
|
||||
<a class="dropdown-item" href="forgot-password.html">Forgot Password</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<h6 class="dropdown-header">Other Pages:</h6>
|
||||
<a class="dropdown-item" href="404.html">404 Page</a>
|
||||
<a class="dropdown-item" href="blank.html">Blank Page</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="charts.html">
|
||||
<i class="fas fa-fw fa-chart-area"></i>
|
||||
<span>Charts</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="tables.html">
|
||||
<i class="fas fa-fw fa-table"></i>
|
||||
<span>Tables</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="content-wrapper">
|
||||
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- Breadcrumbs-->
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item">
|
||||
<a href="#">Dashboard</a>
|
||||
</li>
|
||||
<li class="breadcrumb-item active">Charts</li>
|
||||
</ol>
|
||||
|
||||
<!-- Area Chart Example-->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-chart-area"></i>
|
||||
Area Chart Example</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myAreaChart" width="100%" height="30"></canvas>
|
||||
</div>
|
||||
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-chart-bar"></i>
|
||||
Bar Chart Example</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myBarChart" width="100%" height="50"></canvas>
|
||||
</div>
|
||||
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<i class="fas fa-chart-pie"></i>
|
||||
Pie Chart Example</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myPieChart" width="100%" height="100"></canvas>
|
||||
</div>
|
||||
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="small text-center text-muted my-5">
|
||||
<em>More chart examples coming soon...</em>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
|
||||
<!-- Sticky Footer -->
|
||||
<footer class="sticky-footer">
|
||||
<div class="container my-auto">
|
||||
<div class="copyright text-center my-auto">
|
||||
<span>Copyright © Your Website 2019</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
|
||||
</div>
|
||||
<!-- /#wrapper -->
|
||||
|
||||
<!-- Scroll to Top Button-->
|
||||
<a class="scroll-to-top rounded" href="#page-top">
|
||||
<i class="fas fa-angle-up"></i>
|
||||
</a>
|
||||
|
||||
<!-- Logout Modal-->
|
||||
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
|
||||
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
|
||||
<a class="btn btn-primary" href="login.html">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap core JavaScript-->
|
||||
<script src="vendor/jquery/jquery.min.js"></script>
|
||||
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Core plugin JavaScript-->
|
||||
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
||||
|
||||
<!-- Page level plugin JavaScript-->
|
||||
<script src="vendor/chart.js/Chart.min.js"></script>
|
||||
|
||||
<!-- Custom scripts for all pages-->
|
||||
<script src="js/sb-admin.min.js"></script>
|
||||
|
||||
<!-- Demo scripts for this page-->
|
||||
<script src="js/demo/chart-area-demo.js"></script>
|
||||
<script src="js/demo/chart-bar-demo.js"></script>
|
||||
<script src="js/demo/chart-pie-demo.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
26
invoice.php
26
invoice.php
|
|
@ -207,10 +207,10 @@ if(isset($_GET['invoice_id'])){
|
|||
?>
|
||||
|
||||
<tr class="d-print-none">
|
||||
<form action="post.php" method="post">
|
||||
<form action="post.php" method="post" autocomplete="off">
|
||||
<td class="text-center"><button type="submit" class="btn btn-primary btn-sm" name="add_invoice_item"><i class="fa fa-check"></i></button></td>
|
||||
<input type="hidden" name="invoice_id" value="<?php echo $invoice_id; ?>">
|
||||
<td><input type="text" class="form-control" name="name"></td>
|
||||
<td><input type="text" class="form-control typeahead" name="name" id="item"></td>
|
||||
<td><textarea class="form-control" rows="1" name="description"></textarea></td>
|
||||
<td><input type="text" class="form-control" style="text-align: right;" name="price"></td>
|
||||
<td><input type="text" class="form-control" style="text-align: center;" name="qty"></td>
|
||||
|
|
@ -363,4 +363,24 @@ if(isset($_GET['invoice_id'])){
|
|||
<?php include("edit_invoice_modal.php"); ?>
|
||||
<?php } ?>
|
||||
|
||||
<?php include("footer.php");
|
||||
<?php include("footer.php"); ?>
|
||||
|
||||
<script>
|
||||
|
||||
var products = [
|
||||
<?php
|
||||
$sql = mysqli_query($mysqli,"SELECT product_name FROM products");
|
||||
while($row = mysqli_fetch_array($sql)){
|
||||
$product_name = $row['product_name'];
|
||||
echo "\"$product_name\",";
|
||||
}
|
||||
?>
|
||||
|
||||
];
|
||||
|
||||
$('#item').typeahead({
|
||||
source: products
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-borderless table-hover" id="dt" width="100%" cellspacing="0">
|
||||
<table class="table table-striped table-borderless table-hover" id="dataTable" width="100%" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Number</th>
|
||||
|
|
|
|||
43
js/app.js
43
js/app.js
|
|
@ -3,43 +3,20 @@ if ( window.history.replaceState ) {
|
|||
window.history.replaceState( null, null, window.location.href );
|
||||
}
|
||||
|
||||
//Data Tables Options
|
||||
$('#dt').dataTable( {
|
||||
"aaSorting": [],
|
||||
"order": [],
|
||||
language: {
|
||||
search: '_INPUT_',
|
||||
searchPlaceholder: "Enter search...",
|
||||
sLengthMenu: "_MENU_",
|
||||
sInfo: "<strong>records:</strong> _START_-_END_ of _TOTAL_",
|
||||
paginate: {
|
||||
previous: '<i class="fa fa-angle-left"></i>',
|
||||
next: '<i class="fa fa-angle-right"></i>'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Call the dataTables jQuery plugin
|
||||
|
||||
$('#dataTable').DataTable();
|
||||
|
||||
$('#dT').dataTable( {
|
||||
"order": [],
|
||||
"columnDefs": [
|
||||
{ "orderable": false, "targets":[""]}
|
||||
],
|
||||
"orderCellsTop": true,
|
||||
$('#dataTable').dataTable( {
|
||||
order: [],
|
||||
language: {
|
||||
search: "<i class='fa fa-search'></i>_INPUT_",
|
||||
searchPlaceholder: "Search",
|
||||
sLengthMenu: "_MENU_",
|
||||
sInfo: "_START_-_END_ of _TOTAL_",
|
||||
paginate: {
|
||||
previous: '<i class="fa fa-angle-left"></i>',
|
||||
next: '<i class="fa fa-angle-right"></i>'
|
||||
}
|
||||
search: "_INPUT_",
|
||||
searchPlaceholder: "Search",
|
||||
sLengthMenu: "_MENU_",
|
||||
sInfo: "_START_-_END_ of _TOTAL_",
|
||||
paginate: {
|
||||
previous: '<i class="fa fa-angle-left"></i>',
|
||||
next: '<i class="fa fa-angle-right"></i>'
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
new EasyMDE({
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ if(isset($_POST['login'])){
|
|||
|
||||
<div class="container">
|
||||
<div class="card card-login mx-auto mt-5">
|
||||
<div class="card-header"><?php echo $config_company_name; ?> Login</div>
|
||||
<div class="card-header"><h3><?php echo $config_company_name; ?> Login</h3></div>
|
||||
<div class="card-body">
|
||||
<?php if(isset($response)) { echo $response; } ?>
|
||||
<form method="post">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-borderless table-hover" id="dT" width="100%" cellspacing="0">
|
||||
<table class="table table-striped table-borderless table-hover" id="dataTable" width="100%" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
|
|
|
|||
10
play.php
10
play.php
|
|
@ -1,10 +0,0 @@
|
|||
<?php include("header.php"); ?>
|
||||
|
||||
<form>
|
||||
<textarea id="clientNote"></textarea>
|
||||
<script>
|
||||
var easyMDE = new EasyMDE();
|
||||
</script>
|
||||
</form>
|
||||
|
||||
<?php include("footer.php");
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-borderless table-hover" id="dT" width="100%" cellspacing="0">
|
||||
<table class="table table-striped table-borderless table-hover" id="dataTable" width="100%" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Number</th>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-borderless table-hover" id="dT" width="100%" cellspacing="0">
|
||||
<table class="table table-striped table-borderless table-hover" id="dataTable" width="100%" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Frequency</th>
|
||||
|
|
|
|||
|
|
@ -1,92 +0,0 @@
|
|||
<?php include("header.php"); ?>
|
||||
|
||||
<?php $sql = mysqli_query($mysqli,"SELECT * FROM categories WHERE category type = 'Expense' ORDER BY vendor_id DESC"); ?>
|
||||
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h6 class="float-left mt-1"><i class="fa fa-coins"></i> Expense Summary</h6>
|
||||
<button type="button" class="btn btn-primary btn-sm float-right" data-toggle="modal" data-target="#print"><i class="fas fa-print"></i> Print</button>
|
||||
<select class="form-control mt-5">
|
||||
<option>2019</option>
|
||||
<option>2018</option>
|
||||
<option>2017</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Category</th>
|
||||
<th class="text-right">January</th>
|
||||
<th class="text-right">February</th>
|
||||
<th class="text-right">March</th>
|
||||
<th class="text-right">April</th>
|
||||
<th class="text-right">May</th>
|
||||
<th class="text-right">June</th>
|
||||
<th class="text-right">July</th>
|
||||
<th class="text-right">August</th>
|
||||
<th class="text-right">September</th>
|
||||
<th class="text-right">October</th>
|
||||
<th class="text-right">November</th>
|
||||
<th class="text-right">December</th>
|
||||
<th class="text-right">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Category Type</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Category Type 2</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
<td class="text-right">$0.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
<th class="text-right">$0.00</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include("footer.php");
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
<!-- Sidebar -->
|
||||
<ul class="sidebar navbar-nav d-print-none">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="dashboard.php">
|
||||
<i class="fas fa-fw fa-arrow-left mx-2"></i>
|
||||
<span>Back</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="clients.php">
|
||||
<i class="fas fa-fw fa-cog mx-2"></i>
|
||||
<span>General</span>
|
||||
</a>
|
||||
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="calendar_events.php">
|
||||
<i class="fas fa-fw fa-building mx-2"></i>
|
||||
<span>Company</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="products.php">
|
||||
<i class="fas fa-fw fa-file mx-2"></i>
|
||||
<span>Invoice</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="vendors.php">
|
||||
<i class="fas fa-fw fa-image mx-2"></i>
|
||||
<span>Logo</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="invoices.php">
|
||||
<i class="fas fa-fw fa-database mx-2"></i>
|
||||
<span>Backup</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-borderless table-hover" id="dT" width="100%" cellspacing="0">
|
||||
<table class="table table-striped table-borderless table-hover" id="dataTable" width="100%" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
# Ignore docs files
|
||||
_gh_pages
|
||||
_site
|
||||
.ruby-version
|
||||
|
||||
# Numerous always-ignore extensions
|
||||
*.diff
|
||||
*.err
|
||||
*.log
|
||||
*.orig
|
||||
*.rej
|
||||
*.swo
|
||||
*.swp
|
||||
*.vi
|
||||
*.zip
|
||||
*~
|
||||
|
||||
# OS or Editor folders
|
||||
._*
|
||||
.cache
|
||||
.DS_Store
|
||||
.idea
|
||||
.project
|
||||
.settings
|
||||
.tmproj
|
||||
*.esproj
|
||||
*.sublime-project
|
||||
*.sublime-workspace
|
||||
nbproject
|
||||
Thumbs.db
|
||||
|
||||
# Komodo
|
||||
.komodotools
|
||||
*.komodoproject
|
||||
|
||||
# grunt-html-validation
|
||||
validation-report.json
|
||||
validation-status.json
|
||||
|
||||
# Folders to ignore
|
||||
bower_components
|
||||
node_modules
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"disallowEmptyBlocks": true,
|
||||
"disallowKeywords": ["with"],
|
||||
"disallowMixedSpacesAndTabs": true,
|
||||
"disallowMultipleLineStrings": true,
|
||||
"disallowMultipleVarDecl": true,
|
||||
"disallowQuotedKeysInObjects": "allButReserved",
|
||||
"disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
|
||||
"disallowSpaceBeforeBinaryOperators": [","],
|
||||
"disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
|
||||
"disallowSpacesInNamedFunctionExpression": { "beforeOpeningRoundBrace": true },
|
||||
"disallowSpacesInsideArrayBrackets": true,
|
||||
"disallowSpacesInsideParentheses": true,
|
||||
"disallowTrailingComma": true,
|
||||
"disallowTrailingWhitespace": true,
|
||||
"requireCamelCaseOrUpperCaseIdentifiers": true,
|
||||
"requireCapitalizedConstructors": true,
|
||||
"requireCommaBeforeLineBreak": true,
|
||||
"requireDotNotation": true,
|
||||
"requireLineFeedAtFileEnd": true,
|
||||
"requireSpaceAfterBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", "<", ">=", "<="],
|
||||
"requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
|
||||
"requireSpaceAfterLineComment": true,
|
||||
"requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", "<", ">=", "<="],
|
||||
"requireSpacesInAnonymousFunctionExpression": { "beforeOpeningCurlyBrace": true, "beforeOpeningRoundBrace": true },
|
||||
"requireSpacesInConditionalExpression": true,
|
||||
"requireSpacesInFunctionDeclaration": { "beforeOpeningCurlyBrace": true },
|
||||
"requireSpacesInFunctionExpression": { "beforeOpeningCurlyBrace": true },
|
||||
"requireSpacesInNamedFunctionExpression": { "beforeOpeningCurlyBrace": true },
|
||||
"requireSpacesInsideObjectBrackets": "allButNested",
|
||||
"validateIndentation": 2,
|
||||
"validateLineBreaks": "LF",
|
||||
"validateQuoteMarks": "'"
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"asi" : true,
|
||||
"browser" : true,
|
||||
"node" : true,
|
||||
"eqeqeq" : false,
|
||||
"eqnull" : true,
|
||||
"es3" : true,
|
||||
"expr" : true,
|
||||
"jquery" : true,
|
||||
"latedef" : true,
|
||||
"laxbreak" : true,
|
||||
"nonbsp" : true,
|
||||
"strict" : true,
|
||||
"undef" : true,
|
||||
"unused" : false,
|
||||
"predef" : ["define"]
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
module.exports = function (grunt) {
|
||||
'use strict';
|
||||
|
||||
// Force use of Unix newlines
|
||||
grunt.util.linefeed = '\n';
|
||||
|
||||
// Project configuration.
|
||||
grunt.initConfig({
|
||||
|
||||
// Metadata.
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
|
||||
|
||||
jshint: {
|
||||
options: {
|
||||
jshintrc: '.jshintrc'
|
||||
},
|
||||
src: ['bootstrap3-typeahead.js']
|
||||
},
|
||||
jscs: {
|
||||
src: "bootstrap3-typeahead.js",
|
||||
options: {
|
||||
config: ".jscsrc",
|
||||
}
|
||||
},
|
||||
uglify: {
|
||||
options: {
|
||||
preserveComments: 'some'
|
||||
},
|
||||
core: {
|
||||
files: {
|
||||
'bootstrap3-typeahead.min.js': ['bootstrap3-typeahead.js']
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// These plugins provide necessary tasks.
|
||||
require('load-grunt-tasks')(grunt, { scope: 'devDependencies' });
|
||||
//require('time-grunt')(grunt);
|
||||
grunt.registerTask('test', ['jshint', 'jscs']);
|
||||
|
||||
// Default task.
|
||||
grunt.registerTask('default', ['test','uglify']);
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
Bootstrap 3 Typeahead
|
||||
=====================
|
||||
|
||||
For simple autocomplete use cases there seems to be nothing wrong with the dropped typeahead plugin. Here you will find the typeahead autocomplete plugin for Twitter's Bootstrap 2 ready to use with Twitter's Bootstrap 3. The original code is written by [@mdo](http://twitter.com/mdo) and [@fat](http://twitter.com/fat).
|
||||
|
||||
Users who migrate their website or app from Twitter's Bootstrap 2 to Bootstrap 3 can also use this plugin to keep their current autocomplete functions. See for a complete list of migrations steps: [Migrate your templates from Twitter Bootstrap 2.x to Twitter Bootstrap 3](http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/)
|
||||
|
||||
With Twitter Bootstrap 3 the typeahead plugin had been dropped. [@mdo](http://twitter.com/mdo) says: "in favor of folks using [Twitter's typeahead](https://github.com/twitter/typeahead.js). Twitter's typeahead has more features than the old bootstrap-typeahead.js and less bugs." Twitter's typeahead don't work direct with Bootstrap 3. The DOM structure of the dropdown menu used by `typeahead.js` differs from the DOM structure of the Bootstrap dropdown menu. You'll need to load some additional CSS in order to get the `typeahead.js` dropdown menu to fit the default Bootstrap theme. Try [extended Bootstrap LESS](https://github.com/bassjobsen/typeahead.js-bootstrap-css) or if your are looking for a more extended version try: [typeahead.js-bootstrap3.less](https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.less).
|
||||
|
||||
~~`Typeahead.js` doesn't seem ready for the new Twitter Bootstrap 3 at the moment. Code is not up to date and fixes are needed. See also:
|
||||
[Typeahead problems with Bootstrap 3.0 RC1](http://stackoverflow.com/questions/18167246/typeahead-problems-with-bootstrap-3-0-rc1).~~
|
||||
|
||||
Bootstrap 4
|
||||
===========
|
||||
[Bootstrap 4](http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/) is coming soon. The Bootstrap 3 Typeahead will also work with Bootstrap 4.
|
||||
The look and feel of Bootstrap 4 will differ from Bootstrap 3 and so does the drop down menu. In Bootstrap 4 the typeahead dropdown menu will look like that shown in the figure below:
|
||||
.
|
||||
|
||||
Download
|
||||
========
|
||||
|
||||
- Download the latest [bootstrap3-typeahead.js](https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.js) or [bootstrap3-typeahead.min.js](https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.min.js).
|
||||
|
||||
- Include it in your source after jQuery and Bootstrap's JavaScript.
|
||||
|
||||
Full integration with Bootstrap 3 Typeahead
|
||||
-------------------------------------------
|
||||
Download the latest version of Boostrap from [Bootstrap](https://github.com/twbs/bootstrap/archive/master.zip). Copy `bootstrap3-typeahead.js` to the js/ folder. Edit `gruntfile.js` and add `bootstrap3-typeahead.js` to the plugins list.
|
||||
Build your own version with typeahead with `grunt dist`.
|
||||
|
||||
CSS
|
||||
===
|
||||
There is no additional CSS required to use the plugin. Bootstrap's CSS contains all required styles in the `.dropdown-menu` class. The original CSS adds a `z-index` of 1051 to the dropdownmenu via the typeahead class. You could add this if you need it.
|
||||
`.typeahead { z-index: 1051; }` (less or css).
|
||||
|
||||
Usage
|
||||
=====
|
||||
|
||||
<input type="text" data-provide="typeahead">
|
||||
|
||||
You'll want to set `autocomplete="off"` to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.
|
||||
|
||||
Via data attributes
|
||||
-------------------
|
||||
Add data attributes to register an element with typeahead functionality as shown in the example above.
|
||||
|
||||
Via JavaScript
|
||||
--------------
|
||||
|
||||
Call the typeahead manually with:
|
||||
|
||||
$('.typeahead').typeahead()
|
||||
|
||||
Destroys previously initialized typeaheads. This entails reverting DOM modifications and removing event handlers:
|
||||
|
||||
$('.typeahead').typeahead('destroy')
|
||||
|
||||
Javascript Example
|
||||
=============
|
||||
|
||||
Loading a collection
|
||||
--------------------
|
||||
|
||||
$.get('example_collection.json', function(data){
|
||||
$("#name").typeahead({ source:data });
|
||||
},'json');
|
||||
//example_collection.json
|
||||
// ["item1","item2","item3"]
|
||||
|
||||
Using JSON objects instead of simple strings
|
||||
--------------------------------------------
|
||||
|
||||
You can add all the properties you wish on your objects, as long as you provide a "name" attribute OR you provide your own displayText method. The other values allow you to match the selected item with something in your model.
|
||||
|
||||
var $input = $('.typeahead');
|
||||
$input.typeahead({source:[{id: "someId1", name: "Display name 1"},
|
||||
{id: "someId2", name: "Display name 2"}],
|
||||
autoSelect: true});
|
||||
$input.change(function() {
|
||||
var current = $input.typeahead("getActive");
|
||||
if (current) {
|
||||
// Some item from your model is active!
|
||||
if (current.name == $input.val()) {
|
||||
// This means the exact match is found. Use toLowerCase() if you want case insensitive match.
|
||||
} else {
|
||||
// This means it is only a partial match, you can either add a new item
|
||||
// or take the active if you don't want new items
|
||||
}
|
||||
} else {
|
||||
// Nothing is active so it is a new value (or maybe empty value)
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Options
|
||||
=======
|
||||
|
||||
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-source=""`.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 50px;">Type</th>
|
||||
<th style="width: 100px;">Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>source</td>
|
||||
<td>array, function</td>
|
||||
<td>[ ]</td>
|
||||
<td>The data source to query against. May be an array of strings, an array of JSON object with a name property or a function. The function accepts two arguments, the <code>query</code> value in the input field and the <code>process</code> callback. The function may be used synchronously by returning the data source directly or asynchronously via the <code>process</code> callback's single argument.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>items</td>
|
||||
<td>number</td>
|
||||
<td>8</td>
|
||||
<td>The max number of items to display in the dropdown. Can also be set to 'all'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>minLength</td>
|
||||
<td>number</td>
|
||||
<td>1</td>
|
||||
<td>The minimum character length needed before triggering autocomplete suggestions. You can set it to 0 so suggestion are shown even when there is no text when lookup function is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>showHintOnFocus</td>
|
||||
<td>boolean or "all"</td>
|
||||
<td>false</td>
|
||||
<td>If hints should be shown as soon as the input gets focus. If set to true, all match will be shown. If set to "all", it will display all hints, not filtering them by the current text. This can be used when you want an input that behaves a bit like a combo box plus auto completion as you type to filter the choices.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scrollHeight</td>
|
||||
<td>number, function</td>
|
||||
<td>0</td>
|
||||
<td>Number of pixels the scrollable parent container scrolled down (scrolled out the viewport).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>matcher</td>
|
||||
<td>function</td>
|
||||
<td>case insensitive</td>
|
||||
<td>The method used to determine if a query matches an item. Accepts a single argument, the <code>item</code> against which to test the query. Access the current query with <code>this.query</code>. Return a boolean <code>true</code> if query is a match.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sorter</td>
|
||||
<td>function</td>
|
||||
<td>exact match,<br> case sensitive,<br> case insensitive</td>
|
||||
<td>Method used to sort autocomplete results. Accepts a single argument <code>items</code> and has the scope of the typeahead instance. Reference the current query with <code>this.query</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>updater</td>
|
||||
<td>function</td>
|
||||
<td>returns selected item</td>
|
||||
<td>The method used to return selected item. Accepts a single argument, the <code>item</code> and has the scope of the typeahead instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>highlighter</td>
|
||||
<td>function</td>
|
||||
<td>highlights all default matches</td>
|
||||
<td>Method used to highlight autocomplete results. Accepts a single argument <code>item</code> and has the scope of the typeahead instance. Should return html.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>displayText</td>
|
||||
<td>function</td>
|
||||
<td>item.name || item</td>
|
||||
<td>Method used to get textual representation of an item of the sources. Accepts a single argument <code>item</code> and has the scope of the typeahead instance. Should return a String.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>autoSelect</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>Allows you to dictate whether or not the first suggestion is selected automatically. Turning autoselect off also means that the input won't clear if nothing is selected and <kbd>enter</kbd> or <kbd>tab</kbd> is hit.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>afterSelect</td>
|
||||
<td>function</td>
|
||||
<td>$.noop()</td>
|
||||
<td>Call back function to execute after selected an item. It gets the current active item in parameter if any.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>delay</td>
|
||||
<td>integer</td>
|
||||
<td>0</td>
|
||||
<td>Adds a delay between lookups.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>appendTo</td>
|
||||
<td>jQuery element</td>
|
||||
<td>null</td>
|
||||
<td>By defaut, the menu is added right after the input element. Use this option to add the menu to another div. It should not be used if you want to use bootstrap dropup or dropdown-menu-right classes.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fitToElement</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>Set to true if you want the menu to be the same size than the input it is attached to.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>addItem</td>
|
||||
<td>JSON object</td>
|
||||
<td>false</td>
|
||||
<td>Adds an item to the end of the list, for example "New Entry". This could be used, for example, to pop a dialog when an item is not found in the list of data. Example: <a href="http://cl.ly/image/2u170I1q1G3A/addItem.png">http://cl.ly/image/2u170I1q1G3A/addItem.png</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Methods
|
||||
=======
|
||||
|
||||
.typeahead(options): Initializes an input with a typeahead.
|
||||
.lookup: To trigger the lookup function externally
|
||||
.getActive: To get the currently active item, you will get a String or a JSON object depending on how you initialized typeahead. Works only for the first match.
|
||||
|
||||
|
||||
|
||||
Bower
|
||||
=====
|
||||
|
||||
To use with [Bower](http://bower.io/). Add to your bower.json file:
|
||||
|
||||
|
||||
{
|
||||
"name": "MyProject",
|
||||
"dependencies": {
|
||||
"bootstrap3-typeahead": "git://github.com/bassjobsen/Bootstrap-3-Typeahead.git#master"
|
||||
}
|
||||
}
|
||||
|
||||
AngularJS
|
||||
=========
|
||||
An AngularJS directive for the Bootstrap 3 Typeahead jQuery plugin can be found at https://github.com/davidkonrad/angular-bootstrap3-typeahead.
|
||||
|
||||
Bloodhound
|
||||
==========
|
||||
[Bloodhound](https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md) is the [typeahead.js](https://github.com/twitter/typeahead.js) suggestion engine, since version 0.10.0. Bloodhound is robust, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data. To use Bloodhound with Bootstrap-3-Typeahead:
|
||||
|
||||
// instantiate the bloodhound suggestion engine
|
||||
var numbers = new Bloodhound({
|
||||
datumTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
local: ["(A)labama","Alaska","Arizona","Arkansas","Arkansas2","Barkansas"]
|
||||
});
|
||||
|
||||
// initialize the bloodhound suggestion engine
|
||||
numbers.initialize();
|
||||
|
||||
$('.typeahead').typeahead(
|
||||
{
|
||||
items: 4,
|
||||
source:numbers.ttAdapter()
|
||||
});
|
||||
|
||||
|
||||
Bootstrap Tags Input
|
||||
====================
|
||||
[Bootstrap Tags Input](http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/) is a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Bootstrap Tags Input has a typeahead option which allows you to set the source:
|
||||
|
||||
$('input').tagsinput({
|
||||
typeahead: {
|
||||
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
|
||||
}
|
||||
});
|
||||
|
||||
or
|
||||
|
||||
$('input').tagsinput({
|
||||
typeahead: {
|
||||
source: function(query) {
|
||||
return $.get('http://someservice.com');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
See also: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/40
|
||||
|
|
@ -0,0 +1,584 @@
|
|||
/* =============================================================
|
||||
* bootstrap3-typeahead.js v4.0.2
|
||||
* https://github.com/bassjobsen/Bootstrap-3-Typeahead
|
||||
* =============================================================
|
||||
* Original written by @mdo and @fat
|
||||
* =============================================================
|
||||
* Copyright 2014 Bass Jobsen @bassjobsen
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the 'License');
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an 'AS IS' BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
* ============================================================ */
|
||||
|
||||
|
||||
(function (root, factory) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// CommonJS module is defined
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = factory(require('jquery'));
|
||||
}
|
||||
// AMD module is defined
|
||||
else if (typeof define === 'function' && define.amd) {
|
||||
define(['jquery'], function ($) {
|
||||
return factory ($);
|
||||
});
|
||||
} else {
|
||||
factory(root.jQuery);
|
||||
}
|
||||
|
||||
}(this, function ($) {
|
||||
|
||||
'use strict';
|
||||
// jshint laxcomma: true
|
||||
|
||||
|
||||
/* TYPEAHEAD PUBLIC CLASS DEFINITION
|
||||
* ================================= */
|
||||
|
||||
var Typeahead = function (element, options) {
|
||||
this.$element = $(element);
|
||||
this.options = $.extend({}, $.fn.typeahead.defaults, options);
|
||||
this.matcher = this.options.matcher || this.matcher;
|
||||
this.sorter = this.options.sorter || this.sorter;
|
||||
this.select = this.options.select || this.select;
|
||||
this.autoSelect = typeof this.options.autoSelect == 'boolean' ? this.options.autoSelect : true;
|
||||
this.highlighter = this.options.highlighter || this.highlighter;
|
||||
this.render = this.options.render || this.render;
|
||||
this.updater = this.options.updater || this.updater;
|
||||
this.displayText = this.options.displayText || this.displayText;
|
||||
this.source = this.options.source;
|
||||
this.delay = this.options.delay;
|
||||
this.$menu = $(this.options.menu);
|
||||
this.$appendTo = this.options.appendTo ? $(this.options.appendTo) : null;
|
||||
this.fitToElement = typeof this.options.fitToElement == 'boolean' ? this.options.fitToElement : false;
|
||||
this.shown = false;
|
||||
this.listen();
|
||||
this.showHintOnFocus = typeof this.options.showHintOnFocus == 'boolean' || this.options.showHintOnFocus === "all" ? this.options.showHintOnFocus : false;
|
||||
this.afterSelect = this.options.afterSelect;
|
||||
this.addItem = false;
|
||||
this.value = this.$element.val() || this.$element.text();
|
||||
};
|
||||
|
||||
Typeahead.prototype = {
|
||||
|
||||
constructor: Typeahead,
|
||||
|
||||
select: function () {
|
||||
var val = this.$menu.find('.active').data('value');
|
||||
this.$element.data('active', val);
|
||||
if (this.autoSelect || val) {
|
||||
var newVal = this.updater(val);
|
||||
// Updater can be set to any random functions via "options" parameter in constructor above.
|
||||
// Add null check for cases when updater returns void or undefined.
|
||||
if (!newVal) {
|
||||
newVal = '';
|
||||
}
|
||||
this.$element
|
||||
.val(this.displayText(newVal) || newVal)
|
||||
.text(this.displayText(newVal) || newVal)
|
||||
.change();
|
||||
this.afterSelect(newVal);
|
||||
}
|
||||
return this.hide();
|
||||
},
|
||||
|
||||
updater: function (item) {
|
||||
return item;
|
||||
},
|
||||
|
||||
setSource: function (source) {
|
||||
this.source = source;
|
||||
},
|
||||
|
||||
show: function () {
|
||||
var pos = $.extend({}, this.$element.position(), {
|
||||
height: this.$element[0].offsetHeight
|
||||
});
|
||||
|
||||
var scrollHeight = typeof this.options.scrollHeight == 'function' ?
|
||||
this.options.scrollHeight.call() :
|
||||
this.options.scrollHeight;
|
||||
|
||||
var element;
|
||||
if (this.shown) {
|
||||
element = this.$menu;
|
||||
} else if (this.$appendTo) {
|
||||
element = this.$menu.appendTo(this.$appendTo);
|
||||
this.hasSameParent = this.$appendTo.is(this.$element.parent());
|
||||
} else {
|
||||
element = this.$menu.insertAfter(this.$element);
|
||||
this.hasSameParent = true;
|
||||
}
|
||||
|
||||
if (!this.hasSameParent) {
|
||||
// We cannot rely on the element position, need to position relative to the window
|
||||
element.css("position", "fixed");
|
||||
var offset = this.$element.offset();
|
||||
pos.top = offset.top;
|
||||
pos.left = offset.left;
|
||||
}
|
||||
// The rules for bootstrap are: 'dropup' in the parent and 'dropdown-menu-right' in the element.
|
||||
// Note that to get right alignment, you'll need to specify `menu` in the options to be:
|
||||
// '<ul class="typeahead dropdown-menu" role="listbox"></ul>'
|
||||
var dropup = $(element).parent().hasClass('dropup');
|
||||
var newTop = dropup ? 'auto' : (pos.top + pos.height + scrollHeight);
|
||||
var right = $(element).hasClass('dropdown-menu-right');
|
||||
var newLeft = right ? 'auto' : pos.left;
|
||||
// it seems like setting the css is a bad idea (just let Bootstrap do it), but I'll keep the old
|
||||
// logic in place except for the dropup/right-align cases.
|
||||
element.css({ top: newTop, left: newLeft }).show();
|
||||
|
||||
if (this.options.fitToElement === true) {
|
||||
element.css("width", this.$element.outerWidth() + "px");
|
||||
}
|
||||
|
||||
this.shown = true;
|
||||
return this;
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
this.$menu.hide();
|
||||
this.shown = false;
|
||||
return this;
|
||||
},
|
||||
|
||||
lookup: function (query) {
|
||||
var items;
|
||||
if (typeof(query) != 'undefined' && query !== null) {
|
||||
this.query = query;
|
||||
} else {
|
||||
this.query = this.$element.val() || this.$element.text() || '';
|
||||
}
|
||||
|
||||
if (this.query.length < this.options.minLength && !this.options.showHintOnFocus) {
|
||||
return this.shown ? this.hide() : this;
|
||||
}
|
||||
|
||||
var worker = $.proxy(function () {
|
||||
|
||||
if ($.isFunction(this.source)) {
|
||||
this.source(this.query, $.proxy(this.process, this));
|
||||
} else if (this.source) {
|
||||
this.process(this.source);
|
||||
}
|
||||
}, this);
|
||||
|
||||
clearTimeout(this.lookupWorker);
|
||||
this.lookupWorker = setTimeout(worker, this.delay);
|
||||
},
|
||||
|
||||
process: function (items) {
|
||||
var that = this;
|
||||
|
||||
items = $.grep(items, function (item) {
|
||||
return that.matcher(item);
|
||||
});
|
||||
|
||||
items = this.sorter(items);
|
||||
|
||||
if (!items.length && !this.options.addItem) {
|
||||
return this.shown ? this.hide() : this;
|
||||
}
|
||||
|
||||
if (items.length > 0) {
|
||||
this.$element.data('active', items[0]);
|
||||
} else {
|
||||
this.$element.data('active', null);
|
||||
}
|
||||
|
||||
// Add item
|
||||
if (this.options.addItem){
|
||||
items.push(this.options.addItem);
|
||||
}
|
||||
|
||||
if (this.options.items == 'all') {
|
||||
return this.render(items).show();
|
||||
} else {
|
||||
return this.render(items.slice(0, this.options.items)).show();
|
||||
}
|
||||
},
|
||||
|
||||
matcher: function (item) {
|
||||
var it = this.displayText(item);
|
||||
return ~it.toLowerCase().indexOf(this.query.toLowerCase());
|
||||
},
|
||||
|
||||
sorter: function (items) {
|
||||
var beginswith = [];
|
||||
var caseSensitive = [];
|
||||
var caseInsensitive = [];
|
||||
var item;
|
||||
|
||||
while ((item = items.shift())) {
|
||||
var it = this.displayText(item);
|
||||
if (!it.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(item);
|
||||
else if (~it.indexOf(this.query)) caseSensitive.push(item);
|
||||
else caseInsensitive.push(item);
|
||||
}
|
||||
|
||||
return beginswith.concat(caseSensitive, caseInsensitive);
|
||||
},
|
||||
|
||||
highlighter: function (item) {
|
||||
var html = $('<div></div>');
|
||||
var query = this.query;
|
||||
var i = item.toLowerCase().indexOf(query.toLowerCase());
|
||||
var len = query.length;
|
||||
var leftPart;
|
||||
var middlePart;
|
||||
var rightPart;
|
||||
var strong;
|
||||
if (len === 0) {
|
||||
return html.text(item).html();
|
||||
}
|
||||
while (i > -1) {
|
||||
leftPart = item.substr(0, i);
|
||||
middlePart = item.substr(i, len);
|
||||
rightPart = item.substr(i + len);
|
||||
strong = $('<strong></strong>').text(middlePart);
|
||||
html
|
||||
.append(document.createTextNode(leftPart))
|
||||
.append(strong);
|
||||
item = rightPart;
|
||||
i = item.toLowerCase().indexOf(query.toLowerCase());
|
||||
}
|
||||
return html.append(document.createTextNode(item)).html();
|
||||
},
|
||||
|
||||
render: function (items) {
|
||||
var that = this;
|
||||
var self = this;
|
||||
var activeFound = false;
|
||||
var data = [];
|
||||
var _category = that.options.separator;
|
||||
|
||||
$.each(items, function (key,value) {
|
||||
// inject separator
|
||||
if (key > 0 && value[_category] !== items[key - 1][_category]){
|
||||
data.push({
|
||||
__type: 'divider'
|
||||
});
|
||||
}
|
||||
|
||||
// inject category header
|
||||
if (value[_category] && (key === 0 || value[_category] !== items[key - 1][_category])){
|
||||
data.push({
|
||||
__type: 'category',
|
||||
name: value[_category]
|
||||
});
|
||||
}
|
||||
data.push(value);
|
||||
});
|
||||
|
||||
items = $(data).map(function (i, item) {
|
||||
if ((item.__type || false) == 'category'){
|
||||
return $(that.options.headerHtml).text(item.name)[0];
|
||||
}
|
||||
|
||||
if ((item.__type || false) == 'divider'){
|
||||
return $(that.options.headerDivider)[0];
|
||||
}
|
||||
|
||||
var text = self.displayText(item);
|
||||
i = $(that.options.item).data('value', item);
|
||||
i.find('a').html(that.highlighter(text, item));
|
||||
if (text == self.$element.val()) {
|
||||
i.addClass('active');
|
||||
self.$element.data('active', item);
|
||||
activeFound = true;
|
||||
}
|
||||
return i[0];
|
||||
});
|
||||
|
||||
if (this.autoSelect && !activeFound) {
|
||||
items.filter(':not(.dropdown-header)').first().addClass('active');
|
||||
this.$element.data('active', items.first().data('value'));
|
||||
}
|
||||
this.$menu.html(items);
|
||||
return this;
|
||||
},
|
||||
|
||||
displayText: function (item) {
|
||||
return typeof item !== 'undefined' && typeof item.name != 'undefined' && item.name || item;
|
||||
},
|
||||
|
||||
next: function (event) {
|
||||
var active = this.$menu.find('.active').removeClass('active');
|
||||
var next = active.next();
|
||||
|
||||
if (!next.length) {
|
||||
next = $(this.$menu.find('li')[0]);
|
||||
}
|
||||
|
||||
next.addClass('active');
|
||||
},
|
||||
|
||||
prev: function (event) {
|
||||
var active = this.$menu.find('.active').removeClass('active');
|
||||
var prev = active.prev();
|
||||
|
||||
if (!prev.length) {
|
||||
prev = this.$menu.find('li').last();
|
||||
}
|
||||
|
||||
prev.addClass('active');
|
||||
},
|
||||
|
||||
listen: function () {
|
||||
this.$element
|
||||
.on('focus', $.proxy(this.focus, this))
|
||||
.on('blur', $.proxy(this.blur, this))
|
||||
.on('keypress', $.proxy(this.keypress, this))
|
||||
.on('input', $.proxy(this.input, this))
|
||||
.on('keyup', $.proxy(this.keyup, this));
|
||||
|
||||
if (this.eventSupported('keydown')) {
|
||||
this.$element.on('keydown', $.proxy(this.keydown, this));
|
||||
}
|
||||
|
||||
this.$menu
|
||||
.on('click', $.proxy(this.click, this))
|
||||
.on('mouseenter', 'li', $.proxy(this.mouseenter, this))
|
||||
.on('mouseleave', 'li', $.proxy(this.mouseleave, this))
|
||||
.on('mousedown', $.proxy(this.mousedown,this));
|
||||
},
|
||||
|
||||
destroy : function () {
|
||||
this.$element.data('typeahead',null);
|
||||
this.$element.data('active',null);
|
||||
this.$element
|
||||
.off('focus')
|
||||
.off('blur')
|
||||
.off('keypress')
|
||||
.off('input')
|
||||
.off('keyup');
|
||||
|
||||
if (this.eventSupported('keydown')) {
|
||||
this.$element.off('keydown');
|
||||
}
|
||||
|
||||
this.$menu.remove();
|
||||
this.destroyed = true;
|
||||
},
|
||||
|
||||
eventSupported: function (eventName) {
|
||||
var isSupported = eventName in this.$element;
|
||||
if (!isSupported) {
|
||||
this.$element.setAttribute(eventName, 'return;');
|
||||
isSupported = typeof this.$element[eventName] === 'function';
|
||||
}
|
||||
return isSupported;
|
||||
},
|
||||
|
||||
move: function (e) {
|
||||
if (!this.shown) return;
|
||||
|
||||
switch (e.keyCode) {
|
||||
case 9: // tab
|
||||
case 13: // enter
|
||||
case 27: // escape
|
||||
e.preventDefault();
|
||||
break;
|
||||
|
||||
case 38: // up arrow
|
||||
// with the shiftKey (this is actually the left parenthesis)
|
||||
if (e.shiftKey) return;
|
||||
e.preventDefault();
|
||||
this.prev();
|
||||
break;
|
||||
|
||||
case 40: // down arrow
|
||||
// with the shiftKey (this is actually the right parenthesis)
|
||||
if (e.shiftKey) return;
|
||||
e.preventDefault();
|
||||
this.next();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
keydown: function (e) {
|
||||
this.suppressKeyPressRepeat = ~$.inArray(e.keyCode, [40,38,9,13,27]);
|
||||
if (!this.shown && e.keyCode == 40) {
|
||||
this.lookup();
|
||||
} else {
|
||||
this.move(e);
|
||||
}
|
||||
},
|
||||
|
||||
keypress: function (e) {
|
||||
if (this.suppressKeyPressRepeat) return;
|
||||
this.move(e);
|
||||
},
|
||||
|
||||
input: function (e) {
|
||||
// This is a fixed for IE10/11 that fires the input event when a placehoder is changed
|
||||
// (https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus)
|
||||
var currentValue = this.$element.val() || this.$element.text();
|
||||
if (this.value !== currentValue) {
|
||||
this.value = currentValue;
|
||||
this.lookup();
|
||||
}
|
||||
},
|
||||
|
||||
keyup: function (e) {
|
||||
if (this.destroyed) {
|
||||
return;
|
||||
}
|
||||
switch (e.keyCode) {
|
||||
case 40: // down arrow
|
||||
case 38: // up arrow
|
||||
case 16: // shift
|
||||
case 17: // ctrl
|
||||
case 18: // alt
|
||||
break;
|
||||
|
||||
case 9: // tab
|
||||
case 13: // enter
|
||||
if (!this.shown) return;
|
||||
this.select();
|
||||
break;
|
||||
|
||||
case 27: // escape
|
||||
if (!this.shown) return;
|
||||
this.hide();
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
focus: function (e) {
|
||||
if (!this.focused) {
|
||||
this.focused = true;
|
||||
if (this.options.showHintOnFocus && this.skipShowHintOnFocus !== true) {
|
||||
if(this.options.showHintOnFocus === "all") {
|
||||
this.lookup("");
|
||||
} else {
|
||||
this.lookup();
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this.skipShowHintOnFocus) {
|
||||
this.skipShowHintOnFocus = false;
|
||||
}
|
||||
},
|
||||
|
||||
blur: function (e) {
|
||||
if (!this.mousedover && !this.mouseddown && this.shown) {
|
||||
this.hide();
|
||||
this.focused = false;
|
||||
} else if (this.mouseddown) {
|
||||
// This is for IE that blurs the input when user clicks on scroll.
|
||||
// We set the focus back on the input and prevent the lookup to occur again
|
||||
this.skipShowHintOnFocus = true;
|
||||
this.$element.focus();
|
||||
this.mouseddown = false;
|
||||
}
|
||||
},
|
||||
|
||||
click: function (e) {
|
||||
e.preventDefault();
|
||||
this.skipShowHintOnFocus = true;
|
||||
this.select();
|
||||
this.$element.focus();
|
||||
this.hide();
|
||||
},
|
||||
|
||||
mouseenter: function (e) {
|
||||
this.mousedover = true;
|
||||
this.$menu.find('.active').removeClass('active');
|
||||
$(e.currentTarget).addClass('active');
|
||||
},
|
||||
|
||||
mouseleave: function (e) {
|
||||
this.mousedover = false;
|
||||
if (!this.focused && this.shown) this.hide();
|
||||
},
|
||||
|
||||
/**
|
||||
* We track the mousedown for IE. When clicking on the menu scrollbar, IE makes the input blur thus hiding the menu.
|
||||
*/
|
||||
mousedown: function (e) {
|
||||
this.mouseddown = true;
|
||||
this.$menu.one("mouseup", function(e){
|
||||
// IE won't fire this, but FF and Chrome will so we reset our flag for them here
|
||||
this.mouseddown = false;
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
|
||||
/* TYPEAHEAD PLUGIN DEFINITION
|
||||
* =========================== */
|
||||
|
||||
var old = $.fn.typeahead;
|
||||
|
||||
$.fn.typeahead = function (option) {
|
||||
var arg = arguments;
|
||||
if (typeof option == 'string' && option == 'getActive') {
|
||||
return this.data('active');
|
||||
}
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data('typeahead');
|
||||
var options = typeof option == 'object' && option;
|
||||
if (!data) $this.data('typeahead', (data = new Typeahead(this, options)));
|
||||
if (typeof option == 'string' && data[option]) {
|
||||
if (arg.length > 1) {
|
||||
data[option].apply(data, Array.prototype.slice.call(arg, 1));
|
||||
} else {
|
||||
data[option]();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.typeahead.defaults = {
|
||||
source: [],
|
||||
items: 8,
|
||||
menu: '<ul class="typeahead dropdown-menu" role="listbox"></ul>',
|
||||
item: '<li><a class="dropdown-item" href="#" role="option"></a></li>',
|
||||
minLength: 1,
|
||||
scrollHeight: 0,
|
||||
autoSelect: true,
|
||||
afterSelect: $.noop,
|
||||
addItem: false,
|
||||
delay: 0,
|
||||
separator: 'category',
|
||||
headerHtml: '<li class="dropdown-header"></li>',
|
||||
headerDivider: '<li class="divider" role="separator"></li>'
|
||||
};
|
||||
|
||||
$.fn.typeahead.Constructor = Typeahead;
|
||||
|
||||
/* TYPEAHEAD NO CONFLICT
|
||||
* =================== */
|
||||
|
||||
$.fn.typeahead.noConflict = function () {
|
||||
$.fn.typeahead = old;
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
/* TYPEAHEAD DATA-API
|
||||
* ================== */
|
||||
|
||||
$(document).on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
|
||||
var $this = $(this);
|
||||
if ($this.data('typeahead')) return;
|
||||
$this.typeahead($this.data());
|
||||
});
|
||||
|
||||
}));
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "bootstrap3-typeahead",
|
||||
"version": "4.0.2",
|
||||
"authors": [
|
||||
"bassjobsen"
|
||||
],
|
||||
"main": [
|
||||
"bootstrap3-typeahead.js"
|
||||
],
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "bassjobsen/bootstrap-3-typeahead",
|
||||
"type": "component",
|
||||
"license": "Apache-2.0",
|
||||
"description": "Bootstrap 3 Typeahead",
|
||||
"minimum-stability": "dev",
|
||||
"authors": [
|
||||
{
|
||||
"name": "Bass Jobsen",
|
||||
"email": "bass@w3masters.nl"
|
||||
}
|
||||
],
|
||||
"extra": {
|
||||
"component": {
|
||||
"files": [
|
||||
"bootstrap3-typeahead.js",
|
||||
"bootstrap3-typeahead.min.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"name": "bootstrap-3-typeahead",
|
||||
"description": "Bootstrap 3 Typeahead: The typeahead autocomplete plugin for Twitter's Bootstrap 2 ready to use with Bootstrap 3.",
|
||||
"version": "4.0.2",
|
||||
"main": "bootstrap3-typeahead.js",
|
||||
"keywords": [
|
||||
"typeahead",
|
||||
"autocomplete",
|
||||
"plugin",
|
||||
"jquery",
|
||||
"bootstrap"
|
||||
],
|
||||
"homepage": "https://github.com/bassjobsen/Bootstrap-3-Typeahead/",
|
||||
"author": "Bass Jobsen",
|
||||
"scripts": {
|
||||
"test": "grunt test"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/bassjobsen/Bootstrap-3-Typeahead.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues"
|
||||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.5",
|
||||
"grunt-contrib-jshint": "~0.10.0",
|
||||
"grunt-contrib-uglify": "~0.6.0",
|
||||
"grunt-jscs": "~0.8.1",
|
||||
"load-grunt-tasks": "~0.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "~0.10.1"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
<?php include("header.php"); ?>
|
||||
|
||||
<?php $sql = mysqli_query($mysqli,"SELECT * FROM vendors ORDER BY vendor_id DESC"); ?>
|
||||
<?php $sql = mysqli_query($mysqli,"SELECT * FROM vendors ORDER BY vendor_name ASC"); ?>
|
||||
|
||||
|
||||
<div class="card mb-3">
|
||||
|
|
|
|||
Loading…
Reference in New Issue