328 lines
8.7 KiB
JavaScript
Executable File
328 lines
8.7 KiB
JavaScript
Executable File
/*
|
|
Template Name: webadmin - Admin & Dashboard Template
|
|
Author: Themesdesign
|
|
Website: https://Themesdesign.com/
|
|
Contact: Themesdesign@gmail.com
|
|
File: Ecommerce order Js File
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
// Chart Mini-1
|
|
var sparklineoptions1 = {
|
|
series: [{
|
|
data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14]
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
width: 150,
|
|
height: 50,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
inverseColors: false,
|
|
opacityFrom: 0.45,
|
|
opacityTo: 0.05,
|
|
stops: [20, 100, 100, 100]
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2,
|
|
},
|
|
colors: ['#1f58c7'],
|
|
tooltip: {
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
|
|
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-1"), sparklineoptions1);
|
|
sparklinechart1.render();
|
|
|
|
|
|
// Chart Mini-2
|
|
var sparklineoptions1 = {
|
|
series: [{
|
|
data: [65, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14]
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
width: 150,
|
|
height: 50,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
inverseColors: false,
|
|
opacityFrom: 0.45,
|
|
opacityTo: 0.05,
|
|
stops: [20, 100, 100, 100]
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2,
|
|
},
|
|
colors: ['#1f58c7'],
|
|
tooltip: {
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
|
|
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-2"), sparklineoptions1);
|
|
sparklinechart1.render();
|
|
|
|
// Chart Mini-3
|
|
var sparklineoptions1 = {
|
|
series: [{
|
|
data: [12, 75, 2, 47, 42, 15, 47, 75, 65, 19, 14]
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
width: 150,
|
|
height: 50,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
inverseColors: false,
|
|
opacityFrom: 0.45,
|
|
opacityTo: 0.05,
|
|
stops: [20, 100, 100, 100]
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2,
|
|
},
|
|
colors: ['#1f58c7'],
|
|
tooltip: {
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
|
|
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-3"), sparklineoptions1);
|
|
sparklinechart1.render();
|
|
|
|
// Chart Mini-4
|
|
var sparklineoptions1 = {
|
|
series: [{
|
|
data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 70]
|
|
}],
|
|
chart: {
|
|
type: 'area',
|
|
width: 150,
|
|
height: 50,
|
|
sparkline: {
|
|
enabled: true
|
|
}
|
|
},
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
inverseColors: false,
|
|
opacityFrom: 0.45,
|
|
opacityTo: 0.05,
|
|
stops: [20, 100, 100, 100]
|
|
},
|
|
},
|
|
stroke: {
|
|
curve: 'smooth',
|
|
width: 2,
|
|
},
|
|
colors: ['#1f58c7'],
|
|
tooltip: {
|
|
fixed: {
|
|
enabled: false
|
|
},
|
|
x: {
|
|
show: false
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (seriesName) {
|
|
return ''
|
|
}
|
|
}
|
|
},
|
|
marker: {
|
|
show: false
|
|
}
|
|
}
|
|
};
|
|
|
|
var sparklinechart1 = new ApexCharts(document.querySelector("#mini-4"), sparklineoptions1);
|
|
sparklinechart1.render();
|
|
|
|
// Basic Table
|
|
new gridjs.Grid({
|
|
columns:
|
|
[
|
|
{
|
|
name: '#',
|
|
sort: {
|
|
enabled: false
|
|
},
|
|
formatter: (function (cell) {
|
|
return gridjs.html('<div class="form-check font-size-16"><input class="form-check-input" type="checkbox" id="orderidcheck01"><label class="form-check-label" for="orderidcheck01"></label></div>');
|
|
})
|
|
},
|
|
{
|
|
name: 'Order ID',
|
|
formatter: (function (cell) {
|
|
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
|
|
})
|
|
},
|
|
|
|
{
|
|
name: 'Billing Name',
|
|
formatter: (function (cell) {
|
|
return gridjs.html('<img src="assets/images/users/'+ cell[0]+'" alt="" class="avatar-sm rounded-circle me-2" /><a href="#" class="text-body">' + cell[1] + "</a>");
|
|
})
|
|
},
|
|
"Date", "Total",
|
|
{
|
|
name: 'Payment Status',
|
|
formatter: (function (cell) {
|
|
switch (cell) {
|
|
case "Paid":
|
|
return gridjs.html('<span class="badge badge-pill bg-success-subtle text-success font-size-12">' + cell + '</span>');
|
|
|
|
case "Chargeback":
|
|
return gridjs.html('<span class="badge badge-pill bg-danger-subtle text-danger font-size-12">' + cell + '</span>');
|
|
|
|
case "Refund":
|
|
return gridjs.html('<span class="badge badge-pill bg-warning-subtle text-warning font-size-12">' + cell + '</span>');
|
|
|
|
default:
|
|
return gridjs.html('<span class="badge badge-pill bg-success-subtle text-success font-size-12">' + cell + '</span>');
|
|
}
|
|
})
|
|
},
|
|
{
|
|
name: "Payment Method",
|
|
formatter: (function (cell) {
|
|
switch (cell) {
|
|
case "Mastercard":
|
|
return gridjs.html('<i class="fab fa-cc-mastercard me-2"></i>' + cell);
|
|
case "Visa":
|
|
return gridjs.html('<i class="fab fa-cc-visa me-2"></i>' + cell);
|
|
case "Paypal":
|
|
return gridjs.html('<i class="fab fa-cc-paypal me-2"></i>' + cell);
|
|
case "COD":
|
|
return gridjs.html('<i class="fas fa-money-bill-alt me-2"></i>' + cell);
|
|
}
|
|
})
|
|
},
|
|
{
|
|
name: "View Details",
|
|
formatter: (function (cell) {
|
|
return gridjs.html('<button type="button" class="btn btn-primary btn-sm btn-rounded" data-bs-toggle="modal" data-bs-target=".orderdetailsModal">'+ cell + '</button>');
|
|
})
|
|
},
|
|
{
|
|
name: "Action",
|
|
sort: {
|
|
enabled: false
|
|
},
|
|
formatter: (function (cell) {
|
|
return gridjs.html('<div class="d-flex gap-3"><a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="text-success"><i class="mdi mdi-pencil font-size-18"></i></a><a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" title="Delete" class="text-danger"><i class="mdi mdi-delete font-size-18"></i></a></div>');
|
|
})
|
|
}
|
|
],
|
|
pagination: {
|
|
limit: 7
|
|
},
|
|
sort: true,
|
|
search: true,
|
|
data: [
|
|
["", "#SK2540", ["avatar-1.jpg","Neal Matthews"],"07 Oct, 2021", "$400", "Paid", "Mastercard", "View Details" ],
|
|
["", "#SK5623", ["avatar-2.jpg","Jamal Burnett"],"05 Oct, 2021", "$452", "Chargeback", "Visa", "View Details"],
|
|
["", "#SK6263", ["avatar-3.jpg","Juan Mitchell"],"06 Oct, 2021", "$632", "Refund", "Paypal", "View Details"],
|
|
["", "#SK4521", ["avatar-4.jpg","Barry Dick"], "07 Oct, 2021", "$521", "Refund", "COD", "View Details"],
|
|
["", "#SK5263", ["avatar-5.jpg","Ronald Taylor"],"07 Oct, 2021", "$521", "Paid", "Mastercard", "View Details" ],
|
|
["", "#SK4526", ["avatar-6.jpg","Jacob Hunter"], "06 Oct, 2021", "$365", "Chargeback", "Visa", "View Details"],
|
|
["", "#SK8965", ["avatar-7.jpg","William Cruz"], "07 Oct, 2021", "$452", "Paid", "Paypal", "View Details"],
|
|
["", "#SK9658", ["avatar-8.jpg","Dustin Moser"], "08 Oct, 2021", "$365", "Paid", "COD", "View Details"],
|
|
["", "#SK7458", ["avatar-6.jpg","Clark Benson"], "09 Oct, 2021", "$254", "Refund", "COD", "View Details"],
|
|
["", "#SK2685", ["avatar-2.jpg","John Fane"], "07 Oct, 2021", "$400", "Paid", "Mastercard", "View Details" ],
|
|
["", "#SK4526", ["avatar-1.jpg","Stacie Parker"],"05 Oct, 2021", "$452", "Chargeback", "Visa", "View Details"],
|
|
["", "#SK8522", ["avatar-2.jpg","Betty Wilson"], "06 Oct, 2021", "$632", "Refund", "Paypal", "View Details"],
|
|
["", "#SK4545", ["avatar-3.jpg","Roman Crabtree"], "07 Oct, 2021", "$521", "Refund", "COD", "View Details"],
|
|
["", "#SK9652", ["avatar-4.jpg","Marisela Butler"], "07 Oct, 2021", "$521", "Paid", "Mastercard", "View Details" ],
|
|
["", "#SK4256", ["avatar-5.jpg","Roger Slayton"], "06 Oct, 2021", "$365", "Chargeback", "Visa", "View Details"],
|
|
["", "#SK4125", ["avatar-6.jpg","Barbara Torres"], "07 Oct, 2021", "$452", "Paid", "Paypal", "View Details"],
|
|
["", "#SK6523", ["avatar-7.jpg","Daniel Rigney"], "08 Oct, 2021", "$365", "Paid", "COD", "View Details"],
|
|
["", "#SK6563", ["avatar-8.jpg","Kenneth Linck"], "09 Oct, 2021", "$254", "Refund", "COD", "View Details"],
|
|
|
|
]
|
|
}).render(document.getElementById("table-ecommerce-orders"));
|
|
|
|
|
|
|
|
flatpickr('#order-date', {
|
|
defaultDate: new Date(),
|
|
dateFormat: "d M, Y",
|
|
});
|