mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/IZYIM-Prototype.git
synced 2026-08-19 04:33:55 +00:00
Jackk Goh
1335 lines
75 KiB
HTML
1335 lines
75 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.7
|
|
Version: 4.7.5
|
|
Author: KeenThemes
|
|
Website: http://www.keenthemes.com/
|
|
Contact: support@keenthemes.com
|
|
Follow: www.twitter.com/keenthemes
|
|
Dribbble: www.dribbble.com/keenthemes
|
|
Like: www.facebook.com/keenthemes
|
|
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
|
|
Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
|
|
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
|
|
-->
|
|
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
|
|
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
|
|
<!--[if !IE]><!-->
|
|
<html lang="en">
|
|
<!--<![endif]-->
|
|
<!-- BEGIN HEAD -->
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>IZYIM | Delivery Arrangement</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 -->
|
|
<style>
|
|
div.dt-button-collection {
|
|
margin-top: 70px;
|
|
}
|
|
.table td,
|
|
.table th {
|
|
font-size: 9px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
padding-left: 5px;
|
|
padding-right: 10px;
|
|
}
|
|
.dropdown-menu {
|
|
min-width: 10px;
|
|
}
|
|
.dropdown-menu>li>a {
|
|
padding-left: 4px;
|
|
padding-right: 5px;
|
|
font-size: 10px;
|
|
}
|
|
.dataTables_wrapper .dataTables_filter {
|
|
float: left;
|
|
text-align: right;
|
|
}
|
|
.table thead tr th {
|
|
font-size: 9px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
padding-left: 5px;
|
|
padding-right: 10px;
|
|
}
|
|
.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">
|
|
<!-- BEGIN SIDEBAR MENU -->
|
|
<!-- DOC: Apply "page-sidebar-menu-light" class right after "page-sidebar-menu" to enable light sidebar menu style(without borders) -->
|
|
<!-- DOC: Apply "page-sidebar-menu-hover-submenu" class right after "page-sidebar-menu" to enable hoverable(hover vs accordion) sub menu mode -->
|
|
<!-- DOC: Apply "page-sidebar-menu-closed" class right after "page-sidebar-menu" to collapse("page-sidebar-closed" class must be applied to the body element) the sidebar sub menu mode -->
|
|
<!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
|
|
<!-- DOC: Set data-keep-expand="true" to keep the submenues expanded -->
|
|
<!-- DOC: Set data-auto-speed="200" to adjust the sub menu slide up/down speed -->
|
|
<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 active open">
|
|
<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 active open">
|
|
<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">
|
|
<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">Delivery Arrangement</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>Delivery Arrangement Status</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"> Arrange Delivery
|
|
</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">
|
|
|
|
|
|
<table id="example" class="table table-bordered order-column"></table>
|
|
|
|
</div>
|
|
<h5>Total item:10</h5>
|
|
<h5>Total CBM: 40 CBM</h5>
|
|
<h5>Total Weight:100 KG</h5>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!-- End: life time stats -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>Delivery Arrangement
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label>Delivery Type</label>
|
|
<select id="type" class="form-control" onchange="show_hide(this);">
|
|
<option value=""> Please Select</option>
|
|
<option value="1"> Inhouse Services</option>
|
|
<option value="2"> Courier Service</option>
|
|
<option value="3"> Outsource Service</option>
|
|
<option value="4"> Self Collect</option>
|
|
</select>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="own_transport" style="display:none">
|
|
<h5>Driver Details</h5>
|
|
<hr>
|
|
<div class="form">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Delivery Date</label>
|
|
<input class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Driver Name</label>
|
|
<input class="form-control">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Driver Contact</label>
|
|
<input class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Vehicle No</label>
|
|
<input class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="courier" style="display:none">
|
|
<h5>Courier Details</h5>
|
|
<hr>
|
|
<div class="form">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Courier Service Name</label>
|
|
<input class="form-control">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tracking Number</label>
|
|
<input class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="self_collect" style="display:none">
|
|
<h5>Self Collect Details</h5>
|
|
<hr>
|
|
<div class="form">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Warehouse</label>
|
|
<select id="warehouse" class="form-control">
|
|
<option> Please Select / Create New</option>
|
|
<option value="WHA">Warehouse A</option>
|
|
<option value="WHB">Warehouse B</option>
|
|
<option value="WHC">Warehouse C</option>
|
|
<option value="WHD">Warehouse D</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Contact Person Name</label>
|
|
<input id="contact" class="form-control" value="" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Contact Person No.</label>
|
|
<input id="contactno" class="form-control" value="" />
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Address</label>
|
|
<textarea id="address" class="form-control"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>City</label>
|
|
<input id="city" class="form-control" value="" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label>State</label>
|
|
<input id="state" class="form-control" value="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Order Details</h5>
|
|
<hr>
|
|
<div class="table-container">
|
|
|
|
<div id="mask"></div>
|
|
<table id="example2" class="table table-striped table-bordered table-hover"></table>
|
|
<!--<input name="total" id="total" type="text" value=0 />-->
|
|
<!--<p id="total" class="form-control-static"> </p>-->
|
|
|
|
<h5>Total CBM: </h5>
|
|
<h5>Total Carton: </h5>
|
|
<h5>Total Weight: </h5>
|
|
<br>
|
|
<div class="form">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<h5>Notification</h5>
|
|
<hr>
|
|
<div class="form-group">
|
|
<div class="row">
|
|
<div class="col-md-10">
|
|
<textarea id="message" class="form-control" rows="10">
|
|
Delivery Request
|
|
|
|
Order No: #[ORDER NO]
|
|
From Supplier: #[SUPPLIER NAME]
|
|
Total Qty: #[TOTAL] #[UOM]
|
|
Total CBM: #[TOTAL CBM]
|
|
EDD: #[DATE]
|
|
Delivery Date: [DATE]
|
|
Driver Name: [NAME]
|
|
Vehicle No: [CAR PLATE NO.]
|
|
Driver Contact No: [CONTACT NO.]
|
|
|
|
Pls confirm the delivery date to confirm your warehouse is available.
|
|
* Pls confirm your warehouse manpower is ready and all equipment are ready as well.
|
|
Exp: Forklift, Troly & etc.
|
|
|
|
Thank You Very Much.
|
|
|
|
[Forwarder Company Name]
|
|
</textarea>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<a href="chat.html" class="btn green" onclick="confirm('Your delivery arrangement are send via Messenger and SMS to Importer Admin account. Please ask your importer to confirm your arrangement.')"><i class="fa fa-comments-o"></i> Send</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn green">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade modal-scroll bs-modal-lg in" id="boxes" 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>Delivery Details
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="col-md-12">
|
|
<div class="form-group">
|
|
<label>Delivery Type</label>
|
|
<p class="form-control-static">: Inhouse Services</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="own_transport">
|
|
<h5>Driver Details</h5>
|
|
<hr>
|
|
<div class="form">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Delivery Date</label>
|
|
<p class="form-control-static">: 03-07-2017</p>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Driver Name</label>
|
|
<p class="form-control-static">: Samad</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="form-group">
|
|
<label>Driver Contact</label>
|
|
<p class="form-control-static">: 012345689</p>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Vehicle No</label>
|
|
<p class="form-control-static">: JNY1122</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Order Details</h5>
|
|
<hr>
|
|
<div class="table-container">
|
|
|
|
<div id="mask"></div>
|
|
<table id="example3" class="table table-striped table-bordered table-hover">
|
|
<tbody>
|
|
<tr role="row" class="odd">
|
|
<td class="col_1 sorting_1">1</td>
|
|
<td class=" col_2">03-08-2017</td>
|
|
<td class=" col_3">CTN56</td>
|
|
<td class=" col_4">00006</td>
|
|
<td class=" col_5">CIEF/0008</td>
|
|
<td class=" col_6">Bangi
|
|
<br>Selangor</td>
|
|
<td class=" col_7">Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7</td>
|
|
<td class=" col_8">CBM :
|
|
<br>Weight:
|
|
<br>Qty of Carton:</td>
|
|
</tr>
|
|
<tr role="row" class="even">
|
|
<td class="col_1 sorting_1">2</td>
|
|
<td class=" col_2">03-08-2017</td>
|
|
<td class=" col_3">CTN55</td>
|
|
<td class=" col_4">00005</td>
|
|
<td class=" col_5">CIEF/0007</td>
|
|
<td class=" col_6">Bangi
|
|
<br>Selangor</td>
|
|
<td class=" col_7">Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7</td>
|
|
<td class=" col_8">CBM :
|
|
<br>Weight:
|
|
<br>Qty of Carton:</td>
|
|
</tr>
|
|
<tr role="row" class="odd">
|
|
<td class="col_1 sorting_1">3</td>
|
|
<td class=" col_2">03-08-2017</td>
|
|
<td class=" col_3">CTN54</td>
|
|
<td class=" col_4">00004</td>
|
|
<td class=" col_5">CIEF/0006</td>
|
|
<td class=" col_6">Bangi
|
|
<br>Selangor</td>
|
|
<td class=" col_7">Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7</td>
|
|
<td class=" col_8">CBM :
|
|
<br>Weight:
|
|
<br>Qty of Carton:</td>
|
|
</tr>
|
|
<tr role="row" class="even">
|
|
<td class="col_1 sorting_1">4</td>
|
|
<td class=" col_2">03-08-2017</td>
|
|
<td class=" col_3">CTN53</td>
|
|
<td class=" col_4">00003</td>
|
|
<td class=" col_5">CIEF/0005</td>
|
|
<td class=" col_6">Bangi
|
|
<br>Selangor</td>
|
|
<td class=" col_7">Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7</td>
|
|
<td class=" col_8">CBM :
|
|
<br>Weight:
|
|
<br>Qty of Carton:</td>
|
|
</tr>
|
|
<tr role="row" class="odd">
|
|
<td class="col_1 sorting_1">5</td>
|
|
<td class=" col_2">03-08-2017</td>
|
|
<td class=" col_3">CTN52</td>
|
|
<td class=" col_4">00002</td>
|
|
<td class=" col_5">CIEF/0004</td>
|
|
<td class=" col_6">Bangi
|
|
<br>Selangor</td>
|
|
<td class=" col_7">Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7</td>
|
|
<td class=" col_8">CBM :
|
|
<br>Weight:
|
|
<br>Qty of Carton:</td>
|
|
</tr>
|
|
<tr role="row" class="even">
|
|
<td class="col_1 sorting_1">6</td>
|
|
<td class=" col_2">03-08-2017</td>
|
|
<td class=" col_3">CTN51</td>
|
|
<td class=" col_4">00001</td>
|
|
<td class=" col_5">CIEF/0003</td>
|
|
<td class=" col_6">Bangi
|
|
<br>Selangor</td>
|
|
<td class=" col_7">Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7</td>
|
|
<td class=" col_8">CBM :
|
|
<br>Weight:
|
|
<br>Qty of Carton:</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h5>Total CBM: 24.78 </h5>
|
|
<h5>Total Carton: 10 </h5>
|
|
<h5>Total Weight: 250kg </h5>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</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 -->
|
|
<!-- 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>
|
|
<!-- 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>
|
|
<!-- END THEME LAYOUT SCRIPTS -->
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
|
|
var dataSet = [
|
|
["1", "03-07-2017", "Vehicle No:JKB1111<br/>Contact Person:Samad<br/>Contact No: 012345689", "<a class='chat_link' href='chat.html'> 00006 <span style='margin-bottom: 20px;' class='bb badge badge-danger'>5</span></a>", "CIEF/0008", "CTN56", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7<br> Contact No: 0123456789", "Bangi<br>Selangor", "123456", "10", "", "Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "<div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li></ul></div>"],
|
|
["2", "03-07-2017", "Vehicle No:JKB1111<br/>Contact Person:Samad<br/>Contact No: 012345689", "<a class='chat_link' href='chat.html'> 00005 </a>", "CIEF/0007", "CTN56", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7<br> Contact No: 0123456789", "Bangi<br>Selangor", "123456", "14", "", "Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "<div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li></ul></div>"],
|
|
["3", "03-07-2017", "Vehicle No:JKB1111<br/>Contact Person:Samad<br/>Contact No: 012345689", "<a class='chat_link' href='chat.html'> 00004 </a>", "CIEF/0006", "CTN56", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7<br> Contact No: 0123456789", "Bangi<br>Selangor", "123456", "23", "", "Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "<div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li></ul></div>"],
|
|
["4", "03-07-2017", "Vehicle No:JNY1122<br/>Contact Person:Handsome<br/>Contact No: 012345689", "<a class='chat_link' href='chat.html'> 00003 <span style='margin-bottom: 20px;' class='bb badge badge-danger'>5</span></a>", "CIEF/0005", "CTN56", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7<br> Contact No: 0123456789", "Bangi<br>Selangor", "123456", "12", "", "Delivery Request <span style='color:#36c6d3;font-weight: 700;'>Accepted</span>", "<div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li><li><a href='#reason' data-toggle='modal'>Fail to Deliver</a></li></ul></div>"],
|
|
["5", "03-07-2017", "Vehicle No:JNY1122<br/>Contact Person:Hantam<br/>Contact No: 012345689", "<a class='chat_link' href='chat.html'> 00002 <span style='margin-bottom: 20px;' class='bb badge badge-danger'>5</span></a>", "CIEF/0005", "CTN56", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7<br> Contact No: 0123456789", "Bangi<br>Selangor", "123456", "23", "", "Delivery Request <span style='color:#36c6d3;font-weight: 700;'>Accepted</span>", "<div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li><li><a href='#reason' data-toggle='modal'>Fail to Deliver</a></li></ul></div>"],
|
|
["6", "03-07-2017", "Vehicle No:JKB1111<br/>Contact Person:Samad<br/>Contact No: 012345689", "<a class='chat_link' href='chat.html'> 00001 <span style='margin-bottom: 20px;' class='bb badge badge-danger'>5</span></a>", "CIEF/0003", "CTN56", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7<br> Contact No: 0123456789", "Bangi<br>Selangor", "123456", "21", "", "Delivery Request <span style='color:#36c6d3;font-weight: 700;'>Accepted</span>", "<div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li><li><a href='#reason' data-toggle='modal'>Fail to Deliver</a></li></ul></div>"],
|
|
["7", "03-07-2017", "Vehicle No:JKB1111<br/>Contact Person:Samad<br/>Contact No: 012345689", "<a class='chat_link' href='chat.html'> 00001 <span style='margin-bottom: 20px;' class='bb badge badge-danger'>5</span></a>", "CIEF/0003", "CTN56", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7<br> Contact No: 0123456789", "Bangi<br>Selangor", "123456", "16", "", "Delivery Request <span style='color:#36c6d3;font-weight: 700;'>Completed</span>", "<div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li></ul></div>"],
|
|
["8", "03-07-2017", "Vehicle No:JKB1111<br/>Contact Person:Samad<br/>Contact No: 012345689", "<a class='chat_link' href='chat.html'> 00001 <span style='margin-bottom: 20px;' class='bb badge badge-danger'>5</span></a>", "CIEF/0003", "CTN56", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7<br> Contact No: 0123456789", "Bangi<br>Selangor", "123456", "11", "", "Delivery Request <span style='color:#36c6d3;font-weight: 700;'>Completed</span>", "<div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li></ul></div>"],
|
|
["8", "03-07-2017", "Vehicle No:JKB1111<br/>Contact Person:Samad<br/>Contact No: 012345689", "<a class='chat_link' href='chat.html'> 00000 <span style='margin-bottom: 20px;' class='bb badge badge-danger'>5</span></a>", "CIEF/0003", "CTN56", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7<br> Contact No: 0123456789", "Bangi<br>Selangor", "123456", "11", "", "Order <span class='font-green-jungle' style='font-weight: 700;'>Closed</span>", "<div class='btn-group'><button class='btn green btn-xs btn-circle btn-outline dropdown-toggle' data-toggle='dropdown'>Actions<i class='fa fa-angle-down'></i></button><ul class='dropdown-menu'><li><a data-toggle='modal' href='#boxes'>View </a></li></ul></div>"]
|
|
];
|
|
|
|
var dataSet2 = [
|
|
["<label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='checkboxes' value='1' /><span></span></label>", "1", "03-08-2017", "CTN56", "00006", "CIEF/0008", "Bangi<br>Selangor", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7", "CBM :<br/>Weight:<br/>Qty of Carton:"],
|
|
["<label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='checkboxes' value='1' /><span></span></label>", "2", "03-08-2017", "CTN55", "00005", "CIEF/0007", "Bangi<br>Selangor", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7", "CBM :<br/>Weight:<br/>Qty of Carton:"],
|
|
["<label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='checkboxes' value='1' /><span></span></label>", "3", "03-08-2017", "CTN54", "00004", "CIEF/0006", "Bangi<br>Selangor", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7", "CBM :<br/>Weight:<br/>Qty of Carton:"],
|
|
["<label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='checkboxes' value='1' /><span></span></label>", "4", "03-08-2017", "CTN53", "00003", "CIEF/0005", "Bangi<br>Selangor", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7", "CBM :<br/>Weight:<br/>Qty of Carton:"],
|
|
["<label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='checkboxes' value='1' /><span></span></label>", "5", "03-08-2017", "CTN52", "00002", "CIEF/0004", "Bangi<br>Selangor", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7", "CBM :<br/>Weight:<br/>Qty of Carton:"],
|
|
["<label class='mt-checkbox mt-checkbox-single mt-checkbox-outline'><input type='checkbox' class='checkboxes' value='1' /><span></span></label>", "6", "03-08-2017", "CTN51", "00001", "CIEF/0003", "Bangi<br>Selangor", "Address: 7-7-17, Apartment Intana Ria 2, Jalan 7/4, Seksyen 7", "CBM :<br/>Weight:<br/>Qty of Carton:"]
|
|
];
|
|
|
|
|
|
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]
|
|
}],
|
|
// 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: 'Delivery Arrangement',
|
|
className: 'btn red btn-circle btn-outline qweqwe',
|
|
action: function(e, dt, node, config) {
|
|
$("#qweqwe").trigger('click');
|
|
}
|
|
|
|
}
|
|
|
|
],
|
|
fixedHeader: false,
|
|
columns: [{
|
|
title: "No"
|
|
}, {
|
|
title: 'Delivery<br>Date <br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_1\')"></span>'
|
|
}, {
|
|
title: 'Driver<br>Details<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_2\')"></span>'
|
|
}, {
|
|
title: 'Order No<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_3\')"></span>'
|
|
}, {
|
|
title: 'Customer<br>Code<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_4\')"></span>'
|
|
}, {
|
|
title: 'Shipment<br>No<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_5\')"></span>'
|
|
}, {
|
|
title: 'Customer<br>Details<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_6\')"></span>'
|
|
}, {
|
|
title: 'Area<br>State<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_7\')"></span>'
|
|
}, {
|
|
title: 'Container No<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_8\')"></span>'
|
|
}, {
|
|
title: 'Qty Carton<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_9\')"></span>'
|
|
}, {
|
|
title: 'Remark<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_10\')"></span>'
|
|
}, {
|
|
title: 'Status<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_11\')"></span>'
|
|
}, {
|
|
title: 'Actions'
|
|
}],
|
|
|
|
initComplete: function() {
|
|
configFilter(this, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
|
|
},
|
|
"sScrollX": "100%",
|
|
"bScrollCollapse": true
|
|
});
|
|
|
|
$('#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: "Address",
|
|
className: "col_7"
|
|
}, {
|
|
title: "Details",
|
|
className: "col_8"
|
|
},
|
|
|
|
],
|
|
"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, 9]);
|
|
}
|
|
});
|
|
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);
|
|
}
|
|
$('#warehouse').change(function() {
|
|
var warehouse = $('#warehouse').val();
|
|
if (warehouse == "WHA") {
|
|
var new_warehouse = "Block 3730, Persiaran Apec, 63000 Cyberjaya, Selangor, Malaysia";
|
|
var new_city = "Cyberjaya";
|
|
var new_state = "Selangor";
|
|
var new_contact = "Aaron Aziz";
|
|
var new_contactno = "0123456789";
|
|
} else if (warehouse == "WHB") {
|
|
var new_warehouse = "70 McCullough Dr, New Castle, 19720 Delaware, United State of America";
|
|
var new_city = "New Castle";
|
|
var new_state = "Delaware";
|
|
var new_contact = "Aliff Aziz";
|
|
var new_contactno = "0123456789";
|
|
} else if (warehouse == "WHC") {
|
|
var new_warehouse = "96-100 Beaconsfield St., Silverwater, Sydney, 2128 New South Wales, Australia";
|
|
var new_city = "Sydney";
|
|
var new_state = "New South Wales";
|
|
var new_contact = "Selkom";
|
|
var new_contactno = "0123456789";
|
|
} else if (warehouse == "WHD") {
|
|
var new_warehouse = "Room I, 9F No.288 South ZhongShan Rd, 210005 Nanjing, JiangSu, China";
|
|
var new_city = "Nanjing";
|
|
var new_state = "JiangSu";
|
|
var new_contact = "Ahmad Albab";
|
|
var new_contactno = "0123456789";
|
|
}
|
|
$("textarea#address").val(new_warehouse);
|
|
$("input#state").val(new_state);
|
|
$("input#city").val(new_city);
|
|
$("input#contact").val(new_contact);
|
|
$("input#contactno").val(new_contactno);
|
|
|
|
var addr = $("textarea#address").val();
|
|
var ctc = $("input#contact").val();
|
|
var ctcno = $("input#contactno").val();
|
|
var new_message = "CIEF Delivery Message \n\n Order no : <<order_no>> \n Self Collect Status : Ready \n Warehouse Address: " + addr + "\n Contact Person : " + ctc + " (" + ctcno + ") \n\n * Kindly proceed to the messenger to confirm";
|
|
$("textarea#message").val(new_message);
|
|
|
|
});
|
|
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();
|
|
}
|
|
|
|
function show_hide(val) {
|
|
var drop_val = val.value;
|
|
if (drop_val == 1 || drop_val == 3) {
|
|
document.getElementById("own_transport").style.display = "";
|
|
document.getElementById("courier").style.display = "none";
|
|
document.getElementById("self_collect").style.display = "none";
|
|
} else if (drop_val == 2) {
|
|
document.getElementById("courier").style.display = "";
|
|
document.getElementById("own_transport").style.display = "none";
|
|
document.getElementById("self_collect").style.display = "none";
|
|
} else if (drop_val == 4) {
|
|
document.getElementById("self_collect").style.display = "";
|
|
document.getElementById("courier").style.display = "none";
|
|
document.getElementById("own_transport").style.display = "none";
|
|
var addr = $("textarea#address").val();
|
|
var ctc = $("input#contact").val();
|
|
var ctcno = $("input#contactno").val();
|
|
var new_message = "CIEF Delivery Message \n\n Order no : <<order_no>> \n Self Collect Status : Ready \n Warehouse Address: " + addr + "\n Contact Person : " + ctc + " (" + ctcno + ") \n\n * Kindly proceed to the messenger to confirm";
|
|
$("textarea#message").val(new_message);
|
|
} else {
|
|
document.getElementById("self_collect").style.display = "none";
|
|
document.getElementById("courier").style.display = "none";
|
|
document.getElementById("own_transport").style.display = "none";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |