sifatbaho
This commit is contained in:
12
resources/js/pages/animation-aos.init.js
vendored
Executable file
12
resources/js/pages/animation-aos.init.js
vendored
Executable file
@@ -0,0 +1,12 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Animatoin aos Js File
|
||||
*/
|
||||
|
||||
AOS.init({
|
||||
easing: 'ease-out-back',
|
||||
duration: 1000
|
||||
});
|
||||
1248
resources/js/pages/apexcharts-area.init.js
vendored
Executable file
1248
resources/js/pages/apexcharts-area.init.js
vendored
Executable file
File diff suppressed because it is too large
Load Diff
786
resources/js/pages/apexcharts-bar.init.js
vendored
Executable file
786
resources/js/pages/apexcharts-bar.init.js
vendored
Executable file
@@ -0,0 +1,786 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Bar Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Bar chart
|
||||
var chartBarColors = getChartColorsArray("bar_chart");
|
||||
if(chartBarColors){
|
||||
var options = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
data: [380, 430, 450, 475, 550, 584, 780, 1100, 1220, 1365]
|
||||
}],
|
||||
colors: chartBarColors,
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
|
||||
}
|
||||
}
|
||||
var chart = new ApexCharts(document.querySelector("#bar_chart"),options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Custom DataLabels Bar
|
||||
var chartDatalabelsBarColors = getChartColorsArray("custom_datalabels_bar");
|
||||
if(chartDatalabelsBarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
barHeight: '100%',
|
||||
distributed: true,
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'bottom'
|
||||
},
|
||||
}
|
||||
},
|
||||
colors: chartDatalabelsBarColors,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
textAnchor: 'start',
|
||||
style: {
|
||||
colors: ['#fff']
|
||||
},
|
||||
formatter: function (val, opt) {
|
||||
return opt.w.globals.labels[opt.dataPointIndex] + ": " + val
|
||||
},
|
||||
offsetX: 0,
|
||||
dropShadow: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
|
||||
'United States', 'China', 'India'
|
||||
],
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Custom DataLabels',
|
||||
align: 'center',
|
||||
floating: true,
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Category Names as DataLabels inside bars',
|
||||
align: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'dark',
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function () {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#custom_datalabels_bar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Stacked Bar Charts
|
||||
var chartStackedBarColors = getChartColorsArray("stacked_bar");
|
||||
if(chartStackedBarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Marine Sprite',
|
||||
data: [44, 55, 41, 37, 22, 43, 21]
|
||||
}, {
|
||||
name: 'Striking Calf',
|
||||
data: [53, 32, 33, 52, 13, 43, 32]
|
||||
}, {
|
||||
name: 'Tank Picture',
|
||||
data: [12, 17, 11, 9, 15, 11, 20]
|
||||
}, {
|
||||
name: 'Bucket Slope',
|
||||
data: [9, 7, 5, 8, 6, 9, 4]
|
||||
}, {
|
||||
name: 'Reborn Kid',
|
||||
data: [25, 12, 19, 32, 25, 24, 10]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
title: {
|
||||
text: 'Fiction Books Sales',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: undefined
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
offsetX: 40
|
||||
},
|
||||
colors: chartStackedBarColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#stacked_bar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Stacked Bars 100
|
||||
var chartStackedBar100Colors = getChartColorsArray("stacked_bar_100");
|
||||
if(chartStackedBar100Colors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Marine Sprite',
|
||||
data: [44, 55, 41, 37, 22, 43, 21]
|
||||
}, {
|
||||
name: 'Striking Calf',
|
||||
data: [53, 32, 33, 52, 13, 43, 32]
|
||||
}, {
|
||||
name: 'Tank Picture',
|
||||
data: [12, 17, 11, 9, 15, 11, 20]
|
||||
}, {
|
||||
name: 'Bucket Slope',
|
||||
data: [9, 7, 5, 8, 6, 9, 4]
|
||||
}, {
|
||||
name: 'Reborn Kid',
|
||||
data: [25, 12, 19, 32, 25, 24, 10]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
stacked: true,
|
||||
stackType: '100%',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
title: {
|
||||
text: '100% Stacked Bar',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
offsetX: 40
|
||||
},
|
||||
colors: chartStackedBar100Colors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#stacked_bar_100"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Bar with Negative Values
|
||||
var chartNegativeBarColors = getChartColorsArray("negative_bars");
|
||||
if(chartNegativeBarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Males',
|
||||
data: [0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2, 4.5,
|
||||
3.9, 3.5, 3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Females',
|
||||
data: [-0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3, -4.4,
|
||||
-4.1, -4, -4.1, -3.4, -3.1, -2.8
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 360,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
colors: chartNegativeBarColors,
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '80%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: ["#fff"]
|
||||
},
|
||||
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: -5,
|
||||
max: 5,
|
||||
title: {
|
||||
text: 'Age',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
shared: false,
|
||||
x: {
|
||||
formatter: function (val) {
|
||||
return val
|
||||
}
|
||||
},
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return Math.abs(val) + "%"
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Mauritius population pyramid 2011',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['85+', '80-84', '75-79', '70-74', '65-69', '60-64', '55-59', '50-54',
|
||||
'45-49', '40-44', '35-39', '30-34', '25-29', '20-24', '15-19', '10-14', '5-9',
|
||||
'0-4'
|
||||
],
|
||||
title: {
|
||||
text: 'Percent'
|
||||
},
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return Math.abs(Math.round(val)) + "%"
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#negative_bars"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Bar with Markers
|
||||
var chartBarMarkersColors = getChartColorsArray("bar_markers");
|
||||
if(chartBarMarkersColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Actual',
|
||||
data: [{
|
||||
x: '2011',
|
||||
y: 12,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 14,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2012',
|
||||
y: 44,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 54,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2013',
|
||||
y: 54,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 52,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2014',
|
||||
y: 66,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 65,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2015',
|
||||
y: 81,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 66,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
},
|
||||
{
|
||||
x: '2016',
|
||||
y: 67,
|
||||
goals: [{
|
||||
name: 'Expected',
|
||||
value: 70,
|
||||
strokeWidth: 5,
|
||||
strokeColor: '#564ab1'
|
||||
}]
|
||||
}
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
colors: chartBarMarkersColors,
|
||||
dataLabels: {
|
||||
formatter: function (val, opt) {
|
||||
var goals =
|
||||
opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex]
|
||||
.goals
|
||||
|
||||
// if (goals && goals.length) {
|
||||
// return `${val} / ${goals[0].value}`
|
||||
// }
|
||||
return val
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
showForSingleSeries: true,
|
||||
customLegendItems: ['Actual', 'Expected'],
|
||||
markers: {
|
||||
fillColors: chartBarMarkersColors
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#bar_markers"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Reversed Bar Chart
|
||||
var chartBarReversedColors = getChartColorsArray("reversed_bars");
|
||||
if(chartBarReversedColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [400, 430, 448, 470, 540, 580, 690]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
annotations: {
|
||||
xaxis: [{
|
||||
x: 500,
|
||||
borderColor: '#038edc',
|
||||
label: {
|
||||
borderColor: '#038edc',
|
||||
style: {
|
||||
color: '#fff',
|
||||
background: '#038edc',
|
||||
},
|
||||
text: 'X annotation',
|
||||
}
|
||||
}],
|
||||
yaxis: [{
|
||||
y: 'July',
|
||||
y2: 'September',
|
||||
label: {
|
||||
text: 'Y annotation'
|
||||
}
|
||||
}]
|
||||
},
|
||||
colors: chartBarReversedColors,
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
},
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
reversed: true,
|
||||
axisTicks: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#reversed_bars"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Patterned Charts
|
||||
var chartPatternedColors = getChartColorsArray("patterned_bars");
|
||||
if(chartPatternedColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Marine Sprite',
|
||||
data: [44, 55, 41, 37, 22, 43, 21]
|
||||
}, {
|
||||
name: 'Striking Calf',
|
||||
data: [53, 32, 33, 52, 13, 43, 32]
|
||||
}, {
|
||||
name: 'Tank Picture',
|
||||
data: [12, 17, 11, 9, 15, 11, 20]
|
||||
}, {
|
||||
name: 'Bucket Slope',
|
||||
data: [9, 7, 5, 8, 6, 9, 4]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 350,
|
||||
stacked: true,
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 1,
|
||||
opacity: 0.25
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '60%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
},
|
||||
title: {
|
||||
text: 'Compare Sales Strategy',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: undefined
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
shared: false,
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + "K"
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'pattern',
|
||||
opacity: 1,
|
||||
pattern: {
|
||||
style: ['circles', 'slantedLines', 'verticalLines', 'horizontalLines'], // string or array of strings
|
||||
|
||||
}
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: 'none'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'right',
|
||||
offsetY: 40
|
||||
},
|
||||
colors: chartPatternedColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#patterned_bars"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Groups Bar Charts
|
||||
var chartGroupbarColors = getChartColorsArray("grouped_bar");
|
||||
if(chartGroupbarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [44, 55, 41, 64, 22, 43, 21]
|
||||
}, {
|
||||
data: [53, 32, 33, 52, 13, 44, 32]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 410,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
dataLabels: {
|
||||
position: 'top',
|
||||
},
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
offsetX: -6,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ['#fff']
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: ['#fff']
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2001, 2002, 2003, 2004, 2005, 2006, 2007],
|
||||
},
|
||||
colors: chartGroupbarColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#grouped_bar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Bar with Images
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'coins',
|
||||
data: [2, 4, 3, 4, 3, 5, 5, 6.5, 6, 5, 4, 5, 8, 7, 7, 8, 8, 10, 9, 9, 12, 12,
|
||||
11, 12, 13, 14, 16, 14, 15, 17, 19, 21
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 410,
|
||||
animations: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '100%',
|
||||
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
colors: ["#fff"],
|
||||
width: 0.2
|
||||
},
|
||||
labels: Array.apply(null, {
|
||||
length: 39
|
||||
}).map(function (el, index) {
|
||||
return index + 1;
|
||||
}),
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
text: 'Weight',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
position: 'back'
|
||||
},
|
||||
title: {
|
||||
text: 'Paths filled by clipped image',
|
||||
align: 'right',
|
||||
offsetY: 30,
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'image',
|
||||
opacity: 0.87,
|
||||
image: {
|
||||
src: ['./assets/images/small/img-4.jpg'],
|
||||
width: 466,
|
||||
height: 406
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
if(document.querySelector("#bar_images")){
|
||||
var chart = new ApexCharts(document.querySelector("#bar_images"), options);
|
||||
chart.render();
|
||||
}
|
||||
268
resources/js/pages/apexcharts-boxplot.init.js
vendored
Executable file
268
resources/js/pages/apexcharts-boxplot.init.js
vendored
Executable file
@@ -0,0 +1,268 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Boxplot Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var chartBoxBasicColors = getChartColorsArray("basic_box");
|
||||
if(chartBoxBasicColors){
|
||||
var options = {
|
||||
series: [{
|
||||
type: 'boxPlot',
|
||||
data: [{
|
||||
x: 'Jan 2015',
|
||||
y: [54, 66, 69, 75, 88]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2016',
|
||||
y: [43, 65, 69, 76, 81]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2017',
|
||||
y: [31, 39, 45, 51, 59]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2018',
|
||||
y: [39, 46, 55, 65, 71]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2019',
|
||||
y: [29, 31, 35, 39, 44]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2020',
|
||||
y: [41, 49, 58, 61, 67]
|
||||
},
|
||||
{
|
||||
x: 'Jan 2021',
|
||||
y: [54, 59, 66, 71, 88]
|
||||
}
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
type: 'boxPlot',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Basic BoxPlot Chart',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
boxPlot: {
|
||||
colors: {
|
||||
upper: chartBoxBasicColors[0],
|
||||
lower: chartBoxBasicColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartBoxBasicColors[2]]
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_box"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Boxplot-Scatter
|
||||
var chartBoxPlotColors = getChartColorsArray("box_plot");
|
||||
if(chartBoxPlotColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Box',
|
||||
type: 'boxPlot',
|
||||
data: [{
|
||||
x: new Date('2017-01-01').getTime(),
|
||||
y: [54, 66, 69, 75, 88]
|
||||
},
|
||||
{
|
||||
x: new Date('2018-01-01').getTime(),
|
||||
y: [43, 65, 69, 76, 81]
|
||||
},
|
||||
{
|
||||
x: new Date('2019-01-01').getTime(),
|
||||
y: [31, 39, 45, 51, 59]
|
||||
},
|
||||
{
|
||||
x: new Date('2020-01-01').getTime(),
|
||||
y: [39, 46, 55, 65, 71]
|
||||
},
|
||||
{
|
||||
x: new Date('2021-01-01').getTime(),
|
||||
y: [29, 31, 35, 39, 44]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Outliers',
|
||||
type: 'scatter',
|
||||
data: [{
|
||||
x: new Date('2017-01-01').getTime(),
|
||||
y: 32
|
||||
},
|
||||
{
|
||||
x: new Date('2018-01-01').getTime(),
|
||||
y: 25
|
||||
},
|
||||
{
|
||||
x: new Date('2019-01-01').getTime(),
|
||||
y: 64
|
||||
},
|
||||
{
|
||||
x: new Date('2020-01-01').getTime(),
|
||||
y: 27
|
||||
},
|
||||
{
|
||||
x: new Date('2020-01-01').getTime(),
|
||||
y: 78
|
||||
},
|
||||
{
|
||||
x: new Date('2021-01-01').getTime(),
|
||||
y: 15
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'boxPlot',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: [chartBoxPlotColors[0], chartBoxPlotColors[1]],
|
||||
title: {
|
||||
text: 'BoxPlot - Scatter Chart',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
tooltip: {
|
||||
formatter: function (val) {
|
||||
return new Date(val).getFullYear()
|
||||
}
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
boxPlot: {
|
||||
colors: {
|
||||
upper: chartBoxPlotColors[2],
|
||||
lower: chartBoxPlotColors[3]
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartBoxPlotColors[4]]
|
||||
},
|
||||
tooltip: {
|
||||
shared: false,
|
||||
intersect: true
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#box_plot"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// box_plot_hori
|
||||
var chartBoxPlotHoriColors = getChartColorsArray("box_plot_hori");
|
||||
if (chartBoxPlotHoriColors) {
|
||||
var options = {
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'Category A',
|
||||
y: [54, 66, 69, 75, 88]
|
||||
},
|
||||
{
|
||||
x: 'Category B',
|
||||
y: [43, 65, 69, 76, 81]
|
||||
},
|
||||
{
|
||||
x: 'Category C',
|
||||
y: [31, 39, 45, 51, 59]
|
||||
},
|
||||
{
|
||||
x: 'Category D',
|
||||
y: [39, 46, 55, 65, 71]
|
||||
},
|
||||
{
|
||||
x: 'Category E',
|
||||
y: [29, 31, 35, 39, 44]
|
||||
},
|
||||
{
|
||||
x: 'Category F',
|
||||
y: [41, 49, 58, 61, 67]
|
||||
},
|
||||
{
|
||||
x: 'Category G',
|
||||
y: [54, 59, 66, 71, 88]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
type: 'boxPlot',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '50%'
|
||||
},
|
||||
boxPlot: {
|
||||
colors: {
|
||||
upper: chartBoxPlotHoriColors[0],
|
||||
lower: chartBoxPlotHoriColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartBoxPlotHoriColors[2]]
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#box_plot_hori"), options);
|
||||
chart.render();
|
||||
}
|
||||
189
resources/js/pages/apexcharts-bubble.init.js
vendored
Executable file
189
resources/js/pages/apexcharts-bubble.init.js
vendored
Executable file
@@ -0,0 +1,189 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Bubble Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function(value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Bubble Charts Generate Data
|
||||
function generateData(baseval, count, yrange) {
|
||||
var i = 0;
|
||||
var series = [];
|
||||
while (i < count) {
|
||||
var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
|
||||
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
||||
var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
|
||||
|
||||
series.push([x, y, z]);
|
||||
baseval += 86400000;
|
||||
i++;
|
||||
}
|
||||
return series;
|
||||
}
|
||||
|
||||
// Simple Bubble
|
||||
var chartBubbleSimpleColors = getChartColorsArray("simple_bubble");
|
||||
if (chartBubbleSimpleColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Bubble1',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Bubble2',
|
||||
data: generateData(new Date('12 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Bubble3',
|
||||
data: generateData(new Date('13 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Bubble4',
|
||||
data: generateData(new Date('14 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bubble',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.8
|
||||
},
|
||||
title: {
|
||||
text: 'Simple Bubble Chart',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 12,
|
||||
type: 'category',
|
||||
},
|
||||
yaxis: {
|
||||
max: 70
|
||||
},
|
||||
colors: chartBubbleSimpleColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#simple_bubble"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// 3D Bubble
|
||||
var chartBubbleColors = getChartColorsArray("bubble_chart");
|
||||
if (chartBubbleColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Product1',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product2',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product3',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product4',
|
||||
data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'bubble',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
},
|
||||
title: {
|
||||
text: '3D Bubble Chart',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 12,
|
||||
type: 'datetime',
|
||||
labels: {
|
||||
rotate: 0,
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
max: 70
|
||||
},
|
||||
theme: {
|
||||
palette: 'palette2'
|
||||
},
|
||||
colors: chartBubbleColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#bubble_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
988
resources/js/pages/apexcharts-candlestick.init.js
vendored
Executable file
988
resources/js/pages/apexcharts-candlestick.init.js
vendored
Executable file
@@ -0,0 +1,988 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Candlestick Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function(value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Candlestick Charts
|
||||
var chartCandlestickBasicColors = getChartColorsArray("basic_candlestick");
|
||||
if (chartCandlestickBasicColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
},
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
type: 'candlestick',
|
||||
height: 350,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickBasicColors[0],
|
||||
downward: chartCandlestickBasicColors[1],
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'CandleStick Chart',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_candlestick"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Candlestick Synced with Brush Chart (Combo)
|
||||
var chartCandlestickComboColors = getChartColorsArray("combo_candlestick");
|
||||
if (chartCandlestickComboColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
data: seriesData
|
||||
}],
|
||||
chart: {
|
||||
type: 'candlestick',
|
||||
height: 200,
|
||||
id: 'candles',
|
||||
toolbar: {
|
||||
autoSelected: 'pan',
|
||||
show: false
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickComboColors[0],
|
||||
downward: chartCandlestickComboColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#combo_candlestick"), options);
|
||||
chart.render();
|
||||
}
|
||||
var chartCandlestickComboColors = getChartColorsArray("combo_candlestick_chart");
|
||||
if (chartCandlestickComboColors) {
|
||||
var optionsBar = {
|
||||
series: [{
|
||||
name: 'volume',
|
||||
data: seriesDataLinear
|
||||
}],
|
||||
chart: {
|
||||
height: 150,
|
||||
type: 'bar',
|
||||
brush: {
|
||||
enabled: true,
|
||||
target: 'candles'
|
||||
},
|
||||
selection: {
|
||||
enabled: true,
|
||||
xaxis: {
|
||||
min: new Date('20 Jan 2017').getTime(),
|
||||
max: new Date('10 Dec 2017').getTime()
|
||||
},
|
||||
fill: {
|
||||
color: '#ccc',
|
||||
opacity: 0.4
|
||||
},
|
||||
stroke: {
|
||||
color: '#0d47a1',
|
||||
}
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '80%',
|
||||
colors: {
|
||||
ranges: [{
|
||||
from: -1000,
|
||||
to: 0,
|
||||
color: '#f1734f'
|
||||
}, {
|
||||
from: 1,
|
||||
to: 10000,
|
||||
color: '#f7cc53'
|
||||
}],
|
||||
|
||||
},
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
axisBorder: {
|
||||
offsetX: 13
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chartBar = new ApexCharts(document.querySelector("#combo_candlestick_chart"), optionsBar);
|
||||
chartBar.render();
|
||||
}
|
||||
|
||||
|
||||
// Category X-axis
|
||||
var chartCandlestickCategoryColors = getChartColorsArray("category_candlestick");
|
||||
if (chartCandlestickCategoryColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'candle',
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
},
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'candlestick',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: 'CandleStick Chart - Category X-axis',
|
||||
align: 'left',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickCategoryColors[0],
|
||||
downward: chartCandlestickCategoryColors[1],
|
||||
}
|
||||
}
|
||||
},
|
||||
annotations: {
|
||||
xaxis: [{
|
||||
x: 'Oct 06 14:00',
|
||||
borderColor: chartCandlestickCategoryColors[0],
|
||||
label: {
|
||||
borderColor: chartCandlestickCategoryColors[1],
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
color: '#fff',
|
||||
background: chartCandlestickCategoryColors[1]
|
||||
},
|
||||
orientation: 'horizontal',
|
||||
offsetY: 7,
|
||||
text: 'Annotation Test'
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
labels: {
|
||||
formatter: function(val) {
|
||||
return dayjs(val).format('MMM DD HH:mm')
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#category_candlestick"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Candlestick with line
|
||||
'use strict';
|
||||
|
||||
// Candlestick with line
|
||||
var chartCandlestickLineColors = getChartColorsArray("candlestick_with_line");
|
||||
if (chartCandlestickLineColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'line',
|
||||
type: 'line',
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: 6604
|
||||
}, {
|
||||
x: new Date(1538782200000),
|
||||
y: 6602
|
||||
}, {
|
||||
x: new Date(1538814600000),
|
||||
y: 6607
|
||||
}, {
|
||||
x: new Date(1538884800000),
|
||||
y: 6620
|
||||
}]
|
||||
}, {
|
||||
name: 'candle',
|
||||
type: 'candlestick',
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
}, {
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
}, {
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
}, {
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
}, {
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
}, {
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
}, {
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
}, {
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
}, {
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
}, {
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
}, {
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
}, {
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
}, {
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
}, {
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
}, {
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
}, {
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
}, {
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
}, {
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
}, {
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
}, {
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
}, {
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
}, {
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
}, {
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
}, {
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
}, {
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
}, {
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
}, {
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
}, {
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
}, {
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
}, {
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
}, {
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
}, {
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
}, {
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
}, {
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
}, {
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
}, {
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
}, {
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
}, {
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
}, {
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
}, {
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
}, {
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
}, {
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
}, {
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
}, {
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
}, {
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
}, {
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
}, {
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
}, {
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
}, {
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
}, {
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
}, {
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
}, {
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
}, {
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
}, {
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
}, {
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
}, {
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
}, {
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
}, {
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
}, {
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
}, {
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
}]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: chartCandlestickLineColors[0],
|
||||
downward: chartCandlestickLineColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: [chartCandlestickLineColors[2], chartCandlestickLineColors[0]],
|
||||
stroke: {
|
||||
width: [3, 1]
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
custom: [function (_ref) {
|
||||
var seriesIndex = _ref.seriesIndex;
|
||||
var dataPointIndex = _ref.dataPointIndex;
|
||||
var w = _ref.w;
|
||||
|
||||
return w.globals.series[seriesIndex][dataPointIndex];
|
||||
}, function (_ref2) {
|
||||
var seriesIndex = _ref2.seriesIndex;
|
||||
var dataPointIndex = _ref2.dataPointIndex;
|
||||
var w = _ref2.w;
|
||||
|
||||
var o = w.globals.seriesCandleO[seriesIndex][dataPointIndex];
|
||||
var h = w.globals.seriesCandleH[seriesIndex][dataPointIndex];
|
||||
var l = w.globals.seriesCandleL[seriesIndex][dataPointIndex];
|
||||
var c = w.globals.seriesCandleC[seriesIndex][dataPointIndex];
|
||||
return '<div class="apexcharts-tooltip-candlestick">' + '<div>Open: <span class="value">' + o + '</span></div>' + '<div>High: <span class="value">' + h + '</span></div>' + '<div>Low: <span class="value">' + l + '</span></div>' + '<div>Close: <span class="value">' + c + '</span></div>' + '</div>';
|
||||
}]
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#candlestick_with_line"), options);
|
||||
chart.render();
|
||||
}
|
||||
1202
resources/js/pages/apexcharts-column.init.js
vendored
Executable file
1202
resources/js/pages/apexcharts-column.init.js
vendored
Executable file
File diff suppressed because it is too large
Load Diff
544
resources/js/pages/apexcharts-heatmap.init.js
vendored
Executable file
544
resources/js/pages/apexcharts-heatmap.init.js
vendored
Executable file
@@ -0,0 +1,544 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Heatmap Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function(value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Basic Heatmap Charts
|
||||
var chartHeatMapBasicColors = getChartColorsArray("basic_heatmap");
|
||||
if (chartHeatMapBasicColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Metric1',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric2',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric3',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric4',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric5',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric6',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric7',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric8',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric9',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 450,
|
||||
type: 'heatmap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
colors: [chartHeatMapBasicColors[0]],
|
||||
title: {
|
||||
text: 'HeatMap Chart (Single color)',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartHeatMapBasicColors[1]]
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_heatmap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Generate Data Script
|
||||
|
||||
function generateData(count, yrange) {
|
||||
var i = 0;
|
||||
var series = [];
|
||||
while (i < count) {
|
||||
var x = (i + 1).toString();
|
||||
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
||||
|
||||
series.push({
|
||||
x: x,
|
||||
y: y
|
||||
});
|
||||
i++;
|
||||
}
|
||||
return series;
|
||||
}
|
||||
|
||||
var data = [{
|
||||
name: 'W1',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W2',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W3',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W4',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W5',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W6',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W7',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W8',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W9',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W10',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W11',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W12',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W13',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W14',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'W15',
|
||||
data: generateData(8, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
}
|
||||
]
|
||||
|
||||
data.reverse()
|
||||
|
||||
var colors = ["#f7cc53", "#f1734f", "#663f59", "#6a6e94", "#4e88b4", "#00a7c6", "#18d8d8", '#a9d794', '#46aF78', '#a93f55', '#8c5e58', '#2176ff', '#5fd0f3', '#74788d', '#51d28c']
|
||||
|
||||
colors.reverse()
|
||||
|
||||
// Multiple Series - Heatmap
|
||||
var chartHeatMapMultipleColors = getChartColorsArray("multiple_heatmap");
|
||||
if (chartHeatMapMultipleColors) {
|
||||
var options = {
|
||||
series: data,
|
||||
chart: {
|
||||
height: 450,
|
||||
type: 'heatmap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
colors: [chartHeatMapMultipleColors[0], chartHeatMapMultipleColors[1], chartHeatMapMultipleColors[2], chartHeatMapMultipleColors[3], chartHeatMapMultipleColors[4], chartHeatMapMultipleColors[5], chartHeatMapMultipleColors[6], chartHeatMapMultipleColors[7]],
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
categories: ['10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '01:00', '01:30']
|
||||
},
|
||||
title: {
|
||||
text: 'HeatMap Chart (Different color shades for each series)',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
right: 20
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
colors: [chartHeatMapMultipleColors[8]]
|
||||
}
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#multiple_heatmap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Color Range
|
||||
var chartHeatMapColors = getChartColorsArray("color_heatmap");
|
||||
if (chartHeatMapColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Jan',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Feb',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Mar',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Apr',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'May',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Jun',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Jul',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Aug',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Sep',
|
||||
data: generateData(20, {
|
||||
min: -30,
|
||||
max: 55
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'heatmap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
heatmap: {
|
||||
shadeIntensity: 0.5,
|
||||
radius: 0,
|
||||
useFillColorAsStroke: true,
|
||||
colorScale: {
|
||||
ranges: [{
|
||||
from: -30,
|
||||
to: 5,
|
||||
name: 'Low',
|
||||
color: chartHeatMapColors[0]
|
||||
},
|
||||
{
|
||||
from: 6,
|
||||
to: 20,
|
||||
name: 'Medium',
|
||||
color: chartHeatMapColors[1]
|
||||
},
|
||||
{
|
||||
from: 21,
|
||||
to: 45,
|
||||
name: 'High',
|
||||
color: chartHeatMapColors[2]
|
||||
},
|
||||
{
|
||||
from: 46,
|
||||
to: 55,
|
||||
name: 'Extreme',
|
||||
color: chartHeatMapColors[3]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: 1
|
||||
},
|
||||
title: {
|
||||
text: 'HeatMap Chart with Color Range',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#color_heatmap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Heatmap - Range Without Shades
|
||||
var chartHeatMapShadesColors = getChartColorsArray("shades_heatmap");
|
||||
if (chartHeatMapShadesColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Metric1',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric2',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric3',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric4',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric5',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric6',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric7',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric8',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Metric8',
|
||||
data: generateData(20, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'heatmap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
plotOptions: {
|
||||
heatmap: {
|
||||
radius: 30,
|
||||
enableShades: false,
|
||||
colorScale: {
|
||||
ranges: [{
|
||||
from: 0,
|
||||
to: 50,
|
||||
color: chartHeatMapShadesColors[0]
|
||||
},
|
||||
{
|
||||
from: 51,
|
||||
to: 100,
|
||||
color: chartHeatMapShadesColors[1]
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#fff']
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'category',
|
||||
},
|
||||
title: {
|
||||
text: 'Rounded (Range without Shades)',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#shades_heatmap"), options);
|
||||
chart.render();
|
||||
}
|
||||
1453
resources/js/pages/apexcharts-line.init.js
vendored
Executable file
1453
resources/js/pages/apexcharts-line.init.js
vendored
Executable file
File diff suppressed because it is too large
Load Diff
370
resources/js/pages/apexcharts-mixed.init.js
vendored
Executable file
370
resources/js/pages/apexcharts-mixed.init.js
vendored
Executable file
@@ -0,0 +1,370 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Mixed Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Mixed - Line Column Chart
|
||||
var chartLineColumnColors = getChartColorsArray("line_column_chart");
|
||||
if(chartLineColumnColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Website Blog',
|
||||
type: 'column',
|
||||
data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160]
|
||||
}, {
|
||||
name: 'Social Media',
|
||||
type: 'line',
|
||||
data: [23, 42, 35, 27, 43, 22, 17, 31, 22, 22, 12, 16]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: [0, 4]
|
||||
},
|
||||
title: {
|
||||
text: 'Traffic Sources',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
enabledOnSeries: [1]
|
||||
},
|
||||
labels: ['01 Jan 2001', '02 Jan 2001', '03 Jan 2001', '04 Jan 2001', '05 Jan 2001', '06 Jan 2001', '07 Jan 2001', '08 Jan 2001', '09 Jan 2001', '10 Jan 2001', '11 Jan 2001', '12 Jan 2001'],
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: [{
|
||||
title: {
|
||||
text: 'Website Blog',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
|
||||
}, {
|
||||
opposite: true,
|
||||
title: {
|
||||
text: 'Social Media',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
}
|
||||
}],
|
||||
colors: chartLineColumnColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#line_column_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Multiple Y-Axis Charts
|
||||
var chartMultiColors = getChartColorsArray("multi_chart");
|
||||
if(chartMultiColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Income',
|
||||
type: 'column',
|
||||
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
|
||||
}, {
|
||||
name: 'Cashflow',
|
||||
type: 'column',
|
||||
data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
type: 'line',
|
||||
data: [20, 29, 37, 36, 44, 45, 50, 58]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: [1, 1, 4]
|
||||
},
|
||||
title: {
|
||||
text: 'XYZ - Stock Analysis (2009 - 2016)',
|
||||
align: 'left',
|
||||
offsetX: 110,
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016],
|
||||
},
|
||||
yaxis: [{
|
||||
axisTicks: {
|
||||
show: true,
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: '#038edc'
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#038edc',
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: "Income (thousand crores)",
|
||||
style: {
|
||||
color: '#038edc',
|
||||
fontWeight: 600
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
{
|
||||
seriesName: 'Income',
|
||||
opposite: true,
|
||||
axisTicks: {
|
||||
show: true,
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: '#038edc'
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#038edc',
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: "Operating Cashflow (thousand crores)",
|
||||
style: {
|
||||
color: '#038edc',
|
||||
fontWeight: 600
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
seriesName: 'Revenue',
|
||||
opposite: true,
|
||||
axisTicks: {
|
||||
show: true,
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: '#51d28c'
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#51d28c',
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "Revenue (thousand crores)",
|
||||
style: {
|
||||
color: '#51d28c',
|
||||
fontWeight: 600
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: true,
|
||||
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
|
||||
offsetY: 30,
|
||||
offsetX: 60
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
horizontalAlign: 'left',
|
||||
offsetX: 40
|
||||
},
|
||||
colors: chartMultiColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#multi_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Line & Area Charts
|
||||
var chartLineAreaColors = getChartColorsArray("line_area_chart");
|
||||
if(chartLineAreaColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'TEAM A',
|
||||
type: 'area',
|
||||
data: [44, 55, 31, 47, 31, 43, 26, 41, 31, 47, 33]
|
||||
}, {
|
||||
name: 'TEAM B',
|
||||
type: 'line',
|
||||
data: [55, 69, 45, 61, 43, 54, 37, 52, 44, 61, 43]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth'
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: [0.35, 1],
|
||||
},
|
||||
labels: ['Dec 01', 'Dec 02', 'Dec 03', 'Dec 04', 'Dec 05', 'Dec 06', 'Dec 07', 'Dec 08', 'Dec 09 ', 'Dec 10', 'Dec 11'],
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
yaxis: [{
|
||||
title: {
|
||||
text: 'Series A',
|
||||
},
|
||||
},
|
||||
{
|
||||
opposite: true,
|
||||
title: {
|
||||
text: 'Series B',
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " points";
|
||||
}
|
||||
return y;
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: chartLineAreaColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#line_area_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Line Cloumn & Area Charts
|
||||
|
||||
var chartLineAreaMultiColors = getChartColorsArray("line_area_charts");
|
||||
if(chartLineAreaMultiColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'TEAM A',
|
||||
type: 'column',
|
||||
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30]
|
||||
}, {
|
||||
name: 'TEAM B',
|
||||
type: 'area',
|
||||
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
|
||||
}, {
|
||||
name: 'TEAM C',
|
||||
type: 'line',
|
||||
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
stacked: false,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: [0, 2, 5],
|
||||
curve: 'smooth'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%'
|
||||
}
|
||||
},
|
||||
|
||||
fill: {
|
||||
opacity: [0.85, 0.25, 1],
|
||||
gradient: {
|
||||
inverseColors: false,
|
||||
shade: 'light',
|
||||
type: "vertical",
|
||||
opacityFrom: 0.85,
|
||||
opacityTo: 0.55,
|
||||
stops: [0, 100, 100, 100]
|
||||
}
|
||||
},
|
||||
labels: ['01/01/2003', '02/01/2003', '03/01/2003', '04/01/2003', '05/01/2003', '06/01/2003', '07/01/2003',
|
||||
'08/01/2003', '09/01/2003', '10/01/2003', '11/01/2003'
|
||||
],
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Points',
|
||||
},
|
||||
min: 0
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " points";
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: chartLineAreaMultiColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#line_area_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
348
resources/js/pages/apexcharts-pie.init.js
vendored
Executable file
348
resources/js/pages/apexcharts-pie.init.js
vendored
Executable file
@@ -0,0 +1,348 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Pie Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Simple Pie Charts
|
||||
|
||||
var chartPieBasicColors = getChartColorsArray("simple_pie_chart");
|
||||
if(chartPieBasicColors){
|
||||
var options = {
|
||||
series: [44, 55, 13, 43, 22],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'pie',
|
||||
},
|
||||
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
colors: chartPieBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#simple_pie_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Simple Donut Charts
|
||||
var chartDonutBasicColors = getChartColorsArray("simple_dount_chart");
|
||||
if(chartDonutBasicColors){
|
||||
var options = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'donut',
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
colors: chartDonutBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#simple_dount_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Updating Donut Charts
|
||||
var chartDonutupdatingColors = getChartColorsArray("updating_donut_chart");
|
||||
if(chartDonutupdatingColors){
|
||||
var options = {
|
||||
series: [44, 55, 13, 33],
|
||||
chart: {
|
||||
height: 280,
|
||||
type: 'donut',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
colors: chartDonutupdatingColors
|
||||
};
|
||||
|
||||
var upadatedonutchart = new ApexCharts(document.querySelector("#updating_donut_chart"), options);
|
||||
upadatedonutchart.render();
|
||||
|
||||
function appendData() {
|
||||
var arr = upadatedonutchart.w.globals.series.slice()
|
||||
arr.push(Math.floor(Math.random() * (100 - 1 + 1)) + 1)
|
||||
return arr;
|
||||
}
|
||||
|
||||
function removeData() {
|
||||
var arr = upadatedonutchart.w.globals.series.slice()
|
||||
arr.pop()
|
||||
return arr;
|
||||
}
|
||||
|
||||
function randomize() {
|
||||
return upadatedonutchart.w.globals.series.map(function () {
|
||||
return Math.floor(Math.random() * (100 - 1 + 1)) + 1
|
||||
})
|
||||
}
|
||||
|
||||
function reset() {
|
||||
return options.series
|
||||
}
|
||||
|
||||
document.querySelector("#randomize").addEventListener("click", function () {
|
||||
upadatedonutchart.updateSeries(randomize())
|
||||
})
|
||||
|
||||
document.querySelector("#add").addEventListener("click", function () {
|
||||
upadatedonutchart.updateSeries(appendData())
|
||||
})
|
||||
|
||||
document.querySelector("#remove").addEventListener("click", function () {
|
||||
upadatedonutchart.updateSeries(removeData())
|
||||
})
|
||||
|
||||
document.querySelector("#reset").addEventListener("click", function () {
|
||||
upadatedonutchart.updateSeries(reset())
|
||||
})
|
||||
}
|
||||
|
||||
// Gradient Donut Chart
|
||||
var chartPieGradientColors = getChartColorsArray("gradient_chart");
|
||||
if(chartPieGradientColors){
|
||||
var options = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'donut',
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
startAngle: -90,
|
||||
endAngle: 270
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
},
|
||||
legend: {
|
||||
formatter: function (val, opts) {
|
||||
return val + " - " + opts.w.globals.series[opts.seriesIndex]
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Gradient Donut with custom Start-angle',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
colors: chartPieGradientColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#gradient_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Pattern Donut chart
|
||||
var chartPiePatternColors = getChartColorsArray("pattern_chart");
|
||||
if(chartPiePatternColors){
|
||||
var options = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'donut',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
color: '#111',
|
||||
top: -1,
|
||||
left: 3,
|
||||
blur: 3,
|
||||
opacity: 0.2
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: 0,
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
total: {
|
||||
showAlways: true,
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: ["Comedy", "Action", "SciFi", "Drama", "Horror"],
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
blur: 3,
|
||||
opacity: 0.8
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'pattern',
|
||||
opacity: 1,
|
||||
pattern: {
|
||||
enabled: true,
|
||||
style: ['verticalLines', 'squares', 'horizontalLines', 'circles', 'slantedLines'],
|
||||
},
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
filter: 'none'
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
palette: 'palette2'
|
||||
},
|
||||
title: {
|
||||
text: "Favourite Movie Type",
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
colors: chartPiePatternColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#pattern_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Pie Chart with Image Fill
|
||||
var chartPieImageColors = getChartColorsArray("image_pie_chart");
|
||||
if(chartPieImageColors){
|
||||
var options = {
|
||||
series: [44, 33, 54, 45],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'pie',
|
||||
},
|
||||
colors: ['#93C3EE', '#E5C6A0', '#669DB5', '#94A74A'],
|
||||
fill: {
|
||||
type: 'image',
|
||||
opacity: 0.85,
|
||||
image: {
|
||||
src: ['./assets/images/small/img-1.jpg', './assets/images/small/img-2.jpg', './assets/images/small/img-3.jpg', './assets/images/small/img-4.jpg'],
|
||||
width: 25,
|
||||
imagedHeight: 25
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 4
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
colors: ['#111']
|
||||
},
|
||||
background: {
|
||||
enabled: true,
|
||||
foreColor: '#fff',
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#image_pie_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// monochrome_pie_chart
|
||||
var options = {
|
||||
series: [25, 15, 44, 55, 41, 17],
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'pie',
|
||||
},
|
||||
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
|
||||
theme: {
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
color: '#405189',
|
||||
shadeTo: 'light',
|
||||
shadeIntensity: 0.6
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
pie: {
|
||||
dataLabels: {
|
||||
offset: -5
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: "Monochrome Pie",
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
formatter: function (val, opts) {
|
||||
var name = opts.w.globals.labels[opts.seriesIndex];
|
||||
return [name, val.toFixed(1) + '%'];
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
};
|
||||
|
||||
if(document.querySelector("#monochrome_pie_chart")){
|
||||
var chart = new ApexCharts(document.querySelector("#monochrome_pie_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
108
resources/js/pages/apexcharts-polararea.init.js
vendored
Executable file
108
resources/js/pages/apexcharts-polararea.init.js
vendored
Executable file
@@ -0,0 +1,108 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Polar Area Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Polar Area
|
||||
var chartPolarareaBasicColors = getChartColorsArray("basic_polar_area");
|
||||
if(chartPolarareaBasicColors){
|
||||
var options = {
|
||||
series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
|
||||
chart: {
|
||||
type: 'polarArea',
|
||||
width: 400,
|
||||
},
|
||||
labels: ['Series A', 'Series B', 'Series C', 'Series D', 'Series E', 'Series F', 'Series G', 'Series H', 'Series I'],
|
||||
stroke: {
|
||||
colors: ['#fff']
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.8
|
||||
},
|
||||
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
colors: chartPolarareaBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_polar_area"), options);
|
||||
chart.render();
|
||||
}
|
||||
// Polar-Area Monochrome Charts
|
||||
|
||||
var options = {
|
||||
series: [42, 47, 52, 58, 65],
|
||||
chart: {
|
||||
width: 400,
|
||||
type: 'polarArea'
|
||||
},
|
||||
labels: ['Rose A', 'Rose B', 'Rose C', 'Rose D', 'Rose E'],
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
stroke: {
|
||||
width: 1,
|
||||
colors: undefined
|
||||
},
|
||||
yaxis: {
|
||||
show: false
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
plotOptions: {
|
||||
polarArea: {
|
||||
rings: {
|
||||
strokeWidth: 0
|
||||
},
|
||||
spokes: {
|
||||
strokeWidth: 0
|
||||
},
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
mode: 'light',
|
||||
palette: 'palette1',
|
||||
monochrome: {
|
||||
enabled: true,
|
||||
shadeTo: 'light',
|
||||
color: '#405189',
|
||||
shadeIntensity: 0.6
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if(document.querySelector("#monochrome_polar_area")){
|
||||
var chart = new ApexCharts(document.querySelector("#monochrome_polar_area"), options);
|
||||
chart.render();
|
||||
}
|
||||
171
resources/js/pages/apexcharts-radar.init.js
vendored
Executable file
171
resources/js/pages/apexcharts-radar.init.js
vendored
Executable file
@@ -0,0 +1,171 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.comom
|
||||
File: Radar Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Radar Chart
|
||||
var chartRadarBasicColors = getChartColorsArray("basic_radar");
|
||||
if(chartRadarBasicColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Series 1',
|
||||
data: [80, 50, 30, 40, 100, 20],
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: chartRadarBasicColors,
|
||||
xaxis: {
|
||||
categories: ['January', 'February', 'March', 'April', 'May', 'June']
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_radar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Radar Chart - Multi series
|
||||
var chartRadarMultiColors = getChartColorsArray("multi_radar");
|
||||
if(chartRadarMultiColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Series 1',
|
||||
data: [80, 50, 30, 40, 100, 20],
|
||||
},
|
||||
{
|
||||
name: 'Series 2',
|
||||
data: [20, 30, 40, 80, 20, 80],
|
||||
},
|
||||
{
|
||||
name: 'Series 3',
|
||||
data: [44, 76, 78, 13, 43, 10],
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radar',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 1,
|
||||
left: 1,
|
||||
top: 1
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.2
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: chartRadarMultiColors,
|
||||
xaxis: {
|
||||
categories: ['2014', '2015', '2016', '2017', '2018', '2019']
|
||||
}
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#multi_radar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Polygon - Radar Charts
|
||||
var chartRadarPolyradarColors = getChartColorsArray("polygon_radar");
|
||||
if(chartRadarPolyradarColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Series 1',
|
||||
data: [20, 100, 40, 30, 50, 80, 33],
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radar',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
},
|
||||
plotOptions: {
|
||||
radar: {
|
||||
size: 140,
|
||||
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Radar with Polygon Fill',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
colors: chartRadarPolyradarColors,
|
||||
markers: {
|
||||
size: 4,
|
||||
colors: ['#fff'],
|
||||
strokeColor: '#f34e4e',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 7,
|
||||
labels: {
|
||||
formatter: function (val, i) {
|
||||
if (i % 2 === 0) {
|
||||
return val
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#polygon_radar"), options);
|
||||
chart.render();
|
||||
}
|
||||
399
resources/js/pages/apexcharts-radialbar.init.js
vendored
Executable file
399
resources/js/pages/apexcharts-radialbar.init.js
vendored
Executable file
@@ -0,0 +1,399 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Radialbar Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Radialbar Charts
|
||||
var chartRadialbarBasicColors = getChartColorsArray("basic_radialbar");
|
||||
if(chartRadialbarBasicColors){
|
||||
var options = {
|
||||
series: [70],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '70%',
|
||||
}
|
||||
},
|
||||
},
|
||||
labels: ['Cricket'],
|
||||
colors: chartRadialbarBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Multi-Radial Bar
|
||||
var chartRadialbarMultipleColors = getChartColorsArray("multiple_radialbar");
|
||||
if(chartRadialbarMultipleColors){
|
||||
var options = {
|
||||
series: [44, 55, 67, 83],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '22px',
|
||||
},
|
||||
value: {
|
||||
fontSize: '16px',
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: 'Total',
|
||||
formatter: function (w) {
|
||||
return 249
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
|
||||
colors: chartRadialbarMultipleColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#multiple_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Circle Chart - Custom Angle
|
||||
var chartRadialbarCircleColors = getChartColorsArray("circle_radialbar");
|
||||
if(chartRadialbarCircleColors){
|
||||
var options = {
|
||||
series: [76, 67, 61, 55],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: 0,
|
||||
startAngle: 0,
|
||||
endAngle: 270,
|
||||
hollow: {
|
||||
margin: 5,
|
||||
size: '30%',
|
||||
background: 'transparent',
|
||||
image: undefined,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
show: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: chartRadialbarCircleColors,
|
||||
labels: ['Vimeo', 'Messenger', 'Facebook', 'LinkedIn'],
|
||||
legend: {
|
||||
show: true,
|
||||
floating: true,
|
||||
fontSize: '16px',
|
||||
position: 'left',
|
||||
offsetX: 160,
|
||||
offsetY: 15,
|
||||
labels: {
|
||||
useSeriesColors: true,
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
formatter: function (seriesName, opts) {
|
||||
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex]
|
||||
},
|
||||
itemMargin: {
|
||||
vertical: 3
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#circle_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Gradient Radialbar
|
||||
var chartRadialbarGradientColors = getChartColorsArray("gradient_radialbar");
|
||||
if(chartRadialbarGradientColors){
|
||||
var options = {
|
||||
series: [75],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'radialBar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -135,
|
||||
endAngle: 225,
|
||||
hollow: {
|
||||
margin: 0,
|
||||
size: '70%',
|
||||
image: undefined,
|
||||
imageOffsetX: 0,
|
||||
imageOffsetY: 0,
|
||||
position: 'front',
|
||||
},
|
||||
track: {
|
||||
strokeWidth: '67%',
|
||||
margin: 0, // margin is in pixels
|
||||
|
||||
},
|
||||
|
||||
dataLabels: {
|
||||
show: true,
|
||||
name: {
|
||||
offsetY: -10,
|
||||
show: true,
|
||||
color: '#888',
|
||||
fontSize: '17px'
|
||||
},
|
||||
value: {
|
||||
formatter: function (val) {
|
||||
return parseInt(val);
|
||||
},
|
||||
color: '#111',
|
||||
fontSize: '36px',
|
||||
show: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
type: 'horizontal',
|
||||
shadeIntensity: 0.5,
|
||||
gradientToColors: chartRadialbarGradientColors,
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 100]
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
labels: ['Percent'],
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#gradient_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Stroked Gauge
|
||||
var chartStorkeRadialbarColors = getChartColorsArray("stroked_radialbar");
|
||||
if(chartStorkeRadialbarColors){
|
||||
var options = {
|
||||
series: [67],
|
||||
chart: {
|
||||
height: 326,
|
||||
type: 'radialBar',
|
||||
offsetY: -10
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -135,
|
||||
endAngle: 135,
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '16px',
|
||||
color: undefined,
|
||||
offsetY: 120
|
||||
},
|
||||
value: {
|
||||
offsetY: 76,
|
||||
fontSize: '22px',
|
||||
color: undefined,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.15,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 65, 91]
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
dashArray: 4
|
||||
},
|
||||
labels: ['Median Ratio'],
|
||||
colors: chartStorkeRadialbarColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#stroked_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
|
||||
// Radialbars with Image
|
||||
var chartStorkeRadialbarColors = getChartColorsArray("stroked_radialbar");
|
||||
if (chartStorkeRadialbarColors) {
|
||||
var options = {
|
||||
series: [67],
|
||||
chart: {
|
||||
height: 315,
|
||||
type: 'radialBar',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
margin: 15,
|
||||
size: '65%',
|
||||
image: './assets/images/comingsoon.png',
|
||||
imageWidth: 56,
|
||||
imageHeight: 56,
|
||||
imageClipped: false
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
color: '#fff'
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
color: '#333',
|
||||
offsetY: 65,
|
||||
fontSize: '22px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'image',
|
||||
image: {
|
||||
src: ['./assets/images/small/img-4.jpg'],
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
labels: ['Volatility'],
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#radialbar_with_img"), options);
|
||||
chart.render();
|
||||
};
|
||||
|
||||
|
||||
// Semi Circle
|
||||
var chartSemiRadialbarColors = getChartColorsArray("semi_radialbar");
|
||||
if(chartSemiRadialbarColors){
|
||||
var options = {
|
||||
series: [76],
|
||||
chart: {
|
||||
type: 'radialBar',
|
||||
height: 350,
|
||||
offsetY: -20,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
track: {
|
||||
background: "#e7e7e7",
|
||||
strokeWidth: '97%',
|
||||
margin: 5, // margin is in pixels
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 2,
|
||||
left: 0,
|
||||
color: '#999',
|
||||
opacity: 1,
|
||||
blur: 2
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false
|
||||
},
|
||||
value: {
|
||||
offsetY: -2,
|
||||
fontSize: '22px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -10
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
shadeIntensity: 0.4,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 53, 91]
|
||||
},
|
||||
},
|
||||
labels: ['Average Results'],
|
||||
colors: chartSemiRadialbarColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#semi_radialbar"), options);
|
||||
chart.render();
|
||||
}
|
||||
359
resources/js/pages/apexcharts-scatter.init.js
vendored
Executable file
359
resources/js/pages/apexcharts-scatter.init.js
vendored
Executable file
@@ -0,0 +1,359 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Scatter Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Scatter Charts
|
||||
var chartScatterBasicColors = getChartColorsArray("basic_scatter");
|
||||
if(chartScatterBasicColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: "SAMPLE A",
|
||||
data: [
|
||||
[16.4, 5.4],
|
||||
[21.7, 2],
|
||||
[25.4, 3],
|
||||
[19, 2],
|
||||
[10.9, 1],
|
||||
[13.6, 3.2],
|
||||
[10.9, 7.4],
|
||||
[10.9, 0],
|
||||
[10.9, 8.2],
|
||||
[16.4, 0],
|
||||
[16.4, 1.8],
|
||||
[13.6, 0.3],
|
||||
[13.6, 0],
|
||||
[29.9, 0],
|
||||
[27.1, 2.3],
|
||||
[16.4, 0],
|
||||
[13.6, 3.7],
|
||||
[10.9, 5.2],
|
||||
[16.4, 6.5],
|
||||
[10.9, 0],
|
||||
[24.5, 7.1],
|
||||
[10.9, 0],
|
||||
[8.1, 4.7],
|
||||
[19, 0],
|
||||
[21.7, 1.8],
|
||||
[27.1, 0],
|
||||
[24.5, 0],
|
||||
[27.1, 0],
|
||||
[29.9, 1.5],
|
||||
[27.1, 0.8],
|
||||
[22.1, 2]
|
||||
]
|
||||
}, {
|
||||
name: "SAMPLE B",
|
||||
data: [
|
||||
[36.4, 13.4],
|
||||
[1.7, 11],
|
||||
[5.4, 8],
|
||||
[9, 17],
|
||||
[1.9, 4],
|
||||
[3.6, 12.2],
|
||||
[1.9, 14.4],
|
||||
[1.9, 9],
|
||||
[1.9, 13.2],
|
||||
[1.4, 7],
|
||||
[6.4, 8.8],
|
||||
[3.6, 4.3],
|
||||
[1.6, 10],
|
||||
[9.9, 2],
|
||||
[7.1, 15],
|
||||
[1.4, 0],
|
||||
[3.6, 13.7],
|
||||
[1.9, 15.2],
|
||||
[6.4, 16.5],
|
||||
[0.9, 10],
|
||||
[4.5, 17.1],
|
||||
[10.9, 10],
|
||||
[0.1, 14.7],
|
||||
[9, 10],
|
||||
[12.7, 11.8],
|
||||
[2.1, 10],
|
||||
[2.5, 10],
|
||||
[27.1, 10],
|
||||
[2.9, 11.5],
|
||||
[7.1, 10.8],
|
||||
[2.1, 12]
|
||||
]
|
||||
}, {
|
||||
name: "SAMPLE C",
|
||||
data: [
|
||||
[21.7, 3],
|
||||
[23.6, 3.5],
|
||||
[24.6, 3],
|
||||
[29.9, 3],
|
||||
[21.7, 20],
|
||||
[23, 2],
|
||||
[10.9, 3],
|
||||
[28, 4],
|
||||
[27.1, 0.3],
|
||||
[16.4, 4],
|
||||
[13.6, 0],
|
||||
[19, 5],
|
||||
[22.4, 3],
|
||||
[24.5, 3],
|
||||
[32.6, 3],
|
||||
[27.1, 4],
|
||||
[29.6, 6],
|
||||
[31.6, 8],
|
||||
[21.6, 5],
|
||||
[20.9, 4],
|
||||
[22.4, 0],
|
||||
[32.6, 10.3],
|
||||
[29.7, 20.8],
|
||||
[24.5, 0.8],
|
||||
[21.4, 0],
|
||||
[21.7, 6.9],
|
||||
[28.6, 7.7],
|
||||
[15.4, 0],
|
||||
[18.1, 0],
|
||||
[33.4, 0],
|
||||
[16.4, 0]
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'scatter',
|
||||
zoom: {
|
||||
enabled: true,
|
||||
type: 'xy'
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 10,
|
||||
labels: {
|
||||
formatter: function (val) {
|
||||
return parseFloat(val).toFixed(1)
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 7
|
||||
},
|
||||
colors: chartScatterBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_scatter"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Dtaetime - Scatter Charts
|
||||
|
||||
function generateDayWiseTimeSeries(baseval, count, yrange) {
|
||||
var i = 0;
|
||||
var series = [];
|
||||
while (i < count) {
|
||||
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
||||
|
||||
series.push([baseval, y]);
|
||||
baseval += 86400000;
|
||||
i++;
|
||||
}
|
||||
return series;
|
||||
}
|
||||
|
||||
var chartScatterDateTimeColors = getChartColorsArray("datetime_scatter");
|
||||
if(chartScatterDateTimeColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'TEAM 1',
|
||||
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'TEAM 2',
|
||||
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 20, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'TEAM 3',
|
||||
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 30, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'TEAM 4',
|
||||
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'TEAM 5',
|
||||
data: generateDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 30, {
|
||||
min: 10,
|
||||
max: 60
|
||||
})
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'scatter',
|
||||
zoom: {
|
||||
type: 'xy'
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
},
|
||||
yaxis: {
|
||||
max: 70
|
||||
},
|
||||
colors: chartScatterDateTimeColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#datetime_scatter"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Scatter - Images Charts
|
||||
var chartScatterImagesColors = getChartColorsArray("images_scatter");
|
||||
if(chartScatterImagesColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'User A',
|
||||
data: [
|
||||
[16.4, 5.4],
|
||||
[21.7, 4],
|
||||
[25.4, 3],
|
||||
[19, 2],
|
||||
[10.9, 1],
|
||||
[13.6, 3.2],
|
||||
[10.9, 7],
|
||||
[10.9, 8.2],
|
||||
[16.4, 4],
|
||||
[13.6, 4.3],
|
||||
[13.6, 12],
|
||||
[29.9, 3],
|
||||
[10.9, 5.2],
|
||||
[16.4, 6.5],
|
||||
[10.9, 8],
|
||||
[24.5, 7.1],
|
||||
[10.9, 7],
|
||||
[8.1, 4.7],
|
||||
]
|
||||
}, {
|
||||
name: 'User B',
|
||||
data: [
|
||||
[6.4, 5.4],
|
||||
[11.7, 4],
|
||||
[15.4, 3],
|
||||
[9, 2],
|
||||
[10.9, 11],
|
||||
[20.9, 7],
|
||||
[12.9, 8.2],
|
||||
[6.4, 14],
|
||||
[11.6, 12]
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'scatter',
|
||||
animations: {
|
||||
enabled: false,
|
||||
},
|
||||
zoom: {
|
||||
enabled: false,
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: chartScatterImagesColors,
|
||||
xaxis: {
|
||||
tickAmount: 10,
|
||||
min: 0,
|
||||
max: 40
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 7
|
||||
},
|
||||
markers: {
|
||||
size: 20
|
||||
},
|
||||
fill: {
|
||||
type: 'image',
|
||||
opacity: 1,
|
||||
image: {
|
||||
src: ['./assets/images/users/avatar-1.jpg', './assets/images/users/avatar-2.jpg'],
|
||||
width: 40,
|
||||
height: 40
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
useSeriesColors: true
|
||||
},
|
||||
markers: {
|
||||
customHTML: [
|
||||
function () {
|
||||
return ''
|
||||
},
|
||||
function () {
|
||||
return ''
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#images_scatter"), options);
|
||||
chart.render();
|
||||
}
|
||||
640
resources/js/pages/apexcharts-timeline.init.js
vendored
Executable file
640
resources/js/pages/apexcharts-timeline.init.js
vendored
Executable file
@@ -0,0 +1,640 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Timeline Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Basic Timeline Charts
|
||||
var chartTimelineBasicColors = getChartColorsArray("basic_timeline");
|
||||
if(chartTimelineBasicColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-02').getTime(),
|
||||
new Date('2019-03-04').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-04').getTime(),
|
||||
new Date('2019-03-08').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Validation',
|
||||
y: [
|
||||
new Date('2019-03-08').getTime(),
|
||||
new Date('2019-03-12').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Deployment',
|
||||
y: [
|
||||
new Date('2019-03-12').getTime(),
|
||||
new Date('2019-03-18').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'rangeBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
colors: chartTimelineBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_timeline"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
|
||||
// Different Color For Each Bar
|
||||
var chartTimelineColors = getChartColorsArray("color_timeline");
|
||||
if(chartTimelineColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: 'Analysis',
|
||||
y: [
|
||||
new Date('2019-02-27').getTime(),
|
||||
new Date('2019-03-04').getTime()
|
||||
],
|
||||
fillColor: chartTimelineColors[0]
|
||||
},
|
||||
{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-04').getTime(),
|
||||
new Date('2019-03-08').getTime()
|
||||
],
|
||||
fillColor: chartTimelineColors[1]
|
||||
},
|
||||
{
|
||||
x: 'Coding',
|
||||
y: [
|
||||
new Date('2019-03-07').getTime(),
|
||||
new Date('2019-03-10').getTime()
|
||||
],
|
||||
fillColor: chartTimelineColors[2]
|
||||
},
|
||||
{
|
||||
x: 'Testing',
|
||||
y: [
|
||||
new Date('2019-03-08').getTime(),
|
||||
new Date('2019-03-12').getTime()
|
||||
],
|
||||
fillColor: chartTimelineColors[3]
|
||||
},
|
||||
{
|
||||
x: 'Deployment',
|
||||
y: [
|
||||
new Date('2019-03-12').getTime(),
|
||||
new Date('2019-03-17').getTime()
|
||||
],
|
||||
fillColor: chartTimelineColors[4]
|
||||
}
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'rangeBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
distributed: true,
|
||||
dataLabels: {
|
||||
hideOverflowingLabels: false
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val, opts) {
|
||||
var label = opts.w.globals.labels[opts.dataPointIndex]
|
||||
var a = moment(val[0])
|
||||
var b = moment(val[1])
|
||||
var diff = b.diff(a, 'days')
|
||||
return label + ': ' + diff + (diff > 1 ? ' days' : ' day')
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
show: true
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#color_timeline"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Multi Series Timeline
|
||||
var chartTimelineMultiSeriesColors = getChartColorsArray("multi_series");
|
||||
if(chartTimelineMultiSeriesColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Bob',
|
||||
data: [{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-05').getTime(),
|
||||
new Date('2019-03-08').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-08').getTime(),
|
||||
new Date('2019-03-11').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-11').getTime(),
|
||||
new Date('2019-03-16').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Joe',
|
||||
data: [{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-02').getTime(),
|
||||
new Date('2019-03-05').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-06').getTime(),
|
||||
new Date('2019-03-09').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-10').getTime(),
|
||||
new Date('2019-03-19').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'rangeBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val) {
|
||||
var a = moment(val[0])
|
||||
var b = moment(val[1])
|
||||
var diff = b.diff(a, 'days')
|
||||
return diff + (diff > 1 ? ' days' : ' day')
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shade: 'light',
|
||||
type: 'vertical',
|
||||
shadeIntensity: 0.25,
|
||||
gradientToColors: undefined,
|
||||
inverseColors: true,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [50, 0, 100, 100]
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
legend: {
|
||||
position: 'top'
|
||||
},
|
||||
colors: chartTimelineMultiSeriesColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#multi_series"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Advanced Timeline (Multiple Range)
|
||||
var chartTimelineAdvancedColors = getChartColorsArray("advanced_timeline");
|
||||
if(chartTimelineAdvancedColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Bob',
|
||||
data: [{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-05').getTime(),
|
||||
new Date('2019-03-08').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-02').getTime(),
|
||||
new Date('2019-03-05').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-05').getTime(),
|
||||
new Date('2019-03-07').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-03').getTime(),
|
||||
new Date('2019-03-09').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-08').getTime(),
|
||||
new Date('2019-03-11').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Validation',
|
||||
y: [
|
||||
new Date('2019-03-11').getTime(),
|
||||
new Date('2019-03-16').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-01').getTime(),
|
||||
new Date('2019-03-03').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Joe',
|
||||
data: [{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-02').getTime(),
|
||||
new Date('2019-03-05').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Test',
|
||||
y: [
|
||||
new Date('2019-03-06').getTime(),
|
||||
new Date('2019-03-16').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-03').getTime(),
|
||||
new Date('2019-03-07').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Deployment',
|
||||
y: [
|
||||
new Date('2019-03-20').getTime(),
|
||||
new Date('2019-03-22').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Design',
|
||||
y: [
|
||||
new Date('2019-03-10').getTime(),
|
||||
new Date('2019-03-16').getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Dan',
|
||||
data: [{
|
||||
x: 'Code',
|
||||
y: [
|
||||
new Date('2019-03-10').getTime(),
|
||||
new Date('2019-03-17').getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Validation',
|
||||
y: [
|
||||
new Date('2019-03-05').getTime(),
|
||||
new Date('2019-03-09').getTime()
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'rangeBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '80%'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
stroke: {
|
||||
width: 1
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: 0.6
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left'
|
||||
},
|
||||
colors: chartTimelineAdvancedColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#advanced_timeline"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Multiple series <20> Group rows
|
||||
var chartMultiSeriesGroupColors = getChartColorsArray("multi_series_group");
|
||||
if (chartMultiSeriesGroupColors) {
|
||||
var options = {
|
||||
series: [
|
||||
// George Washington
|
||||
{
|
||||
name: 'George Washington',
|
||||
data: [
|
||||
{
|
||||
x: 'President',
|
||||
y: [
|
||||
new Date(1789, 3, 30).getTime(),
|
||||
new Date(1797, 2, 4).getTime()
|
||||
]
|
||||
},
|
||||
]
|
||||
},
|
||||
// John Adams
|
||||
{
|
||||
name: 'John Adams',
|
||||
data: [
|
||||
{
|
||||
x: 'President',
|
||||
y: [
|
||||
new Date(1797, 2, 4).getTime(),
|
||||
new Date(1801, 2, 4).getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Vice President',
|
||||
y: [
|
||||
new Date(1789, 3, 21).getTime(),
|
||||
new Date(1797, 2, 4).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Thomas Jefferson
|
||||
{
|
||||
name: 'Thomas Jefferson',
|
||||
data: [
|
||||
{
|
||||
x: 'President',
|
||||
y: [
|
||||
new Date(1801, 2, 4).getTime(),
|
||||
new Date(1809, 2, 4).getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Vice President',
|
||||
y: [
|
||||
new Date(1797, 2, 4).getTime(),
|
||||
new Date(1801, 2, 4).getTime()
|
||||
]
|
||||
},
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1790, 2, 22).getTime(),
|
||||
new Date(1793, 11, 31).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Aaron Burr
|
||||
{
|
||||
name: 'Aaron Burr',
|
||||
data: [
|
||||
{
|
||||
x: 'Vice President',
|
||||
y: [
|
||||
new Date(1801, 2, 4).getTime(),
|
||||
new Date(1805, 2, 4).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// George Clinton
|
||||
{
|
||||
name: 'George Clinton',
|
||||
data: [
|
||||
{
|
||||
x: 'Vice President',
|
||||
y: [
|
||||
new Date(1805, 2, 4).getTime(),
|
||||
new Date(1812, 3, 20).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// John Jay
|
||||
{
|
||||
name: 'John Jay',
|
||||
data: [
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1789, 8, 25).getTime(),
|
||||
new Date(1790, 2, 22).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Edmund Randolph
|
||||
{
|
||||
name: 'Edmund Randolph',
|
||||
data: [
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1794, 0, 2).getTime(),
|
||||
new Date(1795, 7, 20).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Timothy Pickering
|
||||
{
|
||||
name: 'Timothy Pickering',
|
||||
data: [
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1795, 7, 20).getTime(),
|
||||
new Date(1800, 4, 12).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// Charles Lee
|
||||
{
|
||||
name: 'Charles Lee',
|
||||
data: [
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1800, 4, 13).getTime(),
|
||||
new Date(1800, 5, 5).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// John Marshall
|
||||
{
|
||||
name: 'John Marshall',
|
||||
data: [
|
||||
{
|
||||
x: 'Secretary of State',
|
||||
y: [
|
||||
new Date(1800, 5, 13).getTime(),
|
||||
new Date(1801, 2, 4).getTime()
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'rangeBar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
barHeight: '35%',
|
||||
rangeBarGroupRows: true
|
||||
}
|
||||
},
|
||||
colors: chartMultiSeriesGroupColors,
|
||||
fill: {
|
||||
type: 'solid'
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
legend: {
|
||||
position: 'right'
|
||||
},
|
||||
tooltip: {
|
||||
custom: function (opts) {
|
||||
const fromYear = new Date(opts.y1).getFullYear()
|
||||
const toYear = new Date(opts.y2).getFullYear()
|
||||
const values = opts.ctx.rangeBar.getTooltipValues(opts)
|
||||
|
||||
return (
|
||||
'<div class="apexcharts-tooltip-rangebar">' +
|
||||
'<div> <span class="series-name" style="color: ' +
|
||||
values.color +
|
||||
'">' +
|
||||
(values.seriesName ? values.seriesName : '') +
|
||||
'</span></div>' +
|
||||
'<div> <span class="category">' +
|
||||
values.ylabel +
|
||||
' </span> <span class="value start-value">' +
|
||||
fromYear +
|
||||
'</span> <span class="separator">-</span> <span class="value end-value">' +
|
||||
toYear +
|
||||
'</span></div>' +
|
||||
'</div>'
|
||||
)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#multi_series_group"), options);
|
||||
chart.render();
|
||||
}
|
||||
389
resources/js/pages/apexcharts-treemap.init.js
vendored
Executable file
389
resources/js/pages/apexcharts-treemap.init.js
vendored
Executable file
@@ -0,0 +1,389 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Treemaps Chart init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Basic Treemaps
|
||||
var chartTreemapBasicColors = getChartColorsArray("basic_treemap");
|
||||
if(chartTreemapBasicColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: 'New Delhi',
|
||||
y: 218
|
||||
},
|
||||
{
|
||||
x: 'Kolkata',
|
||||
y: 149
|
||||
},
|
||||
{
|
||||
x: 'Mumbai',
|
||||
y: 184
|
||||
},
|
||||
{
|
||||
x: 'Ahmedabad',
|
||||
y: 55
|
||||
},
|
||||
{
|
||||
x: 'Bangaluru',
|
||||
y: 84
|
||||
},
|
||||
{
|
||||
x: 'Pune',
|
||||
y: 31
|
||||
},
|
||||
{
|
||||
x: 'Chennai',
|
||||
y: 70
|
||||
},
|
||||
{
|
||||
x: 'Jaipur',
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 'Surat',
|
||||
y: 44
|
||||
},
|
||||
{
|
||||
x: 'Hyderabad',
|
||||
y: 68
|
||||
},
|
||||
{
|
||||
x: 'Lucknow',
|
||||
y: 28
|
||||
},
|
||||
{
|
||||
x: 'Indore',
|
||||
y: 19
|
||||
},
|
||||
{
|
||||
x: 'Kanpur',
|
||||
y: 29
|
||||
}
|
||||
]
|
||||
}],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'treemap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
colors: chartTreemapBasicColors,
|
||||
title: {
|
||||
text: 'Basic Treemap',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#basic_treemap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Multi - Dimensional Treemap
|
||||
var chartTreemapMultiColors = getChartColorsArray("multi_treemap");
|
||||
if(chartTreemapMultiColors){
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Desktops',
|
||||
data: [{
|
||||
x: 'ABC',
|
||||
y: 10
|
||||
},
|
||||
{
|
||||
x: 'DEF',
|
||||
y: 60
|
||||
},
|
||||
{
|
||||
x: 'XYZ',
|
||||
y: 41
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Mobile',
|
||||
data: [{
|
||||
x: 'ABCD',
|
||||
y: 10
|
||||
},
|
||||
{
|
||||
x: 'DEFG',
|
||||
y: 20
|
||||
},
|
||||
{
|
||||
x: 'WXYZ',
|
||||
y: 51
|
||||
},
|
||||
{
|
||||
x: 'PQR',
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 'MNO',
|
||||
y: 20
|
||||
},
|
||||
{
|
||||
x: 'CDE',
|
||||
y: 30
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'treemap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Multi-dimensional Treemap',
|
||||
align: 'center',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
}
|
||||
},
|
||||
colors: chartTreemapMultiColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#multi_treemap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Distributed Treemap
|
||||
|
||||
var chartTreemapDistributedColors = getChartColorsArray("distributed_treemap");
|
||||
if(chartTreemapDistributedColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: 'New Delhi',
|
||||
y: 218
|
||||
},
|
||||
{
|
||||
x: 'Kolkata',
|
||||
y: 149
|
||||
},
|
||||
{
|
||||
x: 'Mumbai',
|
||||
y: 184
|
||||
},
|
||||
{
|
||||
x: 'Ahmedabad',
|
||||
y: 55
|
||||
},
|
||||
{
|
||||
x: 'Bangaluru',
|
||||
y: 84
|
||||
},
|
||||
{
|
||||
x: 'Pune',
|
||||
y: 31
|
||||
},
|
||||
{
|
||||
x: 'Chennai',
|
||||
y: 70
|
||||
},
|
||||
{
|
||||
x: 'Jaipur',
|
||||
y: 30
|
||||
},
|
||||
{
|
||||
x: 'Surat',
|
||||
y: 44
|
||||
},
|
||||
{
|
||||
x: 'Hyderabad',
|
||||
y: 68
|
||||
},
|
||||
{
|
||||
x: 'Lucknow',
|
||||
y: 28
|
||||
},
|
||||
{
|
||||
x: 'Indore',
|
||||
y: 19
|
||||
},
|
||||
{
|
||||
x: 'Kanpur',
|
||||
y: 29
|
||||
}
|
||||
]
|
||||
}],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'treemap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Distibuted Treemap (different color for each cell)',
|
||||
align: 'center',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
}
|
||||
},
|
||||
colors: chartTreemapDistributedColors,
|
||||
plotOptions: {
|
||||
treemap: {
|
||||
distributed: true,
|
||||
enableShades: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#distributed_treemap"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Color Range Treemaps
|
||||
var chartTreemapRangeColors = getChartColorsArray("color_range_treemap");
|
||||
if(chartTreemapRangeColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: 'INTC',
|
||||
y: 1.2
|
||||
},
|
||||
{
|
||||
x: 'GS',
|
||||
y: 0.4
|
||||
},
|
||||
{
|
||||
x: 'CVX',
|
||||
y: -1.4
|
||||
},
|
||||
{
|
||||
x: 'GE',
|
||||
y: 2.7
|
||||
},
|
||||
{
|
||||
x: 'CAT',
|
||||
y: -0.3
|
||||
},
|
||||
{
|
||||
x: 'RTX',
|
||||
y: 5.1
|
||||
},
|
||||
{
|
||||
x: 'CSCO',
|
||||
y: -2.3
|
||||
},
|
||||
{
|
||||
x: 'JNJ',
|
||||
y: 2.1
|
||||
},
|
||||
{
|
||||
x: 'PG',
|
||||
y: 0.3
|
||||
},
|
||||
{
|
||||
x: 'TRV',
|
||||
y: 0.12
|
||||
},
|
||||
{
|
||||
x: 'MMM',
|
||||
y: -2.31
|
||||
},
|
||||
{
|
||||
x: 'NKE',
|
||||
y: 3.98
|
||||
},
|
||||
{
|
||||
x: 'IYT',
|
||||
y: 1.67
|
||||
}
|
||||
]
|
||||
}],
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'treemap',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Treemap with Color scale',
|
||||
style: {
|
||||
fontWeight: 500,
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
},
|
||||
formatter: function (text, op) {
|
||||
return [text, op.value]
|
||||
},
|
||||
offsetY: -4
|
||||
},
|
||||
plotOptions: {
|
||||
treemap: {
|
||||
enableShades: true,
|
||||
shadeIntensity: 0.5,
|
||||
reverseNegativeShade: true,
|
||||
colorScale: {
|
||||
ranges: [{
|
||||
from: -6,
|
||||
to: 0,
|
||||
color: chartTreemapRangeColors[0]
|
||||
},
|
||||
{
|
||||
from: 0.001,
|
||||
to: 6,
|
||||
color: chartTreemapRangeColors[1]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#color_range_treemap"), options);
|
||||
chart.render();
|
||||
}
|
||||
133
resources/js/pages/apps-nft-auction.init.js
vendored
Executable file
133
resources/js/pages/apps-nft-auction.init.js
vendored
Executable file
@@ -0,0 +1,133 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: apps-nft-auction init js
|
||||
*/
|
||||
|
||||
try {
|
||||
var setEndDate1 = "March 19, 2024 6:0:0";
|
||||
var setEndDate2 = "April 16, 2023 5:3:1";
|
||||
var setEndDate3 = "Dec 01, 2023 1:0:1";
|
||||
var setEndDate4 = "Nov 26, 2024 1:2:1";
|
||||
var setEndDate5 = "May 27, 2023 1:6:6";
|
||||
var setEndDate6 = "May 20, 2023 2:5:5";
|
||||
var setEndDate7 = "June 10, 2023 5:1:4";
|
||||
var setEndDate8 = "June 25, 2023 1:6:3";
|
||||
var setEndDate9 = "July 08, 2023 1:5:2";
|
||||
|
||||
function startCountDownDate(dateVal) {
|
||||
var countDownDate = new Date(dateVal).getTime();
|
||||
return countDownDate;
|
||||
}
|
||||
|
||||
function countDownTimer(start, targetDOM) {
|
||||
// Get todays date and time
|
||||
var now = new Date().getTime();
|
||||
|
||||
// Find the distance between now and the count down date
|
||||
var distance = start - now;
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor(
|
||||
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
||||
);
|
||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
// add 0 at the beginning if days, hours, minutes, seconds values are less than 10
|
||||
days = days < 10 ? "0" + days : days;
|
||||
hours = hours < 10 ? "0" + hours : hours;
|
||||
minutes = minutes < 10 ? "0" + minutes : minutes;
|
||||
seconds = seconds < 10 ? "0" + seconds : seconds;
|
||||
|
||||
// Output the result in an element with auction-item-x"
|
||||
document.querySelector("#" + targetDOM).textContent =
|
||||
days + " : " + hours + " : " + minutes + " : " + seconds;
|
||||
|
||||
// If the count down is over, write some text
|
||||
if (distance < 0) {
|
||||
// clearInterval();
|
||||
document.querySelector("#" + targetDOM).textContent = "00 : 00 : 00 : 00";
|
||||
}
|
||||
}
|
||||
|
||||
var cdd1 = startCountDownDate(setEndDate1);
|
||||
var cdd2 = startCountDownDate(setEndDate2);
|
||||
var cdd3 = startCountDownDate(setEndDate3);
|
||||
var cdd4 = startCountDownDate(setEndDate4);
|
||||
var cdd5 = startCountDownDate(setEndDate5);
|
||||
var cdd6 = startCountDownDate(setEndDate6);
|
||||
var cdd7 = startCountDownDate(setEndDate7);
|
||||
var cdd8 = startCountDownDate(setEndDate8);
|
||||
var cdd9 = startCountDownDate(setEndDate9);
|
||||
|
||||
if (document.getElementById("auction-time-1"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd1, "auction-time-1");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-2"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd2, "auction-time-2");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-3"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd3, "auction-time-3");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-4"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd4, "auction-time-4");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-5"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd5, "auction-time-5");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-6"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd6, "auction-time-6");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-7"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd7, "auction-time-7");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-8"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd8, "auction-time-8");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-9"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd9, "auction-time-9");
|
||||
}, 1000);
|
||||
} catch (error) { }
|
||||
|
||||
|
||||
// filter btn
|
||||
var filterBtns = document.querySelectorAll(".filter-btns .nav-link");
|
||||
var productItems = document.querySelectorAll(".product-item");
|
||||
|
||||
Array.from(filterBtns).forEach(function (button) {
|
||||
button.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
for (var i = 0; i < filterBtns.length; i++) {
|
||||
filterBtns[i].classList.remove("active");
|
||||
}
|
||||
this.classList.add("active");
|
||||
|
||||
var filter = e.target.dataset.filter;
|
||||
|
||||
Array.from(productItems).forEach(function (item) {
|
||||
if (filter === "all") {
|
||||
item.style.display = "block";
|
||||
} else {
|
||||
if (item.classList.contains(filter)) {
|
||||
item.style.display = "block";
|
||||
} else {
|
||||
item.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
44
resources/js/pages/apps-nft-create.init.js
vendored
Executable file
44
resources/js/pages/apps-nft-create.init.js
vendored
Executable file
@@ -0,0 +1,44 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: apps-nft-create init js
|
||||
*/
|
||||
|
||||
// FilePond
|
||||
FilePond.registerPlugin(
|
||||
// encodes the file as base64 data
|
||||
FilePondPluginFileEncode,
|
||||
// validates the size of the file
|
||||
FilePondPluginFileValidateSize,
|
||||
// corrects mobile image orientation
|
||||
FilePondPluginImageExifOrientation,
|
||||
// previews dropped images
|
||||
FilePondPluginImagePreview
|
||||
);
|
||||
|
||||
var inputMultipleElements = document.querySelectorAll('input.filepond-input-multiple');
|
||||
if(inputMultipleElements){
|
||||
|
||||
// loop over input elements
|
||||
Array.from(inputMultipleElements).forEach(function (inputElement) {
|
||||
// create a FilePond instance at the input element location
|
||||
FilePond.create(inputElement);
|
||||
})
|
||||
|
||||
FilePond.create(
|
||||
document.querySelector('.filepond-input-circle'), {
|
||||
labelIdle: 'Drag & Drop your picture or <span class="filepond--label-action">Browse</span>',
|
||||
imagePreviewHeight: 170,
|
||||
imageCropAspectRatio: '1:1',
|
||||
imageResizeTargetWidth: 200,
|
||||
imageResizeTargetHeight: 200,
|
||||
stylePanelLayout: 'compact circle',
|
||||
styleLoadIndicatorPosition: 'center bottom',
|
||||
styleProgressIndicatorPosition: 'right bottom',
|
||||
styleButtonRemoveItemPosition: 'left bottom',
|
||||
styleButtonProcessItemPosition: 'right bottom',
|
||||
}
|
||||
);
|
||||
}
|
||||
360
resources/js/pages/apps-nft-explore.init.js
vendored
Executable file
360
resources/js/pages/apps-nft-explore.init.js
vendored
Executable file
@@ -0,0 +1,360 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: apps-nft-explore init js
|
||||
*/
|
||||
|
||||
|
||||
var url = "assets/json/";
|
||||
var allproductlist = '';
|
||||
|
||||
//mail list by json
|
||||
var getJSON = function (jsonurl, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", url + jsonurl, true);
|
||||
xhr.responseType = "json";
|
||||
xhr.onload = function () {
|
||||
var status = xhr.status;
|
||||
if (status === 200) {
|
||||
callback(null, xhr.response);
|
||||
} else {
|
||||
callback(status, xhr.response);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
};
|
||||
|
||||
// get json
|
||||
getJSON("nft-explore-product-list.json", function (err, data) {
|
||||
if (err !== null) {
|
||||
console.log("Something went wrong: " + err);
|
||||
} else {
|
||||
allproductlist = data;
|
||||
loadProductData(allproductlist);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// load mail data
|
||||
function loadProductData(datas) {
|
||||
document.querySelector("#explorecard-list").innerHTML = '';
|
||||
|
||||
Array.from(datas).forEach(function (prodctData, index) {
|
||||
var likeBtn = prodctData.like ? "active" : "";
|
||||
document.querySelector("#explorecard-list").innerHTML +=
|
||||
'<div class="col list-element">\
|
||||
<div class="card explore-box card-animate">\
|
||||
<div class="explore-place-bid-img">\
|
||||
<input type="hidden" class="form-control" id="'+ prodctData.id + '">\
|
||||
<div class="d-none">'+ prodctData.salesType + '</div>\
|
||||
<img src="'+ prodctData.productImg + '" alt="" class="card-img-top explore-img" />\
|
||||
<div class="bg-overlay"></div>\
|
||||
<div class="place-bid-btn">\
|
||||
<a href="#!" class="btn btn-success"><i class="ri-auction-fill align-bottom me-1"></i> Place Bid</a>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="bookmark-icon position-absolute top-0 end-0 p-2">\
|
||||
<button type="button" class="btn btn-icon '+ likeBtn + '" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>\
|
||||
</div>\
|
||||
<div class="card-body">\
|
||||
<p class="fw-medium mb-0 float-end"><i class="mdi mdi-heart text-danger align-middle"></i> '+ prodctData.totalLikes + ' </p>\
|
||||
<h5 class="mb-1"><a href="apps-nft-item-details">'+ prodctData.title + '</a></h5>\
|
||||
<p class="text-muted mb-0">'+ prodctData.category + '</p>\
|
||||
</div>\
|
||||
<div class="card-footer border-top border-top-dashed">\
|
||||
<div class="d-flex align-items-center">\
|
||||
<div class="flex-grow-1 fs-14">\
|
||||
<i class="ri-price-tag-3-fill text-warning align-bottom me-1"></i> Highest: <span class="fw-medium">'+ prodctData.highBid + '</span>\
|
||||
</div>\
|
||||
<h5 class="flex-shrink-0 fs-14 text-primary mb-0">'+ prodctData.price + 'ETH</h5>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
loadMoreBtn();
|
||||
});
|
||||
}
|
||||
|
||||
// Search product list
|
||||
var searchProductList = document.getElementById("searchProductList");
|
||||
searchProductList.addEventListener("keyup", function () {
|
||||
var inputVal = searchProductList.value.toLowerCase();
|
||||
function filterItems(arr, query) {
|
||||
return arr.filter(function (el) {
|
||||
return el.title.toLowerCase().indexOf(query.toLowerCase()) !== -1
|
||||
})
|
||||
}
|
||||
|
||||
var filterData = filterItems(allproductlist, inputVal);
|
||||
if (filterData.length == 0) {
|
||||
document.getElementById("noresult").style.display = "block";
|
||||
document.getElementById("loadmore").style.display = "none";
|
||||
} else {
|
||||
document.getElementById("noresult").style.display = "none";
|
||||
document.getElementById("loadmore").style.display = "block";
|
||||
}
|
||||
loadProductData(filterData);
|
||||
});
|
||||
|
||||
// choices category input
|
||||
var productCategoryInput = new Choices(document.getElementById('select-category'), {
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
productCategoryInput.passedElement.element.addEventListener('change', function (event) {
|
||||
var productCategoryValue = event.detail.value
|
||||
if (event.detail.value) {
|
||||
var filterData = allproductlist.filter(productlist => productlist.category === productCategoryValue);
|
||||
if (filterData.length == 0) {
|
||||
document.getElementById("noresult").style.display = "block";
|
||||
document.getElementById("loadmore").style.display = "none";
|
||||
} else {
|
||||
document.getElementById("noresult").style.display = "none";
|
||||
document.getElementById("loadmore").style.display = "block";
|
||||
}
|
||||
} else {
|
||||
var filterData = allproductlist;
|
||||
}
|
||||
loadProductData(filterData);
|
||||
}, false);
|
||||
|
||||
|
||||
// choices file-type
|
||||
var productFileTypeInput = new Choices(document.getElementById('file-type'), {
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
productFileTypeInput.passedElement.element.addEventListener('change', function (event) {
|
||||
var productFileTypeValue = event.detail.value
|
||||
if (event.detail.value) {
|
||||
var filterData = allproductlist.filter(productlist => productlist.productImg.split('.').pop() == productFileTypeValue);
|
||||
if (filterData.length == 0) {
|
||||
document.getElementById("noresult").style.display = "block";
|
||||
document.getElementById("loadmore").style.display = "none";
|
||||
} else {
|
||||
document.getElementById("noresult").style.display = "none";
|
||||
document.getElementById("loadmore").style.display = "block";
|
||||
}
|
||||
} else {
|
||||
var filterData = allproductlist;
|
||||
}
|
||||
loadProductData(filterData);
|
||||
}, false);
|
||||
|
||||
|
||||
// choices category input
|
||||
var productCategoryInput = new Choices(document.getElementById('select-category'), {
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
productCategoryInput.passedElement.element.addEventListener('change', function (event) {
|
||||
var productCategoryValue = event.detail.value
|
||||
if (event.detail.value) {
|
||||
var filterData = allproductlist.filter(productlist => productlist.category === productCategoryValue);
|
||||
if (filterData.length == 0) {
|
||||
document.getElementById("noresult").style.display = "block";
|
||||
document.getElementById("loadmore").style.display = "none";
|
||||
} else {
|
||||
document.getElementById("noresult").style.display = "none";
|
||||
document.getElementById("loadmore").style.display = "block";
|
||||
}
|
||||
} else {
|
||||
var filterData = allproductlist;
|
||||
}
|
||||
loadProductData(filterData);
|
||||
}, false);
|
||||
|
||||
|
||||
// choices sales input
|
||||
var productSalesInputInput = new Choices(document.getElementById('all-sales-type'), {
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
productSalesInputInput.passedElement.element.addEventListener('change', function (event) {
|
||||
var productCategoryValue = event.detail.value
|
||||
if (event.detail.value) {
|
||||
var filterData = allproductlist.filter(productlist => productlist.salesType === productCategoryValue);
|
||||
if (filterData.length == 0) {
|
||||
document.getElementById("noresult").style.display = "block";
|
||||
document.getElementById("loadmore").style.display = "none";
|
||||
} else {
|
||||
document.getElementById("noresult").style.display = "none";
|
||||
document.getElementById("loadmore").style.display = "block";
|
||||
}
|
||||
} else {
|
||||
var filterData = allproductlist;
|
||||
}
|
||||
loadProductData(filterData);
|
||||
}, false);
|
||||
|
||||
|
||||
/*********************
|
||||
range-product-price
|
||||
**********************/
|
||||
var rangeProductPrice = document.getElementById('range-product-price');
|
||||
|
||||
noUiSlider.create(rangeProductPrice, {
|
||||
start: [0, 1000], // Handle start position
|
||||
step: 10, // Slider moves in increments of '10'
|
||||
margin: 20, // Handles must be more than '20' apart
|
||||
connect: true, // Display a colored bar between the handles
|
||||
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
|
||||
tooltips: [true, true],
|
||||
range: { // Slider can select '0' to '100'
|
||||
'min': 0,
|
||||
'max': 2000
|
||||
},
|
||||
format: wNumb({ decimals: 0 })
|
||||
});
|
||||
|
||||
mergeTooltips(rangeProductPrice, 5, ' - ');
|
||||
|
||||
var minCostInput = document.getElementById('minCost'),
|
||||
maxCostInput = document.getElementById('maxCost');
|
||||
|
||||
var filterDataAll = '';
|
||||
|
||||
// When the slider value changes, update the input and span
|
||||
rangeProductPrice.noUiSlider.on('change', function (values, handle) {
|
||||
var productListupdatedAll = allproductlist;
|
||||
if (handle) {
|
||||
maxCostInput.value = values[handle];
|
||||
|
||||
} else {
|
||||
minCostInput.value = values[handle];
|
||||
}
|
||||
|
||||
var maxvalue = maxCostInput.value;
|
||||
var minvalue = minCostInput.value;
|
||||
var filterDataAll = productListupdatedAll.filter(
|
||||
product => parseFloat(product.price) >= minvalue && parseFloat(product.price) <= maxvalue
|
||||
);
|
||||
loadProductData(filterDataAll);
|
||||
});
|
||||
|
||||
/**
|
||||
* @param slider HtmlElement with an initialized slider
|
||||
* @param threshold Minimum proximity (in percentages) to merge tooltips
|
||||
* @param separator String joining tooltips
|
||||
*/
|
||||
function mergeTooltips(slider, threshold, separator) {
|
||||
|
||||
var textIsRtl = getComputedStyle(slider).direction === 'rtl';
|
||||
var isRtl = slider.noUiSlider.options.direction === 'rtl';
|
||||
var isVertical = slider.noUiSlider.options.orientation === 'vertical';
|
||||
var tooltips = slider.noUiSlider.getTooltips();
|
||||
var origins = slider.noUiSlider.getOrigins();
|
||||
|
||||
// Move tooltips into the origin element. The default stylesheet handles this.
|
||||
Array.from(tooltips).forEach(function (tooltip, index) {
|
||||
if (tooltip) {
|
||||
origins[index].appendChild(tooltip);
|
||||
}
|
||||
});
|
||||
if (slider)
|
||||
slider.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) {
|
||||
|
||||
var pools = [
|
||||
[]
|
||||
];
|
||||
var poolPositions = [
|
||||
[]
|
||||
];
|
||||
var poolValues = [
|
||||
[]
|
||||
];
|
||||
var atPool = 0;
|
||||
|
||||
// Assign the first tooltip to the first pool, if the tooltip is configured
|
||||
if (tooltips[0]) {
|
||||
pools[0][0] = 0;
|
||||
poolPositions[0][0] = positions[0];
|
||||
poolValues[0][0] = values[0];
|
||||
}
|
||||
|
||||
for (var i = 1; i < positions.length; i++) {
|
||||
if (!tooltips[i] || (positions[i] - positions[i - 1]) > threshold) {
|
||||
atPool++;
|
||||
pools[atPool] = [];
|
||||
poolValues[atPool] = [];
|
||||
poolPositions[atPool] = [];
|
||||
}
|
||||
|
||||
if (tooltips[i]) {
|
||||
pools[atPool].push(i);
|
||||
poolValues[atPool].push(values[i]);
|
||||
poolPositions[atPool].push(positions[i]);
|
||||
}
|
||||
}
|
||||
|
||||
Array.from(pools).forEach(function (pool, poolIndex) {
|
||||
var handlesInPool = pool.length;
|
||||
|
||||
for (var j = 0; j < handlesInPool; j++) {
|
||||
var handleNumber = pool[j];
|
||||
|
||||
if (j === handlesInPool - 1) {
|
||||
var offset = 0;
|
||||
|
||||
Array.from(poolPositions[poolIndex]).forEach(function (value) {
|
||||
offset += 1000 - value;
|
||||
});
|
||||
|
||||
var direction = isVertical ? 'bottom' : 'right';
|
||||
var last = isRtl ? 0 : handlesInPool - 1;
|
||||
var lastOffset = 1000 - poolPositions[poolIndex][last];
|
||||
offset = (textIsRtl && !isVertical ? 100 : 0) + (offset / handlesInPool) - lastOffset;
|
||||
|
||||
// Center this tooltip over the affected handles
|
||||
tooltips[handleNumber].innerHTML = poolValues[poolIndex].join(separator);
|
||||
tooltips[handleNumber].style.display = 'block';
|
||||
tooltips[handleNumber].style[direction] = offset + '%';
|
||||
} else {
|
||||
// Hide this tooltip
|
||||
tooltips[handleNumber].style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// loadmore Js
|
||||
function _toConsumableArray(arr) {
|
||||
if (Array.isArray(arr)) {
|
||||
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
|
||||
arr2[i] = arr[i];
|
||||
}
|
||||
return arr2;
|
||||
} else {
|
||||
return Array.from(arr);
|
||||
}
|
||||
}
|
||||
|
||||
function loadMoreBtn() {
|
||||
var loadmore = document.querySelector("#loadmore");
|
||||
if (loadmore) {
|
||||
var currentItems = 10;
|
||||
loadmore.addEventListener("click", function (e) {
|
||||
|
||||
var elementList = [].concat(
|
||||
_toConsumableArray(document.querySelectorAll("#explorecard-list .list-element"))
|
||||
);
|
||||
if (elementList) {
|
||||
for (var i = currentItems; i < currentItems + 5; i++) {
|
||||
if (elementList[i]) {
|
||||
elementList[i].style.display = "block";
|
||||
}
|
||||
}
|
||||
currentItems += 5;
|
||||
|
||||
// Load more button will be hidden after list fully loaded
|
||||
if (currentItems >= elementList.length) {
|
||||
event.target.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
133
resources/js/pages/apps-nft-item-details.init.js
vendored
Executable file
133
resources/js/pages/apps-nft-item-details.init.js
vendored
Executable file
@@ -0,0 +1,133 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: apps-nft-item-details init js
|
||||
*/
|
||||
|
||||
try {
|
||||
var setEndDate1 = "March 19, 2024 6:0:0";
|
||||
var setEndDate2 = "April 16, 2023 5:3:1";
|
||||
var setEndDate3 = "Dec 01, 2023 1:0:1";
|
||||
var setEndDate4 = "Nov 26, 2024 1:2:1";
|
||||
var setEndDate5 = "May 27, 2023 1:6:6";
|
||||
var setEndDate6 = "May 20, 2023 2:5:5";
|
||||
var setEndDate7 = "June 10, 2023 5:1:4";
|
||||
var setEndDate8 = "June 25, 2023 1:6:3";
|
||||
var setEndDate9 = "July 08, 2023 1:5:2";
|
||||
|
||||
function startCountDownDate(dateVal) {
|
||||
var countDownDate = new Date(dateVal).getTime();
|
||||
return countDownDate;
|
||||
}
|
||||
|
||||
function countDownTimer(start, targetDOM) {
|
||||
// Get todays date and time
|
||||
var now = new Date().getTime();
|
||||
|
||||
// Find the distance between now and the count down date
|
||||
var distance = start - now;
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor(
|
||||
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
|
||||
);
|
||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
// add 0 at the beginning if days, hours, minutes, seconds values are less than 10
|
||||
days = days < 10 ? "0" + days : days;
|
||||
hours = hours < 10 ? "0" + hours : hours;
|
||||
minutes = minutes < 10 ? "0" + minutes : minutes;
|
||||
seconds = seconds < 10 ? "0" + seconds : seconds;
|
||||
|
||||
// Output the result in an element with auction-item-x"
|
||||
document.querySelector("#" + targetDOM).textContent =
|
||||
days + " : " + hours + " : " + minutes + " : " + seconds;
|
||||
|
||||
// If the count down is over, write some text
|
||||
if (distance < 0) {
|
||||
// clearInterval();
|
||||
document.querySelector("#" + targetDOM).textContent = "00 : 00 : 00 : 00";
|
||||
}
|
||||
}
|
||||
|
||||
var cdd1 = startCountDownDate(setEndDate1);
|
||||
var cdd2 = startCountDownDate(setEndDate2);
|
||||
var cdd3 = startCountDownDate(setEndDate3);
|
||||
var cdd4 = startCountDownDate(setEndDate4);
|
||||
var cdd5 = startCountDownDate(setEndDate5);
|
||||
var cdd6 = startCountDownDate(setEndDate6);
|
||||
var cdd7 = startCountDownDate(setEndDate7);
|
||||
var cdd8 = startCountDownDate(setEndDate8);
|
||||
var cdd9 = startCountDownDate(setEndDate9);
|
||||
|
||||
if (document.getElementById("auction-time-1"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd1, "auction-time-1");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-2"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd2, "auction-time-2");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-3"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd3, "auction-time-3");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-4"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd4, "auction-time-4");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-5"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd5, "auction-time-5");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-6"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd6, "auction-time-6");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-7"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd7, "auction-time-7");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-8"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd8, "auction-time-8");
|
||||
}, 1000);
|
||||
if (document.getElementById("auction-time-9"))
|
||||
setInterval(function () {
|
||||
countDownTimer(cdd9, "auction-time-9");
|
||||
}, 1000);
|
||||
} catch (error) { }
|
||||
|
||||
|
||||
// filter btn
|
||||
var filterBtns = document.querySelectorAll(".filter-btns .nav-link");
|
||||
var productItems = document.querySelectorAll(".product-item");
|
||||
|
||||
Array.from(filterBtns).forEach(function (button) {
|
||||
button.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
for (var i = 0; i < filterBtns.length; i++) {
|
||||
filterBtns[i].classList.remove("active");
|
||||
}
|
||||
this.classList.add("active");
|
||||
|
||||
var filter = e.target.dataset.filter;
|
||||
|
||||
Array.from(productItems).forEach(function (item) {
|
||||
if (filter === "all") {
|
||||
item.style.display = "block";
|
||||
} else {
|
||||
if (item.classList.contains(filter)) {
|
||||
item.style.display = "block";
|
||||
} else {
|
||||
item.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
77
resources/js/pages/apps-nft-ranking.init.js
vendored
Executable file
77
resources/js/pages/apps-nft-ranking.init.js
vendored
Executable file
@@ -0,0 +1,77 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: apps-nft-ranking init js
|
||||
*/
|
||||
|
||||
// list js
|
||||
var perPage = 10;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"ranking",
|
||||
"collection",
|
||||
"volume_price",
|
||||
"24h",
|
||||
"7d",
|
||||
"item",
|
||||
"floor-price",
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
// Init list
|
||||
var contactList = new List("contactList", options).on("updated", function (list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
(document.querySelector(".pagination-prev.disabled")) ? document.querySelector(".pagination-prev.disabled").classList.remove("disabled"): '';
|
||||
(document.querySelector(".pagination-next.disabled")) ? document.querySelector(".pagination-next.disabled").classList.remove("disabled"): '';
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
contactList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
|
||||
if(document.querySelector(".pagination-next"))
|
||||
document.querySelector(".pagination-next").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click(): '': '';
|
||||
});
|
||||
|
||||
if(document.querySelector(".pagination-prev"))
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click(): '': '';
|
||||
});
|
||||
51
resources/js/pages/auto-order-create.js
vendored
Executable file
51
resources/js/pages/auto-order-create.js
vendored
Executable file
@@ -0,0 +1,51 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Ecommerce product create Js File
|
||||
*/
|
||||
|
||||
|
||||
if (document.querySelector("#cleave-numeral")) {
|
||||
var cleaveNumeral = new Cleave('#cleave-numeral', {
|
||||
numeral: true,
|
||||
numeralThousandsGroupStyle: 'thousand',
|
||||
delimiter: '·',
|
||||
});
|
||||
}
|
||||
|
||||
// Dropzone
|
||||
var dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
|
||||
dropzonePreviewNode.itemid = "321321321";
|
||||
var previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);
|
||||
var files = document.getElementById('files');
|
||||
var _token = document.querySelector('input[name=\'_token\']').value;
|
||||
var _type = document.querySelector('input[name=\'type\']').value;
|
||||
var _orderId = document.querySelector('input[name=\'order_id\']').value;
|
||||
var _orderPrice = document.querySelector('input[name=\'price\']').value;
|
||||
|
||||
var dropzone = new Dropzone(".dropzone", {
|
||||
url: 'http://velzon-default.lc/store/my/file',
|
||||
method: "post",
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': _token,
|
||||
'Attachment-type': _type,
|
||||
'Attachment-Order-Id': _orderId,
|
||||
'Attachment-Order-Price': _orderPrice
|
||||
},
|
||||
success: function (file, response) {
|
||||
//Here you can get your response.
|
||||
if (files.value === "[]") {
|
||||
files.value = [response];
|
||||
} else {
|
||||
var items = [];
|
||||
items.push(files.value);
|
||||
items.push(response);
|
||||
files.value = items;
|
||||
}
|
||||
}
|
||||
});// Form Event
|
||||
743
resources/js/pages/calendar.init.js
vendored
Executable file
743
resources/js/pages/calendar.init.js
vendored
Executable file
@@ -0,0 +1,743 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Calendar init js
|
||||
*/
|
||||
|
||||
|
||||
var start_date = document.getElementById("event-start-date");
|
||||
var timepicker1 = document.getElementById("timepicker1");
|
||||
var timepicker2 = document.getElementById("timepicker2");
|
||||
var date_range = null;
|
||||
var T_check = null;
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
flatPickrInit();
|
||||
var addEvent = new bootstrap.Modal(document.getElementById('event-modal'), {
|
||||
keyboard: false
|
||||
});
|
||||
document.getElementById('event-modal');
|
||||
var modalTitle = document.getElementById('modal-title');
|
||||
var formEvent = document.getElementById('form-event');
|
||||
var selectedEvent = null;
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
/* initialize the calendar */
|
||||
|
||||
var date = new Date();
|
||||
var d = date.getDate();
|
||||
var m = date.getMonth();
|
||||
var y = date.getFullYear();
|
||||
var Draggable = FullCalendar.Draggable;
|
||||
var externalEventContainerEl = document.getElementById('external-events');
|
||||
var defaultEvents = [{
|
||||
id: 1,
|
||||
title: "World Braille Day",
|
||||
start: "2022-01-04",
|
||||
className: "bg-soft-info",
|
||||
allDay: true
|
||||
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "World Leprosy Day",
|
||||
start: "2022-01-30",
|
||||
className: "bg-soft-info",
|
||||
allDay: true
|
||||
},
|
||||
|
||||
{
|
||||
id: 3,
|
||||
title: "International Mother Language Day",
|
||||
start: "2022-02-21",
|
||||
className: "bg-soft-info",
|
||||
allDay: true
|
||||
},
|
||||
|
||||
{
|
||||
id: 4,
|
||||
title: "International Women's Day",
|
||||
start: "2022-03-08",
|
||||
className: "bg-soft-info",
|
||||
allDay: true
|
||||
},
|
||||
|
||||
{
|
||||
id: 5,
|
||||
title: "World Thinking Day",
|
||||
start: "2022-02-22",
|
||||
className: "bg-soft-info",
|
||||
allDay: true
|
||||
},
|
||||
|
||||
{
|
||||
id: 6,
|
||||
title: "International Mother Language Day",
|
||||
start: "2022-03-21",
|
||||
className: "bg-soft-info",
|
||||
allDay: true
|
||||
},
|
||||
|
||||
{
|
||||
id: 7,
|
||||
title: "World Water Day",
|
||||
start: "2022-03-22",
|
||||
className: "bg-soft-info",
|
||||
allDay: true
|
||||
},
|
||||
|
||||
{
|
||||
id: 8,
|
||||
title: "World Health Day",
|
||||
start: "2022-04-07",
|
||||
className: "bg-soft-info",
|
||||
allDay: true
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
id: 9,
|
||||
title: "International Special Librarians Day",
|
||||
start: "2022-04-16",
|
||||
className: "bg-soft-info",
|
||||
allDay: true
|
||||
},
|
||||
|
||||
{
|
||||
id: 10,
|
||||
title: "Earth Day",
|
||||
start: "2022-04-22",
|
||||
className: "bg-soft-info",
|
||||
allDay: true
|
||||
},
|
||||
{
|
||||
id: 153,
|
||||
title: 'All Day Event',
|
||||
start: new Date(y, m, 1),
|
||||
className: 'bg-soft-primary',
|
||||
location: 'San Francisco, US',
|
||||
allDay: true,
|
||||
extendedProps: {
|
||||
department: 'All Day Event'
|
||||
},
|
||||
description: 'An all-day event is an event that lasts an entire day or longer'
|
||||
},
|
||||
{
|
||||
id: 136,
|
||||
title: 'Visit Online Course',
|
||||
start: new Date(y, m, d - 5),
|
||||
end: new Date(y, m, d - 2),
|
||||
allDay: true,
|
||||
className: 'bg-soft-warning',
|
||||
extendedProps: {
|
||||
department: 'Long Event'
|
||||
},
|
||||
description: 'Long Term Event means an incident that last longer than 12 hours.'
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Client Meeting with Alexis',
|
||||
start: new Date(y, m, d + 22, 20, 0),
|
||||
end: new Date(y, m, d + 24, 16, 0),
|
||||
allDay: true,
|
||||
className: 'bg-soft-danger',
|
||||
location: 'California, US',
|
||||
extendedProps: {
|
||||
department: 'Meeting with Alexis'
|
||||
},
|
||||
description: 'A meeting is a gathering of two or more people that has been convened for the purpose of achieving a common goal through verbal interaction, such as sharing information or reaching agreement.'
|
||||
},
|
||||
{
|
||||
id: 991,
|
||||
title: 'Repeating Event',
|
||||
start: new Date(y, m, d + 4, 16, 0),
|
||||
end: new Date(y, m, d + 9, 16, 0),
|
||||
allDay: true,
|
||||
className: 'bg-soft-primary',
|
||||
location: 'Las Vegas, US',
|
||||
extendedProps: {
|
||||
department: 'Repeating Event'
|
||||
},
|
||||
description: 'A recurring or repeating event is simply any event that you will occur more than once on your calendar. ',
|
||||
},
|
||||
{
|
||||
id: 112,
|
||||
title: 'Meeting With Designer',
|
||||
start: new Date(y, m, d, 12, 30),
|
||||
allDay: true,
|
||||
className: 'bg-soft-success',
|
||||
location: 'Head Office, US',
|
||||
extendedProps: {
|
||||
department: 'Meeting'
|
||||
},
|
||||
description: 'Tell how to boost website traffic'
|
||||
},
|
||||
{
|
||||
id: 113,
|
||||
title: 'Weekly Strategy Planning',
|
||||
start: new Date(y, m, d + 9),
|
||||
end: new Date(y, m, d + 11),
|
||||
allDay: true,
|
||||
className: 'bg-soft-danger',
|
||||
location: 'Head Office, US',
|
||||
extendedProps: {
|
||||
department: 'Lunch'
|
||||
},
|
||||
description: 'Strategies for Creating Your Weekly Schedule'
|
||||
},
|
||||
{
|
||||
id: 875,
|
||||
title: 'Birthday Party',
|
||||
start: new Date(y, m, d + 1, 19, 0),
|
||||
allDay: true,
|
||||
className: 'bg-soft-success',
|
||||
location: 'Los Angeles, US',
|
||||
extendedProps: {
|
||||
department: 'Birthday Party'
|
||||
},
|
||||
description: 'Family slumber party – Bring out the blankets and pillows and have a family slumber party! Play silly party games, share special snacks and wind down the fun with a special movie.'
|
||||
},
|
||||
{
|
||||
id: 783,
|
||||
title: 'Click for Google',
|
||||
start: new Date(y, m, 28),
|
||||
end: new Date(y, m, 29),
|
||||
allDay: true,
|
||||
url: 'http://google.com/',
|
||||
className: 'bg-soft-dark',
|
||||
},
|
||||
{
|
||||
id: 456,
|
||||
title: 'Velzon Project Discussion with Team',
|
||||
start: new Date(y, m, d + 23, 20, 0),
|
||||
end: new Date(y, m, d + 24, 16, 0),
|
||||
allDay: true,
|
||||
className: 'bg-soft-info',
|
||||
location: 'Head Office, US',
|
||||
extendedProps: {
|
||||
department: 'Discussion'
|
||||
},
|
||||
description: 'Tell how to boost website traffic'
|
||||
},
|
||||
];
|
||||
|
||||
// init draggable
|
||||
new Draggable(externalEventContainerEl, {
|
||||
itemSelector: '.external-event',
|
||||
eventData: function (eventEl) {
|
||||
return {
|
||||
id: Math.floor(Math.random() * 11000),
|
||||
title: eventEl.innerText,
|
||||
allDay: true,
|
||||
start: new Date(),
|
||||
className: eventEl.getAttribute('data-class')
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
var calendarEl = document.getElementById('calendar');
|
||||
|
||||
function addNewEvent(info) {
|
||||
document.getElementById('form-event').reset();
|
||||
document.getElementById('btn-delete-event').setAttribute('hidden', true);
|
||||
addEvent.show();
|
||||
formEvent.classList.remove("was-validated");
|
||||
formEvent.reset();
|
||||
selectedEvent = null;
|
||||
modalTitle.innerText = 'Add Event';
|
||||
newEventData = info;
|
||||
document.getElementById("edit-event-btn").setAttribute("data-id", "new-event");
|
||||
document.getElementById('edit-event-btn').click();
|
||||
document.getElementById("edit-event-btn").setAttribute("hidden", true);
|
||||
}
|
||||
|
||||
function getInitialView() {
|
||||
if (window.innerWidth >= 768 && window.innerWidth < 1200) {
|
||||
return 'timeGridWeek';
|
||||
} else if (window.innerWidth <= 768) {
|
||||
return 'listMonth';
|
||||
} else {
|
||||
return 'dayGridMonth';
|
||||
}
|
||||
}
|
||||
|
||||
var eventCategoryChoice = new Choices("#event-category", {
|
||||
searchEnabled: false
|
||||
});
|
||||
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
timeZone: 'local',
|
||||
editable: true,
|
||||
droppable: true,
|
||||
selectable: true,
|
||||
navLinks: true,
|
||||
initialView: getInitialView(),
|
||||
themeSystem: 'bootstrap',
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
||||
},
|
||||
windowResize: function (view) {
|
||||
var newView = getInitialView();
|
||||
calendar.changeView(newView);
|
||||
},
|
||||
eventResize: function(info) {
|
||||
var indexOfSelectedEvent = defaultEvents.findIndex(function (x) {
|
||||
return x.id == info.event.id
|
||||
});
|
||||
if (defaultEvents[indexOfSelectedEvent]) {
|
||||
defaultEvents[indexOfSelectedEvent].title = info.event.title;
|
||||
defaultEvents[indexOfSelectedEvent].start = info.event.start;
|
||||
defaultEvents[indexOfSelectedEvent].end = (info.event.end) ? info.event.end : null;
|
||||
defaultEvents[indexOfSelectedEvent].allDay = info.event.allDay;
|
||||
defaultEvents[indexOfSelectedEvent].className = info.event.classNames[0];
|
||||
defaultEvents[indexOfSelectedEvent].description = (info.event._def.extendedProps.description) ? info.event._def.extendedProps.description : '';
|
||||
defaultEvents[indexOfSelectedEvent].location = (info.event._def.extendedProps.location) ? info.event._def.extendedProps.location : '';
|
||||
}
|
||||
upcomingEvent(defaultEvents);
|
||||
},
|
||||
eventClick: function (info) {
|
||||
document.getElementById("edit-event-btn").removeAttribute("hidden");
|
||||
document.getElementById('btn-save-event').setAttribute("hidden", true);
|
||||
document.getElementById("edit-event-btn").setAttribute("data-id", "edit-event");
|
||||
document.getElementById("edit-event-btn").innerHTML = "Edit";
|
||||
eventClicked();
|
||||
flatPickrInit();
|
||||
flatpicekrValueClear();
|
||||
addEvent.show();
|
||||
formEvent.reset();
|
||||
selectedEvent = info.event;
|
||||
|
||||
// First Modal
|
||||
document.getElementById("modal-title").innerHTML = "";
|
||||
document.getElementById("event-location-tag").innerHTML = selectedEvent.extendedProps.location === undefined ? "No Location" : selectedEvent.extendedProps.location;
|
||||
document.getElementById("event-description-tag").innerHTML = selectedEvent.extendedProps.description === undefined ? "No Description" : selectedEvent.extendedProps.description;
|
||||
|
||||
// Edit Modal
|
||||
document.getElementById("event-title").value = selectedEvent.title;
|
||||
document.getElementById("event-location").value = selectedEvent.extendedProps.location === undefined ? "No Location" : selectedEvent.extendedProps.location;
|
||||
document.getElementById("event-description").value = selectedEvent.extendedProps.description === undefined ? "No Description" : selectedEvent.extendedProps.description;
|
||||
document.getElementById("eventid").value = selectedEvent.id;
|
||||
|
||||
if (selectedEvent.classNames[0]) {
|
||||
eventCategoryChoice.destroy();
|
||||
eventCategoryChoice = new Choices("#event-category", {
|
||||
searchEnabled: false
|
||||
});
|
||||
eventCategoryChoice.setChoiceByValue(selectedEvent.classNames[0]);
|
||||
}
|
||||
var st_date = selectedEvent.start;
|
||||
var ed_date = selectedEvent.end;
|
||||
|
||||
var date_r = function formatDate(date) {
|
||||
var d = new Date(date),
|
||||
month = '' + (d.getMonth() + 1),
|
||||
day = '' + d.getDate(),
|
||||
year = d.getFullYear();
|
||||
if (month.length < 2)
|
||||
month = '0' + month;
|
||||
if (day.length < 2)
|
||||
day = '0' + day;
|
||||
return [year, month, day].join('-');
|
||||
};
|
||||
var r_date = ed_date == null ? (str_dt(st_date)) : (str_dt(st_date)) + ' to ' + (str_dt(ed_date));
|
||||
var er_date = ed_date == null ? (date_r(st_date)) : (date_r(st_date)) + ' to ' + (date_r(ed_date));
|
||||
|
||||
flatpickr(start_date, {
|
||||
defaultDate: er_date,
|
||||
altInput: true,
|
||||
altFormat: "j F Y",
|
||||
dateFormat: "Y-m-d",
|
||||
mode: ed_date !== null ? "range" : "range",
|
||||
onChange: function (selectedDates, dateStr, instance) {
|
||||
var date_range = dateStr;
|
||||
var dates = date_range.split("to");
|
||||
if (dates.length > 1) {
|
||||
document.getElementById('event-time').setAttribute("hidden", true);
|
||||
} else {
|
||||
document.getElementById("timepicker1").parentNode.classList.remove("d-none");
|
||||
document.getElementById("timepicker1").classList.replace("d-none", "d-block");
|
||||
document.getElementById("timepicker2").parentNode.classList.remove("d-none");
|
||||
document.getElementById("timepicker2").classList.replace("d-none", "d-block");
|
||||
document.getElementById('event-time').removeAttribute("hidden");
|
||||
}
|
||||
},
|
||||
});
|
||||
document.getElementById("event-start-date-tag").innerHTML = r_date;
|
||||
|
||||
var gt_time = getTime(selectedEvent.start);
|
||||
var ed_time = getTime(selectedEvent.end);
|
||||
|
||||
if (gt_time == ed_time) {
|
||||
document.getElementById('event-time').setAttribute("hidden", true);
|
||||
flatpickr(document.getElementById("timepicker1"), {
|
||||
enableTime: true,
|
||||
noCalendar: true,
|
||||
dateFormat: "H:i",
|
||||
});
|
||||
flatpickr(document.getElementById("timepicker2"), {
|
||||
enableTime: true,
|
||||
noCalendar: true,
|
||||
dateFormat: "H:i",
|
||||
});
|
||||
} else {
|
||||
document.getElementById('event-time').removeAttribute("hidden");
|
||||
flatpickr(document.getElementById("timepicker1"), {
|
||||
enableTime: true,
|
||||
noCalendar: true,
|
||||
dateFormat: "H:i",
|
||||
defaultDate: gt_time
|
||||
});
|
||||
|
||||
flatpickr(document.getElementById("timepicker2"), {
|
||||
enableTime: true,
|
||||
noCalendar: true,
|
||||
dateFormat: "H:i",
|
||||
defaultDate: ed_time
|
||||
});
|
||||
document.getElementById("event-timepicker1-tag").innerHTML = tConvert(gt_time);
|
||||
document.getElementById("event-timepicker2-tag").innerHTML = tConvert(ed_time);
|
||||
}
|
||||
newEventData = null;
|
||||
modalTitle.innerText = selectedEvent.title;
|
||||
|
||||
// formEvent.classList.add("view-event");
|
||||
document.getElementById('btn-delete-event').removeAttribute('hidden');
|
||||
},
|
||||
dateClick: function (info) {
|
||||
addNewEvent(info);
|
||||
},
|
||||
events: defaultEvents,
|
||||
eventReceive: function (info) {
|
||||
var newid = parseInt(info.event.id);
|
||||
var newEvent = {
|
||||
id: newid,
|
||||
title: info.event.title,
|
||||
start: info.event.start,
|
||||
allDay: info.event.allDay,
|
||||
className: info.event.classNames[0]
|
||||
};
|
||||
defaultEvents.push(newEvent);
|
||||
upcomingEvent(defaultEvents);
|
||||
},
|
||||
eventDrop: function (info) {
|
||||
var indexOfSelectedEvent = defaultEvents.findIndex(function (x) {
|
||||
return x.id == info.event.id
|
||||
});
|
||||
if (defaultEvents[indexOfSelectedEvent]) {
|
||||
defaultEvents[indexOfSelectedEvent].title = info.event.title;
|
||||
defaultEvents[indexOfSelectedEvent].start = info.event.start;
|
||||
defaultEvents[indexOfSelectedEvent].end = (info.event.end) ? info.event.end : null;
|
||||
defaultEvents[indexOfSelectedEvent].allDay = info.event.allDay;
|
||||
defaultEvents[indexOfSelectedEvent].className = info.event.classNames[0];
|
||||
defaultEvents[indexOfSelectedEvent].description = (info.event._def.extendedProps.description) ? info.event._def.extendedProps.description : '';
|
||||
defaultEvents[indexOfSelectedEvent].location = (info.event._def.extendedProps.location) ? info.event._def.extendedProps.location : '';
|
||||
}
|
||||
upcomingEvent(defaultEvents);
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
|
||||
upcomingEvent(defaultEvents);
|
||||
/*Add new event*/
|
||||
// Form to add new event
|
||||
formEvent.addEventListener('submit', function (ev) {
|
||||
ev.preventDefault();
|
||||
var updatedTitle = document.getElementById("event-title").value;
|
||||
var updatedCategory = document.getElementById('event-category').value;
|
||||
var start_date = (document.getElementById("event-start-date").value).split("to");
|
||||
var updateStartDate = new Date(start_date[0].trim());
|
||||
var updateEndDate = (start_date[1]) ? new Date(start_date[1].trim()) : '';
|
||||
|
||||
var end_date = null;
|
||||
var event_location = document.getElementById("event-location").value;
|
||||
var eventDescription = document.getElementById("event-description").value;
|
||||
var eventid = document.getElementById("eventid").value;
|
||||
var all_day = false;
|
||||
if (start_date.length > 1) {
|
||||
var end_date = new Date(start_date[1]);
|
||||
end_date.setDate(end_date.getDate() + 1);
|
||||
start_date = new Date(start_date[0]);
|
||||
all_day = true;
|
||||
} else {
|
||||
var e_date = start_date;
|
||||
var start_time = (document.getElementById("timepicker1").value).trim();
|
||||
var end_time = (document.getElementById("timepicker2").value).trim();
|
||||
start_date = new Date(start_date + "T" + start_time);
|
||||
end_date = new Date(e_date + "T" + end_time);
|
||||
}
|
||||
var e_id = defaultEvents.length + 1;
|
||||
|
||||
// validation
|
||||
if (forms[0].checkValidity() === false) {
|
||||
forms[0].classList.add('was-validated');
|
||||
} else {
|
||||
if (selectedEvent) {
|
||||
selectedEvent.setProp("id", eventid);
|
||||
selectedEvent.setProp("title", updatedTitle);
|
||||
selectedEvent.setProp("classNames", [updatedCategory]);
|
||||
selectedEvent.setStart(updateStartDate);
|
||||
selectedEvent.setEnd(updateEndDate);
|
||||
selectedEvent.setAllDay(all_day);
|
||||
selectedEvent.setExtendedProp("description", eventDescription);
|
||||
selectedEvent.setExtendedProp("location", event_location);
|
||||
var indexOfSelectedEvent = defaultEvents.findIndex(function (x) {
|
||||
return x.id == selectedEvent.id
|
||||
});
|
||||
if (defaultEvents[indexOfSelectedEvent]) {
|
||||
defaultEvents[indexOfSelectedEvent].title = updatedTitle;
|
||||
defaultEvents[indexOfSelectedEvent].start = updateStartDate;
|
||||
defaultEvents[indexOfSelectedEvent].end = updateEndDate;
|
||||
defaultEvents[indexOfSelectedEvent].allDay = all_day;
|
||||
defaultEvents[indexOfSelectedEvent].className = updatedCategory;
|
||||
defaultEvents[indexOfSelectedEvent].description = eventDescription;
|
||||
defaultEvents[indexOfSelectedEvent].location = event_location;
|
||||
}
|
||||
calendar.render();
|
||||
// default
|
||||
} else {
|
||||
var newEvent = {
|
||||
id: e_id,
|
||||
title: updatedTitle,
|
||||
start: start_date,
|
||||
end: end_date,
|
||||
allDay: all_day,
|
||||
className: updatedCategory,
|
||||
description: eventDescription,
|
||||
location: event_location
|
||||
};
|
||||
calendar.addEvent(newEvent);
|
||||
defaultEvents.push(newEvent);
|
||||
}
|
||||
addEvent.hide();
|
||||
upcomingEvent(defaultEvents);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("btn-delete-event").addEventListener("click", function (e) {
|
||||
if (selectedEvent) {
|
||||
for (var i = 0; i < defaultEvents.length; i++) {
|
||||
if (defaultEvents[i].id == selectedEvent.id) {
|
||||
defaultEvents.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
upcomingEvent(defaultEvents);
|
||||
selectedEvent.remove();
|
||||
selectedEvent = null;
|
||||
addEvent.hide();
|
||||
}
|
||||
});
|
||||
document.getElementById("btn-new-event").addEventListener("click", function (e) {
|
||||
flatpicekrValueClear();
|
||||
flatPickrInit();
|
||||
addNewEvent();
|
||||
document.getElementById("edit-event-btn").setAttribute("data-id", "new-event");
|
||||
document.getElementById('edit-event-btn').click();
|
||||
document.getElementById("edit-event-btn").setAttribute("hidden", true);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function flatPickrInit() {
|
||||
var config = {
|
||||
enableTime: true,
|
||||
noCalendar: true,
|
||||
};
|
||||
var date_range = flatpickr(
|
||||
start_date, {
|
||||
enableTime: false,
|
||||
mode: "range",
|
||||
minDate: "today",
|
||||
onChange: function (selectedDates, dateStr, instance) {
|
||||
var date_range = dateStr;
|
||||
var dates = date_range.split("to");
|
||||
if (dates.length > 1) {
|
||||
document.getElementById('event-time').setAttribute("hidden", true);
|
||||
} else {
|
||||
document.getElementById("timepicker1").parentNode.classList.remove("d-none");
|
||||
document.getElementById("timepicker1").classList.replace("d-none", "d-block");
|
||||
document.getElementById("timepicker2").parentNode.classList.remove("d-none");
|
||||
document.getElementById("timepicker2").classList.replace("d-none", "d-block");
|
||||
document.getElementById('event-time').removeAttribute("hidden");
|
||||
}
|
||||
},
|
||||
});
|
||||
flatpickr(timepicker1, config);
|
||||
flatpickr(timepicker2, config);
|
||||
|
||||
}
|
||||
|
||||
function flatpicekrValueClear() {
|
||||
start_date.flatpickr().clear();
|
||||
timepicker1.flatpickr().clear();
|
||||
timepicker2.flatpickr().clear();
|
||||
}
|
||||
|
||||
|
||||
function eventClicked() {
|
||||
document.getElementById('form-event').classList.add("view-event");
|
||||
document.getElementById("event-title").classList.replace("d-block", "d-none");
|
||||
document.getElementById("event-category").classList.replace("d-block", "d-none");
|
||||
document.getElementById("event-start-date").parentNode.classList.add("d-none");
|
||||
document.getElementById("event-start-date").classList.replace("d-block", "d-none");
|
||||
document.getElementById('event-time').setAttribute("hidden", true);
|
||||
document.getElementById("timepicker1").parentNode.classList.add("d-none");
|
||||
document.getElementById("timepicker1").classList.replace("d-block", "d-none");
|
||||
document.getElementById("timepicker2").parentNode.classList.add("d-none");
|
||||
document.getElementById("timepicker2").classList.replace("d-block", "d-none");
|
||||
document.getElementById("event-location").classList.replace("d-block", "d-none");
|
||||
document.getElementById("event-description").classList.replace("d-block", "d-none");
|
||||
document.getElementById("event-start-date-tag").classList.replace("d-none", "d-block");
|
||||
document.getElementById("event-timepicker1-tag").classList.replace("d-none", "d-block");
|
||||
document.getElementById("event-timepicker2-tag").classList.replace("d-none", "d-block");
|
||||
document.getElementById("event-location-tag").classList.replace("d-none", "d-block");
|
||||
document.getElementById("event-description-tag").classList.replace("d-none", "d-block");
|
||||
document.getElementById('btn-save-event').setAttribute("hidden", true);
|
||||
}
|
||||
|
||||
function editEvent(data) {
|
||||
var data_id = data.getAttribute("data-id");
|
||||
if (data_id == 'new-event') {
|
||||
document.getElementById('modal-title').innerHTML = "";
|
||||
document.getElementById('modal-title').innerHTML = "Add Event";
|
||||
document.getElementById("btn-save-event").innerHTML = "Add Event";
|
||||
eventTyped();
|
||||
} else if (data_id == 'edit-event') {
|
||||
data.innerHTML = "Cancel";
|
||||
data.setAttribute("data-id", 'cancel-event');
|
||||
document.getElementById("btn-save-event").innerHTML = "Update Event";
|
||||
data.removeAttribute("hidden");
|
||||
eventTyped();
|
||||
} else {
|
||||
data.innerHTML = "Edit";
|
||||
data.setAttribute("data-id", 'edit-event');
|
||||
eventClicked();
|
||||
}
|
||||
}
|
||||
|
||||
function eventTyped() {
|
||||
document.getElementById('form-event').classList.remove("view-event");
|
||||
document.getElementById("event-title").classList.replace("d-none", "d-block");
|
||||
document.getElementById("event-category").classList.replace("d-none", "d-block");
|
||||
document.getElementById("event-start-date").parentNode.classList.remove("d-none");
|
||||
document.getElementById("event-start-date").classList.replace("d-none", "d-block");
|
||||
document.getElementById("timepicker1").parentNode.classList.remove("d-none");
|
||||
document.getElementById("timepicker1").classList.replace("d-none", "d-block");
|
||||
document.getElementById("timepicker2").parentNode.classList.remove("d-none");
|
||||
document.getElementById("timepicker2").classList.replace("d-none", "d-block");
|
||||
document.getElementById("event-location").classList.replace("d-none", "d-block");
|
||||
document.getElementById("event-description").classList.replace("d-none", "d-block");
|
||||
document.getElementById("event-start-date-tag").classList.replace("d-block", "d-none");
|
||||
document.getElementById("event-timepicker1-tag").classList.replace("d-block", "d-none");
|
||||
document.getElementById("event-timepicker2-tag").classList.replace("d-block", "d-none");
|
||||
document.getElementById("event-location-tag").classList.replace("d-block", "d-none");
|
||||
document.getElementById("event-description-tag").classList.replace("d-block", "d-none");
|
||||
document.getElementById('btn-save-event').removeAttribute("hidden");
|
||||
}
|
||||
|
||||
// upcoming Event
|
||||
function upcomingEvent(a) {
|
||||
a.sort(function (o1, o2) {
|
||||
return (new Date(o1.start)) - (new Date(o2.start));
|
||||
});
|
||||
document.getElementById("upcoming-event-list").innerHTML = null;
|
||||
Array.from(a).forEach(function (element) {
|
||||
var title = element.title;
|
||||
if (element.end) {
|
||||
endUpdatedDay = new Date(element.end);
|
||||
var updatedDay = endUpdatedDay.setDate(endUpdatedDay.getDate() - 1);
|
||||
}
|
||||
var e_dt = updatedDay ? updatedDay : undefined;
|
||||
if (e_dt == "Invalid Date" || e_dt == undefined) {
|
||||
e_dt = null;
|
||||
} else {
|
||||
const newDate = new Date(e_dt).toLocaleDateString('en', { year: 'numeric', month: 'numeric', day: 'numeric' });
|
||||
e_dt = new Date(newDate)
|
||||
.toLocaleDateString("en-GB", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
})
|
||||
.split(" ")
|
||||
.join(" ");
|
||||
}
|
||||
var st_date = element.start ? str_dt(element.start) : null;
|
||||
var ed_date = updatedDay ? str_dt(updatedDay) : null;
|
||||
if (st_date === ed_date) {
|
||||
e_dt = null;
|
||||
}
|
||||
var startDate = element.start;
|
||||
if (startDate === "Invalid Date" || startDate === undefined) {
|
||||
startDate = null;
|
||||
} else {
|
||||
const newDate = new Date(startDate).toLocaleDateString('en', { year: 'numeric', month: 'numeric', day: 'numeric' });
|
||||
startDate = new Date(newDate)
|
||||
.toLocaleDateString("en-GB", {
|
||||
day: "numeric",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
})
|
||||
.split(" ")
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
var end_dt = (e_dt) ? " to " + e_dt : '';
|
||||
var category = (element.className).split("-");
|
||||
var description = (element.description) ? element.description : "";
|
||||
var e_time_s = tConvert(getTime(element.start));
|
||||
var e_time_e = tConvert(getTime(updatedDay));
|
||||
if (e_time_s == e_time_e) {
|
||||
var e_time_s = "Full day event";
|
||||
var e_time_e = null;
|
||||
}
|
||||
var e_time_e = (e_time_e) ? " to " + e_time_e : "";
|
||||
|
||||
u_event = "<div class='card mb-3'>\
|
||||
<div class='card-body'>\
|
||||
<div class='d-flex mb-3'>\
|
||||
<div class='flex-grow-1'><i class='mdi mdi-checkbox-blank-circle me-2 text-" + category[2] + "'></i><span class='fw-medium'>" + startDate + end_dt + " </span></div>\
|
||||
<div class='flex-shrink-0'><small class='badge badge-soft-primary ms-auto'>" + e_time_s + e_time_e + "</small></div>\
|
||||
</div>\
|
||||
<h6 class='card-title fs-16'> " + title + "</h6>\
|
||||
<p class='text-muted text-truncate-two-lines mb-0'> " + description + "</p>\
|
||||
</div>\
|
||||
</div>";
|
||||
document.getElementById("upcoming-event-list").innerHTML += u_event;
|
||||
});
|
||||
};
|
||||
|
||||
function getTime(params) {
|
||||
params = new Date(params);
|
||||
if (params.getHours() != null) {
|
||||
var hour = params.getHours();
|
||||
var minute = (params.getMinutes()) ? params.getMinutes() : 00;
|
||||
return hour + ":" + minute;
|
||||
}
|
||||
}
|
||||
|
||||
function tConvert(time) {
|
||||
var t = time.split(":");
|
||||
var hours = t[0];
|
||||
var minutes = t[1];
|
||||
var newformat = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12;
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
return (hours + ':' + minutes + ' ' + newformat);
|
||||
}
|
||||
|
||||
var str_dt = function formatDate(date) {
|
||||
var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||
var d = new Date(date),
|
||||
month = '' + monthNames[(d.getMonth())],
|
||||
day = '' + d.getDate(),
|
||||
year = d.getFullYear();
|
||||
if (month.length < 2)
|
||||
month = '0' + month;
|
||||
if (day.length < 2)
|
||||
day = '0' + day;
|
||||
return [day + " " + month, year].join(',');
|
||||
};
|
||||
70
resources/js/pages/card.init.js
vendored
Executable file
70
resources/js/pages/card.init.js
vendored
Executable file
@@ -0,0 +1,70 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Card init js
|
||||
*/
|
||||
|
||||
var Portlet = function() {
|
||||
el = document.querySelector('.card a[data-toggle="reload"]');
|
||||
if (el) {
|
||||
el.addEventListener("click", function(ev) {
|
||||
ev.preventDefault();
|
||||
var $portlet = el.closest(".card");
|
||||
insertEl =
|
||||
'<div class="card-preloader"><div class="card-status"><div class="spinner-border text-success"><span class="visually-hidden">Loading...</span></div></div></div>';
|
||||
$portlet.children[1].insertAdjacentHTML("beforeend", insertEl);
|
||||
var $pd = $portlet.getElementsByClassName("card-preloader")[0];
|
||||
setTimeout(function() {
|
||||
$pd.remove();
|
||||
}, 500 + 300 * (Math.random() * 5));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Portlet();
|
||||
|
||||
var growingLoader = function() {
|
||||
element = document.querySelector('.card a[data-toggle="growing-reload"]');
|
||||
if (element) {
|
||||
element.addEventListener("click", function(ev) {
|
||||
ev.preventDefault();
|
||||
var $portlet = element.closest(".card");
|
||||
insertEl =
|
||||
'<div class="card-preloader"><div class="card-status"><div class="spinner-grow text-danger"><span class="visually-hidden">Loading...</span></div></div></div>';
|
||||
$portlet.children[1].insertAdjacentHTML("beforeend", insertEl);
|
||||
var $pd = $portlet.getElementsByClassName("card-preloader")[0];
|
||||
setTimeout(function() {
|
||||
$pd.remove();
|
||||
}, 500 + 300 * (Math.random() * 5));
|
||||
});
|
||||
}
|
||||
};
|
||||
growingLoader();
|
||||
|
||||
var customLoader = function() {
|
||||
customLoader1 = document.querySelector(
|
||||
'.card a[data-toggle="customer-loader"]'
|
||||
);
|
||||
if (customLoader1) {
|
||||
customLoader1.addEventListener("click", function(elem) {
|
||||
elem.preventDefault();
|
||||
var $portlet = customLoader1.closest(".card");
|
||||
insertEl =
|
||||
'<div class="card-preloader"><div class="card-status"><img src="assets/images/logo-sm.png" alt="" class="img-fluid custom-loader"></div></div>';
|
||||
$portlet.children[1].insertAdjacentHTML("beforeend", insertEl);
|
||||
var $pd = $portlet.getElementsByClassName("card-preloader")[0];
|
||||
setTimeout(function() {
|
||||
$pd.remove();
|
||||
}, 500 + 300 * (Math.random() * 5));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
customLoader();
|
||||
|
||||
//card-remove Js
|
||||
function delthis(id) {
|
||||
document.getElementById(id).remove();
|
||||
}
|
||||
319
resources/js/pages/chartjs.init.js
vendored
Executable file
319
resources/js/pages/chartjs.init.js
vendored
Executable file
@@ -0,0 +1,319 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Chartjs init js
|
||||
*/
|
||||
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color; else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if(val.length == 2){
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba("+rgbaColor+","+val[1]+")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Chart.defaults.borderColor= "rgba(133, 141, 152, 0.1)";
|
||||
Chart.defaults.color= "#858d98";
|
||||
|
||||
// line chart
|
||||
var islinechart = document.getElementById('lineChart');
|
||||
lineChartColor = getChartColorsArray('lineChart');
|
||||
if(lineChartColor){
|
||||
islinechart.setAttribute("width", islinechart.parentElement.offsetWidth);
|
||||
|
||||
var lineChart = new Chart(islinechart, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Sales Analytics",
|
||||
fill: true,
|
||||
lineTension: 0.5,
|
||||
backgroundColor: lineChartColor[0],
|
||||
borderColor: lineChartColor[1],
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: lineChartColor[1],
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: lineChartColor[1],
|
||||
pointHoverBorderColor: "#fff",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 1,
|
||||
pointHitRadius: 10,
|
||||
data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80]
|
||||
},
|
||||
{
|
||||
label: "Monthly Earnings",
|
||||
fill: true,
|
||||
lineTension: 0.5,
|
||||
backgroundColor: lineChartColor[2],
|
||||
borderColor: lineChartColor[3],
|
||||
borderCapStyle: 'butt',
|
||||
borderDash: [],
|
||||
borderDashOffset: 0.0,
|
||||
borderJoinStyle: 'miter',
|
||||
pointBorderColor: lineChartColor[3],
|
||||
pointBackgroundColor: "#fff",
|
||||
pointBorderWidth: 1,
|
||||
pointHoverRadius: 5,
|
||||
pointHoverBackgroundColor: lineChartColor[3],
|
||||
pointHoverBorderColor: "#eef0f2",
|
||||
pointHoverBorderWidth: 2,
|
||||
pointRadius: 1,
|
||||
pointHitRadius: 10,
|
||||
data: [80, 23, 56, 65, 23, 35, 85, 25, 92, 36]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
x: {
|
||||
ticks: {
|
||||
font: {
|
||||
family: 'Poppins',
|
||||
},
|
||||
},
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
font: {
|
||||
family: 'Poppins',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
// This more specific font property overrides the global property
|
||||
font: {
|
||||
family: 'Poppins',
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// bar chart
|
||||
var isbarchart = document.getElementById('bar');
|
||||
barChartColor = getChartColorsArray('bar');
|
||||
if(barChartColor){
|
||||
isbarchart.setAttribute("width", isbarchart.parentElement.offsetWidth);
|
||||
var barChart = new Chart(isbarchart, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Sales Analytics",
|
||||
backgroundColor: barChartColor[0],
|
||||
borderColor: barChartColor[0],
|
||||
borderWidth: 1,
|
||||
hoverBackgroundColor: barChartColor[1],
|
||||
hoverBorderColor: barChartColor[1],
|
||||
data: [65, 59, 81, 45, 56, 80, 50,20]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
x: {
|
||||
ticks: {
|
||||
font: {
|
||||
family: 'Poppins',
|
||||
},
|
||||
},
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
font: {
|
||||
family: 'Poppins',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
font: {
|
||||
family: 'Poppins',
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// pie chart
|
||||
var ispiechart = document.getElementById('pieChart');
|
||||
pieChartColors = getChartColorsArray('pieChart');
|
||||
if(pieChartColors){
|
||||
|
||||
var pieChart = new Chart(ispiechart, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: [
|
||||
"Desktops",
|
||||
"Tablets"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 180],
|
||||
backgroundColor: pieChartColors,
|
||||
hoverBackgroundColor: pieChartColors,
|
||||
hoverBorderColor: "#fff"
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
font: {
|
||||
family: 'Poppins',
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var isdoughnutchart = document.getElementById('doughnut');
|
||||
doughnutChartColors = getChartColorsArray('doughnut');
|
||||
if(doughnutChartColors){
|
||||
var lineChart = new Chart(isdoughnutchart, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: [
|
||||
"Desktops",
|
||||
"Tablets"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [300, 210],
|
||||
backgroundColor: doughnutChartColors,
|
||||
hoverBackgroundColor: doughnutChartColors,
|
||||
hoverBorderColor: "#fff"
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
font: {
|
||||
family: 'Poppins',
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// polarArea chart
|
||||
var ispolarAreachart = document.getElementById('polarArea');
|
||||
polarAreaChartColors = getChartColorsArray('polarArea');
|
||||
if(polarAreaChartColors){
|
||||
var lineChart = new Chart(ispolarAreachart, {
|
||||
type: 'polarArea',
|
||||
data: {
|
||||
labels: [
|
||||
"Series 1",
|
||||
"Series 2",
|
||||
"Series 3",
|
||||
"Series 4"
|
||||
],
|
||||
datasets: [{
|
||||
data: [
|
||||
11,
|
||||
16,
|
||||
7,
|
||||
18
|
||||
],
|
||||
backgroundColor: polarAreaChartColors,
|
||||
label: 'My dataset', // for legend
|
||||
hoverBorderColor: "#fff"
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
font: {
|
||||
family: 'Poppins',
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// radar chart
|
||||
var isradarchart = document.getElementById('radar');
|
||||
radarChartColors = getChartColorsArray('radar');
|
||||
if(radarChartColors){
|
||||
var lineChart = new Chart(isradarchart, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Desktops",
|
||||
backgroundColor: radarChartColors[0], //"rgba(42, 181, 125, 0.2)",
|
||||
borderColor: radarChartColors[1], //"#2ab57d",
|
||||
pointBackgroundColor: radarChartColors[1], //"#2ab57d",
|
||||
pointBorderColor: "#fff",
|
||||
pointHoverBackgroundColor: "#fff",
|
||||
pointHoverBorderColor: radarChartColors[1], //"#2ab57d",
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "Tablets",
|
||||
backgroundColor: radarChartColors[2], //"rgba(81, 86, 190, 0.2)",
|
||||
borderColor: radarChartColors[3], //"#5156be",
|
||||
pointBackgroundColor: radarChartColors[3], //"#5156be",
|
||||
pointBorderColor: "#fff",
|
||||
pointHoverBackgroundColor: "#fff",
|
||||
pointHoverBorderColor: radarChartColors[3], //"#5156be",
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
font: {
|
||||
family: 'Poppins',
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
968
resources/js/pages/chat.init.js
vendored
Executable file
968
resources/js/pages/chat.init.js
vendored
Executable file
@@ -0,0 +1,968 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Chat init js
|
||||
*/
|
||||
|
||||
(function () {
|
||||
var dummyUserImage = "assets/images/users/user-dummy-img.jpg";
|
||||
var dummyMultiUserImage = "assets/images/users/multi-user.jpg";
|
||||
var isreplyMessage = false;
|
||||
|
||||
// favourite btn
|
||||
Array.from(document.querySelectorAll(".favourite-btn")).forEach(function (item) {
|
||||
item.addEventListener("click", function (event) {
|
||||
this.classList.toggle("active");
|
||||
});
|
||||
});
|
||||
|
||||
// toggleSelected
|
||||
function toggleSelected() {
|
||||
var userChatElement = document.querySelectorAll(".user-chat");
|
||||
|
||||
Array.from(document.querySelectorAll(".chat-user-list li a")).forEach(function (item) {
|
||||
item.addEventListener("click", function (event) {
|
||||
userChatElement.forEach(function (elm) {
|
||||
elm.classList.add("user-chat-show");
|
||||
});
|
||||
|
||||
// chat user list link active
|
||||
var chatUserList = document.querySelector(".chat-user-list li.active");
|
||||
if (chatUserList) chatUserList.classList.remove("active");
|
||||
this.parentNode.classList.add("active");
|
||||
});
|
||||
});
|
||||
|
||||
// user-chat-remove
|
||||
document.querySelectorAll(".user-chat-remove").forEach(function (item) {
|
||||
item.addEventListener("click", function (event) {
|
||||
userChatElement.forEach(function (elm) {
|
||||
elm.classList.remove("user-chat-show");
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//User current Id
|
||||
var currentChatId = "users-chat";
|
||||
var currentSelectedChat = "users";
|
||||
var url = "assets/json/";
|
||||
var usersList = "";
|
||||
var userChatId = 1;
|
||||
|
||||
scrollToBottom(currentChatId);
|
||||
|
||||
//user list by json
|
||||
var getJSON = function (jsonurl, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", url + jsonurl, true);
|
||||
xhr.responseType = "json";
|
||||
xhr.onload = function () {
|
||||
var status = xhr.status;
|
||||
if (status === 200) {
|
||||
callback(null, xhr.response);
|
||||
} else {
|
||||
callback(status, xhr.response);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
};
|
||||
|
||||
// get User list
|
||||
getJSON("chat-users-list.json", function (err, data) {
|
||||
if (err !== null) {
|
||||
console.log("Something went wrong: " + err);
|
||||
} else {
|
||||
// set users message list
|
||||
var users = data[0].users;
|
||||
users.forEach(function (userData, index) {
|
||||
var isUserProfile = userData.profile ? '<img src="' + userData.profile + '" class="rounded-circle img-fluid userprofile" alt=""><span class="user-status"></span>'
|
||||
: '<div class="avatar-title rounded-circle bg-primary text-white fs-10">' + userData.nickname + '</div><span class="user-status"></span>';
|
||||
|
||||
var isMessageCount = userData.messagecount ? '<div class="ms-auto"><span class="badge badge-soft-dark rounded p-1">' +
|
||||
userData.messagecount +
|
||||
"</span></div>"
|
||||
: "";
|
||||
|
||||
var messageCount = userData.messagecount ? '<a href="javascript: void(0);" class="unread-msg-user">' : '<a href="javascript: void(0);">'
|
||||
var activeClass = userData.id === 1 ? "active" : "";
|
||||
document.getElementById("userList").innerHTML +=
|
||||
'<li id="contact-id-' + userData.id + '" data-name="direct-message" class="' + activeClass + '">\
|
||||
'+ messageCount + ' \
|
||||
<div class="d-flex align-items-center">\
|
||||
<div class="flex-shrink-0 chat-user-img ' + userData.status + ' align-self-center me-2 ms-0">\
|
||||
<div class="avatar-xxs">\
|
||||
' + isUserProfile + '\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="flex-grow-1 overflow-hidden">\
|
||||
<p class="text-truncate mb-0">' + userData.name + "</p>\
|
||||
</div>\
|
||||
" + isMessageCount + "\
|
||||
</div>\
|
||||
</a>\
|
||||
</li>";
|
||||
});
|
||||
|
||||
// set channels list
|
||||
var channelsData = data[0].channels;
|
||||
channelsData.forEach(function (isChannel, index) {
|
||||
var isMessage = isChannel.messagecount
|
||||
? '<div class="flex-shrink-0 ms-2"><span class="badge badge-soft-dark rounded p-1">' +
|
||||
isChannel.messagecount +
|
||||
"</span></div>"
|
||||
: "";
|
||||
var isMessageCount = isChannel.messagecount ? '<div class="ms-auto"><span class="badge badge-soft-dark rounded p-1">' +
|
||||
isChannel.messagecount +
|
||||
"</span></div>"
|
||||
: "";
|
||||
var messageCount = isChannel.messagecount ? '<a href="javascript: void(0);" class="unread-msg-user">' : '<a href="javascript: void(0);">'
|
||||
document.getElementById("channelList").innerHTML +=
|
||||
'<li id="contact-id-' + isChannel.id + '" data-name="channel">\
|
||||
'+ messageCount + ' \
|
||||
<div class="d-flex align-items-center">\
|
||||
<div class="flex-shrink-0 chat-user-img align-self-center me-2 ms-0">\
|
||||
<div class="avatar-xxs">\
|
||||
<div class="avatar-title bg-light rounded-circle text-body">#</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="flex-grow-1 overflow-hidden">\
|
||||
<p class="text-truncate mb-0">' + isChannel.name + "</p>\
|
||||
</div>\
|
||||
<div>" + isMessage + "</div>\
|
||||
</div>\
|
||||
</a>\
|
||||
</li>";
|
||||
});
|
||||
}
|
||||
toggleSelected();
|
||||
chatSwap();
|
||||
});
|
||||
|
||||
// get contacts list
|
||||
getJSON("chat-contacts-list.json", function (err, data) {
|
||||
if (err !== null) {
|
||||
console.log("Something went wrong: " + err);
|
||||
} else {
|
||||
usersList = data;
|
||||
data.sort(function (a, b) {
|
||||
return a.name.localeCompare(b.name);
|
||||
});
|
||||
// set favourite users list
|
||||
var msgHTML = "";
|
||||
var userNameCharAt = "";
|
||||
|
||||
usersList.forEach(function (user, index) {
|
||||
var profile = user.profile
|
||||
? '<img src="' +
|
||||
user.profile +
|
||||
'" class="img-fluid rounded-circle" alt="">'
|
||||
: '<span class="avatar-title rounded-circle bg-primary fs-10">' + user.nickname + '</span>';
|
||||
|
||||
msgHTML =
|
||||
'<li>\
|
||||
<div class="d-flex align-items-center">\
|
||||
<div class="flex-shrink-0 me-2">\
|
||||
<div class="avatar-xxs">\
|
||||
' +
|
||||
profile +
|
||||
'\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="flex-grow-1">\
|
||||
<p class="text-truncate contactlist-name mb-0">' +
|
||||
user.name +
|
||||
'</p>\
|
||||
</div>\
|
||||
<div class="flex-shrink-0">\
|
||||
<div class="dropdown">\
|
||||
<a href="#" class="text-muted" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\
|
||||
<i class="ri-more-2-fill"></i>\
|
||||
</a>\
|
||||
<div class="dropdown-menu dropdown-menu-end">\
|
||||
<a class="dropdown-item" href="#"><i class="ri-pencil-line text-muted me-2 align-bottom"></i>Edit</a>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-forbid-2-line text-muted me-2 align-bottom"></i>Block</a>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-delete-bin-6-line text-muted me-2 align-bottom"></i>Remove</a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>';
|
||||
var isSortContact =
|
||||
'<div class="mt-3" >\
|
||||
<div class="contact-list-title">' +
|
||||
user.name.charAt(0).toUpperCase() +
|
||||
'\
|
||||
</div>\
|
||||
<ul id="contact-sort-' +
|
||||
user.name.charAt(0) +
|
||||
'" class="list-unstyled contact-list" >';
|
||||
|
||||
if (userNameCharAt != user.name.charAt(0)) {
|
||||
document.getElementsByClassName("sort-contact")[0].innerHTML +=
|
||||
isSortContact;
|
||||
}
|
||||
document.getElementById(
|
||||
"contact-sort-" + user.name.charAt(0)
|
||||
).innerHTML =
|
||||
document.getElementById("contact-sort-" + user.name.charAt(0))
|
||||
.innerHTML + msgHTML;
|
||||
userNameCharAt = user.name.charAt(0);
|
||||
+"</ul>" + "</div>";
|
||||
});
|
||||
}
|
||||
contactList();
|
||||
toggleSelected();
|
||||
});
|
||||
|
||||
function contactList() {
|
||||
document.querySelectorAll(".sort-contact ul li").forEach(function (item) {
|
||||
item.addEventListener("click", function (event) {
|
||||
currentSelectedChat = "users";
|
||||
updateSelectedChat();
|
||||
var contactName = item.querySelector("li .contactlist-name").innerHTML;
|
||||
document.querySelector(".user-chat-topbar .text-truncate .username").innerHTML = contactName;
|
||||
document.querySelector(".profile-offcanvas .username").innerHTML = contactName;
|
||||
|
||||
if (isreplyMessage == true) {
|
||||
isreplyMessage = false;
|
||||
document.querySelector(".replyCard").classList.remove("show");
|
||||
}
|
||||
|
||||
if (item.querySelector(".align-items-center").querySelector(".avatar-xxs img")) {
|
||||
var contactImg = item.querySelector(".align-items-center").querySelector(".avatar-xxs .rounded-circle").getAttribute("src");
|
||||
document.querySelector(".user-own-img .avatar-xs").setAttribute("src", contactImg);
|
||||
document.querySelector(".profile-offcanvas .profile-img").setAttribute("src", contactImg);
|
||||
} else {
|
||||
document.querySelector(".user-own-img .avatar-xs").setAttribute("src", dummyUserImage);
|
||||
document.querySelector(".profile-offcanvas .profile-img").setAttribute("src", dummyUserImage);
|
||||
}
|
||||
var conversationImg = document.getElementById("users-conversation");
|
||||
conversationImg.querySelectorAll(".left .chat-avatar").forEach(function (item3) {
|
||||
if (contactImg) {
|
||||
item3.querySelector("img").setAttribute("src", contactImg);
|
||||
} else {
|
||||
item3.querySelector("img").setAttribute("src", dummyUserImage);
|
||||
}
|
||||
});
|
||||
window.stop();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//user list by json
|
||||
function getJSONFile(jsonurl, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", jsonurl, true);
|
||||
xhr.responseType = "json";
|
||||
xhr.onload = function () {
|
||||
var status = xhr.status;
|
||||
if (status === 200) {
|
||||
document.getElementById("elmLoader").innerHTML = '';
|
||||
callback(null, xhr.response);
|
||||
} else {
|
||||
callback(status, xhr.response);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
// getNextMsgCounts
|
||||
function getNextMsgCounts(chatsData, i, from_id) {
|
||||
var counts = 0;
|
||||
while (chatsData[i]) {
|
||||
if (chatsData[i + 1] && chatsData[i + 1]["from_id"] == from_id) {
|
||||
counts++;
|
||||
i++;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return counts;
|
||||
}
|
||||
|
||||
//getNextMsgs
|
||||
function getNextMsgs(chatsData, i, from_id, isContinue) {
|
||||
var msgs = 0;
|
||||
while (chatsData[i]) {
|
||||
if (chatsData[i + 1] && chatsData[i + 1]["from_id"] == from_id) {
|
||||
msgs = getMsg(chatsData[i + 1].id, chatsData[i + 1].msg, chatsData[i + 1].has_images, chatsData[i + 1].has_files, chatsData[i + 1].has_dropDown);
|
||||
i++;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return msgs;
|
||||
}
|
||||
|
||||
// getMeg
|
||||
function getMsg(id, msg, has_images, has_files, has_dropDown) {
|
||||
var msgHTML = '<div class="ctext-wrap">';
|
||||
if (msg != null) {
|
||||
msgHTML += '<div class="ctext-wrap-content" id=' + id + '><p class="mb-0 ctext-content">' + msg + "</p></div>";
|
||||
} else if (has_images && has_images.length > 0) {
|
||||
msgHTML += '<div class="message-img mb-0">';
|
||||
for (i = 0; i < has_images.length; i++) {
|
||||
msgHTML +=
|
||||
'<div class="message-img-list">\
|
||||
<div>\
|
||||
<a class="popup-img d-inline-block" href="' + has_images[i] + '">\
|
||||
<img src="' + has_images[i] + '" alt="" class="rounded border">\
|
||||
</a>\
|
||||
</div>\
|
||||
<div class="message-img-link">\
|
||||
<ul class="list-inline mb-0">\
|
||||
<li class="list-inline-item dropdown">\
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\
|
||||
<i class="ri-more-fill"></i>\
|
||||
</a>\
|
||||
<div class="dropdown-menu">\
|
||||
<a class="dropdown-item" href="' + has_images[i] + '" download=""><i class="ri-download-2-line me-2 text-muted align-bottom"></i>Download</a>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-reply-line me-2 text-muted align-bottom"></i>Reply</a>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-share-line me-2 text-muted align-bottom"></i>Forward</a>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-bookmark-line me-2 text-muted align-bottom"></i>Bookmark</a>\
|
||||
<a class="dropdown-item delete-image" href="#"><i class="ri-delete-bin-5-line me-2 text-muted align-bottom"></i>Delete</a>\
|
||||
</div>\
|
||||
</li>\
|
||||
</ul>\
|
||||
</div>\
|
||||
</div>';
|
||||
}
|
||||
msgHTML += "</div>";
|
||||
} else if (has_files.length > 0) {
|
||||
msgHTML +=
|
||||
'<div class="ctext-wrap-content">\
|
||||
<div class="p-3 border-primary border rounded-3">\
|
||||
<div class="d-flex align-items-center attached-file">\
|
||||
<div class="flex-shrink-0 avatar-sm me-3 ms-0 attached-file-avatar">\
|
||||
<div class="avatar-title bg-soft-primary text-primary rounded-circle font-size-20">\
|
||||
<i class="ri-attachment-2"></i>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="flex-grow-1 overflow-hidden">\
|
||||
<div class="text-start">\
|
||||
<h5 class="font-size-14 mb-1">design-phase-1-approved.pdf</h5>\
|
||||
<p class="text-muted text-truncate font-size-13 mb-0">12.5 MB</p>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="flex-shrink-0 ms-4">\
|
||||
<div class="d-flex gap-2 font-size-20 d-flex align-items-start">\
|
||||
<div>\
|
||||
<a href="#" class="text-muted">\
|
||||
<i class="bx bxs-download"></i>\
|
||||
</a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
}
|
||||
if (has_dropDown === true) {
|
||||
msgHTML +=
|
||||
'<div class="dropdown align-self-start message-box-drop">\
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\
|
||||
<i class="ri-more-2-fill"></i>\
|
||||
</a>\
|
||||
<div class="dropdown-menu">\
|
||||
<a class="dropdown-item reply-message" href="#"><i class="ri-reply-line me-2 text-muted align-bottom"></i>Reply</a>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-share-line me-2 text-muted align-bottom"></i>Forward</a>\
|
||||
<a class="dropdown-item copy-message" href="#"><i class="ri-file-copy-line me-2 text-muted align-bottom"></i>Copy</a>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-bookmark-line me-2 text-muted align-bottom"></i>Bookmark</a>\
|
||||
<a class="dropdown-item delete-item" href="#"><i class="ri-delete-bin-5-line me-2 text-muted align-bottom"></i>Delete</a>\
|
||||
</div>\
|
||||
</div>'
|
||||
}
|
||||
msgHTML += '</div>';
|
||||
return msgHTML;
|
||||
}
|
||||
|
||||
function updateSelectedChat() {
|
||||
if (currentSelectedChat == "users") {
|
||||
document.getElementById("channel-chat").style.display = "none";
|
||||
document.getElementById("users-chat").style.display = "block";
|
||||
getChatMessages(url + "chats.json");
|
||||
} else {
|
||||
document.getElementById("channel-chat").style.display = "block";
|
||||
document.getElementById("users-chat").style.display = "none";
|
||||
getChatMessages(url + "chats.json");
|
||||
}
|
||||
}
|
||||
updateSelectedChat();
|
||||
|
||||
|
||||
//Chat Message
|
||||
function getChatMessages(jsonFileUrl) {
|
||||
getJSONFile(jsonFileUrl, function (err, data) {
|
||||
if (err !== null) {
|
||||
console.log("Something went wrong: " + err);
|
||||
} else {
|
||||
var chatsData =
|
||||
currentSelectedChat == "users" ? data[0].chats : data[0].channel_chat;
|
||||
|
||||
document.getElementById(
|
||||
currentSelectedChat + "-conversation"
|
||||
).innerHTML = "";
|
||||
var isContinue = 0;
|
||||
chatsData.forEach(function (isChat, index) {
|
||||
|
||||
if (isContinue > 0) {
|
||||
isContinue = isContinue - 1;
|
||||
return;
|
||||
}
|
||||
var isAlighn = isChat.from_id == userChatId ? " right" : " left";
|
||||
|
||||
var user = usersList.find(function (list) {
|
||||
return list.id == isChat.to_id;
|
||||
});
|
||||
|
||||
var msgHTML = '<li class="chat-list' + isAlighn + '" id=' + isChat.id + '>\
|
||||
<div class="conversation-list">';
|
||||
if (userChatId != isChat.from_id)
|
||||
msgHTML += '<div class="chat-avatar"><img src="' + user.profile + '" alt=""></div>';
|
||||
|
||||
msgHTML += '<div class="user-chat-content">';
|
||||
msgHTML += getMsg(isChat.id, isChat.msg, isChat.has_images, isChat.has_files, isChat.has_dropDown);
|
||||
if (chatsData[index + 1] && isChat.from_id == chatsData[index + 1]["from_id"]) {
|
||||
isContinue = getNextMsgCounts(chatsData, index, isChat.from_id);
|
||||
msgHTML += getNextMsgs(chatsData, index, isChat.from_id, isContinue);
|
||||
}
|
||||
|
||||
msgHTML +=
|
||||
'<div class="conversation-name"><span class="d-none name">' + user.name + '</span><small class="text-muted time">' + isChat.datetime +
|
||||
'</small> <span class="text-success check-message-icon"><i class="bx bx-check-double"></i></span></div>';
|
||||
msgHTML += "</div>\
|
||||
</div>\
|
||||
</li>";
|
||||
|
||||
document.getElementById(currentSelectedChat + "-conversation").innerHTML += msgHTML;
|
||||
});
|
||||
}
|
||||
deleteMessage();
|
||||
deleteChannelMessage();
|
||||
deleteImage();
|
||||
replyMessage();
|
||||
replyChannelMessage();
|
||||
copyMessage();
|
||||
copyChannelMessage();
|
||||
copyClipboard();
|
||||
scrollToBottom("users-chat");
|
||||
updateLightbox();
|
||||
});
|
||||
}
|
||||
|
||||
// GLightbox Popup
|
||||
function updateLightbox() {
|
||||
var lightbox = GLightbox({
|
||||
selector: ".popup-img",
|
||||
title: false,
|
||||
});
|
||||
}
|
||||
|
||||
//User current Id
|
||||
var currentChatId = "users-chat";
|
||||
scrollToBottom(currentChatId);
|
||||
|
||||
// // Scroll to Bottom
|
||||
function scrollToBottom(id) {
|
||||
setTimeout(function () {
|
||||
var simpleBar = (document.getElementById(id).querySelector("#chat-conversation .simplebar-content-wrapper")) ?
|
||||
document.getElementById(id).querySelector("#chat-conversation .simplebar-content-wrapper") : ''
|
||||
|
||||
var offsetHeight = document.getElementsByClassName("chat-conversation-list")[0] ?
|
||||
document.getElementById(id).getElementsByClassName("chat-conversation-list")[0].scrollHeight - window.innerHeight + 335 : 0;
|
||||
if (offsetHeight)
|
||||
simpleBar.scrollTo({
|
||||
top: offsetHeight,
|
||||
behavior: "smooth"
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
//chat form
|
||||
var chatForm = document.querySelector("#chatinput-form");
|
||||
var chatInput = document.querySelector("#chat-input");
|
||||
var chatInputfeedback = document.querySelector(".chat-input-feedback");
|
||||
|
||||
function currentTime() {
|
||||
var ampm = new Date().getHours() >= 12 ? "pm" : "am";
|
||||
var hour =
|
||||
new Date().getHours() > 12 ?
|
||||
new Date().getHours() % 12 :
|
||||
new Date().getHours();
|
||||
var minute =
|
||||
new Date().getMinutes() < 10 ?
|
||||
"0" + new Date().getMinutes() :
|
||||
new Date().getMinutes();
|
||||
if (hour < 10) {
|
||||
return "0" + hour + ":" + minute + " " + ampm;
|
||||
} else {
|
||||
return hour + ":" + minute + " " + ampm;
|
||||
}
|
||||
}
|
||||
setInterval(currentTime, 1000);
|
||||
|
||||
var messageIds = 0;
|
||||
|
||||
if (chatForm) {
|
||||
//add an item to the List, including to local storage
|
||||
chatForm.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var chatId = currentChatId;
|
||||
var chatReplyId = currentChatId;
|
||||
|
||||
var chatInputValue = chatInput.value
|
||||
|
||||
if (chatInputValue.length === 0) {
|
||||
chatInputfeedback.classList.add("show");
|
||||
setTimeout(function () {
|
||||
chatInputfeedback.classList.remove("show");
|
||||
}, 2000);
|
||||
} else {
|
||||
if (isreplyMessage == true) {
|
||||
getReplyChatList(chatReplyId, chatInputValue);
|
||||
isreplyMessage = false;
|
||||
} else {
|
||||
getChatList(chatId, chatInputValue);
|
||||
}
|
||||
scrollToBottom(chatId || chatReplyId);
|
||||
}
|
||||
chatInput.value = "";
|
||||
|
||||
//reply msg remove textarea
|
||||
document.getElementById("close_toggle").click();
|
||||
})
|
||||
}
|
||||
|
||||
//user Name and user Profile change on click
|
||||
function chatSwap() {
|
||||
document.querySelectorAll("#userList li").forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
currentSelectedChat = "users";
|
||||
updateSelectedChat();
|
||||
currentChatId = "users-chat";
|
||||
var contactId = item.getAttribute("id");
|
||||
var username = item.querySelector(".text-truncate").innerHTML;
|
||||
var userProfile = item.querySelector(".avatar-xxs .userprofile").getAttribute("src");
|
||||
|
||||
document.querySelector(".user-chat-topbar .text-truncate .username").innerHTML = username;
|
||||
document.querySelector(".profile-offcanvas .username").innerHTML = username;
|
||||
|
||||
|
||||
if (isreplyMessage == true) {
|
||||
isreplyMessage = false;
|
||||
document.querySelector(".replyCard").classList.remove("show");
|
||||
}
|
||||
|
||||
if (document.getElementById(contactId).querySelector(".userprofile")) {
|
||||
var userProfile = document.getElementById(contactId).querySelector(".userprofile").getAttribute("src");
|
||||
document.querySelector(".user-chat-topbar .avatar-xs").setAttribute("src", userProfile);
|
||||
document.querySelector(".profile-offcanvas .avatar-lg").setAttribute("src", userProfile);
|
||||
} else {
|
||||
document.querySelector(".user-chat-topbar .avatar-xs").setAttribute("src", dummyUserImage);
|
||||
document.querySelector(".profile-offcanvas .avatar-lg").setAttribute("src", dummyUserImage);
|
||||
}
|
||||
var conversationImg = document.getElementById("users-conversation");
|
||||
conversationImg.querySelectorAll(".left .chat-avatar").forEach(function (item) {
|
||||
if (userProfile) {
|
||||
item.querySelector("img").setAttribute("src", userProfile);
|
||||
} else {
|
||||
item.querySelector("img").setAttribute("src", dummyUserImage);
|
||||
}
|
||||
});
|
||||
window.stop();
|
||||
});
|
||||
});
|
||||
|
||||
//channel Name and channel Profile change on click
|
||||
document.querySelectorAll("#channelList li").forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
currentChatId = "channel-chat";
|
||||
currentSelectedChat = "channel";
|
||||
updateSelectedChat();
|
||||
var channelname = item.querySelector(".text-truncate").innerHTML;
|
||||
var changeChannelName = document.getElementById("channel-chat");
|
||||
changeChannelName.querySelector(".user-chat-topbar .text-truncate .username").innerHTML = channelname;
|
||||
document.querySelector(".profile-offcanvas .username").innerHTML = channelname;
|
||||
|
||||
changeChannelName.querySelector(".user-chat-topbar .avatar-xs").setAttribute("src", dummyMultiUserImage);
|
||||
document.querySelector(".profile-offcanvas .avatar-lg").setAttribute("src", dummyMultiUserImage);
|
||||
if (isreplyMessage == true) {
|
||||
isreplyMessage = false;
|
||||
document.querySelector(".replyCard").classList.remove("show");
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
//Copy Message to clipboard
|
||||
var itemList = document.querySelector(".chat-conversation-list");
|
||||
function copyMessage() {
|
||||
var copyMessage = itemList.querySelectorAll(".copy-message");
|
||||
copyMessage.forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
var isText = item.closest(".ctext-wrap").children[0]
|
||||
? item.closest(".ctext-wrap").children[0].children[0].innerText
|
||||
: "";
|
||||
navigator.clipboard.writeText(isText);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function copyChannelMessage() {
|
||||
var copyChannelMessage = channelItemList.querySelectorAll(".copy-message");
|
||||
copyChannelMessage.forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
var isText = item.closest(".ctext-wrap").children[0]
|
||||
? item.closest(".ctext-wrap").children[0].children[0].innerText
|
||||
: "";
|
||||
navigator.clipboard.writeText(isText);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
//Copy Message Alert
|
||||
function copyClipboard() {
|
||||
var copyClipboardAlert = document.querySelectorAll(".copy-message");
|
||||
copyClipboardAlert.forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
document.getElementById("copyClipBoard").style.display = "block";
|
||||
document.getElementById("copyClipBoardChannel").style.display = "block";
|
||||
setTimeout(hideclipboard, 1000);
|
||||
function hideclipboard() {
|
||||
document.getElementById("copyClipBoard").style.display = "none";
|
||||
document.getElementById("copyClipBoardChannel").style.display =
|
||||
"none";
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//Delete Message
|
||||
function deleteMessage() {
|
||||
var deleteItems = itemList.querySelectorAll(".delete-item");
|
||||
deleteItems.forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
item.closest(".user-chat-content").childElementCount == 2
|
||||
? item.closest(".chat-list").remove()
|
||||
: item.closest(".ctext-wrap").remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//Delete Image
|
||||
function deleteImage() {
|
||||
var deleteImage = itemList.querySelectorAll(".chat-conversation-list .chat-list");
|
||||
deleteImage.forEach(function (item) {
|
||||
item.querySelectorAll(".delete-image").forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function () {
|
||||
subitem.closest(".message-img").childElementCount == 1
|
||||
? subitem.closest(".chat-list").remove()
|
||||
: subitem.closest(".message-img-list").remove();
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
deleteImage();
|
||||
|
||||
//Delete Channel Message
|
||||
var channelItemList = document.querySelector("#channel-conversation");
|
||||
function deleteChannelMessage() {
|
||||
channelChatList = channelItemList.querySelectorAll(".delete-item");
|
||||
channelChatList.forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
item.closest(".user-chat-content").childElementCount == 2
|
||||
? item.closest(".chat-list").remove()
|
||||
: item.closest(".ctext-wrap").remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
deleteChannelMessage();
|
||||
|
||||
//Reply Message
|
||||
function replyMessage() {
|
||||
var replyMessage = itemList.querySelectorAll(".reply-message");
|
||||
var replyToggleOpen = document.querySelector(".replyCard");
|
||||
var replyToggleClose = document.querySelector("#close_toggle");
|
||||
|
||||
replyMessage.forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
isreplyMessage = true;
|
||||
replyToggleOpen.classList.add("show");
|
||||
replyToggleClose.addEventListener("click", function () {
|
||||
replyToggleOpen.classList.remove("show");
|
||||
});
|
||||
|
||||
var replyMsg = item.closest(".ctext-wrap").children[0].children[0].innerText;
|
||||
document.querySelector(".replyCard .replymessage-block .flex-grow-1 .mb-0").innerText = replyMsg;
|
||||
var replyuser = document.querySelector(".user-chat-topbar .text-truncate .username").innerHTML;
|
||||
var msgOwnerName = (item.closest(".chat-list")) ? item.closest(".chat-list").classList.contains("left") ? replyuser : 'You' : replyuser;
|
||||
document.querySelector(".replyCard .replymessage-block .flex-grow-1 .conversation-name").innerText = msgOwnerName;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//reply Channelmessage
|
||||
function replyChannelMessage() {
|
||||
var replyChannelMessage = channelItemList.querySelectorAll(".reply-message");
|
||||
var replyChannelToggleOpen = document.querySelector(".replyCard");
|
||||
var replyChannelToggleClose = document.querySelector("#close_toggle");
|
||||
|
||||
replyChannelMessage.forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
isreplyMessage = true;
|
||||
replyChannelToggleOpen.classList.add("show");
|
||||
replyChannelToggleClose.addEventListener("click", function () {
|
||||
replyChannelToggleOpen.classList.remove("show");
|
||||
});
|
||||
var replyChannelMsg = item.closest(".ctext-wrap").children[0].children[0].innerText;
|
||||
document.querySelector(".replyCard .replymessage-block .flex-grow-1 .mb-0").innerText = replyChannelMsg;
|
||||
var replyChanneluser = item.closest(".user-chat-content").querySelector(".conversation-name .name").innerText;
|
||||
var msgOwnerName = (item.closest(".chat-list")) ? item.closest(".chat-list").classList.contains("left") ? replyChanneluser : 'You' : replyChanneluser;
|
||||
document.querySelector(".replyCard .replymessage-block .flex-grow-1 .conversation-name").innerText = msgOwnerName;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//Append New Message
|
||||
var getChatList = function (chatid, chatItems) {
|
||||
messageIds++;
|
||||
var chatConList = document.getElementById(chatid);
|
||||
var itemList = chatConList.querySelector(".chat-conversation-list");
|
||||
|
||||
if (chatItems != null) {
|
||||
itemList.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
'<li class="chat-list right" id="chat-list-' +
|
||||
messageIds +
|
||||
'" >\
|
||||
<div class="conversation-list">\
|
||||
<div class="user-chat-content">\
|
||||
<div class="ctext-wrap">\
|
||||
<div class="ctext-wrap-content">\
|
||||
<p class="mb-0 ctext-content">\
|
||||
' +
|
||||
chatItems + '\
|
||||
</p>\
|
||||
</div>\
|
||||
<div class="dropdown align-self-start message-box-drop">\
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\
|
||||
<i class="ri-more-2-fill"></i>\
|
||||
</a>\
|
||||
<div class="dropdown-menu">\
|
||||
<a class="dropdown-item reply-message" href="#"><i class="ri-reply-line me-2 text-muted align-bottom"></i>Reply</a>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-share-line me-2 text-muted align-bottom"></i>Forward</a>\
|
||||
<a class="dropdown-item copy-message" href="#""><i class="ri-file-copy-line me-2 text-muted align-bottom"></i>Copy</a>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-bookmark-line me-2 text-muted align-bottom"></i>Bookmark</a>\
|
||||
<a class="dropdown-item delete-item" href="#"><i class="ri-delete-bin-5-line me-2 text-muted align-bottom"></i>Delete</a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="conversation-name">\
|
||||
<small class="text-muted time">' +
|
||||
currentTime() +
|
||||
'</small>\
|
||||
<span class="text-success check-message-icon"><i class="bx bx-check"></i></span>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>'
|
||||
);
|
||||
}
|
||||
|
||||
// remove chat list
|
||||
var newChatList = document.getElementById("chat-list-" + messageIds);
|
||||
newChatList.querySelectorAll(".delete-item").forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function () {
|
||||
itemList.removeChild(newChatList);
|
||||
});
|
||||
});
|
||||
|
||||
//Copy Message
|
||||
newChatList.querySelectorAll(".copy-message").forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function () {
|
||||
var currentValue =
|
||||
newChatList.childNodes[1].firstElementChild.firstElementChild
|
||||
.firstElementChild.firstElementChild.innerText;
|
||||
navigator.clipboard.writeText(currentValue);
|
||||
});
|
||||
});
|
||||
|
||||
//Copy Clipboard alert
|
||||
newChatList.querySelectorAll(".copy-message").forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function () {
|
||||
document.getElementById("copyClipBoard").style.display = "block";
|
||||
setTimeout(hideclipboardNew, 1000);
|
||||
|
||||
function hideclipboardNew() {
|
||||
document.getElementById("copyClipBoard").style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//reply Message model
|
||||
newChatList.querySelectorAll(".reply-message").forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function () {
|
||||
var replyToggleOpenNew = document.querySelector(".replyCard");
|
||||
var replyToggleCloseNew = document.querySelector("#close_toggle");
|
||||
var replyMessageNew = subitem.closest(".ctext-wrap").children[0].children[0].innerText;
|
||||
var replyUserNew = document.querySelector(".replyCard .replymessage-block .flex-grow-1 .conversation-name").innerHTML;
|
||||
isreplyMessage = true;
|
||||
replyToggleOpenNew.classList.add("show");
|
||||
replyToggleCloseNew.addEventListener("click", function () {
|
||||
replyToggleOpenNew.classList.remove("show");
|
||||
});
|
||||
var msgOwnerName = (subitem.closest(".chat-list")) ? subitem.closest(".chat-list").classList.contains("left") ? replyUserNew : 'You' : replyUserNew;
|
||||
document.querySelector(".replyCard .replymessage-block .flex-grow-1 .conversation-name").innerText = msgOwnerName;
|
||||
document.querySelector(".replyCard .replymessage-block .flex-grow-1 .mb-0").innerText = replyMessageNew;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
var messageboxcollapse = 0;
|
||||
|
||||
//message with reply
|
||||
var getReplyChatList = function (chatReplyId, chatReplyItems) {
|
||||
var chatReplyUser = document.querySelector(".replyCard .replymessage-block .flex-grow-1 .conversation-name").innerHTML;
|
||||
var chatReplyMessage = document.querySelector(".replyCard .replymessage-block .flex-grow-1 .mb-0").innerText;
|
||||
|
||||
messageIds++;
|
||||
var chatreplyConList = document.getElementById(chatReplyId);
|
||||
var itemReplyList = chatreplyConList.querySelector(".chat-conversation-list");
|
||||
if (chatReplyItems != null) {
|
||||
itemReplyList.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
'<li class="chat-list right" id="chat-list-' + messageIds + '" >\
|
||||
<div class="conversation-list">\
|
||||
<div class="user-chat-content">\
|
||||
<div class="ctext-wrap">\
|
||||
<div class="ctext-wrap-content">\
|
||||
<div class="replymessage-block mb-0 d-flex align-items-start">\
|
||||
<div class="flex-grow-1">\
|
||||
<h5 class="conversation-name">' + chatReplyUser + '</h5>\
|
||||
<p class="mb-0">' + chatReplyMessage + '</p>\
|
||||
</div>\
|
||||
<div class="flex-shrink-0">\
|
||||
<button type="button" class="btn btn-sm btn-link mt-n2 me-n3 font-size-18">\
|
||||
</button>\
|
||||
</div>\
|
||||
</div>\
|
||||
<p class="mb-0 ctext-content mt-1">\
|
||||
' + chatReplyItems + '\
|
||||
</p>\
|
||||
</div>\
|
||||
<div class="dropdown align-self-start message-box-drop">\
|
||||
<a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\
|
||||
<i class="ri-more-2-fill"></i>\
|
||||
</a>\
|
||||
<div class="dropdown-menu">\
|
||||
<a class="dropdown-item reply-message" href="#"><i class="ri-reply-line me-2 text-muted align-bottom"></i>Reply</a>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-share-line me-2 text-muted align-bottom"></i>Forward</a>\
|
||||
<a class="dropdown-item copy-message" href="#"><i class="ri-file-copy-line me-2 text-muted align-bottom"></i>Copy</a>\
|
||||
<a class="dropdown-item" href="#"><i class="ri-bookmark-line me-2 text-muted align-bottom"></i>Bookmark</a>\
|
||||
<a class="dropdown-item delete-item" href="#"><i class="ri-delete-bin-5-line me-2 text-muted align-bottom"></i>Delete</a>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="conversation-name">\
|
||||
<small class="text-muted time">' + currentTime() + '</small>\
|
||||
<span class="text-success check-message-icon"><i class="bx bx-check"></i></span>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</li>'
|
||||
);
|
||||
messageboxcollapse++;
|
||||
}
|
||||
|
||||
// remove chat list
|
||||
var newChatList = document.getElementById("chat-list-" + messageIds);
|
||||
newChatList.querySelectorAll(".delete-item").forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function () {
|
||||
itemList.removeChild(newChatList);
|
||||
});
|
||||
});
|
||||
|
||||
//Copy Clipboard alert
|
||||
newChatList.querySelectorAll(".copy-message").forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function () {
|
||||
document.getElementById("copyClipBoard").style.display = "block";
|
||||
document.getElementById("copyClipBoardChannel").style.display = "block";
|
||||
setTimeout(hideclipboardNew, 1000);
|
||||
|
||||
function hideclipboardNew() {
|
||||
document.getElementById("copyClipBoard").style.display = "none";
|
||||
document.getElementById("copyClipBoardChannel").style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
newChatList.querySelectorAll(".reply-message").forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function () {
|
||||
var replyMessage = subitem.closest(".ctext-wrap").children[0].children[0].innerText;
|
||||
var replyuser = document.querySelector(".user-chat-topbar .text-truncate .username").innerHTML;
|
||||
document.querySelector(".replyCard .replymessage-block .flex-grow-1 .mb-0").innerText = replyMessage;
|
||||
var msgOwnerName = (subitem.closest(".chat-list")) ? subitem.closest(".chat-list").classList.contains("left") ? replyuser : 'You' : replyuser;
|
||||
document.querySelector(".replyCard .replymessage-block .flex-grow-1 .conversation-name").innerText = msgOwnerName;
|
||||
});
|
||||
});
|
||||
|
||||
//Copy Message
|
||||
newChatList.querySelectorAll(".copy-message").forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function () {
|
||||
newChatList.childNodes[1].children[1].firstElementChild.firstElementChild.getAttribute("id");
|
||||
isText = newChatList.childNodes[1].children[1].firstElementChild.firstElementChild.innerText;
|
||||
navigator.clipboard.writeText(isText);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
var emojiPicker = new FgEmojiPicker({
|
||||
trigger: [".emoji-btn"],
|
||||
removeOnSelection: false,
|
||||
closeButton: true,
|
||||
position: ["top", "right"],
|
||||
preFetch: true,
|
||||
dir: "assets/js/pages/plugins/json",
|
||||
insertInto: document.querySelector(".chat-input"),
|
||||
});
|
||||
|
||||
// emojiPicker position
|
||||
var emojiBtn = document.getElementById("emoji-btn");
|
||||
emojiBtn.addEventListener("click", function () {
|
||||
setTimeout(function () {
|
||||
var fgEmojiPicker = document.getElementsByClassName("fg-emoji-picker")[0];
|
||||
if (fgEmojiPicker) {
|
||||
var leftEmoji = window.getComputedStyle(fgEmojiPicker) ? window.getComputedStyle(fgEmojiPicker).getPropertyValue("left") : "";
|
||||
if (leftEmoji) {
|
||||
leftEmoji = leftEmoji.replace("px", "");
|
||||
leftEmoji = leftEmoji - 40 + "px";
|
||||
fgEmojiPicker.style.left = leftEmoji;
|
||||
}
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
|
||||
})();
|
||||
//Search Message
|
||||
function searchMessages() {
|
||||
var searchInput, searchFilter, searchUL, searchLI, a, i, txtValue;
|
||||
searchInput = document.getElementById("searchMessage");
|
||||
searchFilter = searchInput.value.toUpperCase();
|
||||
searchUL = document.getElementById("users-conversation");
|
||||
searchLI = searchUL.getElementsByTagName("li");
|
||||
searchLI.forEach(function (search) {
|
||||
a = search.getElementsByTagName("p")[0] ? search.getElementsByTagName("p")[0] : '';
|
||||
txtValue = a.textContent || a.innerText ? a.textContent || a.innerText : '';
|
||||
if (txtValue.toUpperCase().indexOf(searchFilter) > -1) {
|
||||
search.style.display = "";
|
||||
} else {
|
||||
search.style.display = "none";
|
||||
}
|
||||
});
|
||||
};
|
||||
54
resources/js/pages/coming-soon.init.js
vendored
Executable file
54
resources/js/pages/coming-soon.init.js
vendored
Executable file
@@ -0,0 +1,54 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.comom
|
||||
File: Coming soon Init Js File
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// Set the date we're counting down to
|
||||
var countDownDate = new Date("Jan 30, 2023").getTime();
|
||||
|
||||
// Update the count down every 1 second
|
||||
var countDown = setInterval(function () {
|
||||
|
||||
// Get today's date and time
|
||||
var currentTime = new Date().getTime();
|
||||
|
||||
// Find the distance between currentTime and the count down date
|
||||
var distance = countDownDate - currentTime;
|
||||
|
||||
// Time calculations for days, hours, minutes and seconds
|
||||
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
var countDownBlock = '<div class="countdownlist-item">'+
|
||||
'<div class="count-title">Days</div>'+'<div class="count-num">'+ days +'</div>'+
|
||||
'</div>'+
|
||||
'<div class="countdownlist-item">'+
|
||||
'<div class="count-title">Hours</div>'+'<div class="count-num">'+ hours +'</div>'+
|
||||
'</div>'+
|
||||
'<div class="countdownlist-item">'+
|
||||
'<div class="count-title">Minutes</div>'+'<div class="count-num">'+ minutes +'</div>'+
|
||||
'</div>'+
|
||||
'<div class="countdownlist-item">'+
|
||||
'<div class="count-title">Seconds</div>'+'<div class="count-num">'+ seconds +'</div>'+
|
||||
'</div>';
|
||||
|
||||
// Output the result in an element with id="countDownBlock"
|
||||
if(document.getElementById("countdown")){
|
||||
document.getElementById("countdown").innerHTML = countDownBlock;
|
||||
}
|
||||
// If the count down is over, write some text
|
||||
if (distance < 0) {
|
||||
clearInterval(countDown);
|
||||
document.getElementById("countdown").innerHTML = '<div class="countdown-endtxt">The countdown has ended!</div>';
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
|
||||
486
resources/js/pages/crm-companies.init.js
vendored
Executable file
486
resources/js/pages/crm-companies.init.js
vendored
Executable file
@@ -0,0 +1,486 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: CRM-companies Js File
|
||||
*/
|
||||
|
||||
|
||||
// list js
|
||||
var checkAll = document.getElementById("checkAll");
|
||||
if (checkAll) {
|
||||
checkAll.onclick = function () {
|
||||
var checkboxes = document.querySelectorAll('.form-check-all input[type="checkbox"]');
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
checkboxes[i].checked = this.checked;
|
||||
if (checkboxes[i].checked) {
|
||||
checkboxes[i].closest("tr").classList.add("table-active");
|
||||
} else {
|
||||
checkboxes[i].closest("tr").classList.remove("table-active");
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var perPage = 8;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"id",
|
||||
"name",
|
||||
"owner",
|
||||
"industry_type",
|
||||
"star_value",
|
||||
"location",
|
||||
"employee",
|
||||
"website",
|
||||
"contact_email",
|
||||
"since",
|
||||
{ attr: "src", name: "image_src" }
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2
|
||||
})
|
||||
]
|
||||
};
|
||||
// Init list
|
||||
var companyList = new List("companyList", options).on("updated", function (list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
(document.querySelector(".pagination-prev.disabled")) ? document.querySelector(".pagination-prev.disabled").classList.remove("disabled"): '';
|
||||
(document.querySelector(".pagination-next.disabled")) ? document.querySelector(".pagination-next.disabled").classList.remove("disabled"): '';
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
const xhttp = new XMLHttpRequest();
|
||||
xhttp.onload = function () {
|
||||
var json_records = JSON.parse(this.responseText);
|
||||
Array.from(json_records).forEach(function (raw){
|
||||
companyList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ' + raw.id + "</a>",
|
||||
name: raw.name,
|
||||
owner: raw.owner,
|
||||
industry_type: raw.industry_type,
|
||||
star_value: raw.star_value,
|
||||
location: raw.location,
|
||||
employee: raw.employee,
|
||||
website: raw.website,
|
||||
contact_email: raw.contact_email,
|
||||
since: raw.since,
|
||||
image_src: raw.image_src
|
||||
});
|
||||
companyList.sort('id', { order: "desc" });
|
||||
refreshCallbacks();
|
||||
});
|
||||
companyList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a>`);
|
||||
}
|
||||
xhttp.open("GET", "assets/json/company-list.json");
|
||||
xhttp.send();
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
companyList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
|
||||
// customer image
|
||||
document.querySelector("#company-logo-input").addEventListener("change", function () {
|
||||
var preview = document.querySelector("#companylogo-img");
|
||||
var file = document.querySelector("#company-logo-input").files[0];
|
||||
var reader = new FileReader();
|
||||
reader.addEventListener("load",function () {
|
||||
preview.src = reader.result;
|
||||
},false);
|
||||
if (file) {
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
var isValue = isCount.body.firstElementChild.innerHTML;
|
||||
|
||||
var idField = document.getElementById("id-field"),
|
||||
companyNameField = document.getElementById("companyname-field"),
|
||||
companyLogoImg = document.getElementById("companylogo-img"),
|
||||
ownerField = document.getElementById("owner-field"),
|
||||
industry_typeField = document.getElementById("industry_type-field"),
|
||||
star_valueField = document.getElementById("star_value-field"),
|
||||
locationField = document.getElementById("location-field"),
|
||||
employeeField = document.getElementById("employee-field"),
|
||||
websiteField = document.getElementById("website-field"),
|
||||
contact_emailField = document.getElementById("contact_email-field"),
|
||||
sinceField = document.getElementById("since-field"),
|
||||
|
||||
addBtn = document.getElementById("add-btn"),
|
||||
editBtn = document.getElementById("edit-btn"),
|
||||
removeBtns = document.getElementsByClassName("remove-item-btn"),
|
||||
editBtns = document.getElementsByClassName("edit-item-btn");
|
||||
viewBtns = document.getElementsByClassName("view-item-btn");
|
||||
refreshCallbacks();
|
||||
|
||||
document.getElementById("showModal").addEventListener("show.bs.modal", function (e) {
|
||||
if (e.relatedTarget.classList.contains("edit-item-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Company";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("add-btn").style.display = "none";
|
||||
document.getElementById("edit-btn").style.display = "block";
|
||||
} else if (e.relatedTarget.classList.contains("add-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Add Company";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("edit-btn").style.display = "none";
|
||||
document.getElementById("add-btn").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "List Company";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "none";
|
||||
}
|
||||
});
|
||||
ischeckboxcheck();
|
||||
|
||||
document.getElementById("showModal").addEventListener("hidden.bs.modal", function () {
|
||||
clearFields();
|
||||
});
|
||||
|
||||
document.querySelector("#companyList").addEventListener("click", function () {
|
||||
refreshCallbacks();
|
||||
ischeckboxcheck();
|
||||
});
|
||||
|
||||
var table = document.getElementById("customerTable");
|
||||
// save all tr
|
||||
var tr = table.getElementsByTagName("tr");
|
||||
var trlist = table.querySelectorAll(".list tr");
|
||||
|
||||
var count = 11;
|
||||
addBtn.addEventListener("click", function (e) {
|
||||
if (
|
||||
companyNameField.value !== "" &&
|
||||
ownerField.value !== "" &&
|
||||
industry_typeField.value !== "" &&
|
||||
star_valueField.value !== "" &&
|
||||
locationField.value !== "" &&
|
||||
employeeField.value !== "" &&
|
||||
websiteField.value !== "" &&
|
||||
contact_emailField.value !== "" &&
|
||||
sinceField.value !== ""
|
||||
) {
|
||||
companyList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ' + count + "</a>",
|
||||
image_src: companyLogoImg.src,
|
||||
name: companyNameField.value,
|
||||
owner: ownerField.value,
|
||||
industry_type: industry_typeField.value,
|
||||
star_value: star_valueField.value,
|
||||
location: locationField.value,
|
||||
employee: employeeField.value,
|
||||
website: websiteField.value,
|
||||
contact_email: contact_emailField.value,
|
||||
since: sinceField.value
|
||||
|
||||
});
|
||||
companyList.sort('id', { order: "desc" });
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
refreshCallbacks();
|
||||
count++;
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Company inserted successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
editBtn.addEventListener("click", function (e) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Company";
|
||||
var editValues = companyList.get({
|
||||
id: idField.value,
|
||||
});
|
||||
Array.from(editValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
x.values({
|
||||
id: `<a href="javascript:void(0);" class="fw-medium link-primary">${idField.value}</a>`,
|
||||
image_src: companyLogoImg.src,
|
||||
name: companyNameField.value,
|
||||
owner: ownerField.value,
|
||||
industry_type: industry_typeField.value,
|
||||
star_value: star_valueField.value,
|
||||
location: locationField.value,
|
||||
employee: employeeField.value,
|
||||
website: websiteField.value,
|
||||
contact_email: contact_emailField.value,
|
||||
since: sinceField.value
|
||||
});
|
||||
}
|
||||
});
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Company updated Successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
});
|
||||
|
||||
function ischeckboxcheck() {
|
||||
Array.from(document.getElementsByName("checkAll")).forEach(function (x) {
|
||||
x.addEventListener("click", function (e) {
|
||||
if (e.target.checked) {
|
||||
e.target.closest("tr").classList.add("table-active");
|
||||
} else {
|
||||
e.target.closest("tr").classList.remove("table-active");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function refreshCallbacks() {
|
||||
Array.from(removeBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = companyList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
deleteid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
|
||||
var isElem = deleteid.body.firstElementChild;
|
||||
var isdeleteid = deleteid.body.firstElementChild.innerHTML;
|
||||
|
||||
if (isdeleteid == itemId) {
|
||||
document.getElementById("delete-record").addEventListener("click", function () {
|
||||
companyList.remove("id", isElem.outerHTML);
|
||||
document.getElementById("deleteRecord-close").click();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(editBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = companyList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
idField.value = selectedid;
|
||||
companyLogoImg.src = x._values.image_src;
|
||||
companyNameField.value = x._values.name;
|
||||
ownerField.value = x._values.owner;
|
||||
industry_typeField.value = x._values.industry_type;
|
||||
star_valueField.value = x._values.star_value;
|
||||
locationField.value = x._values.location;
|
||||
employeeField.value = x._values.employee;
|
||||
websiteField.value = x._values.website;
|
||||
contact_emailField.value = x._values.contact_email;
|
||||
sinceField.value = x._values.since;
|
||||
}
|
||||
console.log("x", x)
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(viewBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = companyList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
var codeBlock = `
|
||||
<div class="card-body text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<div class="avatar-md">
|
||||
<div class="avatar-title bg-light rounded-circle">
|
||||
<img src="${x._values.image_src}" alt="" class="avatar-sm rounded-circle object-cover">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="mt-3 mb-1">${x._values.name}</h5>
|
||||
<p class="text-muted">${x._values.owner}</p>
|
||||
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);"
|
||||
class="avatar-title bg-soft-success text-success fs-15 rounded">
|
||||
<i class="ri-global-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);"
|
||||
class="avatar-title bg-soft-danger text-danger fs-15 rounded">
|
||||
<i class="ri-mail-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);"
|
||||
class="avatar-title bg-soft-warning text-warning fs-15 rounded">
|
||||
<i class="ri-question-answer-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="text-muted text-uppercase fw-semibold mb-3">Information</h6>
|
||||
<p class="text-muted mb-4">A company incurs fixed and variable costs such as the
|
||||
purchase of raw materials, salaries and overhead, as explained by
|
||||
AccountingTools, Inc. Business owners have the discretion to determine the
|
||||
actions.</p>
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Industry Type</td>
|
||||
<td>${x._values.industry_type}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Location</td>
|
||||
<td>${x._values.location}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Employee</td>
|
||||
<td>${x._values.employee}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Rating</td>
|
||||
<td>${x._values.star_value} <i class="ri-star-fill text-warning align-bottom"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Website</td>
|
||||
<td>
|
||||
<a href="javascript:void(0);"
|
||||
class="link-primary text-decoration-underline">${x._values.website}</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Contact Email</td>
|
||||
<td>${x._values.contact_email}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Since</td>
|
||||
<td>${x._values.since}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('company-view-detail').innerHTML = codeBlock;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function clearFields() {
|
||||
companyLogoImg.src = "assets/images/users/multi-user.jpg";
|
||||
companyNameField.value = "";
|
||||
ownerField.value = "";
|
||||
industry_typeField.value = "";
|
||||
star_valueField.value = "";
|
||||
locationField.value = "";
|
||||
employeeField.value = "";
|
||||
websiteField.value = "";
|
||||
contact_emailField.value = "";
|
||||
sinceField.value = "";
|
||||
}
|
||||
|
||||
// Delete Multiple Records
|
||||
function deleteMultiple(){
|
||||
ids_array = [];
|
||||
var items = document.getElementsByName('chk_child');
|
||||
for (i = 0; i < items.length; i++) {
|
||||
if (items[i].checked == true) {
|
||||
var trNode = items[i].parentNode.parentNode.parentNode;
|
||||
var id = trNode.querySelector("td a").innerHTML;
|
||||
ids_array.push(id);
|
||||
}
|
||||
}
|
||||
if (typeof ids_array !== 'undefined' && ids_array.length > 0) {
|
||||
Swal.fire({
|
||||
title: "Are you sure?",
|
||||
text: "You won't be able to revert this!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
|
||||
cancelButtonClass: 'btn btn-danger w-xs mt-2',
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
for (i = 0; i < ids_array.length; i++) {
|
||||
companyList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">${ids_array[i]}</a>`);
|
||||
}
|
||||
document.getElementById("checkAll").checked = false;
|
||||
Swal.fire({
|
||||
title: 'Deleted!',
|
||||
text: 'Your data has been deleted.',
|
||||
icon: 'success',
|
||||
confirmButtonClass: 'btn btn-info w-xs mt-2',
|
||||
buttonsStyling: false
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Please select at least one checkbox',
|
||||
confirmButtonClass: 'btn btn-info',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector(".pagination-next").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click(): '': '';
|
||||
});
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click(): '': '';
|
||||
});
|
||||
546
resources/js/pages/crm-contact.init.js
vendored
Executable file
546
resources/js/pages/crm-contact.init.js
vendored
Executable file
@@ -0,0 +1,546 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: CRM-contact Js File
|
||||
*/
|
||||
|
||||
|
||||
// list js
|
||||
function timeConvert(time) {
|
||||
var d = new Date(time);
|
||||
time_s = (d.getHours() + ':' + d.getMinutes());
|
||||
var t = time_s.split(":");
|
||||
var hours = t[0];
|
||||
var minutes = t[1];
|
||||
var newformat = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12;
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
return (hours + ':' + minutes + '' + newformat);
|
||||
}
|
||||
|
||||
function formatDate(date) {
|
||||
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
var d = new Date(date),
|
||||
month = '' + monthNames[(d.getMonth())],
|
||||
day = '' + d.getDate(),
|
||||
year = d.getFullYear();
|
||||
if (month.length < 2)
|
||||
month = '0' + month;
|
||||
if (day.length < 2)
|
||||
day = '0' + day;
|
||||
return [day + " " + month, year].join(', ');
|
||||
};
|
||||
|
||||
var checkAll = document.getElementById("checkAll");
|
||||
if (checkAll) {
|
||||
checkAll.onclick = function () {
|
||||
var checkboxes = document.querySelectorAll('.form-check-all input[type="checkbox"]');
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
checkboxes[i].checked = this.checked;
|
||||
if (checkboxes[i].checked) {
|
||||
checkboxes[i].closest("tr").classList.add("table-active");
|
||||
} else {
|
||||
checkboxes[i].closest("tr").classList.remove("table-active");
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var perPage = 8;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"id",
|
||||
"name",
|
||||
"company_name",
|
||||
"designation",
|
||||
"date",
|
||||
"email_id",
|
||||
"phone",
|
||||
"lead_score",
|
||||
"tags",
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2
|
||||
})
|
||||
]
|
||||
};
|
||||
// Init list
|
||||
var contactList = new List("contactList", options).on("updated", function (list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
(document.querySelector(".pagination-prev.disabled")) ? document.querySelector(".pagination-prev.disabled").classList.remove("disabled"): '';
|
||||
(document.querySelector(".pagination-next.disabled")) ? document.querySelector(".pagination-next.disabled").classList.remove("disabled"): '';
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
const xhttp = new XMLHttpRequest();
|
||||
xhttp.onload = function () {
|
||||
var json_records = JSON.parse(this.responseText);
|
||||
Array.from(json_records).forEach(function (raw){
|
||||
var tags = raw.tags;
|
||||
var tagHtml = '';
|
||||
Array.from(tags).forEach((tag, index) => {
|
||||
tagHtml += '<span class="badge badge-soft-primary me-1">'+tag+'</span>'
|
||||
})
|
||||
|
||||
contactList.add({
|
||||
id: `<a href="javascript:void(0);" class="fw-medium link-primary">#VZ${raw.id}</a>`,
|
||||
name: '<div class="d-flex align-items-center">\
|
||||
<div class="flex-shrink-0"><img src="'+raw.name[0]+'" alt="" class="avatar-xs rounded-circle"></div>\
|
||||
<div class="flex-grow-1 ms-2 name">'+raw.name[1]+'</div>\
|
||||
</div>',
|
||||
company_name: raw.company_name,
|
||||
designation: raw.designation,
|
||||
date: formatDate(raw.date)+' <small class="text-muted">'+timeConvert(raw.date)+'</small>',
|
||||
email_id: raw.email_id,
|
||||
phone: raw.phone,
|
||||
lead_score: raw.lead_score,
|
||||
tags: tagHtml,
|
||||
});
|
||||
contactList.sort('id', { order: "desc" });
|
||||
refreshCallbacks();
|
||||
});
|
||||
contactList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a>`);
|
||||
}
|
||||
xhttp.open("GET", "assets/json/contact-list.json");
|
||||
xhttp.send();
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
contactList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
|
||||
// customer image
|
||||
document.querySelector("#customer-image-input").addEventListener("change", function () {
|
||||
var preview = document.querySelector("#customer-img");
|
||||
var file = document.querySelector("#customer-image-input").files[0];
|
||||
var reader = new FileReader();
|
||||
reader.addEventListener("load",function () {
|
||||
preview.src = reader.result;
|
||||
},false);
|
||||
if (file) {
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
var idField = document.getElementById("id-field"),
|
||||
customerImg = document.getElementById("customer-img"),
|
||||
customerNameField = document.getElementById("customername-field"),
|
||||
company_nameField = document.getElementById("company_name-field"),
|
||||
designationField = document.getElementById("designation-field"),
|
||||
email_idField = document.getElementById("email_id-field"),
|
||||
phoneField = document.getElementById("phone-field"),
|
||||
lead_scoreField = document.getElementById("lead_score-field"),
|
||||
addBtn = document.getElementById("add-btn"),
|
||||
editBtn = document.getElementById("edit-btn"),
|
||||
removeBtns = document.getElementsByClassName("remove-item-btn"),
|
||||
editBtns = document.getElementsByClassName("edit-item-btn");
|
||||
viewBtns = document.getElementsByClassName("view-item-btn");
|
||||
refreshCallbacks();
|
||||
|
||||
document.getElementById("showModal").addEventListener("show.bs.modal", function (e) {
|
||||
if (e.relatedTarget.classList.contains("edit-item-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Contact";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("add-btn").style.display = "none";
|
||||
document.getElementById("edit-btn").style.display = "block";
|
||||
} else if (e.relatedTarget.classList.contains("add-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Add Contact";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("edit-btn").style.display = "none";
|
||||
document.getElementById("add-btn").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "List Contact";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "none";
|
||||
}
|
||||
});
|
||||
ischeckboxcheck();
|
||||
|
||||
document.getElementById("showModal").addEventListener("hidden.bs.modal", function (e) {
|
||||
clearFields();
|
||||
});
|
||||
|
||||
document.querySelector("#contactList").addEventListener("click", function () {
|
||||
refreshCallbacks();
|
||||
ischeckboxcheck();
|
||||
});
|
||||
|
||||
var table = document.getElementById("customerTable");
|
||||
// save all tr
|
||||
var tr = table.getElementsByTagName("tr");
|
||||
var trlist = table.querySelectorAll(".list tr");
|
||||
|
||||
// date & time
|
||||
var dateValue = new Date().toUTCString().slice(5, 16);
|
||||
function currentTime() {
|
||||
var ampm = new Date().getHours() >= 12 ? "PM" : "AM";
|
||||
var hour =
|
||||
new Date().getHours() > 12
|
||||
? new Date().getHours() % 12
|
||||
: new Date().getHours();
|
||||
var minute =
|
||||
new Date().getMinutes() < 10
|
||||
? "0" + new Date().getMinutes()
|
||||
: new Date().getMinutes();
|
||||
if (hour < 10) {
|
||||
return "0" + hour + ":" + minute + " " + ampm;
|
||||
} else {
|
||||
return hour + ":" + minute + " " + ampm;
|
||||
}
|
||||
}
|
||||
setInterval(currentTime, 1000);
|
||||
|
||||
|
||||
var count = 11;
|
||||
// multiple Remove CancelButton
|
||||
var tagInputField = new Choices('#taginput-choices', {
|
||||
removeItemButton: true,
|
||||
}
|
||||
);
|
||||
|
||||
var tagInputFieldValue = tagInputField.getValue(true);
|
||||
var tagHtmlValue = '';
|
||||
Array.from(tagInputFieldValue).forEach((tag, index) => {
|
||||
tagHtmlValue += '<span class="badge badge-soft-primary me-1">'+tag+'</span>'
|
||||
})
|
||||
|
||||
addBtn.addEventListener("click", function (e) {
|
||||
if (
|
||||
customerNameField.value !== "" &&
|
||||
company_nameField.value !== "" &&
|
||||
email_idField.value !== "" &&
|
||||
phoneField.value !== "" &&
|
||||
lead_scoreField.value !== "" &&
|
||||
designationField.value !== ""
|
||||
) {
|
||||
var tagInputFieldValue = tagInputField.getValue(true);
|
||||
var tagHtmlValue = '';
|
||||
Array.from(tagInputFieldValue).forEach((tag, index) => {
|
||||
tagHtmlValue += '<span class="badge badge-soft-primary me-1">' + tag + '</span>'
|
||||
})
|
||||
contactList.add({
|
||||
id: `<a href="javascript:void(0);" class="fw-medium link-primary">#VZ${count}</a>`,
|
||||
// name: customerNameField.value,
|
||||
name: '<div class="d-flex align-items-center">\
|
||||
<div class="flex-shrink-0"><img src="'+ customerImg.src + '" alt="" class="avatar-xs rounded-circle object-cover"></div>\
|
||||
<div class="flex-grow-1 ms-2 name">'+ customerNameField.value + '</div>\
|
||||
</div>',
|
||||
company_name: company_nameField.value,
|
||||
designation: designationField.value,
|
||||
email_id: email_idField.value,
|
||||
phone: phoneField.value,
|
||||
lead_score: lead_scoreField.value,
|
||||
tags: tagHtmlValue,
|
||||
date: dateValue + ' <small class="text-muted">' + currentTime() + '</small>'
|
||||
});
|
||||
contactList.sort('id', { order: "desc" });
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
refreshCallbacks();
|
||||
count++;
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Contact inserted successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
editBtn.addEventListener("click", function (e) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Contact";
|
||||
var editValues = contactList.get({
|
||||
id: idField.value,
|
||||
});
|
||||
Array.from(editValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
var tagInputFieldValue = tagInputField.getValue(true);
|
||||
var tagHtmlValue = '';
|
||||
Array.from(tagInputFieldValue).forEach((tag, index) => {
|
||||
tagHtmlValue += '<span class="badge badge-soft-primary me-1">' + tag + '</span>'
|
||||
})
|
||||
if (selectedid == itemId) {
|
||||
x.values({
|
||||
id: `<a href="javascript:void(0);" class="fw-medium link-primary">#VZ${idField.value}</a>`,
|
||||
name: '<div class="d-flex align-items-center">\
|
||||
<div class="flex-shrink-0"><img src="'+customerImg.src+'" alt="" class="avatar-xs rounded-circle object-cover"></div>\
|
||||
<div class="flex-grow-1 ms-2 name">'+customerNameField.value+'</div>\
|
||||
</div>',
|
||||
company_name: company_nameField.value,
|
||||
designation: designationField.value,
|
||||
email_id: email_idField.value,
|
||||
phone: phoneField.value,
|
||||
lead_score: lead_scoreField.value,
|
||||
tags: tagHtmlValue,
|
||||
date: dateValue + ' <small class="text-muted">'+currentTime()+'</small>'
|
||||
});
|
||||
}
|
||||
});
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Contact updated Successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
});
|
||||
|
||||
function ischeckboxcheck() {
|
||||
Array.from(document.getElementsByName("checkAll")).forEach(function (x) {
|
||||
x.addEventListener("click", function (e) {
|
||||
if (e.target.checked) {
|
||||
e.target.closest("tr").classList.add("table-active");
|
||||
} else {
|
||||
e.target.closest("tr").classList.remove("table-active");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function refreshCallbacks() {
|
||||
Array.from(removeBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = contactList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
deleteid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
|
||||
var isElem = deleteid.body.firstElementChild;
|
||||
var isdeleteid = deleteid.body.firstElementChild.innerHTML;
|
||||
|
||||
if (isdeleteid == itemId) {
|
||||
document.getElementById("delete-record").addEventListener("click", function () {
|
||||
contactList.remove("id", isElem.outerHTML);
|
||||
document.getElementById("deleteRecord-close").click();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(editBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = contactList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
var tagBadge = new DOMParser().parseFromString(x._values.tags, "text/html").body.querySelectorAll("span.badge");
|
||||
if (selectedid == itemId) {
|
||||
idField.value = selectedid;
|
||||
customerImg.src = new DOMParser().parseFromString(x._values.name, "text/html").body.querySelector("img").src
|
||||
customerNameField.value = new DOMParser().parseFromString(x._values.name, "text/html").body.querySelector(".name").innerHTML;
|
||||
company_nameField.value = x._values.company_name;
|
||||
designationField.value = x._values.designation;
|
||||
email_idField.value = x._values.email_id;
|
||||
phoneField.value = x._values.phone;
|
||||
lead_scoreField.value = x._values.lead_score;
|
||||
if(tagBadge){
|
||||
Array.from(tagBadge).forEach((item) => {
|
||||
tagInputField.setChoiceByValue(item.innerHTML);
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(viewBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = contactList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
var codeBlock = `
|
||||
<div class="card-body text-center">
|
||||
<div class="position-relative d-inline-block">
|
||||
<img src="${new DOMParser().parseFromString(x._values.name, "text/html").body.querySelector("img").src}" alt=""
|
||||
class="avatar-lg rounded-circle img-thumbnail object-cover">
|
||||
<span class="contact-active position-absolute rounded-circle bg-success"><span
|
||||
class="visually-hidden"></span>
|
||||
</div>
|
||||
<h5 class="mt-4 mb-1">${new DOMParser().parseFromString(x._values.name, "text/html").body.querySelector(".name").innerHTML}</h5>
|
||||
<p class="text-muted">${x._values.company_name}</p>
|
||||
|
||||
<ul class="list-inline mb-0">
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);"
|
||||
class="avatar-title bg-soft-success text-success fs-15 rounded">
|
||||
<i class="ri-phone-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);"
|
||||
class="avatar-title bg-soft-danger text-danger fs-15 rounded">
|
||||
<i class="ri-mail-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="list-inline-item avatar-xs">
|
||||
<a href="javascript:void(0);"
|
||||
class="avatar-title bg-soft-warning text-warning fs-15 rounded">
|
||||
<i class="ri-question-answer-line"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6 class="text-muted text-uppercase fw-semibold mb-3">Personal Information</h6>
|
||||
<p class="text-muted mb-4">Hello, I'm Tonya Noble, The most effective objective is
|
||||
one that is tailored to the job you are applying for. It states what kind of
|
||||
career you are seeking, and what skills and experiences.</p>
|
||||
<div class="table-responsive table-card">
|
||||
<table class="table table-borderless mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Designation</td>
|
||||
<td>${x._values.designation}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Email ID</td>
|
||||
<td>${x._values.email_id}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Phone No</td>
|
||||
<td>${x._values.phone}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Lead Score</td>
|
||||
<td>${x._values.lead_score}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Tags</td>
|
||||
<td>${x._values.tags}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="fw-medium" scope="row">Last Contacted</td>
|
||||
<td>${x._values.date} <small class="text-muted"></small></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>`;
|
||||
document.getElementById('contact-view-detail').innerHTML = codeBlock;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function clearFields() {
|
||||
customerImg.src = "assets/images/users/user-dummy-img.jpg";
|
||||
customerNameField.value = "";
|
||||
company_nameField.value = "";
|
||||
designationField.value = "";
|
||||
email_idField.value = "";
|
||||
phoneField.value = "";
|
||||
lead_scoreField.value = "";
|
||||
tagInputField.removeActiveItems();
|
||||
tagInputField.setChoiceByValue("0");
|
||||
}
|
||||
|
||||
// Delete All Records
|
||||
function deleteMultiple(){
|
||||
ids_array = [];
|
||||
var items = document.getElementsByName('chk_child');
|
||||
for (i = 0; i < items.length; i++) {
|
||||
if (items[i].checked == true) {
|
||||
var trNode = items[i].parentNode.parentNode.parentNode;
|
||||
var id = trNode.querySelector("td a").innerHTML;
|
||||
ids_array.push(id);
|
||||
}
|
||||
}
|
||||
|
||||
if(typeof ids_array !== 'undefined' && ids_array.length > 0){
|
||||
Swal.fire({
|
||||
title: "Are you sure?",
|
||||
text: "You won't be able to revert this!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
|
||||
cancelButtonClass: 'btn btn-danger w-xs mt-2',
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
for (i = 0; i < ids_array.length; i++) {
|
||||
contactList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">${ids_array[i]}</a>`);
|
||||
}
|
||||
document.getElementById("checkAll").checked = false;
|
||||
Swal.fire({
|
||||
title: 'Deleted!',
|
||||
text: 'Your data has been deleted.',
|
||||
icon: 'success',
|
||||
confirmButtonClass: 'btn btn-info w-xs mt-2',
|
||||
buttonsStyling: false
|
||||
});
|
||||
}
|
||||
});
|
||||
}else{
|
||||
Swal.fire({
|
||||
title: 'Please select at least one checkbox',
|
||||
confirmButtonClass: 'btn btn-info',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector(".pagination-next").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click(): '': '';
|
||||
});
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click(): '': '';
|
||||
});
|
||||
141
resources/js/pages/crm-deals.init.js
vendored
Executable file
141
resources/js/pages/crm-deals.init.js
vendored
Executable file
@@ -0,0 +1,141 @@
|
||||
var contactNo = new Cleave("#contactNumber", {
|
||||
delimiters: ['(', ')', '-'],
|
||||
blocks: [0, 3, 3, 4]
|
||||
});
|
||||
|
||||
var str_dt = function formatDate(date) {
|
||||
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
var d = new Date(date),
|
||||
month = '' + monthNames[(d.getMonth())],
|
||||
day = '' + d.getDate(),
|
||||
year = d.getFullYear();
|
||||
if (month.length < 2)
|
||||
month = '0' + month;
|
||||
if (day.length < 2)
|
||||
day = '0' + day;
|
||||
return [day + " " + month, year].join(', ');
|
||||
};
|
||||
|
||||
form = document.getElementById("deals-form");
|
||||
|
||||
form.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault()
|
||||
form.classList.add('was-validated')
|
||||
} else {
|
||||
var dealTitle = document.getElementById("dealTitle").value;
|
||||
var dealValue = document.getElementById("dealValue").value;
|
||||
var deatType = document.getElementById("deatType").value;
|
||||
var dealOwner = document.getElementById("dealOwner").value;
|
||||
var dueDate = document.getElementById("dueDate").value;
|
||||
var contactNumber = document.getElementById("contactNumber").value;
|
||||
var contactEmail = document.getElementById("dealEmail").value;
|
||||
var contactDescription = document.getElementById("contactDescription").value;
|
||||
var avtar_title = dealOwner.split(" ");
|
||||
var letters = null;
|
||||
|
||||
if (avtar_title.length >= 2) {
|
||||
var first_letter = avtar_title[0].slice(0, 1);
|
||||
var secont_letter = avtar_title[1].slice(0, 1);
|
||||
letters = first_letter + secont_letter
|
||||
} else {
|
||||
var first_letter = avtar_title[0].slice(0, 1);
|
||||
letters = first_letter
|
||||
}
|
||||
|
||||
var avatar_ = `<div class="flex-shrink-0 avatar-xs me-2"><div class="avatar-title bg-soft-success text-success rounded-circle fs-13">` + letters + `</div></div>`;
|
||||
var newDeals = `<div class="card">
|
||||
<div class="card-body">
|
||||
<a class="d-flex align-items-center" data-bs-toggle="collapse" href="#` + dealTitle + `" role="button" aria-expanded="false" aria-controls="leadDiscovered1">
|
||||
<div class="flex-shrink-0">
|
||||
` + avatar_ + `
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<h6 class="fs-14 mb-1">` + dealTitle + `</h6>
|
||||
<p class="text-muted mb-0">$` + dealValue + ` - ` + str_dt(dueDate) + `</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="collapse border-top border-top-dashed" id="` + dealTitle + `">
|
||||
<div class="card-body">
|
||||
<h6 class="fs-14 mb-1">` + dealOwner + ` <small class="badge badge-soft-danger">4 Days</small></h6>
|
||||
<p class="text-muted">` + contactDescription + `</p>
|
||||
<ul class="list-unstyled vstack gap-2 mb-0">
|
||||
<li>
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-xxs text-muted">
|
||||
<i class="ri-question-answer-line"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">Meeting with Thomas</h6>
|
||||
<small class="text-muted">Yesterday at 9:12AM</small>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-xxs text-muted">
|
||||
<i class="ri-mac-line"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">Product Demo</h6>
|
||||
<small class="text-muted">Monday at 04:41PM</small>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="d-flex">
|
||||
<div class="flex-shrink-0 avatar-xxs text-muted">
|
||||
<i class="ri-earth-line"></i>
|
||||
</div>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-0">Marketing Team Meeting</h6>
|
||||
<small class="text-muted">Monday at 04:41PM</small>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer hstack gap-2">
|
||||
<button class="btn btn-warning btn-sm w-100" data-bs-toggle="tooltip" data-bs-placement="top" title="` + contactNumber + `"><i class="ri-phone-line align-bottom me-1"></i> Call</button>
|
||||
<button class="btn btn-info btn-sm w-100" data-bs-toggle="tooltip" data-bs-placement="top" title="` + contactEmail + `"><i class="ri-question-answer-line align-bottom me-1"></i>
|
||||
Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
|
||||
let collapseShow;
|
||||
switch (deatType) {
|
||||
case 'Lead Disovered':
|
||||
collapseShow = "leadDiscovered";
|
||||
break;
|
||||
case 'Contact Initiated':
|
||||
collapseShow = "contactInitiated";
|
||||
break;
|
||||
case 'Need Identified':
|
||||
collapseShow = "needsIdentified";
|
||||
break;
|
||||
case 'Meeting Arranged':
|
||||
collapseShow = "meetingArranged";
|
||||
break;
|
||||
case 'Offer Accepted':
|
||||
collapseShow = "offerAccepted";
|
||||
break;
|
||||
}
|
||||
|
||||
document.getElementById("close-modal").click();
|
||||
document.getElementById(collapseShow).innerHTML += newDeals;
|
||||
form.reset();
|
||||
Swal.fire({
|
||||
title: 'Success!',
|
||||
text: 'Deal Inserted successfully in '+deatType+' Tab.',
|
||||
icon: 'success',
|
||||
showCancelButton: true,
|
||||
confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
|
||||
cancelButtonClass: 'btn btn-danger w-xs mt-2',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
});
|
||||
423
resources/js/pages/crm-leads.init.js
vendored
Executable file
423
resources/js/pages/crm-leads.init.js
vendored
Executable file
@@ -0,0 +1,423 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: CRM-leads Js File
|
||||
*/
|
||||
|
||||
|
||||
// list js
|
||||
function formatDate(date) {
|
||||
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
|
||||
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
|
||||
];
|
||||
var d = new Date(date),
|
||||
month = '' + monthNames[(d.getMonth())],
|
||||
day = '' + d.getDate(),
|
||||
year = d.getFullYear();
|
||||
if (month.length < 2)
|
||||
month = '0' + month;
|
||||
if (day.length < 2)
|
||||
day = '0' + day;
|
||||
return [day + " " + month, year].join(', ');
|
||||
};
|
||||
|
||||
var checkAll = document.getElementById("checkAll");
|
||||
if (checkAll) {
|
||||
checkAll.onclick = function () {
|
||||
var checkboxes = document.querySelectorAll('.form-check-all input[type="checkbox"]');
|
||||
for (var i = 0; i < checkboxes.length; i++) {
|
||||
checkboxes[i].checked = this.checked;
|
||||
if (checkboxes[i].checked) {
|
||||
checkboxes[i].closest("tr").classList.add("table-active");
|
||||
} else {
|
||||
checkboxes[i].closest("tr").classList.remove("table-active");
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var perPage = 8;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"id",
|
||||
"name",
|
||||
"company_name",
|
||||
"date",
|
||||
"leads_score",
|
||||
"phone",
|
||||
"location",
|
||||
"tags",
|
||||
{ attr: "src", name: "image_src" }
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
// Init list
|
||||
var leadsList = new List("leadsList", options).on("updated", function (list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
(document.querySelector(".pagination-prev.disabled")) ? document.querySelector(".pagination-prev.disabled").classList.remove("disabled"): '';
|
||||
(document.querySelector(".pagination-next.disabled")) ? document.querySelector(".pagination-next.disabled").classList.remove("disabled"): '';
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
const xhttp = new XMLHttpRequest();
|
||||
xhttp.onload = function () {
|
||||
var json_records = JSON.parse(this.responseText);
|
||||
Array.from(json_records).forEach(function (raw){
|
||||
var tags = raw.tags;
|
||||
var tagHtml = '';
|
||||
Array.from(tags).forEach((tag, index) => {
|
||||
tagHtml += '<span class="badge badge-soft-primary me-1">'+tag+'</span>'
|
||||
})
|
||||
|
||||
leadsList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ'+raw.id+"</a>",
|
||||
image_src: raw.image_src,
|
||||
name: raw.name,
|
||||
company_name: raw.company_name,
|
||||
date: formatDate(raw.date),
|
||||
leads_score: raw.leads_score,
|
||||
phone: raw.phone,
|
||||
location: raw.location,
|
||||
tags: tagHtml,
|
||||
});
|
||||
leadsList.sort('id', { order: "desc" });
|
||||
refreshCallbacks();
|
||||
});
|
||||
leadsList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">#VZ2101</a>`);
|
||||
}
|
||||
xhttp.open("GET", "assets/json/leads-list.json");
|
||||
xhttp.send();
|
||||
|
||||
// customer image
|
||||
document.querySelector("#lead-image-input").addEventListener("change", function () {
|
||||
var preview = document.querySelector("#lead-img");
|
||||
var file = document.querySelector("#lead-image-input").files[0];
|
||||
var reader = new FileReader();
|
||||
reader.addEventListener("load",function () {
|
||||
preview.src = reader.result;
|
||||
},false);
|
||||
if (file) {
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
leadsList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
|
||||
var isValue = isCount.body.firstElementChild.innerHTML;
|
||||
|
||||
var idField = document.getElementById("id-field"),
|
||||
leadNameField = document.getElementById("leadname-field"),
|
||||
leadImg = document.getElementById("lead-img"),
|
||||
company_nameField = document.getElementById("company_name-field"),
|
||||
dateField = document.getElementById("date-field"),
|
||||
leads_scoreField = document.getElementById("leads_score-field"),
|
||||
phoneField = document.getElementById("phone-field"),
|
||||
locationField = document.getElementById("location-field"),
|
||||
addBtn = document.getElementById("add-btn"),
|
||||
editBtn = document.getElementById("edit-btn"),
|
||||
removeBtns = document.getElementsByClassName("remove-item-btn"),
|
||||
editBtns = document.getElementsByClassName("edit-item-btn");
|
||||
refreshCallbacks();
|
||||
|
||||
document.getElementById("showModal").addEventListener("show.bs.modal", function (e) {
|
||||
if (e.relatedTarget.classList.contains("edit-item-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Lead";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("add-btn").style.display = "none";
|
||||
document.getElementById("edit-btn").style.display = "block";
|
||||
} else if (e.relatedTarget.classList.contains("add-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Add Lead";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("edit-btn").style.display = "none";
|
||||
document.getElementById("add-btn").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "List Lead";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "none";
|
||||
}
|
||||
});
|
||||
ischeckboxcheck();
|
||||
|
||||
document.getElementById("showModal").addEventListener("hidden.bs.modal", function () {
|
||||
clearFields();
|
||||
});
|
||||
|
||||
document.querySelector("#leadsList").addEventListener("click", function () {
|
||||
refreshCallbacks();
|
||||
ischeckboxcheck();
|
||||
});
|
||||
|
||||
var table = document.getElementById("customerTable");
|
||||
// save all tr
|
||||
var tr = table.getElementsByTagName("tr");
|
||||
var trlist = table.querySelectorAll(".list tr");
|
||||
|
||||
var count = 11;
|
||||
// multiple Remove CancelButton
|
||||
var tagInputField = new Choices('#taginput-choices', {
|
||||
removeItemButton: true,
|
||||
}
|
||||
);
|
||||
|
||||
var tagInputFieldValue = tagInputField.getValue(true);
|
||||
var tagHtmlValue = '';
|
||||
Array.from(tagInputFieldValue).forEach((tag, index) => {
|
||||
tagHtmlValue += '<span class="badge badge-soft-primary me-1">'+tag+'</span>'
|
||||
})
|
||||
|
||||
addBtn.addEventListener("click", function (e) {
|
||||
if (
|
||||
leadNameField.value !== "" &&
|
||||
company_nameField.value !== "" &&
|
||||
dateField.value !== "" &&
|
||||
leads_scoreField.value !== "" &&
|
||||
phoneField.value !== "" &&
|
||||
locationField.value !== ""
|
||||
) {
|
||||
var tagInputFieldValue = tagInputField.getValue(true);
|
||||
var tagHtmlValue = '';
|
||||
Array.from(tagInputFieldValue).forEach((tag, index) => {
|
||||
tagHtmlValue += '<span class="badge badge-soft-primary me-1">' + tag + '</span>'
|
||||
})
|
||||
leadsList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ'+count+"</a>",
|
||||
image_src: leadImg.src,
|
||||
name: leadNameField.value,
|
||||
company_name: company_nameField.value,
|
||||
date: formatDate(dateField.value),
|
||||
leads_score: leads_scoreField.value,
|
||||
phone: phoneField.value,
|
||||
location: locationField.value,
|
||||
tags: tagHtmlValue,
|
||||
});
|
||||
leadsList.sort('id', { order: "desc" });
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
refreshCallbacks();
|
||||
count++;
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Lead inserted successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
editBtn.addEventListener("click", function (e) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Contact";
|
||||
var editValues = leadsList.get({
|
||||
id: idField.value,
|
||||
});
|
||||
Array.from(editValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
var tagInputFieldValue = tagInputField.getValue(true);
|
||||
var tagHtmlValue = '';
|
||||
Array.from(tagInputFieldValue).forEach((tag, index) => {
|
||||
tagHtmlValue += '<span class="badge badge-soft-primary me-1">' + tag + '</span>'
|
||||
})
|
||||
if (selectedid == itemId) {
|
||||
x.values({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">'+idField.value+"</a>",
|
||||
image_src: leadImg.src,
|
||||
name: leadNameField.value,
|
||||
company_name: company_nameField.value,
|
||||
date: formatDate(dateField.value),
|
||||
leads_score: leads_scoreField.value,
|
||||
phone: phoneField.value,
|
||||
tags: tagHtmlValue,
|
||||
location: locationField.value,
|
||||
});
|
||||
}
|
||||
});
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Lead updated Successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
});
|
||||
|
||||
function ischeckboxcheck() {
|
||||
Array.from(document.getElementsByName("checkAll")).forEach(function (x) {
|
||||
x.addEventListener("click", function (e) {
|
||||
if (e.target.checked) {
|
||||
e.target.closest("tr").classList.add("table-active");
|
||||
} else {
|
||||
e.target.closest("tr").classList.remove("table-active");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function refreshCallbacks() {
|
||||
Array.from(removeBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = leadsList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
deleteid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
|
||||
var isElem = deleteid.body.firstElementChild;
|
||||
var isdeleteid = deleteid.body.firstElementChild.innerHTML;
|
||||
|
||||
if (isdeleteid == itemId) {
|
||||
document.getElementById("delete-record").addEventListener("click", function () {
|
||||
leadsList.remove("id", isElem.outerHTML);
|
||||
document.getElementById("deleteRecord-close").click();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(editBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = leadsList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
var tagBadge = new DOMParser().parseFromString(x._values.tags, "text/html").body.querySelectorAll("span.badge");
|
||||
if (selectedid == itemId) {
|
||||
idField.value = selectedid;
|
||||
leadImg.src = x._values.image_src;
|
||||
leadNameField.value = x._values.name;
|
||||
company_nameField.value = x._values.company_name;
|
||||
dateField.value = x._values.date;
|
||||
leads_scoreField.value = x._values.leads_score;
|
||||
phoneField.value = x._values.phone;
|
||||
if(tagBadge){
|
||||
Array.from(tagBadge).forEach((item) => {
|
||||
tagInputField.setChoiceByValue(item.innerHTML);
|
||||
})
|
||||
}
|
||||
locationField.value = x._values.location;
|
||||
flatpickr("#date-field", {
|
||||
dateFormat: "d M, Y",
|
||||
defaultDate: x._values.date,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function clearFields() {
|
||||
leadImg.src = "assets/images/users/user-dummy-img.jpg";
|
||||
leadNameField.value = "";
|
||||
company_nameField.value = "";
|
||||
dateField.value = "";
|
||||
leads_scoreField.value = "";
|
||||
phoneField.value = "";
|
||||
locationField.value = "";
|
||||
tagInputField.removeActiveItems();
|
||||
tagInputField.setChoiceByValue("0");
|
||||
}
|
||||
|
||||
function deleteMultiple(){
|
||||
ids_array = [];
|
||||
var items = document.getElementsByName('chk_child');
|
||||
for (i = 0; i < items.length; i++) {
|
||||
if (items[i].checked == true) {
|
||||
var trNode = items[i].parentNode.parentNode.parentNode;
|
||||
var id = trNode.querySelector("td a").innerHTML;
|
||||
ids_array.push(id);
|
||||
}
|
||||
}
|
||||
if (typeof ids_array !== 'undefined' && ids_array.length > 0) {
|
||||
Swal.fire({
|
||||
title: "Are you sure?",
|
||||
text: "You won't be able to revert this!",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonClass: 'btn btn-primary w-xs me-2 mt-2',
|
||||
cancelButtonClass: 'btn btn-danger w-xs mt-2',
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
for (i = 0; i < ids_array.length; i++) {
|
||||
leadsList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">${ids_array[i]}</a>`);
|
||||
}
|
||||
document.getElementById("checkAll").checked = false;
|
||||
Swal.fire({
|
||||
title: 'Deleted!',
|
||||
text: 'Your data has been deleted.',
|
||||
icon: 'success',
|
||||
confirmButtonClass: 'btn btn-info w-xs mt-2',
|
||||
buttonsStyling: false
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Please select at least one checkbox',
|
||||
confirmButtonClass: 'btn btn-info',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector(".pagination-next").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click(): '': '';
|
||||
});
|
||||
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click(): '': '';
|
||||
});
|
||||
421
resources/js/pages/crypto-buy-sell.init.js
vendored
Executable file
421
resources/js/pages/crypto-buy-sell.init.js
vendored
Executable file
@@ -0,0 +1,421 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Crypto-buy-sell Js File
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors){
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(
|
||||
newValue
|
||||
);
|
||||
if (color) return color;
|
||||
else return newValue;
|
||||
} else {
|
||||
var val = value.split(",");
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}else{
|
||||
console.warn('data-colors Attribute not found on:',chartId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Market Chart Candalstick
|
||||
var MarketchartColors = getChartColorsArray("Market_chart");
|
||||
if(MarketchartColors){
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33]
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11]
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65]
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24]
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47]
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31]
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91]
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612]
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67]
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9]
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45]
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35]
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53]
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19]
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620]
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61]
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58]
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16]
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4]
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578]
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579]
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92]
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22]
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08]
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97]
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602]
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95]
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591]
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592]
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34]
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25]
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99]
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81]
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96]
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39]
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27]
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55]
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02]
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01]
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06]
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89]
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5]
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86]
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07]
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606]
|
||||
},
|
||||
]
|
||||
}],
|
||||
chart: {
|
||||
type: 'candlestick',
|
||||
height: 360,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: MarketchartColors[0],
|
||||
downward: MarketchartColors[1]
|
||||
}
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: {
|
||||
enabled: true
|
||||
},
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return "$" + value;
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
y: [{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0);
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}, {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return "$" + y.toFixed(2) + "k";
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}, {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " Sales";
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#Market_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// List Js
|
||||
|
||||
var perPage = 8;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"id",
|
||||
"currency_name",
|
||||
"pairs",
|
||||
"current_value",
|
||||
"details",
|
||||
"valume",
|
||||
"high",
|
||||
"low",
|
||||
"market_cap",
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2
|
||||
})
|
||||
]
|
||||
};
|
||||
// Init list
|
||||
var marketList = new List("marketList", options).on("updated", function (list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
(document.querySelector(".pagination-prev.disabled")) ? document.querySelector(".pagination-prev.disabled").classList.remove("disabled"): '';
|
||||
(document.querySelector(".pagination-next.disabled")) ? document.querySelector(".pagination-next.disabled").classList.remove("disabled"): '';
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
marketList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
|
||||
if(document.querySelector(".pagination-next"))
|
||||
document.querySelector(".pagination-next").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click(): '': '';
|
||||
});
|
||||
|
||||
if(document.querySelector(".pagination-prev"))
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click(): '': '';
|
||||
});
|
||||
74
resources/js/pages/crypto-kyc.init.js
vendored
Executable file
74
resources/js/pages/crypto-kyc.init.js
vendored
Executable file
@@ -0,0 +1,74 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Crypto-kyc init Js File
|
||||
*/
|
||||
|
||||
|
||||
// Checkout nav tab
|
||||
if(document.querySelectorAll(".checkout-tab"))
|
||||
Array.from(document.querySelectorAll(".checkout-tab")).forEach(function (form) {
|
||||
|
||||
// next tab
|
||||
if(form.querySelectorAll(".nexttab"))
|
||||
Array.from(form.querySelectorAll(".nexttab")).forEach(function (nextButton) {
|
||||
var tabEl = form.querySelectorAll('button[data-bs-toggle="pill"]');
|
||||
Array.from(tabEl).forEach(function (item) {
|
||||
item.addEventListener('show.bs.tab', function (event) {
|
||||
event.target.classList.add('done');
|
||||
});
|
||||
});
|
||||
nextButton.addEventListener("click", function () {
|
||||
var nextTab = nextButton.getAttribute('data-nexttab');
|
||||
document.getElementById(nextTab).click();
|
||||
});
|
||||
});
|
||||
|
||||
//Pervies tab
|
||||
if(form.querySelectorAll(".previestab"))
|
||||
Array.from(form.querySelectorAll(".previestab")).forEach(function (prevButton) {
|
||||
|
||||
prevButton.addEventListener("click", function () {
|
||||
var prevTab = prevButton.getAttribute('data-previous');
|
||||
var totalDone = prevButton.closest("form")
|
||||
for (var i = totalDone - 1; i < totalDone; i++) {
|
||||
(prevButton.closest("form").querySelectorAll(".custom-nav .done")[i]) ? prevButton.closest("form").querySelectorAll(".custom-nav .done")[i].classList.remove('done') : '';
|
||||
}
|
||||
document.getElementById(prevTab).click();
|
||||
});
|
||||
});
|
||||
|
||||
// Step number click
|
||||
var tabButtons = form.querySelectorAll('button[data-bs-toggle="pill"]');
|
||||
if (tabButtons)
|
||||
Array.from(tabButtons).forEach(function (button, i) {
|
||||
button.setAttribute("data-position", i);
|
||||
button.addEventListener("click", function () {
|
||||
(form.querySelectorAll(".custom-nav .done").length > 0) ?
|
||||
Array.from(form.querySelectorAll(".custom-nav .done")).forEach(function (doneTab) {
|
||||
doneTab.classList.remove('done');
|
||||
})
|
||||
: '';
|
||||
for (var j = 0; j <= i; j++) {
|
||||
tabButtons[j].classList.contains('active') ? tabButtons[j].classList.remove('done') : tabButtons[j].classList.add('done');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Dropzone
|
||||
var dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
|
||||
if(dropzonePreviewNode){
|
||||
dropzonePreviewNode.id = "";
|
||||
var previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);
|
||||
}
|
||||
if(document.querySelector('.dropzone'))
|
||||
var dropzone = new Dropzone(".dropzone", {
|
||||
url: 'https://httpbin.org/post',
|
||||
method: "post",
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
});
|
||||
84
resources/js/pages/crypto-orders.init.js
vendored
Executable file
84
resources/js/pages/crypto-orders.init.js
vendored
Executable file
@@ -0,0 +1,84 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: crypto-orders init init js
|
||||
*/
|
||||
|
||||
// List Js
|
||||
var perPage = 10;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"order_date",
|
||||
"currency_name",
|
||||
"type",
|
||||
"quantity_value",
|
||||
"order_value",
|
||||
"avg_price",
|
||||
"price",
|
||||
"status",
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
// Init list
|
||||
var ContactList = document.getElementById('contactList');
|
||||
if (ContactList) {
|
||||
var contactList = new List("contactList", options).on("updated", function(list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
(document.querySelector(".pagination-prev.disabled")) ? document.querySelector(".pagination-prev.disabled").classList.remove("disabled"): '';
|
||||
(document.querySelector(".pagination-next.disabled")) ? document.querySelector(".pagination-next.disabled").classList.remove("disabled"): '';
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});;
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
contactList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
}
|
||||
|
||||
var paginationNext = document.querySelector(".pagination-next");
|
||||
if (paginationNext) {
|
||||
document.querySelector(".pagination-next").addEventListener("click", function() {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click(): '': '';
|
||||
});
|
||||
}
|
||||
var paginationPrev = document.querySelector(".pagination-prev");
|
||||
if (paginationPrev) {
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function() {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click(): '': '';
|
||||
});
|
||||
}
|
||||
90
resources/js/pages/crypto-transactions.init.js
vendored
Executable file
90
resources/js/pages/crypto-transactions.init.js
vendored
Executable file
@@ -0,0 +1,90 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Crypto transactions init Js File
|
||||
*/
|
||||
|
||||
|
||||
// list js
|
||||
var perPage = 8;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"id",
|
||||
"name",
|
||||
"currency_name",
|
||||
"form_name",
|
||||
"date",
|
||||
"details",
|
||||
"transaction_id",
|
||||
"type",
|
||||
"amount",
|
||||
"status",
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2
|
||||
})
|
||||
]
|
||||
};
|
||||
|
||||
// Init list
|
||||
var contactList = new List("contactList", options).on("updated", function (list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
(document.querySelector(".pagination-prev.disabled")) ? document.querySelector(".pagination-prev.disabled").classList.remove("disabled"): '';
|
||||
(document.querySelector(".pagination-next.disabled")) ? document.querySelector(".pagination-next.disabled").classList.remove("disabled"): '';
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
contactList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
|
||||
if(document.querySelector(".pagination-next"))
|
||||
document.querySelector(".pagination-next").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click(): '': '';
|
||||
});
|
||||
|
||||
if(document.querySelector(".pagination-prev"))
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click(): '': '';
|
||||
});
|
||||
|
||||
//Default Swiper
|
||||
var swiper = new Swiper(".default-swiper", {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
});
|
||||
864
resources/js/pages/crypto-wallet.init.js
vendored
Executable file
864
resources/js/pages/crypto-wallet.init.js
vendored
Executable file
@@ -0,0 +1,864 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Crypto-wallet-init init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(
|
||||
newValue
|
||||
);
|
||||
if (color) return color;
|
||||
else return newValue;
|
||||
} else {
|
||||
var val = value.split(",");
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Area Chart - Datetime X - Axis
|
||||
var areachartDatetimeColors = getChartColorsArray("area_chart_datetime");
|
||||
if (areachartDatetimeColors) {
|
||||
var timelinechart = {
|
||||
series: [{
|
||||
name: "Balance",
|
||||
data: [
|
||||
[1327359600000, 30.95],
|
||||
[1327446000000, 31.34],
|
||||
[1327532400000, 31.18],
|
||||
[1327618800000, 31.05],
|
||||
[1327878000000, 31.0],
|
||||
[1327964400000, 30.95],
|
||||
[1328050800000, 31.24],
|
||||
[1328137200000, 31.29],
|
||||
[1328223600000, 31.85],
|
||||
[1328482800000, 31.86],
|
||||
[1328569200000, 32.28],
|
||||
[1328655600000, 32.1],
|
||||
[1328742000000, 32.65],
|
||||
[1328828400000, 32.21],
|
||||
[1329087600000, 32.35],
|
||||
[1329174000000, 32.44],
|
||||
[1329260400000, 32.46],
|
||||
[1329346800000, 32.86],
|
||||
[1329433200000, 32.75],
|
||||
[1329778800000, 32.54],
|
||||
[1329865200000, 32.33],
|
||||
[1329951600000, 32.97],
|
||||
[1330038000000, 33.41],
|
||||
[1330297200000, 33.27],
|
||||
[1330383600000, 33.27],
|
||||
[1330470000000, 32.89],
|
||||
[1330556400000, 33.1],
|
||||
[1330642800000, 33.73],
|
||||
[1330902000000, 33.22],
|
||||
[1330988400000, 31.99],
|
||||
[1331074800000, 32.41],
|
||||
[1331161200000, 33.05],
|
||||
[1331247600000, 33.64],
|
||||
[1331506800000, 33.56],
|
||||
[1331593200000, 34.22],
|
||||
[1331679600000, 33.77],
|
||||
[1331766000000, 34.17],
|
||||
[1331852400000, 33.82],
|
||||
[1332111600000, 34.51],
|
||||
[1332198000000, 33.16],
|
||||
[1332284400000, 33.56],
|
||||
[1332370800000, 33.71],
|
||||
[1332457200000, 33.81],
|
||||
[1332712800000, 34.4],
|
||||
[1332799200000, 34.63],
|
||||
[1332885600000, 34.46],
|
||||
[1332972000000, 34.48],
|
||||
[1333058400000, 34.31],
|
||||
[1333317600000, 34.7],
|
||||
[1333404000000, 34.31],
|
||||
[1333490400000, 33.46],
|
||||
[1333576800000, 33.59],
|
||||
[1333922400000, 33.22],
|
||||
[1334008800000, 32.61],
|
||||
[1334095200000, 33.01],
|
||||
[1334181600000, 33.55],
|
||||
[1334268000000, 33.18],
|
||||
[1334527200000, 32.84],
|
||||
[1334613600000, 33.84],
|
||||
[1334700000000, 33.39],
|
||||
[1334786400000, 32.91],
|
||||
[1334872800000, 33.06],
|
||||
[1335132000000, 32.62],
|
||||
[1335218400000, 32.4],
|
||||
[1335304800000, 33.13],
|
||||
[1335391200000, 33.26],
|
||||
[1335477600000, 33.58],
|
||||
[1335736800000, 33.55],
|
||||
[1335823200000, 33.77],
|
||||
[1335909600000, 33.76],
|
||||
[1335996000000, 33.32],
|
||||
[1336082400000, 32.61],
|
||||
[1336341600000, 32.52],
|
||||
[1336428000000, 32.67],
|
||||
[1336514400000, 32.52],
|
||||
[1336600800000, 31.92],
|
||||
[1336687200000, 32.2],
|
||||
[1336946400000, 32.23],
|
||||
[1337032800000, 32.33],
|
||||
[1337119200000, 32.36],
|
||||
[1337205600000, 32.01],
|
||||
[1337292000000, 31.31],
|
||||
[1337551200000, 32.01],
|
||||
[1337637600000, 32.01],
|
||||
[1337724000000, 32.18],
|
||||
[1337810400000, 31.54],
|
||||
[1337896800000, 31.6],
|
||||
[1338242400000, 32.05],
|
||||
[1338328800000, 31.29],
|
||||
[1338415200000, 31.05],
|
||||
[1338501600000, 29.82],
|
||||
[1338760800000, 30.31],
|
||||
[1338847200000, 30.7],
|
||||
[1338933600000, 31.69],
|
||||
[1339020000000, 31.32],
|
||||
[1339106400000, 31.65],
|
||||
[1339365600000, 31.13],
|
||||
[1339452000000, 31.77],
|
||||
[1339538400000, 31.79],
|
||||
[1339624800000, 31.67],
|
||||
[1339711200000, 32.39],
|
||||
[1339970400000, 32.63],
|
||||
[1340056800000, 32.89],
|
||||
[1340143200000, 31.99],
|
||||
[1340229600000, 31.23],
|
||||
[1340316000000, 31.57],
|
||||
[1340575200000, 30.84],
|
||||
[1340661600000, 31.07],
|
||||
[1340748000000, 31.41],
|
||||
[1340834400000, 31.17],
|
||||
[1340920800000, 32.37],
|
||||
[1341180000000, 32.19],
|
||||
[1341266400000, 32.51],
|
||||
[1341439200000, 32.53],
|
||||
[1341525600000, 31.37],
|
||||
[1341784800000, 30.43],
|
||||
[1341871200000, 30.44],
|
||||
[1341957600000, 30.2],
|
||||
[1342044000000, 30.14],
|
||||
[1342130400000, 30.65],
|
||||
[1342389600000, 30.4],
|
||||
[1342476000000, 30.65],
|
||||
[1342562400000, 31.43],
|
||||
[1342648800000, 31.89],
|
||||
[1342735200000, 31.38],
|
||||
[1342994400000, 30.64],
|
||||
[1343080800000, 30.02],
|
||||
[1343167200000, 30.33],
|
||||
[1343253600000, 30.95],
|
||||
[1343340000000, 31.89],
|
||||
[1343599200000, 31.01],
|
||||
[1343685600000, 30.88],
|
||||
[1343772000000, 30.69],
|
||||
[1343858400000, 30.58],
|
||||
[1343944800000, 32.02],
|
||||
[1344204000000, 32.14],
|
||||
[1344290400000, 32.37],
|
||||
[1344376800000, 32.51],
|
||||
[1344463200000, 32.65],
|
||||
[1344549600000, 32.64],
|
||||
[1344808800000, 32.27],
|
||||
[1344895200000, 32.1],
|
||||
[1344981600000, 32.91],
|
||||
[1345068000000, 33.65],
|
||||
[1345154400000, 33.8],
|
||||
[1345413600000, 33.92],
|
||||
[1345500000000, 33.75],
|
||||
[1345586400000, 33.84],
|
||||
[1345672800000, 33.5],
|
||||
[1345759200000, 32.26],
|
||||
[1346018400000, 32.32],
|
||||
[1346104800000, 32.06],
|
||||
[1346191200000, 31.96],
|
||||
[1346277600000, 31.46],
|
||||
[1346364000000, 31.27],
|
||||
[1346709600000, 31.43],
|
||||
[1346796000000, 32.26],
|
||||
[1346882400000, 32.79],
|
||||
[1346968800000, 32.46],
|
||||
[1347228000000, 32.13],
|
||||
[1347314400000, 32.43],
|
||||
[1347400800000, 32.42],
|
||||
[1347487200000, 32.81],
|
||||
[1347573600000, 33.34],
|
||||
[1347832800000, 33.41],
|
||||
[1347919200000, 32.57],
|
||||
[1348005600000, 33.12],
|
||||
[1348092000000, 34.53],
|
||||
[1348178400000, 33.83],
|
||||
[1348437600000, 33.41],
|
||||
[1348524000000, 32.9],
|
||||
[1348610400000, 32.53],
|
||||
[1348696800000, 32.8],
|
||||
[1348783200000, 32.44],
|
||||
[1349042400000, 32.62],
|
||||
[1349128800000, 32.57],
|
||||
[1349215200000, 32.6],
|
||||
[1349301600000, 32.68],
|
||||
[1349388000000, 32.47],
|
||||
[1349647200000, 32.23],
|
||||
[1349733600000, 31.68],
|
||||
[1349820000000, 31.51],
|
||||
[1349906400000, 31.78],
|
||||
[1349992800000, 31.94],
|
||||
[1350252000000, 32.33],
|
||||
[1350338400000, 33.24],
|
||||
[1350424800000, 33.44],
|
||||
[1350511200000, 33.48],
|
||||
[1350597600000, 33.24],
|
||||
[1350856800000, 33.49],
|
||||
[1350943200000, 33.31],
|
||||
[1351029600000, 33.36],
|
||||
[1351116000000, 33.4],
|
||||
[1351202400000, 34.01],
|
||||
[1351638000000, 34.02],
|
||||
[1351724400000, 34.36],
|
||||
[1351810800000, 34.39],
|
||||
[1352070000000, 34.24],
|
||||
[1352156400000, 34.39],
|
||||
[1352242800000, 33.47],
|
||||
[1352329200000, 32.98],
|
||||
[1352415600000, 32.9],
|
||||
[1352674800000, 32.7],
|
||||
[1352761200000, 32.54],
|
||||
[1352847600000, 32.23],
|
||||
[1352934000000, 32.64],
|
||||
[1353020400000, 32.65],
|
||||
[1353279600000, 32.92],
|
||||
[1353366000000, 32.64],
|
||||
[1353452400000, 32.84],
|
||||
[1353625200000, 33.4],
|
||||
[1353884400000, 33.3],
|
||||
[1353970800000, 33.18],
|
||||
[1354057200000, 33.88],
|
||||
[1354143600000, 34.09],
|
||||
[1354230000000, 34.61],
|
||||
[1354489200000, 34.7],
|
||||
[1354575600000, 35.3],
|
||||
[1354662000000, 35.4],
|
||||
[1354748400000, 35.14],
|
||||
[1354834800000, 35.48],
|
||||
[1355094000000, 35.75],
|
||||
[1355180400000, 35.54],
|
||||
[1355266800000, 35.96],
|
||||
[1355353200000, 35.53],
|
||||
[1355439600000, 37.56],
|
||||
[1355698800000, 37.42],
|
||||
[1355785200000, 37.49],
|
||||
[1355871600000, 38.09],
|
||||
[1355958000000, 37.87],
|
||||
[1356044400000, 37.71],
|
||||
[1356303600000, 37.53],
|
||||
[1356476400000, 37.55],
|
||||
[1356562800000, 37.3],
|
||||
[1356649200000, 36.9],
|
||||
[1356908400000, 37.68],
|
||||
[1357081200000, 38.34],
|
||||
[1357167600000, 37.75],
|
||||
[1357254000000, 38.13],
|
||||
[1357513200000, 37.94],
|
||||
[1357599600000, 38.14],
|
||||
[1357686000000, 38.66],
|
||||
[1357772400000, 38.62],
|
||||
[1357858800000, 38.09],
|
||||
[1358118000000, 38.16],
|
||||
[1358204400000, 38.15],
|
||||
[1358290800000, 37.88],
|
||||
[1358377200000, 37.73],
|
||||
[1358463600000, 37.98],
|
||||
[1358809200000, 37.95],
|
||||
[1358895600000, 38.25],
|
||||
[1358982000000, 38.1],
|
||||
[1359068400000, 38.32],
|
||||
[1359327600000, 38.24],
|
||||
[1359414000000, 38.52],
|
||||
[1359500400000, 37.94],
|
||||
[1359586800000, 37.83],
|
||||
[1359673200000, 38.34],
|
||||
[1359932400000, 38.1],
|
||||
[1360018800000, 38.51],
|
||||
[1360105200000, 38.4],
|
||||
[1360191600000, 38.07],
|
||||
[1360278000000, 39.12],
|
||||
[1360537200000, 38.64],
|
||||
[1360623600000, 38.89],
|
||||
[1360710000000, 38.81],
|
||||
[1360796400000, 38.61],
|
||||
[1360882800000, 38.63],
|
||||
[1361228400000, 38.99],
|
||||
[1361314800000, 38.77],
|
||||
[1361401200000, 38.34],
|
||||
[1361487600000, 38.55],
|
||||
[1361746800000, 38.11],
|
||||
[1361833200000, 38.59],
|
||||
[1361919600000, 39.6],
|
||||
],
|
||||
}, ],
|
||||
chart: {
|
||||
id: "area-datetime",
|
||||
type: "area",
|
||||
height: 320,
|
||||
zoom: {
|
||||
autoScaleYaxis: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: "$ (thousands)",
|
||||
},
|
||||
},
|
||||
colors: areachartDatetimeColors,
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
style: "hollow",
|
||||
},
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
min: new Date("01 Mar 2012").getTime(),
|
||||
tickAmount: 6,
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: "dd MMM yyyy",
|
||||
},
|
||||
y: {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return "$" + y.toFixed(2) + "k";
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [20, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var timelinechart = new ApexCharts(
|
||||
document.querySelector("#area_chart_datetime"),
|
||||
timelinechart
|
||||
);
|
||||
timelinechart.render();
|
||||
}
|
||||
|
||||
// Datetime chart button
|
||||
var timLine = document.querySelectorAll('.timeline')
|
||||
if (timLine) {
|
||||
var resetCssClasses = function (activeEl) {
|
||||
var els = document.querySelectorAll(".timeline");
|
||||
Array.prototype.forEach.call(els, function (el) {
|
||||
el.classList.remove("active");
|
||||
});
|
||||
|
||||
activeEl.target.classList.add("active");
|
||||
};
|
||||
var OneMonth = document.querySelector("#one_month");
|
||||
if (OneMonth) {
|
||||
document.querySelector("#one_month").addEventListener("click", function (e) {
|
||||
resetCssClasses(e);
|
||||
|
||||
timelinechart.zoomX(
|
||||
new Date("28 Jan 2013").getTime(),
|
||||
new Date("27 Feb 2013").getTime()
|
||||
);
|
||||
});
|
||||
}
|
||||
var SixMonth = document.querySelector("#six_months");
|
||||
if (SixMonth) {
|
||||
document.querySelector("#six_months").addEventListener("click", function (e) {
|
||||
resetCssClasses(e);
|
||||
|
||||
timelinechart.zoomX(
|
||||
new Date("27 Sep 2012").getTime(),
|
||||
new Date("27 Feb 2013").getTime()
|
||||
);
|
||||
});
|
||||
}
|
||||
var OneYear = document.querySelector("#one_year");
|
||||
if (OneYear) {
|
||||
document.querySelector("#one_year").addEventListener("click", function (e) {
|
||||
resetCssClasses(e);
|
||||
timelinechart.zoomX(
|
||||
new Date("27 Feb 2012").getTime(),
|
||||
new Date("27 Feb 2013").getTime()
|
||||
);
|
||||
});
|
||||
}
|
||||
var All = document.querySelector("#all");
|
||||
if (All) {
|
||||
document.querySelector("#all").addEventListener("click", function (e) {
|
||||
resetCssClasses(e);
|
||||
|
||||
timelinechart.zoomX(
|
||||
new Date("23 Jan 2012").getTime(),
|
||||
new Date("27 Feb 2013").getTime()
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Bitcoin
|
||||
var areachartbitcoinColors = getChartColorsArray("bitcoin_sparkline_charts");
|
||||
if (areachartbitcoinColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Bitcoin",
|
||||
data: [85, 68, 35, 90, 8, 11, 26, 54],
|
||||
}, ],
|
||||
chart: {
|
||||
width: "100%",
|
||||
height: 50,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areachartbitcoinColors,
|
||||
};
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#bitcoin_sparkline_charts"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Litecoin
|
||||
var areachartlitecoinColors = getChartColorsArray("litecoin_sparkline_charts");
|
||||
if (areachartlitecoinColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Litecoin",
|
||||
data: [25, 50, 41, 87, 12, 36, 9, 54],
|
||||
}, ],
|
||||
chart: {
|
||||
width: "100%",
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areachartlitecoinColors,
|
||||
};
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#litecoin_sparkline_charts"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Eathereum
|
||||
var areacharteathereumColors = getChartColorsArray("eathereum_sparkline_charts");
|
||||
if (areacharteathereumColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Eathereum",
|
||||
data: [36, 21, 65, 22, 35, 50, 29, 44],
|
||||
}, ],
|
||||
chart: {
|
||||
width: "100%",
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areacharteathereumColors,
|
||||
};
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#eathereum_sparkline_charts"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Monero
|
||||
var areachartbinanceColors = getChartColorsArray("binance_sparkline_charts");
|
||||
if (areachartbinanceColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Monero",
|
||||
data: [30, 58, 29, 89, 12, 36, 9, 54],
|
||||
}, ],
|
||||
chart: {
|
||||
width: "100%",
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areachartbinanceColors,
|
||||
};
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#binance_sparkline_charts"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Dash
|
||||
var areachartdashColors = getChartColorsArray("dash_sparkline_charts");
|
||||
if (areachartdashColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Dash",
|
||||
data: [24, 68, 39, 86, 29, 42, 11, 58],
|
||||
}, ],
|
||||
chart: {
|
||||
width: "100%",
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areachartdashColors,
|
||||
};
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#dash_sparkline_charts"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Tether
|
||||
var areacharttetherColors = getChartColorsArray("tether_sparkline_charts");
|
||||
if (areacharttetherColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Dash",
|
||||
data: [13, 76, 12, 85, 25, 60, 9, 54],
|
||||
}, ],
|
||||
chart: {
|
||||
width: "100%",
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areacharttetherColors,
|
||||
};
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#tether_sparkline_charts"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Neo
|
||||
var areachartneoColors = getChartColorsArray("neo_sparkline_charts");
|
||||
if (areachartneoColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Neo",
|
||||
data: [9, 66, 41, 89, 12, 36, 25, 54],
|
||||
}, ],
|
||||
chart: {
|
||||
width: "100%",
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areachartneoColors,
|
||||
};
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#neo_sparkline_charts"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Swiper Slider
|
||||
var swiper = new Swiper(".cryptoSlider", {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 24,
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1600: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// List Js
|
||||
var perPage = 6;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"id",
|
||||
"currency_name",
|
||||
"quantity_value",
|
||||
"avg_price",
|
||||
"current_value",
|
||||
"returns",
|
||||
"returns_per",
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2,
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
// Init list
|
||||
var MarketList = document.getElementById('marketList');
|
||||
if (MarketList) {
|
||||
var marketList = new List("marketList", options).on("updated", function (list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
document.querySelector(".pagination-prev.disabled") ?
|
||||
document.querySelector(".pagination-prev.disabled").classList.remove("disabled") : "";
|
||||
document.querySelector(".pagination-next.disabled") ?
|
||||
document.querySelector(".pagination-next.disabled").classList.remove("disabled") : "";
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
marketList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
}
|
||||
|
||||
var paginationNext = document.querySelector(".pagination-next");
|
||||
if (paginationNext) {
|
||||
document.querySelector(".pagination-next").addEventListener("click", function () {
|
||||
document.querySelector(".pagination.listjs-pagination") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click() :
|
||||
"" :
|
||||
"";
|
||||
});
|
||||
}
|
||||
|
||||
var paginationPrev = document.querySelector(".pagination-prev");
|
||||
if (paginationPrev) {
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function () {
|
||||
document.querySelector(".pagination.listjs-pagination") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click() :
|
||||
"" :
|
||||
"";
|
||||
});
|
||||
}
|
||||
443
resources/js/pages/dashboard-analytics.init.js
vendored
Executable file
443
resources/js/pages/dashboard-analytics.init.js
vendored
Executable file
@@ -0,0 +1,443 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Analytics sales init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('data-colors atributes not found on', chartId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// world map with line & markers
|
||||
var vectorMapWorldLineColors = getChartColorsArray("users-by-country");
|
||||
if (vectorMapWorldLineColors) {
|
||||
var worldlinemap = new jsVectorMap({
|
||||
map: "world_merc",
|
||||
selector: "#users-by-country",
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
markers: [{
|
||||
name: "Greenland",
|
||||
coords: [72, -42]
|
||||
},
|
||||
{
|
||||
name: "Canada",
|
||||
coords: [56.1304, -106.3468]
|
||||
},
|
||||
{
|
||||
name: "Brazil",
|
||||
coords: [-14.2350, -51.9253]
|
||||
},
|
||||
{
|
||||
name: "Egypt",
|
||||
coords: [26.8206, 30.8025]
|
||||
},
|
||||
{
|
||||
name: "Russia",
|
||||
coords: [61, 105]
|
||||
},
|
||||
{
|
||||
name: "China",
|
||||
coords: [35.8617, 104.1954]
|
||||
},
|
||||
{
|
||||
name: "United States",
|
||||
coords: [37.0902, -95.7129]
|
||||
},
|
||||
{
|
||||
name: "Norway",
|
||||
coords: [60.472024, 8.468946]
|
||||
},
|
||||
{
|
||||
name: "Ukraine",
|
||||
coords: [48.379433, 31.16558]
|
||||
},
|
||||
],
|
||||
lines: [{
|
||||
from: "Canada",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "Russia",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "Greenland",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "Brazil",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "United States",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "China",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "Norway",
|
||||
to: "Egypt"
|
||||
},
|
||||
{
|
||||
from: "Ukraine",
|
||||
to: "Egypt"
|
||||
},
|
||||
],
|
||||
regionStyle: {
|
||||
initial: {
|
||||
stroke: "#9599ad",
|
||||
strokeWidth: 0.25,
|
||||
fill: vectorMapWorldLineColors,
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
animation: true,
|
||||
strokeDasharray: "6 3 6",
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// Countries charts
|
||||
var barchartCountriesColors = getChartColorsArray("countries_charts");
|
||||
if (barchartCountriesColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
data: [1010, 1640, 490, 1255, 1050, 689, 800, 420, 1085, 589],
|
||||
name: 'Sessions',
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 436,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4,
|
||||
horizontal: true,
|
||||
distributed: true,
|
||||
dataLabels: {
|
||||
position: 'top',
|
||||
},
|
||||
}
|
||||
},
|
||||
colors: barchartCountriesColors,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
offsetX: 32,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
fontWeight: 400,
|
||||
colors: ['#adb5bd']
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['India', 'United States', 'China', 'Indonesia', 'Russia', 'Bangladesh', 'Canada', 'Brazil', 'Vietnam', 'UK'],
|
||||
},
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#countries_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Heatmap Charts Generatedata
|
||||
function generateData(count, yrange) {
|
||||
var i = 0;
|
||||
var series = [];
|
||||
while (i < count) {
|
||||
var x = (i + 1).toString() + "h";
|
||||
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
|
||||
|
||||
series.push({
|
||||
x: x,
|
||||
y: y
|
||||
});
|
||||
i++;
|
||||
}
|
||||
return series;
|
||||
}
|
||||
|
||||
// Basic Heatmap Charts
|
||||
var chartHeatMapBasicColors = getChartColorsArray("audiences-sessions-country-charts");
|
||||
if (chartHeatMapBasicColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Sat',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Fri',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Thu',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Wed',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Tue',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Mon',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Sun',
|
||||
data: generateData(18, {
|
||||
min: 0,
|
||||
max: 90
|
||||
})
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 400,
|
||||
type: 'heatmap',
|
||||
offsetX: 0,
|
||||
offsetY: -8,
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
heatmap: {
|
||||
colorScale: {
|
||||
ranges: [{
|
||||
from: 0,
|
||||
to: 50,
|
||||
color: chartHeatMapBasicColors[0]
|
||||
},
|
||||
{
|
||||
from: 51,
|
||||
to: 100,
|
||||
color: chartHeatMapBasicColors[1]
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
horizontalAlign: 'center',
|
||||
offsetX: 0,
|
||||
offsetY: 20,
|
||||
markers: {
|
||||
width: 20,
|
||||
height: 6,
|
||||
radius: 2,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 12,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
colors: chartHeatMapBasicColors,
|
||||
tooltip: {
|
||||
y: [{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + "k";
|
||||
}
|
||||
return y;
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#audiences-sessions-country-charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Audiences metrics column charts
|
||||
var chartAudienceColumnChartsColors = getChartColorsArray("audiences_metrics_charts");
|
||||
if (chartAudienceColumnChartsColors) {
|
||||
var columnoptions = {
|
||||
series: [{
|
||||
name: 'Last Year',
|
||||
data: [25.3, 12.5, 20.2, 18.5, 40.4, 25.4, 15.8, 22.3, 19.2, 25.3, 12.5, 20.2]
|
||||
}, {
|
||||
name: 'Current Year',
|
||||
data: [36.2, 22.4, 38.2, 30.5, 26.4, 30.4, 20.2, 29.6, 10.9, 36.2, 22.4, 38.2]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 309,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '20%',
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center',
|
||||
fontWeight: 400,
|
||||
fontSize: '8px',
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
markers: {
|
||||
width: 9,
|
||||
height: 9,
|
||||
radius: 4,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
colors: chartAudienceColumnChartsColors,
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: true,
|
||||
strokeDashArray: 1,
|
||||
height: 1,
|
||||
width: '100%',
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
show: false
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
}
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#audiences_metrics_charts"), columnoptions);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// User by devices
|
||||
var dountchartUserDeviceColors = getChartColorsArray("user_device_pie_charts");
|
||||
if (dountchartUserDeviceColors) {
|
||||
var options = {
|
||||
series: [78.56, 105.02, 42.89],
|
||||
labels: ["Desktop", "Mobile", "Tablet"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
height: 219,
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
size: 100,
|
||||
donut: {
|
||||
size: "76%",
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center',
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
markers: {
|
||||
width: 20,
|
||||
height: 6,
|
||||
radius: 2,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 12,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return value + "k" + " Users";
|
||||
}
|
||||
},
|
||||
tickAmount: 4,
|
||||
min: 0
|
||||
},
|
||||
colors: dountchartUserDeviceColors,
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#user_device_pie_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
233
resources/js/pages/dashboard-crm.init.js
vendored
Executable file
233
resources/js/pages/dashboard-crm.init.js
vendored
Executable file
@@ -0,0 +1,233 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: CRM Dashboard init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('data-colors Attribute not found on:', chartId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sales forecast charts
|
||||
var areachartSalesColors = getChartColorsArray("sales-forecast-chart");
|
||||
if (areachartSalesColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Goal',
|
||||
data: [37]
|
||||
}, {
|
||||
name: 'Pending Forcast',
|
||||
data: [12]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
data: [18]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 341,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '65%',
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 5,
|
||||
colors: ['transparent']
|
||||
},
|
||||
xaxis: {
|
||||
categories: [''],
|
||||
axisTicks: {
|
||||
show: false,
|
||||
borderType: 'solid',
|
||||
color: '#78909C',
|
||||
height: 6,
|
||||
offsetX: 0,
|
||||
offsetY: 0
|
||||
},
|
||||
title: {
|
||||
text: 'Total Forecasted Value',
|
||||
offsetX: 0,
|
||||
offsetY: -30,
|
||||
style: {
|
||||
color: '#78909C',
|
||||
fontSize: '12px',
|
||||
fontWeight: 400,
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return "$" + value + "k";
|
||||
}
|
||||
},
|
||||
tickAmount: 4,
|
||||
min: 0
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center',
|
||||
fontWeight: 500,
|
||||
offsetX: 0,
|
||||
offsetY: -14,
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 0
|
||||
},
|
||||
markers: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
}
|
||||
},
|
||||
colors: areachartSalesColors
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#sales-forecast-chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Deal Type Charts
|
||||
var dealTypeChartsColors = getChartColorsArray("deal-type-charts");
|
||||
if (dealTypeChartsColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Pending',
|
||||
data: [80, 50, 30, 40, 100, 20],
|
||||
},
|
||||
{
|
||||
name: 'Loss',
|
||||
data: [20, 30, 40, 80, 20, 80],
|
||||
},
|
||||
{
|
||||
name: 'Won',
|
||||
data: [44, 76, 78, 13, 43, 10],
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 341,
|
||||
type: 'radar',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 1,
|
||||
left: 1,
|
||||
top: 1
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.2
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
fontWeight: 500,
|
||||
offsetX: 0,
|
||||
offsetY: -8,
|
||||
markers: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
radius: 6,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
vertical: 0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: dealTypeChartsColors,
|
||||
xaxis: {
|
||||
categories: ['2016', '2017', '2018', '2019', '2020', '2021']
|
||||
}
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#deal-type-charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Balance Overview charts
|
||||
var revenueExpensesChartsColors = getChartColorsArray("revenue-expenses-charts");
|
||||
if (revenueExpensesChartsColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Revenue',
|
||||
data: [20, 25, 30, 35, 40, 55, 70, 110, 150, 180, 210, 250]
|
||||
}, {
|
||||
name: 'Expenses',
|
||||
data: [12, 17, 45, 42, 24, 35, 42, 75, 102, 108, 156, 199]
|
||||
}],
|
||||
chart: {
|
||||
height: 290,
|
||||
type: 'area',
|
||||
toolbar: 'false',
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2,
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return "$" + value + "k";
|
||||
}
|
||||
},
|
||||
tickAmount: 5,
|
||||
min: 0,
|
||||
max: 260
|
||||
},
|
||||
colors: revenueExpensesChartsColors,
|
||||
fill: {
|
||||
opacity: 0.06,
|
||||
colors: revenueExpensesChartsColors,
|
||||
type: 'solid'
|
||||
}
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#revenue-expenses-charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
748
resources/js/pages/dashboard-crypto.init.js
vendored
Executable file
748
resources/js/pages/dashboard-crypto.init.js
vendored
Executable file
@@ -0,0 +1,748 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Crypto Dashboard init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(
|
||||
newValue
|
||||
);
|
||||
if (color) return color;
|
||||
else return newValue;
|
||||
} else {
|
||||
var val = value.split(",");
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('data-colors Attribute not found on:', chartId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Total Portfolio Donut Charts
|
||||
var donutchartportfolioColors = getChartColorsArray("portfolio_donut_charts");
|
||||
if (donutchartportfolioColors) {
|
||||
var options = {
|
||||
series: [19405, 40552, 15824, 30635],
|
||||
labels: ["Bitcoin", "Ethereum", "Litecoin", "Dash"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
height: 224,
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
pie: {
|
||||
size: 100,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
donut: {
|
||||
size: "70%",
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
show: true,
|
||||
fontSize: "18px",
|
||||
offsetY: -5,
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
fontSize: "20px",
|
||||
color: "#343a40",
|
||||
fontWeight: 500,
|
||||
offsetY: 5,
|
||||
formatter: function (val) {
|
||||
return "$" + val;
|
||||
},
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: "13px",
|
||||
label: "Total value",
|
||||
color: "#9599ad",
|
||||
fontWeight: 500,
|
||||
formatter: function (w) {
|
||||
return (
|
||||
"$" +
|
||||
w.globals.seriesTotals.reduce(function (a, b) {
|
||||
return a + b;
|
||||
}, 0)
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return "$" + value;
|
||||
},
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
lineCap: "round",
|
||||
width: 2,
|
||||
},
|
||||
colors: donutchartportfolioColors,
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#portfolio_donut_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Market Chart Candalstick
|
||||
var MarketchartColors = getChartColorsArray("Market_chart");
|
||||
if (MarketchartColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
data: [{
|
||||
x: new Date(1538778600000),
|
||||
y: [6629.81, 6650.5, 6623.04, 6633.33],
|
||||
},
|
||||
{
|
||||
x: new Date(1538780400000),
|
||||
y: [6632.01, 6643.59, 6620, 6630.11],
|
||||
},
|
||||
{
|
||||
x: new Date(1538782200000),
|
||||
y: [6630.71, 6648.95, 6623.34, 6635.65],
|
||||
},
|
||||
{
|
||||
x: new Date(1538784000000),
|
||||
y: [6635.65, 6651, 6629.67, 6638.24],
|
||||
},
|
||||
{
|
||||
x: new Date(1538785800000),
|
||||
y: [6638.24, 6640, 6620, 6624.47],
|
||||
},
|
||||
{
|
||||
x: new Date(1538787600000),
|
||||
y: [6624.53, 6636.03, 6621.68, 6624.31],
|
||||
},
|
||||
{
|
||||
x: new Date(1538789400000),
|
||||
y: [6624.61, 6632.2, 6617, 6626.02],
|
||||
},
|
||||
{
|
||||
x: new Date(1538791200000),
|
||||
y: [6627, 6627.62, 6584.22, 6603.02],
|
||||
},
|
||||
{
|
||||
x: new Date(1538793000000),
|
||||
y: [6605, 6608.03, 6598.95, 6604.01],
|
||||
},
|
||||
{
|
||||
x: new Date(1538794800000),
|
||||
y: [6604.5, 6614.4, 6602.26, 6608.02],
|
||||
},
|
||||
{
|
||||
x: new Date(1538796600000),
|
||||
y: [6608.02, 6610.68, 6601.99, 6608.91],
|
||||
},
|
||||
{
|
||||
x: new Date(1538798400000),
|
||||
y: [6608.91, 6618.99, 6608.01, 6612],
|
||||
},
|
||||
{
|
||||
x: new Date(1538800200000),
|
||||
y: [6612, 6615.13, 6605.09, 6612],
|
||||
},
|
||||
{
|
||||
x: new Date(1538802000000),
|
||||
y: [6612, 6624.12, 6608.43, 6622.95],
|
||||
},
|
||||
{
|
||||
x: new Date(1538803800000),
|
||||
y: [6623.91, 6623.91, 6615, 6615.67],
|
||||
},
|
||||
{
|
||||
x: new Date(1538805600000),
|
||||
y: [6618.69, 6618.74, 6610, 6610.4],
|
||||
},
|
||||
{
|
||||
x: new Date(1538807400000),
|
||||
y: [6611, 6622.78, 6610.4, 6614.9],
|
||||
},
|
||||
{
|
||||
x: new Date(1538809200000),
|
||||
y: [6614.9, 6626.2, 6613.33, 6623.45],
|
||||
},
|
||||
{
|
||||
x: new Date(1538811000000),
|
||||
y: [6623.48, 6627, 6618.38, 6620.35],
|
||||
},
|
||||
{
|
||||
x: new Date(1538812800000),
|
||||
y: [6619.43, 6620.35, 6610.05, 6615.53],
|
||||
},
|
||||
{
|
||||
x: new Date(1538814600000),
|
||||
y: [6615.53, 6617.93, 6610, 6615.19],
|
||||
},
|
||||
{
|
||||
x: new Date(1538816400000),
|
||||
y: [6615.19, 6621.6, 6608.2, 6620],
|
||||
},
|
||||
{
|
||||
x: new Date(1538818200000),
|
||||
y: [6619.54, 6625.17, 6614.15, 6620],
|
||||
},
|
||||
{
|
||||
x: new Date(1538820000000),
|
||||
y: [6620.33, 6634.15, 6617.24, 6624.61],
|
||||
},
|
||||
{
|
||||
x: new Date(1538821800000),
|
||||
y: [6625.95, 6626, 6611.66, 6617.58],
|
||||
},
|
||||
{
|
||||
x: new Date(1538823600000),
|
||||
y: [6619, 6625.97, 6595.27, 6598.86],
|
||||
},
|
||||
{
|
||||
x: new Date(1538825400000),
|
||||
y: [6598.86, 6598.88, 6570, 6587.16],
|
||||
},
|
||||
{
|
||||
x: new Date(1538827200000),
|
||||
y: [6588.86, 6600, 6580, 6593.4],
|
||||
},
|
||||
{
|
||||
x: new Date(1538829000000),
|
||||
y: [6593.99, 6598.89, 6585, 6587.81],
|
||||
},
|
||||
{
|
||||
x: new Date(1538830800000),
|
||||
y: [6587.81, 6592.73, 6567.14, 6578],
|
||||
},
|
||||
{
|
||||
x: new Date(1538832600000),
|
||||
y: [6578.35, 6581.72, 6567.39, 6579],
|
||||
},
|
||||
{
|
||||
x: new Date(1538834400000),
|
||||
y: [6579.38, 6580.92, 6566.77, 6575.96],
|
||||
},
|
||||
{
|
||||
x: new Date(1538836200000),
|
||||
y: [6575.96, 6589, 6571.77, 6588.92],
|
||||
},
|
||||
{
|
||||
x: new Date(1538838000000),
|
||||
y: [6588.92, 6594, 6577.55, 6589.22],
|
||||
},
|
||||
{
|
||||
x: new Date(1538839800000),
|
||||
y: [6589.3, 6598.89, 6589.1, 6596.08],
|
||||
},
|
||||
{
|
||||
x: new Date(1538841600000),
|
||||
y: [6597.5, 6600, 6588.39, 6596.25],
|
||||
},
|
||||
{
|
||||
x: new Date(1538843400000),
|
||||
y: [6598.03, 6600, 6588.73, 6595.97],
|
||||
},
|
||||
{
|
||||
x: new Date(1538845200000),
|
||||
y: [6595.97, 6602.01, 6588.17, 6602],
|
||||
},
|
||||
{
|
||||
x: new Date(1538847000000),
|
||||
y: [6602, 6607, 6596.51, 6599.95],
|
||||
},
|
||||
{
|
||||
x: new Date(1538848800000),
|
||||
y: [6600.63, 6601.21, 6590.39, 6591.02],
|
||||
},
|
||||
{
|
||||
x: new Date(1538850600000),
|
||||
y: [6591.02, 6603.08, 6591, 6591],
|
||||
},
|
||||
{
|
||||
x: new Date(1538852400000),
|
||||
y: [6591, 6601.32, 6585, 6592],
|
||||
},
|
||||
{
|
||||
x: new Date(1538854200000),
|
||||
y: [6593.13, 6596.01, 6590, 6593.34],
|
||||
},
|
||||
{
|
||||
x: new Date(1538856000000),
|
||||
y: [6593.34, 6604.76, 6582.63, 6593.86],
|
||||
},
|
||||
{
|
||||
x: new Date(1538857800000),
|
||||
y: [6593.86, 6604.28, 6586.57, 6600.01],
|
||||
},
|
||||
{
|
||||
x: new Date(1538859600000),
|
||||
y: [6601.81, 6603.21, 6592.78, 6596.25],
|
||||
},
|
||||
{
|
||||
x: new Date(1538861400000),
|
||||
y: [6596.25, 6604.2, 6590, 6602.99],
|
||||
},
|
||||
{
|
||||
x: new Date(1538863200000),
|
||||
y: [6602.99, 6606, 6584.99, 6587.81],
|
||||
},
|
||||
{
|
||||
x: new Date(1538865000000),
|
||||
y: [6587.81, 6595, 6583.27, 6591.96],
|
||||
},
|
||||
{
|
||||
x: new Date(1538866800000),
|
||||
y: [6591.97, 6596.07, 6585, 6588.39],
|
||||
},
|
||||
{
|
||||
x: new Date(1538868600000),
|
||||
y: [6587.6, 6598.21, 6587.6, 6594.27],
|
||||
},
|
||||
{
|
||||
x: new Date(1538870400000),
|
||||
y: [6596.44, 6601, 6590, 6596.55],
|
||||
},
|
||||
{
|
||||
x: new Date(1538872200000),
|
||||
y: [6598.91, 6605, 6596.61, 6600.02],
|
||||
},
|
||||
{
|
||||
x: new Date(1538874000000),
|
||||
y: [6600.55, 6605, 6589.14, 6593.01],
|
||||
},
|
||||
{
|
||||
x: new Date(1538875800000),
|
||||
y: [6593.15, 6605, 6592, 6603.06],
|
||||
},
|
||||
{
|
||||
x: new Date(1538877600000),
|
||||
y: [6603.07, 6604.5, 6599.09, 6603.89],
|
||||
},
|
||||
{
|
||||
x: new Date(1538879400000),
|
||||
y: [6604.44, 6604.44, 6600, 6603.5],
|
||||
},
|
||||
{
|
||||
x: new Date(1538881200000),
|
||||
y: [6603.5, 6603.99, 6597.5, 6603.86],
|
||||
},
|
||||
{
|
||||
x: new Date(1538883000000),
|
||||
y: [6603.85, 6605, 6600, 6604.07],
|
||||
},
|
||||
{
|
||||
x: new Date(1538884800000),
|
||||
y: [6604.98, 6606, 6604.07, 6606],
|
||||
},
|
||||
],
|
||||
}, ],
|
||||
chart: {
|
||||
type: "candlestick",
|
||||
height: 294,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: MarketchartColors[0],
|
||||
downward: MarketchartColors[1],
|
||||
},
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
},
|
||||
labels: {
|
||||
formatter: function (value) {
|
||||
return "$" + value;
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
y: [{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0);
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return "$" + y.toFixed(2) + "k";
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " Sales";
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#Market_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Bitcoin
|
||||
var areachartbitcoinColors = getChartColorsArray("bitcoin_sparkline_charts");
|
||||
if (areachartbitcoinColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Bitcoin",
|
||||
data: [85, 68, 35, 90, 8, 11, 26, 54],
|
||||
}, ],
|
||||
chart: {
|
||||
width: 130,
|
||||
height: 50,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areachartbitcoinColors,
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#bitcoin_sparkline_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Litecoin
|
||||
var areachartlitecoinColors = getChartColorsArray("litecoin_sparkline_charts");
|
||||
if (areachartlitecoinColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Litecoin",
|
||||
data: [25, 50, 41, 87, 12, 36, 9, 54],
|
||||
}, ],
|
||||
chart: {
|
||||
width: 130,
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areachartlitecoinColors,
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#litecoin_sparkline_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Eathereum
|
||||
var areacharteathereumColors = getChartColorsArray("eathereum_sparkline_charts");
|
||||
if (areacharteathereumColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Eathereum",
|
||||
data: [36, 21, 65, 22, 35, 50, 29, 44],
|
||||
}, ],
|
||||
chart: {
|
||||
width: 130,
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areacharteathereumColors,
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#eathereum_sparkline_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Binance
|
||||
var areachartbinanceColors = getChartColorsArray("binance_sparkline_charts");
|
||||
if (areachartbinanceColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Binance",
|
||||
data: [30, 58, 29, 89, 12, 36, 9, 54],
|
||||
}, ],
|
||||
chart: {
|
||||
width: 130,
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areachartbinanceColors,
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#binance_sparkline_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Dash
|
||||
var areachartdashColors = getChartColorsArray("dash_sparkline_charts");
|
||||
if (areachartdashColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Dash",
|
||||
data: [24, 68, 39, 86, 29, 42, 11, 58],
|
||||
}, ],
|
||||
chart: {
|
||||
width: 130,
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areachartdashColors,
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#dash_sparkline_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Tether
|
||||
var areacharttetherColors = getChartColorsArray("tether_sparkline_charts");
|
||||
if (areacharttetherColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Dash",
|
||||
data: [13, 76, 12, 85, 25, 60, 9, 54],
|
||||
}, ],
|
||||
chart: {
|
||||
width: 130,
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areacharttetherColors,
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#tether_sparkline_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Neo
|
||||
var areachartneoColors = getChartColorsArray("neo_sparkline_charts");
|
||||
if (areachartneoColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Neo",
|
||||
data: [9, 66, 41, 89, 12, 36, 25, 54],
|
||||
}, ],
|
||||
chart: {
|
||||
width: 130,
|
||||
height: 46,
|
||||
type: "area",
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 1.5,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
inverseColors: false,
|
||||
opacityFrom: 0.45,
|
||||
opacityTo: 0.05,
|
||||
stops: [50, 100, 100, 100],
|
||||
},
|
||||
},
|
||||
colors: areachartneoColors,
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#neo_sparkline_charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Swiper Slider
|
||||
var swiper = new Swiper(".cryptoSlider", {
|
||||
slidesPerView: 1,
|
||||
loop: false,
|
||||
spaceBetween: 24,
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2.5,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 5,
|
||||
},
|
||||
},
|
||||
});
|
||||
329
resources/js/pages/dashboard-ecommerce.init.js
vendored
Executable file
329
resources/js/pages/dashboard-ecommerce.init.js
vendored
Executable file
@@ -0,0 +1,329 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Ecommerce Dashboard init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(
|
||||
newValue
|
||||
);
|
||||
if (color) return color;
|
||||
else return newValue;
|
||||
} else {
|
||||
var val = value.split(",");
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('data-colors atributes not found on', chartId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var linechartcustomerColors = getChartColorsArray("customer_impression_charts");
|
||||
if (linechartcustomerColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Orders",
|
||||
type: "area",
|
||||
data: [34, 65, 46, 68, 49, 61, 42, 44, 78, 52, 63, 67],
|
||||
},
|
||||
{
|
||||
name: "Earnings",
|
||||
type: "bar",
|
||||
data: [
|
||||
89.25, 98.58, 68.74, 108.87, 77.54, 84.03, 51.24, 28.57, 92.57, 42.36,
|
||||
88.51, 36.57,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Refunds",
|
||||
type: "line",
|
||||
data: [8, 12, 7, 17, 21, 11, 5, 9, 7, 29, 12, 35],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 370,
|
||||
type: "line",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: "straight",
|
||||
dashArray: [0, 0, 8],
|
||||
width: [2, 0, 2.2],
|
||||
},
|
||||
fill: {
|
||||
opacity: [0.1, 0.9, 1],
|
||||
},
|
||||
markers: {
|
||||
size: [0, 0, 0],
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 4,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
right: -2,
|
||||
bottom: 15,
|
||||
left: 10,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
horizontalAlign: "center",
|
||||
offsetX: 0,
|
||||
offsetY: -5,
|
||||
markers: {
|
||||
width: 9,
|
||||
height: 9,
|
||||
radius: 6,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
vertical: 0,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: "30%",
|
||||
barHeight: "70%",
|
||||
},
|
||||
},
|
||||
colors: linechartcustomerColors,
|
||||
tooltip: {
|
||||
shared: true,
|
||||
y: [{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0);
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return "$" + y.toFixed(2) + "k";
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " Sales";
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#customer_impression_charts"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Simple Donut Charts
|
||||
var chartDonutBasicColors = getChartColorsArray("store-visits-source");
|
||||
if (chartDonutBasicColors) {
|
||||
var options = {
|
||||
series: [44, 55, 41, 17, 15],
|
||||
labels: ["Direct", "Social", "Email", "Other", "Referrals"],
|
||||
chart: {
|
||||
height: 333,
|
||||
type: "donut",
|
||||
},
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
stroke: {
|
||||
show: false
|
||||
},
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
colors: chartDonutBasicColors,
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#store-visits-source"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// world map with markers
|
||||
var vectorMapWorldMarkersColors = getChartColorsArray("sales-by-locations");
|
||||
if (vectorMapWorldMarkersColors) {
|
||||
var worldemapmarkers = new jsVectorMap({
|
||||
map: "world_merc",
|
||||
selector: "#sales-by-locations",
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
selectedMarkers: [0, 5],
|
||||
regionStyle: {
|
||||
initial: {
|
||||
stroke: "#9599ad",
|
||||
strokeWidth: 0.25,
|
||||
fill: vectorMapWorldMarkersColors[0],
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
markersSelectable: true,
|
||||
markers: [{
|
||||
name: "Palestine",
|
||||
coords: [31.9474, 35.2272],
|
||||
},
|
||||
{
|
||||
name: "Russia",
|
||||
coords: [61.524, 105.3188],
|
||||
},
|
||||
{
|
||||
name: "Canada",
|
||||
coords: [56.1304, -106.3468],
|
||||
},
|
||||
{
|
||||
name: "Greenland",
|
||||
coords: [71.7069, -42.6043],
|
||||
},
|
||||
],
|
||||
markerStyle: {
|
||||
initial: {
|
||||
fill: vectorMapWorldMarkersColors[1],
|
||||
},
|
||||
selected: {
|
||||
fill: vectorMapWorldMarkersColors[2],
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
markers: {
|
||||
render: function (marker) {
|
||||
return marker.name;
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Vertical Swiper
|
||||
var swiper = new Swiper(".vertical-swiper", {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 10,
|
||||
mousewheel: true,
|
||||
loop: true,
|
||||
direction: "vertical",
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
});
|
||||
|
||||
var layoutRightSideBtn = document.querySelector('.layout-rightside-btn');
|
||||
if (layoutRightSideBtn) {
|
||||
Array.from(document.querySelectorAll(".layout-rightside-btn")).forEach(function (item) {
|
||||
var userProfileSidebar = document.querySelector(".layout-rightside-col");
|
||||
item.addEventListener("click", function () {
|
||||
if (userProfileSidebar.classList.contains("d-block")) {
|
||||
userProfileSidebar.classList.remove("d-block");
|
||||
userProfileSidebar.classList.add("d-none");
|
||||
} else {
|
||||
userProfileSidebar.classList.remove("d-none");
|
||||
userProfileSidebar.classList.add("d-block");
|
||||
}
|
||||
});
|
||||
});
|
||||
window.addEventListener("resize", function () {
|
||||
var userProfileSidebar = document.querySelector(".layout-rightside-col");
|
||||
if (userProfileSidebar) {
|
||||
Array.from(document.querySelectorAll(".layout-rightside-btn")).forEach(function () {
|
||||
if (window.outerWidth < 1699 || window.outerWidth > 3440) {
|
||||
userProfileSidebar.classList.remove("d-block");
|
||||
} else if (window.outerWidth > 1699) {
|
||||
userProfileSidebar.classList.add("d-block");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
var overlay = document.querySelector('.overlay');
|
||||
if (overlay) {
|
||||
document.querySelector(".overlay").addEventListener("click", function () {
|
||||
if (document.querySelector(".layout-rightside-col").classList.contains('d-block') == true) {
|
||||
document.querySelector(".layout-rightside-col").classList.remove("d-block");
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("load", function () {
|
||||
var userProfileSidebar = document.querySelector(".layout-rightside-col");
|
||||
if (userProfileSidebar) {
|
||||
Array.from(document.querySelectorAll(".layout-rightside-btn")).forEach(function () {
|
||||
if (window.outerWidth < 1699 || window.outerWidth > 3440) {
|
||||
userProfileSidebar.classList.remove("d-block");
|
||||
} else if (window.outerWidth > 1699) {
|
||||
userProfileSidebar.classList.add("d-block");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
697
resources/js/pages/dashboard-nft.init.js
vendored
Executable file
697
resources/js/pages/dashboard-nft.init.js
vendored
Executable file
@@ -0,0 +1,697 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: nft Dashboard init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(
|
||||
newValue
|
||||
);
|
||||
if (color) return color;
|
||||
else return newValue;
|
||||
} else {
|
||||
var val = value.split(",");
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('data-colors atributes not found on', chartId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Chart-1
|
||||
var areachartmini1Colors = getChartColorsArray("mini-chart-1");
|
||||
if (areachartmini1Colors) {
|
||||
var options1 = {
|
||||
series: [{
|
||||
data: [25, 66, 41, 89, 63, 25, 44, 12]
|
||||
}],
|
||||
chart: {
|
||||
type: 'line',
|
||||
width: 80,
|
||||
height: 30,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
|
||||
},
|
||||
colors: areachartmini1Colors,
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.3,
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart1 = new ApexCharts(document.querySelector("#mini-chart-1"), options1);
|
||||
chart1.render();
|
||||
|
||||
}
|
||||
|
||||
// Chart-2
|
||||
var areachartmini2Colors = getChartColorsArray("mini-chart-2");
|
||||
if (areachartmini2Colors) {
|
||||
var options1 = {
|
||||
series: [{
|
||||
data: [50, 15, 35, 62, 23, 56, 44, 12]
|
||||
}],
|
||||
chart: {
|
||||
type: 'line',
|
||||
width: 80,
|
||||
height: 30,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
|
||||
},
|
||||
colors: areachartmini2Colors,
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.3,
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart1 = new ApexCharts(document.querySelector("#mini-chart-2"), options1);
|
||||
chart1.render();
|
||||
|
||||
}
|
||||
|
||||
// Chart-3
|
||||
var areachartmini3Colors = getChartColorsArray("mini-chart-3");
|
||||
if (areachartmini3Colors) {
|
||||
var options1 = {
|
||||
series: [{
|
||||
data: [25, 35, 35, 89, 63, 25, 44, 12]
|
||||
}],
|
||||
chart: {
|
||||
type: 'line',
|
||||
width: 80,
|
||||
height: 30,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
|
||||
},
|
||||
colors: areachartmini3Colors,
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.3,
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart1 = new ApexCharts(document.querySelector("#mini-chart-3"), options1);
|
||||
chart1.render();
|
||||
}
|
||||
|
||||
// Chart-4
|
||||
var areachartmini4Colors = getChartColorsArray("mini-chart-4");
|
||||
if (areachartmini4Colors) {
|
||||
var options1 = {
|
||||
series: [{
|
||||
data: [50, 15, 20, 34, 23, 56, 65, 41]
|
||||
}],
|
||||
chart: {
|
||||
type: 'line',
|
||||
width: 80,
|
||||
height: 30,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
|
||||
},
|
||||
colors: areachartmini4Colors,
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.3,
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart1 = new ApexCharts(document.querySelector("#mini-chart-4"), options1);
|
||||
chart1.render();
|
||||
}
|
||||
|
||||
// Chart-5
|
||||
var areachartmini5Colors = getChartColorsArray("mini-chart-5");
|
||||
if (areachartmini5Colors) {
|
||||
var options1 = {
|
||||
series: [{
|
||||
data: [45, 53, 24, 89, 63, 60, 36, 50]
|
||||
}],
|
||||
chart: {
|
||||
type: 'line',
|
||||
width: 80,
|
||||
height: 30,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
|
||||
},
|
||||
colors: areachartmini5Colors,
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.3,
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart1 = new ApexCharts(document.querySelector("#mini-chart-5"), options1);
|
||||
chart1.render();
|
||||
}
|
||||
|
||||
// Chart-6
|
||||
var areachartmini6Colors = getChartColorsArray("mini-chart-6");
|
||||
if (areachartmini6Colors) {
|
||||
var options1 = {
|
||||
series: [{
|
||||
data: [50, 15, 35, 62, 23, 56, 44, 12]
|
||||
}],
|
||||
chart: {
|
||||
type: 'line',
|
||||
width: 80,
|
||||
height: 30,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
|
||||
},
|
||||
colors: areachartmini6Colors,
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.3,
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart1 = new ApexCharts(document.querySelector("#mini-chart-6"), options1);
|
||||
chart1.render();
|
||||
}
|
||||
|
||||
// Chart-7
|
||||
var areachartmini7Colors = getChartColorsArray("mini-chart-7");
|
||||
if (areachartmini7Colors) {
|
||||
var options1 = {
|
||||
series: [{
|
||||
data: [50, 15, 20, 34, 23, 56, 65, 41]
|
||||
}],
|
||||
chart: {
|
||||
type: 'line',
|
||||
width: 80,
|
||||
height: 30,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
|
||||
},
|
||||
colors: areachartmini7Colors,
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.3,
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart1 = new ApexCharts(document.querySelector("#mini-chart-7"), options1);
|
||||
chart1.render();
|
||||
}
|
||||
|
||||
// Chart-5
|
||||
var areachartmini8Colors = getChartColorsArray("mini-chart-8");
|
||||
if (areachartmini8Colors) {
|
||||
var options1 = {
|
||||
series: [{
|
||||
data: [45, 53, 24, 89, 63, 60, 36, 50]
|
||||
}],
|
||||
chart: {
|
||||
type: 'line',
|
||||
width: 80,
|
||||
height: 30,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
|
||||
},
|
||||
colors: areachartmini8Colors,
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 2.3,
|
||||
},
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false
|
||||
},
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
},
|
||||
marker: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart1 = new ApexCharts(document.querySelector("#mini-chart-8"), options1);
|
||||
chart1.render();
|
||||
}
|
||||
|
||||
|
||||
// Deal Type Charts
|
||||
var dealTypeChartsColors = getChartColorsArray("deal-type-charts");
|
||||
if (dealTypeChartsColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Ethereum',
|
||||
data: [80, 50, 30, 40, 100, 20],
|
||||
},
|
||||
{
|
||||
name: 'Artwork Sold',
|
||||
data: [20, 30, 40, 80, 20, 80],
|
||||
},
|
||||
{
|
||||
name: 'Cancelation',
|
||||
data: [44, 76, 78, 13, 43, 10],
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 270,
|
||||
type: 'radar',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 1,
|
||||
left: 1,
|
||||
top: 1
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 2
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.2
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
fontWeight: 500,
|
||||
offsetX: 0,
|
||||
offsetY: -8,
|
||||
markers: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
radius: 6,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
vertical: 0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: dealTypeChartsColors,
|
||||
xaxis: {
|
||||
categories: ['2016', '2017', '2018', '2019', '2020', '2021']
|
||||
}
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#deal-type-charts"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Featured NFTs Artworks Slider
|
||||
var swiper = new Swiper(".marketplace-swiper", {
|
||||
loop: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 24,
|
||||
},
|
||||
1445: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 24,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// collection-slider
|
||||
var swiper = new Swiper(".collection-slider", {
|
||||
loop: true,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 10,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
});
|
||||
|
||||
//Popularity chart
|
||||
var barchartColors = getChartColorsArray("market-overview");
|
||||
if (barchartColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Like',
|
||||
data: [12.45, 16.2, 8.9, 11.42, 12.6, 18.1, 18.2, 14.16]
|
||||
}, {
|
||||
name: 'Share',
|
||||
data: [-11.45, -15.42, -7.9, -12.42, -12.6, -18.1, -18.2, -14.16]
|
||||
}],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 260,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
colors: "#000"
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '20%',
|
||||
borderRadius: [4, 4]
|
||||
},
|
||||
},
|
||||
colors: barchartColors,
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
textAnchor: 'top',
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: function (y) {
|
||||
return y.toFixed(0) + "%";
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
||||
labels: {
|
||||
rotate: -90
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#market-overview"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
|
||||
// Basic Line Charts
|
||||
var linechartBasicColors = getChartColorsArray("line_chart_basic");
|
||||
if (linechartBasicColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Artwork",
|
||||
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
|
||||
},
|
||||
{
|
||||
name: "Auction",
|
||||
data: [40, 120, 83, 45, 31, 74, 35, 34, 78]
|
||||
},
|
||||
{
|
||||
name: "Creators",
|
||||
data: [95, 35, 20, 130, 64, 22, 43, 45, 31]
|
||||
}],
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 3
|
||||
},
|
||||
colors: linechartBasicColors,
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#line_chart_basic"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
|
||||
|
||||
//creators-by-locations world map with markers
|
||||
var vectorMapWorldMarkersColors = getChartColorsArray("creators-by-locations");
|
||||
if (vectorMapWorldMarkersColors) {
|
||||
var worldemapmarkers = new jsVectorMap({
|
||||
map: "world_merc",
|
||||
selector: "#creators-by-locations",
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
selectedMarkers: [0, 5],
|
||||
regionStyle: {
|
||||
initial: {
|
||||
stroke: "#9599ad",
|
||||
strokeWidth: 0.25,
|
||||
fill: vectorMapWorldMarkersColors[0],
|
||||
fillOpacity: 1,
|
||||
},
|
||||
},
|
||||
markersSelectable: true,
|
||||
markers: [{
|
||||
name: "United States",
|
||||
coords: [37.0902, 95.7129],
|
||||
style: {
|
||||
image: "assets/images/flags/us.svg",
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Russia",
|
||||
coords: [61.524, 105.3188],
|
||||
style: {
|
||||
image: "assets/images/flags/russia.svg",
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Spain",
|
||||
coords: [40.4637, 3.7492],
|
||||
style: {
|
||||
image: "assets/images/flags/spain.svg",
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Italy",
|
||||
coords: [41.8719, 12.5674],
|
||||
style: {
|
||||
image: "assets/images/flags/italy.svg",
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "Germany",
|
||||
coords: [51.1657, 10.4515],
|
||||
style: {
|
||||
image: "assets/images/flags/germany.svg",
|
||||
}
|
||||
},
|
||||
],
|
||||
markerStyle: {
|
||||
initial: {
|
||||
|
||||
fill: vectorMapWorldMarkersColors[1],
|
||||
},
|
||||
selected: {
|
||||
fill: vectorMapWorldMarkersColors[2],
|
||||
},
|
||||
},
|
||||
labels: {
|
||||
markers: {
|
||||
render: function (marker) {
|
||||
return marker.name;
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
265
resources/js/pages/dashboard-projects.init.js
vendored
Executable file
265
resources/js/pages/dashboard-projects.init.js
vendored
Executable file
@@ -0,0 +1,265 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Project Dashboard init js
|
||||
*/
|
||||
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('data-colors Attribute not found on:', chartId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Projects Overview
|
||||
var linechartcustomerColors = getChartColorsArray("projects-overview-chart");
|
||||
if (linechartcustomerColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Number of Projects',
|
||||
type: 'bar',
|
||||
data: [34, 65, 46, 68, 49, 61, 42, 44, 78, 52, 63, 67]
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
type: 'area',
|
||||
data: [89.25, 98.58, 68.74, 108.87, 77.54, 84.03, 51.24, 28.57, 92.57, 42.36, 88.51, 36.57]
|
||||
}, {
|
||||
name: 'Active Projects',
|
||||
type: 'bar',
|
||||
data: [8, 12, 7, 17, 21, 11, 5, 9, 7, 29, 12, 35]
|
||||
}],
|
||||
chart: {
|
||||
height: 374,
|
||||
type: 'line',
|
||||
toolbar: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
dashArray: [0, 3, 0],
|
||||
width: [0, 1, 0],
|
||||
},
|
||||
fill: {
|
||||
opacity: [1, 0.1, 1]
|
||||
},
|
||||
markers: {
|
||||
size: [0, 4, 0],
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 4,
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
right: -2,
|
||||
bottom: 15,
|
||||
left: 10
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
horizontalAlign: 'center',
|
||||
offsetX: 0,
|
||||
offsetY: -5,
|
||||
markers: {
|
||||
width: 9,
|
||||
height: 9,
|
||||
radius: 6,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '30%',
|
||||
barHeight: '70%'
|
||||
}
|
||||
},
|
||||
colors: linechartcustomerColors,
|
||||
tooltip: {
|
||||
shared: true,
|
||||
y: [{
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0);
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}, {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return "$" + y.toFixed(2) + "k";
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}, {
|
||||
formatter: function (y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0);
|
||||
}
|
||||
return y;
|
||||
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#projects-overview-chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
//Radial chart data
|
||||
var isApexSeriesData = {};
|
||||
var isApexSeries = document.querySelectorAll("[data-chart-series]");
|
||||
if (isApexSeries) {
|
||||
Array.from(isApexSeries).forEach(function (element) {
|
||||
var isApexSeriesVal = element.attributes;
|
||||
if (isApexSeriesVal["data-chart-series"]) {
|
||||
isApexSeriesData.series = isApexSeriesVal["data-chart-series"].value.toString();
|
||||
var radialbarhartoneColors = getChartColorsArray(isApexSeriesVal["id"].value.toString());
|
||||
var options = {
|
||||
series: [isApexSeriesData.series],
|
||||
|
||||
chart: {
|
||||
type: 'radialBar',
|
||||
width: 36,
|
||||
height: 36,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
margin: 0,
|
||||
size: '50%'
|
||||
},
|
||||
track: {
|
||||
margin: 1
|
||||
},
|
||||
dataLabels: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
colors: radialbarhartoneColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#" + isApexSeriesVal["id"].value.toString()), options);
|
||||
chart.render();
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// Project Status charts
|
||||
var donutchartProjectsStatusColors = getChartColorsArray("prjects-status");
|
||||
if (donutchartProjectsStatusColors) {
|
||||
var options = {
|
||||
series: [125, 42, 58, 89],
|
||||
labels: ["Completed", "In Progress", "Yet to Start", "Cancelled"],
|
||||
chart: {
|
||||
type: "donut",
|
||||
height: 230,
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
size: 100,
|
||||
offsetX: 0,
|
||||
offsetY: 0,
|
||||
donut: {
|
||||
size: "90%",
|
||||
labels: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
stroke: {
|
||||
lineCap: "round",
|
||||
width: 0
|
||||
},
|
||||
colors: donutchartProjectsStatusColors,
|
||||
};
|
||||
var chart = new ApexCharts(document.querySelector("#prjects-status"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// chat
|
||||
var currentChatId = "users-chat";
|
||||
scrollToBottom(currentChatId);
|
||||
// // Scroll to Bottom
|
||||
function scrollToBottom(id) {
|
||||
setTimeout(function () {
|
||||
var simpleBar = (document.getElementById(id).querySelector("#chat-conversation .simplebar-content-wrapper")) ?
|
||||
document.getElementById(id).querySelector("#chat-conversation .simplebar-content-wrapper") : ''
|
||||
|
||||
var offsetHeight = document.getElementsByClassName("chat-conversation-list")[0] ?
|
||||
document.getElementById(id).getElementsByClassName("chat-conversation-list")[0].scrollHeight - window.innerHeight + 600 : 0;
|
||||
|
||||
if (offsetHeight)
|
||||
simpleBar.scrollTo({
|
||||
top: offsetHeight,
|
||||
behavior: "smooth"
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
110
resources/js/pages/datatables.init.js
vendored
Executable file
110
resources/js/pages/datatables.init.js
vendored
Executable file
@@ -0,0 +1,110 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: datatables init js
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#example',);
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#scroll-vertical', {
|
||||
"scrollY": "210px",
|
||||
"scrollCollapse": true,
|
||||
"paging": false
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#scroll-horizontal', {
|
||||
"scrollX": true
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#alternative-pagination', {
|
||||
"pagingType": "full_numbers"
|
||||
});
|
||||
});
|
||||
|
||||
$(document).ready(function() {
|
||||
var t = $('#add-rows').DataTable();
|
||||
var counter = 1;
|
||||
|
||||
$('#addRow').on( 'click', function () {
|
||||
t.row.add( [
|
||||
counter +'.1',
|
||||
counter +'.2',
|
||||
counter +'.3',
|
||||
counter +'.4',
|
||||
counter +'.5',
|
||||
counter +'.6',
|
||||
counter +'.7',
|
||||
counter +'.8',
|
||||
counter +'.9',
|
||||
counter +'.10',
|
||||
counter +'.11',
|
||||
counter +'.12'
|
||||
] ).draw( false );
|
||||
|
||||
counter++;
|
||||
} );
|
||||
|
||||
// Automatically add a first row of data
|
||||
$('#addRow').click();
|
||||
});
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
});
|
||||
|
||||
//fixed header
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#fixed-header', {
|
||||
"fixedHeader": true
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
//modal data datables
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#model-datatables', {
|
||||
responsive: {
|
||||
details: {
|
||||
display: $.fn.dataTable.Responsive.display.modal( {
|
||||
header: function ( row ) {
|
||||
var data = row.data();
|
||||
return 'Details for '+data[0]+' '+data[1];
|
||||
}
|
||||
} ),
|
||||
renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
|
||||
tableClass: 'table'
|
||||
} )
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
//buttons exmples
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#buttons-datatables', {
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'copy', 'csv', 'excel', 'print', 'pdf'
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
//buttons exmples
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
let table = new DataTable('#ajax-datatables', {
|
||||
"ajax": 'assets/json/datatable.json'
|
||||
});
|
||||
});
|
||||
1777
resources/js/pages/echarts.init.js
vendored
Executable file
1777
resources/js/pages/echarts.init.js
vendored
Executable file
File diff suppressed because it is too large
Load Diff
70
resources/js/pages/ecommerce-cart.init.js
vendored
Executable file
70
resources/js/pages/ecommerce-cart.init.js
vendored
Executable file
@@ -0,0 +1,70 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Ecommerce cart Js File
|
||||
*/
|
||||
|
||||
|
||||
var taxRate = 0.125;
|
||||
var shippingRate = 65.00;
|
||||
var discountRate = 0.15;
|
||||
|
||||
var currencySign = "$";
|
||||
|
||||
function recalculateCart() {
|
||||
|
||||
var subtotal = 0;
|
||||
|
||||
Array.from(document.getElementsByClassName("product")).forEach(function (item) {
|
||||
Array.from(item.getElementsByClassName('product-line-price')).forEach(function (e) {
|
||||
subtotal += parseFloat(e.innerHTML);
|
||||
});
|
||||
});
|
||||
|
||||
/* Calculate totals */
|
||||
var tax = subtotal * taxRate;
|
||||
var discount = subtotal * discountRate;
|
||||
|
||||
var shipping = (subtotal > 0 ? shippingRate : 0);
|
||||
var total = subtotal + tax + shipping - discount;
|
||||
|
||||
document.getElementById("cart-subtotal").innerHTML = currencySign + subtotal.toFixed(2);
|
||||
document.getElementById("cart-tax").innerHTML = currencySign + tax.toFixed(2);
|
||||
document.getElementById("cart-shipping").innerHTML = currencySign + shipping.toFixed(2);
|
||||
document.getElementById("cart-total").innerHTML = currencySign + total.toFixed(2);
|
||||
document.getElementById("cart-discount").innerHTML = "-" + currencySign + discount.toFixed(2);
|
||||
}
|
||||
|
||||
function updateQuantity(quantityInput) {
|
||||
var productRow = quantityInput.closest('.product');
|
||||
var price;
|
||||
if (productRow || productRow.getElementsByClassName('product-price'))
|
||||
Array.from(productRow.getElementsByClassName('product-price')).forEach(function (e) {
|
||||
price = parseFloat(e.innerHTML);
|
||||
});
|
||||
|
||||
if (quantityInput.previousElementSibling && quantityInput.previousElementSibling.classList.contains("product-quantity")) {
|
||||
var quantity = quantityInput.previousElementSibling.value;
|
||||
} else if (quantityInput.nextElementSibling && quantityInput.nextElementSibling.classList.contains("product-quantity")) {
|
||||
var quantity = quantityInput.nextElementSibling.value;
|
||||
}
|
||||
var linePrice = price * quantity;
|
||||
/* Update line price display and recalc cart totals */
|
||||
Array.from(productRow.getElementsByClassName('product-line-price')).forEach(function (e) {
|
||||
e.innerHTML = linePrice.toFixed(2);
|
||||
recalculateCart();
|
||||
});
|
||||
}
|
||||
|
||||
// Remove product from cart
|
||||
var removeProduct = document.getElementById('removeItemModal')
|
||||
if (removeProduct)
|
||||
removeProduct.addEventListener('show.bs.modal', function (e) {
|
||||
document.getElementById('remove-product').addEventListener('click', function (event) {
|
||||
e.relatedTarget.closest('.product').remove();
|
||||
document.getElementById("close-modal").click();
|
||||
recalculateCart();
|
||||
});
|
||||
});
|
||||
424
resources/js/pages/ecommerce-customer-list.init.js
vendored
Executable file
424
resources/js/pages/ecommerce-customer-list.init.js
vendored
Executable file
@@ -0,0 +1,424 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: ecommerce customer Js File
|
||||
*/
|
||||
|
||||
|
||||
// list js
|
||||
|
||||
var checkAll = document.getElementById("checkAll");
|
||||
if (checkAll) {
|
||||
checkAll.onclick = function () {
|
||||
var checkboxes = document.querySelectorAll('.form-check-all input[type="checkbox"]');
|
||||
if (checkAll.checked == true) {
|
||||
Array.from(checkboxes).forEach(function (checkbox) {
|
||||
checkbox.checked = true;
|
||||
checkbox.closest("tr").classList.add("table-active");
|
||||
});
|
||||
} else {
|
||||
Array.from(checkboxes).forEach(function (checkbox) {
|
||||
checkbox.checked = false;
|
||||
checkbox.closest("tr").classList.remove("table-active");
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var perPage = 8;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"id",
|
||||
"customer_name",
|
||||
"email",
|
||||
"date",
|
||||
"phone",
|
||||
"status",
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2
|
||||
})
|
||||
]
|
||||
};
|
||||
// Init list
|
||||
var customerList = new List("customerList", options).on("updated", function (list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
(document.querySelector(".pagination-prev.disabled")) ? document.querySelector(".pagination-prev.disabled").classList.remove("disabled"): '';
|
||||
(document.querySelector(".pagination-next.disabled")) ? document.querySelector(".pagination-next.disabled").classList.remove("disabled"): '';
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length == perPage) {
|
||||
document.querySelector(".pagination.listjs-pagination").firstElementChild.children[0].click()
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
const xhttp = new XMLHttpRequest();
|
||||
xhttp.onload = function () {
|
||||
var json_records = JSON.parse(this.responseText);
|
||||
Array.from(json_records).forEach(raw => {
|
||||
customerList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ'+raw.id+"</a>",
|
||||
customer_name: raw.customer_name,
|
||||
email: raw.email,
|
||||
date: raw.date,
|
||||
phone: raw.phone,
|
||||
status: isStatus(raw.status)
|
||||
});
|
||||
customerList.sort('id', { order: "desc" });
|
||||
refreshCallbacks();
|
||||
});
|
||||
customerList.remove("id", '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ2101</a>');
|
||||
}
|
||||
xhttp.open("GET", "assets/json/customer-list.json");
|
||||
xhttp.send();
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
customerList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
|
||||
var isValue = isCount.body.firstElementChild.innerHTML;
|
||||
|
||||
var idField = document.getElementById("id-field"),
|
||||
customerNameField = document.getElementById("customername-field"),
|
||||
emailField = document.getElementById("email-field"),
|
||||
dateField = document.getElementById("date-field"),
|
||||
phoneField = document.getElementById("phone-field"),
|
||||
statusField = document.getElementById("status-field"),
|
||||
addBtn = document.getElementById("add-btn"),
|
||||
editBtn = document.getElementById("edit-btn"),
|
||||
removeBtns = document.getElementsByClassName("remove-item-btn"),
|
||||
editBtns = document.getElementsByClassName("edit-item-btn");
|
||||
refreshCallbacks();
|
||||
|
||||
function filterContact(isValue) {
|
||||
var values_status = isValue;
|
||||
customerList.filter(function (data) {
|
||||
var statusFilter = false;
|
||||
matchData = new DOMParser().parseFromString(
|
||||
data.values().status,
|
||||
"text/html"
|
||||
);
|
||||
var status = matchData.body.firstElementChild.innerHTML;
|
||||
if (status == "All" || values_status == "All") {
|
||||
statusFilter = true;
|
||||
} else {
|
||||
statusFilter = status == values_status;
|
||||
}
|
||||
return statusFilter;
|
||||
});
|
||||
|
||||
customerList.update();
|
||||
}
|
||||
|
||||
function updateList() {
|
||||
var values_status = document.querySelector("input[name=status]:checked").value;
|
||||
|
||||
data = userList.filter(function (item) {
|
||||
var statusFilter = false;
|
||||
|
||||
if (values_status == "All") {
|
||||
statusFilter = true;
|
||||
} else {
|
||||
statusFilter = item.values().sts == values_status;
|
||||
}
|
||||
return statusFilter;
|
||||
});
|
||||
userList.update();
|
||||
}
|
||||
|
||||
document.getElementById("showModal").addEventListener("show.bs.modal", function (e) {
|
||||
if (e.relatedTarget.classList.contains("edit-item-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Customer";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("add-btn").style.display = "none";
|
||||
document.getElementById("edit-btn").style.display = "block";
|
||||
} else if (e.relatedTarget.classList.contains("add-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Add Customer";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("edit-btn").style.display = "none";
|
||||
document.getElementById("add-btn").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "List Customer";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "none";
|
||||
}
|
||||
});
|
||||
ischeckboxcheck();
|
||||
|
||||
document.getElementById("showModal").addEventListener("hidden.bs.modal", function () {
|
||||
clearFields();
|
||||
});
|
||||
|
||||
document.querySelector("#customerList").addEventListener("click", function () {
|
||||
refreshCallbacks();
|
||||
ischeckboxcheck();
|
||||
});
|
||||
|
||||
var table = document.getElementById("customerTable");
|
||||
// save all tr
|
||||
var tr = table.getElementsByTagName("tr");
|
||||
var trlist = table.querySelectorAll(".list tr");
|
||||
|
||||
function SearchData() {
|
||||
|
||||
var isstatus = document.getElementById("idStatus").value;
|
||||
var pickerVal = document.getElementById("datepicker-range").value;
|
||||
|
||||
var date1 = pickerVal.split(" to ")[0];
|
||||
var date2 = pickerVal.split(" to ")[1];
|
||||
|
||||
customerList.filter(function (data) {
|
||||
matchData = new DOMParser().parseFromString(data.values().status, 'text/html');
|
||||
var status = matchData.body.firstElementChild.innerHTML;
|
||||
var statusFilter = false;
|
||||
var dateFilter = false;
|
||||
|
||||
if (status == 'all' || isstatus == 'all') {
|
||||
statusFilter = true;
|
||||
} else {
|
||||
statusFilter = status == isstatus;
|
||||
}
|
||||
|
||||
if (new Date(data.values().date.slice(0, 12)) >= new Date(date1) && new Date(data.values().date.slice(0, 12)) <= new Date(date2)) {
|
||||
dateFilter = true;
|
||||
} else {
|
||||
dateFilter = false;
|
||||
}
|
||||
|
||||
if (statusFilter && dateFilter) {
|
||||
return statusFilter && dateFilter
|
||||
} else if (statusFilter && pickerVal == "") {
|
||||
return statusFilter
|
||||
} else if (dateFilter && pickerVal == "") {
|
||||
return dateFilter
|
||||
}
|
||||
});
|
||||
customerList.update();
|
||||
}
|
||||
|
||||
|
||||
var count = 11;
|
||||
addBtn.addEventListener("click", function (e) {
|
||||
if (customerNameField.value !== "" && emailField.value !== "" && dateField.value !== "" && phoneField.value !== "") {
|
||||
customerList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ'+count+"</a>",
|
||||
customer_name: customerNameField.value,
|
||||
email: emailField.value,
|
||||
date: dateField.value,
|
||||
phone: phoneField.value,
|
||||
status: isStatus(statusField.value),
|
||||
});
|
||||
customerList.sort('id', { order: "desc" });
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
refreshCallbacks();
|
||||
filterContact("All");
|
||||
count++;
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Customer inserted successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
editBtn.addEventListener("click", function (e) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Customer";
|
||||
var editValues = customerList.get({
|
||||
id: idField.value,
|
||||
});
|
||||
Array.from(editValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
x.values({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">'+idField.value+"</a>",
|
||||
customer_name: customerNameField.value,
|
||||
email: emailField.value,
|
||||
date: dateField.value,
|
||||
phone: phoneField.value,
|
||||
status: isStatus(statusField.value),
|
||||
});
|
||||
}
|
||||
});
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Customer updated Successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
});
|
||||
|
||||
var statusVal = new Choices(statusField);
|
||||
|
||||
function isStatus(val) {
|
||||
switch (val) {
|
||||
case "Active":
|
||||
return (
|
||||
'<span class="badge badge-soft-success text-uppercase">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Block":
|
||||
return (
|
||||
'<span class="badge badge-soft-danger text-uppercase">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function ischeckboxcheck() {
|
||||
Array.from(document.getElementsByName("checkAll")).forEach(function (x) {
|
||||
x.addEventListener("click", function (e) {
|
||||
if (e.target.checked) {
|
||||
e.target.closest("tr").classList.add("table-active");
|
||||
} else {
|
||||
e.target.closest("tr").classList.remove("table-active");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function refreshCallbacks() {
|
||||
Array.from(removeBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = customerList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
deleteid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
|
||||
var isElem = deleteid.body.firstElementChild;
|
||||
var isdeleteid = deleteid.body.firstElementChild.innerHTML;
|
||||
|
||||
if (isdeleteid == itemId) {
|
||||
document.getElementById("delete-record").addEventListener("click", function () {
|
||||
customerList.remove("id", isElem.outerHTML);
|
||||
document.getElementById("deleteRecord-close").click();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(editBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = customerList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
idField.value = selectedid;
|
||||
customerNameField.value = x._values.customer_name;
|
||||
emailField.value = x._values.email;
|
||||
dateField.value = x._values.date;
|
||||
phoneField.value = x._values.phone;
|
||||
|
||||
if (statusVal) statusVal.destroy();
|
||||
statusVal = new Choices(statusField, {
|
||||
searchEnabled: false
|
||||
});
|
||||
val = new DOMParser().parseFromString(x._values.status, "text/html");
|
||||
var statusSelec = val.body.firstElementChild.innerHTML;
|
||||
statusVal.setChoiceByValue(statusSelec);
|
||||
|
||||
flatpickr("#date-field", {
|
||||
enableTime: true,
|
||||
dateFormat: "d M, Y",
|
||||
defaultDate: x._values.date,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function clearFields() {
|
||||
customerNameField.value = "";
|
||||
emailField.value = "";
|
||||
dateField.value = "";
|
||||
phoneField.value = "";
|
||||
}
|
||||
|
||||
function deleteMultiple() {
|
||||
ids_array = [];
|
||||
var items = document.getElementsByName('chk_child');
|
||||
Array.from(items).forEach(function (ele) {
|
||||
if (ele.checked == true) {
|
||||
var trNode = ele.parentNode.parentNode.parentNode;
|
||||
var id = trNode.querySelector('.id a').innerHTML;
|
||||
ids_array.push(id);
|
||||
}
|
||||
});
|
||||
if (typeof ids_array !== 'undefined' && ids_array.length > 0) {
|
||||
if (confirm('Are you sure you want to delete this?')) {
|
||||
Array.from(ids_array).forEach(function (id) {
|
||||
customerList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">${id}</a>`);
|
||||
});
|
||||
document.getElementById('checkAll').checked = false;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Please select at least one checkbox',
|
||||
confirmButtonClass: 'btn btn-info',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelector(".pagination-next").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click(): '': '';
|
||||
});
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click(): '': '';
|
||||
});
|
||||
535
resources/js/pages/ecommerce-order.init.js
vendored
Executable file
535
resources/js/pages/ecommerce-order.init.js
vendored
Executable file
@@ -0,0 +1,535 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Ecommerce-order Init Js File
|
||||
*/
|
||||
|
||||
var str_dt = function formatDate(date) {
|
||||
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
var d = new Date(date),
|
||||
time_s = (d.getHours() + ':' + d.getMinutes());
|
||||
var t = time_s.split(":");
|
||||
var hours = t[0];
|
||||
var minutes = t[1];
|
||||
var newformat = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12;
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
month = '' + monthNames[(d.getMonth())],
|
||||
day = '' + d.getDate(),
|
||||
year = d.getFullYear();
|
||||
if (month.length < 2)
|
||||
month = '0' + month;
|
||||
if (day.length < 2)
|
||||
day = '0' + day;
|
||||
return [day + " " + month + "," + year + " <small class='text-muted'>" + hours + ':' + minutes + ' ' + newformat + "</small>"];
|
||||
};
|
||||
|
||||
var isChoiceEl = document.getElementById("idStatus");
|
||||
var choices = new Choices(isChoiceEl, {
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
var isPaymentEl = document.getElementById("idPayment");
|
||||
var choices = new Choices(isPaymentEl, {
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
var checkAll = document.getElementById("checkAll");
|
||||
if (checkAll) {
|
||||
checkAll.onclick = function() {
|
||||
var checkboxes = document.querySelectorAll('.form-check-all input[type="checkbox"]');
|
||||
if (checkAll.checked == true) {
|
||||
Array.from(checkboxes).forEach(function(checkbox) {
|
||||
checkbox.checked = true;
|
||||
checkbox.closest("tr").classList.add("table-active");
|
||||
});
|
||||
} else {
|
||||
Array.from(checkboxes).forEach(function(checkbox) {
|
||||
checkbox.checked = false;
|
||||
checkbox.closest("tr").classList.remove("table-active");
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
var perPage = 8;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"id",
|
||||
"customer_name",
|
||||
"product_name",
|
||||
"date",
|
||||
"amount",
|
||||
"payment",
|
||||
"status",
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2,
|
||||
}),
|
||||
],
|
||||
};
|
||||
// Init list
|
||||
var orderList = new List("orderList", options).on("updated", function(list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
document.querySelector(".pagination-prev.disabled") ?
|
||||
document.querySelector(".pagination-prev.disabled").classList.remove("disabled") : "";
|
||||
document.querySelector(".pagination-next.disabled") ?
|
||||
document.querySelector(".pagination-next.disabled").classList.remove("disabled") : "";
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length == perPage) {
|
||||
document.querySelector(".pagination.listjs-pagination").firstElementChild.children[0].click()
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
const xhttp = new XMLHttpRequest();
|
||||
xhttp.onload = function() {
|
||||
var json_records = JSON.parse(this.responseText);
|
||||
Array.from(json_records).forEach(function(element) {
|
||||
orderList.add({
|
||||
id: '<a href="apps-ecommerce-order-details" class="fw-medium link-primary">#VZ' + element.id + '</a>',
|
||||
customer_name: element.customer_name,
|
||||
product_name: element.product_name,
|
||||
date: str_dt(element.date),
|
||||
amount: element.amount,
|
||||
payment: element.payment,
|
||||
status: isStatus(element.status)
|
||||
});
|
||||
orderList.sort('id', { order: "desc" });
|
||||
refreshCallbacks();
|
||||
});
|
||||
orderList.remove("id", `<a href="apps-ecommerce-order-details" class="fw-medium link-primary">#VZ2101</a>`);
|
||||
}
|
||||
xhttp.open("GET", "assets/json/orders-list.init.json");
|
||||
xhttp.send();
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
orderList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
|
||||
var isValue = isCount.body.firstElementChild.innerHTML;
|
||||
|
||||
var idField = document.getElementById("orderId"),
|
||||
customerNameField = document.getElementById("customername-field"),
|
||||
productNameField = document.getElementById("productname-field"),
|
||||
dateField = document.getElementById("date-field"),
|
||||
amountField = document.getElementById("amount-field"),
|
||||
paymentField = document.getElementById("payment-field"),
|
||||
statusField = document.getElementById("delivered-status"),
|
||||
addBtn = document.getElementById("add-btn"),
|
||||
editBtn = document.getElementById("edit-btn"),
|
||||
removeBtns = document.getElementsByClassName("remove-item-btn"),
|
||||
editBtns = document.getElementsByClassName("edit-item-btn");
|
||||
refreshCallbacks();
|
||||
//filterOrder("All");
|
||||
|
||||
var tabEl = document.querySelectorAll('a[data-bs-toggle="tab"]');
|
||||
Array.from(tabEl).forEach(function(item) {
|
||||
item.addEventListener("shown.bs.tab", function(event) {
|
||||
filterOrder(event.target.id);
|
||||
});
|
||||
});
|
||||
|
||||
function filterOrder(isValue) {
|
||||
var values_status = isValue;
|
||||
orderList.filter(function(data) {
|
||||
var statusFilter = false;
|
||||
matchData = new DOMParser().parseFromString(
|
||||
data.values().status,
|
||||
"text/html"
|
||||
);
|
||||
var status = matchData.body.firstElementChild.innerHTML;
|
||||
if (status == "All" || values_status == "All") {
|
||||
statusFilter = true;
|
||||
} else {
|
||||
statusFilter = status == values_status;
|
||||
}
|
||||
return statusFilter;
|
||||
});
|
||||
|
||||
orderList.update();
|
||||
}
|
||||
|
||||
function updateList() {
|
||||
var values_status = document.querySelector("input[name=status]:checked").value;
|
||||
|
||||
data = userList.filter(function(item) {
|
||||
var statusFilter = false;
|
||||
|
||||
if (values_status == "All") {
|
||||
statusFilter = true;
|
||||
} else {
|
||||
statusFilter = item.values().sts == values_status;
|
||||
}
|
||||
return statusFilter;
|
||||
});
|
||||
userList.update();
|
||||
}
|
||||
|
||||
document.getElementById("showModal").addEventListener("show.bs.modal", function(e) {
|
||||
if (e.relatedTarget.classList.contains("edit-item-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Order";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("add-btn").style.display = "none";
|
||||
document.getElementById("edit-btn").style.display = "block";
|
||||
} else if (e.relatedTarget.classList.contains("add-btn")) {
|
||||
document.getElementById("modal-id").style.display = "none";
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Add Order";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("edit-btn").style.display = "none";
|
||||
document.getElementById("add-btn").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "List Order";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "none";
|
||||
}
|
||||
});
|
||||
ischeckboxcheck();
|
||||
|
||||
document.getElementById("showModal").addEventListener("hidden.bs.modal", function() {
|
||||
clearFields();
|
||||
});
|
||||
|
||||
document.querySelector("#orderList").addEventListener("click", function() {
|
||||
refreshCallbacks();
|
||||
ischeckboxcheck();
|
||||
});
|
||||
|
||||
var table = document.getElementById("orderTable");
|
||||
// save all tr
|
||||
var tr = table.getElementsByTagName("tr");
|
||||
var trlist = table.querySelectorAll(".list tr");
|
||||
|
||||
function SearchData() {
|
||||
var isstatus = document.getElementById("idStatus").value;
|
||||
var payment = document.getElementById("idPayment").value;
|
||||
var pickerVal = document.getElementById("demo-datepicker").value;
|
||||
|
||||
var date1 = pickerVal.split(" to ")[0];
|
||||
var date2 = pickerVal.split(" to ")[1];
|
||||
|
||||
orderList.filter(function(data) {
|
||||
matchData = new DOMParser().parseFromString(
|
||||
data.values().status,
|
||||
"text/html"
|
||||
);
|
||||
var status = matchData.body.firstElementChild.innerHTML;
|
||||
var statusFilter = false;
|
||||
var paymentFilter = false;
|
||||
var dateFilter = false;
|
||||
|
||||
if (status == "all" || isstatus == "all") {
|
||||
statusFilter = true;
|
||||
} else {
|
||||
statusFilter = status == isstatus;
|
||||
}
|
||||
|
||||
if (data.values().payment == "all" || payment == "all") {
|
||||
paymentFilter = true;
|
||||
} else {
|
||||
paymentFilter = data.values().payment == payment;
|
||||
}
|
||||
|
||||
if (
|
||||
new Date(data.values().date.slice(0, 12)) >= new Date(date1) &&
|
||||
new Date(data.values().date.slice(0, 12)) <= new Date(date2)
|
||||
) {
|
||||
dateFilter = true;
|
||||
} else {
|
||||
dateFilter = false;
|
||||
}
|
||||
|
||||
if (statusFilter && paymentFilter && dateFilter) {
|
||||
return statusFilter && paymentFilter && dateFilter;
|
||||
} else if (statusFilter && paymentFilter && pickerVal == "") {
|
||||
return statusFilter && paymentFilter;
|
||||
} else if (paymentFilter && dateFilter && pickerVal == "") {
|
||||
return paymentFilter && dateFilter;
|
||||
}
|
||||
});
|
||||
orderList.update();
|
||||
}
|
||||
|
||||
var count = 13;
|
||||
addBtn.addEventListener("click", function(e) {
|
||||
if (
|
||||
customerNameField.value !== "" &&
|
||||
productNameField.value !== "" &&
|
||||
dateField.value !== "" &&
|
||||
amountField.value !== "" &&
|
||||
paymentField.value !== ""
|
||||
) {
|
||||
orderList.add({
|
||||
id: '<a href="apps-ecommerce-order-details" class="fw-medium link-primary">#VZ' + count + "</a>",
|
||||
customer_name: customerNameField.value,
|
||||
product_name: productNameField.value,
|
||||
date: dateField.value,
|
||||
amount: "$" + amountField.value,
|
||||
payment: paymentField.value,
|
||||
status: isStatus(statusField.value),
|
||||
});
|
||||
orderList.sort('id', { order: "desc" });
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
refreshCallbacks();
|
||||
filterOrder("All");
|
||||
count++;
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Order inserted successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
editBtn.addEventListener("click", function(e) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Order";
|
||||
var editValues = orderList.get({
|
||||
id: idField.value,
|
||||
});
|
||||
Array.from(editValues).forEach(function(x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
x.values({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">' + idField.value + "</a>",
|
||||
customer_name: customerNameField.value,
|
||||
product_name: productNameField.value,
|
||||
date: dateField.value.slice(0, 14) + '<small class="text-muted">' + dateField.value.slice(14, 22),
|
||||
amount: amountField.value,
|
||||
payment: paymentField.value,
|
||||
status: isStatus(statusField.value),
|
||||
});
|
||||
}
|
||||
});
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Order updated Successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
});
|
||||
var example = new Choices(paymentField);
|
||||
var statusVal = new Choices(statusField);
|
||||
var productnameVal = new Choices(productNameField);
|
||||
|
||||
function isStatus(val) {
|
||||
switch (val) {
|
||||
case "Delivered":
|
||||
return (
|
||||
'<span class="badge badge-soft-success text-uppercase">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Cancelled":
|
||||
return (
|
||||
'<span class="badge badge-soft-danger text-uppercase">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Inprogress":
|
||||
return (
|
||||
'<span class="badge badge-soft-secondary text-uppercase">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Pickups":
|
||||
return (
|
||||
'<span class="badge badge-soft-info text-uppercase">' + val + "</span>"
|
||||
);
|
||||
case "Returns":
|
||||
return (
|
||||
'<span class="badge badge-soft-primary text-uppercase">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Pending":
|
||||
return (
|
||||
'<span class="badge badge-soft-warning text-uppercase">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function ischeckboxcheck() {
|
||||
Array.from(document.getElementsByName("checkAll")).forEach(function(x) {
|
||||
x.addEventListener("click", function(e) {
|
||||
if (e.target.checked) {
|
||||
e.target.closest("tr").classList.add("table-active");
|
||||
} else {
|
||||
e.target.closest("tr").classList.remove("table-active");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function refreshCallbacks() {
|
||||
Array.from(removeBtns).forEach(function(btn) {
|
||||
btn.addEventListener("click", function(e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = orderList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function(x) {
|
||||
deleteid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
|
||||
var isElem = deleteid.body.firstElementChild;
|
||||
var isdeleteid = deleteid.body.firstElementChild.innerHTML;
|
||||
|
||||
if (isdeleteid == itemId) {
|
||||
document.getElementById("delete-record").addEventListener("click", function() {
|
||||
orderList.remove("id", isElem.outerHTML);
|
||||
document.getElementById("deleteRecord-close").click();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(editBtns).forEach(function(btn) {
|
||||
btn.addEventListener("click", function(e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = orderList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function(x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
idField.value = selectedid;
|
||||
customerNameField.value = x._values.customer_name;
|
||||
productNameField.value = x._values.product_name;
|
||||
dateField.value = x._values.date;
|
||||
amountField.value = x._values.amount;
|
||||
|
||||
if (example) example.destroy();
|
||||
example = new Choices(paymentField, {
|
||||
searchEnabled: false
|
||||
});
|
||||
var selected = x._values.payment;
|
||||
example.setChoiceByValue(selected);
|
||||
|
||||
if (productnameVal) productnameVal.destroy();
|
||||
productnameVal = new Choices(productNameField, {
|
||||
searchEnabled: false,
|
||||
});
|
||||
var selectedproduct = x._values.product_name;
|
||||
productnameVal.setChoiceByValue(selectedproduct);
|
||||
|
||||
if (statusVal) statusVal.destroy();
|
||||
statusVal = new Choices(statusField, {
|
||||
searchEnabled: false
|
||||
});
|
||||
val = new DOMParser().parseFromString(x._values.status, "text/html");
|
||||
var statusSelec = val.body.firstElementChild.innerHTML;
|
||||
statusVal.setChoiceByValue(statusSelec);
|
||||
|
||||
flatpickr("#date-field", {
|
||||
enableTime: true,
|
||||
dateFormat: "d M, Y, h:i K",
|
||||
defaultDate: x._values.date,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function clearFields() {
|
||||
customerNameField.value = "";
|
||||
productNameField.value = "";
|
||||
dateField.value = "";
|
||||
amountField.value = "";
|
||||
paymentField.value = "";
|
||||
|
||||
if (example) example.destroy();
|
||||
example = new Choices(paymentField);
|
||||
|
||||
if (productnameVal) productnameVal.destroy();
|
||||
productnameVal = new Choices(productNameField);
|
||||
|
||||
if (statusVal) statusVal.destroy();
|
||||
statusVal = new Choices(statusField);
|
||||
}
|
||||
|
||||
document.querySelector(".pagination-next").addEventListener("click", function() {
|
||||
document.querySelector(".pagination.listjs-pagination") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click() : "" : "";
|
||||
});
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function() {
|
||||
document.querySelector(".pagination.listjs-pagination") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active") ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click() : "" : "";
|
||||
});
|
||||
|
||||
// Delete Multiple Records
|
||||
function deleteMultiple() {
|
||||
ids_array = [];
|
||||
var items = document.querySelectorAll('.form-check [value=option1]');
|
||||
Array.from(items).forEach(function(ele) {
|
||||
if (ele.checked == true) {
|
||||
var id_value = ele.parentNode.parentNode.parentNode;
|
||||
var id_get = id_value.querySelector("td a").innerHTML;
|
||||
ids_array.push(id_get);
|
||||
}
|
||||
});
|
||||
if (typeof ids_array !== 'undefined' && ids_array.length > 0) {
|
||||
if (confirm('Are you sure you want to delete this?')) {
|
||||
Array.from(ids_array).forEach(function(id) {
|
||||
orderList.remove("id", `<a href="apps-ecommerce-order-details" class="fw-medium link-primary">` + id + `</a>`);
|
||||
});
|
||||
document.getElementById("checkAll").checked = false;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Please select at least one checkbox',
|
||||
confirmButtonClass: 'btn btn-info',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
}
|
||||
88
resources/js/pages/ecommerce-product-checkout.init.js
vendored
Executable file
88
resources/js/pages/ecommerce-product-checkout.init.js
vendored
Executable file
@@ -0,0 +1,88 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Ecommerce product Js File
|
||||
*/
|
||||
|
||||
|
||||
// Chocies Select plugin
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var genericExamples = document.querySelectorAll('[data-plugin="choices"]');
|
||||
if (genericExamples) {
|
||||
Array.from(genericExamples).forEach(function (genericExamp) {
|
||||
var element = genericExamp;
|
||||
new Choices(element, {
|
||||
placeholderValue: 'This is a placeholder set in the config',
|
||||
searchPlaceholderValue: 'Search results here',
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Checkout nav tab
|
||||
var CheckoutTab = document.querySelectorAll(".checkout-tab");
|
||||
if (CheckoutTab) {
|
||||
Array.from(document.querySelectorAll(".checkout-tab")).forEach(function (form) {
|
||||
|
||||
// next tab
|
||||
var NextTab = form.querySelectorAll(".nexttab");
|
||||
if (NextTab) {
|
||||
Array.from(form.querySelectorAll(".nexttab")).forEach(function (nextButton) {
|
||||
var tabEl = form.querySelectorAll('button[data-bs-toggle="pill"]');
|
||||
if (tabEl) {
|
||||
Array.from(tabEl).forEach(function (item) {
|
||||
item.addEventListener('show.bs.tab', function (event) {
|
||||
event.target.classList.add('done');
|
||||
});
|
||||
});
|
||||
nextButton.addEventListener("click", function () {
|
||||
var nextTab = nextButton.getAttribute('data-nexttab');
|
||||
if (nextTab) {
|
||||
document.getElementById(nextTab).click();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
//Pervies tab
|
||||
var previesTab = document.querySelectorAll(".previestab");
|
||||
if (previesTab) {
|
||||
Array.from(form.querySelectorAll(".previestab")).forEach(function (prevButton) {
|
||||
|
||||
prevButton.addEventListener("click", function () {
|
||||
var prevTab = prevButton.getAttribute('data-previous');
|
||||
if (prevTab) {
|
||||
var totalDone = prevButton.closest("form").querySelectorAll(".custom-nav .done").length;
|
||||
if (totalDone) {
|
||||
for (var i = totalDone - 1; i < totalDone; i++) {
|
||||
(prevButton.closest("form").querySelectorAll(".custom-nav .done")[i]) ? prevButton.closest("form").querySelectorAll(".custom-nav .done")[i].classList.remove('done'): '';
|
||||
}
|
||||
document.getElementById(prevTab).click();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Step number click
|
||||
var tabButtons = form.querySelectorAll('button[data-bs-toggle="pill"]');
|
||||
if (tabButtons) {
|
||||
Array.from(tabButtons).forEach(function (button, i) {
|
||||
button.setAttribute("data-position", i);
|
||||
button.addEventListener("click", function () {
|
||||
(form.querySelectorAll(".custom-nav .done").length > 0) ?
|
||||
Array.from(form.querySelectorAll(".custom-nav .done")).forEach(function (doneTab) {
|
||||
doneTab.classList.remove('done');
|
||||
}): '';
|
||||
for (var j = 0; j <= i; j++) {
|
||||
tabButtons[j].classList.contains('active') ? tabButtons[j].classList.remove('done') : tabButtons[j].classList.add('done');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
187
resources/js/pages/ecommerce-product-create.init.js
vendored
Executable file
187
resources/js/pages/ecommerce-product-create.init.js
vendored
Executable file
@@ -0,0 +1,187 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Ecommerce product create Js File
|
||||
*/
|
||||
|
||||
// ckeditor
|
||||
itemid = 13;
|
||||
ClassicEditor
|
||||
.create(document.querySelector('#ckeditor-classic'))
|
||||
.then(function (editor) {
|
||||
editor.ui.view.editable.element.style.height = '200px';
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
// Dropzone
|
||||
var dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
|
||||
dropzonePreviewNode.itemid = "";
|
||||
var previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);
|
||||
var dropzone = new Dropzone(".dropzone", {
|
||||
url: 'https://httpbin.org/post',
|
||||
method: "post",
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
});
|
||||
|
||||
// Form Event
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
var forms = document.querySelectorAll('.needs-validation')
|
||||
|
||||
// date & time
|
||||
var date = new Date().toUTCString().slice(5, 16);
|
||||
function currentTime() {
|
||||
var ampm = new Date().getHours() >= 12 ? "PM" : "AM";
|
||||
var hour =
|
||||
new Date().getHours() > 12
|
||||
? new Date().getHours() % 12
|
||||
: new Date().getHours();
|
||||
var minute =
|
||||
new Date().getMinutes() < 10
|
||||
? "0" + new Date().getMinutes()
|
||||
: new Date().getMinutes();
|
||||
if (hour < 10) {
|
||||
return "0" + hour + ":" + minute + " " + ampm;
|
||||
} else {
|
||||
return hour + ":" + minute + " " + ampm;
|
||||
}
|
||||
}
|
||||
setInterval(currentTime, 1000);
|
||||
|
||||
// product image
|
||||
document.querySelector("#product-image-input").addEventListener("change", function () {
|
||||
var preview = document.querySelector("#product-img");
|
||||
var file = document.querySelector("#product-image-input").files[0];
|
||||
var reader = new FileReader();
|
||||
reader.addEventListener("load",function () {
|
||||
preview.src = reader.result;
|
||||
},false);
|
||||
if (file) {
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// choices category input
|
||||
var prdoctCategoryInput = new Choices('#choices-category-input', {
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
var editinputValueJson = sessionStorage.getItem('editInputValue');
|
||||
if (editinputValueJson) {
|
||||
var editinputValueJson = JSON.parse(editinputValueJson);
|
||||
document.getElementById("formAction").value = "edit";
|
||||
document.getElementById("product-id-input").value = editinputValueJson.id;
|
||||
document.getElementById("product-img").src = editinputValueJson.product.img;
|
||||
document.getElementById("product-title-input").value = editinputValueJson.product.title;
|
||||
document.getElementById("stocks-input").value = editinputValueJson.stock;
|
||||
document.getElementById("product-price-input").value = editinputValueJson.price;
|
||||
document.getElementById("orders-input").value = editinputValueJson.orders;
|
||||
prdoctCategoryInput.setChoiceByValue(editinputValueJson.product.category);
|
||||
}
|
||||
|
||||
|
||||
// Loop over them and prevent submission
|
||||
Array.prototype.slice.call(forms)
|
||||
.forEach(function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
event.preventDefault();
|
||||
|
||||
itemid++;
|
||||
var productItemID = itemid;
|
||||
var productTitleValue = document.getElementById("product-title-input").value;
|
||||
var prdoctCategoryValue = prdoctCategoryInput.getValue(true);
|
||||
var stockInputValue = document.getElementById("stocks-input").value;
|
||||
var orderValue = document.getElementById("orders-input").value;
|
||||
var productPriceValue = document.getElementById("product-price-input").value;
|
||||
var productImageValue = document.getElementById("product-img").src;
|
||||
|
||||
var formAction = document.getElementById("formAction").value;
|
||||
if (formAction == "add") {
|
||||
if (sessionStorage.getItem('inputValue') != null) {
|
||||
var inputValueJson = JSON.parse(sessionStorage.getItem('inputValue'));
|
||||
var newObj = {
|
||||
"id": productItemID+1,
|
||||
"product": {
|
||||
"img": productImageValue,
|
||||
"title": productTitleValue,
|
||||
"category": prdoctCategoryValue
|
||||
},
|
||||
"stock": stockInputValue,
|
||||
"price": productPriceValue,
|
||||
"orders": orderValue,
|
||||
"rating": "--",
|
||||
"published": {
|
||||
"publishDate": date,
|
||||
"publishTime": currentTime()
|
||||
}
|
||||
};
|
||||
inputValueJson.push(newObj);
|
||||
sessionStorage.setItem('inputValue', JSON.stringify(inputValueJson));
|
||||
} else {
|
||||
var inputValueJson = [];
|
||||
var newObj = {
|
||||
"id": productItemID,
|
||||
"product": {
|
||||
"img": productImageValue,
|
||||
"title": productTitleValue,
|
||||
"category": prdoctCategoryValue
|
||||
},
|
||||
"stock": stockInputValue,
|
||||
"price": productPriceValue,
|
||||
"orders": orderValue,
|
||||
"rating": "--",
|
||||
"published": {
|
||||
"publishDate": date,
|
||||
"publishTime": currentTime()
|
||||
}
|
||||
};
|
||||
inputValueJson.push(newObj);
|
||||
sessionStorage.setItem('inputValue', JSON.stringify(inputValueJson));
|
||||
}
|
||||
} else if (formAction == "edit") {
|
||||
var editproductId = document.getElementById("product-id-input").value;
|
||||
if (sessionStorage.getItem('editInputValue')) {
|
||||
var editObj = {
|
||||
"id": parseInt(editproductId),
|
||||
"product": {
|
||||
"img": productImageValue,
|
||||
"title": productTitleValue,
|
||||
"category": prdoctCategoryValue
|
||||
},
|
||||
"stock": stockInputValue,
|
||||
"price": productPriceValue,
|
||||
"orders": orderValue,
|
||||
"rating": editinputValueJson.rating,
|
||||
"published": {
|
||||
"publishDate": date,
|
||||
"publishTime": currentTime()
|
||||
}
|
||||
};
|
||||
sessionStorage.setItem('editInputValue', JSON.stringify(editObj));
|
||||
}
|
||||
} else {
|
||||
console.log('Form Action Not Found.');
|
||||
}
|
||||
window.location.replace("apps-ecommerce-products");
|
||||
return false;
|
||||
}
|
||||
|
||||
form.classList.add('was-validated');
|
||||
|
||||
}, false)
|
||||
})
|
||||
})();
|
||||
26
resources/js/pages/ecommerce-product-details.init.js
vendored
Executable file
26
resources/js/pages/ecommerce-product-details.init.js
vendored
Executable file
@@ -0,0 +1,26 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Ecommerce product Details Js File
|
||||
*/
|
||||
|
||||
var productNavSlider = new Swiper(".product-nav-slider", {
|
||||
loop: false,
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 4,
|
||||
freeMode: true,
|
||||
watchSlidesProgress: true,
|
||||
});
|
||||
var productThubnailSlider = new Swiper(".product-thumbnail-slider", {
|
||||
loop: false,
|
||||
spaceBetween: 24,
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: productNavSlider,
|
||||
},
|
||||
});
|
||||
773
resources/js/pages/ecommerce-product-list.init.js
vendored
Executable file
773
resources/js/pages/ecommerce-product-list.init.js
vendored
Executable file
@@ -0,0 +1,773 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Ecommerce product list Js File
|
||||
*/
|
||||
|
||||
// table-product-list-all
|
||||
var productListAllData = [
|
||||
{
|
||||
"id": 1,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-1.png",
|
||||
"title": "Half Sleeve Round Neck T-Shirts",
|
||||
"category": "Fashion"
|
||||
},
|
||||
"stock": "12",
|
||||
"price": "215.00",
|
||||
"orders": "48",
|
||||
"rating": "4.2",
|
||||
"published": {
|
||||
"publishDate": "12 Oct, 2021",
|
||||
"publishTime": "10:05 AM",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-2.png",
|
||||
"title": "Urban Ladder Pashe Chair",
|
||||
"category": "Furniture"
|
||||
},
|
||||
"stock": "06",
|
||||
"price": "160.00",
|
||||
"orders": "30",
|
||||
"rating": "4.3",
|
||||
"published": {
|
||||
"publishDate": "06 Jan, 2021",
|
||||
"publishTime": "01:31 PM",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-3.png",
|
||||
"title": "350 ml Glass Grocery Container",
|
||||
"category": "Grocery"
|
||||
},
|
||||
"stock": "10",
|
||||
"price": "125.00",
|
||||
"orders": "48",
|
||||
"rating": "4.5",
|
||||
"published": {
|
||||
"publishDate": "26 Mar, 2021",
|
||||
"publishTime": "11:40 AM",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-4.png",
|
||||
"title": "Fabric Dual Tone Living Room Chair",
|
||||
"category": "Furniture"
|
||||
},
|
||||
"stock": "15",
|
||||
"price": "340.00",
|
||||
"orders": "40",
|
||||
"rating": "4.2",
|
||||
"published": {
|
||||
"publishDate": "19 Apr, 2021",
|
||||
"publishTime": "02:51 PM",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-5.png",
|
||||
"title": "Crux Motorsports Helmet",
|
||||
"category": "Automotive Accessories"
|
||||
},
|
||||
"stock": "08",
|
||||
"price": "175.00",
|
||||
"orders": "55",
|
||||
"rating": "4.4",
|
||||
"published": {
|
||||
"publishDate": "30 Mar, 2021",
|
||||
"publishTime": "09:42 AM",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-6.png",
|
||||
"title": "Half Sleeve T-Shirts (Blue)",
|
||||
"category": "Fashion"
|
||||
},
|
||||
"stock": "15",
|
||||
"price": "225.00",
|
||||
"orders": "48",
|
||||
"rating": "4.2",
|
||||
"published": {
|
||||
"publishDate": "12 Oct, 2021",
|
||||
"publishTime": "04:55 PM",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-7.png",
|
||||
"title": "Noise Evolve Smartwatch",
|
||||
"category": "Watches"
|
||||
},
|
||||
"stock": "12",
|
||||
"price": "105.00",
|
||||
"orders": "45",
|
||||
"rating": "4.3",
|
||||
"published": {
|
||||
"publishDate": "15 May, 2021",
|
||||
"publishTime": "03:40 PM",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-8.png",
|
||||
"title": "Sweatshirt for Men (Pink)",
|
||||
"category": "Fashion"
|
||||
},
|
||||
"stock": "20",
|
||||
"price": "120.00",
|
||||
"orders": "48",
|
||||
"rating": "4.2",
|
||||
"published": {
|
||||
"publishDate": "21 Jun, 2021",
|
||||
"publishTime": "12:18 PM",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-9.png",
|
||||
"title": "Reusable Ecological Coffee Cup",
|
||||
"category": "Grocery"
|
||||
},
|
||||
"stock": "14",
|
||||
"price": "325.00",
|
||||
"orders": "55",
|
||||
"rating": "4.3",
|
||||
"published": {
|
||||
"publishDate": "15 Jan, 2021",
|
||||
"publishTime": "10:29 PM",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-10.png",
|
||||
"title": "Travel Carrying Pouch Bag",
|
||||
"category": "Kids"
|
||||
},
|
||||
"stock": "20",
|
||||
"price": "180.00",
|
||||
"orders": "60",
|
||||
"rating": "4.3",
|
||||
"published": {
|
||||
"publishDate": "15 Jun, 2021",
|
||||
"publishTime": "03:51 PM",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-1.png",
|
||||
"title": "Half Sleeve Round Neck T-Shirts",
|
||||
"category": "Fashion"
|
||||
},
|
||||
"stock": "12",
|
||||
"price": "215.00",
|
||||
"orders": "48",
|
||||
"rating": "4.2",
|
||||
"published": {
|
||||
"publishDate": "12 Oct, 2021",
|
||||
"publishTime": "10:05 AM",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-2.png",
|
||||
"title": "Urban Ladder Pashe Chair",
|
||||
"category": "Furniture"
|
||||
},
|
||||
"stock": "06",
|
||||
"price": "160.00",
|
||||
"orders": "30",
|
||||
"rating": "4.3",
|
||||
"published": {
|
||||
"publishDate": "06 Jan, 2021",
|
||||
"publishTime": "01:31 PM",
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
var inputValueJson = sessionStorage.getItem('inputValue');
|
||||
if (inputValueJson) {
|
||||
inputValueJson = JSON.parse(inputValueJson);
|
||||
Array.from(inputValueJson).forEach(element => {
|
||||
productListAllData.unshift(element);
|
||||
});
|
||||
}
|
||||
|
||||
var editinputValueJson = sessionStorage.getItem('editInputValue');
|
||||
if(editinputValueJson){
|
||||
editinputValueJson = JSON.parse(editinputValueJson);
|
||||
productListAllData = productListAllData.map(function (item) {
|
||||
if (item.id == editinputValueJson.id) {
|
||||
return editinputValueJson;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
}
|
||||
document.getElementById("addproduct-btn").addEventListener("click", function(){
|
||||
sessionStorage.setItem('editInputValue',"")
|
||||
})
|
||||
|
||||
var productListAll = new gridjs.Grid({
|
||||
columns:
|
||||
[
|
||||
{
|
||||
name: '#',
|
||||
width: '40px',
|
||||
sort: {
|
||||
enabled: false
|
||||
},
|
||||
data: (function (row) {
|
||||
return gridjs.html('<div class="form-check checkbox-product-list">\
|
||||
<input class="form-check-input" type="checkbox" value="'+ row.id + '" id="checkbox-' + row.id + '">\
|
||||
<label class="form-check-label" for="checkbox-'+ row.id + '"></label>\
|
||||
</div>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product',
|
||||
width: '360px',
|
||||
data: (function (row) {
|
||||
return gridjs.html('<div class="d-flex align-items-center">' +
|
||||
'<div class="flex-shrink-0 me-3">' +
|
||||
'<div class="avatar-sm bg-light rounded p-1"><img src="' + row.product.img + '" alt="" class="img-fluid d-block"></div>' +
|
||||
'</div>' +
|
||||
'<div class="flex-grow-1">' +
|
||||
'<h5 class="fs-14 mb-1"><a href="apps-ecommerce-product-details" class="text-dark">' + row.product.title + '</a></h5>' +
|
||||
'<p class="text-muted mb-0">Category : <span class="fw-medium">' + row.product.category + '</span></p>' +
|
||||
'</div>' +
|
||||
'</div>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Stock',
|
||||
width: '94px',
|
||||
},
|
||||
{
|
||||
name: 'Price',
|
||||
width: '101px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('$' + cell);
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Orders',
|
||||
width: '84px',
|
||||
},
|
||||
{
|
||||
name: 'Rating',
|
||||
width: '105px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<span class="badge bg-light text-body fs-12 fw-medium"><i class="mdi mdi-star text-warning me-1"></i>' + cell + '</span></td>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Published',
|
||||
width: '220px',
|
||||
data: (function (row) {
|
||||
return gridjs.html(row.published.publishDate + '<small class="text-muted ms-1">' + row.published.publishTime + '</small>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: "Action",
|
||||
width: '80px',
|
||||
sort: {
|
||||
enabled: false
|
||||
},
|
||||
formatter: (function (cell, row) {
|
||||
var x = new DOMParser().parseFromString(row._cells[0].data.props.content, "text/html").body.querySelector(".checkbox-product-list .form-check-input").value
|
||||
return gridjs.html('<div class="dropdown">' +
|
||||
'<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">' +
|
||||
'<i class="ri-more-fill"></i>' +
|
||||
'</button>' +
|
||||
'<ul class="dropdown-menu dropdown-menu-end">' +
|
||||
'<li><a class="dropdown-item" href="apps-ecommerce-product-details"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a></li>' +
|
||||
'<li><a class="dropdown-item edit-list" data-edit-id=' + x + ' href="apps-ecommerce-add-product"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>' +
|
||||
'<li class="dropdown-divider"></li>' +
|
||||
'<li><a class="dropdown-item remove-list" href="#" data-id=' + x + ' data-bs-toggle="modal" data-bs-target="#removeItemModal"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>' +
|
||||
'</ul>' +
|
||||
'</div>');
|
||||
})
|
||||
}
|
||||
],
|
||||
className: {
|
||||
th: 'text-muted',
|
||||
},
|
||||
pagination: {
|
||||
limit: 10
|
||||
},
|
||||
sort: true,
|
||||
data: productListAllData
|
||||
}).render(document.getElementById("table-product-list-all"));
|
||||
|
||||
// table-product-list-published
|
||||
var productListPublishedData = [
|
||||
{
|
||||
"id": 1,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-2.png",
|
||||
"title": "Urban Ladder Pashe Chair",
|
||||
"category": "Furniture"
|
||||
},
|
||||
"stock": "06",
|
||||
"price": "160.00",
|
||||
"orders": "30",
|
||||
"rating": "4.3",
|
||||
"published": {
|
||||
"publishDate": "06 Jan, 2021",
|
||||
"publishTime": "01:31 PM",
|
||||
}
|
||||
},{
|
||||
"id": 2,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-6.png",
|
||||
"title": "Half Sleeve T-Shirts (Blue)",
|
||||
"category": "Fashion"
|
||||
},
|
||||
"stock": "15",
|
||||
"price": "125.00",
|
||||
"orders": "48",
|
||||
"rating": "4.2",
|
||||
"published": {
|
||||
"publishDate": "12 Oct, 2021",
|
||||
"publishTime": "04:55 PM",
|
||||
}
|
||||
},{
|
||||
"id": 3,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-4.png",
|
||||
"title": "Fabric Dual Tone Living Room Chair",
|
||||
"category": "Furniture"
|
||||
},
|
||||
"stock": "15",
|
||||
"price": "140.00",
|
||||
"orders": "40",
|
||||
"rating": "4.2",
|
||||
"published": {
|
||||
"publishDate": "19 Apr, 2021",
|
||||
"publishTime": "02:51 PM",
|
||||
}
|
||||
},{
|
||||
"id": 4,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-4.png",
|
||||
"title": "350 ml Glass Grocery Container",
|
||||
"category": "Grocery"
|
||||
},
|
||||
"stock": "10",
|
||||
"price": "125.00",
|
||||
"orders": "48",
|
||||
"rating": "4.5",
|
||||
"published": {
|
||||
"publishDate": "26 Mar, 2021",
|
||||
"publishTime": "11:40 AM",
|
||||
}
|
||||
},{
|
||||
"id": 5,
|
||||
"product": {
|
||||
"img": "assets/images/products/img-5.png",
|
||||
"title": "Crux Motorsports Helmet",
|
||||
"category": "Automotive Accessories"
|
||||
},
|
||||
"stock": "08",
|
||||
"price": "135.00",
|
||||
"orders": "55",
|
||||
"rating": "4.4",
|
||||
"published": {
|
||||
"publishDate": "30 Mar, 2021",
|
||||
"publishTime": "09:42 AM",
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
var productListPublished = new gridjs.Grid({
|
||||
columns:
|
||||
[
|
||||
{
|
||||
name: '#',
|
||||
width: '40px',
|
||||
sort: {
|
||||
enabled: false
|
||||
},
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<div class="form-check checkbox-product-list">\
|
||||
<input class="form-check-input" type="checkbox" value="'+ cell + '" id="checkboxpublished-' + cell + '">\
|
||||
<label class="form-check-label" for="checkbox-'+ cell + '"></label>\
|
||||
</div>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Product',
|
||||
width: '360px',
|
||||
data: (function (row) {
|
||||
return gridjs.html('<div class="d-flex align-items-center">' +
|
||||
'<div class="flex-shrink-0 me-3">' +
|
||||
'<div class="avatar-sm bg-light rounded p-1"><img src="' + row.product.img + '" alt="" class="img-fluid d-block"></div>' +
|
||||
'</div>' +
|
||||
'<div class="flex-grow-1">' +
|
||||
'<h5 class="fs-14 mb-1"><a href="apps-ecommerce-product-details" class="text-dark">' + row.product.title + '</a></h5>' +
|
||||
'<p class="text-muted mb-0">Category : <span class="fw-medium">' + row.product.category + '</span></p>' +
|
||||
'</div>' +
|
||||
'</div>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Stock',
|
||||
width: '94px',
|
||||
},
|
||||
{
|
||||
name: 'Price',
|
||||
width: '101px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('$' + cell);
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Orders',
|
||||
width: '84px',
|
||||
},
|
||||
{
|
||||
name: 'Rating',
|
||||
width: '105px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<span class="badge bg-light text-body fs-12 fw-medium"><i class="mdi mdi-star text-warning me-1"></i>' + cell + '</span></td>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Published',
|
||||
width: '220px',
|
||||
data: (function (row) {
|
||||
return gridjs.html(row.published.publishDate + '<small class="text-muted ms-1">' + row.published.publishTime + '</small>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: "Action",
|
||||
width: '80px',
|
||||
sort: {
|
||||
enabled: false
|
||||
},
|
||||
formatter: (function (cell, row) {
|
||||
return gridjs.html('<div class="dropdown">' +
|
||||
'<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">' +
|
||||
'<i class="ri-more-fill"></i>' +
|
||||
'</button>' +
|
||||
'<ul class="dropdown-menu dropdown-menu-end">' +
|
||||
'<li><a class="dropdown-item" href="apps-ecommerce-product-details"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a></li>' +
|
||||
'<li><a class="dropdown-item" href="apps-ecommerce-add-product"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>' +
|
||||
'<li class="dropdown-divider"></li>' +
|
||||
'<li><a class="dropdown-item remove-list" href="#" data-id=' + row._cells[0].data + ' data-bs-toggle="modal" data-bs-target="#removeItemModal"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>' +
|
||||
'</ul>' +
|
||||
'</div>');
|
||||
})
|
||||
}
|
||||
],
|
||||
className: {
|
||||
th: 'text-muted',
|
||||
},
|
||||
pagination: {
|
||||
limit: 10
|
||||
},
|
||||
sort: true,
|
||||
data: productListPublishedData
|
||||
}).render(document.getElementById("table-product-list-published"));
|
||||
|
||||
|
||||
// Search product list
|
||||
var searchProductList = document.getElementById("searchProductList");
|
||||
searchProductList.addEventListener("keyup", function () {
|
||||
var inputVal = searchProductList.value.toLowerCase();
|
||||
function filterItems(arr, query) {
|
||||
return arr.filter(function (el) {
|
||||
return el.product.title.toLowerCase().indexOf(query.toLowerCase()) !== -1
|
||||
})
|
||||
}
|
||||
|
||||
var filterData = filterItems(productListAllData, inputVal);
|
||||
var filterPublishData = filterItems(productListPublishedData, inputVal);
|
||||
productListAll.updateConfig({
|
||||
data: filterData
|
||||
}).forceRender();
|
||||
|
||||
productListPublished.updateConfig({
|
||||
data: filterPublishData
|
||||
}).forceRender();
|
||||
checkRemoveItem();
|
||||
});
|
||||
|
||||
// mail list click event
|
||||
Array.from(document.querySelectorAll('.filter-list a')).forEach(function (filteritem) {
|
||||
filteritem.addEventListener("click", function () {
|
||||
var filterListItem = document.querySelector(".filter-list a.active");
|
||||
if (filterListItem) filterListItem.classList.remove("active");
|
||||
filteritem.classList.add('active');
|
||||
|
||||
var filterItemValue = filteritem.querySelector(".listname").innerHTML
|
||||
|
||||
var filterData = productListAllData.filter(filterlist => filterlist.product.category === filterItemValue);
|
||||
var filterPublishedData = productListPublishedData.filter(filterlist => filterlist.product.category === filterItemValue);
|
||||
|
||||
productListAll.updateConfig({
|
||||
data: filterData
|
||||
}).forceRender();
|
||||
|
||||
productListPublished.updateConfig({
|
||||
data: filterPublishedData
|
||||
}).forceRender();
|
||||
|
||||
checkRemoveItem();
|
||||
});
|
||||
})
|
||||
|
||||
// price range slider
|
||||
var slider = document.getElementById('product-price-range');
|
||||
|
||||
noUiSlider.create(slider, {
|
||||
start: [0, 2000], // Handle start position
|
||||
step: 10, // Slider moves in increments of '10'
|
||||
margin: 20, // Handles must be more than '20' apart
|
||||
connect: true, // Display a colored bar between the handles
|
||||
behaviour: 'tap-drag', // Move handle on tap, bar is draggable
|
||||
range: { // Slider can select '0' to '100'
|
||||
'min': 0,
|
||||
'max': 2000
|
||||
},
|
||||
format: wNumb({ decimals: 0, prefix: '$ ' })
|
||||
});
|
||||
|
||||
var minCostInput = document.getElementById('minCost'),
|
||||
maxCostInput = document.getElementById('maxCost');
|
||||
|
||||
var filterDataAll = '';
|
||||
var filterDataPublished = '';
|
||||
|
||||
// When the slider value changes, update the input and span
|
||||
slider.noUiSlider.on('update', function (values, handle) {
|
||||
var productListupdatedAll = productListAllData;
|
||||
var productListupdatedPublished = productListPublishedData;
|
||||
if (handle) {
|
||||
maxCostInput.value = values[handle];
|
||||
|
||||
} else {
|
||||
minCostInput.value = values[handle];
|
||||
}
|
||||
|
||||
var maxvalue = maxCostInput.value.substr(2);
|
||||
var minvalue = minCostInput.value.substr(2);
|
||||
filterDataAll = productListupdatedAll.filter(
|
||||
product => parseFloat(product.price) >= minvalue && parseFloat(product.price) <= maxvalue
|
||||
);
|
||||
filterDataPublished = productListupdatedPublished.filter(
|
||||
product => parseFloat(product.price) >= minvalue && parseFloat(product.price) <= maxvalue
|
||||
);
|
||||
productListAll.updateConfig({
|
||||
data: filterDataAll
|
||||
}).forceRender();
|
||||
productListPublished.updateConfig({
|
||||
data: filterDataPublished
|
||||
}).forceRender();
|
||||
checkRemoveItem();
|
||||
});
|
||||
|
||||
|
||||
minCostInput.addEventListener('change', function () {
|
||||
slider.noUiSlider.set([null, this.value]);
|
||||
});
|
||||
|
||||
maxCostInput.addEventListener('change', function () {
|
||||
slider.noUiSlider.set([null, this.value]);
|
||||
});
|
||||
|
||||
// text inputs example
|
||||
var filterChoicesInput = new Choices(
|
||||
document.getElementById('filter-choices-input'),
|
||||
{
|
||||
addItems: true,
|
||||
delimiter: ',',
|
||||
editItems: true,
|
||||
maxItemCount: 10,
|
||||
removeItems: true,
|
||||
removeItemButton: true,
|
||||
}
|
||||
)
|
||||
|
||||
// sidebar filter check
|
||||
Array.from(document.querySelectorAll(".filter-accordion .accordion-item")).forEach(function (item) {
|
||||
var isFilterSelected = item.querySelectorAll(".filter-check .form-check .form-check-input:checked").length;
|
||||
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
|
||||
Array.from(item.querySelectorAll(".form-check .form-check-input")).forEach(function (subitem) {
|
||||
var checkElm = subitem.value;
|
||||
if (subitem.checked) {
|
||||
filterChoicesInput.setValue([checkElm]);
|
||||
}
|
||||
subitem.addEventListener("click", function (event) {
|
||||
if (subitem.checked) {
|
||||
isFilterSelected++;
|
||||
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
|
||||
(isFilterSelected > 0) ? item.querySelector(".filter-badge").style.display = 'block' : item.querySelector(".filter-badge").style.display = 'none';
|
||||
filterChoicesInput.setValue([checkElm]);
|
||||
|
||||
} else {
|
||||
filterChoicesInput.removeActiveItemsByValue(checkElm);
|
||||
}
|
||||
});
|
||||
filterChoicesInput.passedElement.element.addEventListener('removeItem', function (event) {
|
||||
if (event.detail.value == checkElm) {
|
||||
subitem.checked = false;
|
||||
isFilterSelected--;
|
||||
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
|
||||
(isFilterSelected > 0) ? item.querySelector(".filter-badge").style.display = 'block' : item.querySelector(".filter-badge").style.display = 'none';
|
||||
}
|
||||
}, false);
|
||||
// clearall
|
||||
document.getElementById("clearall").addEventListener("click", function () {
|
||||
subitem.checked = false;
|
||||
filterChoicesInput.removeActiveItemsByValue(checkElm);
|
||||
isFilterSelected = 0;
|
||||
item.querySelector(".filter-badge").innerHTML = isFilterSelected;
|
||||
(isFilterSelected > 0) ? item.querySelector(".filter-badge").style.display = 'block' : item.querySelector(".filter-badge").style.display = 'none';
|
||||
productListAll.updateConfig({
|
||||
data: productListAllData
|
||||
}).forceRender();
|
||||
|
||||
productListPublished.updateConfig({
|
||||
data: productListPublishedData
|
||||
}).forceRender();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Search Brands Options
|
||||
var searchBrandsOptions = document.getElementById("searchBrandsList");
|
||||
searchBrandsOptions.addEventListener("keyup", function () {
|
||||
var inputVal = searchBrandsOptions.value.toLowerCase();
|
||||
var searchItem = document.querySelectorAll("#flush-collapseBrands .form-check");
|
||||
Array.from(searchItem).forEach(function (elem) {
|
||||
var searchBrandsTxt = elem.getElementsByClassName("form-check-label")[0].innerText.toLowerCase();
|
||||
elem.style.display = searchBrandsTxt.includes(inputVal) ? "block" : "none";
|
||||
})
|
||||
});
|
||||
|
||||
// table select to remove
|
||||
// checkbox-wrapper
|
||||
var isSelected = 0;
|
||||
function checkRemoveItem() {
|
||||
var tabEl = document.querySelectorAll('a[data-bs-toggle="tab"]');
|
||||
Array.from(tabEl).forEach(function (el) {
|
||||
el.addEventListener('show.bs.tab', function (event) {
|
||||
isSelected = 0;
|
||||
document.getElementById("selection-element").style.display = 'none';
|
||||
});
|
||||
});
|
||||
setTimeout(function () {
|
||||
Array.from(document.querySelectorAll(".checkbox-product-list input")).forEach(function (item) {
|
||||
item.addEventListener('click', function (event) {
|
||||
if (event.target.checked == true) {
|
||||
event.target.closest('tr').classList.add("gridjs-tr-selected");
|
||||
} else {
|
||||
event.target.closest('tr').classList.remove("gridjs-tr-selected");
|
||||
}
|
||||
|
||||
var checkboxes = document.querySelectorAll('.checkbox-product-list input:checked');
|
||||
isSelected = checkboxes.length;
|
||||
|
||||
if (event.target.closest('tr').classList.contains("gridjs-tr-selected")) {
|
||||
document.getElementById("select-content").innerHTML = isSelected;
|
||||
(isSelected > 0) ? document.getElementById("selection-element").style.display = 'block' : document.getElementById("selection-element").style.display = 'none';
|
||||
} else {
|
||||
|
||||
document.getElementById("select-content").innerHTML = isSelected;
|
||||
(isSelected > 0) ? document.getElementById("selection-element").style.display = 'block' : document.getElementById("selection-element").style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
removeItems();
|
||||
removeSingleItem();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
|
||||
// check to remove item
|
||||
var checkboxes = document.querySelectorAll('.checkbox-wrapper-mail input');
|
||||
function removeItems() {
|
||||
var removeItem = document.getElementById('removeItemModal');
|
||||
removeItem.addEventListener('show.bs.modal', function (event) {
|
||||
isSelected = 0;
|
||||
document.getElementById("delete-product").addEventListener("click", function () {
|
||||
Array.from(document.querySelectorAll(".gridjs-table tr")).forEach(function (element) {
|
||||
var filtered = '';
|
||||
if (element.classList.contains("gridjs-tr-selected")) {
|
||||
var getid = element.querySelector('.form-check-input').value;
|
||||
function arrayRemove(arr, value) {
|
||||
return arr.filter(function (ele) {
|
||||
return ele.id != value;
|
||||
});
|
||||
}
|
||||
var filtered = arrayRemove(productListAllData, getid);
|
||||
var filteredPublished = arrayRemove(productListPublishedData, getid);
|
||||
productListAllData = filtered;
|
||||
productListPublishedData = filteredPublished;
|
||||
element.remove();
|
||||
}
|
||||
});
|
||||
document.getElementById("btn-close").click();
|
||||
if (document.getElementById("selection-element"))
|
||||
document.getElementById("selection-element").style.display = 'none';
|
||||
|
||||
checkboxes.checked = false;
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function removeSingleItem() {
|
||||
var getid = 0;
|
||||
Array.from(document.querySelectorAll(".remove-list")).forEach(function (item) {
|
||||
item.addEventListener('click', function (event) {
|
||||
getid = item.getAttribute('data-id');
|
||||
document.getElementById("delete-product").addEventListener("click", function () {
|
||||
function arrayRemove(arr, value) {
|
||||
return arr.filter(function (ele) {
|
||||
return ele.id != value;
|
||||
});
|
||||
}
|
||||
var filtered = arrayRemove(productListAllData, getid);
|
||||
var filteredPublished = arrayRemove(productListPublishedData, getid);
|
||||
productListAllData = filtered;
|
||||
productListPublishedData = filteredPublished;
|
||||
var element = item.closest(".gridjs-tr");
|
||||
element.remove();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var getEditid = 0;
|
||||
Array.from(document.querySelectorAll(".edit-list")).forEach(function (elem) {
|
||||
elem.addEventListener('click', function (event) {
|
||||
getEditid = elem.getAttribute('data-edit-id');
|
||||
|
||||
productListAllData = productListAllData.map(function (item) {
|
||||
if (item.id == getEditid) {
|
||||
|
||||
sessionStorage.setItem('editInputValue', JSON.stringify(item));
|
||||
}
|
||||
return item;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
573
resources/js/pages/file-manager.init.js
vendored
Executable file
573
resources/js/pages/file-manager.init.js
vendored
Executable file
@@ -0,0 +1,573 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: file-manager Js File
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Simple Donut Charts
|
||||
var chartDonutBasicColors = getChartColorsArray("simple_dount_chart");
|
||||
if (chartDonutBasicColors) {
|
||||
var options = {
|
||||
series: [27.01, 20.87, 33.54, 37.58],
|
||||
chart: {
|
||||
height: 330,
|
||||
type: 'donut',
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
labels: ["Documents", "Media", "Others", "Free Space"],
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
colors: chartDonutBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#simple_dount_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var url="assets/json/";
|
||||
var allFileList = '';
|
||||
var editFlag = false;
|
||||
|
||||
//mail list by json
|
||||
var getJSON = function (jsonurl, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", url + jsonurl, true);
|
||||
xhr.responseType = "json";
|
||||
xhr.onload = function () {
|
||||
var status = xhr.status;
|
||||
if (status === 200) {
|
||||
callback(null, xhr.response);
|
||||
} else {
|
||||
callback(status, xhr.response);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
};
|
||||
|
||||
// get json
|
||||
getJSON("filemanager-filelist.json", function (err, data) {
|
||||
if (err !== null) {
|
||||
console.log("Something went wrong: " + err);
|
||||
} else {
|
||||
allFileList = data;
|
||||
loadFileData(allFileList);
|
||||
}
|
||||
});
|
||||
|
||||
// load product data
|
||||
function loadFileData(datas) {
|
||||
document.querySelector("#file-list").innerHTML = '';
|
||||
Array.from(datas).forEach(function (fileData, index) {
|
||||
var fileIconElm
|
||||
if (fileData.fileName.includes(".")) {
|
||||
var fileIcon = fileData.fileName.split(".");
|
||||
function isStatus(val) {
|
||||
switch (val) {
|
||||
case "png":
|
||||
return (
|
||||
'<i class="ri-gallery-fill align-bottom text-success"></i>'
|
||||
);
|
||||
case "jpg":
|
||||
return (
|
||||
'<i class="ri-gallery-fill align-bottom text-success"></i>'
|
||||
);
|
||||
case "pdf":
|
||||
return (
|
||||
'<i class="ri-file-pdf-fill align-bottom text-danger"></i>'
|
||||
);
|
||||
case "docx":
|
||||
return (
|
||||
'<i class="ri-file-text-fill align-bottom text-secondary"></i>'
|
||||
);
|
||||
case "txt":
|
||||
return (
|
||||
'<i class="ri-file-text-fill align-bottom text-secondary"></i>'
|
||||
);
|
||||
default:
|
||||
return (
|
||||
'<i class="ri-file-text-fill align-bottom text-secondary"></i>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
fileIconElm = isStatus(fileIcon[1])
|
||||
} else {
|
||||
fileIconElm = '<i class="ri-folder-2-fill align-bottom text-warning"></i>'
|
||||
}
|
||||
|
||||
var checkStarred = fileData.starred ? "active" : "";
|
||||
|
||||
document.querySelector("#file-list").innerHTML +=
|
||||
'<tr>\
|
||||
<td>\
|
||||
<input class="form-control filelist-id" type="hidden" value="' + fileData.id + '" id="filelist-' + fileData.id + '">\
|
||||
<div class="d-flex align-items-center">\
|
||||
<div class="flex-shrink-0 fs-17 me-2 filelist-icon">'+ fileIconElm + '</div>\
|
||||
<div class="flex-grow-1 filelist-name">'+ fileData.fileName + '</div>\
|
||||
<div class="d-none filelist-type">'+ fileData.filetype + '</div>\
|
||||
</div>\
|
||||
</td>\
|
||||
<td>'+ fileData.fileItem + '</td>\
|
||||
<td class="filelist-size">'+ fileData.fileSize + '</td>\
|
||||
<td class="filelist-create">'+ fileData.date + '</td>\
|
||||
<td>\
|
||||
<div class="d-flex gap-3 justify-content-center">\
|
||||
<button type="button" class="btn btn-ghost-primary btn-icon btn-sm favourite-btn ' + checkStarred + '">\
|
||||
<i class="ri-star-fill fs-13 align-bottom"></i>\
|
||||
</button>\
|
||||
<div class="dropdown">\
|
||||
<button class="btn btn-light btn-icon btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">\
|
||||
<i class="ri-more-fill align-bottom"></i>\
|
||||
</button>\
|
||||
<ul class="dropdown-menu dropdown-menu-end">\
|
||||
<li><a class="dropdown-item viewfile-list" href="#">View</a></li>\
|
||||
<li><a class="dropdown-item edit-list" href="#createFileModal" data-bs-toggle="modal" data-edit-id='+ fileData.id + ' role="button">Rename</a></li>\
|
||||
<li class="dropdown-divider"></li>\
|
||||
<li><a class="dropdown-item remove-list" href="#removeFileItemModal" data-id='+ fileData.id + ' data-bs-toggle="modal" role="button">Delete</a></li>\
|
||||
</ul>\
|
||||
</div>\
|
||||
</div>\
|
||||
</td>\
|
||||
</tr>';
|
||||
|
||||
favouriteBtn();
|
||||
removeSingleItem();
|
||||
editFileList();
|
||||
fileDetailShow();
|
||||
});
|
||||
}
|
||||
|
||||
// favourite btn
|
||||
function favouriteBtn() {
|
||||
Array.from(document.querySelectorAll(".favourite-btn")).forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
if (item.classList.contains("active")) {
|
||||
item.classList.remove("active");
|
||||
} else {
|
||||
item.classList.add("active");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
favouriteBtn();
|
||||
|
||||
Array.from(document.querySelectorAll('.file-manager-menu a')).forEach(function (fileTab) {
|
||||
fileTab.addEventListener("click", function () {
|
||||
var folderListelm = document.querySelector(".file-manager-menu a.active");
|
||||
if (folderListelm) folderListelm.classList.remove("active");
|
||||
fileTab.classList.add('active');
|
||||
|
||||
var tabname = fileTab.querySelector('.file-list-link').innerHTML;
|
||||
document.getElementById("file-list").innerHTML = '';
|
||||
|
||||
if (tabname != 'My Drive'){
|
||||
document.getElementById("filetype-title").innerHTML = tabname;
|
||||
}else{
|
||||
document.getElementById("filetype-title").innerHTML = "Recent file";
|
||||
}
|
||||
|
||||
if (tabname != 'My Drive' && tabname != 'Important' && tabname != 'Recents') {
|
||||
var filterData = allFileList.filter(filelist => filelist.filetype === tabname);
|
||||
document.getElementById("folder-list").style.display = "none";
|
||||
} else if(tabname == "Important"){
|
||||
var filterData = allFileList.filter(filelist => filelist.starred == true);
|
||||
document.getElementById("folder-list").style.display = "none";
|
||||
} else {
|
||||
var filterData = allFileList;
|
||||
document.getElementById("folder-list").style.display = "block";
|
||||
}
|
||||
|
||||
if(tabname == 'Recents'){
|
||||
document.getElementById("folder-list").style.display = "none";
|
||||
}
|
||||
|
||||
loadFileData(filterData);
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
//Create a new folder
|
||||
var createFolderForms = document.querySelectorAll('.createfolder-form')
|
||||
Array.prototype.slice.call(createFolderForms).forEach(function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
event.preventDefault();
|
||||
var folderName = document.getElementById("foldername-input").value;
|
||||
var uniqueid = Math.floor(Math.random() * 100);
|
||||
folderlisthtml =
|
||||
'<div class="col-xxl-3 col-sm-6 folder-card">\
|
||||
<div class="card bg-light shadow-none" id="folder-'+ uniqueid + '">\
|
||||
<div class="card-body">\
|
||||
<div class="d-flex mb-1">\
|
||||
<div class="form-check form-check-danger mb-3 fs-15 flex-grow-1">\
|
||||
<input class="form-check-input" type="checkbox" value="" id="folderlistCheckbox_'+ uniqueid + '">\
|
||||
<label class="form-check-label" for="folderlistCheckbox_'+ uniqueid + '"></label>\
|
||||
</div>\
|
||||
<div class="dropdown">\
|
||||
<button class="btn btn-ghost-primary btn-icon btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">\
|
||||
<i class="ri-more-2-fill fs-16 align-bottom"></i>\
|
||||
</button>\
|
||||
<ul class="dropdown-menu dropdown-menu-end">\
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);">Open</a></li>\
|
||||
<li><a class="dropdown-item edit-folder-list" href="#createFolderModal" data-bs-toggle="modal" role="button">Rename</a></li>\
|
||||
<li><a class="dropdown-item" href="#removeFolderModal" data-bs-toggle="modal" role="button">Delete</a></li>\
|
||||
</ul>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="text-center">\
|
||||
<div class="mb-2">\
|
||||
<i class="ri-folder-2-fill align-bottom text-warning display-5"></i>\
|
||||
</div>\
|
||||
<h6 class="fs-15 folder-name">'+ folderName + '</h6>\
|
||||
</div>\
|
||||
<div class="hstack mt-4 text-muted">\
|
||||
<span class="me-auto"><b>0</b> Files</span>\
|
||||
<span><b>0</b>GB</span>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
|
||||
|
||||
if (folderName !== "" && !editFlag) {
|
||||
var folderListdata = document.getElementById("folderlist-data");
|
||||
folderListdata.insertAdjacentHTML("afterbegin", folderlisthtml);
|
||||
var addFolderClose = document.getElementById("addFolderBtn-close");
|
||||
addFolderClose.click();
|
||||
editFolderList();
|
||||
} else if (folderName !== "" && editFlag) {
|
||||
var getEditid = 0;
|
||||
getEditid = document.getElementById("folderid-input").value;
|
||||
document.getElementById(getEditid).querySelector('.folder-name').innerHTML = folderName
|
||||
var addFolderClose = document.getElementById("addFolderBtn-close");
|
||||
addFolderClose.click();
|
||||
editFlag = false;
|
||||
document.getElementById("addNewFolder").innerHTML = "Add Folder";
|
||||
document.getElementById("createFolderModalLabel").innerHTML = "Create Folder";
|
||||
document.getElementById("folderid-input").value = "";
|
||||
document.getElementById("foldername-input").value = "";
|
||||
}
|
||||
document.getElementById("folderid-input").value = "";
|
||||
document.getElementById("foldername-input").value = "";
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false)
|
||||
});
|
||||
|
||||
function editFolderList() {
|
||||
Array.from(document.querySelectorAll(".folder-card")).forEach(function (item) {
|
||||
Array.from(item.querySelectorAll(".edit-folder-list")).forEach(function (subitem) {
|
||||
subitem.addEventListener('click', function (event) {
|
||||
|
||||
var editid = item.querySelector(".card").getAttribute('id');
|
||||
var getEditid = editid.split("-")[1];
|
||||
var checkid = item.querySelector(".form-check .form-check-input").getAttribute('id')
|
||||
var getCheckid = checkid.split("_")[1];
|
||||
|
||||
if (getEditid == getCheckid) {
|
||||
editFlag = true;
|
||||
document.getElementById("addNewFolder").innerHTML = "Save";
|
||||
document.getElementById("createFolderModalLabel").innerHTML = "Folder Rename";
|
||||
document.getElementById("folderid-input").value = 'folder-' + getEditid;
|
||||
document.getElementById("foldername-input").value = item.querySelector(".folder-name").innerHTML;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
editFolderList();
|
||||
|
||||
// Remove folder from list
|
||||
var removeProduct = document.getElementById('removeFolderModal')
|
||||
if (removeProduct) {
|
||||
removeProduct.addEventListener('show.bs.modal', function (e) {
|
||||
document.getElementById('remove-folderList').addEventListener('click', function (event) {
|
||||
e.relatedTarget.closest('.folder-card').remove();
|
||||
document.getElementById("close-removeFoldermodal").click();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// date & time
|
||||
var date = new Date().toUTCString().slice(5, 16);
|
||||
|
||||
function editFileList() {
|
||||
var getEditid = 0;
|
||||
Array.from(document.querySelectorAll(".edit-list")).forEach(function (elem) {
|
||||
elem.addEventListener('click', function (event) {
|
||||
getEditid = elem.getAttribute('data-edit-id');
|
||||
|
||||
allFileList = allFileList.map(function (item) {
|
||||
if (item.id == getEditid) {
|
||||
editFlag = true;
|
||||
document.getElementById("addNewFile").innerHTML = "Save";
|
||||
document.getElementById("createFileModalLabel").innerHTML = "File Rename";
|
||||
document.getElementById("filename-input").value = item.fileName;
|
||||
document.getElementById("fileid-input").value = item.id;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Array.from(document.querySelectorAll(".createFile-modal")).forEach(function (elem) {
|
||||
elem.addEventListener('click', function (event) {
|
||||
document.getElementById("addNewFile").innerHTML = "Create";
|
||||
document.getElementById("createFileModalLabel").innerHTML = "Create File";
|
||||
document.getElementById("filename-input").value = "";
|
||||
document.getElementById("fileid-input").value = "";
|
||||
document.getElementById("createfile-form").classList.remove("was-validated");
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(document.querySelectorAll(".create-folder-modal")).forEach(function (elem) {
|
||||
elem.addEventListener('click', function (event) {
|
||||
document.getElementById("addNewFolder").innerHTML = "Add Folder";
|
||||
document.getElementById("createFolderModalLabel").innerHTML = "Create Folder";
|
||||
document.getElementById("folderid-input").value = "";
|
||||
document.getElementById("foldername-input").value = "";
|
||||
document.getElementById("createfolder-form").classList.remove("was-validated");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var createFileForms = document.querySelectorAll('.createfile-form')
|
||||
Array.prototype.slice.call(createFileForms).forEach(function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
event.preventDefault();
|
||||
|
||||
var fileName = document.getElementById("filename-input").value;
|
||||
var uniqueid = Math.floor(Math.random() * 100);
|
||||
|
||||
if (fileName !== "" && !editFlag) {
|
||||
var newObj = {
|
||||
"id": uniqueid,
|
||||
"fileName": fileName + ".txt",
|
||||
"filetype": "Documents",
|
||||
"fileItem": "01",
|
||||
"fileSize": "0 KB",
|
||||
"date": date,
|
||||
"starred": false
|
||||
};
|
||||
|
||||
allFileList.push(newObj);
|
||||
sortElementsById();
|
||||
document.getElementById("addFileBtn-close").click();
|
||||
} else if (fileName !== "" && editFlag) {
|
||||
var getEditid = 0;
|
||||
getEditid = document.getElementById("fileid-input").value;
|
||||
allFileList = allFileList.map(function (item) {
|
||||
if (item.id == getEditid) {
|
||||
var editObj = {
|
||||
"id": item.id,
|
||||
"fileName": document.getElementById("filename-input").value,
|
||||
"filetype": item.filetype,
|
||||
"fileItem": item.fileItem,
|
||||
"fileSize": item.fileSize,
|
||||
"date": item.date,
|
||||
"starred": item.starred,
|
||||
};
|
||||
return editObj;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
editFlag = false
|
||||
document.getElementById("addFileBtn-close").click();
|
||||
}
|
||||
|
||||
loadFileData(allFileList);
|
||||
|
||||
document.getElementById("addNewFile").innerHTML = "Create";
|
||||
document.getElementById("createFileModalLabel").innerHTML = "Create File";
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false)
|
||||
});
|
||||
|
||||
|
||||
function fetchIdFromObj(member) {
|
||||
return parseInt(member.id);
|
||||
}
|
||||
|
||||
function sortElementsById() {
|
||||
var manyfile = allFileList.sort(function (a, b) {
|
||||
var x = fetchIdFromObj(a);
|
||||
var y = fetchIdFromObj(b);
|
||||
|
||||
if (x > y) {
|
||||
return -1;
|
||||
}
|
||||
if (x < y) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
})
|
||||
loadFileData(manyfile);
|
||||
}
|
||||
|
||||
function removeSingleItem() {
|
||||
var getid = 0;
|
||||
Array.from(document.querySelectorAll(".remove-list")).forEach(function (item) {
|
||||
item.addEventListener('click', function (event) {
|
||||
getid = item.getAttribute('data-id');
|
||||
document.getElementById("remove-fileitem").addEventListener("click", function () {
|
||||
function arrayRemove(arr, value) {
|
||||
return arr.filter(function (ele) {
|
||||
return ele.id != value;
|
||||
});
|
||||
}
|
||||
var filtered = arrayRemove(allFileList, getid);
|
||||
|
||||
allFileList = filtered;
|
||||
|
||||
loadFileData(allFileList);
|
||||
document.getElementById("close-removefilemodal").click();
|
||||
document.getElementById("file-overview").style.display = "none";
|
||||
document.getElementById("folder-overview").style.display = "block";
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function fileDetailShow() {
|
||||
var bodyElement = document.getElementsByTagName('body')[0];
|
||||
Array.from(document.querySelectorAll(".close-btn-overview")).forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
bodyElement.classList.remove("file-detail-show");
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(document.querySelectorAll("#file-list tr")).forEach(function (item) {
|
||||
item.querySelector(".viewfile-list").addEventListener("click", function () {
|
||||
bodyElement.classList.add("file-detail-show");
|
||||
document.getElementById("file-overview").style.display = "block";
|
||||
document.getElementById("folder-overview").style.display = "none";
|
||||
|
||||
var filelistId = item.querySelector(".filelist-id").value;
|
||||
var filelistIcon = item.querySelector(".filelist-icon i").className;
|
||||
var filelistName = item.querySelector(".filelist-name").innerHTML;
|
||||
var filelistSize = item.querySelector(".filelist-size").innerHTML;
|
||||
var filelistCreate = item.querySelector(".filelist-create").innerHTML;
|
||||
var filelistType = item.querySelector(".filelist-type").innerHTML;
|
||||
|
||||
|
||||
document.querySelector("#file-overview .file-icon i").className = filelistIcon;
|
||||
Array.from(document.querySelectorAll("#file-overview .file-name")).forEach(function (elm) {
|
||||
elm.innerHTML = filelistName;
|
||||
});
|
||||
Array.from(document.querySelectorAll("#file-overview .file-size")).forEach(function (elm) {
|
||||
elm.innerHTML = filelistSize;
|
||||
});
|
||||
Array.from(document.querySelectorAll("#file-overview .create-date")).forEach(function (elm) {
|
||||
elm.innerHTML = filelistCreate;
|
||||
});
|
||||
document.querySelector("#file-overview .file-type").innerHTML = filelistType;
|
||||
|
||||
document.querySelector("#file-overview .remove-file-overview").setAttribute("data-remove-id", filelistId);
|
||||
if(item.querySelector(".favourite-btn").classList.contains("active")){
|
||||
document.querySelector("#file-overview .favourite-btn").classList.add("active");
|
||||
}else{
|
||||
document.querySelector("#file-overview .favourite-btn").classList.remove("active");
|
||||
}
|
||||
});
|
||||
});
|
||||
var isShowMenu = false;
|
||||
var emailMenuSidebar = document.getElementsByClassName('file-manager-sidebar');
|
||||
Array.from(document.querySelectorAll(".file-menu-btn")).forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
Array.from(emailMenuSidebar).forEach(function (elm) {
|
||||
elm.classList.add("menubar-show");
|
||||
isShowMenu = true;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('click', function (e) {
|
||||
if (document.querySelector(".file-manager-sidebar").classList.contains('menubar-show')) {
|
||||
if (!isShowMenu) {
|
||||
document.querySelector(".file-manager-sidebar").classList.remove("menubar-show");
|
||||
}
|
||||
isShowMenu = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removefileOverview() {
|
||||
var getid = 0;
|
||||
Array.from(document.querySelectorAll(".remove-file-overview")).forEach(function (item) {
|
||||
item.addEventListener('click', function (event) {
|
||||
getid = item.getAttribute('data-remove-id');
|
||||
document.getElementById("remove-fileitem").addEventListener("click", function () {
|
||||
var filtered = '';
|
||||
function arrayRemove(arr, value) {
|
||||
return arr.filter(function (ele) {
|
||||
return ele.id != value;
|
||||
});
|
||||
}
|
||||
filtered = arrayRemove(allFileList, getid);
|
||||
allFileList = filtered;
|
||||
loadFileData(allFileList);
|
||||
document.getElementById("close-removefilemodal").click();
|
||||
document.getElementsByTagName('body')[0].classList.remove("file-detail-show");
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
removefileOverview();
|
||||
|
||||
function windowResize() {
|
||||
var windowSize = document.documentElement.clientWidth;
|
||||
if (windowSize < 1400) {
|
||||
document.body.classList.remove("file-detail-show");
|
||||
} else {
|
||||
document.body.classList.add("file-detail-show");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
windowResize();
|
||||
window.addEventListener("resize", windowResize);
|
||||
|
||||
135
resources/js/pages/flag-input.init.js
vendored
Executable file
135
resources/js/pages/flag-input.init.js
vendored
Executable file
@@ -0,0 +1,135 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: flag input Js File
|
||||
*/
|
||||
(function () {
|
||||
("use strict");
|
||||
var url = "assets/json/";
|
||||
var countryListData = '';
|
||||
var getJSON = function (jsonurl, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", url + jsonurl, true);
|
||||
xhr.responseType = "json";
|
||||
xhr.onload = function () {
|
||||
var status = xhr.status;
|
||||
if (status === 200) {
|
||||
callback(null, xhr.response);
|
||||
} else {
|
||||
callback(status, xhr.response);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
};
|
||||
// get json
|
||||
getJSON("country-list.json", function (err, data) {
|
||||
if (err !== null) {
|
||||
console.log("Something went wrong: " + err);
|
||||
} else {
|
||||
countryListData = data;
|
||||
loadCountryListData(countryListData);
|
||||
}
|
||||
});
|
||||
function loadCountryListData(datas) {
|
||||
var mainArray = Array.from(document.querySelectorAll("[data-input-flag]"))
|
||||
var flags = '';
|
||||
var arr = Array.from(datas);
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
flags += '<li class="dropdown-item d-flex">\
|
||||
<div class="flex-shrink-0 me-2"><img src="'+ arr[index]['flagImg'] + '" alt="country flag" class="options-flagimg" height="20"></div>\
|
||||
<div class="flex-grow-1">\
|
||||
<div class="d-flex"><div class="country-name me-1">'+ arr[index]['countryName'] + '</div><span class="countrylist-codeno text-muted">' + arr[index]['countryCode'] + '</span></div>\
|
||||
</div>\
|
||||
</li>';
|
||||
}
|
||||
for (let i = 0; i < mainArray.length; i++) {
|
||||
mainArray[i].querySelector(".dropdown-menu-list").innerHTML = '';
|
||||
mainArray[i].querySelector(".dropdown-menu-list").innerHTML = flags;
|
||||
countryListClickEvent(mainArray[i]);
|
||||
}
|
||||
};
|
||||
function countryListClickEvent(item) {
|
||||
if (item.querySelector(".country-flagimg")) {
|
||||
var countryFlagImg = item.querySelector(".country-flagimg").getAttribute('src');
|
||||
}
|
||||
Array.from(item.querySelectorAll(".dropdown-menu li")).forEach(function (subitem) {
|
||||
var optionFlagImg = subitem.querySelector(".options-flagimg").getAttribute("src");
|
||||
subitem.addEventListener("click", function () {
|
||||
var optionCodeNo = subitem.querySelector(".countrylist-codeno").innerHTML;
|
||||
if (item.querySelector("button")) {
|
||||
item.querySelector("button img").setAttribute("src", optionFlagImg);
|
||||
if (item.querySelector("button span")) {
|
||||
item.querySelector("button span").innerHTML = optionCodeNo;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (countryFlagImg == optionFlagImg) {
|
||||
subitem.classList.add("active");
|
||||
}
|
||||
});
|
||||
// data option flag img with name
|
||||
Array.from(document.querySelectorAll("[data-option-flag-img-name]")).forEach(function (item) {
|
||||
var flagImg = getComputedStyle(item.querySelector(".flag-input")).backgroundImage;
|
||||
var countryFlagImg = flagImg.substring(
|
||||
flagImg.indexOf("/as") + 1,
|
||||
flagImg.lastIndexOf('"')
|
||||
);
|
||||
Array.from(item.querySelectorAll(".dropdown-menu li")).forEach(function (subitem) {
|
||||
var optionFlagImg = subitem.querySelector(".options-flagimg").getAttribute("src");
|
||||
subitem.addEventListener("click", function () {
|
||||
var optionCountryName = subitem.querySelector(".country-name").innerHTML;
|
||||
item.querySelector(".flag-input").style.backgroundImage = "url(" + optionFlagImg + ")";
|
||||
item.querySelector(".flag-input").value = optionCountryName;
|
||||
});
|
||||
if (countryFlagImg == optionFlagImg) {
|
||||
subitem.classList.add("active");
|
||||
item.querySelector(".flag-input").value = subitem.querySelector(".country-name").innerHTML;
|
||||
}
|
||||
});
|
||||
});
|
||||
// data option flag img with name
|
||||
Array.from(document.querySelectorAll("[data-option-flag-name]")).forEach(function (item) {
|
||||
var countryName = item.querySelector(".flag-input").value;
|
||||
Array.from(item.querySelectorAll(".dropdown-menu li")).forEach(function (subitem) {
|
||||
var optionCountryName = subitem.querySelector(".country-name").innerHTML;
|
||||
subitem.addEventListener("click", function () {
|
||||
item.querySelector(".flag-input").value = optionCountryName;
|
||||
});
|
||||
if (countryName == optionCountryName) {
|
||||
subitem.classList.add("active");
|
||||
item.querySelector(".flag-input").value = subitem.querySelector(".country-name").innerHTML;
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
//Search bar
|
||||
Array.from(document.querySelectorAll("[data-input-flag]")).forEach(function (item) {
|
||||
var searchInput = item.querySelector(".search-countryList");
|
||||
if (searchInput) {
|
||||
searchInput.addEventListener("keyup", function () {
|
||||
var inputVal = searchInput.value.toLowerCase();
|
||||
function filterItems(arr, query) {
|
||||
return arr.filter(function (el) {
|
||||
return (el.countryName.toLowerCase().indexOf(query.toLowerCase()) !== -1 || el.countryCode.indexOf(query) !== -1)
|
||||
})
|
||||
}
|
||||
var filterData = filterItems(countryListData, inputVal);
|
||||
setTimeout(function () {
|
||||
item.querySelector(".dropdown-menu-list").innerHTML = '';
|
||||
Array.from(filterData).forEach(function (listData) {
|
||||
item.querySelector(".dropdown-menu-list").innerHTML +=
|
||||
'<li class="dropdown-item d-flex">\
|
||||
<div class="flex-shrink-0 me-2"><img src="'+ listData.flagImg + '" alt="country flag" class="options-flagimg" height="20"></div>\
|
||||
<div class="flex-grow-1">\
|
||||
<div class="d-flex"><div class="country-name me-1">'+ listData.countryName + '</div><span class="countrylist-codeno text-muted">' + listData.countryCode + '</span></div>\
|
||||
</div>\
|
||||
</li>';
|
||||
});
|
||||
countryListClickEvent(item);
|
||||
}, 350);
|
||||
});
|
||||
};
|
||||
});
|
||||
})();
|
||||
102
resources/js/pages/form-advanced.init.js
vendored
Executable file
102
resources/js/pages/form-advanced.init.js
vendored
Executable file
@@ -0,0 +1,102 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form Advanced Js File
|
||||
*/
|
||||
|
||||
// multiselect
|
||||
|
||||
var multiSelectBasic = document.getElementById("multiselect-basic");
|
||||
if (multiSelectBasic) {
|
||||
multi(multiSelectBasic, {
|
||||
enable_search: false
|
||||
});
|
||||
}
|
||||
|
||||
var multiSelectHeader = document.getElementById("multiselect-header");
|
||||
if (multiSelectHeader) {
|
||||
multi(multiSelectHeader, {
|
||||
non_selected_header: "Cars",
|
||||
selected_header: "Favorite Cars"
|
||||
});
|
||||
}
|
||||
|
||||
var multiSelectOptGroup = document.getElementById("multiselect-optiongroup");
|
||||
if (multiSelectOptGroup) {
|
||||
multi(multiSelectOptGroup, {
|
||||
enable_search: true
|
||||
});
|
||||
}
|
||||
|
||||
// Autocomplete
|
||||
var autoCompleteFruit = new autoComplete({
|
||||
selector: "#autoCompleteFruit",
|
||||
placeHolder: "Search for Fruits...",
|
||||
data: {
|
||||
src: ["Apple", "Banana", "Blueberry", "Cherry", "Coconut", "Kiwi", "Lemon", "Lime", "Mango", "Orange"],
|
||||
cache: true
|
||||
},
|
||||
resultsList: {
|
||||
element: function element(list, data) {
|
||||
if (!data.results.length) {
|
||||
// Create "No Results" message element
|
||||
var message = document.createElement("div");
|
||||
// Add class to the created element
|
||||
message.setAttribute("class", "no_result");
|
||||
// Add message text content
|
||||
message.innerHTML = "<span>Found No Results for \"" + data.query + "\"</span>";
|
||||
// Append message element to the results list
|
||||
list.prepend(message);
|
||||
}
|
||||
},
|
||||
noResults: true
|
||||
},
|
||||
resultItem: {
|
||||
highlight: true
|
||||
},
|
||||
events: {
|
||||
input: {
|
||||
selection: function selection(event) {
|
||||
var selection = event.detail.selection.value;
|
||||
autoCompleteFruit.input.value = selection;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var autoCompleteCars = new autoComplete({
|
||||
selector: "#autoCompleteCars",
|
||||
placeHolder: "Search for Cars...",
|
||||
data: {
|
||||
src: ["Chevrolet", "Fiat", "Ford", "Honda", "Hyundai", "Hyundai", "Kia", "Mahindra", "Maruti", "Mitsubishi", "MG", "Nissan", "Renault", "Skoda", "Tata", "Toyato", "Volkswagen"],
|
||||
cache: true
|
||||
},
|
||||
resultsList: {
|
||||
element: function element(list, data) {
|
||||
if (!data.results.length) {
|
||||
// Create "No Results" message element
|
||||
var message = document.createElement("div");
|
||||
// Add class to the created element
|
||||
message.setAttribute("class", "no_result");
|
||||
// Add message text content
|
||||
message.innerHTML = "<span>Found No Results for \"" + data.query + "\"</span>";
|
||||
// Append message element to the results list
|
||||
list.prepend(message);
|
||||
}
|
||||
},
|
||||
noResults: true
|
||||
},
|
||||
resultItem: {
|
||||
highlight: true
|
||||
},
|
||||
events: {
|
||||
input: {
|
||||
selection: function selection(event) {
|
||||
var selection = event.detail.selection.value;
|
||||
autoCompleteCars.input.value = selection;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
86
resources/js/pages/form-editor.init.js
vendored
Executable file
86
resources/js/pages/form-editor.init.js
vendored
Executable file
@@ -0,0 +1,86 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form editor Js File
|
||||
*/
|
||||
|
||||
// ckeditor
|
||||
|
||||
var ckClassicEditor = document.querySelectorAll(".ckeditor-classic")
|
||||
if (ckClassicEditor) {
|
||||
Array.from(ckClassicEditor).forEach(function () {
|
||||
ClassicEditor
|
||||
.create(document.querySelector('.ckeditor-classic'))
|
||||
.then(function (editor) {
|
||||
editor.ui.view.editable.element.style.height = '200px';
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Snow theme
|
||||
var snowEditor = document.querySelectorAll(".snow-editor");
|
||||
if (snowEditor) {
|
||||
Array.from(snowEditor).forEach(function (item) {
|
||||
var snowEditorData = {};
|
||||
var issnowEditorVal = item.classList.contains("snow-editor");
|
||||
if (issnowEditorVal == true) {
|
||||
snowEditorData.theme = 'snow',
|
||||
snowEditorData.modules = {
|
||||
'toolbar': [
|
||||
[{
|
||||
'font': []
|
||||
}, {
|
||||
'size': []
|
||||
}],
|
||||
['bold', 'italic', 'underline', 'strike'],
|
||||
[{
|
||||
'color': []
|
||||
}, {
|
||||
'background': []
|
||||
}],
|
||||
[{
|
||||
'script': 'super'
|
||||
}, {
|
||||
'script': 'sub'
|
||||
}],
|
||||
[{
|
||||
'header': [false, 1, 2, 3, 4, 5, 6]
|
||||
}, 'blockquote', 'code-block'],
|
||||
[{
|
||||
'list': 'ordered'
|
||||
}, {
|
||||
'list': 'bullet'
|
||||
}, {
|
||||
'indent': '-1'
|
||||
}, {
|
||||
'indent': '+1'
|
||||
}],
|
||||
['direction', {
|
||||
'align': []
|
||||
}],
|
||||
['link', 'image', 'video'],
|
||||
['clean']
|
||||
]
|
||||
}
|
||||
}
|
||||
new Quill(item, snowEditorData);
|
||||
});
|
||||
}
|
||||
|
||||
//buuble theme
|
||||
var bubbleEditor = document.querySelectorAll(".bubble-editor")
|
||||
if (bubbleEditor) {
|
||||
Array.from(bubbleEditor).forEach(function (element) {
|
||||
var bubbleEditorData = {};
|
||||
var isbubbleEditorVal = element.classList.contains("bubble-editor");
|
||||
if (isbubbleEditorVal == true) {
|
||||
bubbleEditorData.theme = 'bubble'
|
||||
}
|
||||
new Quill(element, bubbleEditorData);
|
||||
});
|
||||
}
|
||||
58
resources/js/pages/form-file-upload.init.js
vendored
Executable file
58
resources/js/pages/form-file-upload.init.js
vendored
Executable file
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form file upload Js File
|
||||
*/
|
||||
|
||||
// Dropzone
|
||||
var dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
|
||||
dropzonePreviewNode.id = "";
|
||||
if(dropzonePreviewNode){
|
||||
var previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);
|
||||
var dropzone = new Dropzone(".dropzone", {
|
||||
url: 'https://httpbin.org/post',
|
||||
method: "post",
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
});
|
||||
}
|
||||
|
||||
// FilePond
|
||||
FilePond.registerPlugin(
|
||||
// encodes the file as base64 data
|
||||
FilePondPluginFileEncode,
|
||||
// validates the size of the file
|
||||
FilePondPluginFileValidateSize,
|
||||
// corrects mobile image orientation
|
||||
FilePondPluginImageExifOrientation,
|
||||
// previews dropped images
|
||||
FilePondPluginImagePreview
|
||||
);
|
||||
|
||||
var inputMultipleElements = document.querySelectorAll('input.filepond-input-multiple');
|
||||
if(inputMultipleElements){
|
||||
|
||||
// loop over input elements
|
||||
Array.from(inputMultipleElements).forEach(function (inputElement) {
|
||||
// create a FilePond instance at the input element location
|
||||
FilePond.create(inputElement);
|
||||
})
|
||||
|
||||
FilePond.create(
|
||||
document.querySelector('.filepond-input-circle'), {
|
||||
labelIdle: 'Drag & Drop your picture or <span class="filepond--label-action">Browse</span>',
|
||||
imagePreviewHeight: 170,
|
||||
imageCropAspectRatio: '1:1',
|
||||
imageResizeTargetWidth: 200,
|
||||
imageResizeTargetHeight: 200,
|
||||
stylePanelLayout: 'compact circle',
|
||||
styleLoadIndicatorPosition: 'center bottom',
|
||||
styleProgressIndicatorPosition: 'right bottom',
|
||||
styleButtonRemoveItemPosition: 'left bottom',
|
||||
styleButtonProcessItemPosition: 'right bottom',
|
||||
}
|
||||
);
|
||||
}
|
||||
48
resources/js/pages/form-input-spin.init.js
vendored
Executable file
48
resources/js/pages/form-input-spin.init.js
vendored
Executable file
@@ -0,0 +1,48 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form input spin Js File
|
||||
*/
|
||||
|
||||
// input spin
|
||||
isData();
|
||||
|
||||
function isData() {
|
||||
var plus = document.getElementsByClassName('plus');
|
||||
var minus = document.getElementsByClassName('minus');
|
||||
var product = document.getElementsByClassName("product");
|
||||
|
||||
if (plus) {
|
||||
Array.from(plus).forEach(function (e) {
|
||||
e.addEventListener('click', function (event) {
|
||||
// if(event.target.previousElementSibling.value )
|
||||
if (parseInt(e.previousElementSibling.value) < event.target.previousElementSibling.getAttribute('max')) {
|
||||
event.target.previousElementSibling.value++;
|
||||
if (product) {
|
||||
Array.from(product).forEach(function (x) {
|
||||
updateQuantity(event.target);
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (minus) {
|
||||
Array.from(minus).forEach(function (e) {
|
||||
e.addEventListener('click', function (event) {
|
||||
if (parseInt(e.nextElementSibling.value) > event.target.nextElementSibling.getAttribute('min')) {
|
||||
event.target.nextElementSibling.value--;
|
||||
if (product) {
|
||||
Array.from(product).forEach(function (x) {
|
||||
updateQuantity(event.target);
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
98
resources/js/pages/form-masks.init.js
vendored
Executable file
98
resources/js/pages/form-masks.init.js
vendored
Executable file
@@ -0,0 +1,98 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form masks Js File
|
||||
*/
|
||||
|
||||
if (document.querySelector(".cleave-phone")) {
|
||||
var cleaveBlocks = new Cleave('.cleave-phone', {
|
||||
prefix: '+',
|
||||
delimiters: ['(', ')', '-', '-', '-', '-'],
|
||||
blocks: [0, 3, 0, 2, 3, 2, 2]
|
||||
});
|
||||
}
|
||||
if (document.querySelector(".cleave-phone1")) {
|
||||
var cleaveBlocks = new Cleave('.cleave-phone1', {
|
||||
// prefix: '+',
|
||||
delimiters: ['+(', ')', '-', '-', '-', '-'],
|
||||
blocks: [0, 3, 0, 2, 3, 2, 2]
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector(".cleave-phone2")) {
|
||||
var cleaveBlocks = new Cleave('.cleave-phone2', {
|
||||
delimiters: ['+(', ')', '-', '-', '-', '-'],
|
||||
blocks: [0, 3, 0, 2, 3, 2, 2]
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (document.querySelector("#cleave-date")) {
|
||||
var cleaveDate = new Cleave('#cleave-date', {
|
||||
date: true,
|
||||
delimiter: '-',
|
||||
datePattern: ['d', 'm', 'Y']
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-date-format")) {
|
||||
var cleaveDateFormat = new Cleave('#cleave-date-format', {
|
||||
date: true,
|
||||
datePattern: ['m', 'y']
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-time")) {
|
||||
var cleaveTime = new Cleave('#cleave-time', {
|
||||
time: true,
|
||||
timePattern: ['h', 'm', 's']
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-time-format")) {
|
||||
var cleaveTimeFormat = new Cleave('#cleave-time-format', {
|
||||
time: true,
|
||||
timePattern: ['h', 'm']
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-numeral")) {
|
||||
var cleaveNumeral = new Cleave('#cleave-numeral', {
|
||||
numeral: true,
|
||||
numeralThousandsGroupStyle: 'thousand'
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-ccard")) {
|
||||
var cleaveBlocks = new Cleave('#cleave-ccard', {
|
||||
blocks: [4, 4, 4, 4],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-delimiter")) {
|
||||
var cleaveDelimiter = new Cleave('#cleave-delimiter', {
|
||||
delimiter: '·',
|
||||
blocks: [3, 3, 3],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-delimiters")) {
|
||||
var cleaveDelimiters = new Cleave('#cleave-delimiters', {
|
||||
delimiters: ['.', '.', '-'],
|
||||
blocks: [3, 3, 3, 2],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
|
||||
if (document.querySelector("#cleave-prefix")) {
|
||||
var cleavePrefix = new Cleave('#cleave-prefix', {
|
||||
prefix: 'PREFIX',
|
||||
delimiter: '-',
|
||||
blocks: [6, 4, 4, 4],
|
||||
uppercase: true
|
||||
});
|
||||
}
|
||||
272
resources/js/pages/form-pickers.init.js
vendored
Executable file
272
resources/js/pages/form-pickers.init.js
vendored
Executable file
@@ -0,0 +1,272 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form pickers Js File
|
||||
*/
|
||||
|
||||
// colorpickers
|
||||
|
||||
// classic color picker
|
||||
var classicPickrDemo = document.querySelectorAll(".classic-colorpicker");
|
||||
if (classicPickrDemo)
|
||||
Array.from(classicPickrDemo).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".classic-colorpicker",
|
||||
theme: "classic", // or 'monolith', or 'nano'
|
||||
default: "#405189",
|
||||
swatches: [
|
||||
"rgba(244, 67, 54, 1)",
|
||||
"rgba(233, 30, 99, 0.95)",
|
||||
"rgba(156, 39, 176, 0.9)",
|
||||
"rgba(103, 58, 183, 0.85)",
|
||||
"rgba(63, 81, 181, 0.8)",
|
||||
"rgba(33, 150, 243, 0.75)",
|
||||
"rgba(3, 169, 244, 0.7)",
|
||||
"rgba(0, 188, 212, 0.7)",
|
||||
"rgba(0, 150, 136, 0.75)",
|
||||
"rgba(76, 175, 80, 0.8)",
|
||||
"rgba(139, 195, 74, 0.85)",
|
||||
"rgba(205, 220, 57, 0.9)",
|
||||
"rgba(255, 235, 59, 0.95)",
|
||||
"rgba(255, 193, 7, 1)",
|
||||
],
|
||||
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
hsva: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// monolith color picker
|
||||
var monolithColorPickr = document.querySelectorAll(".monolith-colorpicker");
|
||||
if (monolithColorPickr)
|
||||
Array.from(monolithColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".monolith-colorpicker",
|
||||
theme: "monolith",
|
||||
default: "#0ab39c",
|
||||
swatches: [
|
||||
"rgba(244, 67, 54, 1)",
|
||||
"rgba(233, 30, 99, 0.95)",
|
||||
"rgba(156, 39, 176, 0.9)",
|
||||
"rgba(103, 58, 183, 0.85)",
|
||||
"rgba(63, 81, 181, 0.8)",
|
||||
"rgba(33, 150, 243, 0.75)",
|
||||
"rgba(3, 169, 244, 0.7)",
|
||||
],
|
||||
defaultRepresentation: "HEXA",
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
hex: false,
|
||||
rgba: false,
|
||||
hsva: false,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// nano color picker
|
||||
var nanoColorPickr = document.querySelectorAll(".nano-colorpicker");
|
||||
if (nanoColorPickr)
|
||||
Array.from(nanoColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".nano-colorpicker",
|
||||
theme: "nano",
|
||||
default: "#3577f1",
|
||||
swatches: [
|
||||
"rgba(244, 67, 54, 1)",
|
||||
"rgba(233, 30, 99, 0.95)",
|
||||
"rgba(156, 39, 176, 0.9)",
|
||||
"rgba(103, 58, 183, 0.85)",
|
||||
"rgba(63, 81, 181, 0.8)",
|
||||
"rgba(33, 150, 243, 0.75)",
|
||||
"rgba(3, 169, 244, 0.7)",
|
||||
],
|
||||
defaultRepresentation: "HEXA",
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
hex: false,
|
||||
rgba: false,
|
||||
hsva: false,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// demo color picker
|
||||
var demoColorPickr = document.querySelectorAll(".colorpicker-demo");
|
||||
if (demoColorPickr)
|
||||
Array.from(demoColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".colorpicker-demo",
|
||||
theme: "monolith",
|
||||
default: "#405189",
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// color picker opacity & hue
|
||||
var opacityHueColorPickr = document.querySelectorAll(".colorpicker-opacity-hue");
|
||||
if (opacityHueColorPickr)
|
||||
Array.from(opacityHueColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".colorpicker-opacity-hue",
|
||||
theme: "monolith",
|
||||
default: "#0ab39c",
|
||||
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// color picker swatches
|
||||
var swatcherColorPickr = document.querySelectorAll(".colorpicker-switch");
|
||||
if (swatcherColorPickr)
|
||||
Array.from(swatcherColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".colorpicker-switch",
|
||||
theme: "monolith",
|
||||
default: "#3577f1",
|
||||
swatches: [
|
||||
"rgba(244, 67, 54, 1)",
|
||||
"rgba(233, 30, 99, 0.95)",
|
||||
"rgba(156, 39, 176, 0.9)",
|
||||
"rgba(103, 58, 183, 0.85)",
|
||||
"rgba(63, 81, 181, 0.8)",
|
||||
"rgba(33, 150, 243, 0.75)",
|
||||
"rgba(3, 169, 244, 0.7)",
|
||||
],
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// color picker input
|
||||
var inputColorPickr = document.querySelectorAll(".colorpicker-input");
|
||||
if (inputColorPickr)
|
||||
Array.from(inputColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".colorpicker-input",
|
||||
theme: "monolith",
|
||||
default: "#f7b84b",
|
||||
swatches: [
|
||||
"rgba(244, 67, 54, 1)",
|
||||
"rgba(233, 30, 99, 0.95)",
|
||||
"rgba(156, 39, 176, 0.9)",
|
||||
"rgba(103, 58, 183, 0.85)",
|
||||
"rgba(63, 81, 181, 0.8)",
|
||||
"rgba(33, 150, 243, 0.75)",
|
||||
"rgba(3, 169, 244, 0.7)",
|
||||
],
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// color picker Format
|
||||
var formatColorPickr = document.querySelectorAll(".colorpicker-format");
|
||||
if (formatColorPickr)
|
||||
Array.from(formatColorPickr).forEach(function () {
|
||||
Pickr.create({
|
||||
el: ".colorpicker-format",
|
||||
theme: "monolith",
|
||||
default: "#f06548",
|
||||
swatches: [
|
||||
"rgba(244, 67, 54, 1)",
|
||||
"rgba(233, 30, 99, 0.95)",
|
||||
"rgba(156, 39, 176, 0.9)",
|
||||
"rgba(103, 58, 183, 0.85)",
|
||||
"rgba(63, 81, 181, 0.8)",
|
||||
"rgba(33, 150, 243, 0.75)",
|
||||
"rgba(3, 169, 244, 0.7)",
|
||||
],
|
||||
components: {
|
||||
// Main components
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
|
||||
// Input / output Options
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
hsva: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
27
resources/js/pages/form-validation.init.js
vendored
Executable file
27
resources/js/pages/form-validation.init.js
vendored
Executable file
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form validation Js File
|
||||
*/
|
||||
|
||||
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
||||
(function () {
|
||||
'use strict';
|
||||
window.addEventListener('load', function () {
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
// Loop over them and prevent submission
|
||||
if (forms)
|
||||
var validation = Array.prototype.filter.call(forms, function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false);
|
||||
});
|
||||
}, false);
|
||||
})();
|
||||
78
resources/js/pages/form-wizard.init.js
vendored
Executable file
78
resources/js/pages/form-wizard.init.js
vendored
Executable file
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Form wizard Js File
|
||||
*/
|
||||
|
||||
// user profile img file upload
|
||||
if (document.querySelector("#profile-img-file-input"))
|
||||
document.querySelector("#profile-img-file-input").addEventListener("change", function () {
|
||||
var preview = document.querySelector(".user-profile-image");
|
||||
var file = document.querySelector(".profile-img-file-input").files[0];
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.addEventListener("load", function () {
|
||||
preview.src = reader.result;
|
||||
}, false);
|
||||
|
||||
if (file)
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
if (document.querySelectorAll(".form-steps"))
|
||||
Array.from(document.querySelectorAll(".form-steps")).forEach(function (form) {
|
||||
|
||||
// next tab
|
||||
if (form.querySelectorAll(".nexttab"))
|
||||
form.querySelectorAll(".nexttab").forEach(function (nextButton) {
|
||||
var tabEl = form.querySelectorAll('button[data-bs-toggle="pill"]');
|
||||
Array.from(tabEl).forEach(function (item) {
|
||||
item.addEventListener('show.bs.tab', function (event) {
|
||||
event.target.classList.add('done');
|
||||
});
|
||||
});
|
||||
nextButton.addEventListener("click", function () {
|
||||
var nextTab = nextButton.getAttribute('data-nexttab');
|
||||
document.getElementById(nextTab).click();
|
||||
});
|
||||
});
|
||||
|
||||
//Pervies tab
|
||||
if (form.querySelectorAll(".previestab"))
|
||||
Array.from(form.querySelectorAll(".previestab")).forEach(function (prevButton) {
|
||||
|
||||
prevButton.addEventListener("click", function () {
|
||||
var prevTab = prevButton.getAttribute('data-previous');
|
||||
var totalDone = prevButton.closest("form").querySelectorAll(".custom-nav .done").length;
|
||||
for (var i = totalDone - 1; i < totalDone; i++) {
|
||||
(prevButton.closest("form").querySelectorAll(".custom-nav .done")[i]) ? prevButton.closest("form").querySelectorAll(".custom-nav .done")[i].classList.remove('done'): '';
|
||||
}
|
||||
document.getElementById(prevTab).click();
|
||||
});
|
||||
});
|
||||
|
||||
// Step number click
|
||||
var tabButtons = form.querySelectorAll('button[data-bs-toggle="pill"]');
|
||||
if (tabButtons)
|
||||
Array.from(tabButtons).forEach(function (button, i) {
|
||||
button.setAttribute("data-position", i);
|
||||
button.addEventListener("click", function () {
|
||||
var getProgressBar = button.getAttribute("data-progressbar");
|
||||
if (getProgressBar) {
|
||||
var totalLength = document.getElementById("custom-progress-bar").querySelectorAll("li").length - 1;
|
||||
var current = i;
|
||||
var percent = (current / totalLength) * 100;
|
||||
document.getElementById("custom-progress-bar").querySelector('.progress-bar').style.width = percent + "%";
|
||||
}
|
||||
(form.querySelectorAll(".custom-nav .done").length > 0) ?
|
||||
Array.from(form.querySelectorAll(".custom-nav .done")).forEach(function (doneTab) {
|
||||
doneTab.classList.remove('done');
|
||||
}): '';
|
||||
for (var j = 0; j <= i; j++) {
|
||||
tabButtons[j].classList.contains('active') ? tabButtons[j].classList.remove('done') : tabButtons[j].classList.add('done');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
65
resources/js/pages/gallery.init.js
vendored
Executable file
65
resources/js/pages/gallery.init.js
vendored
Executable file
@@ -0,0 +1,65 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Gallery init
|
||||
*/
|
||||
|
||||
// Portfolio Filter
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
|
||||
// init Isotope
|
||||
var GalleryWrapper = document.querySelector('.gallery-wrapper');
|
||||
if (GalleryWrapper) {
|
||||
var iso = new Isotope('.gallery-wrapper', {
|
||||
itemSelector: '.element-item',
|
||||
layoutMode: 'fitRows'
|
||||
});
|
||||
}
|
||||
|
||||
// bind filter button click
|
||||
var filtersElem = document.querySelector('.categories-filter');
|
||||
if (filtersElem) {
|
||||
filtersElem.addEventListener('click', function (event) {
|
||||
// only work with buttons
|
||||
if (!matchesSelector(event.target, 'li a')) {
|
||||
return;
|
||||
}
|
||||
var filterValue = event.target.getAttribute('data-filter');
|
||||
if (filterValue) {
|
||||
// use matching filter function
|
||||
iso.arrange({
|
||||
filter: filterValue
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// change is-checked class on buttons
|
||||
var buttonGroups = document.querySelectorAll('.categories-filter');
|
||||
if (buttonGroups) {
|
||||
Array.from(buttonGroups).forEach(function (btnGroup) {
|
||||
var buttonGroup = btnGroup;
|
||||
radioButtonGroup(buttonGroup);
|
||||
});
|
||||
}
|
||||
|
||||
function radioButtonGroup(buttonGroup) {
|
||||
buttonGroup.addEventListener('click', function (event) {
|
||||
// only work with buttons
|
||||
if (!matchesSelector(event.target, 'li a')) {
|
||||
return;
|
||||
}
|
||||
buttonGroup.querySelector('.active').classList.remove('active');
|
||||
event.target.classList.add('active');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// GLightbox Popup
|
||||
var lightbox = GLightbox({
|
||||
selector: '.image-popup',
|
||||
title: false,
|
||||
});
|
||||
78
resources/js/pages/gmaps.init.js
vendored
Executable file
78
resources/js/pages/gmaps.init.js
vendored
Executable file
@@ -0,0 +1,78 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Gmaps init Js File
|
||||
*/
|
||||
|
||||
var map;
|
||||
document.addEventListener("DOMContentLoaded", function (event) {
|
||||
// Markers
|
||||
if (document.getElementById('gmaps-markers')) {
|
||||
map = new GMaps({
|
||||
div: '#gmaps-markers',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
map.addMarker({
|
||||
lat: -12.043333,
|
||||
lng: -77.03,
|
||||
title: 'Lima',
|
||||
details: {
|
||||
database_id: 42,
|
||||
author: 'HPNeo'
|
||||
},
|
||||
click: function (e) {
|
||||
if (console.log)
|
||||
console.log(e);
|
||||
alert('You clicked in this marker');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Overlays
|
||||
if (document.getElementById('gmaps-overlay')) {
|
||||
map = new GMaps({
|
||||
div: '#gmaps-overlay',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
map.drawOverlay({
|
||||
lat: map.getCenter().lat(),
|
||||
lng: map.getCenter().lng(),
|
||||
content: '<div class="gmaps-overlay">Lima<div class="gmaps-overlay_arrow above"></div></div>',
|
||||
verticalAlign: 'top',
|
||||
horizontalAlign: 'center'
|
||||
});
|
||||
}
|
||||
|
||||
//panorama
|
||||
if (document.getElementById('panorama'))
|
||||
map = GMaps.createPanorama({
|
||||
el: '#panorama',
|
||||
lat: 42.3455,
|
||||
lng: -71.0983
|
||||
});
|
||||
|
||||
//Map type
|
||||
if (document.getElementById('gmaps-types')) {
|
||||
map = new GMaps({
|
||||
div: '#gmaps-types',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333,
|
||||
mapTypeControlOptions: {
|
||||
mapTypeIds: ["hybrid", "roadmap", "satellite", "terrain", "osm"]
|
||||
}
|
||||
});
|
||||
map.addMapType("osm", {
|
||||
getTileUrl: function (coord, zoom) {
|
||||
return "https://a.tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
|
||||
},
|
||||
tileSize: new google.maps.Size(256, 256),
|
||||
name: "OpenStreetMap",
|
||||
maxZoom: 18
|
||||
});
|
||||
map.setMapTypeId("osm");
|
||||
}
|
||||
});
|
||||
238
resources/js/pages/gridjs.init.js
vendored
Executable file
238
resources/js/pages/gridjs.init.js
vendored
Executable file
@@ -0,0 +1,238 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: grid Js File
|
||||
*/
|
||||
|
||||
// Basic Table
|
||||
if (document.getElementById("table-gridjs"))
|
||||
new gridjs.Grid({
|
||||
columns: [{
|
||||
name: 'ID',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
|
||||
})
|
||||
},
|
||||
"Name",
|
||||
{
|
||||
name: 'Email',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<a href="">' + cell + '</a>');
|
||||
})
|
||||
},
|
||||
"Position", "Company", "Country",
|
||||
{
|
||||
name: 'Actions',
|
||||
width: '120px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html("<a href='#' class='text-reset text-decoration-underline'>" +
|
||||
"Details" +
|
||||
"</a>");
|
||||
})
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
search: true,
|
||||
data: [
|
||||
["01", "Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["02", "Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["03", "Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["04", "Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["05", "Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["06", "Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["07", "Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["08", "Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["09", "Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["10", "Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-gridjs"));
|
||||
|
||||
// card Table
|
||||
if (document.getElementById("table-card"))
|
||||
new gridjs.Grid({
|
||||
columns: ["Name", "Email", "Position", "Company", "Country"],
|
||||
sort: true,
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
data: [
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-card"));
|
||||
|
||||
|
||||
// pagination Table
|
||||
if (document.getElementById("table-pagination"))
|
||||
new gridjs.Grid({
|
||||
columns: [{
|
||||
name: 'ID',
|
||||
width: '120px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html('<a href="" class="fw-medium">' + cell + '</a>');
|
||||
})
|
||||
}, "Name", "Date", "Total", "Status",
|
||||
{
|
||||
name: 'Actions',
|
||||
width: '100px',
|
||||
formatter: (function (cell) {
|
||||
return gridjs.html("<button type='button' class='btn btn-sm btn-light'>" +
|
||||
"Details" +
|
||||
"</button>");
|
||||
})
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
|
||||
data: [
|
||||
["#VL2111", "Jonathan", "07 Oct, 2021", "$24.05", "Paid", ],
|
||||
["#VL2110", "Harold", "07 Oct, 2021", "$26.15", "Paid"],
|
||||
["#VL2109", "Shannon", "06 Oct, 2021", "$21.25", "Refund"],
|
||||
["#VL2108", "Robert", "05 Oct, 2021", "$25.03", "Paid"],
|
||||
["#VL2107", "Noel", "05 Oct, 2021", "$22.61", "Paid"],
|
||||
["#VL2106", "Traci", "04 Oct, 2021", "$24.05", "Paid"],
|
||||
["#VL2105", "Kerry", "04 Oct, 2021", "$26.15", "Paid"],
|
||||
["#VL2104", "Patsy", "04 Oct, 2021", "$21.25", "Refund"],
|
||||
["#VL2103", "Cathy", "03 Oct, 2021", "$22.61", "Paid"],
|
||||
["#VL2102", "Tyrone", "03 Oct, 2021", "$25.03", "Paid"],
|
||||
]
|
||||
}).render(document.getElementById("table-pagination"));
|
||||
|
||||
// search Table
|
||||
if (document.getElementById("table-search"))
|
||||
new gridjs.Grid({
|
||||
columns: ["Name", "Email", "Position", "Company", "Country"],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
search: true,
|
||||
data: [
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-search"));
|
||||
|
||||
// Sorting Table
|
||||
if (document.getElementById("table-sorting"))
|
||||
new gridjs.Grid({
|
||||
columns: ["Name", "Email", "Position", "Company", "Country"],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
data: [
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-sorting"));
|
||||
|
||||
|
||||
// Loading State Table
|
||||
if (document.getElementById("table-loading-state"))
|
||||
new gridjs.Grid({
|
||||
columns: ["Name", "Email", "Position", "Company", "Country"],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
data: function () {
|
||||
return new Promise(function (resolve) {
|
||||
setTimeout(function () {
|
||||
resolve([
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"]
|
||||
])
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
}).render(document.getElementById("table-loading-state"));
|
||||
|
||||
|
||||
// Fixed Header
|
||||
if (document.getElementById("table-fixed-header"))
|
||||
new gridjs.Grid({
|
||||
columns: ["Name", "Email", "Position", "Company", "Country"],
|
||||
sort: true,
|
||||
pagination: true,
|
||||
fixedHeader: true,
|
||||
height: '400px',
|
||||
data: [
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-fixed-header"));
|
||||
|
||||
|
||||
// Hidden Columns
|
||||
if (document.getElementById("table-hidden-column"))
|
||||
new gridjs.Grid({
|
||||
columns: ["Name", "Email", "Position", "Company",
|
||||
{
|
||||
name: 'Country',
|
||||
hidden: true
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
limit: 5
|
||||
},
|
||||
sort: true,
|
||||
data: [
|
||||
["Jonathan", "jonathan@example.com", "Senior Implementation Architect", "Hauck Inc", "Holy See"],
|
||||
["Harold", "harold@example.com", "Forward Creative Coordinator", "Metz Inc", "Iran"],
|
||||
["Shannon", "shannon@example.com", "Legacy Functionality Associate", "Zemlak Group", "South Georgia"],
|
||||
["Robert", "robert@example.com", "Product Accounts Technician", "Hoeger", "San Marino"],
|
||||
["Noel", "noel@example.com", "Customer Data Director", "Howell - Rippin", "Germany"],
|
||||
["Traci", "traci@example.com", "Corporate Identity Director", "Koelpin - Goldner", "Vanuatu"],
|
||||
["Kerry", "kerry@example.com", "Lead Applications Associate", "Feeney, Langworth and Tremblay", "Niger"],
|
||||
["Patsy", "patsy@example.com", "Dynamic Assurance Director", "Streich Group", "Niue"],
|
||||
["Cathy", "cathy@example.com", "Customer Data Director", "Ebert, Schamberger and Johnston", "Mexico"],
|
||||
["Tyrone", "tyrone@example.com", "Senior Response Liaison", "Raynor, Rolfson and Daugherty", "Qatar"],
|
||||
]
|
||||
}).render(document.getElementById("table-hidden-column"));
|
||||
559
resources/js/pages/invoicecreate.init.js
vendored
Executable file
559
resources/js/pages/invoicecreate.init.js
vendored
Executable file
@@ -0,0 +1,559 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Invoice create init Js File
|
||||
*/
|
||||
|
||||
var paymentSign = "$";
|
||||
Array.from(document.getElementsByClassName("product-line-price")).forEach(function (item) {
|
||||
item.value = paymentSign +"0.00"
|
||||
});
|
||||
function otherPayment() {
|
||||
var paymentType = document.getElementById("choices-payment-currency").value;
|
||||
paymentSign = paymentType;
|
||||
|
||||
|
||||
Array.from(document.getElementsByClassName("product-line-price")).forEach(function (item) {
|
||||
isUpdate = item.value.slice(1);
|
||||
item.value = paymentSign + isUpdate;
|
||||
});
|
||||
|
||||
recalculateCart();
|
||||
}
|
||||
|
||||
var isPaymentEl = document.getElementById("choices-payment-currency");
|
||||
var choices = new Choices(isPaymentEl, {
|
||||
searchEnabled: false
|
||||
});
|
||||
|
||||
// Profile Img
|
||||
document
|
||||
.querySelector("#profile-img-file-input")
|
||||
.addEventListener("change", function () {
|
||||
var preview = document.querySelector(".user-profile-image");
|
||||
var file = document.querySelector(".profile-img-file-input").files[0];
|
||||
var reader = new FileReader();
|
||||
reader.addEventListener(
|
||||
"load",
|
||||
function () {
|
||||
preview.src = reader.result;
|
||||
//localStorage.setItem("invoiceLogo", reader.result);
|
||||
},
|
||||
false
|
||||
);
|
||||
if (file) {
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
});
|
||||
|
||||
flatpickr("#date-field", {
|
||||
enableTime: true,
|
||||
dateFormat: "d M, Y, h:i K",
|
||||
});
|
||||
|
||||
isData();
|
||||
|
||||
function isData() {
|
||||
var plus = document.getElementsByClassName("plus"),
|
||||
minus = document.getElementsByClassName("minus");
|
||||
|
||||
if (plus) {
|
||||
Array.from(plus).forEach(function (e) {
|
||||
e.onclick = function (event) {
|
||||
if (parseInt(e.previousElementSibling.value) < 10) {
|
||||
event.target.previousElementSibling.value++;
|
||||
|
||||
var itemAmount = e.parentElement.parentElement.previousElementSibling.querySelector(".product-price").value;
|
||||
|
||||
var priceselection = e.parentElement.parentElement.nextElementSibling.querySelector(".product-line-price");
|
||||
|
||||
var productQty = e.parentElement.querySelector(".product-quantity").value;
|
||||
|
||||
updateQuantity(productQty, itemAmount, priceselection);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if (minus) {
|
||||
Array.from(minus).forEach(function (e) {
|
||||
e.onclick = function (event) {
|
||||
if (parseInt(e.nextElementSibling.value) > 1) {
|
||||
event.target.nextElementSibling.value--;
|
||||
var itemAmount = e.parentElement.parentElement.previousElementSibling.querySelector(".product-price").value;
|
||||
var priceselection = e.parentElement.parentElement.nextElementSibling.querySelector(".product-line-price");
|
||||
// var productQty = 1;
|
||||
var productQty = e.parentElement.querySelector(".product-quantity").value;
|
||||
updateQuantity(productQty, itemAmount, priceselection);
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var count = 1;
|
||||
|
||||
function new_link() {
|
||||
count++;
|
||||
var tr1 = document.createElement("tr");
|
||||
tr1.id = count;
|
||||
tr1.className = "product";
|
||||
|
||||
var delLink =
|
||||
"<tr>" +
|
||||
'<th scope="row" class="product-id">' +
|
||||
count +
|
||||
"</th>" +
|
||||
'<td class="text-start">' +
|
||||
'<div class="mb-2">' +
|
||||
'<input class="form-control bg-light border-0" type="text" id="productName-' + count + '" placeholder="Product Name">' +
|
||||
'</div>' +
|
||||
'<textarea class="form-control bg-light border-0" id="productDetails-' + count + '" rows="2" placeholder="Product Details"></textarea>' +
|
||||
"</div>" +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
'<input class="form-control bg-light border-0 product-price" type="number" id="productRate-' + count + '" step="0.01" placeholder="$0.00">' +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
'<div class="input-step">' +
|
||||
'<button type="button" class="minus">–</button>' +
|
||||
'<input type="number" class="product-quantity" id="product-qty-' + count + '" value="0" readonly>' +
|
||||
'<button type="button" class="plus">+</button>' +
|
||||
"</div>" +
|
||||
"</td>" +
|
||||
'<td class="text-end">' +
|
||||
"<div>" +
|
||||
'<input type="text" class="form-control bg-light border-0 product-line-price" id="productPrice-' + count + '" value="$0.00" placeholder="$0.00" />' +
|
||||
"</div>" +
|
||||
"</td>" +
|
||||
'<td class="product-removal">' +
|
||||
'<a class="btn btn-success">Delete</a>' +
|
||||
"</td>" +
|
||||
"</tr>";
|
||||
|
||||
tr1.innerHTML = document.getElementById("newForm").innerHTML + delLink;
|
||||
|
||||
document.getElementById("newlink").appendChild(tr1);
|
||||
var genericExamples = document.querySelectorAll("[data-trigger]");
|
||||
Array.from(genericExamples).forEach(function (genericExamp) {
|
||||
var element = genericExamp;
|
||||
new Choices(element, {
|
||||
placeholderValue: "This is a placeholder set in the config",
|
||||
searchPlaceholderValue: "This is a search placeholder",
|
||||
});
|
||||
});
|
||||
|
||||
isData();
|
||||
remove();
|
||||
amountKeyup();
|
||||
resetRow()
|
||||
}
|
||||
|
||||
remove();
|
||||
/* Set rates + misc */
|
||||
var taxRate = 0.125;
|
||||
var shippingRate = 65.0;
|
||||
var discountRate = 0.15;
|
||||
|
||||
function remove() {
|
||||
Array.from(document.querySelectorAll(".product-removal a")).forEach(function (el) {
|
||||
el.addEventListener("click", function (e) {
|
||||
removeItem(e);
|
||||
resetRow()
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function resetRow() {
|
||||
|
||||
Array.from(document.getElementById("newlink").querySelectorAll("tr")).forEach(function (subItem, index) {
|
||||
var incid = index + 1;
|
||||
subItem.querySelector('.product-id').innerHTML = incid;
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
/* Recalculate cart */
|
||||
function recalculateCart() {
|
||||
var subtotal = 0;
|
||||
|
||||
Array.from(document.getElementsByClassName("product")).forEach(function (item) {
|
||||
Array.from(item.getElementsByClassName("product-line-price")).forEach(function (e) {
|
||||
if (e.value) {
|
||||
subtotal += parseFloat(e.value.slice(1));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* Calculate totals */
|
||||
var tax = subtotal * taxRate;
|
||||
var discount = subtotal * discountRate;
|
||||
|
||||
var shipping = subtotal > 0 ? shippingRate : 0;
|
||||
var total = subtotal + tax + shipping - discount;
|
||||
|
||||
document.getElementById("cart-subtotal").value =
|
||||
paymentSign + subtotal.toFixed(2);
|
||||
document.getElementById("cart-tax").value = paymentSign + tax.toFixed(2);
|
||||
document.getElementById("cart-shipping").value =
|
||||
paymentSign + shipping.toFixed(2);
|
||||
document.getElementById("cart-total").value = paymentSign + total.toFixed(2);
|
||||
document.getElementById("cart-discount").value =
|
||||
paymentSign + discount.toFixed(2);
|
||||
document.getElementById("totalamountInput").value =
|
||||
paymentSign + total.toFixed(2);
|
||||
document.getElementById("amountTotalPay").value =
|
||||
paymentSign + total.toFixed(2);
|
||||
}
|
||||
|
||||
function amountKeyup() {
|
||||
|
||||
// var listArray = [];
|
||||
|
||||
// listArray.push(document.getElementsByClassName('product-price'));
|
||||
Array.from(document.getElementsByClassName('product-price')).forEach(function (item) {
|
||||
item.addEventListener('keyup', function (e) {
|
||||
|
||||
var priceselection = item.parentElement.nextElementSibling.nextElementSibling.querySelector('.product-line-price');
|
||||
|
||||
var amount = e.target.value;
|
||||
var itemQuntity = item.parentElement.nextElementSibling.querySelector('.product-quantity').value;
|
||||
|
||||
updateQuantity(amount, itemQuntity, priceselection);
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
amountKeyup();
|
||||
/* Update quantity */
|
||||
function updateQuantity(amount, itemQuntity, priceselection) {
|
||||
var linePrice = amount * itemQuntity;
|
||||
/* Update line price display and recalc cart totals */
|
||||
linePrice = linePrice.toFixed(2);
|
||||
priceselection.value = paymentSign + linePrice;
|
||||
|
||||
recalculateCart();
|
||||
|
||||
}
|
||||
|
||||
/* Remove item from cart */
|
||||
function removeItem(removeButton) {
|
||||
removeButton.target.closest("tr").remove();
|
||||
recalculateCart();
|
||||
}
|
||||
|
||||
//Choise Js
|
||||
var genericExamples = document.querySelectorAll("[data-trigger]");
|
||||
Array.from(genericExamples).forEach(function (genericExamp) {
|
||||
var element = genericExamp;
|
||||
new Choices(element, {
|
||||
placeholderValue: "This is a placeholder set in the config",
|
||||
searchPlaceholderValue: "This is a search placeholder",
|
||||
});
|
||||
});
|
||||
|
||||
//Address
|
||||
function billingFunction() {
|
||||
if (document.getElementById("same").checked) {
|
||||
document.getElementById("shippingName").value =
|
||||
document.getElementById("billingName").value;
|
||||
document.getElementById("shippingAddress").value =
|
||||
document.getElementById("billingAddress").value;
|
||||
document.getElementById("shippingPhoneno").value =
|
||||
document.getElementById("billingPhoneno").value;
|
||||
document.getElementById("shippingTaxno").value =
|
||||
document.getElementById("billingTaxno").value;
|
||||
} else {
|
||||
document.getElementById("shippingName").value = "";
|
||||
document.getElementById("shippingAddress").value = "";
|
||||
document.getElementById("shippingPhoneno").value = "";
|
||||
document.getElementById("shippingTaxno").value = "";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var cleaveBlocks = new Cleave('#cardNumber', {
|
||||
blocks: [4, 4, 4, 4],
|
||||
uppercase: true
|
||||
});
|
||||
|
||||
var genericExamples = document.querySelectorAll('[data-plugin="cleave-phone"]');
|
||||
Array.from(genericExamples).forEach(function (genericExamp) {
|
||||
var element = genericExamp;
|
||||
new Cleave(element, {
|
||||
delimiters: ['(', ')', '-'],
|
||||
blocks: [0, 3, 3, 4]
|
||||
});
|
||||
});
|
||||
|
||||
let viewobj;
|
||||
var invoices_list = localStorage.getItem("invoices-list");
|
||||
var options = localStorage.getItem("option");
|
||||
var invoice_no = localStorage.getItem("invoice_no");
|
||||
var invoices = JSON.parse(invoices_list);
|
||||
|
||||
if (localStorage.getItem("invoice_no") === null && localStorage.getItem("option") === null) {
|
||||
viewobj = '';
|
||||
var value = "#VL" + Math.floor(11111111 + Math.random() * 99999999);
|
||||
document.getElementById("invoicenoInput").value = value;
|
||||
} else {
|
||||
viewobj = invoices.find(o => o.invoice_no === invoice_no);
|
||||
}
|
||||
|
||||
// Invoice Data Load On Form
|
||||
if ((viewobj != '') && (options == "edit-invoice")) {
|
||||
|
||||
document.getElementById("registrationNumber").value = viewobj.company_details.legal_registration_no;
|
||||
document.getElementById("companyEmail").value = viewobj.company_details.email;
|
||||
document.getElementById('companyWebsite').value = viewobj.company_details.website;
|
||||
new Cleave("#compnayContactno", {
|
||||
prefix: viewobj.company_details.contact_no,
|
||||
delimiters: ['(', ')', '-'],
|
||||
blocks: [0, 3, 3, 4]
|
||||
});
|
||||
document.getElementById("companyAddress").value = viewobj.company_details.address;
|
||||
document.getElementById("companyaddpostalcode").value = viewobj.company_details.zip_code;
|
||||
|
||||
var preview = document.querySelectorAll(".user-profile-image");
|
||||
if (viewobj.img !== ''){
|
||||
preview.src = viewobj.img;
|
||||
}
|
||||
|
||||
document.getElementById("invoicenoInput").value = "#VAL" + viewobj.invoice_no;
|
||||
document.getElementById("invoicenoInput").setAttribute('readonly',true);
|
||||
document.getElementById("date-field").value = viewobj.date;
|
||||
document.getElementById("choices-payment-status").value = viewobj.status;
|
||||
document.getElementById("totalamountInput").value = "$" + viewobj.order_summary.total_amount;
|
||||
|
||||
document.getElementById("billingName").value = viewobj.billing_address.full_name;
|
||||
document.getElementById("billingAddress").value = viewobj.billing_address.address;
|
||||
new Cleave("#billingPhoneno", {
|
||||
prefix: viewobj.company_details.contact_no,
|
||||
delimiters: ['(', ')', '-'],
|
||||
blocks: [0, 3, 3, 4]
|
||||
});
|
||||
document.getElementById("billingTaxno").value = viewobj.billing_address.tax;
|
||||
|
||||
document.getElementById("shippingName").value = viewobj.shipping_address.full_name;
|
||||
document.getElementById("shippingAddress").value = viewobj.shipping_address.address;
|
||||
new Cleave("#shippingPhoneno", {
|
||||
prefix: viewobj.company_details.contact_no,
|
||||
delimiters: ['(', ')', '-'],
|
||||
blocks: [0, 3, 3, 4]
|
||||
});
|
||||
|
||||
document.getElementById("shippingTaxno").value = viewobj.billing_address.tax;
|
||||
|
||||
var paroducts_list = viewobj.prducts;
|
||||
var counter = 1;
|
||||
do {
|
||||
counter++;
|
||||
if (paroducts_list.length > 1) {
|
||||
document.getElementById("add-item").click();
|
||||
}
|
||||
} while (paroducts_list.length - 1 >= counter);
|
||||
|
||||
var counter_1 = 1;
|
||||
|
||||
setTimeout(() => {
|
||||
Array.from(paroducts_list).forEach(function (element) {
|
||||
document.getElementById("productName-" + counter_1).value = element.product_name;
|
||||
document.getElementById("productDetails-" + counter_1).value = element.product_details;
|
||||
document.getElementById("productRate-" + counter_1).value = element.rates;
|
||||
document.getElementById("product-qty-" + counter_1).value = element.quantity;
|
||||
document.getElementById("productPrice-" + counter_1).value = "$" + ((element.rates) * (element.quantity));
|
||||
counter_1++;
|
||||
});
|
||||
}, 300);
|
||||
|
||||
document.getElementById("cart-subtotal").value = "$" + viewobj.order_summary.sub_total;
|
||||
document.getElementById("cart-tax").value = "$" + viewobj.order_summary.estimated_tex;
|
||||
document.getElementById("cart-discount").value = "$" + viewobj.order_summary.discount;
|
||||
document.getElementById("cart-shipping").value = "$" + viewobj.order_summary.shipping_charge;
|
||||
document.getElementById("cart-total").value = "$" + viewobj.order_summary.total_amount;
|
||||
|
||||
document.getElementById("choices-payment-type").value = viewobj.payment_details.payment_method;
|
||||
document.getElementById("cardholderName").value = viewobj.payment_details.card_holder_name;
|
||||
|
||||
var cleave = new Cleave('#cardNumber', {
|
||||
prefix: viewobj.payment_details.card_number,
|
||||
delimiter: ' ',
|
||||
blocks: [4, 4, 4, 4],
|
||||
uppercase: true
|
||||
});
|
||||
document.getElementById("amountTotalPay").value = "$" + viewobj.order_summary.total_amount;
|
||||
|
||||
document.getElementById("exampleFormControlTextarea1").value = viewobj.notes;
|
||||
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
// //Form Validation
|
||||
var formEvent = document.getElementById('invoice_form');
|
||||
var forms = document.getElementsByClassName('needs-validation');
|
||||
|
||||
// Loop over them and prevent submission
|
||||
formEvent.addEventListener("submit", function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
// get fields value
|
||||
var i_no = (document.getElementById("invoicenoInput").value).slice(4);
|
||||
var email = document.getElementById("companyEmail").value;
|
||||
var date = document.getElementById("date-field").value;
|
||||
var invoice_amount = (document.getElementById("totalamountInput").value).slice(1);
|
||||
var status = document.getElementById("choices-payment-status").value;
|
||||
var billing_address_full_name = document.getElementById("billingName").value;
|
||||
var billing_address_address = document.getElementById("billingAddress").value;
|
||||
var billing_address_phone = (document.getElementById("billingPhoneno").value).replace(/[^0-9]/g, "");
|
||||
var billing_address_tax = document.getElementById("billingTaxno").value;
|
||||
var shipping_address_full_name = document.getElementById("shippingName").value;
|
||||
var shipping_address_address = document.getElementById("shippingAddress").value;
|
||||
var shipping_address_phone = (document.getElementById("shippingPhoneno").value).replace(/[^0-9]/g, "");
|
||||
var shipping_address_tax = document.getElementById("shippingTaxno").value;
|
||||
var payment_details_payment_method = document.getElementById("choices-payment-type").value;
|
||||
var payment_details_card_holder_name = document.getElementById("cardholderName").value;
|
||||
var payment_details_card_number = (document.getElementById("cardNumber").value).replace(/[^0-9]/g, "");
|
||||
var payment_details_total_amount = (document.getElementById("amountTotalPay").value).slice(1);
|
||||
var company_details_legal_registration_no = (document.getElementById("registrationNumber").value).replace(/[^0-9]/g, "");
|
||||
var company_details_email = document.getElementById("companyEmail").value;
|
||||
var company_details_website = document.getElementById('companyWebsite').value;
|
||||
var company_details_contact_no = (document.getElementById("compnayContactno").value).replace(/[^0-9]/g, "");
|
||||
var company_details_address = document.getElementById("companyAddress").value;
|
||||
var company_details_zip_code = document.getElementById("companyaddpostalcode").value;
|
||||
var order_summary_sub_total = (document.getElementById("cart-subtotal").value).slice(1);
|
||||
var order_summary_estimated_tex = (document.getElementById("cart-tax").value).slice(1);
|
||||
var order_summary_discount = (document.getElementById("cart-discount").value).slice(1);
|
||||
var order_summary_shipping_charge = (document.getElementById("cart-shipping").value).slice(1);
|
||||
var order_summary_total_amount = (document.getElementById("cart-total").value).slice(1);
|
||||
var notes = document.getElementById("exampleFormControlTextarea1").value;
|
||||
|
||||
// get product value and make array
|
||||
var products = document.getElementsByClassName("product");
|
||||
var count = 1;
|
||||
var new_product_obj = [];
|
||||
Array.from(products).forEach(element => {
|
||||
var product_name = element.querySelector("#productName-"+count).value;
|
||||
var product_details = element.querySelector("#productDetails-"+count).value;
|
||||
var product_rate = parseInt(element.querySelector("#productRate-"+count).value);
|
||||
var product_qty = parseInt(element.querySelector("#product-qty-"+count).value);
|
||||
var product_price = (element.querySelector("#productPrice-"+count).value).split("$");;
|
||||
|
||||
var product_obj = {
|
||||
product_name: product_name,
|
||||
product_details: product_details,
|
||||
rates: product_rate,
|
||||
quantity: product_qty,
|
||||
amount: parseInt(product_price[1])
|
||||
}
|
||||
new_product_obj.push(product_obj);
|
||||
count++;
|
||||
});
|
||||
|
||||
if (formEvent.checkValidity() === false) {
|
||||
formEvent.classList.add("was-validated");
|
||||
} else {
|
||||
if ((options == "edit-invoice") && (invoice_no == i_no)) {
|
||||
objIndex = invoices.findIndex((obj => obj.invoice_no == i_no));
|
||||
|
||||
invoices[objIndex].invoice_no = i_no;
|
||||
invoices[objIndex].customer = billing_address_full_name;
|
||||
invoices[objIndex].img = '';
|
||||
invoices[objIndex].email = email;
|
||||
invoices[objIndex].date = date;
|
||||
invoices[objIndex].invoice_amount = invoice_amount;
|
||||
invoices[objIndex].status = status;
|
||||
invoices[objIndex].billing_address = {
|
||||
full_name: billing_address_full_name,
|
||||
address: billing_address_address,
|
||||
phone: billing_address_phone,
|
||||
tax: billing_address_tax
|
||||
};
|
||||
invoices[objIndex].shipping_address = {
|
||||
full_name: shipping_address_full_name,
|
||||
address: shipping_address_address,
|
||||
phone: shipping_address_phone,
|
||||
tax: shipping_address_tax
|
||||
};
|
||||
invoices[objIndex].payment_details = {
|
||||
payment_method: payment_details_payment_method,
|
||||
card_holder_name: payment_details_card_holder_name,
|
||||
card_number: payment_details_card_number,
|
||||
total_amount: payment_details_total_amount
|
||||
};
|
||||
invoices[objIndex].company_details = {
|
||||
legal_registration_no: company_details_legal_registration_no,
|
||||
email: company_details_email,
|
||||
website: company_details_website,
|
||||
contact_no: company_details_contact_no,
|
||||
address: company_details_address,
|
||||
zip_code: company_details_zip_code
|
||||
};
|
||||
invoices[objIndex].order_summary = {
|
||||
sub_total: order_summary_sub_total,
|
||||
estimated_tex: order_summary_estimated_tex,
|
||||
discount: order_summary_discount,
|
||||
shipping_charge: order_summary_shipping_charge,
|
||||
total_amount: order_summary_total_amount,
|
||||
};
|
||||
invoices[objIndex].prducts = new_product_obj;
|
||||
invoices[objIndex].notes = notes;
|
||||
|
||||
localStorage.removeItem("invoices-list");
|
||||
localStorage.removeItem("option");
|
||||
localStorage.removeItem("invoice_no");
|
||||
localStorage.setItem("invoices-list", JSON.stringify(invoices));
|
||||
} else {
|
||||
var new_data_object = {
|
||||
invoice_no: i_no,
|
||||
customer: billing_address_full_name,
|
||||
img: '',
|
||||
email: email,
|
||||
date: date,
|
||||
invoice_amount: invoice_amount,
|
||||
status: status,
|
||||
billing_address: {
|
||||
full_name: billing_address_full_name,
|
||||
address: billing_address_address,
|
||||
phone: billing_address_phone,
|
||||
tax: billing_address_tax
|
||||
},
|
||||
shipping_address: {
|
||||
full_name: shipping_address_full_name,
|
||||
address: shipping_address_address,
|
||||
phone: shipping_address_phone,
|
||||
tax: shipping_address_tax
|
||||
},
|
||||
payment_details: {
|
||||
payment_method: payment_details_payment_method,
|
||||
card_holder_name: payment_details_card_holder_name,
|
||||
card_number: payment_details_card_number,
|
||||
total_amount: payment_details_total_amount
|
||||
},
|
||||
company_details: {
|
||||
legal_registration_no: company_details_legal_registration_no,
|
||||
email: company_details_email,
|
||||
website: company_details_website,
|
||||
contact_no: company_details_contact_no,
|
||||
address: company_details_address,
|
||||
zip_code: company_details_zip_code
|
||||
},
|
||||
order_summary:{
|
||||
sub_total: order_summary_sub_total,
|
||||
estimated_tex: order_summary_estimated_tex,
|
||||
discount: order_summary_discount,
|
||||
shipping_charge: order_summary_shipping_charge,
|
||||
total_amount: order_summary_total_amount
|
||||
},
|
||||
prducts: new_product_obj,
|
||||
notes: notes
|
||||
};
|
||||
localStorage.setItem("new_data_object", JSON.stringify(new_data_object));
|
||||
}
|
||||
window.location.href = "apps-invoices-list";
|
||||
}
|
||||
});
|
||||
});
|
||||
131
resources/js/pages/invoicedetails.js
vendored
Executable file
131
resources/js/pages/invoicedetails.js
vendored
Executable file
@@ -0,0 +1,131 @@
|
||||
function tConvert(time) {
|
||||
var d = new Date(time);
|
||||
time_s = (d.getHours() + ':' + d.getMinutes());
|
||||
var t = time_s.split(":");
|
||||
var hours = t[0];
|
||||
var minutes = t[1];
|
||||
var newformat = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12;
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
return (hours + ':' + minutes + ' ' + newformat);
|
||||
}
|
||||
|
||||
var str_dt = function formatDate(date) {
|
||||
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
var d = new Date(date),
|
||||
month = '' + monthNames[(d.getMonth())],
|
||||
day = '' + d.getDate(),
|
||||
year = d.getFullYear();
|
||||
if (month.length < 2)
|
||||
month = '0' + month;
|
||||
if (day.length < 2)
|
||||
day = '0' + day;
|
||||
return [day + " " + month, year].join(', ');
|
||||
};
|
||||
|
||||
if ((localStorage.getItem("invoices-list") !== null) && (localStorage.getItem("option") !== null) && (localStorage.getItem("invoice_no") !== null)) {
|
||||
|
||||
var invoices_list = localStorage.getItem("invoices-list");
|
||||
var options = localStorage.getItem("option");
|
||||
var invoice_no = localStorage.getItem("invoice_no");
|
||||
var invoices = JSON.parse(invoices_list);
|
||||
|
||||
let viewobj = invoices.find(o => o.invoice_no === invoice_no);
|
||||
|
||||
if ((viewobj != '') && (options == "view-invoice")) {
|
||||
let badge;
|
||||
switch (viewobj.status) {
|
||||
case 'Paid':
|
||||
badge = "success";
|
||||
break;
|
||||
case 'Refund':
|
||||
badge = "primary";
|
||||
break;
|
||||
case 'Unpaid':
|
||||
badge = "warning";
|
||||
break;
|
||||
case 'Cancel':
|
||||
badge = "danger";
|
||||
};
|
||||
|
||||
document.getElementById("legal-register-no").innerHTML = viewobj.company_details.legal_registration_no;
|
||||
document.getElementById("email").innerHTML = viewobj.company_details.email;
|
||||
document.getElementById('website').href = viewobj.company_details.website;
|
||||
document.getElementById("website").innerHTML = viewobj.company_details.website;
|
||||
document.getElementById("contact-no").innerHTML = viewobj.company_details.contact_no;
|
||||
document.getElementById("address-details").innerHTML = viewobj.company_details.address;
|
||||
document.getElementById("zip-code").innerHTML = viewobj.company_details.zip_code;
|
||||
|
||||
document.getElementById("invoice-no").innerHTML = viewobj.invoice_no;
|
||||
document.getElementById("invoice-date").innerHTML = str_dt(viewobj.date);
|
||||
document.getElementById("invoice-time").innerHTML = tConvert(viewobj.date);
|
||||
document.getElementById("payment-status").innerHTML = viewobj.status;
|
||||
document.getElementById("payment-status").classList.replace("badge-soft-success", 'badge-soft-' + badge);
|
||||
document.getElementById("total-amount").innerHTML = viewobj.invoice_amount;
|
||||
|
||||
document.getElementById("billing-name").innerHTML = viewobj.billing_address.full_name;
|
||||
document.getElementById("billing-address-line-1").innerHTML = viewobj.billing_address.address;
|
||||
document.getElementById("billing-phone-no").innerHTML = viewobj.billing_address.phone;
|
||||
document.getElementById("billing-tax-no").innerHTML = viewobj.billing_address.tax;
|
||||
|
||||
document.getElementById("shipping-name").innerHTML = viewobj.shipping_address.full_name;
|
||||
document.getElementById("shipping-address-line-1").innerHTML = viewobj.shipping_address.address;
|
||||
document.getElementById("shipping-phone-no").innerHTML = viewobj.shipping_address.phone;
|
||||
|
||||
document.getElementById("products-list").innerHTML = "";
|
||||
var paroducts_list = viewobj.prducts;
|
||||
var counter = 1;
|
||||
Array.from(paroducts_list).forEach(function (element) {
|
||||
product_data = `
|
||||
<tr>
|
||||
<th scope="row">` + counter + `</th>
|
||||
<td class="text-start">
|
||||
<span class="fw-medium">` + element.product_name + `</span>
|
||||
<p class="text-muted mb-0">` + element.product_details + `</p>
|
||||
</td>
|
||||
<td>` + element.rates + `</td>
|
||||
<td>` + element.quantity + `</td>
|
||||
<td class="text-end">$` + element.amount + `</td>
|
||||
</tr>`;
|
||||
document.getElementById("products-list").innerHTML += product_data;
|
||||
counter++;
|
||||
});
|
||||
var order_summary = `
|
||||
<tr class="border-top border-top-dashed mt-2">
|
||||
<td colspan="3"></td>
|
||||
<td colspan="2" class="fw-medium p-0">
|
||||
<table class="table table-borderless text-start table-nowrap align-middle mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sub Total</td>
|
||||
<td class="text-end">$` + viewobj.order_summary.sub_total + `</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Estimated Tax (12.5%)</td>
|
||||
<td class="text-end">$` + viewobj.order_summary.estimated_tex + `</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Discount <small class="text-muted">(VELZON15)</small></td>
|
||||
<td class="text-end">- $` + viewobj.order_summary.discount + `</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Shipping Charge</td>
|
||||
<td class="text-end">$` + viewobj.order_summary.shipping_charge + `</td>
|
||||
</tr>
|
||||
<tr class="border-top border-top-dashed">
|
||||
<th scope="row">Total Amount</th>
|
||||
<td class="text-end">$` + viewobj.order_summary.total_amount + `</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><!--end table-->
|
||||
</td>
|
||||
</tr>`;
|
||||
document.getElementById("products-list").innerHTML += order_summary;
|
||||
document.getElementById("payment-method").innerHTML = viewobj.payment_details.payment_method;
|
||||
document.getElementById("card-holder-name").innerHTML = viewobj.payment_details.card_holder_name;
|
||||
document.getElementById("card-number").innerHTML = viewobj.payment_details.card_number;
|
||||
document.getElementById("card-total-amount").innerHTML = viewobj.payment_details.total_amount;
|
||||
document.getElementById("note").innerHTML = viewobj.notes;
|
||||
}
|
||||
}
|
||||
1859
resources/js/pages/invoiceslist.init.js
vendored
Executable file
1859
resources/js/pages/invoiceslist.init.js
vendored
Executable file
File diff suppressed because it is too large
Load Diff
177
resources/js/pages/landing.init.js
vendored
Executable file
177
resources/js/pages/landing.init.js
vendored
Executable file
@@ -0,0 +1,177 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: landing Js File
|
||||
*/
|
||||
|
||||
// Window scroll sticky class add
|
||||
function windowScroll() {
|
||||
var navbar = document.getElementById("navbar");
|
||||
if (navbar) {
|
||||
if (document.body.scrollTop >= 50 || document.documentElement.scrollTop >= 50) {
|
||||
navbar.classList.add("is-sticky");
|
||||
} else {
|
||||
navbar.classList.remove("is-sticky");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', function (ev) {
|
||||
ev.preventDefault();
|
||||
windowScroll();
|
||||
});
|
||||
|
||||
// Collapse Menu
|
||||
const navLinks = document.querySelectorAll('.nav-item');
|
||||
const menuToggle = document.getElementById('navbarSupportedContent');
|
||||
var bsCollapse = '';
|
||||
if (navLinks && menuToggle) {
|
||||
window.addEventListener('load', function () {
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
});
|
||||
window.addEventListener('resize', function () {
|
||||
var windowSize = document.documentElement.clientWidth;
|
||||
bsCollapse = new bootstrap.Collapse(menuToggle, {
|
||||
toggle: false
|
||||
});
|
||||
if (windowSize < 980) {
|
||||
Array.from(navLinks).forEach((link) => {
|
||||
link.addEventListener('click', () => {
|
||||
toggleMenu();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
toggleMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
var windowSize = document.documentElement.clientWidth;
|
||||
if (windowSize < 980) {
|
||||
bsCollapse.toggle();
|
||||
} else {
|
||||
bsCollapse = '';
|
||||
}
|
||||
}
|
||||
|
||||
// trusted-client-slider
|
||||
var swiper = new Swiper(".trusted-client-slider", {
|
||||
spaceBetween: 30,
|
||||
loop: 'true',
|
||||
slidesPerView: 1,
|
||||
autoplay: {
|
||||
delay: 1000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
breakpoints: {
|
||||
576: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 4,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// pricing
|
||||
function check() {
|
||||
var checkBox = document.getElementById("plan-switch");
|
||||
var month = document.getElementsByClassName("month");
|
||||
var annual = document.getElementsByClassName("annual");
|
||||
|
||||
var i = 0;
|
||||
Array.from(month).forEach(function (mon) {
|
||||
if (checkBox.checked == true) {
|
||||
annual[i].style.display = "block";
|
||||
mon.style.display = "none";
|
||||
} else if (checkBox.checked == false) {
|
||||
annual[i].style.display = "none";
|
||||
mon.style.display = "block";
|
||||
}
|
||||
i ++;
|
||||
});
|
||||
}
|
||||
check();
|
||||
|
||||
// client-review-swiper
|
||||
var swiper = new Swiper(".client-review-swiper", {
|
||||
loop: false,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
pagination: {
|
||||
clickable: true,
|
||||
el: ".swiper-pagination",
|
||||
},
|
||||
});
|
||||
|
||||
// counter-value
|
||||
function counter() {
|
||||
var counter = document.querySelectorAll('.counter-value');
|
||||
if (counter) {
|
||||
var speed = 250; // The lower the slower
|
||||
counter && Array.from(counter).forEach(function (counter_value) {
|
||||
function updateCount() {
|
||||
var target = +counter_value.getAttribute('data-target');
|
||||
var count = +counter_value.innerText;
|
||||
var inc = target / speed;
|
||||
if (inc < 1) {
|
||||
inc = 1;
|
||||
}
|
||||
// Check if target is reached
|
||||
if (count < target) {
|
||||
// Add inc to count and output in counter_value
|
||||
counter_value.innerText = (count + inc).toFixed(0);
|
||||
// Call function every ms
|
||||
setTimeout(updateCount, 1);
|
||||
} else {
|
||||
counter_value.innerText = numberWithCommas(target);
|
||||
}
|
||||
numberWithCommas(counter_value.innerText);
|
||||
};
|
||||
updateCount();
|
||||
});
|
||||
|
||||
function numberWithCommas(x) {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
}
|
||||
};
|
||||
counter();
|
||||
|
||||
|
||||
//
|
||||
/********************* scroll top js ************************/
|
||||
//
|
||||
|
||||
var mybutton = document.getElementById("back-to-top");
|
||||
|
||||
// When the user scrolls down 20px from the top of the document, show the button
|
||||
window.onscroll = function () {
|
||||
scrollFunction();
|
||||
};
|
||||
|
||||
function scrollFunction() {
|
||||
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
|
||||
mybutton.style.display = "block";
|
||||
} else {
|
||||
mybutton.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// When the user clicks on the button, scroll to the top of the document
|
||||
function topFunction() {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
192
resources/js/pages/leaflet-map.init.js
vendored
Executable file
192
resources/js/pages/leaflet-map.init.js
vendored
Executable file
@@ -0,0 +1,192 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Leaflet init js
|
||||
*/
|
||||
|
||||
// leaflet-map
|
||||
var mymap = L.map('leaflet-map').setView([51.505, -0.09], 13);
|
||||
|
||||
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
|
||||
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
id: 'mapbox/streets-v11',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1
|
||||
}).addTo(mymap);
|
||||
|
||||
// leaflet-map-marker
|
||||
var markermap = L.map('leaflet-map-marker').setView([51.505, -0.09], 13);
|
||||
|
||||
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
|
||||
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
id: 'mapbox/streets-v11',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1
|
||||
}).addTo(markermap);
|
||||
|
||||
L.marker([51.5, -0.09]).addTo(markermap);
|
||||
|
||||
L.circle([51.508, -0.11], {
|
||||
color: '#0ab39c',
|
||||
fillColor: '#0ab39c',
|
||||
fillOpacity: 0.5,
|
||||
radius: 500
|
||||
}).addTo(markermap);
|
||||
|
||||
L.polygon([
|
||||
[51.509, -0.08],
|
||||
[51.503, -0.06],
|
||||
[51.51, -0.047]
|
||||
], {
|
||||
color: '#405189',
|
||||
fillColor: '#405189',
|
||||
}).addTo(markermap);
|
||||
|
||||
|
||||
// Working with popups
|
||||
var popupmap = L.map('leaflet-map-popup').setView([51.505, -0.09], 13);
|
||||
|
||||
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
|
||||
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
id: 'mapbox/streets-v11',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1
|
||||
}).addTo(popupmap);
|
||||
|
||||
L.marker([51.5, -0.09]).addTo(popupmap)
|
||||
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
|
||||
|
||||
L.circle([51.508, -0.11], 500, {
|
||||
color: '#f06548',
|
||||
fillColor: '#f06548',
|
||||
fillOpacity: 0.5
|
||||
}).addTo(popupmap).bindPopup("I am a circle.");
|
||||
|
||||
L.polygon([
|
||||
[51.509, -0.08],
|
||||
[51.503, -0.06],
|
||||
[51.51, -0.047]
|
||||
], {
|
||||
color: '#405189',
|
||||
fillColor: '#405189',
|
||||
}).addTo(popupmap).bindPopup("I am a polygon.");
|
||||
|
||||
var popup = L.popup();
|
||||
|
||||
// leaflet-map-custom-icons
|
||||
var customiconsmap = L.map('leaflet-map-custom-icons').setView([51.5, -0.09], 13);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(customiconsmap);
|
||||
|
||||
var LeafIcon = L.Icon.extend({
|
||||
options: {
|
||||
iconSize: [45, 45],
|
||||
iconAnchor: [22, 94],
|
||||
popupAnchor: [-3, -76]
|
||||
}
|
||||
});
|
||||
|
||||
var greenIcon = new LeafIcon({
|
||||
iconUrl: 'assets/images/logo-sm.png'
|
||||
});
|
||||
|
||||
L.marker([51.5, -0.09], {
|
||||
icon: greenIcon
|
||||
}).addTo(customiconsmap);
|
||||
|
||||
// Interactive Choropleth Map
|
||||
var interactivemap = L.map('leaflet-map-interactive-map').setView([37.8, -96], 4);
|
||||
|
||||
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
|
||||
maxZoom: 18,
|
||||
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
|
||||
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
id: 'mapbox/light-v9',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1
|
||||
}).addTo(interactivemap);
|
||||
|
||||
// get color depending on population density value
|
||||
function getColor(d) {
|
||||
return d > 1000 ? '#405189' :
|
||||
d > 500 ? '#516194' :
|
||||
d > 200 ? '#63719E' :
|
||||
d > 100 ? '#7480A9' :
|
||||
d > 50 ? '#8590B4' :
|
||||
d > 20 ? '#97A0BF' :
|
||||
d > 10 ? '#A8B0C9' :
|
||||
'#A8B0C9';
|
||||
}
|
||||
|
||||
function style(feature) {
|
||||
return {
|
||||
weight: 2,
|
||||
opacity: 1,
|
||||
color: 'white',
|
||||
dashArray: '3',
|
||||
fillOpacity: 0.7,
|
||||
fillColor: getColor(feature.properties.density)
|
||||
};
|
||||
}
|
||||
|
||||
var geojson = L.geoJson(statesData, {
|
||||
style: style,
|
||||
}).addTo(interactivemap);
|
||||
|
||||
// leaflet-map-group-control
|
||||
var cities = L.layerGroup();
|
||||
|
||||
L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
|
||||
L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
|
||||
L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
|
||||
L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
|
||||
|
||||
|
||||
var mbAttr = 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
|
||||
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
|
||||
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
||||
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
|
||||
|
||||
var grayscale = L.tileLayer(mbUrl, {
|
||||
id: 'mapbox/light-v9',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1,
|
||||
attribution: mbAttr
|
||||
}),
|
||||
streets = L.tileLayer(mbUrl, {
|
||||
id: 'mapbox/streets-v11',
|
||||
tileSize: 512,
|
||||
zoomOffset: -1,
|
||||
attribution: mbAttr
|
||||
});
|
||||
|
||||
var layergroupcontrolmap = L.map('leaflet-map-group-control', {
|
||||
center: [39.73, -104.99],
|
||||
zoom: 10,
|
||||
layers: [streets, cities]
|
||||
});
|
||||
|
||||
var baseLayers = {
|
||||
"Grayscale": grayscale,
|
||||
"Streets": streets
|
||||
};
|
||||
|
||||
var overlays = {
|
||||
"Cities": cities
|
||||
};
|
||||
|
||||
L.control.layers(baseLayers, overlays).addTo(layergroupcontrolmap);
|
||||
54
resources/js/pages/leaflet-us-states.js
vendored
Executable file
54
resources/js/pages/leaflet-us-states.js
vendored
Executable file
File diff suppressed because one or more lines are too long
441
resources/js/pages/listjs.init.js
vendored
Executable file
441
resources/js/pages/listjs.init.js
vendored
Executable file
@@ -0,0 +1,441 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: list Js File
|
||||
*/
|
||||
|
||||
var checkAll = document.getElementById("checkAll");
|
||||
if (checkAll) {
|
||||
checkAll.onclick = function () {
|
||||
var checkboxes = document.querySelectorAll('.form-check-all input[type="checkbox"]');
|
||||
if (checkAll.checked == true) {
|
||||
Array.from(checkboxes).forEach(function (checkbox) {
|
||||
checkbox.checked = true;
|
||||
checkbox.closest("tr").classList.add("table-active");
|
||||
});
|
||||
} else {
|
||||
Array.from(checkboxes).forEach(function (checkbox) {
|
||||
checkbox.checked = false;
|
||||
checkbox.closest("tr").classList.remove("table-active");
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var perPage = 8;
|
||||
|
||||
//Table
|
||||
var options = {
|
||||
valueNames: [
|
||||
"id",
|
||||
"customer_name",
|
||||
"email",
|
||||
"date",
|
||||
"phone",
|
||||
"status",
|
||||
],
|
||||
page: perPage,
|
||||
pagination: true,
|
||||
plugins: [
|
||||
ListPagination({
|
||||
left: 2,
|
||||
right: 2
|
||||
})
|
||||
]
|
||||
};
|
||||
// Init list
|
||||
if (document.getElementById("customerList"))
|
||||
var customerList = new List("customerList", options).on("updated", function (list) {
|
||||
list.matchingItems.length == 0 ?
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "block") :
|
||||
(document.getElementsByClassName("noresult")[0].style.display = "none");
|
||||
var isFirst = list.i == 1;
|
||||
var isLast = list.i > list.matchingItems.length - list.page;
|
||||
// make the Prev and Nex buttons disabled on first and last pages accordingly
|
||||
(document.querySelector(".pagination-prev.disabled")) ? document.querySelector(".pagination-prev.disabled").classList.remove("disabled"): '';
|
||||
(document.querySelector(".pagination-next.disabled")) ? document.querySelector(".pagination-next.disabled").classList.remove("disabled"): '';
|
||||
if (isFirst) {
|
||||
document.querySelector(".pagination-prev").classList.add("disabled");
|
||||
}
|
||||
if (isLast) {
|
||||
document.querySelector(".pagination-next").classList.add("disabled");
|
||||
}
|
||||
if (list.matchingItems.length <= perPage) {
|
||||
document.querySelector(".pagination-wrap").style.display = "none";
|
||||
} else {
|
||||
document.querySelector(".pagination-wrap").style.display = "flex";
|
||||
}
|
||||
|
||||
if (list.matchingItems.length == perPage) {
|
||||
document.querySelector(".pagination.listjs-pagination").firstElementChild.children[0].click()
|
||||
}
|
||||
|
||||
if (list.matchingItems.length > 0) {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "none";
|
||||
} else {
|
||||
document.getElementsByClassName("noresult")[0].style.display = "block";
|
||||
}
|
||||
});
|
||||
|
||||
const xhttp = new XMLHttpRequest();
|
||||
xhttp.onload = function () {
|
||||
var json_records = JSON.parse(this.responseText);
|
||||
Array.from(json_records).forEach(raw => {
|
||||
customerList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ'+raw.id+"</a>",
|
||||
customer_name: raw.customer_name,
|
||||
email: raw.email,
|
||||
date: raw.date,
|
||||
phone: raw.phone,
|
||||
status: isStatus(raw.status)
|
||||
});
|
||||
customerList.sort('id', { order: "desc" });
|
||||
refreshCallbacks();
|
||||
});
|
||||
customerList.remove("id", '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ2101</a>');
|
||||
}
|
||||
xhttp.open("GET", "assets/json/table-customer-list.json");
|
||||
xhttp.send();
|
||||
|
||||
isCount = new DOMParser().parseFromString(
|
||||
customerList.items.slice(-1)[0]._values.id,
|
||||
"text/html"
|
||||
);
|
||||
|
||||
var isValue = isCount.body.firstElementChild.innerHTML;
|
||||
|
||||
var idField = document.getElementById("id-field"),
|
||||
customerNameField = document.getElementById("customername-field"),
|
||||
emailField = document.getElementById("email-field"),
|
||||
dateField = document.getElementById("date-field"),
|
||||
phoneField = document.getElementById("phone-field"),
|
||||
statusField = document.getElementById("status-field"),
|
||||
addBtn = document.getElementById("add-btn"),
|
||||
editBtn = document.getElementById("edit-btn"),
|
||||
removeBtns = document.getElementsByClassName("remove-item-btn"),
|
||||
editBtns = document.getElementsByClassName("edit-item-btn");
|
||||
refreshCallbacks();
|
||||
//filterContact("All");
|
||||
|
||||
function filterContact(isValue) {
|
||||
var values_status = isValue;
|
||||
customerList.filter(function (data) {
|
||||
var statusFilter = false;
|
||||
matchData = new DOMParser().parseFromString(
|
||||
data.values().status,
|
||||
"text/html"
|
||||
);
|
||||
var status = matchData.body.firstElementChild.innerHTML;
|
||||
if (status == "All" || values_status == "All") {
|
||||
statusFilter = true;
|
||||
} else {
|
||||
statusFilter = status == values_status;
|
||||
}
|
||||
return statusFilter;
|
||||
});
|
||||
|
||||
customerList.update();
|
||||
}
|
||||
|
||||
function updateList() {
|
||||
var values_status = document.querySelector("input[name=status]:checked").value;
|
||||
data = userList.filter(function (item) {
|
||||
var statusFilter = false;
|
||||
|
||||
if (values_status == "All") {
|
||||
statusFilter = true;
|
||||
} else {
|
||||
statusFilter = item.values().sts == values_status;
|
||||
console.log(statusFilter, "statusFilter");
|
||||
}
|
||||
return statusFilter;
|
||||
});
|
||||
userList.update();
|
||||
}
|
||||
|
||||
if (document.getElementById("showModal")) {
|
||||
document.getElementById("showModal").addEventListener("show.bs.modal", function (e) {
|
||||
if (e.relatedTarget.classList.contains("edit-item-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Customer";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("add-btn").style.display = "none";
|
||||
document.getElementById("edit-btn").style.display = "block";
|
||||
} else if (e.relatedTarget.classList.contains("add-btn")) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Add Customer";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
|
||||
document.getElementById("edit-btn").style.display = "none";
|
||||
document.getElementById("add-btn").style.display = "block";
|
||||
} else {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "List Customer";
|
||||
document.getElementById("showModal").querySelector(".modal-footer").style.display = "none";
|
||||
}
|
||||
});
|
||||
ischeckboxcheck();
|
||||
|
||||
document.getElementById("showModal").addEventListener("hidden.bs.modal", function () {
|
||||
clearFields();
|
||||
});
|
||||
}
|
||||
document.querySelector("#customerList").addEventListener("click", function () {
|
||||
refreshCallbacks();
|
||||
ischeckboxcheck();
|
||||
});
|
||||
|
||||
var table = document.getElementById("customerTable");
|
||||
// save all tr
|
||||
var tr = table.getElementsByTagName("tr");
|
||||
var trlist = table.querySelectorAll(".list tr");
|
||||
|
||||
var count = 11;
|
||||
if (addBtn)
|
||||
addBtn.addEventListener("click", function (e) {
|
||||
if (
|
||||
customerNameField.value !== "" &&
|
||||
emailField.value !== "" &&
|
||||
dateField.value !== "" &&
|
||||
phoneField.value !== ""
|
||||
) {
|
||||
customerList.add({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ'+count+"</a>",
|
||||
customer_name: customerNameField.value,
|
||||
email: emailField.value,
|
||||
date: dateField.value,
|
||||
phone: phoneField.value,
|
||||
status: isStatus(statusField.value),
|
||||
});
|
||||
customerList.sort('id', { order: "desc" });
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
refreshCallbacks();
|
||||
filterContact("All");
|
||||
count++;
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Customer inserted successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
});
|
||||
if (editBtn)
|
||||
editBtn.addEventListener("click", function (e) {
|
||||
document.getElementById("exampleModalLabel").innerHTML = "Edit Customer";
|
||||
var editValues = customerList.get({
|
||||
id: idField.value,
|
||||
});
|
||||
Array.from(editValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
x.values({
|
||||
id: '<a href="javascript:void(0);" class="fw-medium link-primary">'+idField.value+"</a>",
|
||||
customer_name: customerNameField.value,
|
||||
email: emailField.value,
|
||||
date: dateField.value,
|
||||
phone: phoneField.value,
|
||||
status: isStatus(statusField.value),
|
||||
});
|
||||
}
|
||||
});
|
||||
document.getElementById("close-modal").click();
|
||||
clearFields();
|
||||
Swal.fire({
|
||||
position: 'center',
|
||||
icon: 'success',
|
||||
title: 'Customer updated Successfully!',
|
||||
showConfirmButton: false,
|
||||
timer: 2000,
|
||||
showCloseButton: true
|
||||
});
|
||||
});
|
||||
|
||||
var statusVal = new Choices(statusField);
|
||||
|
||||
function isStatus(val) {
|
||||
switch (val) {
|
||||
case "Active":
|
||||
return (
|
||||
'<span class="badge badge-soft-success text-uppercase">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
case "Block":
|
||||
return (
|
||||
'<span class="badge badge-soft-danger text-uppercase">' +
|
||||
val +
|
||||
"</span>"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function ischeckboxcheck() {
|
||||
Array.from(document.getElementsByName("checkAll")).forEach(function (x) {
|
||||
x.addEventListener("click", function (e) {
|
||||
if (e.target.checked) {
|
||||
e.target.closest("tr").classList.add("table-active");
|
||||
} else {
|
||||
e.target.closest("tr").classList.remove("table-active");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function refreshCallbacks() {
|
||||
if (removeBtns)
|
||||
Array.from(removeBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = customerList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
deleteid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var isElem = deleteid.body.firstElementChild;
|
||||
var isdeleteid = deleteid.body.firstElementChild.innerHTML;
|
||||
if (isdeleteid == itemId) {
|
||||
document.getElementById("delete-record").addEventListener("click", function () {
|
||||
customerList.remove("id", isElem.outerHTML);
|
||||
document.getElementById("deleteRecordModal").click();
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
if (editBtn)
|
||||
Array.from(editBtns).forEach(function (btn) {
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.target.closest("tr").children[1].innerText;
|
||||
itemId = e.target.closest("tr").children[1].innerText;
|
||||
var itemValues = customerList.get({
|
||||
id: itemId,
|
||||
});
|
||||
|
||||
Array.from(itemValues).forEach(function (x) {
|
||||
isid = new DOMParser().parseFromString(x._values.id, "text/html");
|
||||
var selectedid = isid.body.firstElementChild.innerHTML;
|
||||
if (selectedid == itemId) {
|
||||
idField.value = selectedid;
|
||||
customerNameField.value = x._values.customer_name;
|
||||
emailField.value = x._values.email;
|
||||
dateField.value = x._values.date;
|
||||
phoneField.value = x._values.phone;
|
||||
|
||||
if (statusVal) statusVal.destroy();
|
||||
statusVal = new Choices(statusField);
|
||||
val = new DOMParser().parseFromString(x._values.status, "text/html");
|
||||
var statusSelec = val.body.firstElementChild.innerHTML;
|
||||
statusVal.setChoiceByValue(statusSelec);
|
||||
|
||||
flatpickr("#date-field", {
|
||||
// enableTime: true,
|
||||
dateFormat: "d M, Y",
|
||||
defaultDate: x._values.date,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function clearFields() {
|
||||
customerNameField.value = "";
|
||||
emailField.value = "";
|
||||
dateField.value = "";
|
||||
phoneField.value = "";
|
||||
}
|
||||
|
||||
function deleteMultiple() {
|
||||
ids_array = [];
|
||||
var items = document.getElementsByName('chk_child');
|
||||
Array.from(items).forEach(function (ele) {
|
||||
if (ele.checked == true) {
|
||||
var trNode = ele.parentNode.parentNode.parentNode;
|
||||
var id = trNode.querySelector('.id a').innerHTML;
|
||||
ids_array.push(id);
|
||||
}
|
||||
});
|
||||
if (typeof ids_array !== 'undefined' && ids_array.length > 0) {
|
||||
if (confirm('Are you sure you want to delete this?')) {
|
||||
Array.from(ids_array).forEach(function (id) {
|
||||
customerList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">${id}</a>`);
|
||||
});
|
||||
document.getElementById('checkAll').checked = false;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
Swal.fire({
|
||||
title: 'Please select at least one checkbox',
|
||||
confirmButtonClass: 'btn btn-info',
|
||||
buttonsStyling: false,
|
||||
showCloseButton: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (document.querySelector(".pagination-next"))
|
||||
document.querySelector(".pagination-next").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click(): '': '';
|
||||
});
|
||||
if (document.querySelector(".pagination-prev"))
|
||||
document.querySelector(".pagination-prev").addEventListener("click", function () {
|
||||
(document.querySelector(".pagination.listjs-pagination")) ? (document.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
|
||||
document.querySelector(".pagination.listjs-pagination").querySelector(".active").previousSibling.children[0].click(): '': '';
|
||||
});
|
||||
|
||||
// data- attribute example
|
||||
var attroptions = {
|
||||
valueNames: [
|
||||
'name',
|
||||
'born',
|
||||
{
|
||||
data: ['id']
|
||||
},
|
||||
{
|
||||
attr: 'src',
|
||||
name: 'image'
|
||||
},
|
||||
{
|
||||
attr: 'href',
|
||||
name: 'link'
|
||||
},
|
||||
{
|
||||
attr: 'data-timestamp',
|
||||
name: 'timestamp'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var attrList = new List('users', attroptions);
|
||||
attrList.add({
|
||||
name: 'Leia',
|
||||
born: '1954',
|
||||
image: 'assets/images/users/avatar-5.jpg',
|
||||
id: 5,
|
||||
timestamp: '67893'
|
||||
});
|
||||
|
||||
// Existing List
|
||||
var existOptionsList = {
|
||||
valueNames: ['contact-name', 'contact-message']
|
||||
};
|
||||
var existList = new List('contact-existing-list', existOptionsList);
|
||||
|
||||
// Fuzzy Search list
|
||||
var fuzzySearchList = new List('fuzzysearch-list', {
|
||||
valueNames: ['name']
|
||||
});
|
||||
|
||||
// pagination list
|
||||
var paginationList = new List('pagination-list', {
|
||||
valueNames: ['pagi-list'],
|
||||
page: 3,
|
||||
pagination: true
|
||||
});
|
||||
457
resources/js/pages/mailbox.init.js
vendored
Executable file
457
resources/js/pages/mailbox.init.js
vendored
Executable file
@@ -0,0 +1,457 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: mailbox init Js File
|
||||
*/
|
||||
|
||||
var url = "assets/json/";
|
||||
var allmaillist = '';
|
||||
const loader = document.querySelector("#elmLoader");
|
||||
// showing loading
|
||||
|
||||
//mail list by json
|
||||
var getJSON = function (jsonurl, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", url + jsonurl, true);
|
||||
xhr.responseType = "json";
|
||||
xhr.onload = function () {
|
||||
var status = xhr.status;
|
||||
if (status === 200) {
|
||||
document.getElementById("elmLoader").innerHTML = '';
|
||||
callback(null, xhr.response);
|
||||
} else {
|
||||
callback(status, xhr.response);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
};
|
||||
|
||||
// load mail data
|
||||
function loadMailData(datas) {
|
||||
var triggerEl = document.querySelector('#mail-filter-navlist button[data-bs-target="#pills-primary"]')
|
||||
triggerEl.click()
|
||||
document.querySelector("#mail-list").innerHTML = '';
|
||||
|
||||
Array.from(datas).forEach(function (mailData, index) {
|
||||
|
||||
var checkReaded = mailData.readed ? "" : "unread";
|
||||
var checkStarred = mailData.starred ? "active" : "";
|
||||
var mailcounted = mailData.counted ? '(' + mailData.counted + ')' : "";
|
||||
|
||||
document.querySelector("#mail-list").innerHTML +=
|
||||
'<li class="' + checkReaded + '">\
|
||||
<div class="col-mail col-mail-1">\
|
||||
<div class="form-check checkbox-wrapper-mail fs-14">\
|
||||
<input class="form-check-input" type="checkbox" value="' + mailData.id + '" id="checkbox-' + mailData.id + '">\
|
||||
<label class="form-check-label" for="checkbox-' + mailData.id + '"></label>\
|
||||
</div>\
|
||||
<input type="hidden" value=' + mailData.userImg + ' class="mail-userimg" />\
|
||||
<button type="button" class="btn avatar-xs p-0 favourite-btn fs-15 ' + checkStarred + '">\
|
||||
<i class="ri-star-fill"></i>\
|
||||
</button>\
|
||||
<a href="javascript: void(0);" class="title"><span class="title-name">' + mailData.name + '</span> ' + mailcounted + '</a>\
|
||||
</div>\
|
||||
<div class="col-mail col-mail-2">\
|
||||
<a href="javascript: void(0);" class="subject"><span class="subject-title">' + mailData.title + '</span> – <span class="teaser">' + mailData.description + '</span>\
|
||||
</a>\
|
||||
<div class="date">' + mailData.date + '</div>\
|
||||
</div>\
|
||||
</li>';
|
||||
favouriteBtn();
|
||||
emailDetailShow();
|
||||
emailDetailChange();
|
||||
checkBoxAll();
|
||||
});
|
||||
}
|
||||
|
||||
// load social mail data
|
||||
function loadSocialMailData(datas) {
|
||||
Array.from(datas).forEach(function (mailData, index) {
|
||||
var checkReaded = mailData.readed ? "" : "unread";
|
||||
var checkStarred = mailData.starred ? "active" : "";
|
||||
var mailcounted = mailData.counted ? '(' + mailData.counted + ')' : "";
|
||||
|
||||
document.getElementById("social-mail-list").innerHTML +=
|
||||
'<li class="' + checkReaded + '">\
|
||||
<div class="col-mail col-mail-1">\
|
||||
<div class="form-check checkbox-wrapper-mail fs-14">\
|
||||
<input class="form-check-input" type="checkbox" value="' + mailData.id + '" id="checkbox-' + mailData.id + '">\
|
||||
<label class="form-check-label" for="checkbox-' + mailData.id + '"></label>\
|
||||
</div>\
|
||||
<input type="hidden" value=' + mailData.userImg + ' class="mail-userimg" />\
|
||||
<button type="button" class="btn avatar-xs p-0 favourite-btn fs-15 ' + checkStarred + '">\
|
||||
<i class="ri-star-fill"></i>\
|
||||
</button>\
|
||||
<a href="javascript: void(0);" class="title"><span class="title-name">' + mailData.name + '</span> ' + mailcounted + '</a>\
|
||||
</div>\
|
||||
<div class="col-mail col-mail-2">\
|
||||
<a href="javascript: void(0);" class="subject"><span class="subject-title">' + mailData.title + '</span> – <span class="teaser">' + mailData.description + '</span>\
|
||||
</a>\
|
||||
<div class="date">' + mailData.date + '</div>\
|
||||
</div>\
|
||||
</li>';
|
||||
emailDetailShow();
|
||||
emailDetailChange();
|
||||
checkBoxAll();
|
||||
});
|
||||
}
|
||||
|
||||
// load promotions mail data
|
||||
function loadPromotionsMailData(datas) {
|
||||
Array.from(datas).forEach(function (mailData, index) {
|
||||
var checkReaded = mailData.readed ? "" : "unread";
|
||||
var checkStarred = mailData.starred ? "active" : "";
|
||||
var mailcounted = mailData.counted ? '(' + mailData.counted + ')' : "";
|
||||
|
||||
document.getElementById("promotions-mail-list").innerHTML +=
|
||||
'<li class="' + checkReaded + '">\
|
||||
<div class="col-mail col-mail-1">\
|
||||
<div class="form-check checkbox-wrapper-mail fs-14">\
|
||||
<input class="form-check-input" type="checkbox" value="' + mailData.id + '" id="checkbox-' + mailData.id + '">\
|
||||
<label class="form-check-label" for="checkbox-' + mailData.id + '"></label>\
|
||||
</div>\
|
||||
<input type="hidden" value=' + mailData.userImg + ' class="mail-userimg" />\
|
||||
<button type="button" class="btn avatar-xs p-0 favourite-btn fs-15 ' + checkStarred + '">\
|
||||
<i class="ri-star-fill"></i>\
|
||||
</button>\
|
||||
<a href="javascript: void(0);" class="title"><span class="title-name">' + mailData.name + '</span> ' + mailcounted + '</a>\
|
||||
</div>\
|
||||
<div class="col-mail col-mail-2">\
|
||||
<a href="javascript: void(0);" class="subject"><span class="subject-title">' + mailData.title + '</span> – <span class="teaser">' + mailData.description + '</span>\
|
||||
</a>\
|
||||
<div class="date">' + mailData.date + '</div>\
|
||||
</div>\
|
||||
</li>';
|
||||
emailDetailShow();
|
||||
emailDetailChange();
|
||||
checkBoxAll();
|
||||
});
|
||||
}
|
||||
|
||||
// get json
|
||||
getJSON("mail-list.init.json", function (err, data) {
|
||||
if (err !== null) {
|
||||
console.log("Something went wrong: " + err);
|
||||
} else {
|
||||
allmaillist = data[0].primary;
|
||||
socialmaillist = data[0].social;
|
||||
promotionsmaillist = data[0].promotions;
|
||||
|
||||
loadMailData(allmaillist);
|
||||
loadSocialMailData(socialmaillist);
|
||||
loadPromotionsMailData(promotionsmaillist);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// mail list click event
|
||||
Array.from(document.querySelectorAll('.mail-list a')).forEach(function (mailTab) {
|
||||
mailTab.addEventListener("click", function () {
|
||||
var chatUserList = document.querySelector(".mail-list a.active");
|
||||
if (chatUserList) chatUserList.classList.remove("active");
|
||||
mailTab.classList.add('active');
|
||||
|
||||
if (mailTab.querySelector('.mail-list-link').hasAttribute('data-type')) {
|
||||
var tabname = mailTab.querySelector('.mail-list-link').innerHTML;
|
||||
var filterData = allmaillist.filter(maillist => maillist.labeltype === tabname);
|
||||
} else {
|
||||
var tabname = mailTab.querySelector('.mail-list-link').innerHTML;
|
||||
document.getElementById("mail-list").innerHTML = '';
|
||||
if (tabname != 'All') {
|
||||
var filterData = allmaillist.filter(maillist => maillist.tabtype === tabname);
|
||||
} else {
|
||||
var filterData = allmaillist;
|
||||
}
|
||||
if (tabname != 'All' && tabname != 'Inbox') {
|
||||
document.getElementById("mail-filter-navlist").style.display = "none";
|
||||
} else {
|
||||
document.getElementById("mail-filter-navlist").style.display = "block";
|
||||
}
|
||||
}
|
||||
loadMailData(filterData);
|
||||
favouriteBtn();
|
||||
});
|
||||
})
|
||||
|
||||
// favourite btn
|
||||
function favouriteBtn() {
|
||||
Array.from(document.querySelectorAll(".favourite-btn")).forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
if (item.classList.contains("active")) {
|
||||
item.classList.remove("active");
|
||||
} else {
|
||||
item.classList.add("active");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
favouriteBtn();
|
||||
|
||||
// emailDetailShow
|
||||
function emailDetailShow() {
|
||||
var bodyElement = document.getElementsByTagName('body')[0];
|
||||
Array.from(document.querySelectorAll(".message-list a")).forEach(function (item) {
|
||||
item.addEventListener("click", function (event) {
|
||||
bodyElement.classList.add("email-detail-show");
|
||||
Array.from(document.querySelectorAll(".message-list li.unread")).forEach(function (element) {
|
||||
if (element.classList.contains("unread")) {
|
||||
event.target.closest('li').classList.remove("unread");
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(document.querySelectorAll(".close-btn-email")).forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
bodyElement.classList.remove("email-detail-show");
|
||||
});
|
||||
});
|
||||
|
||||
var isShowMenu = false;
|
||||
var emailMenuSidebar = document.getElementsByClassName('email-menu-sidebar');
|
||||
document.querySelectorAll(".email-menu-btn").forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
Array.from(emailMenuSidebar).forEach(function (elm) {
|
||||
elm.classList.add("menubar-show");
|
||||
isShowMenu = true;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('click', function (e) {
|
||||
if (document.querySelector(".email-menu-sidebar").classList.contains('menubar-show')) {
|
||||
if (!isShowMenu) {
|
||||
document.querySelector(".email-menu-sidebar").classList.remove("menubar-show");
|
||||
}
|
||||
isShowMenu = false;
|
||||
}
|
||||
});
|
||||
favouriteBtn();
|
||||
}
|
||||
|
||||
// editor
|
||||
ClassicEditor.create(document.querySelector('#email-editor')).then(function (editor) {
|
||||
editor.ui.view.editable.element.style.height = '200px';
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error(error);
|
||||
});
|
||||
|
||||
// check all
|
||||
function checkBoxAll() {
|
||||
// checkbox-wrapper-mail
|
||||
Array.from(document.querySelectorAll(".checkbox-wrapper-mail input")).forEach(function (element) {
|
||||
element.addEventListener('click', function (el) {
|
||||
if (el.target.checked == true) {
|
||||
el.target.closest('li').classList.add("active");
|
||||
} else {
|
||||
el.target.closest('li').classList.remove("active");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// checkbox
|
||||
var checkboxes = document.querySelectorAll('.checkbox-wrapper-mail input');
|
||||
Array.from(checkboxes).forEach(function (element) {
|
||||
element.addEventListener('click', function (event) {
|
||||
var checkboxes = document.querySelectorAll('.checkbox-wrapper-mail input');
|
||||
var checkall = document.getElementById('checkall');
|
||||
var checkedCount = document.querySelectorAll('.checkbox-wrapper-mail input:checked').length;
|
||||
checkall.checked = checkedCount > 0;
|
||||
checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
|
||||
|
||||
if (event.target.closest('li').classList.contains("active")) {
|
||||
(checkedCount > 0) ? document.getElementById("email-topbar-actions").style.display = 'block': document.getElementById("email-topbar-actions").style.display = 'none';
|
||||
} else {
|
||||
(checkedCount > 0) ? document.getElementById("email-topbar-actions").style.display = 'block': document.getElementById("email-topbar-actions").style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
function checkAll() {
|
||||
var checkboxes = document.querySelectorAll('.checkbox-wrapper-mail input');
|
||||
var checkedCount = document.querySelectorAll('.checkbox-wrapper-mail input:checked').length;
|
||||
Array.from(checkboxes).forEach(function (chkbox) {
|
||||
chkbox.checked = true;
|
||||
chkbox.parentNode.parentNode.parentNode.classList.add("active");
|
||||
});
|
||||
(checkedCount > 0) ? document.getElementById("email-topbar-actions").style.display = 'none' : document.getElementById("email-topbar-actions").style.display = 'block';
|
||||
|
||||
if(checkedCount > 0){
|
||||
Array.from(checkboxes).forEach(function (chkbox) {
|
||||
chkbox.checked = false;
|
||||
chkbox.parentNode.parentNode.parentNode.classList.remove("active");
|
||||
});
|
||||
}else{
|
||||
Array.from(checkboxes).forEach(function (chkbox) {
|
||||
chkbox.checked = true;
|
||||
chkbox.parentNode.parentNode.parentNode.classList.add("active");
|
||||
});
|
||||
}
|
||||
this.onclick = uncheckAll;
|
||||
removeItems();
|
||||
}
|
||||
|
||||
function uncheckAll() {
|
||||
var checkboxes = document.querySelectorAll('.checkbox-wrapper-mail input');
|
||||
var checkedCount = document.querySelectorAll('.checkbox-wrapper-mail input:checked').length;
|
||||
Array.from(checkboxes).forEach(function (chkbox) {
|
||||
chkbox.checked = false;
|
||||
chkbox.parentNode.parentNode.parentNode.classList.remove("active");
|
||||
});
|
||||
(checkedCount > 0) ? document.getElementById("email-topbar-actions").style.display = 'none' : document.getElementById("email-topbar-actions").style.display = 'block';
|
||||
if(checkedCount > 0){
|
||||
Array.from(checkboxes).forEach(function (chkbox) {
|
||||
chkbox.checked = false;
|
||||
chkbox.parentNode.parentNode.parentNode.classList.remove("active");
|
||||
});
|
||||
}else{
|
||||
Array.from(checkboxes).forEach(function (chkbox) {
|
||||
chkbox.checked = true;
|
||||
chkbox.parentNode.parentNode.parentNode.classList.add("active");
|
||||
});
|
||||
}
|
||||
this.onclick = checkAll;
|
||||
}
|
||||
|
||||
var checkall = document.getElementById("checkall");
|
||||
checkall.onclick = checkAll;
|
||||
}
|
||||
|
||||
//User current Id
|
||||
var currentChatId = "users-chat";
|
||||
scrollToBottom(currentChatId);
|
||||
// // Scroll to Bottom
|
||||
function scrollToBottom(id) {
|
||||
setTimeout(function () {
|
||||
var simpleBar = (document.getElementById(id).querySelector("#chat-conversation .simplebar-content-wrapper")) ?
|
||||
document.getElementById(id).querySelector("#chat-conversation .simplebar-content-wrapper") : ''
|
||||
|
||||
var offsetHeight = document.getElementsByClassName("chat-conversation-list")[0] ?
|
||||
document.getElementById(id).getElementsByClassName("chat-conversation-list")[0].scrollHeight - window.innerHeight + 750 : 0;
|
||||
|
||||
if (offsetHeight)
|
||||
simpleBar.scrollTo({
|
||||
top: offsetHeight,
|
||||
behavior: "smooth"
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// removeItems
|
||||
function removeItems() {
|
||||
var removeItem = document.getElementById('removeItemModal');
|
||||
removeItem.addEventListener('show.bs.modal', function (event) {
|
||||
document.getElementById("delete-record").addEventListener("click", function () {
|
||||
Array.from(document.querySelectorAll(".message-list li")).forEach(function (element) {
|
||||
var filtered = '';
|
||||
if (element.classList.contains("active")) {
|
||||
|
||||
var getid = element.querySelector('.form-check-input').value;
|
||||
|
||||
function arrayRemove(arr, value) {
|
||||
return arr.filter(function (ele) {
|
||||
return ele.id != value;
|
||||
});
|
||||
}
|
||||
|
||||
var filtered = arrayRemove(allmaillist, getid);
|
||||
|
||||
allmaillist = filtered;
|
||||
|
||||
element.remove();
|
||||
}
|
||||
});
|
||||
document.getElementById("btn-close").click();
|
||||
if (document.getElementById("email-topbar-actions"))
|
||||
document.getElementById("email-topbar-actions").style.display = 'none';
|
||||
checkall.indeterminate = false;
|
||||
checkall.checked = false;
|
||||
});
|
||||
})
|
||||
}
|
||||
removeItems();
|
||||
|
||||
|
||||
var markAllReadBtn = document.getElementById("mark-all-read");
|
||||
|
||||
markAllReadBtn.addEventListener('click', function (event) {
|
||||
if (document.querySelectorAll(".message-list li.unread").length === 0) {
|
||||
document.getElementById("unreadConversations").style.display = "block";
|
||||
setTimeout(hideclipboardNew, 1000);
|
||||
|
||||
function hideclipboardNew() {
|
||||
document.getElementById("unreadConversations").style.display = "none";
|
||||
}
|
||||
};
|
||||
|
||||
Array.from(document.querySelectorAll(".message-list li.unread")).forEach(function (element) {
|
||||
if (element.classList.contains("unread")) {
|
||||
element.classList.remove("unread");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
var dummyUserImage = "assets/images/users/user-dummy-img.jpg";
|
||||
|
||||
// email chat detail element
|
||||
var mailChatDetailElm = false;
|
||||
Array.from(document.querySelectorAll(".email-chat-list a")).forEach(function (item) {
|
||||
item.addEventListener("click", function (event) {
|
||||
document.getElementById("emailchat-detailElem").style.display = "block";
|
||||
mailChatDetailElm = true;
|
||||
|
||||
// chat user list link active
|
||||
var chatUserList = document.querySelector(".email-chat-list a.active");
|
||||
if (chatUserList) chatUserList.classList.remove("active");
|
||||
this.classList.add("active");
|
||||
|
||||
var currentChatId = "users-chat";
|
||||
scrollToBottom(currentChatId);
|
||||
|
||||
//user Name and user Profile change on click
|
||||
var username = item.querySelector(".chatlist-user-name").innerHTML;
|
||||
var userProfile = item.querySelector(".chatlist-user-image img").getAttribute("src");
|
||||
|
||||
document.querySelector(".email-chat-detail .profile-username").innerHTML = username;
|
||||
var conversationImg = document.getElementById("users-conversation");
|
||||
Array.from(conversationImg.querySelectorAll(".left .chat-avatar")).forEach(function (item) {
|
||||
if (userProfile) {
|
||||
item.querySelector("img").setAttribute("src", userProfile);
|
||||
} else {
|
||||
item.querySelector("img").setAttribute("src", dummyUserImage);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById("emailchat-btn-close").addEventListener("click", function () {
|
||||
document.getElementById("emailchat-detailElem").style.display = "none";
|
||||
})
|
||||
|
||||
// emailDetailChange
|
||||
function emailDetailChange() {
|
||||
Array.from(document.querySelectorAll(".message-list li")).forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
var subjectTitle = item.querySelector(".subject-title").innerHTML;
|
||||
document.querySelector(".email-subject-title").innerHTML = subjectTitle;
|
||||
|
||||
var emailTitleLeftName = item.querySelector(".title-name").innerHTML;
|
||||
Array.from(document.querySelectorAll(".accordion-item.left")).forEach(function (subitem) {
|
||||
subitem.querySelector(".email-user-name").innerHTML = emailTitleLeftName;
|
||||
var userImg = item.querySelector(".mail-userimg").value;
|
||||
subitem.querySelector("img").setAttribute("src", userImg)
|
||||
});
|
||||
|
||||
var messageUserName = document.querySelector(".user-name-text").innerHTML;
|
||||
var usermailProfile = document.querySelector(".header-profile-user").getAttribute("src");
|
||||
Array.from(document.querySelectorAll(".accordion-item.right")).forEach(function (subitem) {
|
||||
subitem.querySelector(".email-user-name-right").innerHTML = messageUserName;
|
||||
subitem.querySelector("img").setAttribute("src", usermailProfile);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
44
resources/js/pages/materialdesign.list.js
vendored
Executable file
44
resources/js/pages/materialdesign.list.js
vendored
Executable file
File diff suppressed because one or more lines are too long
27
resources/js/pages/modal.init.js
vendored
Executable file
27
resources/js/pages/modal.init.js
vendored
Executable file
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Modal init js
|
||||
*/
|
||||
|
||||
|
||||
var varyingcontentModal = document.getElementById('varyingcontentModal')
|
||||
if (varyingcontentModal) {
|
||||
varyingcontentModal.addEventListener('show.bs.modal', function (event) {
|
||||
// Button that triggered the modal
|
||||
var button = event.relatedTarget
|
||||
// Extract info from data-bs-* attributes
|
||||
var recipient = button.getAttribute('data-bs-whatever')
|
||||
// If necessary, you could initiate an AJAX request here
|
||||
// and then do the updating in a callback.
|
||||
//
|
||||
// Update the modal's content.
|
||||
var modalTitle = varyingcontentModal.querySelector('.modal-title')
|
||||
var modalBodyInput = varyingcontentModal.querySelector('.modal-body input')
|
||||
|
||||
modalTitle.textContent = 'New message to ' + recipient
|
||||
modalBodyInput.value = recipient
|
||||
})
|
||||
}
|
||||
35
resources/js/pages/nestable.init.js
vendored
Executable file
35
resources/js/pages/nestable.init.js
vendored
Executable file
@@ -0,0 +1,35 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: nestable init js
|
||||
*/
|
||||
|
||||
// Nested sortable demo
|
||||
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
|
||||
|
||||
// Loop through each nested sortable element
|
||||
if (nestedSortables)
|
||||
Array.from(nestedSortables).forEach(function (nestedSort){
|
||||
new Sortable(nestedSort, {
|
||||
group: 'nested',
|
||||
animation: 150,
|
||||
fallbackOnBody: true,
|
||||
swapThreshold: 0.65
|
||||
});
|
||||
});
|
||||
|
||||
// Nested sortable handle demo
|
||||
var nestedSortablesHandles = [].slice.call(document.querySelectorAll('.nested-sortable-handle'));
|
||||
if (nestedSortablesHandles)
|
||||
// Loop through each nested sortable element
|
||||
Array.from(nestedSortablesHandles).forEach(function (nestedSortHandle){
|
||||
new Sortable(nestedSortHandle, {
|
||||
handle: '.handle',
|
||||
group: 'nested',
|
||||
animation: 150,
|
||||
fallbackOnBody: true,
|
||||
swapThreshold: 0.65
|
||||
});
|
||||
});
|
||||
97
resources/js/pages/nft-landing.init.js
vendored
Executable file
97
resources/js/pages/nft-landing.init.js
vendored
Executable file
@@ -0,0 +1,97 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: nft-landing init js
|
||||
*/
|
||||
|
||||
// Window scroll sticky class add
|
||||
function windowScroll() {
|
||||
var navbar = document.getElementById("navbar");
|
||||
if (navbar) {
|
||||
if (document.body.scrollTop >= 50 || document.documentElement.scrollTop >= 50) {
|
||||
navbar.classList.add("is-sticky");
|
||||
} else {
|
||||
navbar.classList.remove("is-sticky");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', function (ev) {
|
||||
ev.preventDefault();
|
||||
windowScroll();
|
||||
});
|
||||
|
||||
// filter btn
|
||||
var filterBtns = document.querySelectorAll(".filter-btns .nav-link");
|
||||
var productItems = document.querySelectorAll(".product-item");
|
||||
|
||||
Array.from(filterBtns).forEach(function (button) {
|
||||
button.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
for (var i = 0; i < filterBtns.length; i++) {
|
||||
filterBtns[i].classList.remove("active");
|
||||
}
|
||||
this.classList.add("active");
|
||||
|
||||
var filter = e.target.dataset.filter;
|
||||
|
||||
Array.from(productItems).forEach(function (item) {
|
||||
if (filter === "all") {
|
||||
item.style.display = "block";
|
||||
} else {
|
||||
if (item.classList.contains(filter)) {
|
||||
item.style.display = "block";
|
||||
} else {
|
||||
item.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
//collection categories
|
||||
var swiper = new Swiper(".mySwiper", {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 30,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".swiper-button-next",
|
||||
prevEl: ".swiper-button-prev",
|
||||
},
|
||||
});
|
||||
|
||||
//
|
||||
/********************* scroll top js ************************/
|
||||
//
|
||||
|
||||
var mybutton = document.getElementById("back-to-top");
|
||||
|
||||
// When the user scrolls down 20px from the top of the document, show the button
|
||||
window.onscroll = function () {
|
||||
scrollFunction();
|
||||
};
|
||||
|
||||
function scrollFunction() {
|
||||
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
|
||||
mybutton.style.display = "block";
|
||||
} else {
|
||||
mybutton.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
// When the user clicks on the button, scroll to the top of the document
|
||||
function topFunction() {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
60
resources/js/pages/notifications.init.js
vendored
Executable file
60
resources/js/pages/notifications.init.js
vendored
Executable file
@@ -0,0 +1,60 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Notifications init js
|
||||
*/
|
||||
|
||||
// Bordered Toast
|
||||
var toastTrigger2 = document.getElementById("borderedToast1Btn");
|
||||
var toastLiveExample2 = document.getElementById("borderedToast1");
|
||||
if (toastTrigger2 && toastLiveExample2) {
|
||||
toastTrigger2.addEventListener("click", function () {
|
||||
var toast = new bootstrap.Toast(toastLiveExample2);
|
||||
toast.show();
|
||||
});
|
||||
}
|
||||
|
||||
var toastTrigger3 = document.getElementById("borderedToast2Btn");
|
||||
var toastLiveExample3 = document.getElementById("borderedToast2");
|
||||
if (toastTrigger3 && toastLiveExample3) {
|
||||
toastTrigger3.addEventListener("click", function () {
|
||||
var toast = new bootstrap.Toast(toastLiveExample3);
|
||||
toast.show();
|
||||
});
|
||||
}
|
||||
|
||||
var toastTrigger4 = document.getElementById("borderedTost3Btn");
|
||||
var toastLiveExample4 = document.getElementById("borderedTost3");
|
||||
if (toastTrigger4 && toastLiveExample4) {
|
||||
toastTrigger4.addEventListener("click", function () {
|
||||
var toast = new bootstrap.Toast(toastLiveExample4);
|
||||
toast.show();
|
||||
});
|
||||
}
|
||||
|
||||
var toastTrigger5 = document.getElementById("borderedToast4Btn");
|
||||
var toastLiveExample5 = document.getElementById("borderedToast4");
|
||||
if (toastTrigger5 && toastLiveExample5) {
|
||||
toastTrigger5.addEventListener("click", function () {
|
||||
var toast = new bootstrap.Toast(toastLiveExample5);
|
||||
toast.show();
|
||||
});
|
||||
}
|
||||
|
||||
// placement toast
|
||||
toastPlacement = document.getElementById("toastPlacement");
|
||||
toastPlacement && document.getElementById("selectToastPlacement").addEventListener("change", function () {
|
||||
toastPlacement.dataset.originalClass ||
|
||||
(toastPlacement.dataset.originalClass = toastPlacement.className),
|
||||
(toastPlacement.className =
|
||||
toastPlacement.dataset.originalClass + " " + this.value);
|
||||
}),
|
||||
|
||||
Array.from(document.querySelectorAll(".bd-example .toast")).forEach(function (a) {
|
||||
var b = new bootstrap.Toast(a, {
|
||||
autohide: !1
|
||||
});
|
||||
b.show();
|
||||
});
|
||||
573
resources/js/pages/order-files.js
vendored
Executable file
573
resources/js/pages/order-files.js
vendored
Executable file
@@ -0,0 +1,573 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: file-manager Js File
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
|
||||
if (color) return color;
|
||||
else return newValue;;
|
||||
} else {
|
||||
var val = value.split(',');
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Simple Donut Charts
|
||||
var chartDonutBasicColors = getChartColorsArray("simple_dount_chart");
|
||||
if (chartDonutBasicColors) {
|
||||
var options = {
|
||||
series: [27.01, 20.87, 33.54, 37.58],
|
||||
chart: {
|
||||
height: 330,
|
||||
type: 'donut',
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
},
|
||||
labels: ["Documents", "Media", "Others", "Free Space"],
|
||||
dataLabels: {
|
||||
dropShadow: {
|
||||
enabled: false,
|
||||
}
|
||||
},
|
||||
colors: chartDonutBasicColors
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#simple_dount_chart"), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var url="assets/json/";
|
||||
var allFileList = '';
|
||||
var editFlag = false;
|
||||
|
||||
//mail list by json
|
||||
var getJSON = function (jsonurl, callback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", url + jsonurl, true);
|
||||
xhr.responseType = "json";
|
||||
xhr.onload = function () {
|
||||
var status = xhr.status;
|
||||
if (status === 200) {
|
||||
callback(null, xhr.response);
|
||||
} else {
|
||||
callback(status, xhr.response);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
};
|
||||
|
||||
// get json
|
||||
getJSON("filemanager-filelist.json", function (err, data) {
|
||||
if (err !== null) {
|
||||
console.log("Something went wrong: " + err);
|
||||
} else {
|
||||
allFileList = data;
|
||||
loadFileData(allFileList);
|
||||
}
|
||||
});
|
||||
|
||||
// load product data
|
||||
function loadFileData(datas) {
|
||||
document.querySelector("#file-list").innerHTML = '';
|
||||
Array.from(datas).forEach(function (fileData, index) {
|
||||
var fileIconElm
|
||||
if (fileData.fileName.includes(".")) {
|
||||
var fileIcon = fileData.fileName.split(".");
|
||||
function isStatus(val) {
|
||||
switch (val) {
|
||||
case "png":
|
||||
return (
|
||||
'<i class="ri-gallery-fill align-bottom text-success"></i>'
|
||||
);
|
||||
case "jpg":
|
||||
return (
|
||||
'<i class="ri-gallery-fill align-bottom text-success"></i>'
|
||||
);
|
||||
case "pdf":
|
||||
return (
|
||||
'<i class="ri-file-pdf-fill align-bottom text-danger"></i>'
|
||||
);
|
||||
case "docx":
|
||||
return (
|
||||
'<i class="ri-file-text-fill align-bottom text-secondary"></i>'
|
||||
);
|
||||
case "txt":
|
||||
return (
|
||||
'<i class="ri-file-text-fill align-bottom text-secondary"></i>'
|
||||
);
|
||||
default:
|
||||
return (
|
||||
'<i class="ri-file-text-fill align-bottom text-secondary"></i>'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
fileIconElm = isStatus(fileIcon[1])
|
||||
} else {
|
||||
fileIconElm = '<i class="ri-folder-2-fill align-bottom text-warning"></i>'
|
||||
}
|
||||
|
||||
var checkStarred = fileData.starred ? "active" : "";
|
||||
|
||||
document.querySelector("#file-list").innerHTML +=
|
||||
'<tr>\
|
||||
<td>\
|
||||
<input class="form-control filelist-id" type="hidden" value="' + fileData.id + '" id="filelist-' + fileData.id + '">\
|
||||
<div class="d-flex align-items-center">\
|
||||
<div class="flex-shrink-0 fs-17 me-2 filelist-icon">'+ fileIconElm + '</div>\
|
||||
<div class="flex-grow-1 filelist-name">'+ fileData.fileName + '</div>\
|
||||
<div class="d-none filelist-type">'+ fileData.filetype + '</div>\
|
||||
</div>\
|
||||
</td>\
|
||||
<td>'+ fileData.fileItem + '</td>\
|
||||
<td class="filelist-size">'+ fileData.fileSize + '</td>\
|
||||
<td class="filelist-create">'+ fileData.date + '</td>\
|
||||
<td>\
|
||||
<div class="d-flex gap-3 justify-content-center">\
|
||||
<button type="button" class="btn btn-ghost-primary btn-icon btn-sm favourite-btn ' + checkStarred + '">\
|
||||
<i class="ri-star-fill fs-13 align-bottom"></i>\
|
||||
</button>\
|
||||
<div class="dropdown">\
|
||||
<button class="btn btn-light btn-icon btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">\
|
||||
<i class="ri-more-fill align-bottom"></i>\
|
||||
</button>\
|
||||
<ul class="dropdown-menu dropdown-menu-end">\
|
||||
<li><a class="dropdown-item viewfile-list" href="#">View</a></li>\
|
||||
<li><a class="dropdown-item edit-list" href="#createFileModal" data-bs-toggle="modal" data-edit-id='+ fileData.id + ' role="button">Rename</a></li>\
|
||||
<li class="dropdown-divider"></li>\
|
||||
<li><a class="dropdown-item remove-list" href="#removeFileItemModal" data-id='+ fileData.id + ' data-bs-toggle="modal" role="button">Delete</a></li>\
|
||||
</ul>\
|
||||
</div>\
|
||||
</div>\
|
||||
</td>\
|
||||
</tr>';
|
||||
|
||||
favouriteBtn();
|
||||
removeSingleItem();
|
||||
editFileList();
|
||||
fileDetailShow();
|
||||
});
|
||||
}
|
||||
|
||||
// favourite btn
|
||||
function favouriteBtn() {
|
||||
Array.from(document.querySelectorAll(".favourite-btn")).forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
if (item.classList.contains("active")) {
|
||||
item.classList.remove("active");
|
||||
} else {
|
||||
item.classList.add("active");
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
favouriteBtn();
|
||||
|
||||
Array.from(document.querySelectorAll('.file-manager-menu a')).forEach(function (fileTab) {
|
||||
fileTab.addEventListener("click", function () {
|
||||
var folderListelm = document.querySelector(".file-manager-menu a.active");
|
||||
if (folderListelm) folderListelm.classList.remove("active");
|
||||
fileTab.classList.add('active');
|
||||
|
||||
var tabname = fileTab.querySelector('.file-list-link').innerHTML;
|
||||
document.getElementById("file-list").innerHTML = '';
|
||||
|
||||
if (tabname != 'My Drive'){
|
||||
document.getElementById("filetype-title").innerHTML = tabname;
|
||||
}else{
|
||||
document.getElementById("filetype-title").innerHTML = "Recent file";
|
||||
}
|
||||
|
||||
if (tabname != 'My Drive' && tabname != 'Important' && tabname != 'Recents') {
|
||||
var filterData = allFileList.filter(filelist => filelist.filetype === tabname);
|
||||
document.getElementById("folder-list").style.display = "none";
|
||||
} else if(tabname == "Important"){
|
||||
var filterData = allFileList.filter(filelist => filelist.starred == true);
|
||||
document.getElementById("folder-list").style.display = "none";
|
||||
} else {
|
||||
var filterData = allFileList;
|
||||
document.getElementById("folder-list").style.display = "block";
|
||||
}
|
||||
|
||||
if(tabname == 'Recents'){
|
||||
document.getElementById("folder-list").style.display = "none";
|
||||
}
|
||||
|
||||
loadFileData(filterData);
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
//Create a new folder
|
||||
var createFolderForms = document.querySelectorAll('.createfolder-form')
|
||||
Array.prototype.slice.call(createFolderForms).forEach(function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
event.preventDefault();
|
||||
var folderName = document.getElementById("foldername-input").value;
|
||||
var uniqueid = Math.floor(Math.random() * 100);
|
||||
folderlisthtml =
|
||||
'<div class="col-xxl-3 col-sm-6 folder-card">\
|
||||
<div class="card bg-light shadow-none" id="folder-'+ uniqueid + '">\
|
||||
<div class="card-body">\
|
||||
<div class="d-flex mb-1">\
|
||||
<div class="form-check form-check-danger mb-3 fs-15 flex-grow-1">\
|
||||
<input class="form-check-input" type="checkbox" value="" id="folderlistCheckbox_'+ uniqueid + '">\
|
||||
<label class="form-check-label" for="folderlistCheckbox_'+ uniqueid + '"></label>\
|
||||
</div>\
|
||||
<div class="dropdown">\
|
||||
<button class="btn btn-ghost-primary btn-icon btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">\
|
||||
<i class="ri-more-2-fill fs-16 align-bottom"></i>\
|
||||
</button>\
|
||||
<ul class="dropdown-menu dropdown-menu-end">\
|
||||
<li><a class="dropdown-item view-item-btn" href="javascript:void(0);">Open</a></li>\
|
||||
<li><a class="dropdown-item edit-folder-list" href="#createFolderModal" data-bs-toggle="modal" role="button">Rename</a></li>\
|
||||
<li><a class="dropdown-item" href="#removeFolderModal" data-bs-toggle="modal" role="button">Delete</a></li>\
|
||||
</ul>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="text-center">\
|
||||
<div class="mb-2">\
|
||||
<i class="ri-folder-2-fill align-bottom text-warning display-5"></i>\
|
||||
</div>\
|
||||
<h6 class="fs-15 folder-name">'+ folderName + '</h6>\
|
||||
</div>\
|
||||
<div class="hstack mt-4 text-muted">\
|
||||
<span class="me-auto"><b>0</b> Files</span>\
|
||||
<span><b>0</b>GB</span>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
|
||||
|
||||
if (folderName !== "" && !editFlag) {
|
||||
var folderListdata = document.getElementById("folderlist-data");
|
||||
folderListdata.insertAdjacentHTML("afterbegin", folderlisthtml);
|
||||
var addFolderClose = document.getElementById("addFolderBtn-close");
|
||||
addFolderClose.click();
|
||||
editFolderList();
|
||||
} else if (folderName !== "" && editFlag) {
|
||||
var getEditid = 0;
|
||||
getEditid = document.getElementById("folderid-input").value;
|
||||
document.getElementById(getEditid).querySelector('.folder-name').innerHTML = folderName
|
||||
var addFolderClose = document.getElementById("addFolderBtn-close");
|
||||
addFolderClose.click();
|
||||
editFlag = false;
|
||||
document.getElementById("addNewFolder").innerHTML = "Add Folder";
|
||||
document.getElementById("createFolderModalLabel").innerHTML = "Create Folder";
|
||||
document.getElementById("folderid-input").value = "";
|
||||
document.getElementById("foldername-input").value = "";
|
||||
}
|
||||
document.getElementById("folderid-input").value = "";
|
||||
document.getElementById("foldername-input").value = "";
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false)
|
||||
});
|
||||
|
||||
function editFolderList() {
|
||||
Array.from(document.querySelectorAll(".folder-card")).forEach(function (item) {
|
||||
Array.from(item.querySelectorAll(".edit-folder-list")).forEach(function (subitem) {
|
||||
subitem.addEventListener('click', function (event) {
|
||||
|
||||
var editid = item.querySelector(".card").getAttribute('id');
|
||||
var getEditid = editid.split("-")[1];
|
||||
var checkid = item.querySelector(".form-check .form-check-input").getAttribute('id')
|
||||
var getCheckid = checkid.split("_")[1];
|
||||
|
||||
if (getEditid == getCheckid) {
|
||||
editFlag = true;
|
||||
document.getElementById("addNewFolder").innerHTML = "Save";
|
||||
document.getElementById("createFolderModalLabel").innerHTML = "Folder Rename";
|
||||
document.getElementById("folderid-input").value = 'folder-' + getEditid;
|
||||
document.getElementById("foldername-input").value = item.querySelector(".folder-name").innerHTML;
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
editFolderList();
|
||||
|
||||
// Remove folder from list
|
||||
var removeProduct = document.getElementById('removeFolderModal')
|
||||
if (removeProduct) {
|
||||
removeProduct.addEventListener('show.bs.modal', function (e) {
|
||||
document.getElementById('remove-folderList').addEventListener('click', function (event) {
|
||||
e.relatedTarget.closest('.folder-card').remove();
|
||||
document.getElementById("close-removeFoldermodal").click();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// date & time
|
||||
var date = new Date().toUTCString().slice(5, 16);
|
||||
|
||||
function editFileList() {
|
||||
var getEditid = 0;
|
||||
Array.from(document.querySelectorAll(".edit-list")).forEach(function (elem) {
|
||||
elem.addEventListener('click', function (event) {
|
||||
getEditid = elem.getAttribute('data-edit-id');
|
||||
|
||||
allFileList = allFileList.map(function (item) {
|
||||
if (item.id == getEditid) {
|
||||
editFlag = true;
|
||||
document.getElementById("addNewFile").innerHTML = "Save";
|
||||
document.getElementById("createFileModalLabel").innerHTML = "File Rename";
|
||||
document.getElementById("filename-input").value = item.fileName;
|
||||
document.getElementById("fileid-input").value = item.id;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
Array.from(document.querySelectorAll(".createFile-modal")).forEach(function (elem) {
|
||||
elem.addEventListener('click', function (event) {
|
||||
document.getElementById("addNewFile").innerHTML = "Create";
|
||||
document.getElementById("createFileModalLabel").innerHTML = "Create File";
|
||||
document.getElementById("filename-input").value = "";
|
||||
document.getElementById("fileid-input").value = "";
|
||||
document.getElementById("createfile-form").classList.remove("was-validated");
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(document.querySelectorAll(".create-folder-modal")).forEach(function (elem) {
|
||||
elem.addEventListener('click', function (event) {
|
||||
document.getElementById("addNewFolder").innerHTML = "Add Folder";
|
||||
document.getElementById("createFolderModalLabel").innerHTML = "Create Folder";
|
||||
document.getElementById("folderid-input").value = "";
|
||||
document.getElementById("foldername-input").value = "";
|
||||
document.getElementById("createfolder-form").classList.remove("was-validated");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var createFileForms = document.querySelectorAll('.createfile-form')
|
||||
Array.prototype.slice.call(createFileForms).forEach(function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (!form.checkValidity()) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
event.preventDefault();
|
||||
|
||||
var fileName = document.getElementById("filename-input").value;
|
||||
var uniqueid = Math.floor(Math.random() * 100);
|
||||
|
||||
if (fileName !== "" && !editFlag) {
|
||||
var newObj = {
|
||||
"id": uniqueid,
|
||||
"fileName": fileName + ".txt",
|
||||
"filetype": "Documents",
|
||||
"fileItem": "01",
|
||||
"fileSize": "0 KB",
|
||||
"date": date,
|
||||
"starred": false
|
||||
};
|
||||
|
||||
allFileList.push(newObj);
|
||||
sortElementsById();
|
||||
document.getElementById("addFileBtn-close").click();
|
||||
} else if (fileName !== "" && editFlag) {
|
||||
var getEditid = 0;
|
||||
getEditid = document.getElementById("fileid-input").value;
|
||||
allFileList = allFileList.map(function (item) {
|
||||
if (item.id == getEditid) {
|
||||
var editObj = {
|
||||
"id": item.id,
|
||||
"fileName": document.getElementById("filename-input").value,
|
||||
"filetype": item.filetype,
|
||||
"fileItem": item.fileItem,
|
||||
"fileSize": item.fileSize,
|
||||
"date": item.date,
|
||||
"starred": item.starred,
|
||||
};
|
||||
return editObj;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
editFlag = false
|
||||
document.getElementById("addFileBtn-close").click();
|
||||
}
|
||||
|
||||
loadFileData(allFileList);
|
||||
|
||||
document.getElementById("addNewFile").innerHTML = "Create";
|
||||
document.getElementById("createFileModalLabel").innerHTML = "Create File";
|
||||
}
|
||||
form.classList.add('was-validated');
|
||||
}, false)
|
||||
});
|
||||
|
||||
|
||||
function fetchIdFromObj(member) {
|
||||
return parseInt(member.id);
|
||||
}
|
||||
|
||||
function sortElementsById() {
|
||||
var manyfile = allFileList.sort(function (a, b) {
|
||||
var x = fetchIdFromObj(a);
|
||||
var y = fetchIdFromObj(b);
|
||||
|
||||
if (x > y) {
|
||||
return -1;
|
||||
}
|
||||
if (x < y) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
})
|
||||
loadFileData(manyfile);
|
||||
}
|
||||
|
||||
function removeSingleItem() {
|
||||
var getid = 0;
|
||||
Array.from(document.querySelectorAll(".remove-list")).forEach(function (item) {
|
||||
item.addEventListener('click', function (event) {
|
||||
getid = item.getAttribute('data-id');
|
||||
document.getElementById("remove-fileitem").addEventListener("click", function () {
|
||||
function arrayRemove(arr, value) {
|
||||
return arr.filter(function (ele) {
|
||||
return ele.id != value;
|
||||
});
|
||||
}
|
||||
var filtered = arrayRemove(allFileList, getid);
|
||||
|
||||
allFileList = filtered;
|
||||
|
||||
loadFileData(allFileList);
|
||||
document.getElementById("close-removefilemodal").click();
|
||||
document.getElementById("file-overview").style.display = "none";
|
||||
document.getElementById("folder-overview").style.display = "block";
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function fileDetailShow() {
|
||||
var bodyElement = document.getElementsByTagName('body')[0];
|
||||
Array.from(document.querySelectorAll(".close-btn-overview")).forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
bodyElement.classList.remove("file-detail-show");
|
||||
});
|
||||
});
|
||||
|
||||
Array.from(document.querySelectorAll("#file-list tr")).forEach(function (item) {
|
||||
item.querySelector(".viewfile-list").addEventListener("click", function () {
|
||||
bodyElement.classList.add("file-detail-show");
|
||||
document.getElementById("file-overview").style.display = "block";
|
||||
document.getElementById("folder-overview").style.display = "none";
|
||||
|
||||
var filelistId = item.querySelector(".filelist-id").value;
|
||||
var filelistIcon = item.querySelector(".filelist-icon i").className;
|
||||
var filelistName = item.querySelector(".filelist-name").innerHTML;
|
||||
var filelistSize = item.querySelector(".filelist-size").innerHTML;
|
||||
var filelistCreate = item.querySelector(".filelist-create").innerHTML;
|
||||
var filelistType = item.querySelector(".filelist-type").innerHTML;
|
||||
|
||||
|
||||
document.querySelector("#file-overview .file-icon i").className = filelistIcon;
|
||||
Array.from(document.querySelectorAll("#file-overview .file-name")).forEach(function (elm) {
|
||||
elm.innerHTML = filelistName;
|
||||
});
|
||||
Array.from(document.querySelectorAll("#file-overview .file-size")).forEach(function (elm) {
|
||||
elm.innerHTML = filelistSize;
|
||||
});
|
||||
Array.from(document.querySelectorAll("#file-overview .create-date")).forEach(function (elm) {
|
||||
elm.innerHTML = filelistCreate;
|
||||
});
|
||||
document.querySelector("#file-overview .file-type").innerHTML = filelistType;
|
||||
|
||||
document.querySelector("#file-overview .remove-file-overview").setAttribute("data-remove-id", filelistId);
|
||||
if(item.querySelector(".favourite-btn").classList.contains("active")){
|
||||
document.querySelector("#file-overview .favourite-btn").classList.add("active");
|
||||
}else{
|
||||
document.querySelector("#file-overview .favourite-btn").classList.remove("active");
|
||||
}
|
||||
});
|
||||
});
|
||||
var isShowMenu = false;
|
||||
var emailMenuSidebar = document.getElementsByClassName('file-manager-sidebar');
|
||||
Array.from(document.querySelectorAll(".file-menu-btn")).forEach(function (item) {
|
||||
item.addEventListener("click", function () {
|
||||
Array.from(emailMenuSidebar).forEach(function (elm) {
|
||||
elm.classList.add("menubar-show");
|
||||
isShowMenu = true;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('click', function (e) {
|
||||
if (document.querySelector(".file-manager-sidebar").classList.contains('menubar-show')) {
|
||||
if (!isShowMenu) {
|
||||
document.querySelector(".file-manager-sidebar").classList.remove("menubar-show");
|
||||
}
|
||||
isShowMenu = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removefileOverview() {
|
||||
var getid = 0;
|
||||
Array.from(document.querySelectorAll(".remove-file-overview")).forEach(function (item) {
|
||||
item.addEventListener('click', function (event) {
|
||||
getid = item.getAttribute('data-remove-id');
|
||||
document.getElementById("remove-fileitem").addEventListener("click", function () {
|
||||
var filtered = '';
|
||||
function arrayRemove(arr, value) {
|
||||
return arr.filter(function (ele) {
|
||||
return ele.id != value;
|
||||
});
|
||||
}
|
||||
filtered = arrayRemove(allFileList, getid);
|
||||
allFileList = filtered;
|
||||
loadFileData(allFileList);
|
||||
document.getElementById("close-removefilemodal").click();
|
||||
document.getElementsByTagName('body')[0].classList.remove("file-detail-show");
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
removefileOverview();
|
||||
|
||||
function windowResize() {
|
||||
var windowSize = document.documentElement.clientWidth;
|
||||
if (windowSize < 1400) {
|
||||
document.body.classList.remove("file-detail-show");
|
||||
} else {
|
||||
document.body.classList.add("file-detail-show");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
windowResize();
|
||||
window.addEventListener("resize", windowResize);
|
||||
|
||||
22
resources/js/pages/orders/create.js
vendored
Executable file
22
resources/js/pages/orders/create.js
vendored
Executable file
@@ -0,0 +1,22 @@
|
||||
let handleCustomerClick = function (element) {
|
||||
var customerBlock = document.getElementById("customer-block");
|
||||
var customerCompanyBlock = document.getElementById("customer-company-block");
|
||||
if (element === 'physical') {
|
||||
customerBlock.classList.remove('d-none');
|
||||
customerCompanyBlock.classList.add('d-none');
|
||||
} else {
|
||||
customerBlock.classList.add('d-none');
|
||||
customerCompanyBlock.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
let handleOwnerClick = function (element) {
|
||||
var ownerBlock = document.getElementById("owner-block");
|
||||
var ownerCompanyBlock = document.getElementById("owner-company-block");
|
||||
if (element === 'physical') {
|
||||
ownerBlock.classList.remove('d-none');
|
||||
ownerCompanyBlock.classList.add('d-none');
|
||||
} else {
|
||||
ownerBlock.classList.add('d-none');
|
||||
ownerCompanyBlock.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
67
resources/js/pages/orders/show.js
vendored
Executable file
67
resources/js/pages/orders/show.js
vendored
Executable file
@@ -0,0 +1,67 @@
|
||||
var conclusionViewModalLabel = document.getElementById('conclusionViewModal');
|
||||
conclusionViewModalLabel.addEventListener('show.bs.modal', function (event) {
|
||||
// Button that triggered the modal
|
||||
var button = event.relatedTarget; // Extract info from data-bs-* attributes
|
||||
|
||||
var file = button.getAttribute('data-bs-file'); // If necessary, you could initiate an AJAX request here
|
||||
var fileName = button.getAttribute('data-bs-file-name'); // If necessary, you could initiate an AJAX request here
|
||||
console.log("btn id", fileName);
|
||||
// and then do the updating in a callback.
|
||||
//
|
||||
// Update the modal's content.
|
||||
|
||||
var modalTitle = conclusionViewModalLabel.querySelector('.modal-title');
|
||||
var modalBodyInput = conclusionViewModalLabel.querySelector('.modal-body object');
|
||||
modalTitle.textContent = 'Opening file ' + fileName;
|
||||
modalBodyInput.setAttribute("data", file);
|
||||
});
|
||||
|
||||
var dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
|
||||
dropzonePreviewNode.itemid = "1234524";
|
||||
var previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);
|
||||
var _token = document.querySelector('input[name="_token"]').value;
|
||||
Dropzone.autoDiscover = false;
|
||||
|
||||
var file_up_names = [];
|
||||
let dropzoneForm = new Dropzone("#createfile-form", {
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
createImageThumbnails: true,
|
||||
acceptedFiles: ".png,.jpg,.jpeg",
|
||||
clickable: true,
|
||||
addRemoveLinks: false,
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': _token,
|
||||
},
|
||||
/*success: function(file, response) {
|
||||
file_up_names.push(response);
|
||||
console.table(file_up_names);
|
||||
},
|
||||
removedfile: function(file) {
|
||||
x = confirm('Do you want to delete this logo?');
|
||||
if (!x) return false;
|
||||
for (var i = 0; i < file_up_names.length; i++) {
|
||||
console.table(file_up_names);
|
||||
console.log(file);
|
||||
if (file_up_names[i] === file) {
|
||||
alert(file_up_names[i]);
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: 'delete-logo.php',
|
||||
data: "file_name=" + file_up_names[i],
|
||||
dataType: 'html'
|
||||
});
|
||||
myDropzone.options.maxFiles = myDropzone.options.maxFiles + 1;
|
||||
var _ref;
|
||||
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file
|
||||
.previewElement) : void 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
dictRemoveFile: 'Remove Logo',*/
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
132
resources/js/pages/particles.app.js
vendored
Executable file
132
resources/js/pages/particles.app.js
vendored
Executable file
@@ -0,0 +1,132 @@
|
||||
/* -----------------------------------------------
|
||||
/* How to use? : Check the GitHub README
|
||||
/* ----------------------------------------------- */
|
||||
|
||||
/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
|
||||
/*
|
||||
particlesJS.load('particles-js', 'particles.json', function() {
|
||||
console.log('particles.js loaded - callback');
|
||||
});
|
||||
*/
|
||||
|
||||
/* Otherwise just put the config content (json): */
|
||||
|
||||
|
||||
particlesJS('auth-particles',
|
||||
{
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 90,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.8,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"opacity_min": 0,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 4,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 4,
|
||||
"size_min": 0.2,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 150,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 2,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "bubble"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 4,
|
||||
"duration": 2,
|
||||
"opacity": 0.8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true,
|
||||
"config_demo": {
|
||||
"hide_card": false,
|
||||
"background_color": "#b61924",
|
||||
"background_image": "",
|
||||
"background_position": "50% 50%",
|
||||
"background_repeat": "no-repeat",
|
||||
"background_size": "cover"
|
||||
}
|
||||
}
|
||||
);
|
||||
94
resources/js/pages/passowrd-create.init.js
vendored
Executable file
94
resources/js/pages/passowrd-create.init.js
vendored
Executable file
@@ -0,0 +1,94 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Password addon Js File
|
||||
*/
|
||||
|
||||
// password addon
|
||||
Array.from(document.querySelectorAll("form .auth-pass-inputgroup")).forEach(function (item) {
|
||||
Array.from(item.querySelectorAll(".password-addon")).forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function (event) {
|
||||
var passwordInput = item.querySelector(".password-input");
|
||||
if (passwordInput.type === "password") {
|
||||
passwordInput.type = "text";
|
||||
} else {
|
||||
passwordInput.type = "password";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// passowrd match
|
||||
var password = document.getElementById("password-input"),
|
||||
confirm_password = document.getElementById("confirm-password-input");
|
||||
|
||||
function validatePassword() {
|
||||
if (password.value != confirm_password.value) {
|
||||
confirm_password.setCustomValidity("Passwords Don't Match");
|
||||
} else {
|
||||
confirm_password.setCustomValidity("");
|
||||
}
|
||||
}
|
||||
|
||||
//Password validation
|
||||
password.onchange = validatePassword;
|
||||
|
||||
var myInput = document.getElementById("password-input");
|
||||
var letter = document.getElementById("pass-lower");
|
||||
var capital = document.getElementById("pass-upper");
|
||||
var number = document.getElementById("pass-number");
|
||||
var length = document.getElementById("pass-length");
|
||||
|
||||
// When the user clicks on the password field, show the message box
|
||||
myInput.onfocus = function () {
|
||||
document.getElementById("password-contain").style.display = "block";
|
||||
};
|
||||
|
||||
// When the user clicks outside of the password field, hide the password-contain box
|
||||
myInput.onblur = function () {
|
||||
document.getElementById("password-contain").style.display = "none";
|
||||
};
|
||||
|
||||
// When the user starts to type something inside the password field
|
||||
myInput.onkeyup = function () {
|
||||
// Validate lowercase letters
|
||||
var lowerCaseLetters = /[a-z]/g;
|
||||
if (myInput.value.match(lowerCaseLetters)) {
|
||||
letter.classList.remove("invalid");
|
||||
letter.classList.add("valid");
|
||||
} else {
|
||||
letter.classList.remove("valid");
|
||||
letter.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate capital letters
|
||||
var upperCaseLetters = /[A-Z]/g;
|
||||
if (myInput.value.match(upperCaseLetters)) {
|
||||
capital.classList.remove("invalid");
|
||||
capital.classList.add("valid");
|
||||
} else {
|
||||
capital.classList.remove("valid");
|
||||
capital.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate numbers
|
||||
var numbers = /[0-9]/g;
|
||||
if (myInput.value.match(numbers)) {
|
||||
number.classList.remove("invalid");
|
||||
number.classList.add("valid");
|
||||
} else {
|
||||
number.classList.remove("valid");
|
||||
number.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate length
|
||||
if (myInput.value.length >= 8) {
|
||||
length.classList.remove("invalid");
|
||||
length.classList.add("valid");
|
||||
} else {
|
||||
length.classList.remove("valid");
|
||||
length.classList.add("invalid");
|
||||
}
|
||||
};
|
||||
21
resources/js/pages/password-addon.init.js
vendored
Executable file
21
resources/js/pages/password-addon.init.js
vendored
Executable file
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Password addon Js File
|
||||
*/
|
||||
|
||||
// password addon
|
||||
Array.from(document.querySelectorAll("form .auth-pass-inputgroup")).forEach(function (item) {
|
||||
Array.from(item.querySelectorAll("#password-addon")).forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function (event) {
|
||||
var passwordInput = item.querySelector("#password-input");
|
||||
if (passwordInput.type === "password") {
|
||||
passwordInput.type = "text";
|
||||
} else {
|
||||
passwordInput.type = "password";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
81
resources/js/pages/plugins/event.init.json
Executable file
81
resources/js/pages/plugins/event.init.json
Executable file
@@ -0,0 +1,81 @@
|
||||
[{
|
||||
"id": 1,
|
||||
"title": "World Braille Day",
|
||||
"start": "2022-01-04",
|
||||
"className": "bg-soft-info",
|
||||
"allDay": true
|
||||
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "World Leprosy Day",
|
||||
"start": "2022-01-30",
|
||||
"className": "bg-soft-info",
|
||||
"allDay": true
|
||||
},
|
||||
|
||||
{
|
||||
"id": 3,
|
||||
"title": "International Mother Language Day",
|
||||
"start": "2022-02-21",
|
||||
"className": "bg-soft-info",
|
||||
"allDay": true
|
||||
},
|
||||
|
||||
{
|
||||
"id": 4,
|
||||
"title": "International Women's Day",
|
||||
"start": "2022-03-08",
|
||||
"className": "bg-soft-info",
|
||||
"allDay": true
|
||||
},
|
||||
|
||||
{
|
||||
"id": 5,
|
||||
"title": "World Thinking Day",
|
||||
"start": "2022-02-22",
|
||||
"className": "bg-soft-info",
|
||||
"allDay": true
|
||||
},
|
||||
|
||||
{
|
||||
"id": 6,
|
||||
"title": "International Mother Language Day",
|
||||
"start": "2022-03-21",
|
||||
"className": "bg-soft-info",
|
||||
"allDay": true
|
||||
},
|
||||
|
||||
{
|
||||
"id": 7,
|
||||
"title": "World Water Day",
|
||||
"start": "2022-03-22",
|
||||
"className": "bg-soft-info",
|
||||
"allDay": true
|
||||
},
|
||||
|
||||
{
|
||||
"id": 8,
|
||||
"title": "World Health Day",
|
||||
"start": "2022-04-07",
|
||||
"className": "bg-soft-info",
|
||||
"allDay": true
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
"id": 9,
|
||||
"title": "International Special Librarians Day",
|
||||
"start": "2022-04-16",
|
||||
"className": "bg-soft-info",
|
||||
"allDay": true
|
||||
},
|
||||
|
||||
{
|
||||
"id": 10,
|
||||
"title": "Earth Day",
|
||||
"start": "2022-04-22",
|
||||
"className": "bg-soft-info",
|
||||
"allDay": true
|
||||
}
|
||||
]
|
||||
17418
resources/js/pages/plugins/jsonfull-emoji-list.json
Executable file
17418
resources/js/pages/plugins/jsonfull-emoji-list.json
Executable file
File diff suppressed because it is too large
Load Diff
1
resources/js/pages/plugins/lord-icon-2.1.0.js
vendored
Executable file
1
resources/js/pages/plugins/lord-icon-2.1.0.js
vendored
Executable file
File diff suppressed because one or more lines are too long
48
resources/js/pages/pricing.init.js
vendored
Executable file
48
resources/js/pages/pricing.init.js
vendored
Executable file
@@ -0,0 +1,48 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: pricing init js
|
||||
*/
|
||||
if (document.querySelectorAll(".plan-nav .nav-item .nav-link")) {
|
||||
Array.from(document.querySelectorAll(".plan-nav .nav-item .nav-link")).forEach(function (e) {
|
||||
var month = document.getElementsByClassName("month");
|
||||
var annual = document.getElementsByClassName("annual");
|
||||
if (e.classList.contains("active") == true) {
|
||||
var i = 0;
|
||||
Array.from(month).forEach(function (m){
|
||||
annual[i].style.display = "none";
|
||||
m.style.display = "block";
|
||||
i ++;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (document.getElementById("month-tab")) {
|
||||
document.getElementById("month-tab").addEventListener("click", function () {
|
||||
var month = document.getElementsByClassName("month");
|
||||
var annual = document.getElementsByClassName("annual");
|
||||
var i = 0;
|
||||
Array.from(month).forEach(function (m){
|
||||
if (annual[i]) annual[i].style.display = "none";
|
||||
if (m) m.style.display = "block";
|
||||
i ++;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (document.getElementById("annual-tab")) {
|
||||
document.getElementById("annual-tab").addEventListener("click", function () {
|
||||
var month = document.getElementsByClassName("month");
|
||||
var annual = document.getElementsByClassName("annual");
|
||||
|
||||
var i = 0;
|
||||
Array.from(month).forEach(function (m){
|
||||
if (annual[i]) annual[i].style.display = "block";
|
||||
if (m) m.style.display = "none";
|
||||
i ++;
|
||||
});
|
||||
});
|
||||
}
|
||||
148
resources/js/pages/profile-setting.init.js
vendored
Executable file
148
resources/js/pages/profile-setting.init.js
vendored
Executable file
@@ -0,0 +1,148 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Profile-setting init js
|
||||
*/
|
||||
|
||||
const {
|
||||
data
|
||||
} = require("isotope-layout");
|
||||
|
||||
// Profile Foreground Img
|
||||
|
||||
|
||||
// Profile Foreground Img
|
||||
// if (document.querySelector("#profile-img-file-input")) {
|
||||
// document.querySelector("#profile-img-file-input").addEventListener("change", function () {
|
||||
// var preview = document.querySelector(".user-profile-image");
|
||||
// var file = document.querySelector(".profile-img-file-input").files[0];
|
||||
// var reader = new FileReader();
|
||||
// reader.addEventListener(
|
||||
// "load",
|
||||
// function () {
|
||||
// preview.src = reader.result;
|
||||
// },
|
||||
// false
|
||||
// );
|
||||
// if (file) {
|
||||
// reader.readAsDataURL(file);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
|
||||
var count = 2;
|
||||
|
||||
// var genericExamples = document.querySelectorAll("[data-trigger]");
|
||||
// for (i = 0; i < genericExamples.length; ++i) {
|
||||
// var element = genericExamples[i];
|
||||
// new Choices(element, {
|
||||
// placeholderValue: "This is a placeholder set in the config",
|
||||
// searchPlaceholderValue: "This is a search placeholder",
|
||||
// searchEnabled: false,
|
||||
// });
|
||||
// }
|
||||
|
||||
// function new_link() {
|
||||
// count++;
|
||||
// var div1 = document.createElement('div');
|
||||
// div1.id = count;
|
||||
|
||||
// var delLink = '<div class="row"><div class="col-lg-12">' +
|
||||
// '<div class="mb-3">' +
|
||||
// '<label for="jobTitle1" class="form-label">Job Title</label>' +
|
||||
// '<input type="text" class="form-control" id="jobTitle1" placeholder="Job title">' +
|
||||
// '</div></div>' +
|
||||
// '<div class="col-lg-6">' +
|
||||
// '<div class="mb-3">' +
|
||||
// '<label for="companyName" class="form-label">Company Name</label>' +
|
||||
// '<input type="text" class="form-control" id="companyName" placeholder="Company name">' +
|
||||
// '</div>' +
|
||||
// '</div>' +
|
||||
// '<div class="col-lg-6">' +
|
||||
// '<div class="mb-3">' +
|
||||
// '<label for="choices-single-default3" class="form-label">Experience Years</label>' +
|
||||
// '<div class="row">' +
|
||||
// '<div class="col-lg-5">' +
|
||||
// '<select class="form-control" data-trigger name="choices-single-default3"> ' +
|
||||
// '<option value="">Select years</option>' +
|
||||
// '<option value="Choice 1">2001</option>' +
|
||||
// '<option value="Choice 2">2002</option>' +
|
||||
// '<option value="Choice 3">2003</option>' +
|
||||
// '<option value="Choice 4">2004</option>' +
|
||||
// '<option value="Choice 5">2005</option>' +
|
||||
// '<option value="Choice 6">2006</option>' +
|
||||
// '<option value="Choice 7">2007</option>' +
|
||||
// '<option value="Choice 8">2008</option>' +
|
||||
// '<option value="Choice 9">2009</option>' +
|
||||
// '<option value="Choice 10">2010</option>' +
|
||||
// '<option value="Choice 11">2011</option>' +
|
||||
// '<option value="Choice 12">2012</option>' +
|
||||
// '<option value="Choice 13">2013</option>' +
|
||||
// '<option value="Choice 14">2014</option>' +
|
||||
// '<option value="Choice 15">2015</option>' +
|
||||
// '<option value="Choice 16">2016</option>' +
|
||||
// '<option value="Choice 17">2017</option>' +
|
||||
// '<option value="Choice 18">2018</option>' +
|
||||
// '<option value="Choice 19">2019</option>' +
|
||||
// '<option value="Choice 20">2020</option>' +
|
||||
// '<option value="Choice 21">2021</option>' +
|
||||
// '<option value="Choice 22">2022</option>' +
|
||||
// '</select>' +
|
||||
// '</div>' +
|
||||
// '<div class="col-auto align-self-center">to</div>' +
|
||||
// '<div class="col-lg-5">' +
|
||||
// '<select class="form-control" data-trigger name="choices-single-default2">' +
|
||||
// '<option value="">Select years</option>' +
|
||||
// '<option value="Choice 1">2001</option>' +
|
||||
// '<option value="Choice 2">2002</option>' +
|
||||
// '<option value="Choice 3">2003</option>' +
|
||||
// '<option value="Choice 4">2004</option>' +
|
||||
// '<option value="Choice 5">2005</option>' +
|
||||
// '<option value="Choice 6">2006</option>' +
|
||||
// '<option value="Choice 7">2007</option>' +
|
||||
// '<option value="Choice 8">2008</option>' +
|
||||
// '<option value="Choice 9">2009</option>' +
|
||||
// '<option value="Choice 10">2010</option>' +
|
||||
// '<option value="Choice 11">2011</option>' +
|
||||
// '<option value="Choice 12">2012</option>' +
|
||||
// '<option value="Choice 13">2013</option>' +
|
||||
// '<option value="Choice 14">2014</option>' +
|
||||
// '<option value="Choice 15">2015</option>' +
|
||||
// '<option value="Choice 16">2016</option>' +
|
||||
// '<option value="Choice 17">2017</option>' +
|
||||
// '<option value="Choice 18">2018</option>' +
|
||||
// '<option value="Choice 19">2019</option>' +
|
||||
// '<option value="Choice 20">2020</option>' +
|
||||
// '<option value="Choice 21">2021</option>' +
|
||||
// '<option value="Choice 22">2022</option>' +
|
||||
// '</select></div></div></div></div>' +
|
||||
// '<div class="col-lg-12">' +
|
||||
// '<div class="mb-3">' +
|
||||
// '<label for="jobDescription" class="form-label">Job Description</label>' +
|
||||
// '<textarea class="form-control" id="jobDescription" rows="3" placeholder="Enter description"></textarea>' +
|
||||
// '</div></div><div class="hstack gap-2 justify-content-end"><a class="btn btn-success" href="javascript:deleteEl(' + count + ')">Delete</a></div></div>';
|
||||
|
||||
// div1.innerHTML = document.getElementById('newForm').innerHTML + delLink;
|
||||
|
||||
// document.getElementById('newlink').appendChild(div1);
|
||||
|
||||
// var genericExamples = document.querySelectorAll("[data-trigger]");
|
||||
// Array.from(genericExamples).forEach(function (genericExamp) {
|
||||
// var element = genericExamp;
|
||||
// new Choices(element, {
|
||||
// placeholderValue: "This is a placeholder set in the config",
|
||||
// searchPlaceholderValue: "This is a search placeholder",
|
||||
// searchEnabled: false,
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
|
||||
// function deleteEl(eleId) {
|
||||
// d = document;
|
||||
// var ele = d.getElementById(eleId);
|
||||
// var parentEle = d.getElementById('newlink');
|
||||
// parentEle.removeChild(ele);
|
||||
// }
|
||||
31
resources/js/pages/profile.init.js
vendored
Executable file
31
resources/js/pages/profile.init.js
vendored
Executable file
@@ -0,0 +1,31 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Profile init js
|
||||
*/
|
||||
|
||||
// project-swiper
|
||||
var swiper = new Swiper(".project-swiper", {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 24,
|
||||
navigation: {
|
||||
nextEl: ".slider-button-next",
|
||||
prevEl: ".slider-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
640: {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 15,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
1200: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 25,
|
||||
},
|
||||
},
|
||||
});
|
||||
35
resources/js/pages/project-create.init.js
vendored
Executable file
35
resources/js/pages/project-create.init.js
vendored
Executable file
@@ -0,0 +1,35 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Project create init js
|
||||
*/
|
||||
|
||||
// ckeditor
|
||||
var ckeditorClassic = document.querySelector('#ckeditor-classic');
|
||||
if (ckeditorClassic) {
|
||||
ClassicEditor
|
||||
.create(document.querySelector('#ckeditor-classic'))
|
||||
.then(function (editor) {
|
||||
editor.ui.view.editable.element.style.height = '200px';
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
// Dropzone
|
||||
var dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
|
||||
if (dropzonePreviewNode) {
|
||||
dropzonePreviewNode.id = "";
|
||||
var previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
|
||||
dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);
|
||||
var dropzone = new Dropzone(".dropzone", {
|
||||
url: 'https://httpbin.org/post',
|
||||
method: "post",
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: "#dropzone-preview",
|
||||
});
|
||||
|
||||
}
|
||||
28
resources/js/pages/project-list.init.js
vendored
Executable file
28
resources/js/pages/project-list.init.js
vendored
Executable file
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Project list init js
|
||||
*/
|
||||
|
||||
// favourite btn
|
||||
var favouriteBtn = document.querySelectorAll(".favourite-btn");
|
||||
if (favouriteBtn) {
|
||||
Array.from(document.querySelectorAll(".favourite-btn")).forEach(function (item) {
|
||||
item.addEventListener("click", function (event) {
|
||||
this.classList.toggle("active");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Remove product from cart
|
||||
var removeProduct = document.getElementById('removeProjectModal')
|
||||
if (removeProduct) {
|
||||
removeProduct.addEventListener('show.bs.modal', function (e) {
|
||||
document.getElementById('remove-project').addEventListener('click', function (event) {
|
||||
e.relatedTarget.closest('.project-card').remove();
|
||||
document.getElementById("close-modal").click();
|
||||
});
|
||||
});
|
||||
}
|
||||
17
resources/js/pages/project-overview.init.js
vendored
Executable file
17
resources/js/pages/project-overview.init.js
vendored
Executable file
@@ -0,0 +1,17 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Project overview init js
|
||||
*/
|
||||
|
||||
// favourite btn
|
||||
var favouriteBtn = document.querySelectorAll(".favourite-btn");
|
||||
if (favouriteBtn) {
|
||||
Array.from(document.querySelectorAll(".favourite-btn")).forEach(function (item) {
|
||||
item.addEventListener("click", function (event) {
|
||||
this.classList.toggle("active");
|
||||
});
|
||||
});
|
||||
}
|
||||
465
resources/js/pages/range-sliders.init.js
vendored
Executable file
465
resources/js/pages/range-sliders.init.js
vendored
Executable file
@@ -0,0 +1,465 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Range sliders Js File
|
||||
*/
|
||||
|
||||
/*********************
|
||||
basic example
|
||||
**********************/
|
||||
var sliderColorScheme = document.querySelectorAll('[data-rangeslider]');
|
||||
if (sliderColorScheme)
|
||||
Array.from(sliderColorScheme).forEach(function (slider) {
|
||||
noUiSlider.create(slider, {
|
||||
start: 127,
|
||||
connect: 'lower',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 255
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
/*********************
|
||||
multi range handle
|
||||
**********************/
|
||||
|
||||
var multielementslider = document.querySelectorAll('[data-multielement]');
|
||||
if (multielementslider)
|
||||
Array.from(multielementslider).forEach(function (slider) {
|
||||
noUiSlider.create(slider, {
|
||||
start: [20, 80],
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/*********************
|
||||
Colorpicker
|
||||
**********************/
|
||||
|
||||
var resultElement = document.getElementById('result');
|
||||
var sliders = document.getElementsByClassName('sliders');
|
||||
var colors = [0, 0, 0];
|
||||
if (sliders)
|
||||
Array.from([].slice.call(sliders)).forEach(function (slider, index) {
|
||||
|
||||
noUiSlider.create(slider, {
|
||||
start: 127,
|
||||
connect: [true, false],
|
||||
orientation: "vertical",
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 255
|
||||
},
|
||||
format: wNumb({
|
||||
decimals: 0
|
||||
})
|
||||
});
|
||||
|
||||
// Bind the color changing function to the update event.
|
||||
slider.noUiSlider.on('update', function () {
|
||||
|
||||
colors[index] = slider.noUiSlider.get();
|
||||
|
||||
var color = 'rgb(' + colors.join(',') + ')';
|
||||
|
||||
resultElement.style.background = color;
|
||||
resultElement.style.color = color;
|
||||
});
|
||||
});
|
||||
|
||||
/*********************
|
||||
Using HTML5 input elements
|
||||
**********************/
|
||||
|
||||
var select = document.getElementById('input-select');
|
||||
// Append the option elements
|
||||
for (var i = -20; i <= 40; i++) {
|
||||
var option = document.createElement("option");
|
||||
option.text = i;
|
||||
option.value = i;
|
||||
select.appendChild(option);
|
||||
}
|
||||
|
||||
var html5Slider = document.getElementById('html5');
|
||||
if (html5Slider)
|
||||
noUiSlider.create(html5Slider, {
|
||||
start: [10, 30],
|
||||
connect: true,
|
||||
range: {
|
||||
'min': -20,
|
||||
'max': 40
|
||||
}
|
||||
});
|
||||
|
||||
var inputNumber = document.getElementById('input-number');
|
||||
if (inputNumber && html5Slider) {
|
||||
html5Slider.noUiSlider.on('update', function (values, handle) {
|
||||
|
||||
var value = values[handle];
|
||||
|
||||
if (handle) {
|
||||
inputNumber.value = value;
|
||||
} else {
|
||||
select.value = Math.round(value);
|
||||
}
|
||||
});
|
||||
|
||||
select.addEventListener('change', function () {
|
||||
html5Slider.noUiSlider.set([this.value, null]);
|
||||
});
|
||||
|
||||
inputNumber.addEventListener('change', function () {
|
||||
html5Slider.noUiSlider.set([null, this.value]);
|
||||
});
|
||||
}
|
||||
|
||||
/*********************
|
||||
Non linear slider
|
||||
**********************/
|
||||
var nonLinearSlider = document.getElementById('nonlinear');
|
||||
if (nonLinearSlider)
|
||||
noUiSlider.create(nonLinearSlider, {
|
||||
connect: true,
|
||||
behaviour: 'tap',
|
||||
start: [500, 4000],
|
||||
range: {
|
||||
// Starting at 500, step the value by 500,
|
||||
// until 4000 is reached. From there, step by 1000.
|
||||
'min': [0],
|
||||
'10%': [500, 500],
|
||||
'50%': [4000, 1000],
|
||||
'max': [10000]
|
||||
}
|
||||
});
|
||||
|
||||
var nodes = [
|
||||
document.getElementById('lower-value'), // 0
|
||||
document.getElementById('upper-value') // 1
|
||||
];
|
||||
|
||||
// Display the slider value and how far the handle moved
|
||||
// from the left edge of the slider.
|
||||
nonLinearSlider.noUiSlider.on('update', function (values, handle, unencoded, isTap, positions) {
|
||||
nodes[handle].innerHTML = values[handle] + ', ' + positions[handle].toFixed(2) + '%';
|
||||
});
|
||||
|
||||
/*********************
|
||||
Locking sliders together
|
||||
**********************/
|
||||
var lockedState = false;
|
||||
var lockedSlider = false;
|
||||
var lockedValues = [60, 80];
|
||||
|
||||
var slider1 = document.getElementById('slider1');
|
||||
var slider2 = document.getElementById('slider2');
|
||||
|
||||
var lockButton = document.getElementById('lockbutton');
|
||||
var slider1Value = document.getElementById('slider1-span');
|
||||
var slider2Value = document.getElementById('slider2-span');
|
||||
|
||||
// When the button is clicked, the locked state is inverted.
|
||||
if (lockButton)
|
||||
lockButton.addEventListener('click', function () {
|
||||
lockedState = !lockedState;
|
||||
this.textContent = lockedState ? 'unlock' : 'lock';
|
||||
});
|
||||
|
||||
function crossUpdate(value, slider) {
|
||||
|
||||
// If the sliders aren't interlocked, don't
|
||||
// cross-update.
|
||||
if (!lockedState) return;
|
||||
|
||||
// Select whether to increase or decrease
|
||||
// the other slider value.
|
||||
var a = slider1 === slider ? 0 : 1;
|
||||
|
||||
// Invert a
|
||||
var b = a ? 0 : 1;
|
||||
|
||||
// Offset the slider value.
|
||||
value -= lockedValues[b] - lockedValues[a];
|
||||
|
||||
// Set the value
|
||||
slider.noUiSlider.set(value);
|
||||
}
|
||||
|
||||
noUiSlider.create(slider1, {
|
||||
start: 60,
|
||||
|
||||
// Disable animation on value-setting,
|
||||
// so the sliders respond immediately.
|
||||
animate: false,
|
||||
range: {
|
||||
min: 50,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
noUiSlider.create(slider2, {
|
||||
start: 80,
|
||||
animate: false,
|
||||
range: {
|
||||
min: 50,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
if (slider1 && slider2) {
|
||||
slider1.noUiSlider.on('update', function (values, handle) {
|
||||
slider1Value.innerHTML = values[handle];
|
||||
});
|
||||
slider2.noUiSlider.on('update', function (values, handle) {
|
||||
slider2Value.innerHTML = values[handle];
|
||||
});
|
||||
|
||||
|
||||
function setLockedValues() {
|
||||
lockedValues = [
|
||||
Number(slider1.noUiSlider.get()),
|
||||
Number(slider2.noUiSlider.get())
|
||||
];
|
||||
}
|
||||
|
||||
slider1.noUiSlider.on('change', setLockedValues);
|
||||
slider2.noUiSlider.on('change', setLockedValues);
|
||||
|
||||
slider1.noUiSlider.on('slide', function (values, handle) {
|
||||
crossUpdate(values[handle], slider2);
|
||||
});
|
||||
|
||||
slider2.noUiSlider.on('slide', function (values, handle) {
|
||||
crossUpdate(values[handle], slider1);
|
||||
});
|
||||
}
|
||||
|
||||
/*********************
|
||||
mergingTooltipSlider
|
||||
**********************/
|
||||
var mergingTooltipSlider = document.getElementById('slider-merging-tooltips');
|
||||
if (mergingTooltipSlider) {
|
||||
noUiSlider.create(mergingTooltipSlider, {
|
||||
start: [20, 75],
|
||||
connect: true,
|
||||
tooltips: [true, true],
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
mergeTooltips(mergingTooltipSlider, 5, ' - ');
|
||||
}
|
||||
|
||||
/**
|
||||
* @param slider HtmlElement with an initialized slider
|
||||
* @param threshold Minimum proximity (in percentages) to merge tooltips
|
||||
* @param separator String joining tooltips
|
||||
*/
|
||||
function mergeTooltips(slider, threshold, separator) {
|
||||
|
||||
var textIsRtl = getComputedStyle(slider).direction === 'rtl';
|
||||
var isRtl = slider.noUiSlider.options.direction === 'rtl';
|
||||
var isVertical = slider.noUiSlider.options.orientation === 'vertical';
|
||||
var tooltips = slider.noUiSlider.getTooltips();
|
||||
var origins = slider.noUiSlider.getOrigins();
|
||||
|
||||
// Move tooltips into the origin element. The default stylesheet handles this.
|
||||
Array.from(tooltips).forEach(function (tooltip, index) {
|
||||
if (tooltip) {
|
||||
origins[index].appendChild(tooltip);
|
||||
}
|
||||
});
|
||||
if (slider)
|
||||
slider.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) {
|
||||
|
||||
var pools = [
|
||||
[]
|
||||
];
|
||||
var poolPositions = [
|
||||
[]
|
||||
];
|
||||
var poolValues = [
|
||||
[]
|
||||
];
|
||||
var atPool = 0;
|
||||
|
||||
// Assign the first tooltip to the first pool, if the tooltip is configured
|
||||
if (tooltips[0]) {
|
||||
pools[0][0] = 0;
|
||||
poolPositions[0][0] = positions[0];
|
||||
poolValues[0][0] = values[0];
|
||||
}
|
||||
|
||||
for (var i = 1; i < positions.length; i++) {
|
||||
if (!tooltips[i] || (positions[i] - positions[i - 1]) > threshold) {
|
||||
atPool++;
|
||||
pools[atPool] = [];
|
||||
poolValues[atPool] = [];
|
||||
poolPositions[atPool] = [];
|
||||
}
|
||||
|
||||
if (tooltips[i]) {
|
||||
pools[atPool].push(i);
|
||||
poolValues[atPool].push(values[i]);
|
||||
poolPositions[atPool].push(positions[i]);
|
||||
}
|
||||
}
|
||||
|
||||
Array.from(pools).forEach(function (pool, poolIndex) {
|
||||
var handlesInPool = pool.length;
|
||||
|
||||
for (var j = 0; j < handlesInPool; j++) {
|
||||
var handleNumber = pool[j];
|
||||
|
||||
if (j === handlesInPool - 1) {
|
||||
var offset = 0;
|
||||
|
||||
Array.from(poolPositions[poolIndex]).forEach(function (value) {
|
||||
offset += 1000 - value;
|
||||
});
|
||||
|
||||
var direction = isVertical ? 'bottom' : 'right';
|
||||
var last = isRtl ? 0 : handlesInPool - 1;
|
||||
var lastOffset = 1000 - poolPositions[poolIndex][last];
|
||||
offset = (textIsRtl && !isVertical ? 100 : 0) + (offset / handlesInPool) - lastOffset;
|
||||
|
||||
// Center this tooltip over the affected handles
|
||||
tooltips[handleNumber].innerHTML = poolValues[poolIndex].join(separator);
|
||||
tooltips[handleNumber].style.display = 'block';
|
||||
tooltips[handleNumber].style[direction] = offset + '%';
|
||||
} else {
|
||||
// Hide this tooltip
|
||||
tooltips[handleNumber].style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/*********************
|
||||
tooltip
|
||||
**********************/
|
||||
var hidingTooltipSlider = document.getElementById('slider-hide');
|
||||
if (hidingTooltipSlider)
|
||||
noUiSlider.create(hidingTooltipSlider, {
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
start: [20, 80],
|
||||
tooltips: true
|
||||
});
|
||||
|
||||
/*********************
|
||||
pipe - scale
|
||||
**********************/
|
||||
var pipsSlider = document.getElementById('slider-pips');
|
||||
if (pipsSlider)
|
||||
noUiSlider.create(pipsSlider, {
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
start: [50],
|
||||
pips: {
|
||||
mode: 'count',
|
||||
values: 5
|
||||
}
|
||||
});
|
||||
|
||||
var pips = pipsSlider.querySelectorAll('.noUi-value');
|
||||
|
||||
function clickOnPip() {
|
||||
var value = Number(this.getAttribute('data-value'));
|
||||
pipsSlider.noUiSlider.set(value);
|
||||
}
|
||||
if (pips)
|
||||
Array.from(pips).forEach(function (ele) {
|
||||
// For this example. Do this in CSS!
|
||||
ele.style.cursor = 'pointer';
|
||||
ele.addEventListener('click', clickOnPip);
|
||||
});
|
||||
|
||||
/*********************
|
||||
Colored Connect Elements
|
||||
**********************/
|
||||
var slider = document.getElementById('slider-color');
|
||||
if (slider)
|
||||
noUiSlider.create(slider, {
|
||||
start: [4000, 8000, 12000, 16000],
|
||||
connect: [false, true, true, true, true],
|
||||
range: {
|
||||
'min': [2000],
|
||||
'max': [20000]
|
||||
}
|
||||
});
|
||||
|
||||
var connect = slider.querySelectorAll('.noUi-connect');
|
||||
var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];
|
||||
|
||||
var i = 0;
|
||||
Array.from(connect).forEach(function (ele) {
|
||||
ele.classList.add(classes[i]);
|
||||
i ++;
|
||||
});
|
||||
|
||||
/*********************
|
||||
toggle slider
|
||||
**********************/
|
||||
var toggleSlider = document.getElementById('slider-toggle');
|
||||
if (toggleSlider) {
|
||||
noUiSlider.create(toggleSlider, {
|
||||
orientation: "vertical",
|
||||
start: 0,
|
||||
range: {
|
||||
'min': [0, 1],
|
||||
'max': 1
|
||||
},
|
||||
format: wNumb({
|
||||
decimals: 0
|
||||
})
|
||||
});
|
||||
|
||||
toggleSlider.noUiSlider.on('update', function (values, handle) {
|
||||
if (values[handle] === '1') {
|
||||
toggleSlider.classList.add('off');
|
||||
} else {
|
||||
toggleSlider.classList.remove('off');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/*********************
|
||||
Soft limits
|
||||
**********************/
|
||||
var softSlider = document.getElementById('soft');
|
||||
if (softSlider) {
|
||||
noUiSlider.create(softSlider, {
|
||||
start: 50,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
pips: {
|
||||
mode: 'values',
|
||||
values: [20, 80],
|
||||
density: 4
|
||||
}
|
||||
});
|
||||
|
||||
softSlider.noUiSlider.on('change', function (values, handle) {
|
||||
if (values[handle] < 20) {
|
||||
softSlider.noUiSlider.set(20);
|
||||
} else if (values[handle] > 80) {
|
||||
softSlider.noUiSlider.set(80);
|
||||
}
|
||||
});
|
||||
}
|
||||
102
resources/js/pages/rating.init.js
vendored
Executable file
102
resources/js/pages/rating.init.js
vendored
Executable file
@@ -0,0 +1,102 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Rating Js File
|
||||
*/
|
||||
|
||||
// basic-rater
|
||||
if (document.querySelector('#basic-rater'))
|
||||
var basicRating = raterJs({
|
||||
starSize: 22,
|
||||
rating: 3,
|
||||
element: document.querySelector("#basic-rater"),
|
||||
rateCallback: function rateCallback(rating, done) {
|
||||
this.setRating(rating);
|
||||
done();
|
||||
}
|
||||
});
|
||||
|
||||
// rater-step
|
||||
if (document.querySelector('#rater-step'))
|
||||
var starRatingStep = raterJs({
|
||||
starSize: 22,
|
||||
rating: 1.5,
|
||||
element: document.querySelector("#rater-step"),
|
||||
rateCallback: function rateCallback(rating, done) {
|
||||
this.setRating(rating);
|
||||
done();
|
||||
}
|
||||
});
|
||||
|
||||
// rater-message
|
||||
var messageDataService = {
|
||||
rate: function (rating) {
|
||||
return {
|
||||
then: function (callback) {
|
||||
setTimeout(function () {
|
||||
callback((Math.random() * 5));
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (document.querySelector('#rater-message'))
|
||||
var starRatingmessage = raterJs({
|
||||
isBusyText: "Rating in progress. Please wait...",
|
||||
starSize: 22,
|
||||
element: document.querySelector("#rater-message"),
|
||||
rateCallback: function rateCallback(rating, done) {
|
||||
starRatingmessage.setRating(rating);
|
||||
messageDataService.rate().then(function (avgRating) {
|
||||
starRatingmessage.setRating(avgRating);
|
||||
done();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// rater-unlimitedstar
|
||||
if (document.querySelector('#rater-unlimitedstar'))
|
||||
var starRatingunlimited = raterJs({
|
||||
max: 16,
|
||||
readOnly: true,
|
||||
rating: 4.4,
|
||||
element: document.querySelector("#rater-unlimitedstar")
|
||||
});
|
||||
|
||||
// rater-onhover
|
||||
if (document.querySelector('#rater-onhover'))
|
||||
var starRatinghover = raterJs({
|
||||
starSize: 22,
|
||||
rating: 1,
|
||||
element: document.querySelector("#rater-onhover"),
|
||||
rateCallback: function rateCallback(rating, done) {
|
||||
this.setRating(rating);
|
||||
done();
|
||||
},
|
||||
onHover: function (currentIndex, currentRating) {
|
||||
document.querySelector('.ratingnum').textContent = currentIndex;
|
||||
},
|
||||
onLeave: function (currentIndex, currentRating) {
|
||||
document.querySelector('.ratingnum').textContent = currentRating;
|
||||
}
|
||||
});
|
||||
|
||||
// rater-reset
|
||||
if (document.querySelector('#raterreset'))
|
||||
var starRatingreset = raterJs({
|
||||
starSize: 22,
|
||||
rating: 2,
|
||||
element: document.querySelector("#raterreset"),
|
||||
rateCallback: function rateCallback(rating, done) {
|
||||
this.setRating(rating);
|
||||
done();
|
||||
}
|
||||
});
|
||||
|
||||
if (document.querySelector('#raterreset-button'))
|
||||
document.querySelector('#raterreset-button').addEventListener("click", function () {
|
||||
starRatingreset.clear();
|
||||
}, false);
|
||||
27
resources/js/pages/remix-icons-listing.js
vendored
Executable file
27
resources/js/pages/remix-icons-listing.js
vendored
Executable file
File diff suppressed because one or more lines are too long
58
resources/js/pages/search-result.init.js
vendored
Executable file
58
resources/js/pages/search-result.init.js
vendored
Executable file
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: search-result init js
|
||||
*/
|
||||
|
||||
// Images Slider menu
|
||||
var swiper = new Swiper(".images-menu", {
|
||||
slidesPerView: 'auto',
|
||||
spaceBetween: 10,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
}
|
||||
});
|
||||
|
||||
// GLightbox Popup
|
||||
var lightbox = GLightbox({
|
||||
selector: '.image-popup',
|
||||
title: false,
|
||||
});
|
||||
|
||||
// loadmore Js
|
||||
function _toConsumableArray(arr) {
|
||||
if (Array.isArray(arr)) {
|
||||
for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
|
||||
arr2[i] = arr[i];
|
||||
}
|
||||
return arr2;
|
||||
} else {
|
||||
return Array.from(arr);
|
||||
}
|
||||
}
|
||||
|
||||
var loadmore = document.querySelector("#loadmore");
|
||||
if (loadmore) {
|
||||
var currentItems = 3;
|
||||
loadmore.addEventListener("click", function (e) {
|
||||
var elementList = [].concat(
|
||||
_toConsumableArray(document.querySelectorAll(".list .list-element"))
|
||||
);
|
||||
if (elementList) {
|
||||
for (var i = currentItems; i < currentItems + 3; i++) {
|
||||
if (elementList[i]) {
|
||||
elementList[i].style.display = "block";
|
||||
}
|
||||
}
|
||||
currentItems += 3;
|
||||
|
||||
// Load more button will be hidden after list fully loaded
|
||||
if (currentItems >= elementList.length) {
|
||||
event.target.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
93
resources/js/pages/select2.init.js
vendored
Executable file
93
resources/js/pages/select2.init.js
vendored
Executable file
@@ -0,0 +1,93 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: select2 init js
|
||||
*/
|
||||
|
||||
// In your Javascript (external .js resource or <script> tag)
|
||||
$(document).ready(function() {
|
||||
$('.js-example-basic-single').select2();
|
||||
|
||||
$('.js-example-basic-multiple').select2();
|
||||
|
||||
var data = [
|
||||
{
|
||||
id: 0,
|
||||
text: 'enhancement'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
text: 'bug'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: 'duplicate'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: 'invalid'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: 'wontfix'
|
||||
}
|
||||
];
|
||||
|
||||
$(".js-example-data-array").select2({
|
||||
data: data
|
||||
})
|
||||
|
||||
|
||||
});
|
||||
var formatState;
|
||||
formatState = function (state) {
|
||||
if (!state.id) {
|
||||
return state.text;
|
||||
}
|
||||
var baseUrl = "assets/images/flags/select2";
|
||||
var $state = $(
|
||||
'<span><img src="' + baseUrl + '/' + state.element.value.toLowerCase() + '.png" class="img-flag rounded" height="18" /> ' + state.text + '</span>'
|
||||
);
|
||||
return $state;
|
||||
};
|
||||
|
||||
$(".js-example-templating").select2({
|
||||
templateResult: formatState
|
||||
});
|
||||
|
||||
formatState = function (state) {
|
||||
if (!state.id) {
|
||||
return state.text;
|
||||
}
|
||||
|
||||
var baseUrl = "assets/images/flags/select2";
|
||||
var $state = $(
|
||||
'<span><img class="img-flag rounded" height="18" /> <span></span></span>'
|
||||
);
|
||||
|
||||
// Use .text() instead of HTML string concatenation to avoid script injection issues
|
||||
$state.find("span").text(state.text);
|
||||
$state.find("img").attr("src", baseUrl + "/" + state.element.value.toLowerCase() + ".png");
|
||||
|
||||
return $state;
|
||||
};
|
||||
|
||||
$(".select-flag-templating").select2({
|
||||
templateSelection: formatState
|
||||
});
|
||||
|
||||
|
||||
$(".js-example-disabled").select2();
|
||||
$(".js-example-disabled-multi").select2();
|
||||
|
||||
$(".js-programmatic-enable").on("click", function () {
|
||||
$(".js-example-disabled").prop("disabled", false);
|
||||
$(".js-example-disabled-multi").prop("disabled", false);
|
||||
});
|
||||
|
||||
$(".js-programmatic-disable").on("click", function () {
|
||||
$(".js-example-disabled").prop("disabled", true);
|
||||
$(".js-example-disabled-multi").prop("disabled", true);
|
||||
});
|
||||
350
resources/js/pages/seller-details.init.js
vendored
Executable file
350
resources/js/pages/seller-details.init.js
vendored
Executable file
@@ -0,0 +1,350 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: seller-details init js
|
||||
*/
|
||||
|
||||
// table-product-list-all
|
||||
var TableProductListAll = document.getElementById('table-product-list-all');
|
||||
if (TableProductListAll) {
|
||||
new gridjs.Grid({
|
||||
columns: [{
|
||||
id: 'productListAllCheckbox',
|
||||
name: '#',
|
||||
width: '40px',
|
||||
sort: {
|
||||
enabled: false
|
||||
},
|
||||
plugin: {
|
||||
component: gridjs.plugins.selection.RowSelection,
|
||||
props: {
|
||||
id: (function(row) {
|
||||
return row.cell(6).data;
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Product',
|
||||
width: '360px',
|
||||
formatter: (function(cell) {
|
||||
return gridjs.html('<div class="d-flex align-items-center">' +
|
||||
'<div class="flex-shrink-0 me-3">' +
|
||||
'<div class="avatar-sm bg-light rounded p-1"><img src="assets/images/products/' + cell[0] + '" alt="" class="img-fluid d-block"></div>' +
|
||||
'</div>' +
|
||||
'<div class="flex-grow-1">' +
|
||||
'<h5 class="fs-14 mb-1"><a href="apps-ecommerce-product-details" class="text-dark">' + cell[1] + '</a></h5>' +
|
||||
'<p class="text-muted mb-0">Category : <span class="fw-medium">' + cell[2] + '</span></p>' +
|
||||
'</div>' +
|
||||
'</div>');
|
||||
})
|
||||
},
|
||||
|
||||
{
|
||||
name: 'Stock',
|
||||
width: '94px',
|
||||
},
|
||||
{
|
||||
name: 'Price',
|
||||
width: '101px',
|
||||
},
|
||||
{
|
||||
name: 'Orders',
|
||||
width: '84px',
|
||||
},
|
||||
{
|
||||
name: 'Rating',
|
||||
width: '105px',
|
||||
formatter: (function(cell) {
|
||||
return gridjs.html('<span class="badge bg-light text-body fs-12 fw-medium"><i class="mdi mdi-star text-warning me-1"></i>' + cell + '</span></td>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: 'Published',
|
||||
width: '220px',
|
||||
formatter: (function(cell) {
|
||||
return gridjs.html(cell[0] + '<small class="text-muted ms-1">' + cell[1] + '</small>');
|
||||
})
|
||||
},
|
||||
{
|
||||
name: "Action",
|
||||
width: '80px',
|
||||
sort: {
|
||||
enabled: false
|
||||
},
|
||||
formatter: (function(cell) {
|
||||
return gridjs.html('<div class="dropdown">' +
|
||||
'<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">' +
|
||||
'<i class="ri-more-fill"></i>' +
|
||||
'</button>' +
|
||||
'<ul class="dropdown-menu dropdown-menu-end">' +
|
||||
'<li><a class="dropdown-item" href="apps-ecommerce-product-details"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a></li>' +
|
||||
'<li><a class="dropdown-item" href="apps-ecommerce-add-product"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>' +
|
||||
'<li class="dropdown-divider"></li>' +
|
||||
'<li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#removeItemModal"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>' +
|
||||
'</ul>' +
|
||||
'</div>');
|
||||
})
|
||||
}
|
||||
],
|
||||
className: {
|
||||
th: 'text-muted',
|
||||
},
|
||||
pagination: {
|
||||
limit: 10
|
||||
},
|
||||
sort: true,
|
||||
data: [
|
||||
[
|
||||
["img-1.png", "Half Sleeve Round Neck T-Shirts", "Clothes"], "12", "$ 115.00", "48", "4.2", ["12 Oct, 2021", "10:05 AM"]
|
||||
],
|
||||
[
|
||||
["img-2.png", "Urban Ladder Pashe Chair", "Furniture"], "06", "$ 160.00", "30", "4.3", ["06 Jan, 2021", "01:31 PM"]
|
||||
],
|
||||
[
|
||||
["img-3.png", "350 ml Glass Grocery Container", "Kitchen Storage & Containers"], "10", "$ 25.00", "48", "4.5", ["26 Mar, 2021", "11:40 AM"]
|
||||
],
|
||||
[
|
||||
["img-4.png", "Fabric Dual Tone Living Room Chair", "Furniture"], "15", "$ 140.00", "40", "4.2", ["19 Apr, 2021", "02:51 PM"]
|
||||
],
|
||||
[
|
||||
["img-5.png", "Crux Motorsports Helmet", "Bike Accessories"], "08", "$ 135.00", "55", "4.4", ["30 Mar, 2021", "09:42 AM"]
|
||||
],
|
||||
[
|
||||
["img-6.png", "Half Sleeve T-Shirts (Blue)", "Clothes"], "15", "$ 125.00", "48", "4.2", ["12 Oct, 2021", "04:55 PM"]
|
||||
],
|
||||
[
|
||||
["img-7.png", "Noise Evolve Smartwatch", "Watches"], "12", "$ 95.00", "45", "4.3", ["15 May, 2021", "03:40 PM"]
|
||||
],
|
||||
[
|
||||
["img-8.png", "Sweatshirt for Men (Pink)", "Clothes"], "20", "$ 120.00", "48", "4.2", ["21 Jun, 2021", "12:18 PM"]
|
||||
],
|
||||
[
|
||||
["img-9.png", "Reusable Ecological Coffee Cup", "Tableware & Dinnerware"], "14", "$ 125.00", "55", "4.3", ["15 Jan, 2021", "10:29 AM"]
|
||||
],
|
||||
[
|
||||
["img-10.png", "Travel Carrying Pouch Bag", "Bags, Wallets and Luggage"], "20", "$ 115.00", "60", "4.3", ["15 Jun, 2021", "03:51 Pm"]
|
||||
],
|
||||
[
|
||||
["img-1.png", "Half Sleeve Round Neck T-Shirts", "Clothes"], "12", "$ 115.00", "48", "4.2", ["12 Oct, 2021", "10:05 AM"]
|
||||
],
|
||||
[
|
||||
["img-2.png", "Urban Ladder Pashe Chair", "Furniture"], "06", "$ 160.00", "30", "4.3", ["06 Jan, 2021", "01:31 PM"]
|
||||
],
|
||||
]
|
||||
}).render(document.getElementById("table-product-list-all"));
|
||||
}
|
||||
|
||||
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function(value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(
|
||||
newValue
|
||||
);
|
||||
if (color) return color;
|
||||
else return newValue;
|
||||
} else {
|
||||
var val = value.split(",");
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Revenue Chart
|
||||
var linechartcustomerColors = getChartColorsArray("customer_impression_charts");
|
||||
if (linechartcustomerColors) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: "Orders",
|
||||
type: "area",
|
||||
data: [34, 65, 46, 68, 49, 61, 42, 44, 78, 52, 63, 67],
|
||||
},
|
||||
{
|
||||
name: "Earnings",
|
||||
type: "bar",
|
||||
data: [
|
||||
89.25, 98.58, 68.74, 108.87, 77.54, 84.03, 51.24, 28.57, 92.57, 42.36,
|
||||
88.51, 36.57,
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Refunds",
|
||||
type: "line",
|
||||
data: [8, 12, 7, 17, 21, 11, 5, 9, 7, 29, 12, 35],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
height: 370,
|
||||
type: "line",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: "straight",
|
||||
dashArray: [0, 0, 8],
|
||||
width: [2, 0, 2.2],
|
||||
},
|
||||
fill: {
|
||||
opacity: [0.1, 0.9, 1],
|
||||
},
|
||||
markers: {
|
||||
size: [0, 0, 0],
|
||||
strokeWidth: 2,
|
||||
hover: {
|
||||
size: 4,
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
right: -2,
|
||||
bottom: 15,
|
||||
left: 10,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
horizontalAlign: "center",
|
||||
offsetX: 0,
|
||||
offsetY: -5,
|
||||
markers: {
|
||||
width: 9,
|
||||
height: 9,
|
||||
radius: 6,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
vertical: 0,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: "30%",
|
||||
barHeight: "70%",
|
||||
},
|
||||
},
|
||||
colors: linechartcustomerColors,
|
||||
tooltip: {
|
||||
shared: true,
|
||||
y: [{
|
||||
formatter: function(y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0);
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
{
|
||||
formatter: function(y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return "$" + y.toFixed(2) + "k";
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
{
|
||||
formatter: function(y) {
|
||||
if (typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " Sales";
|
||||
}
|
||||
return y;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#customer_impression_charts"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
var counterValue = document.querySelector('.counter-value');
|
||||
if (counterValue) {
|
||||
|
||||
(counter = document.querySelectorAll(".counter-value")),
|
||||
(speed = 250);
|
||||
counter &&
|
||||
Array.from(counter).forEach(function(a) {
|
||||
!(function e() {
|
||||
var t = +a.getAttribute("data-target"),
|
||||
n = +a.innerText,
|
||||
o = t / speed;
|
||||
o < 1 && (o = 1),
|
||||
n < t ?
|
||||
((a.innerText = (n + o).toFixed(0)), setTimeout(e, 1)) :
|
||||
(a.innerText = t);
|
||||
})();
|
||||
});
|
||||
}
|
||||
|
||||
// Vertical Swiper
|
||||
var VerticalSwiper = document.querySelector('.vertical-swiper');
|
||||
if (VerticalSwiper) {
|
||||
var swiper = new Swiper(".vertical-swiper", {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 10,
|
||||
mousewheel: true,
|
||||
loop: true,
|
||||
direction: "vertical",
|
||||
autoplay: {
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
});
|
||||
}
|
||||
480
resources/js/pages/sellers.init.js
vendored
Executable file
480
resources/js/pages/sellers.init.js
vendored
Executable file
@@ -0,0 +1,480 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Sellers init js
|
||||
*/
|
||||
|
||||
// get colors array from the string
|
||||
function getChartColorsArray(chartId) {
|
||||
if (document.getElementById(chartId) !== null) {
|
||||
var colors = document.getElementById(chartId).getAttribute("data-colors");
|
||||
if (colors) {
|
||||
colors = JSON.parse(colors);
|
||||
return colors.map(function (value) {
|
||||
var newValue = value.replace(" ", "");
|
||||
if (newValue.indexOf(",") === -1) {
|
||||
var color = getComputedStyle(document.documentElement).getPropertyValue(
|
||||
newValue
|
||||
);
|
||||
if (color) return color;
|
||||
else return newValue;
|
||||
} else {
|
||||
var val = value.split(",");
|
||||
if (val.length == 2) {
|
||||
var rgbaColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue(val[0]);
|
||||
rgbaColor = "rgba(" + rgbaColor + "," + val[1] + ")";
|
||||
return rgbaColor;
|
||||
} else {
|
||||
return newValue;
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.warn('data-colors Attribute not found on:', chartId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Chart-seller 1
|
||||
var sellerlinecolor1 = getChartColorsArray("chart-seller1");
|
||||
if (sellerlinecolor1) {
|
||||
var sparklineoptions1 = {
|
||||
series: [{
|
||||
data: [12, 14, 2, 47, 42, 15, 47, 75, 65, 19, 14],
|
||||
}, ],
|
||||
chart: {
|
||||
type: "area",
|
||||
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: sellerlinecolor1,
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false,
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
var sparklinechart1 = new ApexCharts(
|
||||
document.querySelector("#chart-seller1"),
|
||||
sparklineoptions1
|
||||
);
|
||||
sparklinechart1.render();
|
||||
}
|
||||
|
||||
//Chart-seller 2
|
||||
var sellerlinecolor2 = getChartColorsArray("chart-seller2");
|
||||
if (sellerlinecolor2) {
|
||||
var sparklineoptions2 = {
|
||||
series: [{
|
||||
data: [12, 14, 2, 47, 42, 15, 35, 75, 20, 67, 89],
|
||||
}, ],
|
||||
chart: {
|
||||
type: "area",
|
||||
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: sellerlinecolor2,
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false,
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
var sparklinechart2 = new ApexCharts(
|
||||
document.querySelector("#chart-seller2"),
|
||||
sparklineoptions2
|
||||
);
|
||||
sparklinechart2.render();
|
||||
}
|
||||
|
||||
//Chart-seller 3
|
||||
var sellerlinecolor3 = getChartColorsArray("chart-seller3");
|
||||
if (sellerlinecolor3) {
|
||||
var sparklineoptions3 = {
|
||||
series: [{
|
||||
data: [45, 20, 8, 42, 30, 5, 35, 79, 22, 54, 64],
|
||||
}, ],
|
||||
chart: {
|
||||
type: "area",
|
||||
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: sellerlinecolor3,
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false,
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
var sparklinechart3 = new ApexCharts(
|
||||
document.querySelector("#chart-seller3"),
|
||||
sparklineoptions3
|
||||
);
|
||||
sparklinechart3.render();
|
||||
}
|
||||
|
||||
//Chart-seller 4
|
||||
var sellerlinecolor4 = getChartColorsArray("chart-seller4");
|
||||
if (sellerlinecolor4) {
|
||||
var sparklineoptions4 = {
|
||||
series: [{
|
||||
data: [26, 15, 48, 12, 47, 19, 35, 19, 85, 68, 50],
|
||||
}, ],
|
||||
chart: {
|
||||
type: "area",
|
||||
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: sellerlinecolor4,
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false,
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
var sparklinechart4 = new ApexCharts(
|
||||
document.querySelector("#chart-seller4"),
|
||||
sparklineoptions4
|
||||
);
|
||||
sparklinechart4.render();
|
||||
}
|
||||
|
||||
//Chart-seller 5
|
||||
var sellerlinecolor5 = getChartColorsArray("chart-seller5");
|
||||
if (sellerlinecolor5) {
|
||||
var sparklineoptions5 = {
|
||||
series: [{
|
||||
data: [60, 67, 12, 49, 6, 78, 63, 51, 33, 8, 16],
|
||||
}, ],
|
||||
chart: {
|
||||
type: "area",
|
||||
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: sellerlinecolor5,
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false,
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
var sparklinechart5 = new ApexCharts(
|
||||
document.querySelector("#chart-seller5"),
|
||||
sparklineoptions5
|
||||
);
|
||||
sparklinechart5.render();
|
||||
}
|
||||
|
||||
//Chart-seller 6
|
||||
var sellerlinecolor6 = getChartColorsArray("chart-seller6");
|
||||
if (sellerlinecolor6) {
|
||||
var sparklineoptions6 = {
|
||||
series: [{
|
||||
data: [78, 63, 51, 33, 8, 16, 60, 67, 12, 49, ],
|
||||
}, ],
|
||||
chart: {
|
||||
type: "area",
|
||||
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: sellerlinecolor6,
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false,
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
var sparklinechart6 = new ApexCharts(
|
||||
document.querySelector("#chart-seller6"),
|
||||
sparklineoptions6
|
||||
);
|
||||
sparklinechart6.render();
|
||||
}
|
||||
|
||||
//Chart-seller 7
|
||||
var sellerlinecolor7 = getChartColorsArray("chart-seller7");
|
||||
if (sellerlinecolor7) {
|
||||
var sparklineoptions7 = {
|
||||
series: [{
|
||||
data: [15, 35, 75, 20, 67, 8, 42, 30, 5, 35],
|
||||
}, ],
|
||||
chart: {
|
||||
type: "area",
|
||||
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: sellerlinecolor7,
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false,
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
var sparklinechart7 = new ApexCharts(
|
||||
document.querySelector("#chart-seller7"),
|
||||
sparklineoptions7
|
||||
);
|
||||
sparklinechart7.render();
|
||||
}
|
||||
|
||||
//Chart-seller 8
|
||||
var sellerlinecolor8 = getChartColorsArray("chart-seller8");
|
||||
if (sellerlinecolor8) {
|
||||
var sparklineoptions8 = {
|
||||
series: [{
|
||||
data: [45, 32, 68, 55, 36, 10, 48, 25, 74, 54],
|
||||
}, ],
|
||||
chart: {
|
||||
type: "area",
|
||||
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: sellerlinecolor8,
|
||||
tooltip: {
|
||||
fixed: {
|
||||
enabled: false,
|
||||
},
|
||||
x: {
|
||||
show: false,
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
formatter: function (seriesName) {
|
||||
return "";
|
||||
},
|
||||
},
|
||||
},
|
||||
marker: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
var sparklinechart8 = new ApexCharts(
|
||||
document.querySelector("#chart-seller8"),
|
||||
sparklineoptions8
|
||||
);
|
||||
sparklinechart8.render();
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user