| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/billingsystem/dashboard/component/ |
Upload File : |
<!-- Modal Add-->
<div class="modal fade bd-example-modal-lg" id="addNewCustomer" tabindex="-1" role="dialog" aria-labelledby="Edit" aria-hidden="true">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Add New Customer
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="card-body boxShadow whiteBg mb-3">
<div class="row">
<div class="col-md-12 d-flex justify-content-between">
<div class="row mb-4 w-100">
<div class="col-6 col-lg-3">
<span class="bold"> Created At :</span><br> 30 Jan 2020 05:50:00
</div>
<div class="col-6 col-lg-3">
<span class="bold"> Created By :</span><br> Admin 1
</div>
<div class="col-6 col-lg-3">
<span class="bold"> Last Update At :</span><br> 30 Jan 2020 05:50:00
</div>
<div class="col-6 col-lg-3">
<span class="bold"> Last Update By :</span><br> Admin 1
</div>
</div>
<div class="custom-dropdown">
<select class="statusSelect">
<option value="" hidden>Status</option>
<option value="Active">Active</option>
<option value="Inactive">Inactive</option>
</select>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="CustomerCode" class="require">Customer Code</label>
<input type="text" class="form-control" id="CustomerCode" value="" placeholder="">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="CustomerType" class="require">Cust. Type</label>
<select class="form-control" id="CustomerType">
<option value=""></option>
<option value="Rental">Rental</option>
<option value="Retail">Retail</option>
</select>
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<label for="Size">Size</label>
<select class="form-control" id="Size">
<option value=""></option>
<option value="1-10">1-10</option>
<option value="10-20">10-20</option>
<option value="20 up">20 up</option>
<option value="30 up">30 up</option>
<option value="50 up">50 up</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<p class="mb-0">Logo</p>
<div class="custom-file">
<input class="custom-file-input" id="inputGroupFile04" type="file">
<label class="custom-file-label garyFont" for="inputGroupFile04">Upload
Logo</label>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="CustomerName_en" class="require">Customer Name (Eng)</label>
<input type="text" class="form-control" id="CustomerName_en" value="" placeholder="">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="CustomerName_cn" class="require">Customer Name (Chi)</label>
<input type="text" class="form-control" id="CustomerName_cn" value="" placeholder="">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="Salesman" class="require">Salesman </label>
<select class="form-control" id="Salesman">
<option value=""></option>
<option value="Jacket">Jacket</option>
</select>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="CustomerTitle">Title</label>
<input type="text" class="form-control" id="CustomerTitle" value="" placeholder="">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="CustomerPerson" class="require">Contact Person</label>
<input type="text" class="form-control" id="CustomerPerson" value="" placeholder="">
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label for="CustomerEmail" class="require">Email</label>
<input type="email" class="form-control" id="CustomerEmail" value="" placeholder="">
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<label for="CustomerTel" class="require">Tel</label>
<input type="text" class="form-control" id="CustomerTel" value="" placeholder="">
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<label for="CustomerFax">Fax</label>
<input type="text" class="form-control" id="CustomerFax" value="" placeholder="">
</div>
</div>
<div class="col-lg-2">
<div class="form-group">
<label for="District" class="require">District </label>
<select class="form-control" id="District">
<option value=""></option>
<option value="Jacket">Sai Kung</option>
</select>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="CompanyAddress" class="require">Company Address</label>
<textarea class="form-control" name="CompanyAddress" id="CompanyAddress" rows="4"></textarea>
</div>
</div>
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mt-3">
<p class="bold mb-0">Billing Addrees</p>
<button class="sbtn btn-info smaller addNewBillingBtn_add"><i class="mdi mdi-library-plus"></i>
Add New</button>
</div>
<hr>
<div class="form-check mb-0 mt-0">
<input type="checkbox" class="form-check-input" id="SameCompany01">
<label class="form-check-label" for="SameCompany01">Same As Company Address</label>
</div>
<div class="table-responsive mb-3">
<div id="gridAddBilling" class="newGrid"></div>
</div>
</div>
<div class="col-lg-12">
<div class="d-flex justify-content-between align-items-center mt-3">
<p class="bold mb-0">Delivery Addrees</p>
<button class="sbtn btn-info smaller addNewDeliveryBtn_add"><i class="mdi mdi-library-plus"></i>
Add New</button>
</div>
<hr>
<div class="form-check mb-0 mt-0">
<input type="checkbox" class="form-check-input" id="SameCompany02">
<label class="form-check-label" for="SameCompany02">Same As Company Address</label>
</div>
<div class="table-responsive mb-3">
<div id="gridAddDelivery" class="newGrid"></div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="4emarks ">Remarks </label>
<textarea class="form-control" id="Remarks" rows="4"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary submitDate shadow_blue">Create</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
var district = [{
Name: "Sai Kung",
Id: "1"
},
{
Name: "Kwun Tong",
Id: "2"
}
];
var NewCustomData = [{
"Cust_Name_Eng":"",
"Cust_Name_Chi":"",
District:"",
Title: "",
Attn: "",
Mobile: "",
Address: "",
Default: "",
Tel: "",
Fax: "",
Email: ""
}, {
"Cust_Name_Eng":"",
"Cust_Name_Chi":"",
District:"",
Title: "",
Attn: "",
Mobile: "",
Address: "",
Default: "",
Tel: "",
Fax: "",
Email: ""
}];
var IconField = function(config) {
jsGrid.Field.call(this, config);
};
IconField.prototype = new jsGrid.Field({
itemTemplate: function(value) {
var insertValue = this._insertValue = $(
`<i class="mdi mdi-select-all"></i>`);
return insertValue;
},
insertTemplate: function(value) {
return this._insertInput = $(
`<i class="mdi mdi-select-all"></i>`
);
},
editTemplate: function(value) {
return this._editInput = $(
`<i class="mdi mdi-select-all"></i>`
);
},
insertValue: function() {
return this._insertInput.val();
},
editValue: function() {
return this._editInput.val();
}
});
jsGrid.fields.iconField = IconField;
var RemarkField = function(config) {
jsGrid.Field.call(this, config);
};
RemarkField.prototype = new jsGrid.Field({
itemTemplate: function(value) {
var insertValue = this._insertValue = $(
`<span class="textareaText" >${value}</span>`);
return insertValue;
},
insertTemplate: function(value) {
return this._insertInput = $(
`<textarea class="textareaRow" rows="1"></textarea>`
);
},
editTemplate: function(value) {
return this._editInput = $(
`<textarea class="textareaRow" rows="1">${value}</textarea>`
);
},
insertValue: function() {
return this._insertInput.val();
},
editValue: function() {
return this._editInput.val();
}
});
jsGrid.fields.remarkField = RemarkField;
$("#gridAddBilling").jsGrid({
height: "auto",
width: "100%",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: NewCustomData,
rowClass: function(item, itemIndex) {
return "client-" + itemIndex;
},
controller: {
loadData: function() {
return NewData.slice(0, 15);
}
},
fields: [{
name: "#",
type: "iconField",
width: 30,
align: "left"
}, {
name: "Default",
width: 80,
align: "left",
itemTemplate: function(value, item) {
return $("<div>")
.addClass("form-check mt-0")
.append(
$("<label>").addClass("form-check-label")
.append(
$("<input>").attr("type", "radio").attr("name", "radio01")
.addClass("form-check-input jqgridRadio")
.attr("checked", value || item.Checked)
.on("change", function() {
item.Checked = $(this).is(":checked");
})
)
.append('<i class="input-helper"></i>')
);
}
},
{
name: "Cust_Name_Eng",
type: "text",
width: 150,
align: "left"
}, {
name: "Cust_Name_Chi",
type: "text",
textField: 'text',
valueField: 'value',
width: 150,
align: "left"
}, {
name: "Address",
type: "remarkField",
width: 150,
sorting: false
}, {
name: "District",
type: "select",
items: district,
width: 150,
valueField: "Id",
textField: "Name",
sorting: false,
align: "left"
}, {
name: "Attn",
type: "text",
width: 150,
sorting: false
}, {
name: "Title",
type: "text",
width: 150,
sorting: false
}, {
name: "Tel",
type: "text",
width: 100
}, {
name: "Mobile",
type: "text",
width: 100
}, {
name: "Fax",
type: "text",
width: 100
}, {
name: "Email",
type: "text",
width: 130
},
{
type: "control",
width: 50,
editButton: false
}
],
onRefreshed: function() {
var $gridData = $("#gridAddBilling .jsgrid-grid-body tbody");
$gridData.sortable({
update: function(e, ui) {
// array of indexes
var clientIndexRegExp = /\s*client-(\d+)\s*/;
var indexes = $.map($gridData.sortable("toArray", {
attribute: "class"
}), function(classes) {
return clientIndexRegExp.exec(classes)[1];
});
alert("Reordered indexes: " + indexes.join(", "));
// arrays of items
var items = $.map($gridData.find("tr"), function(row) {
return $(row).data("JSGridItem");
});
console && console.log("Reordered items", items);
}
});
},
rowClick: function(args) {
var $row = $(args.event.target).closest("tr");
var $cell = $(args.event.target).closest(".jsgrid-cell");
cellIndex = $($row.find("td")).index($cell);
if (this._editingRow) {
this.updateItem();
}
if (this.editing) {
this.editItem($row);
}
}
});
$("#gridAddDelivery").jsGrid({
height: "auto",
width: "100%",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: NewCustomData,
rowClass: function(item, itemIndex) {
return "client-" + itemIndex;
},
controller: {
loadData: function() {
return NewData.slice(0, 15);
}
},
fields: [{
name: "#",
type: "iconField",
width: 30,
align: "left"
}, {
name: "Default",
width: 80,
align: "left",
itemTemplate: function(value, item) {
return $("<div>")
.addClass("form-check mt-0")
.append(
$("<label>").addClass("form-check-label")
.append(
$("<input>").attr("type", "radio").attr("name", "radio02")
.addClass("form-check-input jqgridRadio")
.attr("checked", value || item.Checked)
.on("change", function() {
item.Checked = $(this).is(":checked");
})
)
.append('<i class="input-helper"></i>')
);
}
},
{
name: "Cust.Name(Eng)",
type: "text",
width: 150,
align: "left"
}, {
name: "Cust.Name(Chi)",
type: "text",
textField: 'text',
valueField: 'value',
width: 150,
align: "left"
}, {
name: "Address",
type: "remarkField",
width: 150,
sorting: false
}, {
name: "District",
type: "select",
items: district,
align: "left",
width: 150,
valueField: "Id",
textField: "Name",
sorting: false
}, {
name: "Attn",
type: "text",
width: 150,
sorting: false
}, {
name: "Title",
type: "text",
width: 150,
sorting: false
}, {
name: "Tel",
type: "text",
width: 100
}, {
name: "Mobile",
type: "text",
width: 100
}, {
name: "Fax",
type: "text",
width: 100
}, {
name: "Email",
type: "text",
width: 130
},
{
type: "control",
width: 50,
editButton: false
}
],
onRefreshed: function() {
var $gridData = $("#gridAddDelivery .jsgrid-grid-body tbody");
$gridData.sortable({
update: function(e, ui) {
// array of indexes
var clientIndexRegExp = /\s*client-(\d+)\s*/;
var indexes = $.map($gridData.sortable("toArray", {
attribute: "class"
}), function(classes) {
return clientIndexRegExp.exec(classes)[1];
});
alert("Reordered indexes: " + indexes.join(", "));
// arrays of items
var items = $.map($gridData.find("tr"), function(row) {
return $(row).data("JSGridItem");
});
console && console.log("Reordered items", items);
}
});
},
rowClick: function(args) {
var $row = $(args.event.target).closest("tr");
var $cell = $(args.event.target).closest(".jsgrid-cell");
cellIndex = $($row.find("td")).index($cell);
if (this._editingRow) {
this.updateItem();
}
if (this.editing) {
this.editItem($row);
}
}
});
$(document).click((event) => {
if (!$(event.target).closest('.newGrid').length) {
$(".newGrid").jsGrid("cancelEdit");
// the click occured outside '#element'
}
});
$(document).on("change", ".gridRadioBtn", function() {
if ($(this).is(':checked'))
$(this).parent(); // checked
else
$("#txtAge").hide();
});
$(document).on("click", ".addNewBillingBtn_add", function() {
$("#gridAddBilling").jsGrid("insertItem");
});
$(document).on("click", ".addNewDeliveryBtn_add", function() {
$("#gridAddDelivery").jsGrid("insertItem");
});
});
</script>