/*================================================================================================================\
+
+ Project : GODATA-EICHER
+ Filename : Dashboard.js
+ Module Name : Tile Dashboard Module
+ Purpose : To show Tile Dashboard KPIs between 2 dates.
+ Coded By : Pankaj Khandal
+
+================================================================================================================*/
/**
* To show Tile Dashboard KPIs between 2 dates.
* @module Dashboard
*/
/**
* To show Tile Dashboard KPIs between 2 dates.
* @class TileDashboard
* @constructor
*/
/**
* Global References: To store Ajax Request's XHR object.
* @for TileDashboard
*/
var xhr_refreshDashboard = null;
var xhr_exportToCSV = null;
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
//
/**
* Global References: Setting countUp options (To change the gradient of tiles and slowly incresing the numbers on tiles)
* @for TileDashboard
*/
var options = {
useEasing: true, // toggle easing
useGrouping: true, // 1,000,000 vs 1000000
separator: '', // character to use as a separator
decimal: '.', // character to use as a decimal
};
var demo;
/**
* Global References: To store color-combinations to show gradient effect on tiles.
* @for TileDashboard
*/
var startingColor11 = 'rgb(47,128,227)', // dark blue color code
startingColor12 = 'rgb(109,192,254)', // light blue color code
endColor11 = 'rgb(200,36,27)', // red color code
endColor12 = 'rgb(254,112,69)', // red
startingColor21 = 'rgb(125,188,29)', // light green
startingColor22 = 'rgb(42,169,28)', // green
warningColor11 = 'rgb(249, 140, 29)',// yellow
warningColor21 = 'rgb(254, 180, 44)';// yellow
lightOcean = 'rgb(0, 171, 169)';
darkOcean = 'rgb(46, 98, 98)';
lightBlue = 'rgb(66, 146, 234)';
darkBlue = 'rgb(24, 57, 134)';
//========================== Drop down functionality ==================================================
/**
* common function for close all popup and remove active toolbutton class
* @method closeArea
* @for TileDashboard
*/
function closeArea() {
'use strict';
$(".toolPopupBoxJs").hide();
$("#divRegionPopup").hide();
$(".toolOpenerJs").removeClass('toolBtnActive');
}
/**
* body click functionality
* @method bodyClick
* @for TileDashboard
*/
function bodyClick() {
'use strict';
$("body").click(function () {
closeArea(); //function calling - common function for close all popup and remove active toolbutton class
});
}
/**
* add closeBox class to popup submit button to close popup
* @method closePopup
* @for TileDashboard
*/
function closePopup() {
'use strict';
$(".closeBox").click(function () {
closeArea(); //function calling - common function for close all popup and remove active toolbutton class
});
}
/**
* select popup box element on click
* @method selectPopupElement
* @for TileDashboard
*/
function selectPopupElement() {
'use strict';
var currentSelection, $this;
$(".toolPopupBoxJs table tbody tr").click(function () {
$this = $(this);
$(".toolPopupBoxJs table tbody > tr").removeClass("selected");
$this.addClass("selected");
currentSelection = $this.find('td').html();
$this.parent().parent().parent().parent().parent().find('.currentSelection').html(currentSelection);
closeArea(); //function calling - common function for close all popup and remove active toolbutton class
});
}
/**
* title bar popup functionality
* @method popupOpenerAction
* @for TileDashboard
*/
function popupOpenerAction() {
$(".toolOpenerJs").click(function (e) {
e.stopPropagation();
var currentPopup;
closeArea();
currentPopup = $(this).find(".toolPopupBox");
if (currentPopup.css('display') === 'none') {
currentPopup.css('display', 'block');
$(this).addClass('toolBtnActive');
} else { currentPopup.css('display', 'none'); $(this).removeClass('toolBtnActive'); }
});
$(".toolPopupBoxJs").click(function (e) {
e.stopPropagation();
});
}
//==========================End of Drop down functionality ==================================================
/**
* Get Hidden field values and make it globally available.
* @method getHiddenFieldInfraURL
* @for TileDashboard
*/
function getHiddenFieldInfraURL() {
defaultURL = $("#hiddenInfraUrl").val();
}
/**
* Convert HH:mm format to Minutes.
* @method convertToMin
* @for TileDashboard
*/
function convertToMin(time) {
var timeArray = time.split(":");
return parseInt(timeArray[0], 10) * 60 + parseInt(timeArray[1], 10);
}
/**
* To bind values on infra tile dashboard for selected circles.
* @method refreshDashboard
* @for TileDashboard
*/
function refreshDashboard() {
SecurityToken = securityToken;
utcMinutes = parseInt(UtcMinutes, 10);
UserId = userId;
// Getting first and last date from a month
var startDate = $("#monthpickerFrom").val();
var endDate = $("#monthpickerTo").val();
$('.wrapup-pod').find('h4').html(0);
// Sending the Ajax Request for showing the dashboard values and handling its completion.
if (xhr_refreshDashboard && xhr_refreshDashboard.readystate != 4) {
xhr_refreshDashboard.abort();
}
xhr_refreshDashboard = $.ajax({
type: "POST",
url: WCFRESTURL.GetGlobalDashboard,
data: { Token: SecurityToken, UtcMinutes: utcMinutes, UserId: UserId, FromDate: startDate + ' 00:00:00', ToDate: endDate + ' 23:59:59' },
dataType: "json",
success: function (model) {
// Setting KPI values in each tile, formatting and creating links for redirections.
for (var i = 0; i < model.length; i++) {
// Getting and setting value for total_van
if (model[i].Key == "total_van") {
if (parseInt(model[i].KeyValue, 10) > 0) {
//slowing increasing numbers on tiles
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#total_van").text(model[i].KeyValue);
$("#textFor_total_van").text(model[i].KeyName);
}
// Getting and setting value for average_response_time
else if (model[i].Key == "average_response_time") {
$("#average_response_time").text(model[i].KeyValue);
$("#textFor_average_response_time").text(model[i].KeyName);
if (parseInt(model[i].KeyValue, 10) > 120) {
$("#average_response_time").css('background-color', 'red');
}
}
// Getting and setting value for total_vans_on_service
else if (model[i].Key == "total_vans_on_service") {
if (parseInt(model[i].KeyValue, 10) > 0) {
//slowing increasing numbers on tiles
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#total_vans_on_service").text(model[i].KeyValue);
$("#textFor_total_vans_on_service").text(model[i].KeyName);
// Adding link to open ticket
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Open?startDate=' + startDate + '&endDate=' + endDate + '&assignedTo=van');
}
var parentOfTarget = $('#' + model[i].Key).parent();
colorAnimationTheDiv(parentOfTarget, startingColor21, startingColor22, darkOcean, lightOcean, 2);
}
// Getting and setting value for no_of_dealer_tickets
else if (model[i].Key == "no_of_dealer_tickets") {
if (parseInt(model[i].KeyValue, 10) > 0) {
//slowing increasing numbers on tiles
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#no_of_dealer_tickets").text(model[i].KeyValue);
$("#textFor_no_of_dealer_tickets").text(model[i].KeyName);
var parentOfTarget = $('#' + model[i].Key).parent();
colorAnimationTheDiv(parentOfTarget, startingColor21, startingColor22, darkBlue, lightBlue, 2);
}
// Getting and setting value for total_breakdowns
else if (model[i].Key == "total_breakdowns") {
if (parseInt(model[i].KeyValue, 10) > 0) {
//slowing increasing numbers on tiles
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#total_breakdowns").text(model[i].KeyValue);
$("#textFor_total_breakdowns").text(model[i].KeyName);
var parentOfTarget = $('#' + model[i].Key).parent();
colorAnimationTheDiv(parentOfTarget, startingColor21, startingColor22, darkBlue, lightBlue, 2);
}
// Getting and setting value for no_of_van_on_duty
else if (model[i].Key == "no_of_van_on_duty") {
if (parseInt(model[i].KeyValue, 10) > 0) {
//slowing increasing numbers on tiles
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#no_of_van_tickets").text(model[i].KeyValue);
$("#textFor_no_of_van_tickets").text(model[i].KeyName);
var parentOfTarget = $('#' + model[i].Key).parent();
colorAnimationTheDiv(parentOfTarget, startingColor21, startingColor22, darkBlue, lightBlue, 2);
}
// Getting and setting value for no_of_dealer_open_tickets
else if (model[i].Key == "no_of_dealer_open_tickets") {
if (parseFloat(model[i].KeyValue, 10) > 0) {
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Open?startDate=' + startDate + '&endDate=' + endDate + '&assignedTo=dealer');
}
}
// Getting and setting value for no_of_dealer_closed_tickets
else if (model[i].Key == "no_of_dealer_closed_tickets") {
if (parseFloat(model[i].KeyValue, 10) > 0) {
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Close?startDate=' + startDate + '&endDate=' + endDate + '&assignedTo=dealer');
}
}
// Getting and setting value for no_of_van_open_ticket
else if (model[i].Key == "no_of_van_open_ticket") {
if (parseFloat(model[i].KeyValue, 10) > 0) {
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Open?startDate=' + startDate + '&endDate=' + endDate + '&assignedTo=van');
}
}
// Getting and setting value for no_of_van_closed_ticket
else if (model[i].Key == "no_of_van_closed_ticket") {
if (parseFloat(model[i].KeyValue, 10) > 0) {
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Close?startDate=' + startDate + '&endDate=' + endDate + '&assignedTo=van');
}
}
// Getting and setting value for no_of_van_closed_ticket
else if (model[i].Key == "no_of_open_tickets") {
if (parseFloat(model[i].KeyValue, 10) > 0) {
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
// Adding link to open ticket
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Open?startDate=' + startDate + '&endDate=' + endDate);
}
if (parseInt(model[i].KeyValue, 10) >= 1) {
var parentOfTarget = $('#' + model[i].Key).parent();
colorAnimationTheDiv(parentOfTarget, startingColor21, startingColor22, endColor11, endColor12, 2);
}
}
// Getting and setting value for call_distribution_hd
else if (model[i].Key == "call_distribution_hd") {
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Close?startDate=' + startDate + '&endDate=' + endDate + '&vehicleTag=HD');
}
var parentOfTarget = $('#' + model[i].Key).parent().parent().parent().parent();
colorAnimationTheDiv(parentOfTarget, startingColor21, startingColor22, darkOcean, lightOcean, 2);
}
// Getting and setting value for call_distribution_lmd
else if (model[i].Key == "call_distribution_lmd") {
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Close?startDate=' + startDate + '&endDate=' + endDate + '&vehicleTag=LMD');
}
}
// Getting and setting value for call_distribution_bus
else if (model[i].Key == "call_distribution_bus") {
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Close?startDate=' + startDate + '&endDate=' + endDate + '&vehicleTag=BUS');
}
}
// Getting and setting value for call_closed_within_24hrs_hd
else if (model[i].Key == "call_closed_within_24hrs_hd") {
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Close?startDate=' + startDate + '&endDate=' + endDate + '&vehicleTag=HD&age=24');
}
var parentOfTarget = $('#' + model[i].Key).parent().parent().parent().parent();
colorAnimationTheDiv(parentOfTarget, startingColor21, startingColor22, darkBlue, lightBlue, 2);
}
// Getting and setting value for call_closed_within_24hrs_lmd
else if (model[i].Key == "call_closed_within_24hrs_lmd") {
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Close?startDate=' + startDate + '&endDate=' + endDate + '&vehicleTag=LMD&age=24');
}
var parentOfTarget = $('#' + model[i].Key).parent().parent().parent().parent();
colorAnimationTheDiv(parentOfTarget, startingColor21, startingColor22, darkBlue, lightBlue, 2);
}
// Getting and setting value for call_closed_within_24hrs_bus
else if (model[i].Key == "call_closed_within_24hrs_bus") {
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Close?startDate=' + startDate + '&endDate=' + endDate + '&vehicleTag=BUS&age=24');
}
var parentOfTarget = $('#' + model[i].Key).parent().parent().parent().parent();
colorAnimationTheDiv(parentOfTarget, startingColor21, startingColor22, darkBlue, lightBlue, 2);
}
// Getting and setting value for All other tiles which needs to be animated and changing in color
else if (model[i].Key == "least_response_time") {
if (model[i].KeyValue != '') {
//demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
//demo.start();
$("#least_response_time").text(model[i].KeyValue);
$("#labelFor_least_response_time").show();
} else {
$("#least_response_time").text("-");
$("#labelFor_least_response_time").hide();
}
$("#textFor_least_response_time").text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
//pankaj
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Close?startDate=' + startDate + '&endDate=' + endDate + '&responseTime=' + convertToMin(model[i].KeyValue));
}
if (parseInt(convertToMin(model[i].KeyValue), 10) > 120) {
var parentOfTarget = $('#' + model[i].Key).parent();
colorAnimationTheDiv(parentOfTarget, startingColor21, startingColor22, endColor11, endColor12, 2);
}
}
// Getting and setting value for highest_response_time
else if (model[i].Key == "highest_response_time") {
if (parseInt(model[i].KeyValue, 10) >= 0) {
//demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
//demo.start();
$("#highest_response_time").text(model[i].KeyValue);
$("#labelFor_worst_response_time").show();
} else {
$("#highest_response_time").text("-");
$("#labelFor_worst_response_time").hide();
}
$("#textFor_highest_response_time").text(model[i].KeyName);
if (userRole.toLowerCase() != 'dealer') {
$("#link_" + model[i].Key).attr('href', '/Report/Ticket_Close?startDate=' + startDate + '&endDate=' + endDate + '&responseTime=' + convertToMin(model[i].KeyValue));
}
if (parseInt(convertToMin(model[i].KeyValue), 10) > 120) {
var parentOfTarget = $('#' + model[i].Key).parent();
colorAnimationTheDiv(parentOfTarget, startingColor21, startingColor22, endColor11, endColor12, 2);
}
}
// Getting and setting value for closur_within_24hrs
else if (model[i].Key == "closur_within_24hrs") {
if (parseInt(model[i].KeyValue, 10) > 0) {
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (parseFloat(model[i].KeyValue, 10) < 90) {
$("#closur_within_24hrs").css('background-color', 'red');
}
}
// Getting and setting value for response_within_2hrs
else if (model[i].Key == "response_within_2hrs") {
if (parseInt(model[i].KeyValue, 10) > 0) {
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
if (parseFloat(model[i].KeyValue, 10) < 90) {
$("#response_within_2hrs").css('background-color', 'red');
}
}
else if (model[i].Key == "least_response_time_state") {
//model[i].KeyValue = "tambidffdfgddfdffdmotersfdcomapany-varsai (varsai,mumbai,majarastra)";
var valueToShow = model[i].KeyValue;
//console.log(model[i].KeyValue.length);
if (model[i].KeyValue.length > 30)
{
valueToShow = valueToShow.substring(0, 29) + '..';
}
$("#" + model[i].Key).text(valueToShow);
$("#" + model[i].Key).attr("title", model[i].KeyValue);
}
else if (model[i].Key == "highest_response_time_state") {
var valueToShow = model[i].KeyValue;
if (model[i].KeyValue.length > 30) {
valueToShow = valueToShow.substring(0, 29) + '..';
}
$("#" + model[i].Key).text(valueToShow);
$("#" + model[i].Key).attr("title", model[i].KeyValue);
}
else {
if ((parseInt(model[i].KeyValue, 10) != 'NaN') && (parseInt(model[i].KeyValue, 10) > 0)) {
//slowing increasing numbers on tiles
demo = new countUp(model[i].Key, 0, parseInt(model[i].KeyValue, 10), 0, 0, options);
demo.start();
}
$("#" + model[i].Key).text(model[i].KeyValue);
$("#textFor_" + model[i].Key).text(model[i].KeyName);
}
}
},
complete: function () {
$('.excelIcon').show();
},
error: function (data) {
console.log("Error");
}
});
}
/**
* To show Tile dashboard.
* @method showTileDashboard
* @for TileDashboard
*/
function showTileDashboard() {
refreshDashboard();
}
/**
* To Export relevent data when a Excel-Icon is clicked.
* @method exportToCSV
* @param {Int} technologyId technology Id
* @param {Int} categoryId category Id
* @param {String} technologyName technology Name
* @for TileDashboard
*/
function exportToCSV() {
// Sending the Ajax request to show report and handling its completion
if (xhr_exportToCSV && xhr_exportToCSV.readystate != 4) {
xhr_exportToCSV.abort();
}
xhr_exportToCSV = $.ajax({
type: "POST",
url: "/Home/Export_GlobalTileDashboard/",
//data: { technologyId: technologyId, categoryId: categoryId, technologyName: technologyName, networkType: networkType },
success: function (data) {
// dowloading the generated report file
window.location.href = data;
},
complete: function () {
},
error: function () {
console.log("Error in Export to CSV");
}
});
}
//==========================DOCUMNET READY=========================
/**
* To do some initial functionality on page when Document is ready.
* @event document.ready
* @for TileDashboard
*/
$(document).ready(function () {
// body click functionality
bodyClick();
//common function for close all popup and remove active toolbutton class
closePopup();
// title bar popup functionality
popupOpenerAction();
//select popup box element on click
selectPopupElement();
//Getting Hidden field values and making it available globally.
getHiddenFieldInfraURL();
// Loading Dashboard data.
showTileDashboard();
//Refresh Dashboard every-hour
setInterval("showTileDashboard()", 1000 * 60 * 60);
// for image cycle.
$('#defaultCube,#defaultCube1,#defaultCube2,#defaultCube3,#defaultCube4').cycle({
fx: 'slideY',
speed: 1000,
timeout: 20000//set your time b/w every image scrolldown effect
});
});
//==========================DOCUMNET READY END=======================
