/*================================================================================================================\
+
+ Project : GoData-Eicher
+ Filename : reportTicketDetails.js
+ Module Name : Report
+ Purpose : For ticket details
+ Coded By : Parul Gupta
+
+================================================================================================================*/
/**
* For reporting
* @module ReportModule
*/
/**
* This class contains functionality of details of a ticket in Ticket report(Open & Close)
* @class Report
* @constructor
*/
//Global variables
var ccplMap = null,
geoCoder,
defaultLat = 26.912285124827,
defaultLng = 75.7873203125;
var displayDisplay = ""; //route direction display
var routeDirectionsService = new google.maps.DirectionsService(); //direction google map api
//initialize markers
var sourceMarker = '../../Scripts/map_api/icons/red_s.png'; //marker for source
var destinationMarker = '../../Scripts/map_api/icons/red_d.png'; //marker for destination
var ticketDetailsMarkerArray = []; //array of source and destination markers
var countDriverExpand = 0; //count no. of expand driver details
var countOwnerExpand = 0; //count no. of expand owner details
var countVehicleExpand = 0; //count no. of expand vehicle details
//========================================== map functionality ============================================//
/**
* Load google map on page.
* @method initMap
* @param {String} id HTML element id where map is loaded.
* @for Report
*/
function initMap(id) {
var mapOptions = {
center: new google.maps.LatLng(defaultLat, defaultLng),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//initialize map
ccplMap = new google.maps.Map(document.getElementById(id), mapOptions);
//initialize geo coder to get address from lat lng
geoCoder = new google.maps.Geocoder();
}
//==================================== end map functionality =============================================//
//======================================== onclick functionality ==========================================//
/**
* Function call on click of Route label to show map
* @method onclickLabelRoute
* @for Report
*/
function onclickLabelRoute() {
//on click of label route
$("#labelRoute").click(function () {
//console.log("label route");
// add selected class
$('#labelActivity').removeClass("toolBtnActive");
$('#labelRoute').addClass("toolBtnActive");
$('#labelFeedback').removeClass("toolBtnActive");
$("#divMapContainer").show();
$("#divActivity").hide();
$("#divFeedback").hide();
});
}
/**
* Function call on click of Activity label to show ticket activity
* @method onclickLabelActivity
* @for Report
*/
function onclickLabelActivity() {
//on click of label Activitys
$("#labelActivity").click(function () {
console.log("activity");
// add selected class
$('#labelRoute').removeClass("toolBtnActive");
$('#labelActivity').addClass("toolBtnActive");
$('#labelFeedback').removeClass("toolBtnActive");
$("#divActivity").show();
$("#divActivity").addClass("withtoolbar");
$("#divMapContainer").hide();
$("#divFeedback").hide();
var ticketId = $("#tableTicketHistory > tbody > tr")[0].id;
var ticketStatus = document.getElementById(ticketId).getAttribute('data-ticketStatus');
if (ticketStatus.toLowerCase() == 'closed' || ticketStatus.toLowerCase() == 'opportunity lost') {
ticketStatus = 'close';
} else { ticketStatus = 'open'; }
$.ajax({
type: "POST",
url: "/Report/Ticket_GetOpencloseTicketActivities/",
data: { ticketId: ticketId, ticketStatus: ticketStatus },
success: function (data) {
if (data) {
$("#divActivity").html('');
$("#divActivity").html(data);
}
},
error: function () { }
});
});
}
/**
* Function call on click of Route label to show map
* @method onclickLabelRoute
* @for TicketAdministration
*/
function onclickLabelFeedback() {
//on click of label route
$("#labelFeedback").click(function () {
var selectTicketId;
var ticketCreationTime, isMoreThan24Hrs, isFeedBackDetails;
// add selected class
$('#labelActivity').removeClass("toolBtnActive");
$('#labelRoute').removeClass("toolBtnActive");
$('#labelFeedback').addClass("toolBtnActive");
$("#divFeedback").show();
$("#divFeedback").addClass("withtoolbar");
$("#divMapContainer").hide();
$("#divActivity").css('display', 'none');
showFeedback();
});
}
/**
* Function call on click of feedback label to show feedback form
* @method showFeedback
* @for TicketAdministration
*/
function showFeedback() {
var selectTicketId;
var ticketCreationTime, isMoreThan24Hrs, isFeedBackDetails;
if ($("#tableTicketHistory > tbody > tr")[0] != undefined) {
selectTicketId = $("#tableTicketHistory > tbody > tr")[0].id;
ticketCreationTime = document.getElementById(selectTicketId).getAttribute('data-ticketCreationTime');
isMoreThan24Hrs = document.getElementById(selectTicketId).getAttribute('data-reason24Hrs');
//isFeedBackDetails = document.getElementById(selectTicketId).getAttribute('data-isFeedback');
}
console.log(selectTicketId);
$.ajax({
type: "POST",
url: "/Report/Ticket_Feedback/",
data: { selectTicketId: selectTicketId, ticketCreationTime: ticketCreationTime, isMoreThan24Hrs: isMoreThan24Hrs },
success: function (data) {
if (data) {
$("#divFeedback").html(data);
}
},
error: function (data) {
console.log(data);
}
});
}
/**
* Function to draw path between source van and destination breakdown vehicle
* @method getVanBreakdownLocation
* @param {String} vanDealerLocation The location of source van / dealer
* @param {String} breakdownLocation The location of vehicle's breakdown
* @for Report
*/
function getVanBreakdownLocation(vanDealerLocation, breakdownLocation) {
//Get address of the Lat Long click clicked
getReverseGeoCode(vanDealerLocation, function (data) {
//Here we got the address of the point clicked. Update this value to the form textbox.
var title = data;
//create marker at position
createMarkerVanDealer(vanDealerLocation, sourceMarker, title);
//Get address of the Lat Long click clicked
getReverseGeoCode(breakdownLocation, function (data) {
//Here we got the address of the point clicked. Update this value to the form textbox.
var title = data;
//create marker at position
createMarkerVanDealer(breakdownLocation, destinationMarker, title);
var _bounds = new google.maps.LatLngBounds();
//console.log(ticketDetailsMarkerArray);
for (var count = 0; count < ticketDetailsMarkerArray.length; count++) {
_bounds.extend(ticketDetailsMarkerArray[count].position);
}
ccplMap.fitBounds(_bounds);
//calculate route
drawRoute(vanDealerLocation, breakdownLocation, ccplMap);
});
});
}
//====================================== draw path functionality =====================================//
/**
* Function to draw markers on position of van / dealer
* @method createMarkerVanDealer
* @param {String} position The location of source van / dealer
* @param {String} icon The icon of marker
* @param {String} title The title of marker
* @for Report
*/
function createMarkerVanDealer(position, icon, title) {
console.log(position);
//create a google marker with the given param
var vanDealerMarker = new google.maps.Marker({
position: position,
//draggable:true,
map: ccplMap,
icon: icon,
title: title
});
//push marker to marksArray
ticketDetailsMarkerArray.push(vanDealerMarker);
//console.log(ticketDetailsMarkerArray);
}
/**
* This fn calculates and draws the Route for the Ticket selected in the Ticket List using Google Direction API
* @method drawRoute
* @param {String} startLatLng The lat lng of origin
* @param {String} endLatLng The lat lng of destination
* @param {String} mapID The id of map
* @for Report
*/
function drawRoute(startLatLng, endLatLng, mapID) {
var merkerIcon;
if (displayDisplay) {
//Remove direction display
displayDisplay.setMap(null);
}
var rendererOptions = {
map: mapID,
suppressMarkers: true,
polylineOptions: { strokeColor: "#1b3f94" }
}
displayDisplay = new google.maps.DirectionsRenderer(rendererOptions);
//if (tick.vehicle_latitude && tick.vehicle_longitude) {
//Make request obj to Direction Service API with starting and end LatLng
var request = {
origin: startLatLng,
destination: endLatLng,
travelMode: google.maps.TravelMode.DRIVING
};
//call Direction Service API with the reuqest obj
routeDirectionsService.route(request, function (response, status) {
console.log(status);
//if status was a success
if (status == google.maps.DirectionsStatus.OK) {
displayDisplay.setOptions({ preserveViewport: true });
//set Direction to the response
displayDisplay.setDirections(response);
var leg = response.routes[0].legs[0];
}
});
}
//====================================== end of draw path============================================//
//======================================================================GeoCoding Functions=============================================================================//
/**
* This function reverses the Lat Lng to Get the Approxmiate Address using the Google GeoCoding. Callback the result
* @method getReverseGeoCode
* @param {String} latLng The lat lng of origin
* @param {String} callback The callback function
* @for Report
*/
function getReverseGeoCode(latLng, callback) {
// Get google map LatLng object with the latLng in params
var latlng = new google.maps.LatLng(latLng.lat(), latLng.lng());
//Use google geocode library to get results
geoCoder.geocode({ 'latLng': latlng }, function (results, status) {
//If status is Ok
if (status == google.maps.GeocoderStatus.OK) {
//Find most intensive search result and callback it
if (results[0]) {
callback(results[0].formatted_address);
//Else callback no result found
} else {
callback('No results found');
}
}
//return false
return false;
});
}
//====================================== end of GeoCoding Functions============================================//
/**
* Function call on expanding data of kendo panelbar
* @method onExpand
* @for Report
*/
function onExpand(e) {
//Get expand div id
var expandDivId = e.item.id;
//Get customer contact no.
var customerContactNo = $("#CustomerContactNo").val();
//Get vehicle registration no.
var vRegNo = $("#VehicleRegistrationNo").val();
//On expand of driver details div
if ((expandDivId.toLowerCase()).indexOf('driver') !== -1) {
if (countDriverExpand == 0) {
$("#tableDriverDetails").css('visibility', 'hidden');
$("#loadingDriverDetails").show();
countDriverExpand = countDriverExpand + 1;
//call web api to get driver details
$.ajax({
type: "POST",
url: "/Report/Ticket_GetOpencloseTicketDriverDetails/",
data: { CustomerContactNo: customerContactNo, VRegistrationNo: vRegNo },
success: function (data) {
//console.log(data.list[0].CustomerName);
if (data.list.length > 0) {
for (var count = 0; count < data.list.length; count++) {
$("#customerName").text(data.list[count].CustomerName);
$("#customerContactNo").text(data.list[count].CustomerMobile1);
}
}
},
complete: function () {
$("#tableDriverDetails").css('visibility', 'visible');
$("#loadingDriverDetails").hide();
},
error: function (data) {
}
});
}
}
//On expand of owner details div
else if ((expandDivId.toLowerCase()).indexOf('owner') !== -1) {
if (countOwnerExpand == 0) {
$("#tableOwnerDetails").css('visibility', 'hidden');
$("#loadingOwnerDetails").show();
countOwnerExpand = countOwnerExpand + 1;
//call web api to get owner details
$.ajax({
type: "POST",
url: "/Report/Ticket_GetOpencloseTicketOwnerDetails/",
data: { VRegistrationNo: vRegNo },
success: function (data) {
console.log(data.list);
if (data.list.length > 0) {
for (var count = 0; count < data.list.length; count++) {
$("#ownerName").text(data.list[count].CustomerCustomerName);
$("#ownerContact").text(data.list[count].CustomerMobileNumber1);
$("#ownerState").text(data.list[count].CustomerState);
}
}
},
complete: function () {
$("#tableOwnerDetails").css('visibility', 'visible');
$("#loadingOwnerDetails").hide();
},
error: function (data) {
}
});
}
}
//On expand of vehicle details div
else if ((expandDivId.toLowerCase()).indexOf('vehicle') !== -1) {
if (countVehicleExpand == 0) {
$("#tableVehicleDetails").css('visibility', 'hidden');
$("#loadingVehicleDetails").show();
countVehicleExpand = countVehicleExpand + 1;
//call web api to get vehicle details
$.ajax({
type: "POST",
url: "/Report/Ticket_GetOpencloseTicketVehicleDetails/",
data: { VRegistrationNo: vRegNo },
success: function (data) {
console.log(data.list, data.vehicleModelTagging);
if (data.list.length > 0) {
for (var count = 0; count < data.list.length; count++) {
$("#vehicleRegistration").text(data.list[count].RegistrationNo);
$("#vehicleModelNo").text(data.list[count].ModelNumber);
data.list[count].VehicleInstallationDate == null ? $("#vehicleInstallationDate").text('') : $("#vehicleInstallationDate").text(data.list[count].VehicleInstallationDate);
}
$("#vehicleProductVariant").text(data.vehicleModelTagging);
}
},
complete: function () {
$("#tableVehicleDetails").css('visibility', 'visible');
$("#loadingVehicleDetails").hide();
},
error: function (data) {
}
});
}
}
}
//======================== document ready function ================//
$(document).ready(function () {
$("#loadingTicketDetails").hide();
$("#loadingDriverDetails").hide();
$("#loadingOwnerDetails").hide();
$("#loadingVehicleDetails").hide();
$("#loadingVanDetails").hide();
$("#loadingDealerDetails").hide();
if (document.getElementById('tableTicketHistory').getAttribute('data-ticketStatus') == 'close') {
$("#listFeedback").show();
} else { $("#listFeedback").hide(); }
setTimeout(function () {
$("#labelRoute").trigger("click");
initMap("divMapContainer");
getVanBreakdownLocation(assignedVanDealerLatLng, _breakdownLocationLatLng);
}, 1000);
var assignedVanDealerLatLng = new google.maps.LatLng($("#AssignedVanDealerLat").val(), $("#AssignedVanDealerLng").val());
var _breakdownLocationLatLng = new google.maps.LatLng($("#BreakdownLat").val(), $("#BreakdownLng").val());
});
