jjimenez/erp-imprimelibros
1
0
Fork 0
mirror of https://git.imnavajas.es/jjimenez/erp-imprimelibros.git synced 2026-01-24 09:40:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

primer commit. añadido tema Velzon

Browse Source
This commit is contained in:
Jaime Jiménez
2025-07-19 10:57:49 +02:00
parent bb724f9f08
commit 3f151be9a7
4310 changed files with 605578 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/main/resources/static/assets/js/pages/animation-aos.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-area.init.js Normal file
View File

File diff suppressed because it is too large Load Diff

786
src/main/resources/static/assets/js/pages/apexcharts-bar.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-boxplot.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-bubble.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-candlestick.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-column.init.js Normal file
View File

File diff suppressed because it is too large Load Diff

544
src/main/resources/static/assets/js/pages/apexcharts-heatmap.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-line.init.js Normal file
View File

File diff suppressed because it is too large Load Diff

370
src/main/resources/static/assets/js/pages/apexcharts-mixed.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-pie.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-polararea.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-radar.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-radialbar.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-scatter.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-timeline.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apexcharts-treemap.init.js Normal file
View 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();
}

455
src/main/resources/static/assets/js/pages/api-key.init.js Normal file
View File

@ -0,0 +1,455 @@
/*
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"]');
var checkedCount = document.querySelectorAll('.form-check-all input[type="checkbox"]:checked').length;
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");
}
}
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'none' : document.getElementById("remove-actions").style.display = 'block';
};
}
var perPage = 8;
//Table
var options = {
valueNames: [
"id",
"name",
"createBy",
"apikey",
"status",
"create_date",
"expiry_date",
],
page: perPage,
pagination: true,
plugins: [
ListPagination({
left: 2,
right: 2,
}),
],
};
// Init list
var apiKeyList = new List("apiKeyList", 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) {
apiKeyList.add({
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ' + element.id + "</a>",
name: element.name,
createBy: element.createBy,
apikey: '<input type="text" class="form-control apikey-value" readonly value="' + element.apikey + '">',
status: isStatus(element.status),
create_date: element.create_date,
expiry_date: element.expiry_date
});
apiKeyList.sort('id', { order: "desc" });
if(element.status == "Active"){
document.querySelector(".disable-btn").innerHTML = "Disable"
}else if (element.status == "Disable"){
document.querySelector(".disable-btn").innerHTML = "Enable"
}
refreshCallbacks();
});
apiKeyList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">#VZ001</a>`);
}
xhttp.open("GET", "assets/json/api-key-list.json");
xhttp.send();
function isStatus(val) {
switch (val) {
case "Disable":
return ('<span class="badge badge-soft-danger">' + val + "</span>");
case "Active":
return ('<span class="badge badge-soft-success">' + val + "</span>");
}
}
document.getElementById("api-key-modal").addEventListener("show.bs.modal", function (e) {
if (e.relatedTarget.classList.contains("edit-item-btn")) {
document.getElementById("exampleModalLabel").innerHTML = "Rename API name";
document.getElementById("api-key-modal").querySelector(".modal-footer").style.display = "block";
document.getElementById("add-btn").style.display = "none";
document.getElementById("createApi-btn").style.display = "none";
document.getElementById("edit-btn").style.display = "block";
} else if (e.relatedTarget.classList.contains("create-btn")) {
document.getElementById("exampleModalLabel").innerHTML = "Create API Key";
document.getElementById("api-key-modal").querySelector(".modal-footer").style.display = "block";
document.getElementById("edit-btn").style.display = "none";
document.getElementById("createApi-btn").style.display = "block";
document.getElementById("add-btn").style.display = "none";
} else if (e.relatedTarget.classList.contains("regenerate-api-btn")) {
document.getElementById("exampleModalLabel").innerHTML = "Regenerate API";
document.getElementById("api-key-modal").querySelector(".modal-footer").style.display = "block";
document.getElementById("add-btn").style.display = "none";
document.getElementById("createApi-btn").style.display = "none";
document.getElementById("edit-btn").style.display = "block";
}
});
var idField = document.getElementById("apikeyId"),
apiKeyNameField = document.getElementById("api-key-name"),
apiKeyField = document.getElementById("api-key"),
addBtn = document.getElementById("add-btn"),
editBtn = document.getElementById("edit-btn"),
removeBtns = document.getElementsByClassName("remove-item-btn"),
editBtns = document.getElementsByClassName("edit-item-btn");
refreshCallbacks();
ischeckboxcheck();
document.getElementById("api-key-modal").addEventListener("hidden.bs.modal", function () {
clearFields();
});
document.querySelector("#apiKeyList").addEventListener("click", function () {
ischeckboxcheck();
});
// generateApiID
function generateApiID() {
var d = new Date().getTime();
if (window.performance && typeof window.performance.now === "function") {
d += performance.now();
}
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : r & 0x3 | 0x8).toString(16);
});
return uuid;
}
document.querySelectorAll(".create-btn").forEach(function (item) {
item.addEventListener("click", function () {
document.getElementById("api-key").value = generateApiID();
})
});
var now = new Date();
var current = now.toUTCString().slice(5, 16);
now.setMonth(now.getMonth() + 6);
var nextDate = now.toUTCString().slice(5, 16);
var count = 13;
document.getElementById("createApi-btn").addEventListener("click", function (e) {
var text;
if (apiKeyNameField.value.length == 0) {
var errorMsg = document.getElementById("api-key-error-msg");
errorMsg.classList.remove("d-none");
setTimeout(() => document.getElementById("api-key-error-msg").classList.add("d-none"), 2000);
text = "Please enter api key name";
errorMsg.innerHTML = text;
return false;
}
if (apiKeyNameField.value.length > 0) {
document.getElementById("apikey-element").style.display = "block";
e.target.style.display = "none";
document.getElementById("add-btn").style.display = "block";
}
});
addBtn.addEventListener("click", function (e) {
var errorMsg = document.getElementById("api-key-error-msg");
errorMsg.classList.remove("d-none");
setTimeout(() => document.getElementById("api-key-error-msg").classList.add("d-none"), 2000);
var text;
if (apiKeyNameField.value.length == 0) {
text = "Please enter api key name";
errorMsg.innerHTML = text;
return false;
}
if (
apiKeyNameField.value !== "" &&
apiKeyField.value !== ""
) {
apiKeyList.add({
id: '<a href="javascript:void(0);" class="fw-medium link-primary">#VZ' + count + "</a>",
name: apiKeyNameField.value,
createBy: document.querySelector("#page-header-user-dropdown .user-name-text").innerHTML,
apikey: '<input type="text" class="form-control apikey-value" readonly value="' + apiKeyField.value + '">',
status: isStatus("Active"),
create_date: current,
expiry_date: nextDate
});
apiKeyList.sort('id', { order: "desc" });
document.getElementById("close-modal").click();
clearFields();
refreshCallbacks();
count++;
Swal.fire({
position: 'center',
icon: 'success',
title: 'Application inserted successfully!',
showConfirmButton: false,
timer: 2000,
showCloseButton: true
});
}
});
editBtn.addEventListener("click", function (e) {
document.getElementById("exampleModalLabel").innerHTML = "Rename API name";
var editValues = apiKeyList.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">#VZ' + idField.value + "</a>",
name: apiKeyNameField.value,
createBy: x._values.createBy,
apikey: '<input type="text" class="form-control apikey-value" readonly value="' + apiKeyField.value + '">',
status: x._values.status,
create_date: x._values.create_date,
expiry_date: x._values.expiry_date
});
}
document.getElementById("close-modal").click();
});
Swal.fire({
position: 'center',
icon: 'success',
title: 'API name updated Successfully!',
showConfirmButton: false,
timer: 2000,
showCloseButton: true
});
});
// ischeckboxcheck
function ischeckboxcheck() {
Array.from(document.getElementsByName("chk_child")).forEach(function (x) {
x.addEventListener("change", function (e) {
if (x.checked == true) {
e.target.closest("tr").classList.add("table-active");
} else {
e.target.closest("tr").classList.remove("table-active");
}
var checkedCount = document.querySelectorAll('[name="chk_child"]:checked').length;
if (e.target.closest("tr").classList.contains("table-active")) {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block' : document.getElementById("remove-actions").style.display = 'none';
} else {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block' : document.getElementById("remove-actions").style.display = 'none';
}
});
});
}
// refreshCallbacks
function refreshCallbacks() {
// editBtns
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 = apiKeyList.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) {
document.getElementById("apikey-element").style.display = "block";
idField.value = selectedid;
apiKeyNameField.value = x._values.name;
apiKeyField.value = new DOMParser().parseFromString(x._values.apikey, "text/html").body.querySelector(".apikey-value").value;
}
});
});
});
// regenerate api
Array.from(document.querySelectorAll(".regenerate-api-btn")).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 = apiKeyList.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) {
document.getElementById("apikey-element").style.display = "block";
idField.value = selectedid;
apiKeyNameField.value = x._values.name;
apiKeyField.value = generateApiID();
}
});
});
});
// 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 = apiKeyList.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 () {
apiKeyList.remove("id", isElem.outerHTML);
document.getElementById("deleteRecord-close").click();
});
}
});
});
});
}
// clearFields
function clearFields() {
apiKeyNameField.value = "";
apiKeyField.value = "";
document.getElementById("apikey-element").style.display = "none";
document.getElementById("add-btn").style.display = "none";
}
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]');
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++) {
apiKeyList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">` + ids_array[i] + `</a>`);
}
document.getElementById("remove-actions").style.display = 'none';
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
});
}
};

133
src/main/resources/static/assets/js/pages/apps-nft-auction.init.js Normal file
View 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, 2024 5:3:1";
var setEndDate3 = "Dec 01, 2024 1:0:1";
var setEndDate4 = "Nov 26, 2024 1:2:1";
var setEndDate5 = "May 27, 2024 1:6:6";
var setEndDate6 = "May 20, 2024 2:5:5";
var setEndDate7 = "June 10, 2024 5:1:4";
var setEndDate8 = "June 25, 2024 1:6:3";
var setEndDate9 = "July 08, 2024 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
src/main/resources/static/assets/js/pages/apps-nft-create.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apps-nft-explore.init.js Normal file
View 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.html">'+ 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
src/main/resources/static/assets/js/pages/apps-nft-item-details.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/apps-nft-ranking.init.js Normal file
View 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(): '': '';
});

753
src/main/resources/static/assets/js/pages/calendar.init.js Normal file
View File

@ -0,0 +1,753 @@
/*
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 updateDay = null
if(ed_date != null){
var endUpdateDay = new Date(ed_date);
updateDay = endUpdateDay.setDate(endUpdateDay.getDate() - 1);
}
var r_date = ed_date == null ? (str_dt(st_date)) : (str_dt(st_date)) + ' to ' + (str_dt(updateDay));
var er_date = ed_date == null ? (date_r(st_date)) : (date_r(st_date)) + ' to ' + (date_r(updateDay));
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 newdate = new Date(start_date[1]);
newdate.setDate(newdate.getDate() + 1);
var updateEndDate = (start_date[1]) ? newdate : '';
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
src/main/resources/static/assets/js/pages/card.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/chartjs.init.js Normal file
View 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',
}
}
},
}
}
});
}

971
src/main/resources/static/assets/js/pages/chat.init.js Normal file
View File

@ -0,0 +1,971 @@
/*
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
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,
});
}
// // 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)
var scrollEl = new SimpleBar(document.getElementById('chat-conversation'));
scrollEl.getScrollElement().scrollTop = document.getElementById("users-conversation").scrollHeight;
}, 100);*/
//}
function scrollToBottom(id) {
setTimeout(function () {
var simpleBar = 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 + 370 : 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;
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
src/main/resources/static/assets/js/pages/coming-soon.init.js Normal file
View 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 1, 2025").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);
});

513
src/main/resources/static/assets/js/pages/crm-companies.init.js Normal file
View File

@ -0,0 +1,513 @@
/*
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"]');
var checkedCount = document.querySelectorAll('.form-check-all input[type="checkbox"]:checked').length;
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");
}
}
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'none' : document.getElementById("remove-actions").style.display = 'block';
};
}
var perPage = 8;
var editlist = false;
//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,
desc: raw.desc,
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").innerHTML = "Update";
} 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("add-btn").innerHTML = "Add Company";
} 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 () {
ischeckboxcheck();
});
var table = document.getElementById("customerTable");
// save all tr
var tr = table.getElementsByTagName("tr");
var trlist = table.querySelectorAll(".list tr");
var count = 11;
var forms = document.querySelectorAll('.tablelist-form')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
} else {
event.preventDefault();
if (
companyNameField.value !== "" &&
ownerField.value !== "" &&
industry_typeField.value !== "" &&
star_valueField.value !== "" &&
locationField.value !== "" &&
employeeField.value !== "" &&
websiteField.value !== "" &&
contact_emailField.value !== "" &&
sinceField.value !== "" && !editlist) {
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
});
}else if(
companyNameField.value !== "" &&
ownerField.value !== "" &&
industry_typeField.value !== "" &&
star_valueField.value !== "" &&
locationField.value !== "" &&
employeeField.value !== "" &&
websiteField.value !== "" &&
contact_emailField.value !== "" &&
sinceField.value !== "" && editlist) {
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
});
}
}
}, false)
})
function ischeckboxcheck() {
Array.from(document.getElementsByName("chk_child")).forEach(function (x) {
x.addEventListener("change", function (e) {
if (x.checked == true) {
e.target.closest("tr").classList.add("table-active");
} else {
e.target.closest("tr").classList.remove("table-active");
}
var checkedCount = document.querySelectorAll('[name="chk_child"]:checked').length;
if (e.target.closest("tr").classList.contains("table-active")) {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
} else {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
}
});
});
}
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 = 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();
});
}
});
});
});
}
if(editBtns){
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) {
editlist = true;
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;
}
});
});
});
}
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">${x._values.desc}</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("remove-actions").style.display = 'none';
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(): '': '';
});

570
src/main/resources/static/assets/js/pages/crm-contact.init.js Normal file
View File

@ -0,0 +1,570 @@
/*
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"]');
var checkedCount = document.querySelectorAll('.form-check-all input[type="checkbox"]:checked').length;
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");
}
}
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'none' : document.getElementById("remove-actions").style.display = 'block';
};
}
var perPage = 8;
var editlist = false;
//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,
desc: raw.desc,
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").innerHTML = "Update";
} 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("add-btn").innerHTML = "Add Contact";
} 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 () {
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>'
})
var forms = document.querySelectorAll('.tablelist-form')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
} else {
event.preventDefault();
if (customerNameField.value !== "" &&
company_nameField.value !== "" &&
email_idField.value !== "" &&
phoneField.value !== "" &&
lead_scoreField.value !== "" &&
designationField.value !== "" && !editlist) {
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
});
}else if (customerNameField.value !== "" &&
company_nameField.value !== "" &&
email_idField.value !== "" &&
phoneField.value !== "" &&
lead_scoreField.value !== "" &&
designationField.value !== "" && editlist) {
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
});
}
}
}, false)
})
function ischeckboxcheck() {
Array.from(document.getElementsByName("chk_child")).forEach(function (x) {
x.addEventListener("change", function (e) {
if (x.checked == true) {
e.target.closest("tr").classList.add("table-active");
} else {
e.target.closest("tr").classList.remove("table-active");
}
var checkedCount = document.querySelectorAll('[name="chk_child"]:checked').length;
if (e.target.closest("tr").classList.contains("table-active")) {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
} else {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
}
});
});
}
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 = 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();
});
}
});
});
});
}
if(editBtns){
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) {
editlist = true;
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">${x._values.desc}</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("remove-actions").style.display = 'none';
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
src/main/resources/static/assets/js/pages/crm-deals.init.js Normal file
View 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
});
}
});

449
src/main/resources/static/assets/js/pages/crm-leads.init.js Normal file
View File

@ -0,0 +1,449 @@
/*
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"]');
var checkedCount = document.querySelectorAll('.form-check-all input[type="checkbox"]:checked').length;
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");
}
}
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'none' : document.getElementById("remove-actions").style.display = 'block';
};
}
var perPage = 8;
var editlist = false;
//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").innerHTML = "Update";
} 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("add-btn").innerHTML = "Add Lead";
} 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 () {
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>'
})
var forms = document.querySelectorAll('.tablelist-form')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
} else {
event.preventDefault();
if (
leadNameField.value !== "" &&
company_nameField.value !== "" &&
dateField.value !== "" &&
leads_scoreField.value !== "" &&
phoneField.value !== "" &&
locationField.value !== "" && !editlist) {
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
});
}else if(
leadNameField.value !== "" &&
company_nameField.value !== "" &&
dateField.value !== "" &&
leads_scoreField.value !== "" &&
phoneField.value !== "" &&
locationField.value !== "" && editlist) {
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
});
}
}
}, false)
})
function ischeckboxcheck() {
Array.from(document.getElementsByName("chk_child")).forEach(function (x) {
x.addEventListener("change", function (e) {
if (x.checked == true) {
e.target.closest("tr").classList.add("table-active");
} else {
e.target.closest("tr").classList.remove("table-active");
}
var checkedCount = document.querySelectorAll('[name="chk_child"]:checked').length;
if (e.target.closest("tr").classList.contains("table-active")) {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
} else {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
}
});
});
}
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 = 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();
});
}
});
});
});
}
if(editBtns){
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) {
editlist = true;
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("remove-actions").style.display = 'none';
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
src/main/resources/static/assets/js/pages/crypto-buy-sell.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/crypto-kyc.init.js Normal file
View 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"))
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",
});

136
src/main/resources/static/assets/js/pages/crypto-orders.init.js Normal file
View File

@ -0,0 +1,136 @@
/*
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",
{ name: 'time', attr: 'data-timestamp' },
{ name: 'or_val', attr: 'data-orderval' },
{ name: 'sort-avg_price', attr: 'data-av-price' },
{ name: 'sort-price', attr: 'data-price' },
],
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"
);
}
function filterData(){
var isstatus = document.getElementById("idStatus").value;
var isType = document.getElementById("idType").value;
var pickerVal = document.getElementById("range-datepicker").value;
var date1 = pickerVal.split(" to ")[0];
var date2 = pickerVal.split(" to ")[1];
contactList.filter(function (data) {
matchData = new DOMParser().parseFromString(data.values().status, "text/html");
var status = matchData.body.firstElementChild.innerHTML;
var statusFilter = false;
var dateFilter = false;
var typeFilter = false;
if (status == "all" || isstatus == "all") {
statusFilter = true;
} else {
statusFilter = status == isstatus;
}
if (data.values().type == "all" || isType == "all") {
typeFilter = true;
} else {
typeFilter = data.values().type == isType;
}
if (
new Date(data.values().order_date.slice(0, 12)) >= new Date(date1) &&
new Date(data.values().order_date.slice(0, 12)) <= new Date(date2)
) {
dateFilter = true;
} else {
dateFilter = false;
}
if(statusFilter && typeFilter && dateFilter){
return statusFilter && typeFilter && dateFilter
} else if (statusFilter && typeFilter && pickerVal == "") {
return statusFilter && typeFilter;
} else if (typeFilter && dateFilter && pickerVal == "") {
return typeFilter && dateFilter;
}
});
contactList.update();
}
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
src/main/resources/static/assets/js/pages/crypto-transactions.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/crypto-wallet.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/dashboard-analytics.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/dashboard-crm.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/dashboard-crypto.init.js Normal file
View 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,
},
},
});

344
src/main/resources/static/assets/js/pages/dashboard-ecommerce.init.js Normal file
View File

@ -0,0 +1,344 @@
/*
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 htmlAttr = document.documentElement;
if(htmlAttr.getAttribute("data-layout") == "semibox"){
userProfileSidebar.classList.remove("d-block");
userProfileSidebar.classList.add("d-none");
}
});
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");
}
});
}
var htmlAttr = document.documentElement
if(htmlAttr.getAttribute("data-layout") == "semibox"){
if (window.outerWidth > 1699) {
userProfileSidebar.classList.remove("d-block");
userProfileSidebar.classList.add("d-none");
}
}
});

553
src/main/resources/static/assets/js/pages/dashboard-job.init.js Normal file
View File

@ -0,0 +1,553 @@
/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://Themesbrand.com/
Contact: Themesbrand@gmail.com
File: job 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);
}
}
}
// Dashed line chart
var linechartDashedColors = getChartColorsArray("line_chart_dashed");
if (linechartDashedColors) {
var options = {
chart: {
height: 345,
type: 'line',
zoom: {
enabled: false
},
toolbar: {
show: false,
}
},
colors: linechartDashedColors,
dataLabels: {
enabled: false
},
stroke: {
width: [3, 4, 3],
curve: 'straight',
dashArray: [0, 8, 5]
},
series: [{
name: 'New Application',
data: [89, 56, 74, 98, 72, 38, 64, 46, 84, 58, 46, 49]
},
{
name: "Interview",
data: [45, 52, 38, 24, 33, 26, 21, 20, 6, 8, 15, 10]
},
{
name: " Hired",
data: [36, 42, 60, 42, 13, 18, 29, 37, 36, 51, 32, 35]
}
],
markers: {
size: 0,
hover: {
sizeOffset: 6
}
},
xaxis: {
categories: ['01 Jan', '02 Jan', '03 Jan', '04 Jan', '05 Jan', '06 Jan', '07 Jan', '08 Jan', '09 Jan',
'10 Jan', '11 Jan', '12 Jan'
],
},
grid: {
borderColor: '#f1f1f1',
}
}
var chart = new ApexCharts(
document.querySelector("#line_chart_dashed"),
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;
},
},
},
});
}
var jobListAllData = [
["Marketing Director", "Meta4Systems", "Vinninga, Sweden", "$250 - $800", "0-5 year", "Full Time"],
["UI/UX designer", "Zoetic Fashion", "Cullera, Spain", "$400+", "0-2 year", "Part Time"],
["Web Designer", "Force Medicines", "Ugashik, US", "$412 - $241 ", "3+ year", "Freelancer"],
["Full Stack Engineer", "Syntyce Solutions", "Zuweihir, UAE", "$650 - $900", "0-1+ year", "Full Time"],
["Assistant / Store Keeper", "Moetic Fashion", "Limestone, US", "$340 - $800", "0-3 year", "Intership"],
["Project Manager", "Themesbrand", "California, US", "$400 - $600", "3+ year", "Part Time"],
["Education Training", "Micro Design", "Germany", "$750 - $940", "1.5+ year", "Freelancer"],
["Graphic Designer", "Digitech Galaxy", "Mughairah, UAE", "$160 - $230", "2-3+ year", "Full Time"],
["React Developer", "iTest Factory", "Khabākhib, UAE", "$90 - $160", "5+ year", "Intership"],
["Executive, HR Operations", "Micro Design", "Texanna, US", "$50 - $120", "1-5 year", "Part Time"],
["Project Manager", "Meta4Systems", "Limestone, US", "$210 - $300", "0-2+ year", "Freelancer"],
["Full Stack Engineer", "Force Medicines", "Ugashik, US", "$120 - $180", "2-5 year", "Part Time"],
["Full Stack Engineer", "Digitech Galaxy", "Maidaq, UAE", "$900 - $1020", "3-5 year", "Full Time"],
["Marketing Director", "Zoetic Fashion", "Quesada, US", "$600 - $870", "0-5 year", "Freelancer"],
];
// recomended-jobs
if (document.getElementById("recomended-jobs")){
var jobListAll = new gridjs.Grid({
columns: [{
name: 'Position',
width: '150px',
}, {
name: 'Company Name',
width: '250px',
}, {
name: 'Location',
width: '250px',
}, {
name: 'Salary',
width: '250px',
}, {
name: 'Experience',
width: '150px',
},{
name: 'Job Type',
width: '150px',
}],
sort: true,
// search: true,
pagination: {
limit: 6
},
data: jobListAllData,
}).render(document.getElementById("recomended-jobs"));
// Search product list
var searchResultList = document.getElementById("searchResultList");
searchResultList.addEventListener("keyup", function () {
var inputVal = searchResultList.value.toLowerCase();
function filterItems(arr, query) {
return arr.filter(function (el) {
return el[0].toLowerCase().indexOf(query.toLowerCase()) !== -1 || el[1].toLowerCase().indexOf(query.toLowerCase()) !== -1
})
}
var filterData = filterItems(jobListAllData, inputVal);
jobListAll.updateConfig({
data: filterData
}).forceRender();
});
}
// candidate-list
Array.from(document.querySelectorAll("#candidate-list li")).forEach(function (item) {
item.querySelector("a").addEventListener("click", function () {
var candidateName = item.querySelector(".candidate-name").innerHTML;
var candidatePosition = item.querySelector(".candidate-position").innerHTML;
var candidateImg = item.querySelector(".candidate-img").src
document.getElementById("candidate-name").innerHTML = candidateName;
document.getElementById("candidate-position").innerHTML = candidatePosition;
document.getElementById("candidate-img").src = candidateImg;
})
});
window.addEventListener("load", () => {
var searchInput = document.getElementById("searchList"), // search box
candidateList = document.querySelectorAll("#candidate-list li"); // all list items
searchInput.onkeyup = () => {
let search = searchInput.value.toLowerCase();
for (let i of candidateList) {
let item = i.querySelector(".candidate-name").innerHTML.toLowerCase();
if (item.indexOf(search) == -1) { i.classList.add("d-none"); }
else { i.classList.remove("d-none"); }
}
};
});
// total jobs Charts
var chartRadialbarBasicColors = getChartColorsArray("total_jobs");
if (chartRadialbarBasicColors) {
var options = {
series: [95],
chart: {
type: 'radialBar',
width: 105,
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '70%'
},
track: {
margin: 1
},
dataLabels: {
show: true,
name: {
show: false
},
value: {
show: true,
fontSize: '16px',
fontWeight: 600,
offsetY: 8,
}
}
}
},
colors: chartRadialbarBasicColors
};
var chart = new ApexCharts(document.querySelector("#total_jobs"), options);
chart.render();
}
// apply jobs Charts
var chartRadialbarBasicColors = getChartColorsArray("apply_jobs");
if (chartRadialbarBasicColors) {
var options = {
series: [97],
chart: {
type: 'radialBar',
width: 105,
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '70%'
},
track: {
margin: 1
},
dataLabels: {
show: true,
name: {
show: false
},
value: {
show: true,
fontSize: '16px',
fontWeight: 600,
offsetY: 8,
}
}
}
},
colors: chartRadialbarBasicColors
};
var chart = new ApexCharts(document.querySelector("#apply_jobs"), options);
chart.render();
}
// interview_chart
var chartRadialbarBasicColors = getChartColorsArray("interview_chart");
if (chartRadialbarBasicColors) {
var options = {
series: [89],
chart: {
type: 'radialBar',
width: 105,
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '70%'
},
track: {
margin: 1
},
dataLabels: {
show: true,
name: {
show: false
},
value: {
show: true,
fontSize: '16px',
fontWeight: 600,
offsetY: 8,
}
}
},
},
colors: chartRadialbarBasicColors
};
var chart = new ApexCharts(document.querySelector("#interview_chart"), options);
chart.render();
}
// Hired Chart
var chartRadialbarBasicColors = getChartColorsArray("hired_chart");
if (chartRadialbarBasicColors) {
var options = {
series: [64],
chart: {
type: 'radialBar',
width: 105,
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '70%'
},
track: {
margin: 1
},
dataLabels: {
show: true,
name: {
show: false
},
value: {
show: true,
fontSize: '16px',
fontWeight: 600,
offsetY: 8,
}
}
}
},
colors: chartRadialbarBasicColors
};
var chart = new ApexCharts(document.querySelector("#hired_chart"), options);
chart.render();
}
// Rejected Chart
var chartRadialbarBasicColors = getChartColorsArray("rejected_chart");
if (chartRadialbarBasicColors) {
var options = {
series: [20],
chart: {
type: 'radialBar',
width: 105,
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '70%'
},
track: {
margin: 1
},
dataLabels: {
show: true,
name: {
show: false
},
value: {
show: true,
fontSize: '16px',
fontWeight: 600,
offsetY: 8,
}
}
}
},
colors: chartRadialbarBasicColors
};
var chart = new ApexCharts(document.querySelector("#rejected_chart"), options);
chart.render();
}
// New jobs Chart
var chartRadialbarBasicColors = getChartColorsArray("new_jobs_chart");
if (chartRadialbarBasicColors) {
var options = {
series: [80],
chart: {
type: 'radialBar',
width: 105,
sparkline: {
enabled: true
}
},
dataLabels: {
enabled: false
},
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '70%'
},
track: {
margin: 1
},
dataLabels: {
show: true,
name: {
show: false
},
value: {
show: true,
fontSize: '16px',
fontWeight: 600,
offsetY: 8,
}
}
}
},
colors: chartRadialbarBasicColors
};
var chart = new ApexCharts(document.querySelector("#new_jobs_chart"), options);
chart.render();
}

697
src/main/resources/static/assets/js/pages/dashboard-nft.init.js Normal file
View 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;
},
},
},
});
}

249
src/main/resources/static/assets/js/pages/dashboard-projects.init.js Normal file
View File

@ -0,0 +1,249 @@
/*
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-conversation
var scrollEl = new SimpleBar(document.getElementById('chat-conversation'));
scrollEl.getScrollElement().scrollTop = document.getElementById("users-conversation").scrollHeight;

110
src/main/resources/static/assets/js/pages/datatables.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/echarts.init.js Normal file
View File

File diff suppressed because it is too large Load Diff

70
src/main/resources/static/assets/js/pages/ecommerce-cart.init.js Normal file
View 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();
});
});

467
src/main/resources/static/assets/js/pages/ecommerce-customer-list.init.js Normal file
View File

@ -0,0 +1,467 @@
/*
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"]');
var checkedCount = document.querySelectorAll('.form-check-all input[type="checkbox"]:checked').length;
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");
}
}
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'none' : document.getElementById("remove-actions").style.display = 'block';
};
}
var perPage = 8;
var editlist = false;
//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").innerHTML = "Update";
} 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("add-btn").innerHTML = "Add Customer";
} 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 () {
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;
var forms = document.querySelectorAll('.tablelist-form')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
} else {
event.preventDefault();
if (customerNameField.value !== "" &&
emailField.value !== "" &&
dateField.value !== "" &&
phoneField.value !== "" && !editlist) {
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
});
} else if (
customerNameField.value !== "" &&
emailField.value !== "" &&
dateField.value !== "" &&
phoneField.value !== "" && editlist
){
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
});
}
}
}, false)
})
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("chk_child")).forEach(function (x) {
x.addEventListener("change", function (e) {
if (x.checked == true) {
e.target.closest("tr").classList.add("table-active");
} else {
e.target.closest("tr").classList.remove("table-active");
}
var checkedCount = document.querySelectorAll('[name="chk_child"]:checked').length;
if (e.target.closest("tr").classList.contains("table-active")) {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
} else {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
}
});
});
}
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("deleteRecord-close").click();
});
}
});
});
});
}
if(editBtns){
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) {
editlist = true;
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');
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++) {
customerList.remove("id", `<a href="javascript:void(0);" class="fw-medium link-primary">${ids_array[i]}</a>`);
}
document.getElementById("remove-actions").style.display = 'none';
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(): '': '';
});

577
src/main/resources/static/assets/js/pages/ecommerce-order.init.js Normal file
View File

@ -0,0 +1,577 @@
/*
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"]');
var checkedCount = document.querySelectorAll('.form-check-all input[type="checkbox"]:checked').length;
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");
}
}
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'none' : document.getElementById("remove-actions").style.display = 'block';
};
}
var perPage = 8;
var editlist = false;
//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").innerHTML = "Update";
} 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("add-btn").innerHTML = "Add Order";
} 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 () {
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;
var forms = document.querySelectorAll('.tablelist-form')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
} else {
event.preventDefault();
if (
customerNameField.value !== "" &&
productNameField.value !== "" &&
dateField.value !== "" &&
amountField.value !== "" &&
paymentField.value !== "" && !editlist
) {
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
});
} else if (
customerNameField.value !== "" &&
productNameField.value !== "" &&
dateField.value !== "" &&
amountField.value !== "" &&
paymentField.value !== "" && editlist
){
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
});
}
}
}, false)
});
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("change", function (e) {
if (x.checked == true) {
e.target.closest("tr").classList.add("table-active");
} else {
e.target.closest("tr").classList.remove("table-active");
}
var checkedCount = document.querySelectorAll('[name="checkAll"]:checked').length;
if (e.target.closest("tr").classList.contains("table-active")) {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
} else {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
}
});
});
}
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 = 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();
});
}
});
});
});
}
if (editBtns){
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) {
editlist = true;
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]');
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++) {
orderList.remove("id", `<a href="/apps-ecommerce-order-details" class="fw-medium link-primary">` + ids_array[i] +`</a>`);
}
document.getElementById("remove-actions").style.display = 'none';
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
});
}
}

88
src/main/resources/static/assets/js/pages/ecommerce-product-checkout.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/ecommerce-product-create.init.js Normal file
View 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.html");
return false;
}
form.classList.add('was-validated');
}, false)
})
})()

26
src/main/resources/static/assets/js/pages/ecommerce-product-details.init.js Normal file
View 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,
},
});

775
src/main/resources/static/assets/js/pages/ecommerce-product-list.init.js Normal file
View File

@ -0,0 +1,775 @@
/*
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
src/main/resources/static/assets/js/pages/file-manager.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/flag-input.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/form-advanced.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/form-editor.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/form-file-upload.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/form-input-spin.init.js Normal file
View 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);
})
}
}
});
});
}
}

82
src/main/resources/static/assets/js/pages/form-masks.init.js Normal file
View File

@ -0,0 +1,82 @@
/*
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-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
});
}
if (document.querySelector("#cleave-phone")) {
var cleaveBlocks = new Cleave('#cleave-phone', {
delimiters: ['(', ')', '-'],
blocks: [0, 3, 3, 4]
});
}

272
src/main/resources/static/assets/js/pages/form-pickers.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/form-validation.init.js Normal file
View 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);
})();

88
src/main/resources/static/assets/js/pages/form-wizard.init.js Normal file
View File

@ -0,0 +1,88 @@
/*
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")){
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 () {
form.classList.add('was-validated');
form.querySelectorAll(".tab-pane.show .form-control").forEach(function(elem){
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
if(elem.value.length > 0 && elem.value.match(validRegex)){
var nextTab = nextButton.getAttribute('data-nexttab');
document.getElementById(nextTab).click();
form.classList.remove('was-validated');
}
})
})
});
}
//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 () {
form.classList.remove('was-validated');
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
src/main/resources/static/assets/js/pages/gallery.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/gmaps.init.js Normal file
View 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");
}
});

353
src/main/resources/static/assets/js/pages/gridjs.init.js Normal file
View File

@ -0,0 +1,353 @@
/*
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',
width: '80px',
formatter: (function (cell) {
return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
})
},
{
name: 'Name',
width: '150px',
},
{
name: 'Email',
width: '220px',
formatter: (function (cell) {
return gridjs.html('<a href="">' + cell + '</a>');
})
},
{
name: 'Position',
width: '250px',
},
{
name: 'Company',
width: '180px',
},
{
name: 'Country',
width: '180px',
},
{
name: 'Actions',
width: '150px',
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: 'Name',
width: '150px',
},{
name: 'Email',
width: '250px',
}, {
name: 'Position',
width: '250px',
}, {
name: 'Company',
width: '250px',
}, {
name: 'Country',
width: '150px',
}],
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: 'Name',
width: '150px',
}, {
name: 'Date',
width: '180px',
}, {
name: 'Total',
width: '120px',
}, {
name: 'Status',
width: '120px',
},
{
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: 'Name',
width: '150px',
}, {
name: 'Email',
width: '250px',
}, {
name: 'Position',
width: '250px',
}, {
name: 'Company',
width: '250px',
}, {
name: 'Country',
width: '150px',
}],
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: 'Name',
width: '150px',
}, {
name: 'Email',
width: '250px',
}, {
name: 'Position',
width: '250px',
}, {
name: 'Company',
width: '250px',
}, {
name: 'Country',
width: '150px',
}],
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: 'Name',
width: '150px',
}, {
name: 'Email',
width: '250px',
}, {
name: 'Position',
width: '250px',
}, {
name: 'Company',
width: '250px',
}, {
name: 'Country',
width: '150px',
}],
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: 'Name',
width: '150px',
}, {
name: 'Email',
width: '250px',
}, {
name: 'Position',
width: '250px',
}, {
name: 'Company',
width: '250px',
}, {
name: 'Country',
width: '150px',
}],
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: 'Name',
width: '120px',
}, {
name: 'Email',
width: '250px',
}, {
name: 'Position',
width: '250px',
}, {
name: 'Company',
width: '250px',
},
{
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
src/main/resources/static/assets/js/pages/invoicecreate.init.js Normal file
View 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.html";
}
});
});

131
src/main/resources/static/assets/js/pages/invoicedetails.js Normal file
View 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;
}
}

1883
src/main/resources/static/assets/js/pages/invoiceslist.init.js Normal file
View File

File diff suppressed because it is too large Load Diff

528
src/main/resources/static/assets/js/pages/job-application.init.js Normal file
View File

@ -0,0 +1,528 @@
/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://Themesbrand.com/
Contact: Themesbrand@gmail.com
File: Job application init Js File
*/
var checkAll = document.getElementById("checkAll");
if (checkAll) {
checkAll.onclick = function () {
var checkboxes = document.querySelectorAll('.form-check-all input[type="checkbox"]');
var checkedCount = document.querySelectorAll('.form-check-all input[type="checkbox"]:checked').length;
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");
}
}
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'none' : document.getElementById("remove-actions").style.display = 'block';
};
}
var isChoiceEl = document.getElementById("idStatus");
var choices = new Choices(isChoiceEl, {
searchEnabled: false,
});
var isTypeEl = document.getElementById("idType");
var choices = new Choices(isTypeEl, {
searchEnabled: false,
});
var perPage = 8;
var editlist = false;
//Table
var options = {
valueNames: [
"id",
"company",
"designation",
"date",
"contacts",
"type",
"status",
],
page: perPage,
pagination: true,
plugins: [
ListPagination({
left: 2,
right: 2,
}),
],
};
// Init list
var applicationList = new List("applicationList", 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){
applicationList.add({
id: '<a href="#" class="fw-medium link-primary">#VZ'+element.id+'</a>',
company: '<div class="d-flex align-items-center">\
<div class="flex-shrink-0">\
<img src="'+element.company[0]+'" alt="" class="avatar-xxs rounded-circle image_src object-cover">\
</div>\
<div class="flex-grow-1 ms-2 name">'+element.company[1]+'</div>\
</div>',
designation: element.designation,
date: element.date,
contacts: element.contacts,
type:element.type,
status: isStatus(element.status)
});
applicationList.sort('id', { order: "desc" });
refreshCallbacks();
});
applicationList.remove("id", `<a href="#" class="fw-medium link-primary">#VZ001</a>`);
}
xhttp.open("GET", "assets/json/application-list.json");
xhttp.send();
function isStatus(val) {
switch (val) {
case "Approved":
return ('<span class="badge badge-soft-success text-uppercase">' + val + "</span>");
case "New":
return ('<span class="badge badge-soft-info text-uppercase">' + val + "</span>");
case "Pending":
return ('<span class="badge badge-soft-warning text-uppercase">' + val + "</span>");
case "Rejected":
return ('<span class="badge badge-soft-danger text-uppercase">' + val + "</span>");
}
}
// companylogo image
document.querySelector("#companylogo-image-input").addEventListener("change", function () {
var preview = document.querySelector("#companylogo-img");
var file = document.querySelector("#companylogo-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("applicationId"),
companyLogoImg = document.getElementById("companylogo-img"),
companyField = document.getElementById("company-field"),
designationField = document.getElementById("designation-field"),
dateField = document.getElementById("date-field"),
contactField = document.getElementById("contact-field"),
statusField = document.getElementById("status-input"),
typeField = document.getElementById("type-input"),
addBtn = document.getElementById("add-btn"),
editBtn = document.getElementById("edit-btn"),
removeBtns = document.getElementsByClassName("remove-item-btn"),
editBtns = document.getElementsByClassName("edit-item-btn");
refreshCallbacks();
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;
applicationList.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;
});
applicationList.update();
}
var example = new Choices(typeField, {
searchEnabled: false,
});
var statusVal = new Choices(statusField, {
searchEnabled: false,
});
document.getElementById("showModal").addEventListener("show.bs.modal", function (e) {
if (e.relatedTarget.classList.contains("edit-item-btn")) {
document.getElementById("exampleModalLabel").innerHTML = "Edit Application";
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
document.getElementById("add-btn").innerHTML = "Update";
} else if (e.relatedTarget.classList.contains("add-btn")) {
document.getElementById("exampleModalLabel").innerHTML = "Add Application";
document.getElementById("showModal").querySelector(".modal-footer").style.display = "block";
document.getElementById("add-btn").innerHTML = "Add Application";
} else {
document.getElementById("exampleModalLabel").innerHTML = "List Application";
document.getElementById("showModal").querySelector(".modal-footer").style.display = "none";
}
});
ischeckboxcheck();
document.getElementById("showModal").addEventListener("hidden.bs.modal", function () {
clearFields();
});
document.querySelector("#applicationList").addEventListener("click", function () {
refreshCallbacks();
ischeckboxcheck();
});
var table = document.getElementById("jobListTable");
// save all tr
var tr = table.getElementsByTagName("tr");
var trlist = table.querySelectorAll(".list tr");
function filterData() {
var isstatus = document.getElementById("idStatus").value;
var isType = document.getElementById("idType").value;
var pickerVal = document.getElementById("demo-datepicker").value;
var date1 = pickerVal.split(" to ")[0];
var date2 = pickerVal.split(" to ")[1];
applicationList.filter(function (data) {
matchData = new DOMParser().parseFromString(
data.values().status,
"text/html"
);
var status = matchData.body.firstElementChild.innerHTML;
var statusFilter = false;
var typeFilter = false;
var dateFilter = false;
if (status == "all" || isstatus == "all") {
statusFilter = true;
} else {
statusFilter = status == isstatus;
}
if (data.values().type == "all" || isType == "all") {
typeFilter = true;
} else {
typeFilter = data.values().type == isType;
}
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 && typeFilter && dateFilter) {
return statusFilter && typeFilter && dateFilter;
} else if (statusFilter && typeFilter && pickerVal == "") {
return statusFilter && typeFilter;
} else if (typeFilter && dateFilter && pickerVal == "") {
return typeFilter && dateFilter;
}
});
applicationList.update();
}
var count = 13;
var forms = document.querySelectorAll('.tablelist-form')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
} else {
event.preventDefault();
if (companyField.value !== "" &&
designationField.value !== "" &&
dateField.value !== "" &&
contactField.value !== "" &&
statusField.value !== "" &&
typeField.value !== "" && !editlist){
applicationList.add({
id: '<a href="#" class="fw-medium link-primary">#VZ'+count+'</a>',
company: '<div class="d-flex align-items-center">\
<div class="flex-shrink-0">\
<img src="'+ companyLogoImg.src + '" alt="" class="avatar-xxs rounded-circle image_src object-cover">\
</div>\
<div class="flex-grow-1 ms-2 name">'+companyField.value+'</div>\
</div>',
designation: designationField.value,
date: dateField.value,
contacts: contactField.value,
type: typeField.value,
status: isStatus(statusField.value)
});
applicationList.sort('id', { order: "desc" });
document.getElementById("close-modal").click();
clearFields();
refreshCallbacks();
filterOrder("All");
count++;
Swal.fire({
position: 'center',
icon: 'success',
title: 'Application inserted successfully!',
showConfirmButton: false,
timer: 2000,
showCloseButton: true
});
}else if(companyField.value !== "" &&
designationField.value !== "" &&
dateField.value !== "" &&
contactField.value !== "" &&
statusField.value !== "" &&
typeField.value !== "" && editlist){
var editValues = applicationList.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>",
company: '<div class="d-flex align-items-center">\
<div class="flex-shrink-0">\
<img src="'+companyLogoImg.src+'" alt="" class="avatar-xxs rounded-circle image_src object-cover">\
</div>\
<div class="flex-grow-1 ms-2 name">'+companyField.value+'</div>\
</div>',
designation: designationField.value,
date: dateField.value,
contacts: contactField.value,
type: typeField.value,
status: isStatus(statusField.value)
});
}
document.getElementById("close-modal").click();
});
Swal.fire({
position: 'center',
icon: 'success',
title: 'Application updated Successfully!',
showConfirmButton: false,
timer: 2000,
showCloseButton: true
});
}
}
}, false)
})
function ischeckboxcheck() {
Array.from(document.getElementsByName("checkAll")).forEach(function (x) {
x.addEventListener("change", function (e) {
if (x.checked == true) {
e.target.closest("tr").classList.add("table-active");
} else {
e.target.closest("tr").classList.remove("table-active");
}
var checkedCount = document.querySelectorAll('[name="checkAll"]:checked').length;
if (e.target.closest("tr").classList.contains("table-active")) {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
} else {
(checkedCount > 0) ? document.getElementById("remove-actions").style.display = 'block': document.getElementById("remove-actions").style.display = 'none';
}
});
});
}
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 = applicationList.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 () {
applicationList.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 = applicationList.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) {
editlist = true;
idField.value = selectedid;
var companyElem = new DOMParser().parseFromString(x._values.company, "text/html").body.querySelector(".name").innerHTML;
companyField.value = companyElem;
companyLogoImg.src = new DOMParser().parseFromString(x._values.company, "text/html").body.querySelector(".image_src").src
designationField.value = x._values.designation;
dateField.value = x._values.date;
contactField.value = x._values.contacts;
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);
if (example) example.destroy();
example = new Choices(typeField, {
searchEnabled: false
});
var selected = x._values.type;
example.setChoiceByValue(selected);
flatpickr("#date-field", {
enableTime: false,
dateFormat: "d M, Y",
defaultDate: x._values.date,
});
}
});
});
});
}
function clearFields() {
companyField.value = "";
companyLogoImg.src = "";
designationField.value = "";
dateField.value = "";
contactField.value = "";
if (example) example.destroy();
example = new Choices(typeField);
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]');
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++) {
applicationList.remove("id", `<a href="#" class="fw-medium link-primary">` + ids_array[i] +`</a>`);
}
document.getElementById("remove-actions").style.display = 'none';
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
});
}
}

184
src/main/resources/static/assets/js/pages/job-candidate-grid.init.js Normal file
View File

@ -0,0 +1,184 @@
/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://Themesbrand.com/
Contact: Themesbrand@gmail.com
File: job candidate grid init js
*/
var url = "assets/json/";
var allcandidateList = '';
var prevButton = document.getElementById('page-prev');
var nextButton = document.getElementById('page-next');
// configuration variables
var currentPage = 1;
var itemsPerPage = 20;
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("job-candidate-list.json", function (err, data) {
if (err !== null) {
console.log("Something went wrong: " + err);
} else {
allcandidateList = data;
loadCandidateListData(allcandidateList, currentPage);
paginationEvents();
}
});
function loadCandidateListData(datas, page) {
var pages = Math.ceil(datas.length / itemsPerPage)
if (page < 1) page = 1
if (page > pages) page = pages
document.querySelector("#candidate-list").innerHTML = '';
for (var i = (page - 1) * itemsPerPage; i < (page * itemsPerPage) && i < datas.length; i++) {
// Array.from(datas).forEach(function (listData, index){
if (datas[i]) {
var isUserProfile = datas[i].userImg ? '<img src="' + datas[i].userImg + '" alt="" class="member-img img-fluid d-block rounded" />'
: '<div class="avatar-title border bg-light text-primary rounded text-uppercase fs-24">' + datas[i].nickname + '</div>';
document.querySelector("#candidate-list").innerHTML += '<div class="col-xxl-3 col-md-6">\
<div class="card">\
<div class="card-body">\
<div class="d-flex align-items-center">\
<div class="flex-shrink-0">\
<div class="avatar-lg rounded">'+ isUserProfile + '</div>\
</div>\
<div class="flex-grow-1 ms-3">\
<a href="/pages-profile">\
<h5 class="fs-16 mb-1">'+ datas[i].candidateName + '</h5>\
</a>\
<p class="text-muted mb-2">'+ datas[i].designation + '</p>\
<div class="d-flex flex-wrap gap-2 align-items-center">\
<div class="badge text-bg-success"><i class="mdi mdi-star me-1"></i>'+ datas[i].rating[0] + '</div>\
<div class="text-muted">'+ datas[i].rating[1] + '</div>\
</div>\
<div class="d-flex gap-4 mt-2 text-muted">\
<div>\
<i class="ri-map-pin-2-line text-primary me-1 align-bottom"></i> '+ datas[i].location + '</div>\
<div>\
<i class="ri-time-line text-primary me-1 align-bottom"></i>'+ isStatus(datas[i].type) + '\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>';
}
}
selectedPage();
currentPage == 1 ? prevButton.parentNode.classList.add('disabled') : prevButton.parentNode.classList.remove('disabled');
currentPage == pages ? nextButton.parentNode.classList.add('disabled') : nextButton.parentNode.classList.remove('disabled');
}
function isStatus(val) {
switch (val) {
case "Part Time":
return ('<span class="badge badge-soft-danger">' + val + "</span>");
case "Full Time":
return ('<span class="badge badge-soft-success">' + val + "</span>");
case "Freelancer":
return ('<span class="badge badge-soft-secondary">' + val + "</span>");
}
}
function selectedPage() {
var pagenumLink = document.getElementById('page-num').getElementsByClassName('clickPageNumber');
for (var i = 0; i < pagenumLink.length; i++) {
if (i == currentPage - 1) {
pagenumLink[i].parentNode.classList.add("active");
} else {
pagenumLink[i].parentNode.classList.remove("active");
}
}
};
// paginationEvents
function paginationEvents() {
var numPages = function numPages() {
return Math.ceil(allcandidateList.length / itemsPerPage);
};
function clickPage() {
document.addEventListener('click', function (e) {
if (e.target.nodeName == "A" && e.target.classList.contains("clickPageNumber")) {
currentPage = e.target.textContent;
loadCandidateListData(allcandidateList, currentPage);
}
});
};
function pageNumbers() {
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
// for each page
for (var i = 1; i < numPages() + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
}
prevButton.addEventListener('click', function () {
if (currentPage > 1) {
currentPage--;
loadCandidateListData(allcandidateList, currentPage);
}
});
nextButton.addEventListener('click', function () {
if (currentPage < numPages()) {
currentPage++;
loadCandidateListData(allcandidateList, currentPage);
}
});
pageNumbers();
clickPage();
selectedPage();
}
// Search list
var searchElementList = document.getElementById("searchJob");
searchElementList.addEventListener("keyup", function () {
var inputVal = searchElementList.value.toLowerCase();
function filterItems(arr, query) {
return arr.filter(function (el) {
return el.designation.toLowerCase().indexOf(query.toLowerCase()) !== -1 || el.candidateName.toLowerCase().indexOf(query.toLowerCase()) !== -1
})
}
var filterData = filterItems(allcandidateList, inputVal);
if (filterData.length == 0) {
document.getElementById("pagination-element").style.display = "none";
} else {
document.getElementById("pagination-element").style.display = "flex";
}
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
var dataPageNum = Math.ceil(filterData.length / itemsPerPage)
// for each page
for (var i = 1; i < dataPageNum + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
loadCandidateListData(filterData, currentPage);
});

192
src/main/resources/static/assets/js/pages/job-candidate-lists.init.js Normal file
View File

@ -0,0 +1,192 @@
/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://Themesbrand.com/
Contact: Themesbrand@gmail.com
File: job candidate list init js
*/
var url = "assets/json/";
var allcandidateList = '';
var prevButton = document.getElementById('page-prev');
var nextButton = document.getElementById('page-next');
// configuration variables
var currentPage = 1;
var itemsPerPage = 8;
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("job-candidate-list.json", function (err, data) {
if (err !== null) {
console.log("Something went wrong: " + err);
} else {
allcandidateList = data;
loadCandidateListData(allcandidateList, currentPage);
paginationEvents();
}
});
function loadCandidateListData(datas, page) {
var pages = Math.ceil(datas.length / itemsPerPage)
if (page < 1) page = 1
if (page > pages) page = pages
document.querySelector("#candidate-list").innerHTML = '';
for (var i = (page - 1) * itemsPerPage; i < (page * itemsPerPage) && i < datas.length; i++) {
// Array.from(datas).forEach(function (listData, index){
if (datas[i]) {
var bookmark = datas[i].bookmark ? "active" : "";
var isUserProfile = datas[i].userImg ? '<img src="' + datas[i].userImg + '" alt="" class="member-img img-fluid d-block rounded" />'
: '<div class="avatar-title border bg-light text-primary rounded text-uppercase fs-16">' + datas[i].nickname + '</div>';
document.querySelector("#candidate-list").innerHTML += '<div class="col-md-6 col-lg-12">\
<div class="card mb-0">\
<div class="card-body">\
<div class="d-lg-flex align-items-center">\
<div class="flex-shrink-0">\
<div class="avatar-sm rounded">'+ isUserProfile + '</div>\
</div>\
<div class="ms-lg-3 my-3 my-lg-0">\
<a href="/pages-profile"><h5 class="fs-16 mb-2">'+ datas[i].candidateName + '</h5></a>\
<p class="text-muted mb-0">'+ datas[i].designation + '</p>\
</div>\
<div class="d-flex gap-4 mt-0 text-muted mx-auto">\
<div><i class="ri-map-pin-2-line text-primary me-1 align-bottom"></i> '+ datas[i].location + '</div>\
<div><i class="ri-time-line text-primary me-1 align-bottom"></i> '+ isStatus(datas[i].type) + '</div>\
</div>\
<div class="d-flex flex-wrap gap-2 align-items-center mx-auto my-3 my-lg-0">\
<div class="badge text-bg-success">\
<i class="mdi mdi-star me-1"></i>'+ datas[i].rating[0] + '\
</div>\
<div class="text-muted">'+ datas[i].rating[1] + '</div>\
</div>\
<div>\
<a href="#!" class="btn btn-soft-success">View Details</a>\
<a href="#!" class="btn btn-ghost-danger btn-icon custom-toggle '+ bookmark + '" data-bs-toggle="button">\
<span class="icon-on"><i class="ri-bookmark-line align-bottom"></i></span>\
<span class="icon-off"><i class="ri-bookmark-3-fill align-bottom"></i></span>\
</a>\
</div>\
</div>\
</div>\
</div>\
</div>'
}
// })
}
selectedPage();
currentPage == 1 ? prevButton.parentNode.classList.add('disabled') : prevButton.parentNode.classList.remove('disabled');
currentPage == pages ? nextButton.parentNode.classList.add('disabled') : nextButton.parentNode.classList.remove('disabled');
}
function isStatus(val) {
switch (val) {
case "Part Time":
return ('<span class="badge badge-soft-danger">' + val + "</span>");
case "Full Time":
return ('<span class="badge badge-soft-success">' + val + "</span>");
case "Freelancer":
return ('<span class="badge badge-soft-secondary">' + val + "</span>");
}
}
function selectedPage() {
var pagenumLink = document.getElementById('page-num').getElementsByClassName('clickPageNumber');
for (var i = 0; i < pagenumLink.length; i++) {
if (i == currentPage - 1) {
pagenumLink[i].parentNode.classList.add("active");
} else {
pagenumLink[i].parentNode.classList.remove("active");
}
}
};
// paginationEvents
function paginationEvents() {
var numPages = function numPages() {
return Math.ceil(allcandidateList.length / itemsPerPage);
};
function clickPage() {
document.addEventListener('click', function (e) {
if (e.target.nodeName == "A" && e.target.classList.contains("clickPageNumber")) {
currentPage = e.target.textContent;
loadCandidateListData(allcandidateList, currentPage);
}
});
};
function pageNumbers() {
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
// for each page
for (var i = 1; i < numPages() + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
}
prevButton.addEventListener('click', function () {
if (currentPage > 1) {
currentPage--;
loadCandidateListData(allcandidateList, currentPage);
}
});
nextButton.addEventListener('click', function () {
if (currentPage < numPages()) {
currentPage++;
loadCandidateListData(allcandidateList, currentPage);
}
});
pageNumbers();
clickPage();
selectedPage();
}
// Search list
var searchElementList = document.getElementById("searchJob");
searchElementList.addEventListener("keyup", function () {
var inputVal = searchElementList.value.toLowerCase();
function filterItems(arr, query) {
return arr.filter(function (el) {
return el.designation.toLowerCase().indexOf(query.toLowerCase()) !== -1 || el.candidateName.toLowerCase().indexOf(query.toLowerCase()) !== -1
})
}
var filterData = filterItems(allcandidateList, inputVal);
if (filterData.length == 0) {
document.getElementById("pagination-element").style.display = "none";
} else {
document.getElementById("pagination-element").style.display = "flex";
}
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
var dataPageNum = Math.ceil(filterData.length / itemsPerPage)
// for each page
for (var i = 1; i < dataPageNum + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
loadCandidateListData(filterData, currentPage);
});

265
src/main/resources/static/assets/js/pages/job-companies-lists.init.js Normal file
View File

@ -0,0 +1,265 @@
/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://Themesbrand.com/
Contact: Themesbrand@gmail.com
File: job companies list init js
*/
var url = "assets/json/";
var allCompaniesList = '';
var prevButton = document.getElementById('page-prev');
var nextButton = document.getElementById('page-next');
// configuration variables
var currentPage = 1;
var itemsPerPage = 16;
// getJSON
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("job-companies-list.json", function (err, data) {
if (err !== null) {
console.log("Something went wrong: " + err);
} else {
allCompaniesList = data;
loadCompaniesListData(allCompaniesList, currentPage);
paginationEvents();
}
});
function loadCompaniesListData(datas, page) {
var pages = Math.ceil(datas.length / itemsPerPage)
if (page < 1) page = 1
if (page > pages) page = pages
document.querySelector("#companies-list").innerHTML = '';
for (var i = (page - 1) * itemsPerPage; i < (page * itemsPerPage) && i < datas.length; i++) {
// Array.from(datas).forEach(function (listData, index) {
if (datas[i]) {
document.querySelector("#companies-list").innerHTML += '<div class="col-xxl-3 col-md-6">\
<div class="card companiesList-card">\
<div class="card-body">\
<div class="avatar-sm mx-auto">\
<div class="avatar-title bg-light rounded">\
<img src="'+ datas[i].companyLogo + '" alt="" class="avatar-xxs companyLogo-img">\
</div>\
</div>\
<div class="text-center">\
<a href="#!">\
<h5 class="mt-3 company-name">'+ datas[i].companyName + '</h5>\
</a>\
<div class="d-none company-desc">'+ datas[i].companyDesc + '</div>\
<p class="text-muted industry-type">'+ datas[i].industryType + '</p>\
<div class="d-none">\
<span class="employee">'+ datas[i].employee + '</span>\
<span class="location">'+ datas[i].location + '</span>\
<span class="rating">'+ datas[i].rating + '</span>\
<span class="website">'+ datas[i].website + '</span>\
<span class="email">'+ datas[i].email + '</span>\
<span class="since">'+ datas[i].since + '</span>\
</div>\
</div>\
<div>\
<button type="button" class="btn btn-soft-primary w-100 viewcompany-list"><span class="vacancy">'+ datas[i].vacancy + '</span> Jobs Available</button>\
</div>\
</div>\
</div>\
</div>';
}
}
// })
selectedPage();
currentPage == 1 ? prevButton.parentNode.classList.add('disabled') : prevButton.parentNode.classList.remove('disabled');
currentPage == pages ? nextButton.parentNode.classList.add('disabled') : nextButton.parentNode.classList.remove('disabled');
jobDetailShow();
}
function selectedPage() {
var pagenumLink = document.getElementById('page-num').getElementsByClassName('clickPageNumber');
for (var i = 0; i < pagenumLink.length; i++) {
if (i == currentPage - 1) {
pagenumLink[i].parentNode.classList.add("active");
} else {
pagenumLink[i].parentNode.classList.remove("active");
}
}
};
// paginationEvents
function paginationEvents() {
var numPages = function numPages() {
return Math.ceil(allCompaniesList.length / itemsPerPage);
};
function clickPage() {
document.addEventListener('click', function (e) {
if (e.target.nodeName == "A" && e.target.classList.contains("clickPageNumber")) {
currentPage = e.target.textContent;
loadCompaniesListData(allCompaniesList, currentPage);
}
});
};
function pageNumbers() {
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
// for each page
for (var i = 1; i < numPages() + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
}
prevButton.addEventListener('click', function () {
if (currentPage > 1) {
currentPage--;
loadCompaniesListData(allCompaniesList, currentPage);
}
});
nextButton.addEventListener('click', function () {
if (currentPage < numPages()) {
currentPage++;
loadCompaniesListData(allCompaniesList, currentPage);
}
});
pageNumbers();
clickPage();
selectedPage();
}
// jobDetailShow event
function jobDetailShow() {
Array.from(document.querySelectorAll("#companies-list .companiesList-card")).forEach(function (item) {
item.querySelector(".viewcompany-list").addEventListener("click", function () {
var companyLogoImgVal = item.querySelector(".companyLogo-img").src;
var companyNameVal = item.querySelector(".company-name").innerHTML;
var companyDescVal = item.querySelector(".company-desc").innerHTML;
var industryTypeVal = item.querySelector(".industry-type").innerHTML;
var companyEmployeeVal = item.querySelector(".employee").innerHTML;
var companyLocationVal = item.querySelector(".location").innerHTML;
var companyRatingVal = item.querySelector(".rating").innerHTML;
var companyWebsiteVal = item.querySelector(".website").innerHTML;
var companyEmailVal = item.querySelector(".email").innerHTML;
var companySinceVal = item.querySelector(".since").innerHTML;
var jobVacancyVal = item.querySelector(".vacancy").innerHTML;
document.querySelector("#company-overview .company-logo").src = companyLogoImgVal;
document.querySelector("#company-overview .overview-companyname").innerHTML = companyNameVal;
document.querySelectorAll("#company-overview .overview-industryType").forEach(function (elem) {
elem.innerHTML = industryTypeVal;
});
document.querySelector("#company-overview .overview-companydesc").innerHTML = companyDescVal;
document.querySelector("#company-overview .overview-company_location").innerHTML = companyLocationVal;
document.querySelector("#company-overview .overview-employee").innerHTML = companyEmployeeVal;
document.querySelector("#company-overview .overview-vacancy").innerHTML = jobVacancyVal;
document.querySelector("#company-overview .overview-rating").innerHTML = companyRatingVal;
document.querySelector("#company-overview .overview-website").innerHTML = companyWebsiteVal;
document.querySelector("#company-overview .overview-email").innerHTML = companyEmailVal;
document.querySelector("#company-overview .overview-since").innerHTML = companySinceVal;
});
});
}
// Search list
var searchElementList = document.getElementById("searchCompany");
searchElementList.addEventListener("keyup", function () {
var inputVal = searchElementList.value.toLowerCase();
function filterItems(arr, query) {
return arr.filter(function (el) {
return el.companyName.toLowerCase().indexOf(query.toLowerCase()) !== -1 || el.industryType.toLowerCase().indexOf(query.toLowerCase()) !== -1
})
}
var filterData = filterItems(allCompaniesList, inputVal);
if (filterData.length == 0) {
document.getElementById("pagination-element").style.display = "none";
} else {
document.getElementById("pagination-element").style.display = "flex";
}
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
var dataPageNum = Math.ceil(filterData.length / itemsPerPage)
// for each page
for (var i = 1; i < dataPageNum + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
loadCompaniesListData(filterData, currentPage);
});
flatpickr("#datepicker", {
dateFormat: "d M, Y",
defaultDate: new Date(),
maxDate: new Date()
});
// filterdata
function filterData() {
var pickerVal = document.getElementById("datepicker").value;
var isType = document.getElementById("idType").value;
var filterData = allCompaniesList.filter(function (data) {
console.log(new Date(data.postDate) <= new Date(pickerVal))
var dateFilter = false;
var typeFilter = false;
if (data.type == "all" || isType == "all") {
typeFilter = true;
} else {
typeFilter = data.type == isType;
}
if (new Date(data.postDate) <= new Date(pickerVal)) {
dateFilter = true;
} else {
dateFilter = false;
}
if (typeFilter && dateFilter) {
return typeFilter && dateFilter;
}else if (typeFilter && pickerVal == "") {
return typeFilter;
} else if (typeFilter && dateFilter && pickerVal == "") {
return typeFilter && dateFilter;
}
});
if(filterData.length == 0){
document.getElementById("pagination-element").style.display = "none";
}else{
document.getElementById("pagination-element").style.display = "flex";
}
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
var dataPageNum = Math.ceil(filterData.length / itemsPerPage)
// for each page
for (var i = 1; i < dataPageNum + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
loadCompaniesListData(filterData, currentPage);
};

281
src/main/resources/static/assets/js/pages/job-grid-list.init.js Normal file
View File

@ -0,0 +1,281 @@
/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://Themesbrand.com/
Contact: Themesbrand@gmail.com
File: job grid list Js File
*/
var url = "assets/json/";
var allJobList = '';
var prevButton = document.getElementById('page-prev');
var nextButton = document.getElementById('page-next');
// configuration variables
var currentPage = 1;
var itemsPerPage = 8;
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("job-grid-list.json", function (err, data) {
if (err !== null) {
console.log("Something went wrong: " + err);
} else {
allJobList = data;
loadJobListData(allJobList, currentPage);
paginationEvents();
}
});
// load job list data
function loadJobListData(datas, page) {
var pages = Math.ceil(datas.length / itemsPerPage)
if (page < 1) page = 1
if (page > pages) page = pages
document.querySelector("#job-list").innerHTML = '';
if (currentPage == 1) {
itemsPerPage = 7;
document.querySelector("#job-list").insertAdjacentHTML('afterbegin', '<div class="col-lg-3 col-md-6" id="job-widget">\
<div class="card card-height-100 bg-info bg-job">\
<div class="card-body p-5">\
<h2 class="lh-base text-white">Velzon invites young professionals for an intership!</h2>\
<p class="text-white-75 mb-0 fs-14">Don\'t miss your opportunity to improve your skills!</p>\
<div class="mt-5 pt-2">\
<button type="button" class="btn btn-light w-100">View More <i class="ri-arrow-right-line align-bottom"></i></button>\
</div>\
</div>\
</div>\
</div>');
} else {
itemsPerPage = 8;
}
for (var i = (page - 1) * itemsPerPage; i < (page * itemsPerPage) && i < datas.length; i++) {
// Array.from(datas).forEach(function (listData, index) {
var tagHtmlValue = '';
datas[i] && Array.from(datas[i].requirement).forEach(function (tag, index) {
var tagClass = '';
if (tag) {
if (tag == "Full Time") {
tagClass = 'badge-soft-success'
} else if (tag == "Freelance") {
tagClass = 'badge-soft-primary'
} else if (tag == "Urgent") {
tagClass = 'badge-soft-danger'
} else if (tag == "Part Time") {
tagClass = 'badge-soft-warning'
} else if (tag == "Private") {
tagClass = 'badge-soft-info'
} else {
tagClass = 'badge-soft-success'
}
}
tagHtmlValue += '<span class="badge ' + tagClass + '">' + tag + '</span>'
})
if (datas[i]) {
document.querySelector("#job-list").innerHTML += '<div class="col-lg-3 col-md-6">\
<div class="card">\
<div class="card-body">\
<button type="button" class="btn btn-icon btn-soft-primary float-end" data-bs-toggle="button" aria-pressed="true"><i class="mdi mdi-cards-heart fs-16"></i></button>\
<div class="avatar-sm mb-4">\
<div class="avatar-title bg-light rounded">\
<img src="'+ datas[i].companyLogo + '" alt="" class="avatar-xxs" />\
</div>\
</div>\
<a href="#!"><h5>'+ datas[i].jobTitle + '</h5></a>\
<p class="text-muted">'+ datas[i].companyName + '</p>\
<div class="d-flex gap-4 mb-3">\
<div><i class="ri-map-pin-2-line text-primary me-1 align-bottom"></i> '+ datas[i].location + '</div>\
<div><i class="ri-time-line text-primary me-1 align-bottom"></i> '+ datas[i].postDate + '</div>\
</div>\
<p class="text-muted">'+ datas[i].description + '</p>\
<div class="hstack gap-2">'+ tagHtmlValue + '</div>\
<div class="mt-4 hstack gap-2">\
<a href="#!" class="btn btn-soft-primary w-100">Apply Job</a>\
<a href="/apps-job-details" class="btn btn-soft-success w-100">Overview</a>\
</div>\
</div>\
</div>\
</div>'
};
}
document.getElementById("total-result").innerHTML = datas.length
selectedPage();
var searchElementList = document.getElementById("searchJob");
searchElementList.addEventListener("keyup", function () {
var inputVal = searchElementList.value.toLowerCase();
if(inputVal.length > 0){
document.getElementById("job-widget").style.display = "none";
}else{
document.getElementById("job-widget").style.display = "block";
}
});
if(datas.length > 0){
document.getElementById("job-widget").style.display = "block";
}else{
document.getElementById("job-widget").style.display = "none";
}
currentPage == 1 ? prevButton.parentNode.classList.add('disabled') : prevButton.parentNode.classList.remove('disabled');
currentPage == pages ? nextButton.parentNode.classList.add('disabled') : nextButton.parentNode.classList.remove('disabled');
}
function selectedPage() {
var pagenumLink = document.getElementById('page-num').getElementsByClassName('clickPageNumber');
for (var i = 0; i < pagenumLink.length; i++) {
if (i == currentPage - 1) {
pagenumLink[i].parentNode.classList.add("active");
} else {
pagenumLink[i].parentNode.classList.remove("active");
}
}
};
// paginationEvents
function paginationEvents() {
var numPages = function numPages() {
return Math.ceil(allJobList.length / itemsPerPage);
};
function clickPage() {
document.addEventListener('click', function (e) {
if (e.target.nodeName == "A" && e.target.classList.contains("clickPageNumber")) {
currentPage = e.target.textContent;
loadJobListData(allJobList, currentPage);
}
});
};
function pageNumbers() {
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
// for each page
for (var i = 1; i < numPages() + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
}
prevButton.addEventListener('click', function () {
if (currentPage > 1) {
currentPage--;
loadJobListData(allJobList, currentPage);
}
});
nextButton.addEventListener('click', function () {
if (currentPage < numPages()) {
currentPage++;
loadJobListData(allJobList, currentPage);
}
});
pageNumbers();
clickPage();
selectedPage();
}
// Search list
var searchElementList = document.getElementById("searchJob");
searchElementList.addEventListener("keyup", function () {
var inputVal = searchElementList.value.toLowerCase();
function filterItems(arr, query) {
return arr.filter(function (el) {
return el.jobTitle.toLowerCase().indexOf(query.toLowerCase()) !== -1
})
}
var filterData = filterItems(allJobList, inputVal);
if(filterData.length == 0){
document.getElementById("pagination-element").style.display = "none";
}else{
document.getElementById("pagination-element").style.display = "flex";
}
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
var dataPageNum = Math.ceil(filterData.length / itemsPerPage)
// for each page
for (var i = 1; i < dataPageNum + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
loadJobListData(filterData, currentPage);
});
function filterData() {
var isstatus = document.getElementById("idStatus").value;
var pickerVal = document.getElementById("datepicker").value;
var isType = document.getElementById("idType").value;
var date1 = pickerVal.split(" to ")[0];
var date2 = pickerVal.split(" to ")[1];
var filterData = allJobList.filter(function (data) {
var status = data.status;
var statusFilter = false;
var dateFilter = false;
var typeFilter = false;
if (status == "all" || isstatus == "all") {
statusFilter = true;
} else {
statusFilter = status == isstatus;
}
data.requirement.map(function (item) {
if (item == "all" || isType == "all") {
typeFilter = true;
} else {
typeFilter = data.requirement.includes(isType)
}
})
if (
new Date(data.postDate) >= new Date(date1) &&
new Date(data.postDate) <= new Date(date2)
) {
dateFilter = true;
} else {
dateFilter = false;
}
if (statusFilter && typeFilter && dateFilter) {
return statusFilter && typeFilter && dateFilter;
} else if (statusFilter && typeFilter && pickerVal == "") {
return statusFilter && typeFilter;
} else if (typeFilter && dateFilter && pickerVal == "") {
return typeFilter && dateFilter;
}
});
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
var dataPageNum = Math.ceil(filterData.length / itemsPerPage)
// for each page
for (var i = 1; i < dataPageNum + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
loadJobListData(filterData, currentPage);
}

79
src/main/resources/static/assets/js/pages/job-lading.init.js Normal file
View File

@ -0,0 +1,79 @@
/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://Themesbrand.com/
Contact: Themesbrand@gmail.com
File: job-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();
});
//team slider
var swiper = new Swiper(".candidate-swiper", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
1445: {
slidesPerView: 4,
spaceBetween: 24,
},
768: {
slidesPerView: 2,
spaceBetween: 24,
}
},
});
//
/********************* 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;
}

412
src/main/resources/static/assets/js/pages/job-list.init.js Normal file
View File

@ -0,0 +1,412 @@
/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://Themesbrand.com/
Contact: Themesbrand@gmail.com
File: job-list 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 Donut Charts
var chartDonutBasicColors = getChartColorsArray("simple_dount_chart");
if (chartDonutBasicColors) {
var options = {
series: [98, 63, 35],
labels: ["New Application", "Approved", "Rejected"],
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();
}
var url = "assets/json/";
var allJobList = '';
var editList = false;
var prevButton = document.getElementById('page-prev');
var nextButton = document.getElementById('page-next');
// configuration variables
var currentPage = 1;
var itemsPerPage = 3;
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("job-list.json", function (err, data) {
if (err !== null) {
console.log("Something went wrong: " + err);
} else {
allJobList = data;
loadJobListData(allJobList, currentPage);
paginationEvents();
sortElementsById();
}
});
function loadJobListData(datas, page) {
var pages = Math.ceil(datas.length / itemsPerPage)
if (page < 1) page = 1
if (page > pages) page = pages
document.querySelector("#job-list").innerHTML = '';
for (var i = (page - 1) * itemsPerPage; i < (page * itemsPerPage) && i < datas.length; i++) {
// Array.from(datas).forEach(function (listData, index){
if(datas[i] && datas[i].tags){
var tags = datas[i].tags;
var tagHtml = '';
Array.from(tags).forEach((tag, index) => {
tagHtml += '<span class="badge badge-soft-primary me-1">' + tag + '</span>'
})
}
if (datas[i]) {
document.querySelector("#job-list").innerHTML += '<div class="card joblist-card">\
<div class="card-body">\
<div class="d-flex mb-4">\
<div class="avatar-sm">\
<div class="avatar-title bg-light rounded">\
<img src="'+ datas[i].companyLogo + '" alt="" class="avatar-xxs companyLogo-img">\
</div>\
</div>\
<div class="ms-3 flex-grow-1">\
<img src="'+ datas[i].coverImg + '" alt="" class="d-none cover-img">\
<a href="#!"><h5 class="job-title">'+ datas[i].jobTitle + '</h5></a>\
<p class="company-name text-muted mb-0">'+ datas[i].companyName + '</p>\
</div>\
<div>\
<button type="button" class="btn btn-ghost-primary btn-icon custom-toggle" data-bs-toggle="button">\
<span class="icon-on"><i class="ri-bookmark-line"></i></span>\
<span class="icon-off"><i class="ri-bookmark-fill"></i></span>\
</button>\
</div>\
</div>\
<p class="text-muted job-description">'+ datas[i].description + '</p>\
<div>'+ tagHtml + '</div>\
</div>\
<div class="card-footer border-top-dashed">\
<div class="d-flex justify-content-between align-items-center flex-wrap gap-3">\
<div><i class="ri-briefcase-2-line align-bottom me-1"></i> <span class="job-type">'+ datas[i].type + '</span></div>\
<div class="d-none"><span class="job-experience">'+ datas[i].experience + '</span></div>\
<div><i class="ri-map-pin-2-line align-bottom me-1"></i> <span class="job-location">'+ datas[i].location + '</span></div>\
<div><i class="ri-user-3-line align-bottom me-1"></i> '+ datas[i].applied + '</div>\
<div><i class="ri-time-line align-bottom me-1"></i> <span class="job-postdate">'+ datas[i].postDate + '</span></div>\
<div><a href="#!" class="btn btn-primary viewjob-list">View More <i class="ri-arrow-right-line align-bottom ms-1"></i></a></div>\
</div>\
</div>\
</div>';
}
// });
}
document.getElementById("total-result").innerHTML = datas.length
selectedPage();
currentPage == 1 ? prevButton.parentNode.classList.add('disabled') : prevButton.parentNode.classList.remove('disabled');
currentPage == pages ? nextButton.parentNode.classList.add('disabled') : nextButton.parentNode.classList.remove('disabled');
jobDetailShow();
}
function selectedPage() {
var pagenumLink = document.getElementById('page-num').getElementsByClassName('clickPageNumber');
for (var i = 0; i < pagenumLink.length; i++) {
if (i == currentPage - 1) {
pagenumLink[i].parentNode.classList.add("active");
} else {
pagenumLink[i].parentNode.classList.remove("active");
}
}
};
// paginationEvents
function paginationEvents() {
var numPages = function numPages() {
return Math.ceil(allJobList.length / itemsPerPage);
};
function clickPage() {
document.addEventListener('click', function (e) {
if (e.target.nodeName == "A" && e.target.classList.contains("clickPageNumber")) {
currentPage = e.target.textContent;
loadJobListData(allJobList, currentPage);
}
});
};
function pageNumbers() {
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
// for each page
for (var i = 1; i < numPages() + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
}
prevButton.addEventListener('click', function () {
if (currentPage > 1) {
currentPage--;
loadJobListData(allJobList, currentPage);
}
});
nextButton.addEventListener('click', function () {
if (currentPage < numPages()) {
currentPage++;
loadJobListData(allJobList, currentPage);
}
});
pageNumbers();
clickPage();
selectedPage();
}
// multiple Remove CancelButton
var tagInputField = new Choices('#taginput-choices', {
removeItemButton: true,
}
);
// companylogo image
document.querySelector("#companylogo-image-input").addEventListener("change", function () {
var preview = document.querySelector("#companylogo-img");
var file = document.querySelector("#companylogo-image-input").files[0];
var reader = new FileReader();
reader.addEventListener("load",function () {
preview.src = reader.result;
},false);
if (file) {
reader.readAsDataURL(file);
}
});
// cover image
document.querySelector("#cover-image-input").addEventListener("change", function () {
var preview = document.querySelector("#modal-cover-img");
var file = document.querySelector("#cover-image-input").files[0];
var reader = new FileReader();
reader.addEventListener("load",function () {
preview.src = reader.result;
},false);
if (file) {
reader.readAsDataURL(file);
}
});
// Form Event
(function () {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation')
var date = new Date().toUTCString().slice(5, 16);
// 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();
var jobTitleVal = document.getElementById("jobtitle-field").value;
var companyNameVal = document.getElementById("companyname-field").value;
var companyLogoImg = document.getElementById("companylogo-img").src;
var jobCoverImg = document.getElementById("modal-cover-img").src;
var jobTypeVal = document.getElementById("job_type-field").value;
var jobExperienceVal = document.getElementById("experience-field").value;
var locationVal = document.getElementById("location-field").value;
var descriptionVal = document.getElementById("description-field").value;
var tagInputFieldValue = tagInputField.getValue(true);
if (jobTitleVal !== "" && companyNameVal !== "" && jobTypeVal !== "" && locationVal !== "" && locationVal !== "" && !editList) {
var newJobId = findNextId();
var newJobList = {
'id': newJobId,
"coverImg": jobCoverImg,
"companyLogo": companyLogoImg,
"jobTitle": jobTitleVal,
"companyName": companyNameVal,
"description": descriptionVal,
"tags": tagInputFieldValue,
"type": jobTypeVal,
"experience": jobExperienceVal,
"location": locationVal,
"applied": "0 Applied",
"postDate": date
};
allJobList.push(newJobList);
sortElementsById();
}
loadJobListData(allJobList, currentPage);
document.getElementById("close-jobListModal").click();
}
form.classList.add('was-validated');
}, false);
})
})()
function fetchIdFromObj(member) {
return parseInt(member.id);
}
function findNextId() {
if (allJobList.length === 0) {
return 0;
}
var lastElementId = fetchIdFromObj(allJobList[allJobList.length - 1]),
firstElementId = fetchIdFromObj(allJobList[0]);
return (firstElementId >= lastElementId) ? (firstElementId + 1) : (lastElementId + 1);
}
function sortElementsById() {
var manyJobList = allJobList.sort(function (a, b) {
var x = fetchIdFromObj(a);
var y = fetchIdFromObj(b);
if (x > y) {
return -1;
}
if (x < y) {
return 1;
}
return 0;
})
loadJobListData(manyJobList, currentPage);
}
// jobDetailShow event
function jobDetailShow() {
Array.from(document.querySelectorAll("#job-list .joblist-card")).forEach(function (item) {
item.querySelector(".viewjob-list").addEventListener("click", function () {
var coverImgVal = item.querySelector(".cover-img").src;
var companyLogoImgVal = item.querySelector(".companyLogo-img").src;
var jobTitleVal = item.querySelector(".job-title").innerHTML;
var companyNameVal = item.querySelector(".company-name").innerHTML;
var jobDescVal = item.querySelector(".job-description").innerHTML;
var jobTypeVal = item.querySelector(".job-type").innerHTML;
var jobLocationVal = item.querySelector(".job-location").innerHTML;
var jobPostdateVal = item.querySelector(".job-postdate").innerHTML;
var jobExperienceVal = item.querySelector(".job-experience").innerHTML;
document.querySelector("#cover-img").src = coverImgVal;
document.querySelector("#job-overview .view-companylogo").src = companyLogoImgVal;
document.querySelector("#job-overview .view-title").innerHTML = jobTitleVal;
document.querySelector("#job-overview .view-companyname").innerHTML = companyNameVal;
document.querySelector("#job-overview .view-location").innerHTML = jobLocationVal;
document.querySelector("#job-overview .view-desc").innerHTML = jobDescVal;
document.querySelector("#job-overview .view-type").innerHTML = jobTypeVal;
document.querySelector("#job-overview .view-postdate").innerHTML = jobPostdateVal;
document.querySelector("#job-overview .view-experience").innerHTML = jobExperienceVal;
});
});
}
// Search list
var searchElementList = document.getElementById("searchJob");
searchElementList.addEventListener("keyup", function () {
var inputVal = searchElementList.value.toLowerCase();
function filterItems(arr, query) {
return arr.filter(function (el) {
return el.jobTitle.toLowerCase().indexOf(query.toLowerCase()) !== -1 || el.companyName.toLowerCase().indexOf(query.toLowerCase()) !== -1
})
}
var filterData = filterItems(allJobList, inputVal);
if(inputVal.length > 0){
document.getElementById("found-job-alert").classList.remove("d-none");
}else{
document.getElementById("found-job-alert").classList.add("d-none");
}
if(filterData.length == 0){
document.getElementById("pagination-element").style.display = "none";
}else{
document.getElementById("pagination-element").style.display = "flex";
}
var pageNumber = document.getElementById('page-num');
pageNumber.innerHTML = "";
var dataPageNum = Math.ceil(filterData.length / itemsPerPage)
// for each page
for (var i = 1; i < dataPageNum + 1; i++) {
pageNumber.innerHTML += "<div class='page-item'><a class='page-link clickPageNumber' href='javascript:void(0);'>" + i + "</a></div>";
}
loadJobListData(filterData, currentPage);
});
// clearFields
function clearFields() {
document.getElementById("companylogo-img").src = "assets/images/users/multi-user.jpg";
document.getElementById("jobtitle-field").value = "";
document.getElementById("companyname-field").value = "";
document.getElementById("job_type-field").value = "Full Time";
document.getElementById("experience-field").value = "";
document.getElementById("location-field").value = "";
document.getElementById("Salary-field").value = "";
document.getElementById("description-field").value = "";
tagInputField.removeActiveItems();
tagInputField.setChoiceByValue("");
document.getElementById("createjob-form").classList.remove("was-validated");
}
document.getElementById('CreateJobModal').addEventListener('hidden.bs.modal', event => {
clearFields();
});

449
src/main/resources/static/assets/js/pages/job-statistics.init.js Normal file
View File

@ -0,0 +1,449 @@
/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://Themesbrand.com/
Contact: Themesbrand@gmail.com
File: job-statistics 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;
}
}
});
}
}
// results_sparkline_charts
var areachartbitcoinColors = getChartColorsArray("results_sparkline_charts");
if (areachartbitcoinColors) {
var options = {
series: [{
name: "Results",
data: [0, 36, 110, 95, 130],
},],
chart: {
width: 140,
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("#results_sparkline_charts"), options);
chart.render();
}
// results_sparkline_charts
var areachartbitcoinColors = getChartColorsArray("results_sparkline_charts2");
if (areachartbitcoinColors) {
var options = {
series: [{
name: "Results",
data: [0, 98, 85, 90, 67],
},],
chart: {
width: 140,
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("#results_sparkline_charts2"), options);
chart.render();
}
// results_sparkline_charts
var areachartbitcoinColors = getChartColorsArray("results_sparkline_charts3");
if (areachartbitcoinColors) {
var options = {
series: [{
name: "Results",
data: [0, 110, 95, 75, 120],
},],
chart: {
width: 140,
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("#results_sparkline_charts3"), options);
chart.render();
}
// results_sparkline_charts
var areachartbitcoinColors = getChartColorsArray("results_sparkline_charts4");
if (areachartbitcoinColors) {
var options = {
series: [{
name: "Results",
data: [0, 68, 35, 90, 99],
},],
chart: {
width: 140,
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("#results_sparkline_charts4"), options);
chart.render();
}
// Distributed Treemap
var chartTreemapDistributedColors = getChartColorsArray("distributed_treemap");
if (chartTreemapDistributedColors) {
var options = {
series: [{
data: [{
x: 'USA',
y: 321
},
{
x: 'Russia',
y: 165
},
{
x: 'India',
y: 184
},
{
x: 'China',
y: 98
},
{
x: 'Canada',
y: 84
},
{
x: 'Brazil',
y: 31
},
{
x: 'UK',
y: 70
},
{
x: 'Australia',
y: 30
},
{
x: 'Germany',
y: 44
},
{
x: 'Italy',
y: 68
},
{
x: 'Israel',
y: 28
},
{
x: 'Indonesia',
y: 19
},
{
x: 'Bangladesh',
y: 29
}
]
}],
legend: {
show: false
},
chart: {
height: 350,
type: 'treemap',
toolbar: {
show: false
}
},
title: {
text: 'Visitors Location',
align: 'center',
style: {
fontWeight: 500,
}
},
colors: chartTreemapDistributedColors,
plotOptions: {
treemap: {
distributed: true,
enableShades: false
}
}
};
var chart = new ApexCharts(document.querySelector("#distributed_treemap"), options);
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();
}
// Deal Type Charts
var dealTypeChartsColors = getChartColorsArray("deal-type-charts");
if (dealTypeChartsColors) {
var options = {
series: [{
name: 'Following',
data: [80, 50, 30, 40, 100, 20],
},
{
name: 'Followers',
data: [20, 30, 40, 80, 20, 80],
}],
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: 'Application Sent ',
data: [33, 28, 30, 35, 40, 55, 70, 110, 150, 180, 210, 250]
}, {
name: ' Interviews',
data: [20, 26, 45, 32, 42, 53, 59, 70, 78, 97, 110, 125]
},
{
name: ' Hired',
data: [12, 17, 45, 42, 24, 35, 42, 75, 102, 108, 156, 199]
},
{
name: ' Rejected',
data: [8, 13, 22, 27, 32, 34, 46, 59, 65, 97, 100, 110]
}],
chart: {
height: 320,
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']
},
colors: revenueExpensesChartsColors,
fill: {
opacity: 0.06,
colors: revenueExpensesChartsColors,
type: 'solid'
}
};
var chart = new ApexCharts(document.querySelector("#revenue-expenses-charts"), options);
chart.render();
}

177
src/main/resources/static/assets/js/pages/landing.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/leaflet-map.init.js Normal file
View 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 &copy; <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 &copy; <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 &copy; <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: '&copy; <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 &copy; <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 &copy; <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
src/main/resources/static/assets/js/pages/leaflet-us-states.js Normal file
View File

File diff suppressed because one or more lines are too long

458
src/main/resources/static/assets/js/pages/listjs.init.js Normal file
View File

@ -0,0 +1,458 @@
/*
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;
var editlist = false;
//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").innerHTML = "Update";
} 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("add-btn").innerHTML = "Add Customer";
} 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 () {
ischeckboxcheck();
});
var table = document.getElementById("customerTable");
// save all tr
var tr = table.getElementsByTagName("tr");
var trlist = table.querySelectorAll(".list tr");
var count = 11;
var forms = document.querySelectorAll('.tablelist-form')
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
} else {
event.preventDefault();
if (
customerNameField.value !== "" &&
emailField.value !== "" &&
dateField.value !== "" &&
phoneField.value !== "" && !editlist
) {
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();
refreshCallbacks();
clearFields();
filterContact("All");
count++;
Swal.fire({
position: 'center',
icon: 'success',
title: 'Customer inserted successfully!',
showConfirmButton: false,
timer: 2000,
showCloseButton: true
});
} else if (
customerNameField.value !== "" &&
emailField.value !== "" &&
dateField.value !== "" &&
phoneField.value !== "" && editlist
){
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
});
}
}
}, false)
})
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 (editBtns)
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) {
editlist = true;
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
});
}
}
document.querySelectorAll(".listjs-table").forEach(function(item){
item.querySelector(".pagination-next").addEventListener("click", function () {
(item.querySelector(".pagination.listjs-pagination")) ? (item.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
item.querySelector(".pagination.listjs-pagination").querySelector(".active").nextElementSibling.children[0].click(): '': '';
});
});
document.querySelectorAll(".listjs-table").forEach(function(item){
item.querySelector(".pagination-prev").addEventListener("click", function () {
(item.querySelector(".pagination.listjs-pagination")) ? (item.querySelector(".pagination.listjs-pagination").querySelector(".active")) ?
item.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
});

507
src/main/resources/static/assets/js/pages/mailbox.init.js Normal file
View File

@ -0,0 +1,507 @@
/*
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');
Array.from(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('.tab-pane.show .checkbox-wrapper-mail input');
Array.from(checkboxes).forEach(function (element) {
element.addEventListener('click', function (event) {
var checkboxes = document.querySelectorAll('.tab-pane.show .checkbox-wrapper-mail input');
var checkall = document.getElementById('checkall');
var checkedCount = document.querySelectorAll('.tab-pane.show .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('.tab-pane.show .checkbox-wrapper-mail input');
var checkedCount = document.querySelectorAll('.tab-pane.show .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('.tab-pane.show .checkbox-wrapper-mail input');
var checkedCount = document.querySelectorAll('.tab-pane.show .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;
}
// chat-conversation
var scrollEl = new SimpleBar(document.getElementById('chat-conversation'));
scrollEl.getScrollElement().scrollTop = document.getElementById("users-conversation").scrollHeight;
// 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();
function removeSingleItem() {
var getid = 0;
document.querySelectorAll(".remove-mail").forEach(function (item) {
item.addEventListener('click', function (event) {
getid = item.getAttribute('data-remove-id');
document.getElementById("delete-record").addEventListener("click", function () {
var filtered = '';
function arrayRemove(arr, value) {
return arr.filter(function (ele) {
return ele.id != value;
});
}
filtered = arrayRemove(allmaillist, getid);
allmaillist = filtered;
loadMailData(allmaillist);
document.getElementById("close-btn-email").click();
});
});
});
}
removeSingleItem();
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;
document.querySelectorAll(".email-chat-list a").forEach(function (item) {
if (item.classList.contains("active")) {
document.getElementById("emailchat-detailElem").style.display = "block";
var userListName = document.querySelector(".email-chat-list a.active").querySelector(".chatlist-user-name").innerHTML;
var userListProfile = document.querySelector(".email-chat-list a.active").querySelector(".chatlist-user-image img").getAttribute("src");
document.querySelector(".email-chat-detail .profile-username").innerHTML = userListName;
document.getElementById("users-conversation").querySelectorAll(".left .chat-avatar").forEach(function (item) {
if (userListProfile) {
item.querySelector("img").setAttribute("src", userListProfile);
} else {
item.querySelector("img").setAttribute("src", dummyUserImage);
}
});
}
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";
mailChatDetailElm = false;
document.querySelector(".email-chat-list a.active").classList.remove("active");
})
// emailDetailChange
function emailDetailChange() {
Array.from(document.querySelectorAll(".message-list li")).forEach(function (item) {
item.addEventListener("click", function () {
var mailListId = item.querySelector(".checkbox-wrapper-mail .form-check-input").value
document.querySelector(".remove-mail").setAttribute("data-remove-id", mailListId);;
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);
});
});
});
}
const triggerTabList = document.querySelectorAll('#mail-filter-navlist .nav-tabs button')
triggerTabList.forEach(triggerEl => {
const tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', event => {
event.preventDefault()
var activeTab = document.querySelector(".tab-content .tab-pane.show")
tabTrigger.show()
})
})
function resizeEvent(){
var windowSize = document.documentElement.clientWidth;
if (windowSize < 767) {
var chatUserList = document.querySelector(".email-chat-list a.active");
if (chatUserList) chatUserList.classList.remove("active");
document.getElementById("emailchat-detailElem").style.display = "none";
}
}
resizeEvent();
window.onresize = resizeEvent;

44
src/main/resources/static/assets/js/pages/materialdesign.list.js Normal file
View File

File diff suppressed because one or more lines are too long

27
src/main/resources/static/assets/js/pages/modal.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/nestable.init.js Normal file
View 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
});
});

109
src/main/resources/static/assets/js/pages/nft-landing.init.js Normal file
View File

@ -0,0 +1,109 @@
/*
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: 1,
spaceBetween: 30,
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
576: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
1200: {
slidesPerView: 4,
},
},
});
//
/********************* 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
src/main/resources/static/assets/js/pages/notifications.init.js Normal file
View 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();
});

132
src/main/resources/static/assets/js/pages/particles.app.js Normal file
View 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
src/main/resources/static/assets/js/pages/passowrd-create.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/password-addon.init.js Normal file
View 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";
}
});
});
});

17418
src/main/resources/static/assets/js/pages/plugins/jsonfull-emoji-list.json Normal file
View File

File diff suppressed because it is too large Load Diff

1
src/main/resources/static/assets/js/pages/plugins/lord-icon-2.1.0.js Normal file
View File

File diff suppressed because one or more lines are too long

48
src/main/resources/static/assets/js/pages/pricing.init.js Normal file
View 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 ++;
});
});
}

161
src/main/resources/static/assets/js/pages/profile-setting.init.js Normal file
View File

@ -0,0 +1,161 @@
/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://Themesbrand.com/
Contact: Themesbrand@gmail.com
File: Profile-setting init js
*/
// Profile Foreground Img
if (document.querySelector("#profile-foreground-img-file-input")) {
document.querySelector("#profile-foreground-img-file-input").addEventListener("change", function () {
var preview = document.querySelector(".profile-wid-img");
var file = document.querySelector(".profile-foreground-img-file-input")
.files[0];
var reader = new FileReader();
reader.addEventListener(
"load",
function () {
preview.src = reader.result;
},
false
);
if (file) {
reader.readAsDataURL(file);
}
});
}
// 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
src/main/resources/static/assets/js/pages/profile.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/project-create.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/project-list.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/project-overview.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/range-sliders.init.js Normal file
View 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
src/main/resources/static/assets/js/pages/rating.init.js Normal file
View 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);

Some files were not shown because too many files have changed in this diff Show More