1101 lines
30 KiB
JavaScript
1101 lines
30 KiB
JavaScript
type = ['', 'info', 'success', 'warning', 'danger'];
|
|
|
|
demo = {
|
|
initCirclePercentage: function () {
|
|
$('#chartDashboard, #chartOrders, #chartNewVisitors, #chartSubscriptions, #chartDashboardDoc, #chartOrdersDoc').easyPieChart({
|
|
lineWidth: 6,
|
|
size: 160,
|
|
scaleColor: false,
|
|
trackColor: 'rgba(255,255,255,.25)',
|
|
barColor: '#FFFFFF',
|
|
animate: { duration: 5000, enabled: true },
|
|
});
|
|
},
|
|
|
|
initGoogleMaps: function () {
|
|
// Satellite Map
|
|
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
|
|
var mapOptions = {
|
|
zoom: 3,
|
|
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
|
|
center: myLatlng,
|
|
mapTypeId: google.maps.MapTypeId.SATELLITE,
|
|
};
|
|
|
|
var map = new google.maps.Map(document.getElementById('satelliteMap'), mapOptions);
|
|
|
|
var marker = new google.maps.Marker({
|
|
position: myLatlng,
|
|
title: 'Satellite Map!',
|
|
});
|
|
|
|
marker.setMap(map);
|
|
},
|
|
|
|
initSmallGoogleMaps: function () {
|
|
// Regular Map
|
|
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
|
|
var mapOptions = {
|
|
zoom: 8,
|
|
center: myLatlng,
|
|
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
|
|
};
|
|
|
|
var map = new google.maps.Map(document.getElementById('regularMap'), mapOptions);
|
|
|
|
var marker = new google.maps.Marker({
|
|
position: myLatlng,
|
|
title: 'Regular Map!',
|
|
});
|
|
|
|
marker.setMap(map);
|
|
|
|
// Custom Skin & Settings Map
|
|
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
|
|
var mapOptions = {
|
|
zoom: 13,
|
|
center: myLatlng,
|
|
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
|
|
disableDefaultUI: true, // a way to quickly hide all controls
|
|
zoomControl: true,
|
|
styles: [
|
|
{ featureType: 'water', stylers: [{ saturation: 43 }, { lightness: -11 }, { hue: '#0088ff' }] },
|
|
{ featureType: 'road', elementType: 'geometry.fill', stylers: [{ hue: '#ff0000' }, { saturation: -100 }, { lightness: 99 }] },
|
|
{ featureType: 'road', elementType: 'geometry.stroke', stylers: [{ color: '#808080' }, { lightness: 54 }] },
|
|
{ featureType: 'landscape.man_made', elementType: 'geometry.fill', stylers: [{ color: '#ece2d9' }] },
|
|
{ featureType: 'poi.park', elementType: 'geometry.fill', stylers: [{ color: '#ccdca1' }] },
|
|
{ featureType: 'road', elementType: 'labels.text.fill', stylers: [{ color: '#767676' }] },
|
|
{ featureType: 'road', elementType: 'labels.text.stroke', stylers: [{ color: '#ffffff' }] },
|
|
{ featureType: 'poi', stylers: [{ visibility: 'off' }] },
|
|
{ featureType: 'landscape.natural', elementType: 'geometry.fill', stylers: [{ visibility: 'on' }, { color: '#b8cb93' }] },
|
|
{ featureType: 'poi.park', stylers: [{ visibility: 'on' }] },
|
|
{ featureType: 'poi.sports_complex', stylers: [{ visibility: 'on' }] },
|
|
{ featureType: 'poi.medical', stylers: [{ visibility: 'on' }] },
|
|
{ featureType: 'poi.business', stylers: [{ visibility: 'simplified' }] },
|
|
],
|
|
};
|
|
|
|
var map = new google.maps.Map(document.getElementById('customSkinMap'), mapOptions);
|
|
|
|
var marker = new google.maps.Marker({
|
|
position: myLatlng,
|
|
title: 'Custom Skin & Settings Map!',
|
|
});
|
|
|
|
marker.setMap(map);
|
|
},
|
|
|
|
initVectorMap: function () {
|
|
var mapData = {
|
|
AU: 760,
|
|
BR: 550,
|
|
CA: 120,
|
|
DE: 1300,
|
|
FR: 540,
|
|
GB: 690,
|
|
GE: 200,
|
|
IN: 200,
|
|
RO: 600,
|
|
RU: 300,
|
|
US: 2920,
|
|
};
|
|
|
|
$('#worldMap').vectorMap({
|
|
map: 'world_mill_en',
|
|
backgroundColor: 'transparent',
|
|
zoomOnScroll: false,
|
|
regionStyle: {
|
|
initial: {
|
|
fill: '#e4e4e4',
|
|
'fill-opacity': 0.9,
|
|
stroke: 'none',
|
|
'stroke-width': 0,
|
|
'stroke-opacity': 0,
|
|
},
|
|
},
|
|
|
|
series: {
|
|
regions: [
|
|
{
|
|
values: mapData,
|
|
scale: ['#AAAAAA', '#444444'],
|
|
normalizeFunction: 'polynomial',
|
|
},
|
|
],
|
|
},
|
|
});
|
|
},
|
|
|
|
initFullScreenGoogleMap: function () {
|
|
var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
|
|
var mapOptions = {
|
|
zoom: 13,
|
|
center: myLatlng,
|
|
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
|
|
styles: [
|
|
{ featureType: 'water', stylers: [{ saturation: 43 }, { lightness: -11 }, { hue: '#0088ff' }] },
|
|
{ featureType: 'road', elementType: 'geometry.fill', stylers: [{ hue: '#ff0000' }, { saturation: -100 }, { lightness: 99 }] },
|
|
{ featureType: 'road', elementType: 'geometry.stroke', stylers: [{ color: '#808080' }, { lightness: 54 }] },
|
|
{ featureType: 'landscape.man_made', elementType: 'geometry.fill', stylers: [{ color: '#ece2d9' }] },
|
|
{ featureType: 'poi.park', elementType: 'geometry.fill', stylers: [{ color: '#ccdca1' }] },
|
|
{ featureType: 'road', elementType: 'labels.text.fill', stylers: [{ color: '#767676' }] },
|
|
{ featureType: 'road', elementType: 'labels.text.stroke', stylers: [{ color: '#ffffff' }] },
|
|
{ featureType: 'poi', stylers: [{ visibility: 'off' }] },
|
|
{ featureType: 'landscape.natural', elementType: 'geometry.fill', stylers: [{ visibility: 'on' }, { color: '#b8cb93' }] },
|
|
{ featureType: 'poi.park', stylers: [{ visibility: 'on' }] },
|
|
{ featureType: 'poi.sports_complex', stylers: [{ visibility: 'on' }] },
|
|
{ featureType: 'poi.medical', stylers: [{ visibility: 'on' }] },
|
|
{ featureType: 'poi.business', stylers: [{ visibility: 'simplified' }] },
|
|
],
|
|
};
|
|
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
|
|
|
|
var marker = new google.maps.Marker({
|
|
position: myLatlng,
|
|
title: 'Hello World!',
|
|
});
|
|
|
|
// To add the marker to the map, call setMap();
|
|
marker.setMap(map);
|
|
},
|
|
|
|
initOverviewDashboardDoc: function () {
|
|
/* **************** Chart Total Earnings - single line ******************** */
|
|
|
|
var dataPrice = {
|
|
labels: ['Jan', 'Feb', 'Mar', 'April', 'May', 'June'],
|
|
series: [[230, 340, 400, 300, 570, 500, 800]],
|
|
};
|
|
|
|
var optionsPrice = {
|
|
showPoint: false,
|
|
lineSmooth: true,
|
|
height: '210px',
|
|
axisX: {
|
|
showGrid: false,
|
|
showLabel: true,
|
|
},
|
|
axisY: {
|
|
offset: 40,
|
|
showGrid: false,
|
|
},
|
|
low: 0,
|
|
high: 'auto',
|
|
classNames: {
|
|
line: 'ct-line ct-green',
|
|
},
|
|
};
|
|
|
|
Chartist.Line('#chartTotalEarningsDoc', dataPrice, optionsPrice);
|
|
|
|
/* **************** Chart Subscriptions - single line ******************** */
|
|
|
|
var dataDays = {
|
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
|
series: [[60, 50, 30, 50, 70, 60, 90, 100]],
|
|
};
|
|
|
|
var optionsDays = {
|
|
showPoint: false,
|
|
lineSmooth: true,
|
|
height: '210px',
|
|
axisX: {
|
|
showGrid: false,
|
|
showLabel: true,
|
|
},
|
|
axisY: {
|
|
offset: 40,
|
|
showGrid: false,
|
|
},
|
|
low: 0,
|
|
high: 'auto',
|
|
classNames: {
|
|
line: 'ct-line ct-red',
|
|
},
|
|
};
|
|
|
|
Chartist.Line('#chartTotalSubscriptionsDoc', dataDays, optionsDays);
|
|
},
|
|
|
|
initOverviewDashboard: function () {
|
|
/* **************** Chart Total Earnings - single line ******************** */
|
|
|
|
var dataPrice = {
|
|
labels: ['Jan', 'Feb', 'Mar', 'April', 'May', 'June'],
|
|
series: [[230, 340, 400, 300, 570, 500, 800]],
|
|
};
|
|
|
|
var optionsPrice = {
|
|
showPoint: false,
|
|
lineSmooth: true,
|
|
height: '210px',
|
|
axisX: {
|
|
showGrid: false,
|
|
showLabel: true,
|
|
},
|
|
axisY: {
|
|
offset: 40,
|
|
showGrid: false,
|
|
},
|
|
low: 0,
|
|
high: 'auto',
|
|
classNames: {
|
|
line: 'ct-line ct-green',
|
|
},
|
|
};
|
|
|
|
Chartist.Line('#chartTotalEarnings', dataPrice, optionsPrice);
|
|
|
|
/* **************** Chart Subscriptions - single line ******************** */
|
|
|
|
var dataDays = {
|
|
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
|
series: [[60, 50, 30, 50, 70, 60, 90, 100]],
|
|
};
|
|
|
|
var optionsDays = {
|
|
showPoint: false,
|
|
lineSmooth: true,
|
|
height: '210px',
|
|
axisX: {
|
|
showGrid: false,
|
|
showLabel: true,
|
|
},
|
|
axisY: {
|
|
offset: 40,
|
|
showGrid: false,
|
|
},
|
|
low: 0,
|
|
high: 'auto',
|
|
classNames: {
|
|
line: 'ct-line ct-red',
|
|
},
|
|
};
|
|
|
|
Chartist.Line('#chartTotalSubscriptions', dataDays, optionsDays);
|
|
|
|
/* **************** Chart Total Downloads - single line ******************** */
|
|
|
|
var dataDownloads = {
|
|
labels: ['2009', '2010', '2011', '2012', '2013', '2014'],
|
|
series: [[1200, 1000, 3490, 8345, 3256, 2566]],
|
|
};
|
|
|
|
var optionsDownloads = {
|
|
showPoint: false,
|
|
lineSmooth: true,
|
|
height: '210px',
|
|
axisX: {
|
|
showGrid: false,
|
|
showLabel: true,
|
|
},
|
|
axisY: {
|
|
offset: 40,
|
|
showGrid: false,
|
|
},
|
|
low: 0,
|
|
high: 'auto',
|
|
classNames: {
|
|
line: 'ct-line ct-orange',
|
|
},
|
|
};
|
|
|
|
Chartist.Line('#chartTotalDownloads', dataDownloads, optionsDownloads);
|
|
},
|
|
|
|
initStatsDashboard: function () {
|
|
var dataSales = {
|
|
labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'],
|
|
series: [
|
|
[287, 385, 490, 562, 594, 626, 698, 895, 952],
|
|
[67, 152, 193, 240, 387, 435, 535, 642, 744],
|
|
[23, 113, 67, 108, 190, 239, 307, 410, 410],
|
|
],
|
|
};
|
|
|
|
var optionsSales = {
|
|
lineSmooth: false,
|
|
low: 0,
|
|
high: 1000,
|
|
showArea: true,
|
|
height: '245px',
|
|
axisX: {
|
|
showGrid: false,
|
|
},
|
|
lineSmooth: Chartist.Interpolation.simple({
|
|
divisor: 3,
|
|
}),
|
|
showLine: true,
|
|
showPoint: false,
|
|
};
|
|
|
|
var responsiveSales = [
|
|
[
|
|
'screen and (max-width: 640px)',
|
|
{
|
|
axisX: {
|
|
labelInterpolationFnc: function (value) {
|
|
return value[0];
|
|
},
|
|
},
|
|
},
|
|
],
|
|
];
|
|
|
|
Chartist.Line('#chartHours', dataSales, optionsSales, responsiveSales);
|
|
|
|
var data = {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
series: [
|
|
[542, 543, 520, 680, 653, 753, 326, 434, 568, 610, 756, 895],
|
|
[230, 293, 380, 480, 503, 553, 600, 664, 698, 710, 736, 795],
|
|
],
|
|
};
|
|
|
|
var options = {
|
|
seriesBarDistance: 10,
|
|
axisX: {
|
|
showGrid: false,
|
|
},
|
|
height: '245px',
|
|
};
|
|
|
|
var responsiveOptions = [
|
|
[
|
|
'screen and (max-width: 640px)',
|
|
{
|
|
seriesBarDistance: 5,
|
|
axisX: {
|
|
labelInterpolationFnc: function (value) {
|
|
return value[0];
|
|
},
|
|
},
|
|
},
|
|
],
|
|
];
|
|
|
|
Chartist.Line('#chartActivity', data, options, responsiveOptions);
|
|
|
|
Chartist.Pie('#chartPreferences', {
|
|
labels: ['62%', '32%', '6%'],
|
|
series: [62, 32, 6],
|
|
});
|
|
},
|
|
|
|
initChartsPage: function () {
|
|
/* **************** 24 Hours Performance - single line ******************** */
|
|
|
|
var dataPerformance = {
|
|
labels: ['6pm', '9pm', '11pm', '2am', '4am', '8am', '2pm', '5pm', '8pm', '11pm', '4am'],
|
|
series: [[1, 6, 8, 7, 4, 7, 8, 12, 16, 17, 14, 13]],
|
|
};
|
|
|
|
var optionsPerformance = {
|
|
showPoint: false,
|
|
lineSmooth: true,
|
|
height: '200px',
|
|
axisX: {
|
|
showGrid: false,
|
|
showLabel: true,
|
|
},
|
|
axisY: {
|
|
offset: 40,
|
|
},
|
|
low: 0,
|
|
high: 16,
|
|
height: '250px',
|
|
};
|
|
|
|
Chartist.Line('#chartPerformance', dataPerformance, optionsPerformance);
|
|
|
|
/* **************** 2014 Sales - Bar Chart ******************** */
|
|
|
|
var data = {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
series: [
|
|
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
|
|
[412, 243, 280, 580, 453, 353, 300, 364, 368, 410, 636, 695],
|
|
],
|
|
};
|
|
|
|
var options = {
|
|
seriesBarDistance: 10,
|
|
axisX: {
|
|
showGrid: false,
|
|
},
|
|
height: '250px',
|
|
};
|
|
|
|
var responsiveOptions = [
|
|
[
|
|
'screen and (max-width: 640px)',
|
|
{
|
|
seriesBarDistance: 5,
|
|
axisX: {
|
|
labelInterpolationFnc: function (value) {
|
|
return value[0];
|
|
},
|
|
},
|
|
},
|
|
],
|
|
];
|
|
|
|
Chartist.Bar('#chartActivity', data, options, responsiveOptions);
|
|
|
|
/* **************** NASDAQ: AAPL - single line with points ******************** */
|
|
|
|
var dataStock = {
|
|
labels: ["'07", "'08", "'09", "'10", "'11", "'12", "'13", "'14", "'15"],
|
|
series: [[22.2, 34.9, 42.28, 51.93, 62.21, 80.23, 62.21, 82.12, 102.5, 107.23]],
|
|
};
|
|
|
|
var optionsStock = {
|
|
lineSmooth: false,
|
|
height: '200px',
|
|
axisY: {
|
|
offset: 40,
|
|
labelInterpolationFnc: function (value) {
|
|
return '$' + value;
|
|
},
|
|
},
|
|
low: 10,
|
|
height: '250px',
|
|
high: 110,
|
|
classNames: {
|
|
point: 'ct-point ct-green',
|
|
line: 'ct-line ct-green',
|
|
},
|
|
};
|
|
|
|
Chartist.Line('#chartStock', dataStock, optionsStock);
|
|
|
|
/* **************** Views - barchart ******************** */
|
|
|
|
var dataViews = {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
series: [[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]],
|
|
};
|
|
|
|
var optionsViews = {
|
|
seriesBarDistance: 10,
|
|
classNames: {
|
|
bar: 'ct-bar',
|
|
},
|
|
axisX: {
|
|
showGrid: false,
|
|
},
|
|
height: '250px',
|
|
};
|
|
|
|
var responsiveOptionsViews = [
|
|
[
|
|
'screen and (max-width: 640px)',
|
|
{
|
|
seriesBarDistance: 5,
|
|
axisX: {
|
|
labelInterpolationFnc: function (value) {
|
|
return value[0];
|
|
},
|
|
},
|
|
},
|
|
],
|
|
];
|
|
|
|
Chartist.Bar('#chartViews', dataViews, optionsViews, responsiveOptionsViews);
|
|
},
|
|
|
|
showSwal: function (type) {
|
|
if (type == 'basic') {
|
|
swal({
|
|
title: "Here's a message!",
|
|
buttonsStyling: false,
|
|
confirmButtonClass: 'btn btn-success btn-fill',
|
|
});
|
|
} else if (type == 'title-and-text') {
|
|
swal({
|
|
title: "Here's a message!",
|
|
text: "It's pretty, isn't it?",
|
|
buttonsStyling: false,
|
|
confirmButtonClass: 'btn btn-info btn-fill',
|
|
});
|
|
} else if (type == 'success-message') {
|
|
swal({
|
|
title: 'Good job!',
|
|
text: 'You clicked the button!',
|
|
buttonsStyling: false,
|
|
confirmButtonClass: 'btn btn-success btn-fill',
|
|
type: 'success',
|
|
});
|
|
} else if (type == 'warning-message-and-confirmation') {
|
|
swal({
|
|
title: 'Are you sure?',
|
|
text: "You won't be able to revert this!",
|
|
type: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonClass: 'btn btn-success btn-fill',
|
|
cancelButtonClass: 'btn btn-danger btn-fill',
|
|
confirmButtonText: 'Yes, delete it!',
|
|
buttonsStyling: false,
|
|
}).then(function () {
|
|
swal({
|
|
title: 'Deleted!',
|
|
text: 'Your file has been deleted.',
|
|
type: 'success',
|
|
confirmButtonClass: 'btn btn-success btn-fill',
|
|
buttonsStyling: false,
|
|
});
|
|
});
|
|
} else if (type == 'warning-message-and-cancel') {
|
|
swal({
|
|
title: 'Are you sure?',
|
|
text: 'You will not be able to recover this imaginary file!',
|
|
type: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonText: 'Yes, delete it!',
|
|
cancelButtonText: 'No, keep it',
|
|
confirmButtonClass: 'btn btn-success btn-fill',
|
|
cancelButtonClass: 'btn btn-danger btn-fill',
|
|
buttonsStyling: false,
|
|
}).then(
|
|
function () {
|
|
swal({
|
|
title: 'Deleted!',
|
|
text: 'Your imaginary file has been deleted.',
|
|
type: 'success',
|
|
confirmButtonClass: 'btn btn-success btn-fill',
|
|
buttonsStyling: false,
|
|
});
|
|
},
|
|
function (dismiss) {
|
|
// dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
|
|
if (dismiss === 'cancel') {
|
|
swal({
|
|
title: 'Cancelled',
|
|
text: 'Your imaginary file is safe :)',
|
|
type: 'error',
|
|
confirmButtonClass: 'btn btn-info btn-fill',
|
|
buttonsStyling: false,
|
|
});
|
|
}
|
|
}
|
|
);
|
|
} else if (type == 'custom-html') {
|
|
swal({
|
|
title: 'HTML example',
|
|
buttonsStyling: false,
|
|
confirmButtonClass: 'btn btn-success btn-fill',
|
|
html: 'You can use <b>bold text</b>, ' + '<a href="http://github.com">links</a> ' + 'and other HTML tags',
|
|
});
|
|
} else if (type == 'auto-close') {
|
|
swal({ title: 'Auto close alert!', text: 'I will close in 2 seconds.', timer: 2000, showConfirmButton: false });
|
|
} else if (type == 'input-field') {
|
|
swal({
|
|
title: 'Input something',
|
|
html: '<div class="form-group">' + '<input id="input-field" type="text" class="form-control" />' + '</div>',
|
|
showCancelButton: true,
|
|
confirmButtonClass: 'btn btn-success btn-fill',
|
|
cancelButtonClass: 'btn btn-danger btn-fill',
|
|
buttonsStyling: false,
|
|
})
|
|
.then(function (result) {
|
|
swal({
|
|
type: 'success',
|
|
html: 'You entered: <strong>' + $('#input-field').val() + '</strong>',
|
|
confirmButtonClass: 'btn btn-success btn-fill',
|
|
buttonsStyling: false,
|
|
});
|
|
})
|
|
.catch(swal.noop);
|
|
}
|
|
},
|
|
|
|
checkFullPageBackgroundImage: function () {
|
|
$page = $('.full-page');
|
|
image_src = $page.data('image');
|
|
|
|
if (image_src !== undefined) {
|
|
image_container = '<div class="full-page-background" style="background-image: url(' + image_src + ') "/>';
|
|
$page.append(image_container);
|
|
}
|
|
},
|
|
|
|
initWizard: function () {
|
|
$(document).ready(function () {
|
|
var $validator = $('#wizardForm').validate({
|
|
rules: {
|
|
email: {
|
|
required: true,
|
|
email: true,
|
|
minlength: 5,
|
|
},
|
|
first_name: {
|
|
required: false,
|
|
minlength: 5,
|
|
},
|
|
last_name: {
|
|
required: false,
|
|
minlength: 5,
|
|
},
|
|
website: {
|
|
required: true,
|
|
minlength: 5,
|
|
url: true,
|
|
},
|
|
framework: {
|
|
required: false,
|
|
minlength: 4,
|
|
},
|
|
cities: {
|
|
required: true,
|
|
},
|
|
price: {
|
|
number: true,
|
|
},
|
|
},
|
|
});
|
|
|
|
// you can also use the nav-pills-[blue | azure | green | orange | red] for a different color of wizard
|
|
$('#wizardCard').bootstrapWizard({
|
|
tabClass: 'nav nav-pills',
|
|
nextSelector: '.btn-next',
|
|
previousSelector: '.btn-back',
|
|
onNext: function (tab, navigation, index) {
|
|
var $valid = $('#wizardForm').valid();
|
|
|
|
if (!$valid) {
|
|
$validator.focusInvalid();
|
|
return false;
|
|
}
|
|
},
|
|
onInit: function (tab, navigation, index) {
|
|
//check number of tabs and fill the entire row
|
|
var $total = navigation.find('li').length;
|
|
$width = 100 / $total;
|
|
|
|
$display_width = $(document).width();
|
|
|
|
if ($display_width < 600 && $total > 3) {
|
|
$width = 50;
|
|
}
|
|
|
|
navigation.find('li').css('width', $width + '%');
|
|
},
|
|
onTabClick: function (tab, navigation, index) {
|
|
// Disable the posibility to click on tabs
|
|
return false;
|
|
},
|
|
onTabShow: function (tab, navigation, index) {
|
|
var $total = navigation.find('li').length;
|
|
var $current = index + 1;
|
|
|
|
var wizard = navigation.closest('.card-wizard');
|
|
|
|
// If it's the last tab then hide the last button and show the finish instead
|
|
if ($current >= $total) {
|
|
$(wizard).find('.btn-next').hide();
|
|
$(wizard).find('.btn-finish').show();
|
|
} else if ($current == 1) {
|
|
$(wizard).find('.btn-back').hide();
|
|
} else {
|
|
$(wizard).find('.btn-back').show();
|
|
$(wizard).find('.btn-next').show();
|
|
$(wizard).find('.btn-finish').hide();
|
|
}
|
|
},
|
|
});
|
|
});
|
|
|
|
function onFinishWizard() {
|
|
//here you can do something, sent the form to server via ajax and show a success message with swal
|
|
|
|
swal('Good job!', 'You clicked the finish button!', 'success');
|
|
}
|
|
},
|
|
|
|
initFormExtendedSliders: function () {
|
|
// Sliders for demo purpose in refine cards section
|
|
var slider = document.getElementById('sliderRegular');
|
|
|
|
noUiSlider.create(slider, {
|
|
start: 40,
|
|
connect: [true, false],
|
|
range: {
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
});
|
|
|
|
var slider2 = document.getElementById('sliderDouble');
|
|
|
|
noUiSlider.create(slider2, {
|
|
start: [20, 60],
|
|
connect: true,
|
|
range: {
|
|
min: 0,
|
|
max: 100,
|
|
},
|
|
});
|
|
},
|
|
|
|
initFormExtendedDatetimepickers: function () {
|
|
$('.datetimepicker').datetimepicker({
|
|
icons: {
|
|
time: 'fa fa-clock-o',
|
|
date: 'fa fa-calendar',
|
|
up: 'fa fa-chevron-up',
|
|
down: 'fa fa-chevron-down',
|
|
previous: 'fa fa-chevron-left',
|
|
next: 'fa fa-chevron-right',
|
|
today: 'fa fa-screenshot',
|
|
clear: 'fa fa-trash',
|
|
close: 'fa fa-remove',
|
|
},
|
|
});
|
|
|
|
$('.datepicker').datetimepicker({
|
|
format: 'MM/DD/YYYY', //use this format if you want the 12hours timpiecker with AM/PM toggle
|
|
icons: {
|
|
time: 'fa fa-clock-o',
|
|
date: 'fa fa-calendar',
|
|
up: 'fa fa-chevron-up',
|
|
down: 'fa fa-chevron-down',
|
|
previous: 'fa fa-chevron-left',
|
|
next: 'fa fa-chevron-right',
|
|
today: 'fa fa-screenshot',
|
|
clear: 'fa fa-trash',
|
|
close: 'fa fa-remove',
|
|
},
|
|
});
|
|
|
|
$('.timepicker').datetimepicker({
|
|
// format: 'H:mm', // use this format if you want the 24hours timepicker
|
|
format: 'h:mm A', //use this format if you want the 12hours timpiecker with AM/PM toggle
|
|
icons: {
|
|
time: 'fa fa-clock-o',
|
|
date: 'fa fa-calendar',
|
|
up: 'fa fa-chevron-up',
|
|
down: 'fa fa-chevron-down',
|
|
previous: 'fa fa-chevron-left',
|
|
next: 'fa fa-chevron-right',
|
|
today: 'fa fa-screenshot',
|
|
clear: 'fa fa-trash',
|
|
close: 'fa fa-remove',
|
|
},
|
|
});
|
|
},
|
|
|
|
initFullCalendar: function () {
|
|
$calendar = $('#fullCalendar');
|
|
|
|
today = new Date();
|
|
y = today.getFullYear();
|
|
m = today.getMonth();
|
|
d = today.getDate();
|
|
|
|
$calendar.fullCalendar({
|
|
viewRender: function (view, element) {
|
|
// We make sure that we activate the perfect scrollbar when the view isn't on Month
|
|
if (view.name != 'month') {
|
|
$(element).find('.fc-scroller').perfectScrollbar();
|
|
}
|
|
},
|
|
header: {
|
|
left: 'title',
|
|
center: 'month,agendaWeek,agendaDay',
|
|
right: 'prev,next,today',
|
|
},
|
|
defaultDate: today,
|
|
selectable: true,
|
|
selectHelper: true,
|
|
views: {
|
|
month: {
|
|
// name of view
|
|
titleFormat: 'MMMM YYYY',
|
|
// other view-specific options here
|
|
},
|
|
week: {
|
|
titleFormat: ' MMMM D YYYY',
|
|
},
|
|
day: {
|
|
titleFormat: 'D MMM, YYYY',
|
|
},
|
|
},
|
|
|
|
select: function (start, end) {
|
|
// on select we show the Sweet Alert modal with an input
|
|
swal({
|
|
title: 'Create an Event',
|
|
html: '<div class="form-group">' + '<input class="form-control" placeholder="Event Title" id="input-field">' + '</div>',
|
|
showCancelButton: true,
|
|
confirmButtonClass: 'btn btn-success',
|
|
cancelButtonClass: 'btn btn-danger',
|
|
buttonsStyling: false,
|
|
}).then(function (result) {
|
|
var eventData;
|
|
event_title = $('#input-field').val();
|
|
|
|
if (event_title) {
|
|
eventData = {
|
|
title: event_title,
|
|
start: start,
|
|
end: end,
|
|
};
|
|
$calendar.fullCalendar('renderEvent', eventData, true); // stick? = true
|
|
}
|
|
|
|
$calendar.fullCalendar('unselect');
|
|
});
|
|
},
|
|
editable: true,
|
|
eventLimit: true, // allow "more" link when too many events
|
|
|
|
// color classes: [ event-blue | event-azure | event-green | event-orange | event-red ]
|
|
events: [
|
|
{
|
|
title: 'All Day Event',
|
|
start: new Date(y, m, 1),
|
|
className: 'event-default',
|
|
},
|
|
{
|
|
id: 999,
|
|
title: 'Repeating Event',
|
|
start: new Date(y, m, d - 4, 6, 0),
|
|
allDay: false,
|
|
className: 'event-rose',
|
|
},
|
|
{
|
|
id: 999,
|
|
title: 'Repeating Event',
|
|
start: new Date(y, m, d + 3, 6, 0),
|
|
allDay: false,
|
|
className: 'event-rose',
|
|
},
|
|
{
|
|
title: 'Meeting',
|
|
start: new Date(y, m, d - 1, 10, 30),
|
|
allDay: false,
|
|
className: 'event-green',
|
|
},
|
|
{
|
|
title: 'Lunch',
|
|
start: new Date(y, m, d + 7, 12, 0),
|
|
end: new Date(y, m, d + 7, 14, 0),
|
|
allDay: false,
|
|
className: 'event-red',
|
|
},
|
|
{
|
|
title: 'Md-pro Launch',
|
|
start: new Date(y, m, d - 2, 12, 0),
|
|
allDay: true,
|
|
className: 'event-azure',
|
|
},
|
|
{
|
|
title: 'Birthday Party',
|
|
start: new Date(y, m, d + 1, 19, 0),
|
|
end: new Date(y, m, d + 1, 22, 30),
|
|
allDay: false,
|
|
className: 'event-azure',
|
|
},
|
|
{
|
|
title: 'Click for Creative Tim',
|
|
start: new Date(y, m, 21),
|
|
end: new Date(y, m, 22),
|
|
url: 'http://www.creative-tim.com/',
|
|
className: 'event-orange',
|
|
},
|
|
{
|
|
title: 'Click for Google',
|
|
start: new Date(y, m, 21),
|
|
end: new Date(y, m, 22),
|
|
url: 'http://www.creative-tim.com/',
|
|
className: 'event-orange',
|
|
},
|
|
],
|
|
});
|
|
},
|
|
|
|
showNotification: function (from, align) {
|
|
color = Math.floor(Math.random() * 4 + 1);
|
|
|
|
$.notify(
|
|
{
|
|
icon: 'ti-gift',
|
|
message: 'Welcome to <b>Paper Dashboard</b> - a beautiful dashboard for every web developer.',
|
|
},
|
|
{
|
|
type: type[color],
|
|
timer: 4000,
|
|
placement: {
|
|
from: from,
|
|
align: align,
|
|
},
|
|
}
|
|
);
|
|
},
|
|
|
|
initDocumentationCharts: function () {
|
|
// init single simple line chart
|
|
var dataPerformance = {
|
|
labels: ['6pm', '9pm', '11pm', '2am', '4am', '8am', '2pm', '5pm', '8pm', '11pm', '4am'],
|
|
series: [[1, 6, 8, 7, 4, 7, 8, 12, 16, 17, 14, 13]],
|
|
};
|
|
|
|
var optionsPerformance = {
|
|
showPoint: false,
|
|
lineSmooth: true,
|
|
height: '200px',
|
|
axisX: {
|
|
showGrid: false,
|
|
showLabel: true,
|
|
},
|
|
axisY: {
|
|
offset: 40,
|
|
},
|
|
low: 0,
|
|
high: 16,
|
|
height: '250px',
|
|
};
|
|
|
|
Chartist.Line('#chartPerformance', dataPerformance, optionsPerformance);
|
|
|
|
// init single line with points chart
|
|
var dataStock = {
|
|
labels: ["'07", "'08", "'09", "'10", "'11", "'12", "'13", "'14", "'15"],
|
|
series: [[22.2, 34.9, 42.28, 51.93, 62.21, 80.23, 62.21, 82.12, 102.5, 107.23]],
|
|
};
|
|
|
|
var optionsStock = {
|
|
lineSmooth: false,
|
|
height: '200px',
|
|
axisY: {
|
|
offset: 40,
|
|
labelInterpolationFnc: function (value) {
|
|
return '$' + value;
|
|
},
|
|
},
|
|
low: 10,
|
|
height: '250px',
|
|
high: 110,
|
|
classNames: {
|
|
point: 'ct-point ct-green',
|
|
line: 'ct-line ct-green',
|
|
},
|
|
};
|
|
|
|
Chartist.Line('#chartStock', dataStock, optionsStock);
|
|
|
|
// init multiple lines chart
|
|
var dataSales = {
|
|
labels: ['9:00AM', '12:00AM', '3:00PM', '6:00PM', '9:00PM', '12:00PM', '3:00AM', '6:00AM'],
|
|
series: [
|
|
[287, 385, 490, 562, 594, 626, 698, 895, 952],
|
|
[67, 152, 193, 240, 387, 435, 535, 642, 744],
|
|
[23, 113, 67, 108, 190, 239, 307, 410, 410],
|
|
],
|
|
};
|
|
|
|
var optionsSales = {
|
|
lineSmooth: false,
|
|
low: 0,
|
|
high: 1000,
|
|
showArea: true,
|
|
height: '245px',
|
|
axisX: {
|
|
showGrid: false,
|
|
},
|
|
lineSmooth: Chartist.Interpolation.simple({
|
|
divisor: 3,
|
|
}),
|
|
showLine: true,
|
|
showPoint: false,
|
|
};
|
|
|
|
var responsiveSales = [
|
|
[
|
|
'screen and (max-width: 640px)',
|
|
{
|
|
axisX: {
|
|
labelInterpolationFnc: function (value) {
|
|
return value[0];
|
|
},
|
|
},
|
|
},
|
|
],
|
|
];
|
|
|
|
Chartist.Line('#chartHours', dataSales, optionsSales, responsiveSales);
|
|
|
|
// pie chart
|
|
Chartist.Pie('#chartPreferences', {
|
|
labels: ['62%', '32%', '6%'],
|
|
series: [62, 32, 6],
|
|
});
|
|
|
|
// bar chart
|
|
var dataViews = {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
series: [[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895]],
|
|
};
|
|
|
|
var optionsViews = {
|
|
seriesBarDistance: 10,
|
|
classNames: {
|
|
bar: 'ct-bar',
|
|
},
|
|
axisX: {
|
|
showGrid: false,
|
|
},
|
|
height: '250px',
|
|
};
|
|
|
|
var responsiveOptionsViews = [
|
|
[
|
|
'screen and (max-width: 640px)',
|
|
{
|
|
seriesBarDistance: 5,
|
|
axisX: {
|
|
labelInterpolationFnc: function (value) {
|
|
return value[0];
|
|
},
|
|
},
|
|
},
|
|
],
|
|
];
|
|
|
|
Chartist.Bar('#chartViews', dataViews, optionsViews, responsiveOptionsViews);
|
|
|
|
// multiple bars chart
|
|
var data = {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
|
series: [
|
|
[542, 543, 520, 680, 653, 753, 326, 434, 568, 610, 756, 895],
|
|
[230, 293, 380, 480, 503, 553, 600, 664, 698, 710, 736, 795],
|
|
],
|
|
};
|
|
|
|
var options = {
|
|
seriesBarDistance: 10,
|
|
axisX: {
|
|
showGrid: false,
|
|
},
|
|
height: '245px',
|
|
};
|
|
|
|
var responsiveOptions = [
|
|
[
|
|
'screen and (max-width: 640px)',
|
|
{
|
|
seriesBarDistance: 5,
|
|
axisX: {
|
|
labelInterpolationFnc: function (value) {
|
|
return value[0];
|
|
},
|
|
},
|
|
},
|
|
],
|
|
];
|
|
|
|
Chartist.Line('#chartActivity', data, options, responsiveOptions);
|
|
},
|
|
};
|