Subversion Repositories SmartDukaan

Rev

Rev 36669 | Rev 36693 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
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;">&times;</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;">&times;</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>
36669 vikas 103 
                        <th>Agenda/Partner Name</th>
36645 vikas 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>
36666 vikas 111 
                        <th>Extimated Time</th>
36645 vikas 112 
                        <th>Attachment</th>
113 
                    </tr>
114 
                    </thead>
115 
                    <tbody id="beatDetailTableBody"></tbody>
116 
                </table>
117 
            </div>
118 
            <div class="modal-footer">
119 
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
120 
            </div>
121 
        </div>
122 
    </div>
123 
</div>
124 
 
125 
<script>
126 
    $('#beatReportTable').DataTable({
127 
        "scrollX": true,
36685 vikas 128 
        "pageLength": 50,
36645 vikas 129 
        "bPaginate": true,
130 
        "bLengthChange": true,
131 
        "bFilter": true,
132 
        "bInfo": true,
133 
        "bAutoWidth": false
134 
    });
135 
 
136 
    var beatMapMarkerColors = {
137 
        'PENDING': '#F4B400',
138 
        'DEFERRED': '#DB4437',
139 
        'CHECKIN': '#4285F4',
140 
        'CHECKIN-CHECKOUT': '#0F9D58',
141 
        'CHECKOUT': '#0F9D58'
142 
    };
143 
 
144 
    function getMarkerColor(markType) {
145 
        return beatMapMarkerColors[markType] || '#999999';
146 
    }
147 
 
148 
    function createColoredMarkerIcon(color, label) {
149 
        var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="42" viewBox="0 0 32 42">' +
150 
            '<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 + '"/>' +
151 
            '<circle cx="16" cy="15" r="10" fill="white"/>' +
152 
            '<text x="16" y="20" text-anchor="middle" font-size="12" font-weight="bold" fill="' + color + '">' + label + '</text>' +
153 
            '</svg>';
154 
        return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
155 
    }
156 
 
157 
    function getLatLng(item) {
158 
        var loc = item.visitLocation || item.checkInLatLng || '';
159 
        if (!loc || loc === '0.0000,0.0000') return null;
160 
        var parts = loc.split(',');
161 
        if (parts.length !== 2) return null;
162 
        var lat = parseFloat(parts[0].trim());
163 
        var lng = parseFloat(parts[1].trim());
164 
        if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) return null;
165 
        return { lat: lat, lng: lng };
166 
    }
167 
 
168 
    $(document).on('click', '.beat-map-link', function () {
169 
        var rowIndex = $(this).data('row');
170 
        var data = window.beatReportData[rowIndex];
171 
        if (!data) return;
172 
 
173 
        var items = data.total || [];
174 
        var username = data.username;
175 
        $('#beatMapModalTitle').text(username + ' - Visit Locations (' + items.length + ')');
176 
 
177 
        if (typeof google === 'undefined' || !google.maps) {
178 
            alert('Google Maps is still loading. Please try again in a moment.');
179 
            return;
180 
        }
181 
 
182 
        $('#beatMapModal').modal('show');
183 
 
184 
        setTimeout(function () {
185 
            var mapDiv = document.getElementById('beatMapContainer');
186 
            var bounds = new google.maps.LatLngBounds();
187 
            var hasMarkers = false;
188 
 
189 
            var map = new google.maps.Map(mapDiv, {
190 
                zoom: 10,
191 
                center: { lat: 20.5937, lng: 78.9629 },
192 
                mapTypeId: 'roadmap'
193 
            });
194 
 
195 
            var infoWindow = new google.maps.InfoWindow();
196 
 
197 
            for (var i = 0; i < items.length; i++) {
198 
                var item = items[i];
199 
                var pos = getLatLng(item);
200 
                if (!pos) continue;
201 
 
202 
                hasMarkers = true;
203 
                bounds.extend(pos);
204 
 
205 
                var color = getMarkerColor(item.markType);
206 
                var marker = new google.maps.Marker({
207 
                    position: pos,
208 
                    map: map,
209 
                    title: item.taskName || item.markType,
210 
                    icon: {
211 
                        url: createColoredMarkerIcon(color, (i + 1)),
212 
                        scaledSize: new google.maps.Size(32, 42),
213 
                        anchor: new google.maps.Point(16, 42)
214 
                    }
215 
                });
216 
 
217 
                (function (m, itm, idx) {
218 
                    google.maps.event.addListener(m, 'click', function () {
219 
                        var content = '<div style="min-width:200px;">' +
220 
                            '<strong>' + (idx + 1) + '. ' + (itm.taskName || '--') + '</strong><br>' +
221 
                            '<b>Status:</b> ' + (itm.markType || '--') + '<br>' +
222 
                            '<b>Address:</b> ' + (itm.address || '--') + '<br>' +
223 
                            '<b>Check In:</b> ' + (itm.checkInTime || '--') + '<br>' +
224 
                            '<b>Check Out:</b> ' + (itm.checkOutTime || '--') + '<br>' +
225 
                            '<b>Time Spent:</b> ' + (itm.timeSpent || '--') +
226 
                            '</div>';
227 
                        infoWindow.setContent(content);
228 
                        infoWindow.open(map, m);
229 
                    });
230 
                })(marker, item, i);
231 
            }
232 
 
233 
            var markerCount = 0;
234 
            for (var j = 0; j < items.length; j++) { if (getLatLng(items[j])) markerCount++; }
235 
 
236 
            var infoDiv = document.getElementById('beatMapInfo');
237 
            if (markerCount < items.length) {
238 
                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.';
239 
                infoDiv.style.display = 'block';
240 
            } else {
241 
                infoDiv.style.display = 'none';
242 
            }
243 
 
244 
            if (hasMarkers) {
245 
                map.fitBounds(bounds);
246 
                if (markerCount === 1) {
247 
                    map.setZoom(14);
248 
                }
249 
            }
250 
        }, 400);
251 
    });
252 
 
253 
    $(document).on('click', '.beat-detail-link', function () {
254 
        var rowIndex = $(this).data('row');
255 
        var type = $(this).data('type');
256 
        var data = window.beatReportData[rowIndex];
257 
        if (!data) return;
258 
 
259 
        var items = data[type] || [];
260 
        var username = data.username;
261 
 
262 
        var typeLabel = type.charAt(0).toUpperCase() + type.slice(1);
263 
        $('#beatDetailModalTitle').text(username + ' - ' + typeLabel + ' Visits (' + items.length + ')');
264 
 
265 
        var tbody = '';
266 
        for (var i = 0; i < items.length; i++) {
267 
            var item = items[i];
268 
            tbody += '<tr>' +
269 
                '<td>' + (i + 1) + '</td>' +
270 
                '<td>' + (item.taskName || '--') + '</td>' +
271 
                '<td>' + (item.taskType || '--') + '</td>' +
272 
                '<td>' + (item.markType || '--') + '</td>' +
273 
                '<td>' + (item.address || '--') + '</td>' +
274 
                '<td>' + (item.checkInTime || '--') + '</td>' +
275 
                '<td>' + (item.checkOutTime || '--') + '</td>' +
276 
                '<td>' + (item.timeSpent || '--') + '</td>' +
277 
                '<td>' + (item.taskDescription || '--') + '</td>' +
36666 vikas 278 
                '<td>' + (item.estimatedTime || '--') + '</td>' +
36645 vikas 279 
                '<td>' + (item.attachment ? '<a href="https://partners.smartdukaan.com/document/' + item.attachment + '" target="_blank"><i class="fa fa-paperclip"></i> View</a>' : '--') + '</td>' +
280 
                '</tr>';
281 
        }
282 
        if (items.length === 0) {
283 
            tbody = '<tr><td colspan="10" class="text-center">No records found</td></tr>';
284 
        }
285 
        $('#beatDetailTableBody').html(tbody);
286 
        $('#beatDetailModal').modal('show');
287 
    });
288 
</script>