mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/IZYIM-Prototype.git
synced 2026-08-19 04:33:55 +00:00
Jackk Goh
1769 lines
105 KiB
HTML
1769 lines
105 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<!--<![endif]-->
|
|
<!-- BEGIN HEAD -->
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>IZYIM | Custom Declaration Document</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta content="width=device-width, initial-scale=1" name="viewport" />
|
|
<meta content="Preview page of Metronic Admin Theme #1 for statistics, charts, recent events and reports" name="description" />
|
|
<meta content="" name="author" />
|
|
<!-- BEGIN GLOBAL MANDATORY STYLES -->
|
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
|
|
<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- END GLOBAL MANDATORY STYLES -->
|
|
<!-- BEGIN PAGE LEVEL PLUGINS -->
|
|
<link href="../assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
|
|
<link href="../assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- END PAGE LEVEL PLUGINS -->
|
|
<!-- BEGIN THEME GLOBAL STYLES -->
|
|
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
|
|
<link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- END THEME GLOBAL STYLES -->
|
|
<!-- BEGIN THEME LAYOUT STYLES -->
|
|
<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
|
|
<link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
|
|
<!-- END THEME LAYOUT STYLES -->
|
|
<link href="../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
|
|
<link href="../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
|
|
<style>
|
|
div.dt-button-collection {
|
|
margin-top: 70px;
|
|
}
|
|
.table td,
|
|
.table th {
|
|
font-size: 10px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
.dataTables_wrapper .dataTables_filter {
|
|
float: left;
|
|
text-align: right;
|
|
}
|
|
.table thead tr th {
|
|
font-size: 10px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
.filterIcon {
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
.modalFilter {
|
|
display: none;
|
|
height: auto;
|
|
position: absolute;
|
|
z-index: 10000001;
|
|
}
|
|
.modal-footer {
|
|
padding: 15px;
|
|
text-align: left;
|
|
border-top: 1px solid #e5e5e5;
|
|
}
|
|
.dt-buttons {
|
|
margin-top: 0px !important;
|
|
}
|
|
#mask {
|
|
display: none;
|
|
background: transparent;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 1000;
|
|
}
|
|
@media (min-width: 992px) {
|
|
.page-content-wrapper .page-content {
|
|
margin-left: 200px;
|
|
}
|
|
}
|
|
@media (min-width: 992px) {
|
|
.page-sidebar {
|
|
width: 200px;
|
|
float: left;
|
|
position: relative;
|
|
margin-right: -100%;
|
|
}
|
|
}
|
|
#example2_filter {
|
|
float: right;
|
|
}
|
|
.col_0 {
|
|
width: 50px !important;
|
|
padding-right: 0px !important;
|
|
padding-left: 0px !important;
|
|
}
|
|
.col_1 {
|
|
width: 50px !important;
|
|
padding-right: 0px !important;
|
|
padding-left: 0px !important;
|
|
}
|
|
.col_2 {
|
|
width: 50px !important;
|
|
}
|
|
.col_3 {
|
|
width: 60px !important;
|
|
}
|
|
.col_4 {
|
|
width: 60px !important;
|
|
}
|
|
.col_5 {
|
|
width: 60px !important;
|
|
}
|
|
.blue {
|
|
color: #337ab7;
|
|
line-height: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: 14px;
|
|
text-rendering: auto;
|
|
}
|
|
.media-object-4 {
|
|
width: 35px;
|
|
position: right;
|
|
margin-left: 63%;
|
|
margin-top: 0.7%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<!-- END HEAD -->
|
|
|
|
|
|
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
|
|
<div class="page-wrapper">
|
|
<!-- BEGIN HEADER -->
|
|
<div class="page-header navbar navbar-fixed-top">
|
|
<!-- BEGIN HEADER INNER -->
|
|
<div class="page-header-inner ">
|
|
<!-- BEGIN LOGO -->
|
|
<div class="page-logo">
|
|
<div class="menu-toggler sidebar-toggler">
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
<!-- END LOGO -->
|
|
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
|
|
<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
|
|
<span></span>
|
|
</a>
|
|
<!-- END RESPONSIVE MENU TOGGLER -->
|
|
<!-- BEGIN TOP NAVIGATION MENU -->
|
|
|
|
<div class="top-menu">
|
|
<img style="margin-left:100px; margin-top:9px; border-radius:100%" class="media-object-4" src="../assets/layouts/layout/img/1.png" alt="...">
|
|
<ul class="nav navbar-nav pull-right">
|
|
<!-- BEGIN USER LOGIN DROPDOWN -->
|
|
<!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
|
|
<li class="dropdown dropdown-user">
|
|
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
|
|
<img alt="" class="img-circle" src="../assets/layouts/layout/img/avatar3_small.jpg" />
|
|
<span class="username username-hide-on-mobile"> Syed Amir </span>
|
|
<i class="fa fa-angle-down"></i>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-default">
|
|
<li>
|
|
<a href="profile.html">
|
|
<i class="icon-user"></i> My Profile </a>
|
|
</li>
|
|
<li>
|
|
<a href="login.html">
|
|
<i class="icon-key"></i> Log Out </a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<!-- END USER LOGIN DROPDOWN -->
|
|
|
|
</ul>
|
|
</div>
|
|
<!-- END TOP NAVIGATION MENU -->
|
|
</div>
|
|
<!-- END HEADER INNER -->
|
|
</div>
|
|
<!-- END HEADER -->
|
|
<!-- BEGIN HEADER & CONTENT DIVIDER -->
|
|
<div class="clearfix"> </div>
|
|
<!-- END HEADER & CONTENT DIVIDER -->
|
|
<!-- BEGIN CONTAINER -->
|
|
<div class="page-container">
|
|
<!-- BEGIN SIDEBAR -->
|
|
<div class="page-sidebar-wrapper">
|
|
<!-- BEGIN SIDEBAR -->
|
|
<!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
|
|
<!-- DOC: Change data-auto-speed="200" to adjust the sub menu slide up/down speed -->
|
|
<div class="page-sidebar navbar-collapse collapse">
|
|
|
|
<ul class="page-sidebar-menu page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">
|
|
<!-- DOC: To remove the sidebar toggler from the sidebar you just need to completely remove the below "sidebar-toggler-wrapper" LI element -->
|
|
<!-- BEGIN SIDEBAR TOGGLER BUTTON -->
|
|
<li class="sidebar-toggler-wrapper hide">
|
|
<div class="sidebar-toggler">
|
|
<span></span>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<center><img src="../assets/global/img/logo.png" style="height:auto ; width:60%" />
|
|
</center>
|
|
</li>
|
|
<hr>
|
|
<li class="nav-item start">
|
|
<a href="index.html" class="nav-link nav-toggle">
|
|
<i class="icon-home"></i>
|
|
<span class="title">Order Status</span>
|
|
<span class="selected"></span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="notice.html" class="nav-link nav-toggle">
|
|
<i class="fa fa-newspaper-o"></i>
|
|
<span class="title">Notice</span>
|
|
<span class="selected"></span>
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a href="javascript:;" class="nav-link nav-toggle">
|
|
<i class="icon-briefcase"></i>
|
|
<span class="title">Arrangements</span>
|
|
<span class="arrow"></span>
|
|
</a>
|
|
<ul class="sub-menu">
|
|
<li class="nav-item">
|
|
<a href="warehousenote.html" class="nav-link ">
|
|
<i class="fa fa-industry"></i>
|
|
<span class="title">Warehouse Receive Note</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="shipmentarrange.html" class="nav-link ">
|
|
<i class="fa fa-ship"></i>
|
|
<span class="title">Shipment Arrangement</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item ">
|
|
<a href="deliveryarrange.html" class="nav-link ">
|
|
<i class="fa fa-truck"></i>
|
|
<span class="title">Delivery Arrangement</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="javascript:;" class="nav-link nav-toggle">
|
|
<i class="icon-briefcase"></i>
|
|
<span class="title">Orders</span>
|
|
<span class="arrow"></span>
|
|
</a>
|
|
<ul class="sub-menu">
|
|
<li class="nav-item ">
|
|
<a href="purchaseorder.html" class="nav-link ">
|
|
<i class="icon-clock"></i>
|
|
<span class="title">Purchase Order</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="shippingorderstatus.html" class="nav-link ">
|
|
<i class="icon-check"></i>
|
|
<span class="title">Shipping Order</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item active open">
|
|
<a href="custom.html?menu=true" class="nav-link nav-toggle">
|
|
<i class="fa fa-comments-o"></i>
|
|
<span class="title">Custom Declaration</span>
|
|
<span class="selected"></span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="chat.html?menu=true" class="nav-link nav-toggle">
|
|
<i class="fa fa-comments-o"></i>
|
|
<span class="title">Messenger</span>
|
|
<span class="selected"></span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="trackorder.html?menu=true" class="nav-link nav-toggle">
|
|
<i class="icon-basket"></i>
|
|
<span class="title">Track Order</span>
|
|
<span class="selected"></span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="profile.html" class="nav-link nav-toggle">
|
|
<i class="icon-user"></i>
|
|
<span class="title">Profile</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="contactlist.html" class="nav-link nav-toggle">
|
|
<i class="icon-notebook"></i>
|
|
<span class="title">Contact List</span>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="javascript:;" class="nav-link nav-toggle">
|
|
<i class="icon-settings"></i>
|
|
<span class="title">Settings</span>
|
|
<span class="arrow"></span>
|
|
</a>
|
|
<ul class="sub-menu">
|
|
|
|
<li class="nav-item">
|
|
<a href="updatecurrency.html" class="nav-link ">
|
|
<i class="fa fa-money"></i>
|
|
<span class="title">Update Currency</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
|
|
</ul>
|
|
<!-- END SIDEBAR MENU -->
|
|
<!-- END SIDEBAR MENU -->
|
|
</div>
|
|
<!-- END SIDEBAR -->
|
|
<!-- BEGIN CONTENT -->
|
|
<div class="page-content-wrapper">
|
|
<!-- BEGIN CONTENT BODY -->
|
|
<div class="page-content">
|
|
<!-- BEGIN PAGE BAR -->
|
|
<div class="page-bar">
|
|
<ul class="page-breadcrumb">
|
|
<li>
|
|
<a href="index.html">Home</a>
|
|
<i class="fa fa-circle"></i>
|
|
</li>
|
|
<li>
|
|
<a href="deliveryarrange.html">Custom Declaration Document</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- END PAGE BAR -->
|
|
<!-- BEGIN PAGE TITLE-->
|
|
<h1 class="page-title">
|
|
</h1>
|
|
|
|
<!-- CONTENT -->
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<!-- Begin: life time stats -->
|
|
<div class="portlet box green">
|
|
<div class="portlet-title">
|
|
<div class="caption">
|
|
<i class="fa fa-cogs"></i><strong>Custom Declaration Document</strong> </div>
|
|
<div class="actions">
|
|
<div class="btn-group" style="display:none">
|
|
<a id="qweqwe" class="btn white btn-outline btn-circle" href="#form_delivery" data-toggle="modal"> Custom Declaration Document<
|
|
</a>
|
|
</div>
|
|
<div class="btn-group">
|
|
<a class="btn white btn-outline btn-circle" href="javascript:;" data-toggle="dropdown">
|
|
<i class="fa fa-share"></i>
|
|
<span class="hidden-xs"> Actions </span>
|
|
<i class="fa fa-angle-down"></i>
|
|
</a>
|
|
|
|
<ul class="dropdown-menu pull-right" id="sample_3_tools">
|
|
<li>
|
|
<a href="javascript:;" data-action="0" class="tool-action">
|
|
<i class="icon-printer"></i> Print</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;" data-action="1" class="tool-action">
|
|
<i class="icon-check"></i> Copy</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;" data-action="2" class="tool-action">
|
|
<i class="icon-doc"></i> PDF</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;" data-action="3" class="tool-action">
|
|
<i class="icon-paper-clip"></i> Excel</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:;" data-action="4" class="tool-action">
|
|
<i class="icon-cloud-upload"></i> CSV</a>
|
|
</li>
|
|
<li class="divider"> </li>
|
|
<li>
|
|
<a href="javascript:;" data-action="5" class="tool-action">
|
|
<i class="icon-refresh"></i> Reload</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="portlet-body">
|
|
|
|
<div class="table-container">
|
|
|
|
<div id="mask"></div>
|
|
<!-- <span id="switch" class="pull-right" style="margin-left:5px; margin-right:5px;">Status : <input type='checkbox' class='make-switch pull-right asdasd' checked data-size='small' data-on-color='success' data-on-text='ON' data-off-color='default' data-off-text='OFF'></span> -->
|
|
<table id="example" class="table table-striped table-bordered table-hover order-column"></table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End: life time stats -->
|
|
</div>
|
|
</div>
|
|
<!-- END CONTENT -->
|
|
<div class="modal fade modal-scroll bs-modal-lg in" id="form_delivery" tabindex="-1" role="basic" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header" style="background-color: #3598dc">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
|
|
|
|
<div class="caption" style="color: #FFF;padding: 11px 0 9px;float: left;display: inline-block;font-size: 18px;line-height: 18px;font-family:'Open Sans',sans-serif;">
|
|
<i class="fa fa-gift" style=" float: left;margin-top: 4px;display: inline-block;font-size: 13px;margin-right: 5px;"></i>Custom Declaration
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="portlet light bordered" id="form_wizard_1">
|
|
|
|
<div class="portlet-body form">
|
|
<form class="form-horizontal" action="#" id="submit_form" method="POST">
|
|
<div class="form-wizard">
|
|
<div class="form-body">
|
|
<ul class="nav nav-pills nav-justified steps">
|
|
<li>
|
|
<a href="#tab1" data-toggle="tab" class="step">
|
|
<span class="number"> 1 </span>
|
|
<span class="desc">
|
|
<i class="fa fa-check"></i> Shipping Order</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#tab2" data-toggle="tab" class="step">
|
|
<span class="number"> 2 </span>
|
|
<span class="desc">
|
|
<i class="fa fa-check"></i> Custom Details<br> </span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div id="bar" class="progress progress-striped" role="progressbar">
|
|
<div class="progress-bar progress-bar-success"> </div>
|
|
</div>
|
|
<div class="progress-bar progress-bar-success"> </div>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div class="alert alert-danger display-none">
|
|
<button class="close" data-dismiss="alert"></button> You have some form errors. Please check below. </div>
|
|
<div class="alert alert-success display-none">
|
|
<button class="close" data-dismiss="alert"></button> Your form validation is successful! </div>
|
|
<div class="tab-pane active" id="tab1">
|
|
<div class="col-md-13">
|
|
|
|
|
|
<div class="caption">
|
|
<i class="icon-social-dribbble font-green hide"></i>
|
|
<span class="caption-subject font-dark bold uppercase">Select Shipping Order</span>
|
|
</div>
|
|
|
|
<div class="portlet-body">
|
|
<div style="margin-top:60px" class="form-group">
|
|
<label for="so" class="col-md-2 control-label">Shipping Order</label>
|
|
<div class="col-md-10">
|
|
<div class="input-group select2-bootstrap-append">
|
|
<select id="multi-append" class="form-control select2" multiple>
|
|
<option></option>
|
|
<option value="000">00012 </option>
|
|
<option value="001">00114</option>
|
|
<option value="002">00216</option>
|
|
<option value="004">00418</option>
|
|
<option value="006">00624</option>
|
|
<option value="183">18332</option>
|
|
<option value="187">18742</option>
|
|
<option value="197">19745</option>
|
|
<option value="256">25654</option>
|
|
<option value="287">28782</option>
|
|
<option value="348">34829</option>
|
|
<option value="368">36894</option>
|
|
<option value="380">38090</option>
|
|
<option value="426">42679</option>
|
|
<option value="448">44895</option>
|
|
<option value="468">46894</option>
|
|
<option value="489">48939</option>
|
|
<option value="578">57839</option>
|
|
</select>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button" data-select2-open="multi-append">
|
|
<span class="glyphicon glyphicon-search"></span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div style="margin-top:30px" class="form-group">
|
|
<label class="control-label col-md-4" style="font-size: 100%">Exporter Name</label>
|
|
<div class="col-md-7">
|
|
<input type="text" class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
|
|
<div class="col-md-offset-5 col-md-9">
|
|
<a href="javascript:;" class="btn btn-outline green button-next"> Next</a>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="tab2">
|
|
<div class="portlet-body">
|
|
<table style="font-size: 50%" class="table table-striped table-bordered table-hover" id="sample_editable_1">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">No</th>
|
|
<th scope="col">HS Code</th>
|
|
<th scope="col">Product
|
|
<br>Discription</th>
|
|
<th scope="col">Product
|
|
<br>Details</th>
|
|
<th scope="col">Quantity</th>
|
|
<th scope="col">UOM</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td contenteditable="true"></td>
|
|
<td contenteditable="true">Television</td>
|
|
<td contenteditable="true">100 Volt</td>
|
|
<td contenteditable="true">2</td>
|
|
<td contenteditable="true">Pallets</td>
|
|
<td contenteditable="true">RM 20000</td>
|
|
<td>
|
|
<center>
|
|
<div class='btn-group'>
|
|
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i>
|
|
</button>
|
|
<ul class='dropdown-menu'>
|
|
<li><a href='#'> View </a>
|
|
</li>
|
|
<li><a href='#'> Edit </a>
|
|
</li>
|
|
<li><a href='#'> Cancel </a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br/>
|
|
</center>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td contenteditable="true"></td>
|
|
<td contenteditable="true">Radio</td>
|
|
<td contenteditable="true">50 Volt</td>
|
|
<td contenteditable="true">5</td>
|
|
<td contenteditable="true">Packages</td>
|
|
<td contenteditable="true">RM 2000</td>
|
|
<td>
|
|
<center>
|
|
<div class='btn-group'>
|
|
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i>
|
|
</button>
|
|
<ul class='dropdown-menu'>
|
|
<li><a href='#'> View </a>
|
|
</li>
|
|
<li><a href='#'> Edit </a>
|
|
</li>
|
|
<li><a href='#'> Cancel </a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br/>
|
|
</center>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td contenteditable="true"></td>
|
|
<td contenteditable="true">Handphone</td>
|
|
<td contenteditable="true">50 Volt</td>
|
|
<td contenteditable="true">2</td>
|
|
<td contenteditable="true">Carton</td>
|
|
<td contenteditable="true">RM 9000</td>
|
|
<td>
|
|
<center>
|
|
<div class='btn-group'>
|
|
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i>
|
|
</button>
|
|
<ul class='dropdown-menu'>
|
|
<li><a href='#'> View </a>
|
|
</li>
|
|
<li><a href='#'> Edit </a>
|
|
</li>
|
|
<li><a href='#'> Cancel </a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br/>
|
|
</center>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>4</td>
|
|
<td contenteditable="true"></td>
|
|
<td contenteditable="true">Laptop</td>
|
|
<td contenteditable="true">80 Volt</td>
|
|
<td contenteditable="true">2</td>
|
|
<td contenteditable="true">Pallets</td>
|
|
<td contenteditable="true">RM 10000</td>
|
|
<td>
|
|
<center>
|
|
<div class='btn-group'>
|
|
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i>
|
|
</button>
|
|
<ul class='dropdown-menu'>
|
|
<li><a href='#'> View </a>
|
|
</li>
|
|
<li><a href='#'> Edit </a>
|
|
</li>
|
|
<li><a href='#'> Cancel </a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br/>
|
|
</center>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>5</td>
|
|
<td contenteditable="true"></td>
|
|
<td contenteditable="true">Refrigerator</td>
|
|
<td contenteditable="true">120 Volt</td>
|
|
<td contenteditable="true">2</td>
|
|
<td contenteditable="true">Pallets</td>
|
|
<td contenteditable="true">RM 20000</td>
|
|
<td>
|
|
<center>
|
|
<div class='btn-group'>
|
|
<button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i>
|
|
</button>
|
|
<ul class='dropdown-menu'>
|
|
<li><a href='#'> View </a>
|
|
</li>
|
|
<li><a href='#'> Edit </a>
|
|
</li>
|
|
<li><a href='#'> Cancel </a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<br/>
|
|
</center>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
<div style="margin-bottom:50px; margin-top: 80px; margin-left:350px" class="col-md-offset-3 col-md-9">
|
|
<a href="javascript:;" class="btn default button-previous">
|
|
<i class="fa fa-angle-left"></i> Back </a>
|
|
<a href="javascript:;" class="btn green button-submit"> Submit
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
|
|
|
|
<div class="modal fade in" id="reason" tabindex="-1" role="basic" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header" style="background-color: #3598dc">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
|
|
|
|
<div class="caption" style="color: #FFF;padding: 11px 0 9px;float: left;display: inline-block;font-size: 18px;line-height: 18px;font-family:'Open Sans',sans-serif;">
|
|
<i class="fa fa-gift" style=" float: left;margin-top: 4px;display: inline-block;font-size: 13px;margin-right: 5px;"></i>Failed Delivery
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label>Title</label>
|
|
<input class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Reason</label>
|
|
<textarea class="form-control" rows="3"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>ETA</label>
|
|
<textarea class="form-control" rows="3"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>ETD</label>
|
|
<textarea class="form-control" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="boxes" tabindex="-1" role="boxes" aria-hidden="true">
|
|
<div class="portlet-body">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<div class="form-body">
|
|
<div class="form-group">
|
|
|
|
<!-- PERSONAL INFO TAB -->
|
|
<div align="center">
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane active" id="tab_1_1" class="col-md-12">
|
|
<div class="portlet light bordered">
|
|
<div class="portlet-title">
|
|
<div class="caption">
|
|
<i class="icon-social-dribbble font-green hide"></i>
|
|
<span class="caption-subject font-dark bold uppercase">Shipment arrangement details</span>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane active" id="tab1">
|
|
<div class="row" class="col-md-9">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Loading Date : 02-02-2017</p>
|
|
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Container No : CTN121</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Shipping No : 12345</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>ETD : 03-02-2017</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Loading Departure : Guangzhou
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>ETA : 04-02-2017</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Loading Arrival : Port Klang</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
<div class="col-md-6">
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
|
|
<h5><b>LOADING VENUE</b></h5>
|
|
</div>
|
|
<!--/span-->
|
|
<div class="col-md-6">
|
|
</div>
|
|
<!--/span-->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Trailer No : JLM 1234</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Area : Semenyih</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Driver Name : Bob</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Country : Malaysia</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
</div>
|
|
<!--/row-->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Driver Contact No : 0123456789</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Postcode : 62150</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
</div>
|
|
<!--/row-->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Contact Person : Kyle</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Contact Person No : 0123456789</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<p>Remark : On the Way to delivered</p>
|
|
</div>
|
|
</div>
|
|
<!--/span-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-offset-4 col-md-9">
|
|
<a href="javascript:;" class="btn btn-outline green button-next"> Edit</a>
|
|
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END CONTENT -->
|
|
<div class="modal fade" id="profile" tabindex="-1" role="profile" aria-hidden="true">
|
|
<div class="portlet-body">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-body">
|
|
<div class="form-body">
|
|
<div class="form-group">
|
|
|
|
<!-- PERSONAL INFO TAB -->
|
|
<div align="center">
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane active" id="tab_1_1">
|
|
<div class="portlet light bordered">
|
|
<div class="portlet-title">
|
|
<div class="caption">
|
|
<i class="icon-social-dribbble font-green hide"></i>
|
|
<span class="caption-subject font-dark bold uppercase">Customs Examination</span>
|
|
</div>
|
|
</div>
|
|
<div class="portlet-body">
|
|
<table class="table table-bordered table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th width="5">No</th>
|
|
<th width="10">Date</th>
|
|
<th width="10">Order No</th>
|
|
<!-- <th width="10">Action</th> -->
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>03-08-2017</td>
|
|
<td>014567</td>
|
|
<!-- <th><input type="checkbox" class="checkboxes"></th> -->
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>04-08-2017</td>
|
|
<td>014567</td>
|
|
<!-- <th><input type="checkbox" class="checkboxes"></th> -->
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>05-08-2017</td>
|
|
<td>014567</td>
|
|
<!-- <th><input type="checkbox" class="checkboxes"></th> -->
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="portlet-body">
|
|
<br>
|
|
<p>Customs Examination Departure Port</p>
|
|
<br>
|
|
<p class="caption-subject font-red">New ETD :
|
|
<input type="date" name="">
|
|
</p>
|
|
<p class="caption-subject font-red">New ETA :
|
|
<input type="date" name="">
|
|
</p>
|
|
<br>
|
|
<p>Customs Examination Arrival Port</p>
|
|
<br>
|
|
<p class="caption-subject font-red">Release Date :
|
|
<input type="date" name="">
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-md-offset-4 col-md-9">
|
|
<a href="javascript:;" class="btn btn-outline green button-next"> Submit</a>
|
|
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END CONTAINER -->
|
|
<!-- BEGIN FOOTER -->
|
|
<div class="page-footer">
|
|
<div class="page-footer-inner"> Copyright © 2017 IZYIM.COM
|
|
<div class="scroll-to-top">
|
|
<i class="icon-arrow-up"></i>
|
|
</div>
|
|
</div>
|
|
<!-- END FOOTER -->
|
|
</div>
|
|
</div>
|
|
<!--[if lt IE 9]>
|
|
<script src="../assets/global/plugins/respond.min.js"></script>
|
|
<script src="../assets/global/plugins/excanvas.min.js"></script>
|
|
<script src="../assets/global/plugins/ie8.fix.min.js"></script>
|
|
<![endif]-->
|
|
<!-- BEGIN CORE PLUGINS -->
|
|
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
|
|
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
|
<script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
|
|
<script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
|
|
<script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
|
|
<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
|
|
<!-- END CORE PLUGINS -->
|
|
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
|
|
<script src="../assets/global/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script>
|
|
<script src="../assets/global/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script>
|
|
<script src="../assets/global/plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js" type="text/javascript"></script>
|
|
<!-- BEGIN PAGE LEVEL PLUGINS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" type="text/javascript"></script>
|
|
<script src="../assets/global/scripts/datatable.js" type="text/javascript"></script>
|
|
|
|
<script src="../assets/global/plugins/datatables/datatables.min.js" type="text/javascript"></script>
|
|
<script src="../assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js" type="text/javascript"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
|
|
<!-- END PAGE LEVEL PLUGINS -->
|
|
<!-- BEGIN THEME GLOBAL SCRIPTS -->
|
|
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
|
|
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
|
|
<script src="../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>
|
|
|
|
<script src="../assets/pages/scripts/form-repeater.min.js" type="text/javascript"></script>
|
|
<script src="../assets/pages/scripts/form-repeater.js" type="text/javascript"></script>
|
|
<script src="../assets/pages/scripts/form-editable.js" type="text/javascript"></script>
|
|
<script src="../assets/pages/scripts/form-validation.js" type="text/javascript"></script>
|
|
|
|
|
|
|
|
<!-- END THEME GLOBAL SCRIPTS -->
|
|
<!-- END PAGE LEVEL SCRIPTS -->
|
|
<!-- BEGIN THEME LAYOUT SCRIPTS -->
|
|
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
|
|
<script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
|
|
<script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
|
|
<script src="../assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
|
|
<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
|
|
|
|
<!-- END THEME LAYOUT SCRIPTS -->
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
|
|
var dataSet = [
|
|
["A1245", "01-08-2017", "00034", "CIEF/00034", "ABC SDN BHD", "123 SDN BHD", "<td><center><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Edit </a></li><li><a href='#'> Cancel </a></li></ul></div><br/></center></td>", ""],
|
|
["A1345", "21-08-2017", "00076", "CIEF/00076", "DGT SDN BHD", "456 SDN BHD", "<td><center><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Edit </a></li><li><a href='#'> Cancel </a></li></ul></div><br/></center></td>", ""],
|
|
["A9745", "06-09-2017", "00534", "CIEF/00534", "KLI SDN BHD", "064 SDN BHD", "<td><center><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Edit </a></li><li><a href='#'> Cancel </a></li></ul></div><br/></center></td>", ""],
|
|
["A9075", "22-10-2017", "00084", "CIEF/00084", "OUY SDN BHD", "111 SDN BHD", "<td><center><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Edit </a></li><li><a href='#'> Cancel </a></li></ul></div><br/></center></td>", ""],
|
|
["A6805", "18-11-2017", "00087", "CIEF/00087", "TYP SDN BHD", "563 SDN BHD", "<td><center><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Edit </a></li><li><a href='#'> Cancel </a></li></ul></div><br/></center></td>", ""],
|
|
["A0523", "31-12-2017", "00369", "CIEF/00369", "MUI SDN BHD", "286 SDN BHD", "<td><center><div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle btiv' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a href='#'> View </a></li><li><a href='#'> Edit </a></li><li><a href='#'> Cancel </a></li></ul></div><br/></center></td>", ""],
|
|
];
|
|
|
|
var dataSet2 = [];
|
|
|
|
|
|
var table1 = $('#example').DataTable({
|
|
data: dataSet,
|
|
|
|
|
|
//"bFilter" : false,
|
|
"bInfo": false,
|
|
"bLengthChange": false,
|
|
colReorder: {
|
|
reorderCallback: function() {
|
|
console.log('callback');
|
|
}
|
|
},
|
|
"columnDefs": [{ // set default column settings
|
|
'orderable': false,
|
|
'targets': [0]
|
|
}, {
|
|
"targets": [7],
|
|
"visible": false
|
|
}],
|
|
// scroller extension: http://datatables.net/extensions/scroller/
|
|
<!-- scrollY: 300, -->
|
|
|
|
buttons: [{
|
|
extend: 'print',
|
|
className: 'btn dark btn-outline'
|
|
}, {
|
|
extend: 'copy',
|
|
className: 'btn red btn-outline'
|
|
}, {
|
|
extend: 'pdf',
|
|
className: 'btn green btn-outline'
|
|
}, {
|
|
extend: 'excel',
|
|
className: 'btn yellow btn-outline '
|
|
}, {
|
|
extend: 'csv',
|
|
className: 'btn purple btn-outline '
|
|
}, {
|
|
extend: 'colvis',
|
|
className: 'btn dark btn-outline',
|
|
text: 'Columns'
|
|
}],
|
|
"language": {
|
|
"aria": {
|
|
"sortAscending": ": activate to sort column ascending",
|
|
"sortDescending": ": activate to sort column descending"
|
|
},
|
|
"emptyTable": "No data available in table",
|
|
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
|
|
"infoEmpty": "No entries found",
|
|
"infoFiltered": "(filtered1 from _MAX_ total entries)",
|
|
"lengthMenu": "_MENU_ entries",
|
|
"search": "Search:",
|
|
"zeroRecords": "No matching records found"
|
|
},
|
|
"order": [
|
|
[1, "asc"]
|
|
],
|
|
"pageLength": 20,
|
|
"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6'f><'col-md-6'<'toolbar2'B>>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
|
|
buttons: [{
|
|
text: 'Create New',
|
|
className: 'btn red btn-circle btn-outline qweqwe',
|
|
action: function(e, dt, node, config) {
|
|
$("#qweqwe").trigger('click');
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
fixedHeader: false,
|
|
columns: [{
|
|
title: 'Reference No'
|
|
}, {
|
|
title: 'Date<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_1\')"></span>'
|
|
}, {
|
|
title: 'Order No<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_2\')"></span>'
|
|
}, {
|
|
title: 'Marking<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_3\')"></span>'
|
|
}, {
|
|
title: 'Supplier Order<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_9\')"></span>'
|
|
}, {
|
|
title: 'Exporter Name<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_10\')"></span>'
|
|
}, {
|
|
title: 'Actions'
|
|
}, {
|
|
title: 'Actions'
|
|
}, ],
|
|
|
|
initComplete: function() {
|
|
configFilter(this, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
|
|
}
|
|
});
|
|
|
|
$('#example2').DataTable({
|
|
data: dataSet2,
|
|
"bInfo": false,
|
|
"bLengthChange": false,
|
|
colReorder: {
|
|
reorderCallback: function() {
|
|
console.log('callback');
|
|
}
|
|
},
|
|
"columnDefs": [{ // set default column settings
|
|
'orderable': false,
|
|
'targets': [0],
|
|
}],
|
|
"autoWidth": false,
|
|
buttons: [{
|
|
extend: 'print',
|
|
className: 'btn dark btn-outline'
|
|
}, {
|
|
extend: 'copy',
|
|
className: 'btn red btn-outline'
|
|
}, {
|
|
extend: 'pdf',
|
|
className: 'btn green btn-outline'
|
|
}, {
|
|
extend: 'excel',
|
|
className: 'btn yellow btn-outline '
|
|
}, {
|
|
extend: 'csv',
|
|
className: 'btn purple btn-outline '
|
|
}, {
|
|
extend: 'colvis',
|
|
className: 'btn dark btn-outline',
|
|
text: 'Columns'
|
|
}],
|
|
"language": {
|
|
"aria": {
|
|
"sortAscending": ": activate to sort column ascending",
|
|
"sortDescending": ": activate to sort column descending"
|
|
},
|
|
"emptyTable": "No data available in table",
|
|
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
|
|
"infoEmpty": "No entries found",
|
|
"infoFiltered": "(filtered1 from _MAX_ total entries)",
|
|
"lengthMenu": "_MENU_ entries",
|
|
"search": "Search:",
|
|
"zeroRecords": "No matching records found"
|
|
},
|
|
"pageLength": 20,
|
|
"order": [
|
|
[1, "asc"]
|
|
],
|
|
columns: [
|
|
// { title: "<label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='group-checkable' data-set='#example2 .checkboxes' /><span></span></label>", className: "col_0"},
|
|
// { title: "No", className: "col_1"},
|
|
// { title: "ETA", className: "col_2"},
|
|
// { title: "Shipment <br/> No", className: "col_3"},
|
|
// { title: "Order <br/>No", className: "col_4"},
|
|
// { title: "Cust <br/> Code", className: "col_5"},
|
|
// { title: "Area<br/>State", className: "col_6"},
|
|
// { title: "Details", className: "col_7"},
|
|
|
|
],
|
|
"dom": "<'row' <'col-md-12'T>><'row'<'col-md-6'><'col-md-6'f>r>t<'row'<'col-md-5 col-sm-12'<'toolbar'>><'col-md-7 col-sm-12'p>>",
|
|
initComplete: function() {
|
|
configFilter(this, [2, 3, 4, 5, 6, 7, 8]);
|
|
}
|
|
});
|
|
table1.columns(12).search('Not Completed').draw();
|
|
$('.asdasd').on('switchChange.bootstrapSwitch', function(event, state) {
|
|
if (state == true) {
|
|
table1.columns(12).search('Not Completed').draw();
|
|
} else {
|
|
table1.columns(12).search('Completed').draw();
|
|
|
|
}
|
|
|
|
});
|
|
existingdiv1 = document.getElementById("switch");
|
|
$("div.toolbar2").append(existingdiv1);
|
|
$("div.toolbar").html('Total Delivery : <p id="total" class="form-control-static">0</p>');
|
|
$('#sample_3_tools > li > a.tool-action').on('click', function() {
|
|
var action = $(this).attr('data-action');
|
|
$('#example').DataTable().button(action).trigger();
|
|
});
|
|
|
|
var table = $('#example2');
|
|
|
|
var tableWrapper = jQuery('#example2_wrapper');
|
|
|
|
table.find('.group-checkable').change(function() {
|
|
var set = jQuery(this).attr("data-set");
|
|
var checked = jQuery(this).is(":checked");
|
|
jQuery(set).each(function() {
|
|
if (checked) {
|
|
$(this).prop("checked", true);
|
|
$(this).parents('tr').addClass("active");
|
|
} else {
|
|
$(this).prop("checked", false);
|
|
$(this).parents('tr').removeClass("active");
|
|
}
|
|
});
|
|
var count = $('#example2 .active').length;
|
|
//document.getElementById('total').value = count;
|
|
document.getElementById("total").innerHTML = count;
|
|
});
|
|
|
|
table.on('change', 'tbody tr .checkboxes', function() {
|
|
$(this).parents('tr').toggleClass("active");
|
|
});
|
|
|
|
});
|
|
|
|
|
|
var table = $('#example2');
|
|
|
|
var tableWrapper = jQuery('#example2_wrapper');
|
|
|
|
|
|
table.on('change', 'tbody tr .checkboxes', function() {
|
|
var checked = jQuery(this).is(":checked");
|
|
if (checked) {
|
|
var count = $('#example2 .active').length + 1;
|
|
document.getElementById("total").innerHTML = count;
|
|
} else {
|
|
var count = $('#example2 .active').length - 1;
|
|
document.getElementById("total").innerHTML = count;
|
|
|
|
}
|
|
});
|
|
|
|
//This function initializes the content inside the filter modal
|
|
function configFilter($this, colArray) {
|
|
setTimeout(function() {
|
|
var tableName = $this[0].id;
|
|
var columns = $this.api().columns();
|
|
// $.each(colArray, function (i, arg) {
|
|
// $('#' + tableName + ' th:eq(' + arg + ')').append('<br><img src="http://www.icone-png.com/png/39/38556.png" class="filterIcon" onclick="showFilter(event,\'' + tableName + '_' + arg + '\')" />');
|
|
//});
|
|
|
|
var template = '<div class="modal modalFilter modal-scroll in">' +
|
|
'<div class="modal-dialog modal-full" style="margin-top: 0px;margin-bottom: 0px;">' +
|
|
'<div class="modal-content">' +
|
|
'<div class="modal-body">' + '{0}</div>' +
|
|
'<div class="modal-footer">' +
|
|
'<a onclick="clearFilter(this, {1}, \'{2}\');" class=" btn left waves-effect waves-light" data-dismiss="modal" >Clear</a>' +
|
|
'<a onclick="performFilter(this, {1}, \'{2}\');" class=" btn right waves-effect waves-light">Ok</a>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>';
|
|
$.each(colArray, function(index, value) {
|
|
columns.every(function(i) {
|
|
if (value === i) {
|
|
var column = this,
|
|
content = '<input type="text" class="filterSearchText form-control" onkeyup="filterValues(this)" /> <br/>';
|
|
var columnName = $(this.header()).text().replace(/\s+/g, "_");
|
|
var distinctArray = [];
|
|
column.data().each(function(d, j) {
|
|
if (distinctArray.indexOf(d) == -1) {
|
|
//alert(jQuery.type( d ));
|
|
d = d.replace("<a class='chat_link' href='chat.html'>", '');
|
|
d = d.replace("<span style='margin-bottom: 20px;' class='bb badge badge-danger'>5</span></a>", '');
|
|
|
|
var id = tableName + "_" + columnName + "_" + j; // onchange="formatValues(this,' + value + ');
|
|
content += '<div><input type="checkbox" value="' + d + '" id="' + id + '"/> <label style="font-size:10px" for="' + id + '"> ' + d + '</label></div>';
|
|
distinctArray.push(d);
|
|
}
|
|
});
|
|
var newTemplate = $(template.replace('{0}', content).replace('{1}', value).replace('{1}', value).replace('{2}', tableName).replace('{2}', tableName));
|
|
$('body').append(newTemplate);
|
|
modalFilterArray[tableName + "_" + value] = newTemplate;
|
|
content = '';
|
|
}
|
|
});
|
|
});
|
|
}, 50);
|
|
}
|
|
var modalFilterArray = {};
|
|
//User to show the filter modal
|
|
function showFilter(e, index) {
|
|
$('.modalFilter').hide();
|
|
$(modalFilterArray[index]).css({
|
|
left: 0,
|
|
top: 0
|
|
});
|
|
var th = $(e.target).parent();
|
|
var pos = th.offset();
|
|
console.log(th);
|
|
$(modalFilterArray[index]).width(th.width() * 3.0);
|
|
$(modalFilterArray[index]).css({
|
|
'left': pos.left,
|
|
'top': pos.top
|
|
});
|
|
$(modalFilterArray[index]).show();
|
|
$('#mask').show();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
//This function is to use the searchbox to filter the checkbox
|
|
function filterValues(node) {
|
|
var searchString = $(node).val();
|
|
var rootNode = $(node).parent();
|
|
if (searchString == '') {
|
|
rootNode.find('div').show();
|
|
} else {
|
|
rootNode.find("div").hide();
|
|
rootNode.find("div:contains('" + searchString + "')").show();
|
|
}
|
|
}
|
|
|
|
//Execute the filter on the table for a given column
|
|
function performFilter(node, i, tableId) {
|
|
var rootNode = $(node).parent().parent();
|
|
var searchString = '',
|
|
counter = 0;
|
|
|
|
rootNode.find('input:checkbox').each(function(index, checkbox) {
|
|
if (checkbox.checked) {
|
|
searchString += (counter == 0) ? checkbox.value : '|' + checkbox.value;
|
|
counter++;
|
|
}
|
|
});
|
|
$('#' + tableId).DataTable().column(i).search(
|
|
searchString,
|
|
true, false
|
|
).draw();
|
|
rootNode.hide();
|
|
$('#mask').hide();
|
|
$('.modalFilter').hide();
|
|
}
|
|
|
|
//Removes the filter from the table for a given column
|
|
function clearFilter(node, i, tableId) {
|
|
var rootNode = $(node).parent().parent();
|
|
rootNode.find(".filterSearchText").val('');
|
|
rootNode.find('input:checkbox').each(function(index, checkbox) {
|
|
checkbox.checked = false;
|
|
$(checkbox).parent().show();
|
|
});
|
|
$('#' + tableId).DataTable().column(i).search(
|
|
'',
|
|
true, false
|
|
).draw();
|
|
rootNode.hide();
|
|
$('#mask').hide();
|
|
$('.modalFilter').hide();
|
|
}
|
|
|
|
|
|
var FormWizard = function() {
|
|
|
|
|
|
return {
|
|
//main function to initiate the module
|
|
init: function() {
|
|
if (!jQuery().bootstrapWizard) {
|
|
return;
|
|
}
|
|
|
|
function format(state) {
|
|
if (!state.id) return state.text; // optgroup
|
|
return "<img class='flag' src='../../assets/global/img/flags/" + state.id.toLowerCase() + ".png'/> " + state.text;
|
|
}
|
|
|
|
$("#country_list").select2({
|
|
placeholder: "Select",
|
|
allowClear: true,
|
|
formatResult: format,
|
|
width: 'auto',
|
|
formatSelection: format,
|
|
escapeMarkup: function(m) {
|
|
return m;
|
|
}
|
|
});
|
|
|
|
var form = $('#submit_form');
|
|
var error = $('.alert-danger', form);
|
|
var success = $('.alert-success', form);
|
|
|
|
form.validate({
|
|
doNotHideMessage: true, //this option enables to show the error/success messages on tab switch.
|
|
errorElement: 'span', //default input error message container
|
|
errorClass: 'help-block help-block-error', // default input error message class
|
|
focusInvalid: false, // do not focus the last invalid input
|
|
rules: {
|
|
//account
|
|
username: {
|
|
minlength: 5,
|
|
required: true
|
|
},
|
|
password: {
|
|
minlength: 5,
|
|
required: true
|
|
},
|
|
rpassword: {
|
|
minlength: 5,
|
|
required: true,
|
|
equalTo: "#submit_form_password"
|
|
},
|
|
//profile
|
|
fullname: {
|
|
required: true
|
|
},
|
|
email: {
|
|
required: true,
|
|
email: true
|
|
},
|
|
phone: {
|
|
required: true
|
|
},
|
|
gender: {
|
|
required: true
|
|
},
|
|
address: {
|
|
required: true
|
|
},
|
|
city: {
|
|
required: true
|
|
},
|
|
country: {
|
|
required: true
|
|
},
|
|
//payment
|
|
card_name: {
|
|
required: true
|
|
},
|
|
card_number: {
|
|
minlength: 16,
|
|
maxlength: 16,
|
|
required: true
|
|
},
|
|
card_cvc: {
|
|
digits: true,
|
|
required: true,
|
|
minlength: 3,
|
|
maxlength: 4
|
|
},
|
|
card_expiry_date: {
|
|
required: true
|
|
},
|
|
'payment[]': {
|
|
required: true,
|
|
minlength: 1
|
|
}
|
|
},
|
|
|
|
messages: { // custom messages for radio buttons and checkboxes
|
|
'payment[]': {
|
|
required: "Please select at least one option",
|
|
minlength: jQuery.validator.format("Please select at least one option")
|
|
}
|
|
},
|
|
|
|
errorPlacement: function(error, element) { // render error placement for each input type
|
|
if (element.attr("name") == "gender") { // for uniform radio buttons, insert the after the given container
|
|
error.insertAfter("#form_gender_error");
|
|
} else if (element.attr("name") == "payment[]") { // for uniform checkboxes, insert the after the given container
|
|
error.insertAfter("#form_payment_error");
|
|
} else {
|
|
error.insertAfter(element); // for other inputs, just perform default behavior
|
|
}
|
|
},
|
|
|
|
invalidHandler: function(event, validator) { //display error alert on form submit
|
|
success.hide();
|
|
error.show();
|
|
App.scrollTo(error, -200);
|
|
},
|
|
|
|
highlight: function(element) { // hightlight error inputs
|
|
$(element)
|
|
.closest('.form-group').removeClass('has-success').addClass('has-error'); // set error class to the control group
|
|
},
|
|
|
|
unhighlight: function(element) { // revert the change done by hightlight
|
|
$(element)
|
|
.closest('.form-group').removeClass('has-error'); // set error class to the control group
|
|
},
|
|
|
|
success: function(label) {
|
|
if (label.attr("for") == "gender" || label.attr("for") == "payment[]") { // for checkboxes and radio buttons, no need to show OK icon
|
|
label
|
|
.closest('.form-group').removeClass('has-error').addClass('has-success');
|
|
label.remove(); // remove error label here
|
|
} else { // display success icon for other inputs
|
|
label
|
|
.addClass('valid') // mark the current input as valid and display OK icon
|
|
.closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group
|
|
}
|
|
},
|
|
|
|
submitHandler: function(form) {
|
|
success.show();
|
|
error.hide();
|
|
form[0].submit();
|
|
//add here some ajax code to submit your form or just call form.submit() if you want to submit the form without ajax
|
|
}
|
|
|
|
});
|
|
|
|
var displayConfirm = function() {
|
|
$('#tab4 .form-control-static', form).each(function() {
|
|
var input = $('[name="' + $(this).attr("data-display") + '"]', form);
|
|
if (input.is(":radio")) {
|
|
input = $('[name="' + $(this).attr("data-display") + '"]:checked', form);
|
|
}
|
|
if (input.is(":text") || input.is("textarea")) {
|
|
$(this).html(input.val());
|
|
} else if (input.is("select")) {
|
|
$(this).html(input.find('option:selected').text());
|
|
} else if (input.is(":radio") && input.is(":checked")) {
|
|
$(this).html(input.attr("data-title"));
|
|
} else if ($(this).attr("data-display") == 'payment[]') {
|
|
var payment = [];
|
|
$('[name="payment[]"]:checked', form).each(function() {
|
|
payment.push($(this).attr('data-title'));
|
|
});
|
|
$(this).html(payment.join("<br>"));
|
|
}
|
|
});
|
|
}
|
|
|
|
var handleTitle = function(tab, navigation, index) {
|
|
var total = navigation.find('li').length;
|
|
var current = index + 1;
|
|
// set wizard title
|
|
$('.step-title', $('#form_wizard_1')).text('Step ' + (index + 1) + ' of ' + total);
|
|
// set done steps
|
|
jQuery('li', $('#form_wizard_1')).removeClass("done");
|
|
var li_list = navigation.find('li');
|
|
for (var i = 0; i < index; i++) {
|
|
jQuery(li_list[i]).addClass("done");
|
|
}
|
|
|
|
if (current == 1) {
|
|
$('#form_wizard_1').find('.button-previous').hide();
|
|
} else {
|
|
$('#form_wizard_1').find('.button-previous').show();
|
|
}
|
|
|
|
if (current >= total) {
|
|
$('#form_wizard_1').find('.button-next').hide();
|
|
$('#form_wizard_1').find('.button-submit').show();
|
|
displayConfirm();
|
|
} else {
|
|
$('#form_wizard_1').find('.button-next').show();
|
|
$('#form_wizard_1').find('.button-submit').hide();
|
|
}
|
|
App.scrollTo($('.page-title'));
|
|
}
|
|
|
|
// default form wizard
|
|
$('#form_wizard_1').bootstrapWizard({
|
|
'nextSelector': '.button-next',
|
|
'previousSelector': '.button-previous',
|
|
onTabClick: function(tab, navigation, index, clickedIndex) {
|
|
return false;
|
|
|
|
success.hide();
|
|
error.hide();
|
|
if (form.valid() == false) {
|
|
return false;
|
|
}
|
|
|
|
handleTitle(tab, navigation, clickedIndex);
|
|
},
|
|
onNext: function(tab, navigation, index) {
|
|
success.hide();
|
|
error.hide();
|
|
|
|
if (form.valid() == false) {
|
|
return false;
|
|
}
|
|
|
|
handleTitle(tab, navigation, index);
|
|
},
|
|
onPrevious: function(tab, navigation, index) {
|
|
success.hide();
|
|
error.hide();
|
|
|
|
handleTitle(tab, navigation, index);
|
|
},
|
|
onTabShow: function(tab, navigation, index) {
|
|
var total = navigation.find('li').length;
|
|
var current = index + 1;
|
|
var $percent = (current / total) * 100;
|
|
$('#form_wizard_1').find('.progress-bar').css({
|
|
width: $percent + '%'
|
|
});
|
|
}
|
|
});
|
|
|
|
$('#form_wizard_1').find('.button-previous').hide();
|
|
$('#form_wizard_1 .button-submit').click(function() {
|
|
location.reload();
|
|
}).hide();
|
|
|
|
//apply validation on select2 dropdown value change, this only needed for chosen dropdown integration.
|
|
$('#country_list', form).change(function() {
|
|
form.validate().element($(this)); //revalidate the chosen dropdown value and show error or success message for the input
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
}();
|
|
|
|
jQuery(document).ready(function() {
|
|
FormWizard.init();
|
|
$.fn.select2.defaults.set("theme", "bootstrap");
|
|
|
|
var placeholder = "Please select order no";
|
|
|
|
$(".select2, .select2-multiple").select2({
|
|
placeholder: placeholder,
|
|
width: null
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
var counter = 1;
|
|
var limit = 3;
|
|
|
|
function addInput(divName) {
|
|
if (counter == limit) {
|
|
alert("You have reached the limit of adding " + counter + " inputs");
|
|
} else {
|
|
var newdiv = document.createElement('div');
|
|
newdiv.innerHTML = "Remark " + (counter + 1) + " <br><input type='text' style='height: 100px; width: 340px' name='myInputs[]'>";
|
|
document.getElementById(divName).appendChild(newdiv);
|
|
counter++;
|
|
}
|
|
}
|
|
|
|
function addNewRow() {
|
|
|
|
var last_count = $('#sample_editable_1').find('tbody tr:last td:first').text();
|
|
|
|
var next_count = parseInt(last_count) + 1;
|
|
|
|
var lengths = $("#sample_editable_1 tbody tr:nth-child(2) td").length;
|
|
|
|
$('#sample_editable_1 > tbody:last-child').append('<tr><td>' + next_count + '</td><td><input style="width: 34px;" type="text"/></td><td><input style="width: 75px;" type="text"/></td><td><input style="width: 34px;" type="text"/></td><td><input style="width: 34px;" type="text"/></td><td><input style="width: 75px;" type="text"/></td><td><input style="width: 34px;" type="text"/></td><td></td><td><label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="checkboxes" value="1"><span></span></label></td><td><div><span class="fileinput-new"></span><span class="fileinput-exists"></span><input type="file" name="..."></div></td>');
|
|
|
|
var rowCount = $('#sample_editable_1 tbody tr').length;
|
|
$('#total').html(rowCount);
|
|
}
|
|
|
|
function addNewColumn() {
|
|
$('#sample_editable_1 thead').find('tr').each(function() {
|
|
$(this).find('th').eq(7).after('<th>Remark</th>');
|
|
});
|
|
$('#sample_editable_1 tbody').find('tr').each(function() {
|
|
$(this).find('td').eq(7).after('<td><textarea style="width: 34px;"></textarea></td>');
|
|
});
|
|
$('#sample_editable_1 tfoot').find('tr').each(function() {
|
|
$(this).find('td').eq(7).after('<td><textarea style="width: 34px;"></textarea></td>');
|
|
});
|
|
|
|
}
|
|
</script>
|
|
<script type="text/javascript">
|
|
var howmanytoadd = 2;
|
|
var rows;
|
|
|
|
function calc() {
|
|
var tot = 0;
|
|
for (var i = 0; i < rows.length; i++) {
|
|
var linetot = 0;
|
|
rows[i].getElementsByTagName('input')[howmanytoadd].value = linetot;
|
|
tot += linetot;
|
|
}
|
|
document.getElementById('total').value = tot
|
|
}
|
|
</script>
|
|
<script type="text/javascript">
|
|
function findTotal() {
|
|
var arr = document.getElementsByName('qty');
|
|
var tot = 0;
|
|
for (var i = 0; i < arr.length; i++) {
|
|
if (parseInt(arr[i].value))
|
|
tot += parseInt(arr[i].value);
|
|
}
|
|
document.getElementById('total1').value = tot;
|
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |