| 36645 |
vikas |
1 |
<script>
|
|
|
2 |
if (!window.google || !window.google.maps) {
|
|
|
3 |
var s = document.createElement('script');
|
|
|
4 |
s.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&v=weekly';
|
|
|
5 |
document.head.appendChild(s);
|
|
|
6 |
}
|
|
|
7 |
</script>
|
|
|
8 |
|
|
|
9 |
<div class="col-lg-12">
|
|
|
10 |
<table class="table table-border table-condensed table-bordered" id="beatReportTable" style="width:100%">
|
|
|
11 |
<thead>
|
|
|
12 |
<tr>
|
|
|
13 |
<th>User Name</th>
|
|
|
14 |
<th>Total Visits</th>
|
|
|
15 |
<th>Completed Visits</th>
|
|
|
16 |
<th>Pending Visits</th>
|
|
|
17 |
<th>Deferred</th>
|
|
|
18 |
<th>Live Tracking</th>
|
|
|
19 |
</tr>
|
|
|
20 |
</thead>
|
|
|
21 |
<tbody>
|
|
|
22 |
#set($rowIndex = 0)
|
|
|
23 |
#foreach($row in $reportRows)
|
|
|
24 |
<tr>
|
|
|
25 |
<td><a href="javascript:void(0);" class="beat-user-detail-link" data-userid="$row.get('userId')" style="color:#2c3e50; font-weight:bold; text-decoration:underline; cursor:pointer;">$row.get("username")</a></td>
|
|
|
26 |
<td><a href="javascript:void(0);" class="beat-detail-link" data-row="$rowIndex" data-type="total" style="color:#1abc9c; font-weight:bold; text-decoration:underline; cursor:pointer;">$row.get("total")</a></td>
|
|
|
27 |
<td><a href="javascript:void(0);" class="beat-detail-link" data-row="$rowIndex" data-type="completed" style="color:#1abc9c; font-weight:bold; text-decoration:underline; cursor:pointer;">$row.get("completed")</a></td>
|
|
|
28 |
<td><a href="javascript:void(0);" class="beat-detail-link" data-row="$rowIndex" data-type="pending" style="color:#e67e22; font-weight:bold; text-decoration:underline; cursor:pointer;">$row.get("pending")</a></td>
|
|
|
29 |
<td><a href="javascript:void(0);" class="beat-detail-link" data-row="$rowIndex" data-type="deferred" style="color:#e74c3c; font-weight:bold; text-decoration:underline; cursor:pointer;">$row.get("deferred")</a></td>
|
|
|
30 |
<td><a href="javascript:void(0);" class="beat-map-link" data-row="$rowIndex" style="cursor:pointer;"><i class="fa fa-map-marker" style="color:#1abc9c; font-size:18px;"></i></a></td>
|
|
|
31 |
</tr>
|
|
|
32 |
|
|
|
33 |
<script>
|
|
|
34 |
window.beatReportData = window.beatReportData || {};
|
|
|
35 |
window.beatReportData[$rowIndex] = {
|
|
|
36 |
username: "$row.get('username').replace('"', '\"')",
|
|
|
37 |
total: [
|
|
|
38 |
#foreach($lt in $row.get("totalList"))
|
|
|
39 |
{ taskName: "$!lt.getTaskName().replace('"', '\"')", markType: "$!lt.getMarkType()", address: "$!lt.getAddress().replace('"', '\"').replace("'", "\'")", checkInTime: "$!lt.getCheckInTime()", checkOutTime: "$!lt.getCheckOutTime()", timeSpent: "$!lt.getTimeSpent()", taskType: "$!lt.getTaskType()", visitLocation: "$!lt.getVisitLocation()", checkInLatLng: "$!lt.getCheckInLatLng()", taskDescription: "$!lt.getTaskDescription().replace('"', '\"')", attachment: "$!lt.getAttachment()" },
|
|
|
40 |
#end
|
|
|
41 |
],
|
|
|
42 |
completed: [
|
|
|
43 |
#foreach($lt in $row.get("completedList"))
|
|
|
44 |
{ taskName: "$!lt.getTaskName().replace('"', '\"')", markType: "$!lt.getMarkType()", address: "$!lt.getAddress().replace('"', '\"').replace("'", "\'")", checkInTime: "$!lt.getCheckInTime()", checkOutTime: "$!lt.getCheckOutTime()", timeSpent: "$!lt.getTimeSpent()", taskType: "$!lt.getTaskType()", visitLocation: "$!lt.getVisitLocation()", checkInLatLng: "$!lt.getCheckInLatLng()", taskDescription: "$!lt.getTaskDescription().replace('"', '\"')", attachment: "$!lt.getAttachment()" },
|
|
|
45 |
#end
|
|
|
46 |
],
|
|
|
47 |
pending: [
|
|
|
48 |
#foreach($lt in $row.get("pendingList"))
|
|
|
49 |
{ taskName: "$!lt.getTaskName().replace('"', '\"')", markType: "$!lt.getMarkType()", address: "$!lt.getAddress().replace('"', '\"').replace("'", "\'")", checkInTime: "$!lt.getCheckInTime()", checkOutTime: "$!lt.getCheckOutTime()", timeSpent: "$!lt.getTimeSpent()", taskType: "$!lt.getTaskType()", visitLocation: "$!lt.getVisitLocation()", checkInLatLng: "$!lt.getCheckInLatLng()", taskDescription: "$!lt.getTaskDescription().replace('"', '\"')", attachment: "$!lt.getAttachment()" },
|
|
|
50 |
#end
|
|
|
51 |
],
|
|
|
52 |
deferred: [
|
|
|
53 |
#foreach($lt in $row.get("deferredList"))
|
|
|
54 |
{ taskName: "$!lt.getTaskName().replace('"', '\"')", markType: "$!lt.getMarkType()", address: "$!lt.getAddress().replace('"', '\"').replace("'", "\'")", checkInTime: "$!lt.getCheckInTime()", checkOutTime: "$!lt.getCheckOutTime()", timeSpent: "$!lt.getTimeSpent()", taskType: "$!lt.getTaskType()", visitLocation: "$!lt.getVisitLocation()", checkInLatLng: "$!lt.getCheckInLatLng()", taskDescription: "$!lt.getTaskDescription().replace('"', '\"')", attachment: "$!lt.getAttachment()" },
|
|
|
55 |
#end
|
|
|
56 |
]
|
|
|
57 |
};
|
|
|
58 |
</script>
|
|
|
59 |
#set($rowIndex = $rowIndex + 1)
|
|
|
60 |
#end
|
|
|
61 |
</tbody>
|
|
|
62 |
</table>
|
|
|
63 |
</div>
|
|
|
64 |
|
|
|
65 |
<!-- Map Modal -->
|
|
|
66 |
<div class="modal fade" id="beatMapModal" tabindex="-1" role="dialog">
|
|
|
67 |
<div class="modal-dialog modal-lg" role="document" style="width:90%;">
|
|
|
68 |
<div class="modal-content">
|
|
|
69 |
<div class="modal-header" style="background:#1abc9c; color:white;">
|
|
|
70 |
<button type="button" class="close" data-dismiss="modal" style="color:white;">×</button>
|
|
|
71 |
<h4 class="modal-title" id="beatMapModalTitle">Visit Locations</h4>
|
|
|
72 |
</div>
|
|
|
73 |
<div class="modal-body" style="padding:0;">
|
|
|
74 |
<div id="beatMapContainer" style="height:500px; width:100%;"></div>
|
|
|
75 |
<div id="beatMapInfo" style="padding:6px 15px; background:#fff3cd; border-top:1px solid #ddd; color:#856404; display:none;"></div>
|
|
|
76 |
<div style="padding:8px 15px; background:#f5f5f5; border-top:1px solid #ddd;">
|
|
|
77 |
<span style="margin-right:15px;"><i class="fa fa-circle" style="color:#4285F4;"></i> Check In</span>
|
|
|
78 |
<span style="margin-right:15px;"><i class="fa fa-circle" style="color:#0F9D58;"></i> Completed</span>
|
|
|
79 |
<span style="margin-right:15px;"><i class="fa fa-circle" style="color:#F4B400;"></i> Pending</span>
|
|
|
80 |
<span><i class="fa fa-circle" style="color:#DB4437;"></i> Deferred</span>
|
|
|
81 |
</div>
|
|
|
82 |
</div>
|
|
|
83 |
<div class="modal-footer">
|
|
|
84 |
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
|
85 |
</div>
|
|
|
86 |
</div>
|
|
|
87 |
</div>
|
|
|
88 |
</div>
|
|
|
89 |
|
|
|
90 |
<!-- Detail Popup Modal -->
|
|
|
91 |
<div class="modal fade" id="beatDetailModal" tabindex="-1" role="dialog">
|
|
|
92 |
<div class="modal-dialog modal-lg" role="document">
|
|
|
93 |
<div class="modal-content">
|
|
|
94 |
<div class="modal-header" style="background:#1abc9c; color:white;">
|
|
|
95 |
<button type="button" class="close" data-dismiss="modal" style="color:white;">×</button>
|
|
|
96 |
<h4 class="modal-title" id="beatDetailModalTitle">Visit Details</h4>
|
|
|
97 |
</div>
|
|
|
98 |
<div class="modal-body">
|
|
|
99 |
<table class="table table-bordered table-condensed table-striped" id="beatDetailTable" style="width:100%">
|
|
|
100 |
<thead>
|
|
|
101 |
<tr>
|
|
|
102 |
<th>#</th>
|
|
|
103 |
<th>Task Name</th>
|
|
|
104 |
<th>Type</th>
|
|
|
105 |
<th>Status</th>
|
|
|
106 |
<th>Address</th>
|
|
|
107 |
<th>Check In</th>
|
|
|
108 |
<th>Check Out</th>
|
|
|
109 |
<th>Time Spent</th>
|
|
|
110 |
<th>Description</th>
|
|
|
111 |
<th>Attachment</th>
|
|
|
112 |
</tr>
|
|
|
113 |
</thead>
|
|
|
114 |
<tbody id="beatDetailTableBody"></tbody>
|
|
|
115 |
</table>
|
|
|
116 |
</div>
|
|
|
117 |
<div class="modal-footer">
|
|
|
118 |
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
|
119 |
</div>
|
|
|
120 |
</div>
|
|
|
121 |
</div>
|
|
|
122 |
</div>
|
|
|
123 |
|
|
|
124 |
<script>
|
|
|
125 |
$('#beatReportTable').DataTable({
|
|
|
126 |
"scrollX": true,
|
|
|
127 |
"bPaginate": true,
|
|
|
128 |
"bLengthChange": true,
|
|
|
129 |
"bFilter": true,
|
|
|
130 |
"bInfo": true,
|
|
|
131 |
"bAutoWidth": false
|
|
|
132 |
});
|
|
|
133 |
|
|
|
134 |
var beatMapMarkerColors = {
|
|
|
135 |
'PENDING': '#F4B400',
|
|
|
136 |
'DEFERRED': '#DB4437',
|
|
|
137 |
'CHECKIN': '#4285F4',
|
|
|
138 |
'CHECKIN-CHECKOUT': '#0F9D58',
|
|
|
139 |
'CHECKOUT': '#0F9D58'
|
|
|
140 |
};
|
|
|
141 |
|
|
|
142 |
function getMarkerColor(markType) {
|
|
|
143 |
return beatMapMarkerColors[markType] || '#999999';
|
|
|
144 |
}
|
|
|
145 |
|
|
|
146 |
function createColoredMarkerIcon(color, label) {
|
|
|
147 |
var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="42" viewBox="0 0 32 42">' +
|
|
|
148 |
'<path d="M16 0C7.2 0 0 7.2 0 16c0 12 16 26 16 26s16-14 16-26C32 7.2 24.8 0 16 0z" fill="' + color + '"/>' +
|
|
|
149 |
'<circle cx="16" cy="15" r="10" fill="white"/>' +
|
|
|
150 |
'<text x="16" y="20" text-anchor="middle" font-size="12" font-weight="bold" fill="' + color + '">' + label + '</text>' +
|
|
|
151 |
'</svg>';
|
|
|
152 |
return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
|
|
|
153 |
}
|
|
|
154 |
|
|
|
155 |
function getLatLng(item) {
|
|
|
156 |
var loc = item.visitLocation || item.checkInLatLng || '';
|
|
|
157 |
if (!loc || loc === '0.0000,0.0000') return null;
|
|
|
158 |
var parts = loc.split(',');
|
|
|
159 |
if (parts.length !== 2) return null;
|
|
|
160 |
var lat = parseFloat(parts[0].trim());
|
|
|
161 |
var lng = parseFloat(parts[1].trim());
|
|
|
162 |
if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) return null;
|
|
|
163 |
return { lat: lat, lng: lng };
|
|
|
164 |
}
|
|
|
165 |
|
|
|
166 |
$(document).on('click', '.beat-map-link', function () {
|
|
|
167 |
var rowIndex = $(this).data('row');
|
|
|
168 |
var data = window.beatReportData[rowIndex];
|
|
|
169 |
if (!data) return;
|
|
|
170 |
|
|
|
171 |
var items = data.total || [];
|
|
|
172 |
var username = data.username;
|
|
|
173 |
$('#beatMapModalTitle').text(username + ' - Visit Locations (' + items.length + ')');
|
|
|
174 |
|
|
|
175 |
if (typeof google === 'undefined' || !google.maps) {
|
|
|
176 |
alert('Google Maps is still loading. Please try again in a moment.');
|
|
|
177 |
return;
|
|
|
178 |
}
|
|
|
179 |
|
|
|
180 |
$('#beatMapModal').modal('show');
|
|
|
181 |
|
|
|
182 |
setTimeout(function () {
|
|
|
183 |
var mapDiv = document.getElementById('beatMapContainer');
|
|
|
184 |
var bounds = new google.maps.LatLngBounds();
|
|
|
185 |
var hasMarkers = false;
|
|
|
186 |
|
|
|
187 |
var map = new google.maps.Map(mapDiv, {
|
|
|
188 |
zoom: 10,
|
|
|
189 |
center: { lat: 20.5937, lng: 78.9629 },
|
|
|
190 |
mapTypeId: 'roadmap'
|
|
|
191 |
});
|
|
|
192 |
|
|
|
193 |
var infoWindow = new google.maps.InfoWindow();
|
|
|
194 |
|
|
|
195 |
for (var i = 0; i < items.length; i++) {
|
|
|
196 |
var item = items[i];
|
|
|
197 |
var pos = getLatLng(item);
|
|
|
198 |
if (!pos) continue;
|
|
|
199 |
|
|
|
200 |
hasMarkers = true;
|
|
|
201 |
bounds.extend(pos);
|
|
|
202 |
|
|
|
203 |
var color = getMarkerColor(item.markType);
|
|
|
204 |
var marker = new google.maps.Marker({
|
|
|
205 |
position: pos,
|
|
|
206 |
map: map,
|
|
|
207 |
title: item.taskName || item.markType,
|
|
|
208 |
icon: {
|
|
|
209 |
url: createColoredMarkerIcon(color, (i + 1)),
|
|
|
210 |
scaledSize: new google.maps.Size(32, 42),
|
|
|
211 |
anchor: new google.maps.Point(16, 42)
|
|
|
212 |
}
|
|
|
213 |
});
|
|
|
214 |
|
|
|
215 |
(function (m, itm, idx) {
|
|
|
216 |
google.maps.event.addListener(m, 'click', function () {
|
|
|
217 |
var content = '<div style="min-width:200px;">' +
|
|
|
218 |
'<strong>' + (idx + 1) + '. ' + (itm.taskName || '--') + '</strong><br>' +
|
|
|
219 |
'<b>Status:</b> ' + (itm.markType || '--') + '<br>' +
|
|
|
220 |
'<b>Address:</b> ' + (itm.address || '--') + '<br>' +
|
|
|
221 |
'<b>Check In:</b> ' + (itm.checkInTime || '--') + '<br>' +
|
|
|
222 |
'<b>Check Out:</b> ' + (itm.checkOutTime || '--') + '<br>' +
|
|
|
223 |
'<b>Time Spent:</b> ' + (itm.timeSpent || '--') +
|
|
|
224 |
'</div>';
|
|
|
225 |
infoWindow.setContent(content);
|
|
|
226 |
infoWindow.open(map, m);
|
|
|
227 |
});
|
|
|
228 |
})(marker, item, i);
|
|
|
229 |
}
|
|
|
230 |
|
|
|
231 |
var markerCount = 0;
|
|
|
232 |
for (var j = 0; j < items.length; j++) { if (getLatLng(items[j])) markerCount++; }
|
|
|
233 |
|
|
|
234 |
var infoDiv = document.getElementById('beatMapInfo');
|
|
|
235 |
if (markerCount < items.length) {
|
|
|
236 |
infoDiv.innerHTML = '<i class="fa fa-exclamation-triangle"></i> Showing ' + markerCount + ' of ' + items.length + ' visits on map. ' + (items.length - markerCount) + ' visits have no location data.';
|
|
|
237 |
infoDiv.style.display = 'block';
|
|
|
238 |
} else {
|
|
|
239 |
infoDiv.style.display = 'none';
|
|
|
240 |
}
|
|
|
241 |
|
|
|
242 |
if (hasMarkers) {
|
|
|
243 |
map.fitBounds(bounds);
|
|
|
244 |
if (markerCount === 1) {
|
|
|
245 |
map.setZoom(14);
|
|
|
246 |
}
|
|
|
247 |
}
|
|
|
248 |
}, 400);
|
|
|
249 |
});
|
|
|
250 |
|
|
|
251 |
$(document).on('click', '.beat-detail-link', function () {
|
|
|
252 |
var rowIndex = $(this).data('row');
|
|
|
253 |
var type = $(this).data('type');
|
|
|
254 |
var data = window.beatReportData[rowIndex];
|
|
|
255 |
if (!data) return;
|
|
|
256 |
|
|
|
257 |
var items = data[type] || [];
|
|
|
258 |
var username = data.username;
|
|
|
259 |
|
|
|
260 |
var typeLabel = type.charAt(0).toUpperCase() + type.slice(1);
|
|
|
261 |
$('#beatDetailModalTitle').text(username + ' - ' + typeLabel + ' Visits (' + items.length + ')');
|
|
|
262 |
|
|
|
263 |
var tbody = '';
|
|
|
264 |
for (var i = 0; i < items.length; i++) {
|
|
|
265 |
var item = items[i];
|
|
|
266 |
tbody += '<tr>' +
|
|
|
267 |
'<td>' + (i + 1) + '</td>' +
|
|
|
268 |
'<td>' + (item.taskName || '--') + '</td>' +
|
|
|
269 |
'<td>' + (item.taskType || '--') + '</td>' +
|
|
|
270 |
'<td>' + (item.markType || '--') + '</td>' +
|
|
|
271 |
'<td>' + (item.address || '--') + '</td>' +
|
|
|
272 |
'<td>' + (item.checkInTime || '--') + '</td>' +
|
|
|
273 |
'<td>' + (item.checkOutTime || '--') + '</td>' +
|
|
|
274 |
'<td>' + (item.timeSpent || '--') + '</td>' +
|
|
|
275 |
'<td>' + (item.taskDescription || '--') + '</td>' +
|
|
|
276 |
'<td>' + (item.attachment ? '<a href="https://partners.smartdukaan.com/document/' + item.attachment + '" target="_blank"><i class="fa fa-paperclip"></i> View</a>' : '--') + '</td>' +
|
|
|
277 |
'</tr>';
|
|
|
278 |
}
|
|
|
279 |
if (items.length === 0) {
|
|
|
280 |
tbody = '<tr><td colspan="10" class="text-center">No records found</td></tr>';
|
|
|
281 |
}
|
|
|
282 |
$('#beatDetailTableBody').html(tbody);
|
|
|
283 |
$('#beatDetailModal').modal('show');
|
|
|
284 |
});
|
|
|
285 |
</script>
|