jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
506 lines (457 loc) • 16 kB
JavaScript
$(document).ready(function ()
{
"use strict";
var CONST_URL_SUFFIX = {
employeedropdown: 'employeedropdown',
salesgrid: 'salesgrid',
yearpiechart: 'yearpiechart',
monthpiechart: 'monthpiechart'
};
var CONST_URL_PREFIX = 'data.php';
var currentEmplyeeID = 1; // default value
var currentMonth = 1; // default value
var getEmployeeID = function (id)
{
id = id || currentEmplyeeID;
return id;
};
var getMonth = function (month)
{
month = month || currentMonth;
var exportMonth = month.toString().length > 1 ? "" + month : "0" + month;
return exportMonth;
};
var createElement = function (element)
{
element = element || 'div';
return document.createElement(element);
};
var theme = 'light';
var theme2 = 'dark';
var months = ["Q1", "Q2", "Q3", "Q4"];
var messageChartDescription = " ";
var monthsNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var clearOldData = false;
/*
* Generate Personal Info
*
* @param {String} name - fullname of the person.
* @param {String} pictureUrl
* @param {String} personalInfo
*/
function generatePersonalInfo(name, pictureUrl, personalInfo)
{
var domId = 'person';
var personContent = document.getElementById(domId);
if (clearOldData)
{
personContent.innerHTML = "";
}
var picture = document.createElement('div');
picture.className = 'personpicture';
picture.style.margin = 0;
var url = '../../../images/' + pictureUrl;
picture.style.background = "url('" + url + "')";
var personInfo = document.createElement('div');
personInfo.className = 'personinfo';
var personName = document.createElement('div');
personName.className = 'fullname';
personName.innerText = name;
var personalContacts = document.createElement('div');
personalContacts.className = 'contacts';
personalContacts.innerText = 'Phone: xxxx-xxx-xxx' +
' \nID: ' +
personalInfo;
personInfo.appendChild(personName);
personInfo.appendChild(personalContacts);
personContent.appendChild(picture);
personContent.appendChild(personInfo);
}
var sourceDropdownlist = {
datatype: "json",
datafields: [
{ name: 'fullname', type: 'string', map: 'employeeName' },
{ name: 'picture', type: 'string', map: 'employeePhoto' },
{ name: 'employeeId' }
],
url: CONST_URL_PREFIX
};
var dataAdapterDropdownlist = new $.jqx.dataAdapter(sourceDropdownlist, {
formatData: function (data)
{
// Default settings
$.extend(data, {
employeeid: getEmployeeID(), //'5',
month: getMonth(), //'07',
usedwidget: 'employeedropdown'
});
return data;
}
});
$('#dropdownlist').jqxDropDownList({
width: 250,
height: 30,
source: dataAdapterDropdownlist,
theme: theme2,
displayMember: 'fullname',
valueMember: 'employeeId',
placeHolder: "Please choose employee: ",
renderer: function (index, label, value)
{
var data = dataAdapterDropdownlist.getrecords();
var datarecord = data[index];
var imgurl = '../../../images/' + datarecord.picture;
var img = '<img height="50" width="45" src="' + imgurl + '"/>';
var table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + datarecord.fullname + " - ID: " + value + '</td></tr>' +
'</table>';
return table;
}
});
$('#dropdownlist').on('select', function (event)
{
if (event.args)
{
var item = event.args.item;
if (item)
{
currentMonth = 1;
var data = dataAdapterDropdownlist.getrecords();
var index = item.index;
var name = item.label;
var pictureUrl = data[index].picture;
var personalInfo = item.value;
generatePersonalInfo(name, pictureUrl, personalInfo);
clearOldData = true;
currentEmplyeeID = index + 1;
$('#monthCombobox').jqxComboBox({
selectedIndex: currentMonth - 1
});
refreshGrid();
refreshChart();
refreshPurchase();
isTurnOnDetails = false;
}
}
});
// Fill table amount
var purchaseFormFill = function (ordersValue, amountValue, period)
{
var descriptionVal = $('.total-val');
descriptionVal.text(period);
var ordersAmount = $('.orders-val');
ordersAmount.text(ordersValue);
var ordersText = $('.orders-text');
ordersText.text('Orders');
var amount = $('.amount-val');
amount.text('$' + amountValue.toFixed(2));
var amountText = $('.amount-text');
amountText.text('Amount');
};
/* Generate initial data loading */
purchaseFormFill(0, 0, months[currentMonth - 1]);
var amountFormFill = function (smallAmount, smallAmountMonth, bigAmount, bigAmountMonth, average)
{
if (!isTurnOnDetails)
{
var bigValueAmt = $('.big-value-amt');
bigValueAmt.text('$' + bigAmount.toFixed(2) + ' on ' + bigAmountMonth);
var smallValueAmt = $('.small-value-amt');
smallValueAmt.text('$' + smallAmount.toFixed(2) + ' on ' + smallAmountMonth);
var avgValueAmt = $('.avg-value-amt');
avgValueAmt.text('$' + average.toFixed(2) + '/month');
}
};
amountFormFill(0, '', 0, '', 0);
$('#monthCombobox').jqxComboBox({
source: months,
width: 150,
height: 30,
theme: theme,
dropDownHeight: '115px',
selectedIndex: currentMonth - 1
});
$('#monthCombobox').on('select', function (event)
{
var args = event.args;
if (args)
{
var index = args.index;
currentMonth = index + 1;
refreshGrid();
refreshPurchase();
}
});
var refreshPurchase = function ()
{
var allMonthsMember = months.length;
var orders = 0;
var amountValue = 0;
var source = {
datatype: "json",
datafields: [
{ name: 'ShippedDate', type: 'date' },
{ name: 'ShipAddress' },
{ name: 'Customer', type: 'string' },
{ name: 'Amount', type: 'number' }
],
url: CONST_URL_PREFIX
};
var dataAdapter = new $.jqx.dataAdapter(source, {
formatData: function (data)
{
$.extend(data, {
employeeid: getEmployeeID(),
month: getMonth(),
usedwidget: CONST_URL_SUFFIX.salesgrid
});
return data;
},
loadComplete: function (records)
{
var records = dataAdapter.records;
orders = records.length;
for (var j = 0; j < orders; j += 1)
{
amountValue += records[j].Amount;
}
purchaseFormFill(orders, amountValue, months[currentMonth - 1]);
}
});
dataAdapter.dataBind();
};
refreshPurchase();
var refreshGrid = function ()
{
$("#personalSalesGrid").jqxGrid('updatebounddata', 'cells');
};
var refreshChart = function (isMonthSettings)
{
if (isMonthSettings)
{
sourceChart.datafields = [
{ name: 'OrderID', type: 'string' },
{
name: 'Subtotal',
map: 'OrderTotal',
type: 'string'
}
];
isYearPiechartUsedwidget = false;
dataAdapterChart.dataBind();
chart.description = monthsNames[currentMonth].toUpperCase();
isYearPiechartUsedwidget = true;
} else
{
// Initial settings
chart.description = messageChartDescription;
chart.seriesGroups = [{
type: 'pie',
showLabels: true,
xAxis:
{
formatSettings: { prefix: 'OrderID ' }
},
series: [{
dataField: 'Subtotal',
displayText: 'OrderID',
labelRadius: '95%',
initialAngle: 15,
radius: '85%',
centerOffset: 0,
formatFunction: function (value, element)
{
return monthsNames[element] + ' $' + value.toFixed(2);
},
}]
}];
sourceChart.datafields = [
{ name: 'OrderID', type: 'string' },
{ name: 'Subtotal' }
];
dataAdapterChart.dataBind();
}
};
var arrayOfGridOrdersData = [];
var sourceGrid = {
datatype: "json",
datafields: [
{ name: 'ShippedDate', type: 'date' },
{ name: 'ShipAddress' },
{ name: 'Customer', type: 'string' },
{ name: 'Amount', type: 'number' }
],
beforeprocessing: function (data)
{
if (data)
{
for (var item in data)
{
arrayOfGridOrdersData[item] = data[item];
}
}
},
updaterow: function (rowid, rowdata, commit)
{
commit(true);
},
url: CONST_URL_PREFIX
};
var dataAdapterGrid = new $.jqx.dataAdapter(sourceGrid, {
formatData: function (data)
{
$.extend(data, {
employeeid: getEmployeeID(),
month: getMonth(),
usedwidget: CONST_URL_SUFFIX.salesgrid
});
return data;
},
autoBind: true
});
$('#personalSalesGrid').jqxGrid({
width: '100%',
theme: theme,
autoheight: true,
clipboard: false,
altrows: true,
rowsheight: 35,
pagermode: 'simple',
ready: function ()
{
var localizationobj = {};
localizationobj.thousandsseparator = "";
$("#personalSalesGrid").jqxGrid('localizestrings', localizationobj);
messageChartDescription = "for more information please click";
},
source: dataAdapterGrid,
columns: [
{
text: 'Date',
datafield: 'ShippedDate',
width: '15%',
cellsformat: 'MMM dd yyyy',
cellsalign: 'center'
},
{
width: '35%',
text: 'Ship Address',
datafield: 'ShipAddress',
cellsalign: 'center'
},
{
width: '15%',
text: 'Customer',
datafield: 'Customer',
cellsalign: 'center'
},
{
width: '35%',
text: 'Amount',
datafield: 'Amount',
cellsformat: 'c2',
cellsalign: 'right'
}
]
});
var sourceChart = {
datatype: 'json',
datafields: [
{ name: 'OrderID', type: 'string' },
{ name: 'OrderEmployeeId' },
{ name: 'OrderDate', type: 'date' },
{ name: 'Subtotal' }
],
url: CONST_URL_PREFIX
};
var isYearPiechartUsedwidget = true;
var dataAdapterChart = new $.jqx.dataAdapter(sourceChart, {
formatData: function (data)
{
$.extend(data, {
employeeid: getEmployeeID(),
month: getMonth(),
usedwidget: isYearPiechartUsedwidget ? CONST_URL_SUFFIX.yearpiechart : CONST_URL_SUFFIX.monthpiechart
});
return data;
},
beforeLoadComplete: function (records, original)
{
var bigAmount = -1;
var bigAmountMonth = '';
var smallAmount = Number.MAX_VALUE;
var smallAmountMonth = '';
var average = -1;
var sumAmount = 0;
// Because the field 'Subtotal' is a string and need to be normalized.
var newArray = [];
for (var i = 0; i < records.length; i++)
{
var currentItem = records[i];
var currentItemValue = currentItem.Subtotal;
if (currentItemValue > bigAmount)
{
bigAmount = currentItemValue;
bigAmountMonth = monthsNames[currentItem.uid];
}
if (currentItemValue < smallAmount)
{
smallAmount = currentItemValue;
smallAmountMonth = monthsNames[currentItem.uid];
}
sumAmount += currentItemValue;
newArray.push(currentItem);
}
average = sumAmount / records.length
amountFormFill(smallAmount, smallAmountMonth, bigAmount, bigAmountMonth, average);
return newArray;
}
});
var itemIndex = -1;
var settingsChart = {
title: " ",
backgroundColor: 'transparent',
titlePadding: {
top: 15,
left: 0, right: 0,
bottom: 10
},
enableAnimations: false,
showLegend: false,
showBorderLine: false,
source: dataAdapterChart,
showToolTips: false,
colorScheme: 'scheme01',
seriesGroups: [{
type: 'pie',
showLabels: true,
xAxis:
{
formatSettings: { prefix: 'OrderID ' }
},
series: [{
dataField: 'Subtotal',
displayText: 'OrderID',
labelRadius: '95%',
initialAngle: 15,
radius: '85%',
formatFunction: function (value, element)
{
return monthsNames[element] + ' $' + value.toFixed(2);
}
}]
}]
};
$('#personalSalesChart').jqxChart(settingsChart);
var chart = $('#personalSalesChart').jqxChart('getInstance');
var isTurnOnDetails = false;
setTimeout(function ()
{
var selectFirstEmployee = 0;
$("#dropdownlist").jqxDropDownList('selectIndex', selectFirstEmployee);
var item = $("#dropdownlist").jqxDropDownList('getItem', selectFirstEmployee);
if (!!item)
{
currentEmplyeeID = item.value;
}
}, 300);
});