dev-chiefworks
489 lines
13 KiB
JavaScript
489 lines
13 KiB
JavaScript
/* ------------------------------------------------------------------------------
|
|
*
|
|
* # Tabbed user profile
|
|
*
|
|
* Specific JS code additions for tabbed user profile page
|
|
*
|
|
* Version: 1.0
|
|
* Latest update: Jan 1, 2017
|
|
*
|
|
* ---------------------------------------------------------------------------- */
|
|
|
|
$(function() {
|
|
|
|
|
|
// Charts
|
|
// ------------------------------
|
|
|
|
// Set paths
|
|
require.config({
|
|
paths: {
|
|
echarts: 'assets/js/plugins/visualization/echarts'
|
|
}
|
|
});
|
|
|
|
|
|
// Configuration
|
|
require(
|
|
[
|
|
'echarts',
|
|
'echarts/theme/limitless',
|
|
'echarts/chart/line',
|
|
'echarts/chart/bar'
|
|
],
|
|
|
|
|
|
// Charts setup
|
|
function (ec, limitless) {
|
|
|
|
// Init
|
|
var sales = ec.init(document.getElementById('sales'), limitless);
|
|
var visits = ec.init(document.getElementById('visits'), limitless);
|
|
var plans = ec.init(document.getElementById('plans'), limitless);
|
|
|
|
|
|
//
|
|
// Sales chart options
|
|
//
|
|
|
|
sales_options = {
|
|
|
|
// Setup grid
|
|
grid: {
|
|
x: 35,
|
|
x2: 15,
|
|
y: 35,
|
|
y2: 25
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
data:['Profit', 'Expenses', 'Income']
|
|
},
|
|
|
|
// Enable drag recalculate
|
|
calculable: true,
|
|
|
|
// Horizontal axis
|
|
xAxis: [{
|
|
type: 'value'
|
|
}],
|
|
|
|
// Vertical axis
|
|
yAxis: [{
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
}],
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
name: 'Profit',
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
position: 'inside'
|
|
}
|
|
}
|
|
},
|
|
data: [200, 170, 240, 244, 200, 220, 210]
|
|
},
|
|
{
|
|
name: 'Income',
|
|
type: 'bar',
|
|
stack: 'Total',
|
|
barWidth: 5,
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true
|
|
}
|
|
}
|
|
},
|
|
data: [320, 302, 341, 374, 390, 450, 420]
|
|
},
|
|
{
|
|
name: 'Expenses',
|
|
type: 'bar',
|
|
stack: 'Total',
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: true,
|
|
position: 'left'
|
|
}
|
|
}
|
|
},
|
|
data: [-120, -132, -101, -134, -190, -230, -210]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Plans chart options
|
|
//
|
|
|
|
// Text label options
|
|
var labelRight = {normal: {color: '#FF7043', label: {position: 'right'}}};
|
|
|
|
// Options
|
|
visits_options = {
|
|
|
|
// Setup grid
|
|
grid: {
|
|
x: 15,
|
|
x2: 15,
|
|
y: 0,
|
|
y2: 25,
|
|
borderWidth: 0
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: function(params) {
|
|
return params[0].seriesName + ': ' + params[0].value + ' €';
|
|
}
|
|
},
|
|
|
|
// Horizontal axis
|
|
xAxis: [{
|
|
type: 'value',
|
|
axisLine: {show: false},
|
|
splitLine: {show: false},
|
|
axisTick: {show: false}
|
|
}],
|
|
|
|
// Vertical axis
|
|
yAxis: [{
|
|
type: 'category',
|
|
axisLine: {show: false},
|
|
axisLabel: {show: false},
|
|
axisTick: {show: false},
|
|
splitLine: {
|
|
lineStyle:{
|
|
type:'dashed',
|
|
color: '#e5e5e5'
|
|
}
|
|
},
|
|
data : ['Sunday', 'Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday']
|
|
}],
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
name: 'Balance',
|
|
type: 'bar',
|
|
stack: 'Total',
|
|
barWidth: 20,
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#66BB6A',
|
|
barBorderRadius: 3,
|
|
label: {
|
|
show: true,
|
|
position: 'left',
|
|
formatter: '{b}',
|
|
textStyle: {
|
|
color: '#777'
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
barBorderRadius: 3
|
|
}
|
|
},
|
|
data: [
|
|
{value: -680, itemStyle: labelRight},
|
|
{value: -300, itemStyle: labelRight},
|
|
690,
|
|
900,
|
|
{value: -390, itemStyle: labelRight},
|
|
600,
|
|
{value: -120, itemStyle: labelRight}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Available time chart options
|
|
//
|
|
|
|
plans_options = {
|
|
|
|
// Setup grid
|
|
grid: {
|
|
x: 30,
|
|
x2: 10,
|
|
y: 35,
|
|
y2: 25
|
|
},
|
|
|
|
// Add tooltip
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
|
|
// Add legend
|
|
legend: {
|
|
data:['Booked hours', 'Available hours']
|
|
},
|
|
|
|
// Enable drag recalculate
|
|
calculable: true,
|
|
|
|
// Horizontal axis
|
|
xAxis: [{
|
|
type: 'category',
|
|
data : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
|
|
}],
|
|
|
|
// Vertical axis
|
|
yAxis: [{
|
|
type: 'value'
|
|
}],
|
|
|
|
// Add series
|
|
series: [
|
|
{
|
|
name: 'Booked hours',
|
|
type: 'bar',
|
|
data: [4, 8, 6, 4, 7, 5, 9],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#B0BEC5',
|
|
label: {
|
|
show: true,
|
|
textStyle: {
|
|
fontWeight: 500
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: 'Available hours',
|
|
type: 'bar',
|
|
data: [6, 2, 4, 6, 3, 5, 1],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#29B6F6',
|
|
label: {
|
|
show: true,
|
|
textStyle: {
|
|
fontWeight: 500
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
//
|
|
// Apply options
|
|
//
|
|
|
|
sales.setOption(sales_options);
|
|
visits.setOption(visits_options);
|
|
plans.setOption(plans_options);
|
|
|
|
|
|
//
|
|
// Resize chart
|
|
//
|
|
|
|
window.onresize = function () {
|
|
setTimeout(function (){
|
|
sales.resize();
|
|
visits.resize();
|
|
plans.resize();
|
|
}, 200);
|
|
}
|
|
|
|
|
|
// Resize in tabs
|
|
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
|
sales.resize();
|
|
visits.resize();
|
|
plans.resize();
|
|
});
|
|
}
|
|
);
|
|
|
|
|
|
|
|
// Form components
|
|
// ------------------------------
|
|
|
|
// Select2 selects
|
|
$('.select').select2({
|
|
minimumResultsForSearch: Infinity
|
|
});
|
|
|
|
|
|
// Styled file input
|
|
$(".file-styled").uniform({
|
|
fileButtonClass: 'action btn bg-warning'
|
|
});
|
|
|
|
|
|
// Styled checkboxes, radios
|
|
$(".styled").uniform({
|
|
radioClass: 'choice'
|
|
});
|
|
|
|
|
|
|
|
// Schedule
|
|
// ------------------------------
|
|
|
|
// Add events
|
|
var eventsColors = [
|
|
{
|
|
title: 'All Day Event',
|
|
start: '2014-11-01',
|
|
color: '#EF5350'
|
|
},
|
|
{
|
|
title: 'Long Event',
|
|
start: '2014-11-07',
|
|
end: '2014-11-10',
|
|
color: '#26A69A'
|
|
},
|
|
{
|
|
id: 999,
|
|
title: 'Repeating Event',
|
|
start: '2014-11-09T16:00:00',
|
|
color: '#26A69A'
|
|
},
|
|
{
|
|
id: 999,
|
|
title: 'Repeating Event',
|
|
start: '2014-11-16T16:00:00',
|
|
color: '#5C6BC0'
|
|
},
|
|
{
|
|
title: 'Conference',
|
|
start: '2014-11-11',
|
|
end: '2014-11-13',
|
|
color: '#546E7A'
|
|
},
|
|
{
|
|
title: 'Meeting',
|
|
start: '2014-11-12T10:30:00',
|
|
end: '2014-11-12T12:30:00',
|
|
color: '#546E7A'
|
|
},
|
|
{
|
|
title: 'Lunch',
|
|
start: '2014-11-12T12:00:00',
|
|
color: '#546E7A'
|
|
},
|
|
{
|
|
title: 'Meeting',
|
|
start: '2014-11-12T14:30:00',
|
|
color: '#546E7A'
|
|
},
|
|
{
|
|
title: 'Happy Hour',
|
|
start: '2014-11-12T17:30:00',
|
|
color: '#546E7A'
|
|
},
|
|
{
|
|
title: 'Dinner',
|
|
start: '2014-11-12T20:00:00',
|
|
color: '#546E7A'
|
|
},
|
|
{
|
|
title: 'Birthday Party',
|
|
start: '2014-11-13T07:00:00',
|
|
color: '#546E7A'
|
|
},
|
|
{
|
|
title: 'Click for Google',
|
|
url: 'http://google.com/',
|
|
start: '2014-11-28',
|
|
color: '#FF7043'
|
|
}
|
|
];
|
|
|
|
|
|
// Initialize calendar with options
|
|
$('.schedule').fullCalendar({
|
|
header: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'month,agendaWeek,agendaDay'
|
|
},
|
|
defaultDate: '2014-11-12',
|
|
editable: true,
|
|
events: eventsColors
|
|
});
|
|
|
|
|
|
// Render in hidden elements
|
|
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
|
$('.schedule').fullCalendar('render');
|
|
});
|
|
|
|
|
|
|
|
// Link row
|
|
// ------------------------------
|
|
|
|
// Initialize Row link plugin
|
|
$('tbody.rowlink').rowlink();
|
|
|
|
|
|
|
|
// Custom code
|
|
// ------------------------------
|
|
|
|
// Highlight row when checkbox is checked
|
|
$('.table-inbox').find('tr > td:first-child').find('input[type=checkbox]').on('change', function() {
|
|
if($(this).is(':checked')) {
|
|
$(this).parents('tr').addClass('warning');
|
|
}
|
|
else {
|
|
$(this).parents('tr').removeClass('warning');
|
|
}
|
|
});
|
|
|
|
// Grab first letter and insert to the icon
|
|
$(".table tr").each(function (i) {
|
|
|
|
// Title
|
|
var $title = $(this).find('.letter-icon-title'),
|
|
letter = $title.eq(0).text().charAt(0).toUpperCase();
|
|
|
|
// Icon
|
|
var $icon = $(this).find('.letter-icon');
|
|
$icon.eq(0).text(letter);
|
|
});
|
|
|
|
});
|