mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/IZYIM-Prototype.git
synced 2026-08-21 13:43:55 +00:00
shipment arrangemnt
This commit is contained in:
GEGULA�
@@ -220,13 +220,7 @@ License: You must have a valid license purchased only from themeforest(the above
|
||||
<!-- 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 -->
|
||||
@@ -431,64 +425,344 @@ License: You must have a valid license purchased only from themeforest(the above
|
||||
<i class="fa fa-gift" style=" float: left;margin-top: 4px;display: inline-block;font-size: 13px;margin-right: 5px;"></i>Shipment Arrangement
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div>
|
||||
<h5>Shipment Details</h5>
|
||||
<hr>
|
||||
<div class="form">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label>Loading Date</label>
|
||||
<input class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Container No</label>
|
||||
<input class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Shipment No</label>
|
||||
<input class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label>ETD</label>
|
||||
<input class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>ETA</label>
|
||||
<input class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="form-group">
|
||||
<label>Contact Person</label>
|
||||
<input class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Contact Person No</label>
|
||||
<input class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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> Shipment<br>Arrangemnent </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> Shipment<br>Status </span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#tab3" data-toggle="tab" class="step active">
|
||||
<span class="number"> 3 </span>
|
||||
<span class="desc">
|
||||
<i class="fa fa-check"></i> Customs <br>Interuption </span>
|
||||
</a>
|
||||
</li><!--
|
||||
<li>
|
||||
<a href="#tab4" data-toggle="tab" class="step">
|
||||
<span class="number"> 4 </span>
|
||||
<span class="desc">
|
||||
<i class="fa fa-check"></i> Confirm </span>
|
||||
</a>
|
||||
</li> -->
|
||||
</ul>
|
||||
<!-- <div id="bar" class="progress progress-striped" role="progressbar"> -->
|
||||
<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">
|
||||
<h3 class="block">Shipment arrangement details</h3>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Loading Date
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" name="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">container No
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" name="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Shipment No
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" name="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">ETA
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" name="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">ETD
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" name="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Loading Venue
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
<input type="text" class="form-control" name="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Remark
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
<textarea class="form-control" rows="2"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-3 col-md-9">
|
||||
<a href="javascript:;" class="btn default button-previous">
|
||||
<i class="fa fa-angle-left"></i> Edit </a>
|
||||
<a href="javascript:;" class="btn btn-outline green button-next"> Save
|
||||
<i class="fa fa-angle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab2">
|
||||
<h3 class="block">Shipment arrangement status</h3>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Loading Date
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
02-08-2017
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Container No
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
123456
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Shipment No
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
123456
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">ETA
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
03-08-2017
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">ETD
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
03-08-2017
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Loading Venue
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
Port Klang
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Remark
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
xxxx
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-13">
|
||||
<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">List Shipment</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>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-3 col-md-9">
|
||||
<a href="javascript:;" class="btn btn-outline green button-next"> Next
|
||||
<i class="fa fa-angle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="tab3">
|
||||
<h3 class="block">Your details</h3>
|
||||
<div class="form-group">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Loading Date
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
02-08-2017
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Container No
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
123456
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Shipment No
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
123456
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">ETA
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
03-08-2017
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">ETD
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
03-08-2017
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Loading Venue
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
Port Klang
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-md-3">Remark
|
||||
</label>
|
||||
<div class="col-md-4">
|
||||
xxxx
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-13">
|
||||
<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">List Shipment</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><button type="button">Customs</button></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>04-08-2017</td>
|
||||
<td>014567</td>
|
||||
<th><button type="button">Customs</button></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>05-08-2017</td>
|
||||
<td>014567</td>
|
||||
<th><button type="button">Customs</button></th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<div class="row">
|
||||
<div class="col-md-offset-3 col-md-9">
|
||||
<a href="javascript:;" class="btn default button-previous">
|
||||
<i class="fa fa-angle-left"></i> Edit </a>
|
||||
<a href="javascript:;" class="btn btn-outline green button-next"> Save
|
||||
<i class="fa fa-angle-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h5>Order Details</h5>
|
||||
<!-- <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>-->
|
||||
</div>
|
||||
<br>
|
||||
<div class="form">
|
||||
<!--<p id="total" class="form-control-static"> </p>-->
|
||||
<!-- <div class="form">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h5>Message</h5>
|
||||
@@ -497,15 +771,15 @@ License: You must have a valid license purchased only from themeforest(the above
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<textarea id="message" class="form-control" rows="10">
|
||||
CIEF Shipment Message
|
||||
CIEF Shipment Message
|
||||
|
||||
Order No: <<order_no>>
|
||||
ETD: 03-07-2017
|
||||
ETA: 05-07-2017
|
||||
Shipment No: 013-3456789
|
||||
Contact Person: Ciku
|
||||
Contact Person No: 0123456789
|
||||
</textarea>
|
||||
Order No: <<order_no>>
|
||||
ETD: 03-07-2017
|
||||
ETA: 05-07-2017
|
||||
Shipment No: 013-3456789
|
||||
Contact Person: Ciku
|
||||
Contact Person No: 0123456789
|
||||
</textarea>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<a href="chat.html" class="btn green" onclick="confirm('Your Shipment 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>
|
||||
@@ -514,7 +788,7 @@ Contact Person No: 0123456789
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -522,6 +796,8 @@ Contact Person No: 0123456789
|
||||
</div>
|
||||
<!-- /.modal-dialog -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="modal fade in" id="reason" tabindex="-1" role="basic" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
@@ -557,10 +833,10 @@ Contact Person No: 0123456789
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1177,23 +1453,22 @@ Contact Person No: 0123456789
|
||||
|
||||
|
||||
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","03-07-2017","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
|
||||
["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","02-07-2017","02-07-2017","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
|
||||
["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","01-07-2017","<span style='color:red'><strong>01-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
|
||||
["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","30-06-2017","<span style='color:red'><strong>30-06-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#36c6d3;font-weight: 700;'>Accepted</span><br><div style='margin-top: 10px;' class='btn-group'><a class='btn red btn-xs btn-circle btn-outline' href='#reason' data-toggle='modal'>Fail to Ship</a></div>", "Not Completed"],
|
||||
["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","30-06-2017","<span style='color:red'><strong>30-06-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#36c6d3;font-weight: 700;'>Accepted</span><br><div style='margin-top: 10px;' class='btn-group'><a class='btn red btn-xs btn-circle btn-outline' href='#reason' data-toggle='modal'>Fail to Ship</a></div>", "Not Completed"],
|
||||
["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","28-06-2017","28-06-2017","Delivery Request <span style='color:#36c6d3;font-weight: 700;'>Accepted</span><br><div style='margin-top: 10px;' class='btn-group'><a class='btn red btn-xs btn-circle btn-outline' href='#reason' data-toggle='modal'>Fail to Ship</a></div>", "Not Completed"],
|
||||
["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","28-06-2017","28-06-2017","Delivery Request <span style='color:#36c6d3;font-weight: 700;'>Completed</span>", "Completed"],
|
||||
["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","28-06-2017","28-06-2017","Delivery Request <span style='color:#36c6d3;font-weight: 700;'>Completed</span>", "Completed"]
|
||||
["1","123456","789ABC","01-08-2017","01-08-2017","01-08-2017","12345","Bangi<br>Selangor","123456","03-07-2017","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
|
||||
["2","123456","789ABC","01-08-2017","01-08-2017","01-08-2017","12345","Bangi<br>Selangor","123456","03-07-2017","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
|
||||
["3","123456","789ABC","01-08-2017","01-08-2017","01-08-2017","12345","Bangi<br>Selangor","123456","03-07-2017","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
|
||||
["4","123456","789ABC","01-08-2017","01-08-2017","01-08-2017","12345","Bangi<br>Selangor","123456","03-07-2017","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
|
||||
["5","123456","789ABC","01-08-2017","01-08-2017","01-08-2017","12345","Bangi<br>Selangor","123456","03-07-2017","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
|
||||
["6","123456","789ABC","01-08-2017","01-08-2017","01-08-2017","12345","Bangi<br>Selangor","123456","03-07-2017","<span style='color:red'><strong>03-07-2017<br/>Delayed</strong></span>","Delivery Request <span style='color:#F1C40F;font-weight: 700;'>Sent</span>", "Not Completed"],
|
||||
];
|
||||
|
||||
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","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","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","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","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","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","CBM :<br/>Weight:<br/>Qty of Carton:"]
|
||||
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","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","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","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","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","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","CBM :<br/>Weight:<br/>Qty of Carton:"]
|
||||
];
|
||||
|
||||
|
||||
@@ -1214,7 +1489,7 @@ Contact Person No: 0123456789
|
||||
'targets': [0]
|
||||
},
|
||||
{
|
||||
"targets": [ 12 ],
|
||||
"targets": [ 8 ],
|
||||
"visible": false
|
||||
}],
|
||||
// scroller extension: http://datatables.net/extensions/scroller/
|
||||
@@ -1253,23 +1528,20 @@ Contact Person No: 0123456789
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
],
|
||||
|
||||
],
|
||||
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: 'Container<br>No <br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_1\')"></span>' },
|
||||
{ title: 'Shipment <br>Reference<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_2\')"></span>' },
|
||||
{ title: 'Loading<br> Date<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_3\')"></span>' },
|
||||
{ title: 'ETD<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_9\')"></span>' },
|
||||
{ title: 'ETA<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: 'Stats' },
|
||||
{ title: 'ETA<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_10\')"></span>' },
|
||||
{ title: 'Order<br>No<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_6\')"></span>' },
|
||||
{ title: 'Loading<br>Venue<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_7\')"></span>' },
|
||||
// { title: 'Status<br> <span class="fa fa-filter filterIcon blue" onclick="showFilter(event,\'example_11\')"></span>' },
|
||||
// { title: 'Stats' },
|
||||
],
|
||||
|
||||
initComplete: function () {
|
||||
@@ -1314,14 +1586,14 @@ Contact Person No: 0123456789
|
||||
"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"},
|
||||
// { 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>>",
|
||||
@@ -1503,6 +1775,268 @@ Contact Person No: 0123456789
|
||||
}
|
||||
|
||||
|
||||
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 () {
|
||||
alert('Finished! Hope you like it :)');
|
||||
}).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();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -285,7 +285,7 @@ License: You must have a valid license purchased only from themeforest(the above
|
||||
<div class="portlet light bordered" style="margin-bottom: 10px;">
|
||||
<div class="portlet-title">
|
||||
<div class="caption">
|
||||
<span class="caption-subject bold font-purple-plum uppercase"> Order List </span>
|
||||
<span class="caption-subject bold font-purple-plum uppercase"> Order Number </span>
|
||||
</div>
|
||||
<div class="inputs">
|
||||
<div class="row">
|
||||
@@ -337,12 +337,12 @@ License: You must have a valid license purchased only from themeforest(the above
|
||||
<li>
|
||||
Order List
|
||||
<ul>
|
||||
<li data-jstree='{ "type" : "file" }' onclick="show_content();" >
|
||||
<span class="editInPlace" >014587</span>
|
||||
<li data-jstree='{ "type" : "file" }' onclick="show_content();" >014587
|
||||
<span class="editInPlace">group</span>
|
||||
</li>
|
||||
|
||||
<li data-jstree='{ "type" : "file" }' onclick="show_content();" >
|
||||
<span class="editInPlace" >014586</span>
|
||||
<li data-jstree='{ "type" : "file" }' onclick="show_content();" >014586
|
||||
<span class="editInPlace" >group</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
@@ -340,8 +340,8 @@ License: You must have a valid license purchased only from themeforest(the above
|
||||
<textarea class="form-control" rows="1"></textarea>
|
||||
</div>
|
||||
<div class="form-group last">
|
||||
<label class="control-label col-md-3" align="right"></label>
|
||||
<div class="col-md-4" align="right">
|
||||
<label class="control-label col-md-3" align="right"></label>
|
||||
<div class="col-md-4" align="right">
|
||||
<a class="btn green btn-outline sbold upppercase" href="#form_modal11" data-toggle="modal" > Appoinment Request
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -263,7 +263,7 @@ License: You must have a valid license purchased only from themeforest(the above
|
||||
<div class="portlet light bordered" style="margin-bottom: 10px;">
|
||||
<div class="portlet-title">
|
||||
<div class="caption">
|
||||
<span class="caption-subject bold font-purple-plum uppercase"> Order List </span>
|
||||
<span class="caption-subject bold font-purple-plum uppercase"> Order Number </span>
|
||||
</div>
|
||||
<div class="inputs">
|
||||
<div class="row">
|
||||
@@ -315,12 +315,12 @@ License: You must have a valid license purchased only from themeforest(the above
|
||||
<li>
|
||||
Order List
|
||||
<ul>
|
||||
<li data-jstree='{ "type" : "file" }' onclick="show_content();" >
|
||||
<span class="editInPlace" >014587</span>
|
||||
<li data-jstree='{ "type" : "file" }' onclick="show_content();" >014587
|
||||
<span class="editInPlace">group</span>
|
||||
</li>
|
||||
|
||||
<li data-jstree='{ "type" : "file" }' onclick="show_content();" >
|
||||
<span class="editInPlace" >014586</span>
|
||||
<li data-jstree='{ "type" : "file" }' onclick="show_content();" >014586
|
||||
<span class="editInPlace" >group</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user