first commit
This commit is contained in:
32
public/assets/js/ace.js
Executable file
32
public/assets/js/ace.js
Executable file
@ -0,0 +1,32 @@
|
||||
// npm package: ace-builds (Ajax.org Cloud9 Editor)
|
||||
// github link: https://github.com/ajaxorg/ace-builds
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
if ($('#ace_html').length) {
|
||||
$(function() {
|
||||
var editor = ace.edit("ace_html");
|
||||
editor.setTheme("ace/theme/dracula");
|
||||
editor.getSession().setMode("ace/mode/html");
|
||||
editor.setOption("showPrintMargin", false)
|
||||
});
|
||||
}
|
||||
if ($('#ace_scss').length) {
|
||||
$(function() {
|
||||
var editor = ace.edit("ace_scss");
|
||||
editor.setTheme("ace/theme/dracula");
|
||||
editor.getSession().setMode("ace/mode/scss");
|
||||
editor.setOption("showPrintMargin", false)
|
||||
});
|
||||
}
|
||||
if ($('#ace_javaScript').length) {
|
||||
$(function() {
|
||||
var editor = ace.edit("ace_javaScript");
|
||||
editor.setTheme("ace/theme/dracula");
|
||||
editor.getSession().setMode("ace/mode/javascript");
|
||||
editor.setOption("showPrintMargin", false)
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
911
public/assets/js/apexcharts.js
Executable file
911
public/assets/js/apexcharts.js
Executable file
@ -0,0 +1,911 @@
|
||||
// npm package: apexcharts
|
||||
// github link: https://github.com/apexcharts/apexcharts.js
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
var colors = {
|
||||
primary : "#6571ff",
|
||||
secondary : "#7987a1",
|
||||
success : "#05a34a",
|
||||
info : "#66d1d1",
|
||||
warning : "#fbbc06",
|
||||
danger : "#ff3366",
|
||||
light : "#e9ecef",
|
||||
dark : "#060c17",
|
||||
muted : "#7987a1",
|
||||
gridBorder : "rgba(77, 138, 240, .15)",
|
||||
bodyColor : "#000",
|
||||
cardBg : "#fff"
|
||||
}
|
||||
|
||||
var fontFamily = "'Roboto', Helvetica, sans-serif"
|
||||
|
||||
|
||||
|
||||
// Apex Line chart start
|
||||
if ($('#apexLine').length) {
|
||||
var lineChartOptions = {
|
||||
chart: {
|
||||
type: "line",
|
||||
height: '320',
|
||||
parentHeightOffset: 0,
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
colors: [colors.primary, colors.danger, colors.warning],
|
||||
grid: {
|
||||
padding: {
|
||||
bottom: -4
|
||||
},
|
||||
borderColor: colors.gridBorder,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Data a",
|
||||
data: [45, 52, 38, 45]
|
||||
},
|
||||
{
|
||||
name: "Data b",
|
||||
data: [12, 42, 68, 33]
|
||||
},
|
||||
{
|
||||
name:
|
||||
"Data c",
|
||||
data: [8, 32, 48, 53]
|
||||
}
|
||||
],
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
categories: ["2015", "2016", "2017", "2018"],
|
||||
lines: {
|
||||
show: true
|
||||
},
|
||||
axisBorder: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
axisTicks: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: 'center',
|
||||
fontFamily: fontFamily,
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 3,
|
||||
curve: "smooth",
|
||||
lineCap: "round"
|
||||
},
|
||||
};
|
||||
var apexLineChart = new ApexCharts(document.querySelector("#apexLine"), lineChartOptions);
|
||||
apexLineChart.render();
|
||||
}
|
||||
// Apex Line chart end
|
||||
|
||||
|
||||
|
||||
// Apex Bar chart start
|
||||
if ($('#apexBar').length) {
|
||||
var options = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: '320',
|
||||
parentHeightOffset: 0,
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
colors: [colors.primary],
|
||||
grid: {
|
||||
padding: {
|
||||
bottom: -4
|
||||
},
|
||||
borderColor: colors.gridBorder,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'sales',
|
||||
data: [30,40,45,50,49,60,70,91,125]
|
||||
}],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: ['01/01/1991','01/01/1992','01/01/1993','01/01/1994','01/01/1995','01/01/1996','01/01/1997', '01/01/1998','01/01/1999'],
|
||||
axisBorder: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
axisTicks: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: 'center',
|
||||
fontFamily: fontFamily,
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var apexBarChart = new ApexCharts(document.querySelector("#apexBar"), options);
|
||||
apexBarChart.render();
|
||||
}
|
||||
// Apex Bar chart end
|
||||
|
||||
|
||||
|
||||
|
||||
// Apex Area chart start
|
||||
if ($('#apexArea').length) {
|
||||
var options = {
|
||||
chart: {
|
||||
type: "area",
|
||||
height: 300,
|
||||
parentHeightOffset: 0,
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
stacked: true,
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
colors: [colors.danger, colors.info],
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
width: 3
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Total Views',
|
||||
data: generateDayWiseTimeSeries(0, 18)
|
||||
}, {
|
||||
name: 'Unique Views',
|
||||
data: generateDayWiseTimeSeries(1, 18)
|
||||
}],
|
||||
// markers: {
|
||||
// size: 5,
|
||||
// strokeWidth: 3,
|
||||
// hover: {
|
||||
// size: 7
|
||||
// }
|
||||
// },
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
axisBorder: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
axisTicks: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Views',
|
||||
},
|
||||
tickAmount: 4,
|
||||
min: 0,
|
||||
labels: {
|
||||
// offsetX: -6,
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
bottom: -4
|
||||
},
|
||||
borderColor: colors.gridBorder,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: "dd MMM yyyy"
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'solid',
|
||||
opacity: [0.4,0.25],
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: 'center',
|
||||
fontFamily: fontFamily,
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#apexArea"), options);
|
||||
chart.render();
|
||||
|
||||
function generateDayWiseTimeSeries(s, count) {
|
||||
var values = [
|
||||
[4,3,10,9,29,19,25,9,12,7,19,5,13,9,17,2,7,5],
|
||||
[2,3,8,7,22,16,23,7,11,5,12,5,10,4,15,2,6,2]
|
||||
];
|
||||
var i = 0;
|
||||
var series = [];
|
||||
var x = new Date("11 Nov 2012").getTime();
|
||||
while (i < count) {
|
||||
series.push([x, values[s][i]]);
|
||||
x += 86400000;
|
||||
i++;
|
||||
}
|
||||
return series;
|
||||
}
|
||||
}
|
||||
// Apex Area chart end
|
||||
|
||||
|
||||
|
||||
|
||||
// Apex Mixed chart start
|
||||
if ($('#apexMixed').length) {
|
||||
var options = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'line',
|
||||
stacked: false,
|
||||
parentHeightOffset: 0,
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
colors: [colors.danger, colors.info],
|
||||
grid: {
|
||||
borderColor: colors.gridBorder,
|
||||
padding: {
|
||||
bottom: -4
|
||||
},
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: [0, 3],
|
||||
curve: 'smooth'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '50%'
|
||||
}
|
||||
},
|
||||
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]
|
||||
}],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: 'center',
|
||||
fontFamily: fontFamily,
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: [.75,0.25],
|
||||
},
|
||||
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',
|
||||
axisBorder: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
axisTicks: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Points',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
intersect: false,
|
||||
y: [{
|
||||
formatter: function (y) {
|
||||
if(typeof y !== "undefined") {
|
||||
return y.toFixed(0) + " points";
|
||||
}
|
||||
return y;
|
||||
}
|
||||
}, {
|
||||
formatter: function (y) {
|
||||
if(typeof y !== "undefined") {
|
||||
return y.toFixed(2) + " $";
|
||||
}
|
||||
return y;
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#apexMixed"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
// Apex Mixed chart end
|
||||
|
||||
|
||||
|
||||
|
||||
// Apex Donut chart start
|
||||
if ($('#apexDonut').length) {
|
||||
var options = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: "donut",
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
stroke: {
|
||||
colors: ['rgba(0,0,0,0)']
|
||||
},
|
||||
colors: [colors.primary,colors.warning,colors.danger, colors.info],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: 'center',
|
||||
fontFamily: fontFamily,
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [44, 55, 13, 33]
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#apexDonut"), options);
|
||||
chart.render();
|
||||
}
|
||||
// Apex Donut chart start
|
||||
|
||||
|
||||
|
||||
|
||||
// Apex Pie chart end
|
||||
if ($('#apexPie').length) {
|
||||
var options = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: "pie",
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
colors: [colors.primary,colors.warning,colors.danger, colors.info],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: 'center',
|
||||
fontFamily: fontFamily,
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
colors: ['rgba(0,0,0,0)']
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
series: [44, 55, 13, 33]
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#apexPie"), options);
|
||||
chart.render();
|
||||
}
|
||||
// Apex Pie chart end
|
||||
|
||||
|
||||
|
||||
|
||||
// Apex Heat chart start
|
||||
if ($('#apexHeatMap').length) {
|
||||
function generateData(count, yrange) {
|
||||
var i = 0;
|
||||
var series = [];
|
||||
while (i < count) {
|
||||
var x = 'w' + (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 options = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'heatmap',
|
||||
parentHeightOffset: 0,
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
grid: {
|
||||
borderColor: colors.gridBorder,
|
||||
padding: {
|
||||
bottom: -4
|
||||
},
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
colors: [colors.info],
|
||||
stroke: {
|
||||
colors: [colors.cardBg]
|
||||
},
|
||||
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
|
||||
})
|
||||
}
|
||||
],
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
axisTicks: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: 'HeatMap Chart (Single color)',
|
||||
align: 'center',
|
||||
style: {
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
heatmap: {
|
||||
radius: 0,
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#apexHeatMap"), options);
|
||||
chart.render();
|
||||
}
|
||||
// Apex Heat chart end
|
||||
|
||||
|
||||
|
||||
|
||||
// Apex Radar chart start
|
||||
if ($('#apexRadar').length) {
|
||||
var options = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'radar',
|
||||
parentHeightOffset: 0,
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
bottom: -6
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: 'center',
|
||||
fontFamily: fontFamily,
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
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],
|
||||
}],
|
||||
labels: ['2011', '2012', '2013', '2014', '2015', '2016'],
|
||||
colors: [colors.primary, colors.warning, colors.danger],
|
||||
stroke: {
|
||||
width: 0,
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.75
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['April', 'May', 'June', 'July', 'August', 'September'],
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: [colors.secondary, colors.secondary, colors.secondary, colors.secondary, colors.secondary, colors.secondary],
|
||||
fontSize: "14px",
|
||||
fontFamily: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: true,
|
||||
style: {
|
||||
colors: colors.bodyColor,
|
||||
fontSize: "11px",
|
||||
fontFamily: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
plotOptions: {
|
||||
radar: {
|
||||
polygons: {
|
||||
strokeColors: colors.gridBorder,
|
||||
strokeWidth: 1,
|
||||
connectorColors: colors.gridBorder,
|
||||
fill: {
|
||||
colors: ['transparent']
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#apexRadar"), options );
|
||||
chart.render();
|
||||
}
|
||||
// Apex Radar chart end
|
||||
|
||||
|
||||
|
||||
|
||||
// Apex Scatter chart start
|
||||
if ($('#apexScatter').length) {
|
||||
var options = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'scatter',
|
||||
parentHeightOffset: 0,
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
colors: [colors.primary, colors.warning, colors.danger],
|
||||
grid: {
|
||||
borderColor: colors.gridBorder,
|
||||
padding: {
|
||||
bottom: -4
|
||||
},
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
strokeColor: colors.cardBg,
|
||||
hover: {
|
||||
strokeColor: colors.cardBg
|
||||
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: 'center',
|
||||
fontFamily: fontFamily,
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
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]]
|
||||
}],
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
axisTicks: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
tickAmount: 10,
|
||||
labels: {
|
||||
formatter: function(val) {
|
||||
return parseFloat(val).toFixed(1)
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 7
|
||||
}
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#apexScatter"),
|
||||
options
|
||||
);
|
||||
chart.render();
|
||||
}
|
||||
// Apex Scatter chart end
|
||||
|
||||
|
||||
|
||||
|
||||
// Apex Radialbar chart start
|
||||
if ($('#apexRadialBar').length) {
|
||||
var options = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: "radialBar",
|
||||
parentHeightOffset: 0,
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
colors: [colors.primary, colors.warning, colors.danger, colors.info],
|
||||
fill: {
|
||||
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 10
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: {
|
||||
total: {
|
||||
show: true,
|
||||
label: 'TOTAL',
|
||||
fontSize: '14px',
|
||||
fontFamily: fontFamily,
|
||||
}
|
||||
},
|
||||
track: {
|
||||
background: colors.gridBorder,
|
||||
strokeWidth: '100%',
|
||||
opacity: 1,
|
||||
margin: 5,
|
||||
},
|
||||
}
|
||||
},
|
||||
series: [44, 55, 67, 83],
|
||||
labels: ["Apples", "Oranges", "Bananas", "Berries"],
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: 'center',
|
||||
fontFamily: fontFamily,
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#apexRadialBar"), options);
|
||||
chart.render();
|
||||
var chartAreaBounds = chart.w.globals.dom.baseEl.querySelector('.apexcharts-inner').getBoundingClientRect();
|
||||
}
|
||||
// Apex Radialbar chart end
|
||||
|
||||
});
|
||||
35
public/assets/js/bootstrap-maxlength.js
vendored
Executable file
35
public/assets/js/bootstrap-maxlength.js
vendored
Executable file
@ -0,0 +1,35 @@
|
||||
// npm package: bootstrap-maxlength
|
||||
// github link: https://github.com/mimo84/bootstrap-maxlength
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
$('#defaultconfig').maxlength({
|
||||
warningClass: "badge mt-1 bg-success",
|
||||
limitReachedClass: "badge mt-1 bg-danger"
|
||||
});
|
||||
|
||||
$('#defaultconfig-2').maxlength({
|
||||
alwaysShow: true,
|
||||
threshold: 20,
|
||||
warningClass: "badge mt-1 bg-success",
|
||||
limitReachedClass: "badge mt-1 bg-danger"
|
||||
});
|
||||
|
||||
$('#defaultconfig-3').maxlength({
|
||||
alwaysShow: true,
|
||||
threshold: 10,
|
||||
warningClass: "badge mt-1 bg-success",
|
||||
limitReachedClass: "badge mt-1 bg-danger",
|
||||
separator: ' of ',
|
||||
preText: 'You have ',
|
||||
postText: ' chars remaining.',
|
||||
validate: true
|
||||
});
|
||||
|
||||
$('#maxlength-textarea').maxlength({
|
||||
alwaysShow: true,
|
||||
warningClass: "badge mt-1 bg-success",
|
||||
limitReachedClass: "badge mt-1 bg-danger"
|
||||
});
|
||||
});
|
||||
112
public/assets/js/carousel.js
Executable file
112
public/assets/js/carousel.js
Executable file
@ -0,0 +1,112 @@
|
||||
// npm package: owl.carousel
|
||||
// github link: https://github.com/OwlCarousel2/OwlCarousel2
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
if($('.owl-basic').length) {
|
||||
$('.owl-basic').owlCarousel({
|
||||
loop:true,
|
||||
margin:10,
|
||||
rtl: checkRTL(),
|
||||
nav:false,
|
||||
responsive:{
|
||||
0:{
|
||||
items:2
|
||||
},
|
||||
600:{
|
||||
items:3
|
||||
},
|
||||
1000:{
|
||||
items:4
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if($('.owl-auto-play').length) {
|
||||
$('.owl-auto-play').owlCarousel({
|
||||
items:4,
|
||||
loop:true,
|
||||
margin:10,
|
||||
rtl: checkRTL(),
|
||||
autoplay:true,
|
||||
autoplayTimeout:1000,
|
||||
autoplayHoverPause:true,
|
||||
responsive:{
|
||||
0:{
|
||||
items:2
|
||||
},
|
||||
600:{
|
||||
items:3
|
||||
},
|
||||
1000:{
|
||||
items:4
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if($('.owl-fadeout').length) {
|
||||
$('.owl-fadeout').owlCarousel({
|
||||
animateOut: 'fadeOut',
|
||||
rtl: checkRTL(),
|
||||
items:1,
|
||||
margin:30,
|
||||
stagePadding:30,
|
||||
smartSpeed:450
|
||||
});
|
||||
}
|
||||
|
||||
if($('.owl-animate-css').length) {
|
||||
$('.owl-animate-css').owlCarousel({
|
||||
animateOut: 'animate__animated animate__slideOutDown',
|
||||
animateIn: 'animate__animated animate__flipInX',
|
||||
items:1,
|
||||
rtl: checkRTL(),
|
||||
margin:30,
|
||||
stagePadding:30,
|
||||
smartSpeed:450
|
||||
});
|
||||
}
|
||||
|
||||
if($('.owl-mouse-wheel').length) {
|
||||
var owl = $('.owl-mouse-wheel');
|
||||
owl.owlCarousel({
|
||||
loop:true,
|
||||
nav:false,
|
||||
rtl: checkRTL(),
|
||||
margin:10,
|
||||
responsive:{
|
||||
0:{
|
||||
items:2
|
||||
},
|
||||
600:{
|
||||
items:3
|
||||
},
|
||||
960:{
|
||||
items:3
|
||||
},
|
||||
1200:{
|
||||
items:4
|
||||
}
|
||||
}
|
||||
});
|
||||
owl.on('mousewheel', '.owl-stage', function (e) {
|
||||
if (e.deltaY>0) {
|
||||
owl.trigger('next.owl');
|
||||
} else {
|
||||
owl.trigger('prev.owl');
|
||||
}
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function checkRTL() {
|
||||
if (document.querySelector('html')?.getAttribute('dir') === 'rtl') {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
711
public/assets/js/chartjs.js
Executable file
711
public/assets/js/chartjs.js
Executable file
@ -0,0 +1,711 @@
|
||||
// npm package: chart.js
|
||||
// github link: https://github.com/chartjs/Chart.js
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
|
||||
var colors = {
|
||||
primary : "#6571ff",
|
||||
secondary : "#7987a1",
|
||||
success : "#05a34a",
|
||||
info : "#66d1d1",
|
||||
warning : "#fbbc06",
|
||||
danger : "#ff3366",
|
||||
light : "#e9ecef",
|
||||
dark : "#060c17",
|
||||
muted : "#7987a1",
|
||||
gridBorder : "rgba(77, 138, 240, .15)",
|
||||
bodyColor : "#000",
|
||||
cardBg : "#fff"
|
||||
}
|
||||
|
||||
var fontFamily = "'Roboto', Helvetica, sans-serif"
|
||||
|
||||
|
||||
|
||||
|
||||
// Bar chart
|
||||
if($('#chartjsBar').length) {
|
||||
new Chart($("#chartjsBar"), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [ "China", "America", "India", "Germany", "Oman"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Population",
|
||||
backgroundColor: [colors.primary, colors.danger, colors.warning, colors.success, colors.info],
|
||||
data: [2478,5267,734,2084,1433],
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Line Chart
|
||||
if($('#chartjsLine').length) {
|
||||
new Chart($('#chartjsLine'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
|
||||
datasets: [{
|
||||
data: [86,114,106,106,107,111,133,221,783,2478],
|
||||
label: "Africa",
|
||||
borderColor: colors.info,
|
||||
backgroundColor: "transparent",
|
||||
fill: true,
|
||||
pointBackgroundColor: colors.cardBg,
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 3,
|
||||
tension: .3
|
||||
}, {
|
||||
data: [282,350,411,502,635,809,947,1402,3700,5267],
|
||||
label: "Asia",
|
||||
borderColor: colors.danger,
|
||||
backgroundColor: "transparent",
|
||||
fill: true,
|
||||
pointBackgroundColor: colors.cardBg,
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 3,
|
||||
tension: .3
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: '13px',
|
||||
family: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Doughnut Chart
|
||||
if($('#chartjsDoughnut').length) {
|
||||
new Chart($('#chartjsDoughnut'), {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ["Africa", "Asia", "Europe"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Population (millions)",
|
||||
backgroundColor: [colors.primary, colors.danger, colors.info],
|
||||
borderColor: colors.cardBg,
|
||||
data: [2478,4267,1334],
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
aspectRatio: 2,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: '13px',
|
||||
family: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Area Chart
|
||||
if($('#chartjsArea').length) {
|
||||
new Chart($('#chartjsArea'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
|
||||
datasets: [{
|
||||
data: [86,114,106,106,107,111,133,221,783,2478],
|
||||
label: "Africa",
|
||||
borderColor: colors.danger,
|
||||
backgroundColor: 'rgba(255,51,102,.3)',
|
||||
fill: true,
|
||||
pointBackgroundColor: colors.cardBg,
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 3,
|
||||
tension: .3
|
||||
}, {
|
||||
data: [282,350,411,502,635,809,947,1402,3700,5267],
|
||||
label: "Asia",
|
||||
borderColor: colors.info,
|
||||
backgroundColor: 'rgba(102,209,209,.3)',
|
||||
fill: true,
|
||||
pointBackgroundColor: colors.cardBg,
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 3,
|
||||
tension: .3
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: '13px',
|
||||
family: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Pie Chart
|
||||
if($('#chartjsPie').length) {
|
||||
new Chart($('#chartjsPie'), {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: ["Africa", "Asia", "Europe"],
|
||||
datasets: [{
|
||||
label: "Population (millions)",
|
||||
backgroundColor: [colors.primary, colors.danger, colors.info],
|
||||
borderColor: colors.cardBg,
|
||||
data: [2478,4267,1334]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: '13px',
|
||||
family: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
aspectRatio: 2,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Bubble Chart
|
||||
if($('#chartjsBubble').length) {
|
||||
new Chart($('#chartjsBubble'), {
|
||||
type: 'bubble',
|
||||
data: {
|
||||
labels: "Africa",
|
||||
datasets: [
|
||||
{
|
||||
label: ["China"],
|
||||
backgroundColor: 'rgba(102,209,209,.3)',
|
||||
borderColor: colors.info,
|
||||
data: [{
|
||||
x: 21269017,
|
||||
y: 5.245,
|
||||
r: 15
|
||||
}]
|
||||
}, {
|
||||
label: ["Denmark"],
|
||||
backgroundColor: "rgba(255,51,102,.3)",
|
||||
borderColor: colors.danger,
|
||||
data: [{
|
||||
x: 258702,
|
||||
y: 7.526,
|
||||
r: 10
|
||||
}]
|
||||
}, {
|
||||
label: ["Germany"],
|
||||
backgroundColor: "rgba(101,113,255,.3)",
|
||||
borderColor: colors.primary,
|
||||
data: [{
|
||||
x: 3979083,
|
||||
y: 6.994,
|
||||
r: 15
|
||||
}]
|
||||
}, {
|
||||
label: ["Japan"],
|
||||
backgroundColor: "rgba(251,188,6,.3)",
|
||||
borderColor: colors.warning,
|
||||
data: [{
|
||||
x: 4931877,
|
||||
y: 5.921,
|
||||
r: 15
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: '13px',
|
||||
family: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: "GDP (PPP)"
|
||||
},
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: "Happiness"
|
||||
},
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Radar Chart
|
||||
if($('#chartjsRadar').length) {
|
||||
new Chart($('#chartjsRadar'), {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
|
||||
datasets: [
|
||||
{
|
||||
label: "1950",
|
||||
fill: true,
|
||||
backgroundColor: "rgba(255,51,102,.3)",
|
||||
borderColor: colors.danger,
|
||||
pointBorderColor: colors.danger,
|
||||
pointBackgroundColor: colors.cardBg,
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 3,
|
||||
data: [8.77,55.61,21.69,6.62,6.82]
|
||||
}, {
|
||||
label: "2050",
|
||||
fill: true,
|
||||
backgroundColor: "rgba(102,209,209,.3)",
|
||||
borderColor: colors.info,
|
||||
pointBorderColor: colors.info,
|
||||
pointBackgroundColor: colors.cardBg,
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 3,
|
||||
data: [25.48,54.16,7.61,8.06,4.45]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
aspectRatio: 2,
|
||||
scales: {
|
||||
r: {
|
||||
angleLines: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
grid: {
|
||||
color: colors.gridBorder
|
||||
},
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 60,
|
||||
ticks: {
|
||||
backdropColor: colors.cardBg,
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 11,
|
||||
family: fontFamily
|
||||
}
|
||||
},
|
||||
pointLabels: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
color: colors.bodyColor,
|
||||
family: fontFamily,
|
||||
size: '13px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: '13px',
|
||||
family: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Polar Area Chart
|
||||
if($('#chartjsPolarArea').length) {
|
||||
new Chart($('#chartjsPolarArea'), {
|
||||
type: 'polarArea',
|
||||
data: {
|
||||
labels: ["Africa", "Asia", "Europe", "Latin America"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Population (millions)",
|
||||
backgroundColor: [colors.primary, colors.danger, colors.success, colors.info],
|
||||
borderColor: colors.cardBg,
|
||||
data: [3578,5000,1034,2034]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
aspectRatio: 2,
|
||||
scales: {
|
||||
r: {
|
||||
angleLines: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
grid: {
|
||||
color: colors.gridBorder
|
||||
},
|
||||
suggestedMin: 1000,
|
||||
suggestedMax: 5500,
|
||||
ticks: {
|
||||
backdropColor: colors.cardBg,
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 11,
|
||||
family: fontFamily
|
||||
}
|
||||
},
|
||||
pointLabels: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
color: colors.bodyColor,
|
||||
family: fontFamily,
|
||||
size: '13px'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: '13px',
|
||||
family: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Grouped Bar Chart
|
||||
if($('#chartjsGroupedBar').length) {
|
||||
new Chart($('#chartjsGroupedBar'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["1900", "1950", "1999", "2050"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Africa",
|
||||
backgroundColor: colors.danger,
|
||||
data: [133,221,783,2478]
|
||||
}, {
|
||||
label: "Europe",
|
||||
backgroundColor: colors.primary,
|
||||
data: [408,547,675,734]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: '13px',
|
||||
family: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Mixed Line Bar Chart
|
||||
if($('#chartjsMixedBar').length) {
|
||||
new Chart($('#chartjsMixedBar'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["1900", "1950", "1999", "2050"],
|
||||
datasets: [{
|
||||
label: "Europe",
|
||||
type: "line",
|
||||
borderColor: colors.danger,
|
||||
backgroundColor: "transparent",
|
||||
data: [408,547,675,734],
|
||||
fill: false,
|
||||
pointBackgroundColor: colors.cardBg,
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 3,
|
||||
tension: .3
|
||||
}, {
|
||||
label: "Africa",
|
||||
type: "line",
|
||||
borderColor: colors.primary,
|
||||
backgroundColor: "transparent",
|
||||
data: [133,221,783,2478],
|
||||
fill: false,
|
||||
pointBackgroundColor: colors.cardBg,
|
||||
pointBorderWidth: 2,
|
||||
pointHoverBorderWidth: 3,
|
||||
tension: .3
|
||||
}, {
|
||||
label: "Europe",
|
||||
type: "bar",
|
||||
backgroundColor: colors.danger,
|
||||
data: [408,547,675,734],
|
||||
}, {
|
||||
label: "Africa",
|
||||
type: "bar",
|
||||
backgroundColor: colors.primary,
|
||||
data: [133,221,783,2478]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
labels: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: '13px',
|
||||
family: fontFamily
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: true,
|
||||
color: colors.gridBorder,
|
||||
borderColor: colors.gridBorder,
|
||||
},
|
||||
ticks: {
|
||||
color: colors.bodyColor,
|
||||
font: {
|
||||
size: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
31
public/assets/js/chat.js
Executable file
31
public/assets/js/chat.js
Executable file
@ -0,0 +1,31 @@
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
// Applying perfect-scrollbar
|
||||
if ($('.chat-aside .tab-content #chats').length) {
|
||||
const sidebarBodyScroll = new PerfectScrollbar('.chat-aside .tab-content #chats');
|
||||
}
|
||||
if ($('.chat-aside .tab-content #calls').length) {
|
||||
const sidebarBodyScroll = new PerfectScrollbar('.chat-aside .tab-content #calls');
|
||||
}
|
||||
if ($('.chat-aside .tab-content #contacts').length) {
|
||||
const sidebarBodyScroll = new PerfectScrollbar('.chat-aside .tab-content #contacts');
|
||||
}
|
||||
|
||||
if ($('.chat-content .chat-body').length) {
|
||||
const sidebarBodyScroll = new PerfectScrollbar('.chat-content .chat-body');
|
||||
}
|
||||
|
||||
|
||||
|
||||
$( '.chat-list .chat-item' ).each(function(index) {
|
||||
$(this).on('click', function(){
|
||||
$('.chat-content').toggleClass('show');
|
||||
});
|
||||
});
|
||||
|
||||
$('#backToChatList').on('click', function(index) {
|
||||
$('.chat-content').toggleClass('show');
|
||||
});
|
||||
|
||||
});
|
||||
55
public/assets/js/cropper.js
Executable file
55
public/assets/js/cropper.js
Executable file
@ -0,0 +1,55 @@
|
||||
// npm package: cropperjs
|
||||
// github link: https://github.com/fengyuanchen/cropperjs
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
var croppingImage = document.querySelector('#croppingImage'),
|
||||
img_w = document.querySelector('.img-w'),
|
||||
cropBtn = document.querySelector('.crop'),
|
||||
croppedImg = document.querySelector('.cropped-img'),
|
||||
dwn = document.querySelector('.download'),
|
||||
upload = document.querySelector('#cropperImageUpload'),
|
||||
cropper = '';
|
||||
|
||||
cropper = new Cropper(croppingImage, {
|
||||
zoomable: false
|
||||
});
|
||||
|
||||
// on change show image with crop options
|
||||
upload.addEventListener('change', function (e) {
|
||||
if (e.target.files.length) {
|
||||
console.log(e.target.files[0]);
|
||||
var fileType = e.target.files[0].type;
|
||||
if(fileType === 'image/gif' || fileType === 'image/jpeg' || fileType === 'image/png') {
|
||||
cropper.destroy();
|
||||
// start file reader
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
if(e.target.result){
|
||||
croppingImage.src = e.target.result;
|
||||
cropper = new Cropper(croppingImage, {
|
||||
zoomable: false
|
||||
});
|
||||
}
|
||||
};
|
||||
reader.readAsDataURL(e.target.files[0]);
|
||||
} else {
|
||||
alert("Selected file type is not supported. Please try again")
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// crop on click
|
||||
cropBtn.addEventListener('click',function(e) {
|
||||
e.preventDefault();
|
||||
// get result to data uri
|
||||
let imgSrc = cropper.getCroppedCanvas({
|
||||
width: img_w.value // input value
|
||||
}).toDataURL();
|
||||
croppedImg.src = imgSrc;
|
||||
dwn.setAttribute('href', imgSrc);
|
||||
dwn.download = 'imagename.png';
|
||||
});
|
||||
|
||||
});
|
||||
546
public/assets/js/dashboard.js
Executable file
546
public/assets/js/dashboard.js
Executable file
@ -0,0 +1,546 @@
|
||||
$(function() {
|
||||
'use strict'
|
||||
|
||||
|
||||
|
||||
var colors = {
|
||||
primary : "#6571ff",
|
||||
secondary : "#7987a1",
|
||||
success : "#05a34a",
|
||||
info : "#66d1d1",
|
||||
warning : "#fbbc06",
|
||||
danger : "#ff3366",
|
||||
light : "#e9ecef",
|
||||
dark : "#060c17",
|
||||
muted : "#7987a1",
|
||||
gridBorder : "rgba(77, 138, 240, .15)",
|
||||
bodyColor : "#000",
|
||||
cardBg : "#fff"
|
||||
}
|
||||
|
||||
var fontFamily = "'Roboto', Helvetica, sans-serif"
|
||||
|
||||
var revenueChartData = [
|
||||
49.33,
|
||||
48.79,
|
||||
50.61,
|
||||
53.31,
|
||||
54.78,
|
||||
53.84,
|
||||
54.68,
|
||||
56.74,
|
||||
56.99,
|
||||
56.14,
|
||||
56.56,
|
||||
60.35,
|
||||
58.74,
|
||||
61.44,
|
||||
61.11,
|
||||
58.57,
|
||||
54.72,
|
||||
52.07,
|
||||
51.09,
|
||||
47.48,
|
||||
48.57,
|
||||
48.99,
|
||||
53.58,
|
||||
50.28,
|
||||
46.24,
|
||||
48.61,
|
||||
51.75,
|
||||
51.34,
|
||||
50.21,
|
||||
54.65,
|
||||
52.44,
|
||||
53.06,
|
||||
57.07,
|
||||
52.97,
|
||||
48.72,
|
||||
52.69,
|
||||
53.59,
|
||||
58.52,
|
||||
55.10,
|
||||
58.05,
|
||||
61.35,
|
||||
57.74,
|
||||
60.27,
|
||||
61.00,
|
||||
57.78,
|
||||
56.80,
|
||||
58.90,
|
||||
62.45,
|
||||
58.75,
|
||||
58.40,
|
||||
56.74,
|
||||
52.76,
|
||||
52.30,
|
||||
50.56,
|
||||
55.40,
|
||||
50.49,
|
||||
52.49,
|
||||
48.79,
|
||||
47.46,
|
||||
43.31,
|
||||
38.96,
|
||||
34.73,
|
||||
31.03,
|
||||
32.63,
|
||||
36.89,
|
||||
35.89,
|
||||
32.74,
|
||||
33.20,
|
||||
30.82,
|
||||
28.64,
|
||||
28.44,
|
||||
27.73,
|
||||
27.75,
|
||||
25.96,
|
||||
24.38,
|
||||
21.95,
|
||||
22.08,
|
||||
23.54,
|
||||
27.30,
|
||||
30.27,
|
||||
27.25,
|
||||
29.92,
|
||||
25.14,
|
||||
23.09,
|
||||
23.79,
|
||||
23.46,
|
||||
27.99,
|
||||
23.21,
|
||||
23.91,
|
||||
19.21,
|
||||
15.13,
|
||||
15.08,
|
||||
11.00,
|
||||
9.20,
|
||||
7.47,
|
||||
11.64,
|
||||
15.76,
|
||||
13.99,
|
||||
12.59,
|
||||
13.53,
|
||||
15.01,
|
||||
13.95,
|
||||
13.23,
|
||||
18.10,
|
||||
20.63,
|
||||
21.06,
|
||||
25.37,
|
||||
25.32,
|
||||
20.94,
|
||||
18.75,
|
||||
15.38,
|
||||
14.56,
|
||||
17.94,
|
||||
15.96,
|
||||
16.35,
|
||||
14.16,
|
||||
12.10,
|
||||
14.84,
|
||||
17.24,
|
||||
17.79,
|
||||
14.03,
|
||||
18.65,
|
||||
18.46,
|
||||
22.68,
|
||||
25.08,
|
||||
28.18,
|
||||
28.03,
|
||||
24.11,
|
||||
24.28,
|
||||
28.23,
|
||||
26.24,
|
||||
29.33,
|
||||
26.07,
|
||||
23.92,
|
||||
28.82,
|
||||
25.14,
|
||||
21.79,
|
||||
23.05,
|
||||
20.71,
|
||||
29.72,
|
||||
30.21,
|
||||
32.56,
|
||||
31.46,
|
||||
33.69,
|
||||
30.05,
|
||||
34.20,
|
||||
36.93,
|
||||
35.50,
|
||||
34.78,
|
||||
36.97
|
||||
];
|
||||
|
||||
var revenueChartCategories = [
|
||||
"Jan 01 2023", "Jan 02 2023", "jan 03 2023", "Jan 04 2023", "Jan 05 2023", "Jan 06 2023", "Jan 07 2023", "Jan 08 2023", "Jan 09 2023", "Jan 10 2023", "Jan 11 2023", "Jan 12 2023", "Jan 13 2023", "Jan 14 2023", "Jan 15 2023", "Jan 16 2023", "Jan 17 2023", "Jan 18 2023", "Jan 19 2023", "Jan 20 2023","Jan 21 2023", "Jan 22 2023", "Jan 23 2023", "Jan 24 2023", "Jan 25 2023", "Jan 26 2023", "Jan 27 2023", "Jan 28 2023", "Jan 29 2023", "Jan 30 2023", "Jan 31 2023",
|
||||
"Feb 01 2023", "Feb 02 2023", "Feb 03 2023", "Feb 04 2023", "Feb 05 2023", "Feb 06 2023", "Feb 07 2023", "Feb 08 2023", "Feb 09 2023", "Feb 10 2023", "Feb 11 2023", "Feb 12 2023", "Feb 13 2023", "Feb 14 2023", "Feb 15 2023", "Feb 16 2023", "Feb 17 2023", "Feb 18 2023", "Feb 19 2023", "Feb 20 2023","Feb 21 2023", "Feb 22 2023", "Feb 23 2023", "Feb 24 2023", "Feb 25 2023", "Feb 26 2023", "Feb 27 2023", "Feb 28 2023",
|
||||
"Mar 01 2023", "Mar 02 2023", "Mar 03 2023", "Mar 04 2023", "Mar 05 2023", "Mar 06 2023", "Mar 07 2023", "Mar 08 2023", "Mar 09 2023", "Mar 10 2023", "Mar 11 2023", "Mar 12 2023", "Mar 13 2023", "Mar 14 2023", "Mar 15 2023", "Mar 16 2023", "Mar 17 2023", "Mar 18 2023", "Mar 19 2023", "Mar 20 2023","Mar 21 2023", "Mar 22 2023", "Mar 23 2023", "Mar 24 2023", "Mar 25 2023", "Mar 26 2023", "Mar 27 2023", "Mar 28 2023", "Mar 29 2023", "Mar 30 2023", "Mar 31 2023",
|
||||
"Apr 01 2023", "Apr 02 2023", "Apr 03 2023", "Apr 04 2023", "Apr 05 2023", "Apr 06 2023", "Apr 07 2023", "Apr 08 2023", "Apr 09 2023", "Apr 10 2023", "Apr 11 2023", "Apr 12 2023", "Apr 13 2023", "Apr 14 2023", "Apr 15 2023", "Apr 16 2023", "Apr 17 2023", "Apr 18 2023", "Apr 19 2023", "Apr 20 2023","Apr 21 2023", "Apr 22 2023", "Apr 23 2023", "Apr 24 2023", "Apr 25 2023", "Apr 26 2023", "Apr 27 2023", "Apr 28 2023", "Apr 29 2023", "Apr 30 2023",
|
||||
"May 01 2023", "May 02 2023", "May 03 2023", "May 04 2023", "May 05 2023", "May 06 2023", "May 07 2023", "May 08 2023", "May 09 2023", "May 10 2023", "May 11 2023", "May 12 2023", "May 13 2023", "May 14 2023", "May 15 2023", "May 16 2023", "May 17 2023", "May 18 2023", "May 19 2023", "May 20 2023","May 21 2023", "May 22 2023", "May 23 2023", "May 24 2023", "May 25 2023", "May 26 2023", "May 27 2023", "May 28 2023", "May 29 2023", "May 30 2023",
|
||||
]
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Date Picker
|
||||
if($('#dashboardDate').length) {
|
||||
flatpickr("#dashboardDate", {
|
||||
wrap: true,
|
||||
dateFormat: "d-M-Y",
|
||||
defaultDate: "today",
|
||||
});
|
||||
}
|
||||
// Date Picker - END
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// New Customers Chart
|
||||
if($('#customersChart').length) {
|
||||
var options1 = {
|
||||
chart: {
|
||||
type: "line",
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
data: [3844, 3855, 3841, 3867, 3822, 3843, 3821, 3841, 3856, 3827, 3843]
|
||||
}],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: ["Jan 01 2023", "Jan 02 2023", "Jan 03 2023", "Jan 04 2023", "Jan 05 2023", "Jan 06 2023", "Jan 07 2023", "Jan 08 2023", "Jan 09 2023", "Jan 10 2023", "Jan 11 2023",],
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: "smooth"
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: [colors.primary],
|
||||
};
|
||||
new ApexCharts(document.querySelector("#customersChart"),options1).render();
|
||||
}
|
||||
// New Customers Chart - END
|
||||
|
||||
|
||||
|
||||
|
||||
// Orders Chart
|
||||
if($('#ordersChart').length) {
|
||||
var options2 = {
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 2,
|
||||
columnWidth: "60%"
|
||||
}
|
||||
},
|
||||
colors: [colors.primary],
|
||||
series: [{
|
||||
name: '',
|
||||
data: [36, 77, 52, 90, 74, 35, 55, 23, 47, 10, 63]
|
||||
}],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: ["Jan 01 2023", "Jan 02 2023", "Jan 03 2023", "Jan 04 2023", "Jan 05 2023", "Jan 06 2023", "Jan 07 2023", "Jan 08 2023", "Jan 09 2023", "Jan 10 2023", "Jan 11 2023",],
|
||||
},
|
||||
};
|
||||
new ApexCharts(document.querySelector("#ordersChart"),options2).render();
|
||||
}
|
||||
// Orders Chart - END
|
||||
|
||||
|
||||
|
||||
|
||||
// Growth Chart
|
||||
if($('#growthChart').length) {
|
||||
var options3 = {
|
||||
chart: {
|
||||
type: "line",
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: !0
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '',
|
||||
data: [41, 45, 44, 46, 52, 54, 43, 74, 82, 82, 89]
|
||||
}],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: ["Jan 01 2023", "Jan 02 2023", "Jan 03 2023", "Jan 04 2023", "Jan 05 2023", "Jan 06 2023", "Jan 07 2023", "Jan 08 2023", "Jan 09 2023", "Jan 10 2023", "Jan 11 2023",],
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: "smooth"
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
colors: [colors.primary],
|
||||
};
|
||||
new ApexCharts(document.querySelector("#growthChart"),options3).render();
|
||||
}
|
||||
// Growth Chart - END
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Revenue Chart
|
||||
if ($('#revenueChart').length) {
|
||||
var lineChartOptions = {
|
||||
chart: {
|
||||
type: "line",
|
||||
height: '400',
|
||||
parentHeightOffset: 0,
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
colors: [colors.primary, colors.danger, colors.warning],
|
||||
grid: {
|
||||
padding: {
|
||||
bottom: -4,
|
||||
},
|
||||
borderColor: colors.gridBorder,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Revenue",
|
||||
data: revenueChartData
|
||||
},
|
||||
],
|
||||
xaxis: {
|
||||
type: "datetime",
|
||||
categories: revenueChartCategories,
|
||||
lines: {
|
||||
show: true
|
||||
},
|
||||
axisBorder: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
axisTicks: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
crosshairs: {
|
||||
stroke: {
|
||||
color: colors.secondary,
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Revenue ( $1000 x )',
|
||||
style:{
|
||||
size: 9,
|
||||
color: colors.muted
|
||||
}
|
||||
},
|
||||
tickAmount: 4,
|
||||
tooltip: {
|
||||
enabled: true
|
||||
},
|
||||
crosshairs: {
|
||||
stroke: {
|
||||
color: colors.secondary,
|
||||
},
|
||||
},
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
stroke: {
|
||||
width: 2,
|
||||
curve: "straight",
|
||||
},
|
||||
};
|
||||
var apexLineChart = new ApexCharts(document.querySelector("#revenueChart"), lineChartOptions);
|
||||
apexLineChart.render();
|
||||
}
|
||||
// Revenue Chart - END
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Monthly Sales Chart
|
||||
if($('#monthlySalesChart').length) {
|
||||
var options = {
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: '318',
|
||||
parentHeightOffset: 0,
|
||||
foreColor: colors.bodyColor,
|
||||
background: colors.cardBg,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
},
|
||||
theme: {
|
||||
mode: 'light'
|
||||
},
|
||||
tooltip: {
|
||||
theme: 'light'
|
||||
},
|
||||
colors: [colors.primary],
|
||||
fill: {
|
||||
opacity: .9
|
||||
} ,
|
||||
grid: {
|
||||
padding: {
|
||||
bottom: -4
|
||||
},
|
||||
borderColor: colors.gridBorder,
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Sales',
|
||||
data: [152,109,93,113,126,161,188,143,102,113,116,124]
|
||||
}],
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: ['01/01/2023','02/01/2023','03/01/2023','04/01/2023','05/01/2023','06/01/2023','07/01/2023', '08/01/2023','09/01/2023','10/01/2023', '11/01/2023', '12/01/2023'],
|
||||
axisBorder: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
axisTicks: {
|
||||
color: colors.gridBorder,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Number of Sales',
|
||||
style:{
|
||||
size: 9,
|
||||
color: colors.muted
|
||||
}
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
position: "top",
|
||||
horizontalAlign: 'center',
|
||||
fontFamily: fontFamily,
|
||||
itemMargin: {
|
||||
horizontal: 8,
|
||||
vertical: 0
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
width: 0
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
fontSize: '10px',
|
||||
fontFamily: fontFamily,
|
||||
},
|
||||
offsetY: -27
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: "50%",
|
||||
borderRadius: 4,
|
||||
dataLabels: {
|
||||
position: 'top',
|
||||
orientation: 'vertical',
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
var apexBarChart = new ApexCharts(document.querySelector("#monthlySalesChart"), options);
|
||||
apexBarChart.render();
|
||||
}
|
||||
// Monthly Sales Chart - END
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Cloud Storage Chart
|
||||
if ($('#storageChart').length) {
|
||||
var options = {
|
||||
chart: {
|
||||
height: 260,
|
||||
type: "radialBar"
|
||||
},
|
||||
series: [67],
|
||||
colors: [colors.primary],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
margin: 15,
|
||||
size: "70%"
|
||||
},
|
||||
track: {
|
||||
show: true,
|
||||
background: colors.light,
|
||||
strokeWidth: '100%',
|
||||
opacity: 1,
|
||||
margin: 5,
|
||||
},
|
||||
dataLabels: {
|
||||
showOn: "always",
|
||||
name: {
|
||||
offsetY: -11,
|
||||
show: true,
|
||||
color: colors.muted,
|
||||
fontSize: "13px"
|
||||
},
|
||||
value: {
|
||||
color: colors.bodyColor,
|
||||
fontSize: "30px",
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
stroke: {
|
||||
lineCap: "round",
|
||||
},
|
||||
labels: ["Storage Used"]
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#storageChart"), options);
|
||||
chart.render();
|
||||
}
|
||||
// Cloud Storage Chart - END
|
||||
|
||||
|
||||
});
|
||||
30
public/assets/js/data-table.js
Executable file
30
public/assets/js/data-table.js
Executable file
@ -0,0 +1,30 @@
|
||||
// npm package: datatables.net-bs5
|
||||
// github link: https://github.com/DataTables/Dist-DataTables-Bootstrap5
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
$(function() {
|
||||
$('#dataTableExample').DataTable({
|
||||
"aLengthMenu": [
|
||||
[10, 30, 50, -1],
|
||||
[10, 30, 50, "All"]
|
||||
],
|
||||
"iDisplayLength": 10,
|
||||
"language": {
|
||||
search: ""
|
||||
}
|
||||
});
|
||||
$('#dataTableExample').each(function() {
|
||||
var datatable = $(this);
|
||||
// SEARCH - Add the placeholder for Search and Turn this into in-line form control
|
||||
var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
|
||||
search_input.attr('placeholder', 'Search');
|
||||
search_input.removeClass('form-control-sm');
|
||||
// LENGTH - Inline-Form control
|
||||
var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
|
||||
length_sel.removeClass('form-control-sm');
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
10
public/assets/js/demo.js
Executable file
10
public/assets/js/demo.js
Executable file
@ -0,0 +1,10 @@
|
||||
(function($) {
|
||||
'use strict';
|
||||
$(function() {
|
||||
|
||||
if($('.perfect-scrollbar-example').length) {
|
||||
var scrollbarExample = new PerfectScrollbar('.perfect-scrollbar-example');
|
||||
}
|
||||
|
||||
});
|
||||
})(jQuery);
|
||||
8
public/assets/js/dropify.js
Executable file
8
public/assets/js/dropify.js
Executable file
@ -0,0 +1,8 @@
|
||||
// npm package: dropify
|
||||
// github link: https://github.com/JeremyFagis/dropify
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
$('#myDropify').dropify();
|
||||
});
|
||||
10
public/assets/js/dropzone.js
Executable file
10
public/assets/js/dropzone.js
Executable file
@ -0,0 +1,10 @@
|
||||
// npm package: dropzone
|
||||
// github link: https://github.com/dropzone/dropzone
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
$("exampleDropzone").dropzone({
|
||||
url: 'nobleui.com'
|
||||
});
|
||||
});
|
||||
14
public/assets/js/easymde.js
Executable file
14
public/assets/js/easymde.js
Executable file
@ -0,0 +1,14 @@
|
||||
// npm package: easymde
|
||||
// github link: https://github.com/Ionaru/easy-markdown-editor
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
/*easymde editor*/
|
||||
if ($("#easyMdeExample").length) {
|
||||
var easymde = new EasyMDE({
|
||||
element: $("#easyMdeExample")[0]
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
15
public/assets/js/email.js
Executable file
15
public/assets/js/email.js
Executable file
@ -0,0 +1,15 @@
|
||||
$(function() {
|
||||
'use strict'
|
||||
|
||||
if ($(".compose-multiple-select").length) {
|
||||
$(".compose-multiple-select").select2();
|
||||
}
|
||||
|
||||
/*easymde editor*/
|
||||
if ($("#easyMdeEditor").length) {
|
||||
var easymde = new EasyMDE({
|
||||
element: $("#easyMdeEditor")[0]
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
26
public/assets/js/flatpickr.js
Executable file
26
public/assets/js/flatpickr.js
Executable file
@ -0,0 +1,26 @@
|
||||
// npm package: flatpickr
|
||||
// github link: https://github.com/flatpickr/flatpickr
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
// date picker
|
||||
if($('#flatpickr-date').length) {
|
||||
flatpickr("#flatpickr-date", {
|
||||
wrap: true,
|
||||
dateFormat: "Y-m-d",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// time picker
|
||||
if($('#flatpickr-time').length) {
|
||||
flatpickr("#flatpickr-time", {
|
||||
wrap: true,
|
||||
enableTime: true,
|
||||
noCalendar: true,
|
||||
dateFormat: "H:i",
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
92
public/assets/js/form-validation.js
Executable file
92
public/assets/js/form-validation.js
Executable file
@ -0,0 +1,92 @@
|
||||
// npm package: jquery-validation
|
||||
// github link: https://github.com/jquery-validation/jquery-validation
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
$.validator.setDefaults({
|
||||
submitHandler: function() {
|
||||
alert("submitted!");
|
||||
}
|
||||
});
|
||||
$(function() {
|
||||
// validate signup form on keyup and submit
|
||||
$("#signupForm").validate({
|
||||
rules: {
|
||||
name: {
|
||||
required: true,
|
||||
minlength: 3
|
||||
},
|
||||
email: {
|
||||
required: true,
|
||||
email: true
|
||||
},
|
||||
age_select: {
|
||||
required: true
|
||||
},
|
||||
gender_radio: {
|
||||
required: true
|
||||
},
|
||||
skill_check: {
|
||||
required: true
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
confirm_password: {
|
||||
required: true,
|
||||
minlength: 5,
|
||||
equalTo: "#password"
|
||||
},
|
||||
terms_agree: "required"
|
||||
},
|
||||
messages: {
|
||||
name: {
|
||||
required: "Please enter a name",
|
||||
minlength: "Name must consist of at least 3 characters"
|
||||
},
|
||||
email: "Please enter a valid email address",
|
||||
age_select: "Please select your age",
|
||||
skill_check: "Please select your skills",
|
||||
gender_radio: "Please select your gender",
|
||||
password: {
|
||||
required: "Please provide a password",
|
||||
minlength: "Your password must be at least 5 characters long"
|
||||
},
|
||||
confirm_password: {
|
||||
required: "Please confirm your password",
|
||||
minlength: "Your password must be at least 5 characters long",
|
||||
equalTo: "Please enter the same password as above"
|
||||
},
|
||||
terms_agree: "Please agree to terms and conditions"
|
||||
},
|
||||
errorPlacement: function(error, element) {
|
||||
error.addClass( "invalid-feedback" );
|
||||
|
||||
if (element.parent('.input-group').length) {
|
||||
error.insertAfter(element.parent());
|
||||
}
|
||||
else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
|
||||
error.insertAfter(element.parent().parent());
|
||||
}
|
||||
else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
|
||||
error.appendTo(element.parent().parent());
|
||||
}
|
||||
else {
|
||||
error.insertAfter(element);
|
||||
}
|
||||
},
|
||||
highlight: function(element, errorClass) {
|
||||
if ($(element).prop('type') != 'checkbox' && $(element).prop('type') != 'radio') {
|
||||
$( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
|
||||
}
|
||||
},
|
||||
unhighlight: function(element, errorClass) {
|
||||
if ($(element).prop('type') != 'checkbox' && $(element).prop('type') != 'radio') {
|
||||
$( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
227
public/assets/js/fullcalendar.js
Executable file
227
public/assets/js/fullcalendar.js
Executable file
@ -0,0 +1,227 @@
|
||||
// npm package: fullcalendar
|
||||
// github link: https://github.com/fullcalendar/fullcalendar
|
||||
|
||||
$(function() {
|
||||
|
||||
// sample calendar events data
|
||||
|
||||
var Draggable = FullCalendar.Draggable;
|
||||
var calendarEl = document.getElementById('fullcalendar');
|
||||
var containerEl = document.getElementById('external-events');
|
||||
|
||||
var curYear = moment().format('YYYY');
|
||||
var curMonth = moment().format('MM');
|
||||
|
||||
// Calendar Event Source
|
||||
var calendarEvents = {
|
||||
id: 1,
|
||||
backgroundColor: 'rgba(1,104,250, .15)',
|
||||
borderColor: '#0168fa',
|
||||
events: [
|
||||
{
|
||||
id: '1',
|
||||
start: curYear+'-'+curMonth+'-08T08:30:00',
|
||||
end: curYear+'-'+curMonth+'-08T13:00:00',
|
||||
title: 'Google Developers Meetup',
|
||||
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...',
|
||||
display: 'dot'
|
||||
},{
|
||||
id: '2',
|
||||
start: curYear+'-'+curMonth+'-10T09:00:00',
|
||||
end: curYear+'-'+curMonth+'-10T17:00:00',
|
||||
title: 'Design/Code Review',
|
||||
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
|
||||
},{
|
||||
id: '3',
|
||||
start: curYear+'-'+curMonth+'-13T12:00:00',
|
||||
end: curYear+'-'+curMonth+'-13T18:00:00',
|
||||
title: 'Lifestyle Conference',
|
||||
description: 'Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi...'
|
||||
},{
|
||||
id: '4',
|
||||
start: curYear+'-'+curMonth+'-15T07:30:00',
|
||||
end: curYear+'-'+curMonth+'-15T15:30:00',
|
||||
title: 'Team Weekly Trip',
|
||||
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
|
||||
},{
|
||||
id: '5',
|
||||
start: curYear+'-'+curMonth+'-17T10:00:00',
|
||||
end: curYear+'-'+curMonth+'-19T15:00:00',
|
||||
title: 'DJ Festival',
|
||||
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
|
||||
},{
|
||||
id: '6',
|
||||
start: curYear+'-'+curMonth+'-08T13:00:00',
|
||||
end: curYear+'-'+curMonth+'-08T18:30:00',
|
||||
title: 'Carl Henson\'s Wedding',
|
||||
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Birthday Events Source
|
||||
var birthdayEvents = {
|
||||
id: 2,
|
||||
backgroundColor: 'rgba(16,183,89, .25)',
|
||||
borderColor: '#10b759',
|
||||
events: [
|
||||
{
|
||||
id: '7',
|
||||
start: curYear+'-'+curMonth+'-01T18:00:00',
|
||||
end: curYear+'-'+curMonth+'-01T23:30:00',
|
||||
title: 'Jensen Birthday',
|
||||
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
start: curYear+'-'+curMonth+'-21T15:00:00',
|
||||
end: curYear+'-'+curMonth+'-21T21:00:00',
|
||||
title: 'Carl\'s Birthday',
|
||||
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
start: curYear+'-'+curMonth+'-23T15:00:00',
|
||||
end: curYear+'-'+curMonth+'-23T21:00:00',
|
||||
title: 'Yaretzi\'s Birthday',
|
||||
description: 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis az pede mollis...'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
var holidayEvents = {
|
||||
id: 3,
|
||||
backgroundColor: 'rgba(241,0,117,.25)',
|
||||
borderColor: '#f10075',
|
||||
events: [
|
||||
{
|
||||
id: '10',
|
||||
start: curYear+'-'+curMonth+'-04',
|
||||
end: curYear+'-'+curMonth+'-06',
|
||||
title: 'Feast Day'
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
start: curYear+'-'+curMonth+'-26',
|
||||
end: curYear+'-'+curMonth+'-27',
|
||||
title: 'Memorial Day'
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
start: curYear+'-'+curMonth+'-28',
|
||||
end: curYear+'-'+curMonth+'-29',
|
||||
title: 'Veteran\'s Day'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var discoveredEvents = {
|
||||
id: 4,
|
||||
backgroundColor: 'rgba(0,204,204,.25)',
|
||||
borderColor: '#00cccc',
|
||||
events: [
|
||||
{
|
||||
id: '13',
|
||||
start: curYear+'-'+curMonth+'-17T08:00:00',
|
||||
end: curYear+'-'+curMonth+'-18T11:00:00',
|
||||
title: 'Web Design Workshop Seminar'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var meetupEvents = {
|
||||
id: 5,
|
||||
backgroundColor: 'rgba(91,71,251,.2)',
|
||||
borderColor: '#5b47fb',
|
||||
events: [
|
||||
{
|
||||
id: '14',
|
||||
start: curYear+'-'+curMonth+'-03',
|
||||
end: curYear+'-'+curMonth+'-05',
|
||||
title: 'UI/UX Meetup Conference'
|
||||
},
|
||||
{
|
||||
id: '15',
|
||||
start: curYear+'-'+curMonth+'-18',
|
||||
end: curYear+'-'+curMonth+'-20',
|
||||
title: 'Angular Conference Meetup'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
var otherEvents = {
|
||||
id: 6,
|
||||
backgroundColor: 'rgba(253,126,20,.25)',
|
||||
borderColor: '#fd7e14',
|
||||
events: [
|
||||
{
|
||||
id: '16',
|
||||
start: curYear+'-'+curMonth+'-06',
|
||||
end: curYear+'-'+curMonth+'-08',
|
||||
title: 'My Rest Day'
|
||||
},
|
||||
{
|
||||
id: '17',
|
||||
start: curYear+'-'+curMonth+'-29',
|
||||
end: curYear+'-'+curMonth+'-31',
|
||||
title: 'My Rest Day'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
new Draggable(containerEl, {
|
||||
itemSelector: '.fc-event',
|
||||
eventData: function(eventEl) {
|
||||
return {
|
||||
title: eventEl.innerText
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// initialize the calendar
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
headerToolbar: {
|
||||
left: "prev,today,next",
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
|
||||
},
|
||||
editable: true,
|
||||
droppable: true, // this allows things to be dropped onto the calendar
|
||||
fixedWeekCount: true,
|
||||
// height: 300,
|
||||
initialView: 'dayGridMonth',
|
||||
timeZone: 'UTC',
|
||||
hiddenDays:[],
|
||||
navLinks: 'true',
|
||||
// weekNumbers: true,
|
||||
// weekNumberFormat: {
|
||||
// week:'numeric',
|
||||
// },
|
||||
dayMaxEvents: 2,
|
||||
events: [],
|
||||
eventSources: [calendarEvents, birthdayEvents, holidayEvents, discoveredEvents, meetupEvents, otherEvents],
|
||||
drop: function(info) {
|
||||
// remove the element from the "Draggable Events" list
|
||||
// info.draggedEl.parentNode.removeChild(info.draggedEl);
|
||||
},
|
||||
eventClick: function(info) {
|
||||
var eventObj = info.event;
|
||||
console.log(info);
|
||||
$('#modalTitle1').html(eventObj.title);
|
||||
$('#modalBody1').html(eventObj._def.extendedProps.description);
|
||||
$('#eventUrl').attr('href',eventObj.url);
|
||||
$('#fullCalModal').modal("show");
|
||||
},
|
||||
dateClick: function(info) {
|
||||
$("#createEventModal").modal("show");
|
||||
console.log(info);
|
||||
},
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
|
||||
|
||||
});
|
||||
10
public/assets/js/inputmask.js
Executable file
10
public/assets/js/inputmask.js
Executable file
@ -0,0 +1,10 @@
|
||||
// npm package: inputmask
|
||||
// github link: https://github.com/RobinHerbots/Inputmask
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
// initializing inputmask
|
||||
$(":input").inputmask();
|
||||
|
||||
})(jQuery);
|
||||
292
public/assets/js/jquery.flot.js
Executable file
292
public/assets/js/jquery.flot.js
Executable file
@ -0,0 +1,292 @@
|
||||
// npm package: jquery.flot
|
||||
// github link: https://github.com/flot/flot
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
|
||||
var colors = {
|
||||
primary : "#6571ff",
|
||||
secondary : "#7987a1",
|
||||
success : "#05a34a",
|
||||
info : "#66d1d1",
|
||||
warning : "#fbbc06",
|
||||
danger : "#ff3366",
|
||||
light : "#e9ecef",
|
||||
dark : "#060c17",
|
||||
muted : "#7987a1",
|
||||
gridBorder : "rgba(77, 138, 240, .15)",
|
||||
bodyColor : "#000",
|
||||
cardBg : "#fff"
|
||||
}
|
||||
|
||||
var fontFamily = "'Roboto', Helvetica, sans-serif"
|
||||
|
||||
|
||||
|
||||
//Line Chart
|
||||
$.plot($('#flotLine'), [
|
||||
{
|
||||
label: 'Visits',
|
||||
data: [
|
||||
[ 6, 196 ], [ 7, 175 ], [ 8, 212 ], [ 9, 247 ], [ 10, 152 ], [ 11, 225 ], [ 12, 155 ], [ 13, 203 ], [ 14, 166 ], [ 15, 151 ]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Returning visits',
|
||||
data: [
|
||||
[ 6, 49 ], [ 7, 56 ], [ 8, 30 ], [ 9, 29 ], [ 10, 66 ], [ 11, 2 ], [ 12, 2 ], [ 13, 8 ], [ 14, 34 ], [ 15, 63 ]
|
||||
]
|
||||
}
|
||||
], {
|
||||
series: {
|
||||
shadowSize: 0,
|
||||
lines: {
|
||||
show: true
|
||||
},
|
||||
points: {
|
||||
show: true,
|
||||
radius: 4
|
||||
}
|
||||
},
|
||||
|
||||
grid: {
|
||||
color: colors.bodyColor,
|
||||
borderColor: colors.gridBorder,
|
||||
borderWidth: 1,
|
||||
hoverable: true,
|
||||
clickable: true
|
||||
},
|
||||
|
||||
xaxis: { tickColor: colors.gridBorder, },
|
||||
yaxis: { tickColor: colors.gridBorder, },
|
||||
legend: { backgroundColor: colors.cardBg },
|
||||
tooltip: { show: true },
|
||||
colors: [colors.danger, colors.primary]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// Bar Chart
|
||||
$.plot($('#flotBar'), [
|
||||
{
|
||||
label: 'Visits',
|
||||
data: [
|
||||
[ 6, 156 ], [ 7, 195 ], [ 8, 171 ], [ 9, 211 ], [ 10, 150 ], [ 11, 169 ], [ 12, 173 ], [ 13, 200 ], [ 14, 233 ], [ 15, 161 ]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Returning visits',
|
||||
data: [
|
||||
[ 6, 24 ], [ 7, 20 ], [ 8, 31 ], [ 9, 4 ], [ 10, 92 ], [ 11, 87 ], [ 12, 28 ], [ 13, 21 ], [ 14, 80 ], [ 15, 76 ]
|
||||
]
|
||||
}
|
||||
], {
|
||||
series: {
|
||||
shadowSize: 0,
|
||||
bars: {
|
||||
show: true,
|
||||
barWidth: .6,
|
||||
align: 'center',
|
||||
lineWidth: 1,
|
||||
fill: 0.25
|
||||
}
|
||||
},
|
||||
|
||||
grid: {
|
||||
color: colors.bodyColor,
|
||||
borderColor: colors.gridBorder,
|
||||
borderWidth: 1,
|
||||
hoverable: true,
|
||||
clickable: true
|
||||
},
|
||||
|
||||
xaxis: { tickDecimals: 2, tickColor: colors.gridBorder },
|
||||
yaxis: { tickColor: colors.gridBorder },
|
||||
legend: { backgroundColor: colors.cardBg },
|
||||
|
||||
tooltip: { show: true },
|
||||
colors: [colors.danger, colors.primary]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// Area Chart
|
||||
$.plot($('#flotArea'), [
|
||||
{
|
||||
label: 'iPhone',
|
||||
data: [
|
||||
[ "2010.Q1", 35 ], [ '2010.Q2', 67 ], [ '2010.Q3', 13 ], [ '2010.Q4', 45 ]
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'iTouch',
|
||||
data: [
|
||||
[ '2010.Q1', 32 ], [ '2010.Q2', 49 ], [ '2010.Q3', 25 ], [ '2010.Q4', 57 ]
|
||||
]
|
||||
}
|
||||
], {
|
||||
series: {
|
||||
shadowSize: 0,
|
||||
lines: {
|
||||
show: true,
|
||||
fill: 0.15,
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
|
||||
grid: {
|
||||
color: colors.bodyColor,
|
||||
borderColor: colors.gridBorder,
|
||||
borderWidth: 1,
|
||||
hoverable: true,
|
||||
clickable: true
|
||||
},
|
||||
|
||||
xaxis: { mode: 'categories', tickColor: colors.gridBorder },
|
||||
yaxis: { tickColor: colors.gridBorder },
|
||||
legend: { backgroundColor: colors.cardBg },
|
||||
|
||||
tooltip: {
|
||||
show: true,
|
||||
content: '%s: %y'
|
||||
},
|
||||
|
||||
colors: [colors.danger, colors.primary]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// Pie Chart
|
||||
$.plot($('#flotPie'), [
|
||||
{ label: 'Series1', data: 77 },
|
||||
{ label: 'Series2', data: 81 },
|
||||
{ label: 'Series3', data: 46 },
|
||||
{ label: 'Series4', data: 35 },
|
||||
{ label: 'Series5', data: 79 },
|
||||
{ label: 'Series6', data: 84 },
|
||||
], {
|
||||
series: {
|
||||
shadowSize: 0,
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
innerRadius: 0.5,
|
||||
stroke: {
|
||||
color: colors.cardBg,
|
||||
width: 3
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
radius: 3 / 4,
|
||||
background: { opacity: 0.5 },
|
||||
|
||||
formatter: function(label, series) {
|
||||
return '<div style="font-size:11px;text-align:center;color:white;">' + Math.round(series.percent) + '%</div>';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
grid: {
|
||||
color: colors.bodyColor,
|
||||
borderColor: colors.gridBorder,
|
||||
borderWidth: 1,
|
||||
hoverable: true,
|
||||
clickable: true
|
||||
},
|
||||
|
||||
xaxis: { tickColor: colors.gridBorder },
|
||||
yaxis: { tickColor: colors.gridBorder },
|
||||
legend: { backgroundColor: colors.cardBg },
|
||||
colors: [colors.primary, colors.secondary, colors.danger, colors.warning, colors.info, colors.success]
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Real-Time Chart
|
||||
var data = [],
|
||||
totalPoints = 300;
|
||||
|
||||
function getRandomData() {
|
||||
|
||||
if (data.length > 0)
|
||||
data = data.slice(1);
|
||||
|
||||
// Do a random walk
|
||||
|
||||
while (data.length < totalPoints) {
|
||||
|
||||
var prev = data.length > 0 ? data[data.length - 1] : 50,
|
||||
y = prev + Math.random() * 10 - 5;
|
||||
|
||||
if (y < 0) {
|
||||
y = 0;
|
||||
} else if (y > 100) {
|
||||
y = 100;
|
||||
}
|
||||
|
||||
data.push(y);
|
||||
}
|
||||
|
||||
// Zip the generated y values with the x values
|
||||
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; ++i) {
|
||||
res.push([i, data[i]])
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
// Set up the control widget
|
||||
|
||||
var updateInterval = 30;
|
||||
if ($("#flotRealTime").length) {
|
||||
var plot = $.plot("#flotRealTime", [getRandomData()], {
|
||||
series: {
|
||||
shadowSize: 0, // Drawing is faster without shadows
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 1,
|
||||
fill: false,
|
||||
opacity: 0.1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
// show: false,
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 150
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(77, 138, 240, 1)',
|
||||
borderColor: colors.gridBorder,
|
||||
borderWidth: 1,
|
||||
hoverable: true,
|
||||
clickable: true
|
||||
},
|
||||
colors: [colors.primary]
|
||||
|
||||
});
|
||||
|
||||
function update() {
|
||||
|
||||
plot.setData([getRandomData()]);
|
||||
|
||||
// Since the axes don't change, we don't need to call plot.setupGrid()
|
||||
|
||||
plot.draw();
|
||||
setTimeout(update, updateInterval);
|
||||
}
|
||||
|
||||
update();
|
||||
}
|
||||
|
||||
});
|
||||
13
public/assets/js/peity.js
Executable file
13
public/assets/js/peity.js
Executable file
@ -0,0 +1,13 @@
|
||||
// npm package: peity
|
||||
// github link: https://github.com/benpickles/peity
|
||||
|
||||
$(function() {
|
||||
'use strict'
|
||||
|
||||
$('.peity-line').peity("line");
|
||||
$('.peity-bar').peity("bar");
|
||||
$('.peity-pie').peity("pie");
|
||||
$('.peity-donut').peity("donut");
|
||||
$('.peity-custom span').peity("donut");
|
||||
|
||||
});
|
||||
99
public/assets/js/pickr.js
Executable file
99
public/assets/js/pickr.js
Executable file
@ -0,0 +1,99 @@
|
||||
// npm package: @simonwep/pickr
|
||||
// github link: https://github.com/Simonwep/pickr
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
// Simple example, see optional options for more configuration.
|
||||
// Pickr1
|
||||
const pickr1 = Pickr.create({
|
||||
el: '#pickr_1',
|
||||
theme: 'classic', // or 'monolith', or 'nano',
|
||||
default: '#6571ff',
|
||||
|
||||
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,
|
||||
hsla: true,
|
||||
hsva: true,
|
||||
cmyk: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Pickr2
|
||||
const pickr2 = Pickr.create({
|
||||
el: '#pickr_2',
|
||||
theme: 'classic',
|
||||
default: '#05a34a',
|
||||
|
||||
swatches: [
|
||||
'rgba(244, 67, 54, 1)',
|
||||
'rgba(233, 30, 99, 0.95)',
|
||||
'rgba(156, 39, 176, 0.9)'
|
||||
],
|
||||
|
||||
components: {
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
interaction: {
|
||||
hex: true,
|
||||
rgba: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Pickr3
|
||||
const pickr3 = Pickr.create({
|
||||
el: '#pickr_3',
|
||||
theme: 'classic',
|
||||
default: '#66d1d1',
|
||||
|
||||
components: {
|
||||
preview: true,
|
||||
opacity: true,
|
||||
hue: true,
|
||||
interaction: {
|
||||
rgba: true,
|
||||
input: true,
|
||||
clear: true,
|
||||
save: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
13
public/assets/js/select2.js
Executable file
13
public/assets/js/select2.js
Executable file
@ -0,0 +1,13 @@
|
||||
// npm package: select2
|
||||
// github link: https://github.com/select2/select2
|
||||
|
||||
$(function() {
|
||||
'use strict'
|
||||
|
||||
if ($(".js-example-basic-single").length) {
|
||||
$(".js-example-basic-single").select2();
|
||||
}
|
||||
if ($(".js-example-basic-multiple").length) {
|
||||
$(".js-example-basic-multiple").select2();
|
||||
}
|
||||
});
|
||||
143
public/assets/js/sortablejs.js
Executable file
143
public/assets/js/sortablejs.js
Executable file
@ -0,0 +1,143 @@
|
||||
// npm package: sortablejs
|
||||
// github link: https://github.com/SortableJS/Sortable
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
|
||||
// Simple list example
|
||||
if ($("#simple-list").length) {
|
||||
var simpleList = document.querySelector("#simple-list");
|
||||
new Sortable(simpleList, {
|
||||
animation: 150,
|
||||
ghostClass: 'bg-light'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Handle example
|
||||
if ($("#handle-example").length) {
|
||||
var handleExample = document.querySelector("#handle-example");
|
||||
new Sortable(handleExample, {
|
||||
handle: '.handle', // handle's class
|
||||
animation: 150,
|
||||
ghostClass: 'bg-light'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Shared lists example
|
||||
if ($("#shared-list-left").length) {
|
||||
var sharedListLeft = document.querySelector("#shared-list-left");
|
||||
new Sortable(sharedListLeft, {
|
||||
group: 'shared', // set both lists to same group
|
||||
animation: 150,
|
||||
ghostClass: 'bg-light'
|
||||
});
|
||||
}
|
||||
if ($("#shared-list-right").length) {
|
||||
var sharedListRight = document.querySelector("#shared-list-right");
|
||||
new Sortable(sharedListRight, {
|
||||
group: 'shared', // set both lists to same group
|
||||
animation: 150,
|
||||
ghostClass: 'bg-light'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Cloning example
|
||||
if ($("#shared-list-2-left").length) {
|
||||
var sharedList2Left = document.querySelector("#shared-list-2-left");
|
||||
new Sortable(sharedList2Left, {
|
||||
group: {
|
||||
name: 'shared2',
|
||||
pull: 'clone' // To clone: set pull to 'clone'
|
||||
},
|
||||
animation: 150,
|
||||
ghostClass: 'bg-light'
|
||||
});
|
||||
}
|
||||
if ($("#shared-list-2-right").length) {
|
||||
var sharedList2Right = document.querySelector("#shared-list-2-right");
|
||||
new Sortable(sharedList2Right, {
|
||||
group: {
|
||||
name: 'shared2',
|
||||
pull: 'clone' // To clone: set pull to 'clone'
|
||||
},
|
||||
animation: 150,
|
||||
ghostClass: 'bg-light'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Disabling sorting example
|
||||
if ($("#shared-list-3-left").length) {
|
||||
var sharedList3Left = document.querySelector("#shared-list-3-left");
|
||||
new Sortable(sharedList3Left, {
|
||||
group: {
|
||||
name: 'shared3',
|
||||
pull: 'clone',
|
||||
put: false // Do not allow items to be put into this list
|
||||
},
|
||||
animation: 150,
|
||||
ghostClass: 'bg-light',
|
||||
sort: false // To disable sorting: set sort to false
|
||||
});
|
||||
}
|
||||
if ($("#shared-list-3-right").length) {
|
||||
var sharedList3Right = document.querySelector("#shared-list-3-right");
|
||||
new Sortable(sharedList3Right, {
|
||||
group: {
|
||||
name: 'shared3',
|
||||
},
|
||||
animation: 150,
|
||||
ghostClass: 'bg-light'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Filter example
|
||||
if ($("#filter-example").length) {
|
||||
var filterExample = document.querySelector("#filter-example");
|
||||
new Sortable(filterExample, {
|
||||
filter: '.filtered', // 'filtered' class is not draggable
|
||||
animation: 150,
|
||||
ghostClass: 'bg-light'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Grid example
|
||||
if ($("#grid-example").length) {
|
||||
var gridExample = document.querySelector("#grid-example");
|
||||
new Sortable(gridExample, {
|
||||
animation: 150,
|
||||
ghostClass: 'bg-light'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Nested example
|
||||
if ($("#nested-sortable").length) {
|
||||
var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
|
||||
|
||||
// Loop through each nested sortable element
|
||||
for (var i = 0; i < nestedSortables.length; i++) {
|
||||
new Sortable(nestedSortables[i], {
|
||||
group: 'nested',
|
||||
animation: 150,
|
||||
fallbackOnBody: true,
|
||||
swapThreshold: 0.65
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
54
public/assets/js/sparkline.js
Executable file
54
public/assets/js/sparkline.js
Executable file
@ -0,0 +1,54 @@
|
||||
// npm package: jquery-sparkline
|
||||
// github link: https://github.com/imsky/jquery.sparkline
|
||||
|
||||
$(function() {
|
||||
'use strict'
|
||||
|
||||
// Mouse speed chart start
|
||||
var mrefreshinterval = 500; // update display every 500ms
|
||||
var lastmousex=-1;
|
||||
var lastmousey=-1;
|
||||
var lastmousetime;
|
||||
var mousetravel = 0;
|
||||
var mpoints = [];
|
||||
var mpoints_max = 30;
|
||||
$('html').mousemove(function(e) {
|
||||
var mousex = e.pageX;
|
||||
var mousey = e.pageY;
|
||||
if (lastmousex > -1) {
|
||||
mousetravel += Math.max( Math.abs(mousex-lastmousex), Math.abs(mousey-lastmousey) );
|
||||
}
|
||||
lastmousex = mousex;
|
||||
lastmousey = mousey;
|
||||
});
|
||||
var mdraw = function() {
|
||||
var md = new Date();
|
||||
var timenow = md.getTime();
|
||||
if (lastmousetime && lastmousetime!=timenow) {
|
||||
var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
|
||||
mpoints.push(pps);
|
||||
if (mpoints.length > mpoints_max)
|
||||
mpoints.splice(0,1);
|
||||
mousetravel = 0;
|
||||
$('#mouseSpeedChart').sparkline(mpoints, { width: mpoints.length*2, tooltipSuffix: ' pixels per second', lineColor: 'rgb(101,113,255)' });
|
||||
}
|
||||
lastmousetime = timenow;
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
}
|
||||
// We could use setInterval instead, but I prefer to do it this way
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
// Mouse speed chart start
|
||||
|
||||
|
||||
$("#sparklineLine").sparkline([5,6,7,9,9,5,3,2,2,4,6,7,3,4,7,2,7,4,3,1,6,3,7 ], {type: 'line', width: '150', height: '50', fillColor: '', lineColor: 'rgb(255,51,102)'});
|
||||
$("#sparklineArea").sparkline([5,6,7,9,9,5,3,2,2,4,6,7,3,4,7,2,7,4,3,1,6,3,7 ], {type: 'line', width: '150', height: '50', fillColor: 'rgba(102,209,209,.3)', lineColor: 'rgb(102,209,209)'});
|
||||
$("#sparklineBar").sparkline([5,6,7,9,9,5,3,2,2,4,6,7,3,4,7,2,7,4,3,1,6,3,7 ], {type: 'bar', width: '150', height: '50', barColor: 'rgb(255,51,102)'});
|
||||
$("#sparklineBarStacked").sparkline([[5,2],[6,4],[9,2],[9,5],[5,2],[3,7],[2,7],[2,2],[4,3],[6,5],[7,3],[3,2],[4,9],[7,1],[2,2],[7,2],[4,4],[3,3],[1,9],[6,8],[3,2],[7,1] ], {type: 'bar', width: '150', height: '50',stackedBarColor: ['rgb(255,51,102)', "rgb(102,209,209)"]});
|
||||
$("#sparklineComposite").sparkline([5,6,9,9,5,3,2,2,4,6,7,3,4,7,2,7,4,3,1,6,3,7], {type: 'bar', width: '150', height: '50', barColor: 'rgb(255,51,102)'});
|
||||
$("#sparklineComposite").sparkline([2,4,2,5,2,7,7,2,3,5,3,2,9,1,2,2,4,3,9,8,2,1], {type: 'line', width: '150', height: '50', composite: true, fillColor: 'rgba(102,209,209,.3)', lineColor: 'rgb(102,209,209)'});
|
||||
$("#sparklineBoxplot").sparkline([5,6,7,9,9,5,3,2,2,4,6,7,3,4,7,2,7,4,3,1,6,3,7 ], {type: 'box', width: '150', height: '40', boxFillColor: "rgba(247, 126, 185, .3)", boxLineColor: "rgb(255,51,102)", whiskerColor: "rgb(255,51,102)"});
|
||||
$("#sparklinePie").sparkline([1,3,2], {type: 'pie', width: '150', height: '50', sliceColors: ['rgb(255,51,102)', 'rgb(102,209,209)', 'rgb(101,113,255)']});
|
||||
$("#sparklineBullet").sparkline([5,6,7,9,1], {type: 'bullet', width: '150', height: '50', performanceColor: 'rgb(255,51,102)', rangeColors: ['rgba(247, 126, 185, .1)', 'rgba(247, 126, 185, .2)', 'rgba(247, 126, 185, .3)']});
|
||||
|
||||
|
||||
});
|
||||
7
public/assets/js/spinner.js
Executable file
7
public/assets/js/spinner.js
Executable file
@ -0,0 +1,7 @@
|
||||
var pre = document.createElement("div");
|
||||
pre.innerHTML = '<div class="loader-wrapper"><div class="loader">Loading...</div></div>';
|
||||
document.body.insertBefore(pre, document.body.firstChild);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function(event) {
|
||||
document.body.className += " loaded"
|
||||
});
|
||||
144
public/assets/js/sweet-alert.js
Executable file
144
public/assets/js/sweet-alert.js
Executable file
@ -0,0 +1,144 @@
|
||||
// npm package: sweetalert2
|
||||
// github link: https://github.com/sweetalert2/sweetalert2
|
||||
|
||||
$(function() {
|
||||
|
||||
showSwal = function(type) {
|
||||
'use strict';
|
||||
if (type === 'basic') {
|
||||
swal.fire({
|
||||
text: 'Any fool can use a computer',
|
||||
confirmButtonText: 'Close',
|
||||
confirmButtonClass: 'btn btn-danger',
|
||||
})
|
||||
} else if (type === 'title-and-text') {
|
||||
Swal.fire(
|
||||
'The Internet?',
|
||||
'That thing is still around?',
|
||||
'question'
|
||||
)
|
||||
} else if (type === 'title-icon-text-footer') {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Oops...',
|
||||
text: 'Something went wrong!',
|
||||
footer: '<a href>Why do I have this issue?</a>'
|
||||
})
|
||||
} else if (type === 'custom-html') {
|
||||
Swal.fire({
|
||||
title: '<strong>HTML <u>example</u></strong>',
|
||||
icon: 'info',
|
||||
html:
|
||||
'You can use <b>bold text</b>, ' +
|
||||
'<a href="//github.com">links</a> ' +
|
||||
'and other HTML tags',
|
||||
showCloseButton: true,
|
||||
showCancelButton: true,
|
||||
focusConfirm: false,
|
||||
confirmButtonText:
|
||||
'<i class="fa fa-thumbs-up"></i> Great!',
|
||||
confirmButtonAriaLabel: 'Thumbs up, great!',
|
||||
cancelButtonText:
|
||||
'<i data-feather="thumbs-up"></i>',
|
||||
cancelButtonAriaLabel: 'Thumbs down',
|
||||
});
|
||||
feather.replace();
|
||||
} else if (type === 'custom-position') {
|
||||
Swal.fire({
|
||||
position: 'top-end',
|
||||
icon: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500
|
||||
})
|
||||
} else if (type === 'passing-parameter-execute-cancel') {
|
||||
const swalWithBootstrapButtons = Swal.mixin({
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success',
|
||||
cancelButton: 'btn btn-danger me-2'
|
||||
},
|
||||
buttonsStyling: false,
|
||||
})
|
||||
|
||||
swalWithBootstrapButtons.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonClass: 'me-2',
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonText: 'No, cancel!',
|
||||
reverseButtons: true
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
swalWithBootstrapButtons.fire(
|
||||
'Deleted!',
|
||||
'Your file has been deleted.',
|
||||
'success'
|
||||
)
|
||||
} else if (
|
||||
// Read more about handling dismissals
|
||||
result.dismiss === Swal.DismissReason.cancel
|
||||
) {
|
||||
swalWithBootstrapButtons.fire(
|
||||
'Cancelled',
|
||||
'Your imaginary file is safe :)',
|
||||
'error'
|
||||
)
|
||||
}
|
||||
})
|
||||
} else if (type === 'message-with-auto-close') {
|
||||
let timerInterval
|
||||
Swal.fire({
|
||||
title: 'Auto close alert!',
|
||||
html: 'I will close in <b></b> milliseconds.',
|
||||
timer: 2000,
|
||||
timerProgressBar: true,
|
||||
didOpen: () => {
|
||||
Swal.showLoading()
|
||||
timerInterval = setInterval(() => {
|
||||
const content = Swal.getHtmlContainer()
|
||||
if (content) {
|
||||
const b = content.querySelector('b')
|
||||
if (b) {
|
||||
b.textContent = Swal.getTimerLeft()
|
||||
}
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
willClose: () => {
|
||||
clearInterval(timerInterval)
|
||||
}
|
||||
}).then((result) => {
|
||||
/* Read more about handling dismissals below */
|
||||
if (result.dismiss === Swal.DismissReason.timer) {
|
||||
console.log('I was closed by the timer')
|
||||
}
|
||||
})
|
||||
} else if (type === 'message-with-custom-image') {
|
||||
Swal.fire({
|
||||
title: 'Sweet!',
|
||||
text: 'Modal with a custom image.',
|
||||
// imageUrl: 'https://unsplash.it/400/200',
|
||||
imageUrl: '../assets/images/others/placeholder.jpg',
|
||||
imageWidth: 400,
|
||||
imageHeight: 200,
|
||||
imageAlt: 'Custom image',
|
||||
})
|
||||
} else if (type === 'mixin') {
|
||||
const Toast = Swal.mixin({
|
||||
toast: true,
|
||||
position: 'top-end',
|
||||
showConfirmButton: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
});
|
||||
|
||||
Toast.fire({
|
||||
icon: 'success',
|
||||
title: 'Signed in successfully'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
17
public/assets/js/tags-input.js
Executable file
17
public/assets/js/tags-input.js
Executable file
@ -0,0 +1,17 @@
|
||||
// npm package: jquery-tags-input
|
||||
// github link: https://github.com/xoxco/jQuery-Tags-Input
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
$('#tags').tagsInput({
|
||||
'width': '100%',
|
||||
'height': '75%',
|
||||
'interactive': true,
|
||||
'defaultText': 'Add More',
|
||||
'removeWithBackspace': true,
|
||||
'minChars': 0,
|
||||
'maxChars': 20,
|
||||
'placeholderColor': '#666666'
|
||||
});
|
||||
});
|
||||
173
public/assets/js/template.js
Executable file
173
public/assets/js/template.js
Executable file
@ -0,0 +1,173 @@
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
$(function() {
|
||||
var body = $('body');
|
||||
var mainWrapper = $('.main-wrapper');
|
||||
var footer = $('footer');
|
||||
var sidebar = $('.sidebar');
|
||||
var navbar = $('.navbar').not('.top-navbar');
|
||||
|
||||
|
||||
|
||||
// Enable feather-icons with SVG markup
|
||||
feather.replace();
|
||||
|
||||
|
||||
// initialize clipboard plugin
|
||||
if ($('.btn-clipboard').length) {
|
||||
// Enabling tooltip to all clipboard buttons
|
||||
$('.btn-clipboard').attr('data-bs-toggle', 'tooltip').attr('title', 'Copy to clipboard');
|
||||
|
||||
var clipboard = new ClipboardJS('.btn-clipboard');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
console.log(e);
|
||||
e.trigger.innerHTML = 'copied';
|
||||
setTimeout(function() {
|
||||
e.trigger.innerHTML = 'copy';
|
||||
e.clearSelection();
|
||||
},700)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// initializing bootstrap tooltip
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
})
|
||||
|
||||
|
||||
// initializing bootstrap popover
|
||||
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
return new bootstrap.Popover(popoverTriggerEl)
|
||||
})
|
||||
|
||||
|
||||
// Applying perfect-scrollbar
|
||||
if ($('.sidebar .sidebar-body').length) {
|
||||
const sidebarBodyScroll = new PerfectScrollbar('.sidebar-body');
|
||||
}
|
||||
// commented beacuse of hang (scroll from dropdown.html with small height)
|
||||
// if ($('.content-nav-wrapper').length) {
|
||||
// const contentNavWrapper = new PerfectScrollbar('.content-nav-wrapper');
|
||||
// }
|
||||
|
||||
|
||||
// Close other submenu in sidebar on opening any
|
||||
sidebar.on('show.bs.collapse', '.collapse', function() {
|
||||
sidebar.find('.collapse.show').collapse('hide');
|
||||
});
|
||||
|
||||
|
||||
// Sidebar toggle to sidebar-folded
|
||||
$('.sidebar-toggler').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$('.sidebar-header .sidebar-toggler').toggleClass('active not-active');
|
||||
if (window.matchMedia('(min-width: 992px)').matches) {
|
||||
e.preventDefault();
|
||||
body.toggleClass('sidebar-folded');
|
||||
} else if (window.matchMedia('(max-width: 991px)').matches) {
|
||||
e.preventDefault();
|
||||
body.toggleClass('sidebar-open');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// commmented because of apex chart width issue in desktop (in lg not in xl)
|
||||
// // sidebar-folded on large devices
|
||||
// function iconSidebar(e) {
|
||||
// if (e.matches) {
|
||||
// body.addClass('sidebar-folded');
|
||||
// } else {
|
||||
// body.removeClass('sidebar-folded');
|
||||
// }
|
||||
// }
|
||||
// var desktopMedium = window.matchMedia('(min-width:992px) and (max-width: 1199px)');
|
||||
// desktopMedium.addListener(iconSidebar);
|
||||
// iconSidebar(desktopMedium);
|
||||
|
||||
|
||||
// Settings sidebar toggle
|
||||
$('.settings-sidebar-toggler').on('click', function(e) {
|
||||
$('body').toggleClass('settings-open');
|
||||
});
|
||||
|
||||
|
||||
// Sidebar theme settings
|
||||
$("input:radio[name=sidebarThemeSettings]").click(function() {
|
||||
$('body').removeClass('sidebar-light sidebar-dark');
|
||||
$('body').addClass($(this).val());
|
||||
});
|
||||
|
||||
|
||||
// open sidebar-folded when hover
|
||||
$(".sidebar .sidebar-body").hover(
|
||||
function () {
|
||||
if (body.hasClass('sidebar-folded')){
|
||||
body.addClass("open-sidebar-folded");
|
||||
}
|
||||
},
|
||||
function () {
|
||||
if (body.hasClass('sidebar-folded')){
|
||||
body.removeClass("open-sidebar-folded");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// close sidebar when click outside on mobile/table
|
||||
$(document).on('click touchstart', function(e){
|
||||
e.stopPropagation();
|
||||
|
||||
// closing of sidebar menu when clicking outside of it
|
||||
if (!$(e.target).closest('.sidebar-toggler').length) {
|
||||
var sidebar = $(e.target).closest('.sidebar').length;
|
||||
var sidebarBody = $(e.target).closest('.sidebar-body').length;
|
||||
if (!sidebar && !sidebarBody) {
|
||||
if ($('body').hasClass('sidebar-open')) {
|
||||
$('body').removeClass('sidebar-open');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//Horizontal menu in mobile
|
||||
$('[data-toggle="horizontal-menu-toggle"]').on("click", function() {
|
||||
$(".horizontal-menu .bottom-navbar").toggleClass("header-toggled");
|
||||
});
|
||||
// Horizontal menu navigation in mobile menu on click
|
||||
var navItemClicked = $('.horizontal-menu .page-navigation >.nav-item');
|
||||
navItemClicked.on("click", function(event) {
|
||||
if(window.matchMedia('(max-width: 991px)').matches) {
|
||||
if(!($(this).hasClass('show-submenu'))) {
|
||||
navItemClicked.removeClass('show-submenu');
|
||||
}
|
||||
$(this).toggleClass('show-submenu');
|
||||
}
|
||||
})
|
||||
|
||||
$(window).scroll(function() {
|
||||
if(window.matchMedia('(min-width: 992px)').matches) {
|
||||
var header = $('.horizontal-menu');
|
||||
if ($(window).scrollTop() >= 60) {
|
||||
$(header).addClass('fixed-on-scroll');
|
||||
} else {
|
||||
$(header).removeClass('fixed-on-scroll');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Prevent body scrolling while sidebar scroll
|
||||
$('.sidebar .sidebar-body').hover(function () {
|
||||
$('body').addClass('overflow-hidden');
|
||||
}, function () {
|
||||
$('body').removeClass('overflow-hidden');
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
})(jQuery);
|
||||
30
public/assets/js/tinymce.js
Executable file
30
public/assets/js/tinymce.js
Executable file
@ -0,0 +1,30 @@
|
||||
// npm package: tinymce
|
||||
// github link: https://github.com/tinymce/tinymce
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
//Tinymce editor
|
||||
if ($("#tinymceExample").length) {
|
||||
tinymce.init({
|
||||
selector: '#tinymceExample',
|
||||
height: 350,
|
||||
default_text_color: 'red',
|
||||
plugins: 'advlist autolink lists link image charmap preview anchor pagebreak searchreplace wordcount visualblocks visualchars code fullscreen',
|
||||
toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
|
||||
toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',
|
||||
image_advtab: true,
|
||||
templates: [{
|
||||
title: 'Test template 1',
|
||||
content: 'Test 1'
|
||||
},
|
||||
{
|
||||
title: 'Test template 2',
|
||||
content: 'Test 2'
|
||||
}
|
||||
],
|
||||
content_css: []
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
64
public/assets/js/typeahead.js
Executable file
64
public/assets/js/typeahead.js
Executable file
@ -0,0 +1,64 @@
|
||||
// npm package: typeahead.js
|
||||
// github link: https://github.com/twitter/typeahead.js
|
||||
|
||||
$(function() {
|
||||
'use strict'
|
||||
|
||||
var substringMatcher = function(strs) {
|
||||
return function findMatches(q, cb) {
|
||||
var matches, substringRegex;
|
||||
|
||||
// an array that will be populated with substring matches
|
||||
matches = [];
|
||||
|
||||
// regex used to determine if a string contains the substring `q`
|
||||
var substrRegex = new RegExp(q, 'i');
|
||||
|
||||
// iterate through the pool of strings and for any string that
|
||||
// contains the substring `q`, add it to the `matches` array
|
||||
for (var i = 0; i < strs.length; i++) {
|
||||
if (substrRegex.test(strs[i])) {
|
||||
matches.push(strs[i]);
|
||||
}
|
||||
}
|
||||
|
||||
cb(matches);
|
||||
};
|
||||
};
|
||||
|
||||
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
|
||||
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
|
||||
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
|
||||
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
|
||||
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
|
||||
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
|
||||
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
|
||||
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
|
||||
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
|
||||
];
|
||||
|
||||
$('#the-basics .typeahead').typeahead({
|
||||
hint: true,
|
||||
highlight: true,
|
||||
minLength: 1
|
||||
}, {
|
||||
name: 'states',
|
||||
source: substringMatcher(states)
|
||||
});
|
||||
// constructs the suggestion engine
|
||||
var states = new Bloodhound({
|
||||
datumTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
queryTokenizer: Bloodhound.tokenizers.whitespace,
|
||||
// `states` is an array of state names defined in "The Basics"
|
||||
local: states
|
||||
});
|
||||
|
||||
$('#bloodhound .typeahead').typeahead({
|
||||
hint: true,
|
||||
highlight: true,
|
||||
minLength: 1
|
||||
}, {
|
||||
name: 'states',
|
||||
source: states
|
||||
});
|
||||
});
|
||||
19
public/assets/js/wizard.js
Executable file
19
public/assets/js/wizard.js
Executable file
@ -0,0 +1,19 @@
|
||||
// npm package: jquery-steps
|
||||
// github link: https://github.com/rstaib/jquery-steps/
|
||||
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
$("#wizard").steps({
|
||||
headerTag: "h2",
|
||||
bodyTag: "section",
|
||||
transitionEffect: "slideLeft"
|
||||
});
|
||||
|
||||
$("#wizardVertical").steps({
|
||||
headerTag: "h2",
|
||||
bodyTag: "section",
|
||||
transitionEffect: "slideLeft",
|
||||
stepsOrientation: 'vertical'
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user