WebSVN – SmartDukaan – Diff – //trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/beat-report-user-detail.vm

 </div>
 <script>
     $('#userDetailTable').DataTable({
         "scrollX": true,
+        "pageLength": 50,
         "bPaginate": true,
         "bLengthChange": true,
         "bFilter": true,
         "bInfo": true,
         "bAutoWidth": false
                 $('#liveTrackingInfo').html('<span style="color:red;">Failed to load tracking data.</span>');
+            }
         });
+    }
+    function clearMapOverlays() {
+        if (!liveTrackingMap) return;
+        if (liveTrackingMap._markers) {
+            liveTrackingMap._markers.forEach(function (m) { m.setMap(null); });
+        }
+        if (liveTrackingMap._polyline) {
+            liveTrackingMap._polyline.setMap(null);
+        }
+        if (liveTrackingMap._gpsDots) {
+            liveTrackingMap._gpsDots.forEach(function (m) { m.setMap(null); });
+        }
+        if (liveTrackingMap._stopMarkers) {
+            liveTrackingMap._stopMarkers.forEach(function (m) { m.setMap(null); });
+        }
+        if (liveTrackingMap._currentMarker) {
+            liveTrackingMap._currentMarker.setMap(null);
+        }
+        if (liveTrackingMap._directionsRenderer) {
+            liveTrackingMap._directionsRenderer.setMap(null);
+        }
+        liveTrackingMap._markers = [];
+        liveTrackingMap._gpsDots = [];
+        liveTrackingMap._stopMarkers = [];
+    }
+    function formatEpoch(ts) {
+        if (!ts) return 'N/A';
+        var n = parseFloat(ts);
+        if (isNaN(n)) return ts;
+        if (n < 1e12) n = n * 1000;
+        var d = new Date(n);
+        return d.getHours().toString().padStart(2,'0') + ':' + d.getMinutes().toString().padStart(2,'0') + ':' + d.getSeconds().toString().padStart(2,'0');
+    }
+    function formatDuration(ms) {
+        var sec = Math.floor(ms / 1000);
+        var h = Math.floor(sec / 3600);
+        var m = Math.floor((sec % 3600) / 60);
+        var s = sec % 60;
+        if (h > 0) return h + 'h ' + m + 'm';
+        if (m > 0) return m + 'm ' + s + 's';
+        return s + 's';
+    }
+    function haversineMeters(lat1, lon1, lat2, lon2) {
+        var R = 6371000;
+        var dLat = (lat2 - lat1) * Math.PI / 180;
+        var dLon = (lon2 - lon1) * Math.PI / 180;
+        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
+                Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+                Math.sin(dLon/2) * Math.sin(dLon/2);
+        return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+    }
+    function detectStops(points, radiusM, minTimeMs) {
+        var stops = [];
+        var i = 0;
+        while (i < points.length) {
+            var cluster = [points[i]];
+            var cLat = points[i].lat, cLng = points[i].lng;
+            var j = i + 1;
+            while (j < points.length) {
+                if (haversineMeters(cLat, cLng, points[j].lat, points[j].lng) <= radiusM) {
+                    cluster.push(points[j]);
+                    j++;
+                } else {
+                    break;
+                }
+            }
+            if (cluster.length >= 2) {
+                var t0 = parseFloat(cluster[0].ts);
+                var t1 = parseFloat(cluster[cluster.length - 1].ts);
+                if (t0 < 1e12) t0 *= 1000;
+                if (t1 < 1e12) t1 *= 1000;
+                var duration = t1 - t0;
+                if (duration >= minTimeMs) {
+                    var avgLat = 0, avgLng = 0;
+                    cluster.forEach(function(p) { avgLat += p.lat; avgLng += p.lng; });
+                    stops.push({
+                        lat: avgLat / cluster.length,
+                        lng: avgLng / cluster.length,
+                        startTime: t0,
+                        endTime: t1,
+                        duration: duration,
+                        pointCount: cluster.length
+                    });
+                }
+            }
+            i = j;
+        }
+        return stops;
+    }
     function renderLiveTrackingMap(data, username) {
         var visits = data.visits || [];
         var pathPoints = data.pathPoints || [];
         if (!liveTrackingMap) {
                 mapTypeControl: true,
                 streetViewControl: false
             });
+        }
-        if (liveTrackingMap._markers) {
-            liveTrackingMap._markers.forEach(function (m) { m.setMap(null); });
-        }
-        if (liveTrackingMap._polyline) {
-            liveTrackingMap._polyline.setMap(null);
-        }
-        if (liveTrackingMap._visitRoute) {
-            liveTrackingMap._visitRoute.setMap(null);
-        }
-        if (liveTrackingMap._currentMarker) {
-            liveTrackingMap._currentMarker.setMap(null);
-        }
-        liveTrackingMap._markers = [];
+        clearMapOverlays();
         var bounds = new google.maps.LatLngBounds();
         var hasPoints = false;
         var visitIdx = 0;
+        var visitCoords = [];
         for (var i = 0; i < visits.length; i++) {
             var v = visits[i];
             if (!v.lat || !v.lng) continue;
             var lat = parseFloat(v.lat);
             if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) continue;
             hasPoints = true;
             var pos = { lat: lat, lng: lng };
             bounds.extend(pos);
+            visitCoords.push(pos);
             var label = v.markType === 'PUNCHIN' ? 'P' : (v.markType === 'PUNCHOUT' ? 'X' : String(++visitIdx));
             var marker = new google.maps.Marker({
                 position: pos,
                 map: liveTrackingMap,
                 icon: {
                     url: createTrackingMarkerIcon(getMarkerColor(v.markType), label),
                     scaledSize: new google.maps.Size(28, 40),
                     anchor: new google.maps.Point(14, 40)
                 },
-                title: v.taskName + ' (' + v.markType + ')'
+                title: v.taskName + ' (' + v.markType + ')',
+                zIndex: 100
             });
-            var infoContent = '<div style="font-size:13px; max-width:250px;">' +
+            var infoContent = '<div style="font-size:13px; max-width:280px;">' +
                 '<strong>' + (v.taskName || '') + '</strong><br>' +
-                '<span class="label" style="background:' + getMarkerColor(v.markType) + '; color:white;">' + v.markType + '</span><br>' +
+                '<span class="label" style="background:' + getMarkerColor(v.markType) + '; color:white;">' + v.markType + '</span>' +
+                (v.taskType ? ' <span class="label label-default">' + v.taskType + '</span>' : '') + '<br>' +
-                (v.checkInTime ? '<i class="fa fa-sign-in"></i> ' + v.checkInTime + '<br>' : '') +
+                (v.checkInTime ? '<i class="fa fa-sign-in" style="color:#27ae60;"></i> In: <strong>' + v.checkInTime + '</strong><br>' : '') +
-                (v.checkOutTime ? '<i class="fa fa-sign-out"></i> ' + v.checkOutTime + '<br>' : '') +
+                (v.checkOutTime ? '<i class="fa fa-sign-out" style="color:#e74c3c;"></i> Out: <strong>' + v.checkOutTime + '</strong><br>' : '') +
+                (v.timeSpent ? '<i class="fa fa-clock-o" style="color:#f39c12;"></i> Time Spent: <strong>' + v.timeSpent + '</strong><br>' : '') +
+                (v.transitTime ? '<i class="fa fa-car" style="color:#3498db;"></i> Transit: <strong>' + v.transitTime + '</strong><br>' : '') +
+                (v.totalDistance && v.totalDistance !== '0.0' ? '<i class="fa fa-road" style="color:#8e44ad;"></i> Distance: <strong>' + v.totalDistance + ' km</strong><br>' : '') +
-                (v.address ? '<i class="fa fa-map-marker"></i> ' + v.address : '') +
+                (v.address ? '<i class="fa fa-map-marker" style="color:#e74c3c;"></i> ' + v.address : '') +
                 '</div>';
             (function (m, c) {
                 var iw = new google.maps.InfoWindow({ content: c });
                 m.addListener('click', function () { iw.open(liveTrackingMap, m); });
             })(marker, infoContent);
             liveTrackingMap._markers.push(marker);
+        }
-        // Draw visit-to-visit route (dashed line with arrows)
+        // Draw actual road path between visits using Directions API
-        var visitCoords = [];
+        if (visitCoords.length >= 2) {
-        for (var vi = 0; vi < visits.length; vi++) {
-            var vv = visits[vi];
+            var origin = visitCoords[0];
-            if (!vv.lat || !vv.lng) continue;
-            var vLat = parseFloat(vv.lat);
+            var destination = visitCoords[visitCoords.length - 1];
-            var vLng = parseFloat(vv.lng);
+            var waypoints = [];
-            if (isNaN(vLat) || isNaN(vLng) || (vLat === 0 && vLng === 0)) continue;
+            for (var wi = 1; wi < visitCoords.length - 1; wi++) {
-            visitCoords.push({ lat: vLat, lng: vLng });
+                waypoints.push({ location: visitCoords[wi], stopover: true });
-        }
+            }
-        if (visitCoords.length > 1) {
+            var directionsService = new google.maps.DirectionsService();
-            liveTrackingMap._visitRoute = new google.maps.Polyline({
+            var directionsRenderer = new google.maps.DirectionsRenderer({
-                path: visitCoords,
+                map: liveTrackingMap,
-                geodesic: true,
+                suppressMarkers: true,
+                polylineOptions: {
-                strokeColor: '#8e44ad',
+                    strokeColor: '#8e44ad',
-                strokeOpacity: 0,
+                    strokeOpacity: 0.7,
-                strokeWeight: 3,
+                    strokeWeight: 4
-                icons: [{
+                },
+                preserveViewport: true
+            });
-                    icon: { path: 'M 0,-1 0,1', strokeOpacity: 0.6, strokeWeight: 3, scale: 3 },
+            liveTrackingMap._directionsRenderer = directionsRenderer;
+            directionsService.route({
-                    offset: '0',
+                origin: origin,
-                    repeat: '16px'
+                destination: destination,
-                }, {
+                waypoints: waypoints,
-                    icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, strokeOpacity: 0.8, scale: 3 },
+                travelMode: google.maps.TravelMode.DRIVING,
-                    offset: '50%',
+                optimizeWaypoints: false
-                    repeat: '200px'
+            }, function (result, status) {
-                }],
+                if (status === 'OK') {
+                    directionsRenderer.setDirections(result);
-                map: liveTrackingMap
+                }
             });
+        }
+        // Draw GPS tracked path with red dots + connecting line
+        var totalGpsDistanceM = 0;
+        var accuracySum = 0;
+        var accuracyCount = 0;
+        var stopsDetected = [];
         if (pathPoints.length > 0) {
-            var pathCoords = [];
+            var validPoints = [];
             for (var j = 0; j < pathPoints.length; j++) {
                 var pt = pathPoints[j];
                 var pLat = parseFloat(pt.lat);
                 var pLng = parseFloat(pt.lng);
                 if (isNaN(pLat) || isNaN(pLng) || (pLat === 0 && pLng === 0)) continue;
+                var acc = parseFloat(pt.accuracy);
+                if (!isNaN(acc)) { accuracySum += acc; accuracyCount++; }
-                pathCoords.push({ lat: pLat, lng: pLng });
+                validPoints.push({ lat: pLat, lng: pLng, ts: pt.timestamp, accuracy: pt.accuracy });
                 bounds.extend({ lat: pLat, lng: pLng });
                 hasPoints = true;
+            }
+            // Calculate total GPS distance
+            for (var d = 1; d < validPoints.length; d++) {
+                totalGpsDistanceM += haversineMeters(validPoints[d-1].lat, validPoints[d-1].lng, validPoints[d].lat, validPoints[d].lng);
+            }
-            if (pathCoords.length > 0) {
+            if (validPoints.length > 0) {
+                var pathCoords = validPoints.map(function(p) { return { lat: p.lat, lng: p.lng }; });
+                // Blue connecting line
                 liveTrackingMap._polyline = new google.maps.Polyline({
                     path: pathCoords,
                     geodesic: true,
-                    strokeColor: '#3498db',
+                    strokeColor: '#e74c3c',
-                    strokeOpacity: 0.8,
+                    strokeOpacity: 0.7,
                     strokeWeight: 3,
+                    zIndex: 50,
                     map: liveTrackingMap
                 });
+                // Red dots for each GPS point
+                liveTrackingMap._gpsDots = [];
+                for (var gi = 0; gi < validPoints.length; gi++) {
+                    var gp = validPoints[gi];
+                    var dot = new google.maps.Marker({
+                        position: { lat: gp.lat, lng: gp.lng },
+                        map: liveTrackingMap,
+                        icon: {
+                            path: google.maps.SymbolPath.CIRCLE,
+                            scale: 4,
+                            fillColor: '#e74c3c',
+                            fillOpacity: 1,
+                            strokeColor: '#b71c1c',
+                            strokeWeight: 1
+                        },
+                        zIndex: 80
+                    });
+                    (function(marker, point, idx) {
+                        var iw = new google.maps.InfoWindow({
+                            content: '<div style="font-size:12px;">' +
+                                '<strong>GPS Point #' + (idx + 1) + '</strong><br>' +
+                                '<i class="fa fa-clock-o"></i> ' + formatEpoch(point.ts) + '<br>' +
+                                '<i class="fa fa-crosshairs"></i> Accuracy: ' + (point.accuracy || 'N/A') + 'm<br>' +
+                                '<i class="fa fa-map-marker"></i> ' + point.lat.toFixed(6) + ', ' + point.lng.toFixed(6) +
+                                '</div>'
+                        });
+                        marker.addListener('click', function() { iw.open(liveTrackingMap, marker); });
+                    })(dot, gp, gi);
+                    liveTrackingMap._gpsDots.push(dot);
+                }
+                // Detect stationary stops (within 50m for >5 min)
+                stopsDetected = detectStops(validPoints, 50, 5 * 60 * 1000);
+                liveTrackingMap._stopMarkers = [];
+                for (var si = 0; si < stopsDetected.length; si++) {
+                    var stop = stopsDetected[si];
+                    var stopMarker = new google.maps.Marker({
+                        position: { lat: stop.lat, lng: stop.lng },
+                        map: liveTrackingMap,
+                        icon: {
+                            path: google.maps.SymbolPath.CIRCLE,
+                            scale: 14,
+                            fillColor: '#f39c12',
+                            fillOpacity: 0.9,
+                            strokeColor: '#e67e22',
+                            strokeWeight: 2
+                        },
+                        label: { text: formatDuration(stop.duration), fontSize: '9px', fontWeight: 'bold', color: '#000' },
+                        title: 'Stopped for ' + formatDuration(stop.duration),
+                        zIndex: 200
+                    });
+                    (function(marker, s) {
+                        var iw = new google.maps.InfoWindow({
+                            content: '<div style="font-size:13px;">' +
+                                '<strong><i class="fa fa-pause-circle" style="color:#f39c12;"></i> Stationary Stop</strong><br>' +
+                                '<i class="fa fa-clock-o"></i> Duration: <strong>' + formatDuration(s.duration) + '</strong><br>' +
+                                '<i class="fa fa-sign-in"></i> From: <strong>' + new Date(s.startTime).toLocaleTimeString() + '</strong><br>' +
+                                '<i class="fa fa-sign-out"></i> To: <strong>' + new Date(s.endTime).toLocaleTimeString() + '</strong><br>' +
+                                '<i class="fa fa-map-marker"></i> ' + s.lat.toFixed(6) + ', ' + s.lng.toFixed(6) + '<br>' +
+                                '<i class="fa fa-dot-circle-o"></i> Points in cluster: ' + s.pointCount +
+                                '</div>'
+                        });
+                        marker.addListener('click', function() { iw.open(liveTrackingMap, marker); });
+                    })(stopMarker, stop);
+                    liveTrackingMap._stopMarkers.push(stopMarker);
+                }
+                // Last known location marker
                 var lastPoint = pathCoords[pathCoords.length - 1];
                 liveTrackingMap._currentMarker = new google.maps.Marker({
                     position: lastPoint,
                     map: liveTrackingMap,
                     icon: {
                         path: google.maps.SymbolPath.CIRCLE,
                         scale: 10,
-                        fillColor: '#e74c3c',
+                        fillColor: '#27ae60',
                         fillOpacity: 1,
                         strokeColor: '#ffffff',
                         strokeWeight: 3
                     },
                     title: 'Last Known Location',
                     zIndex: 999
                 });
-                var lastTs = pathPoints[pathPoints.length - 1].timestamp || 'N/A';
+                var lastGp = validPoints[validPoints.length - 1];
                 var currentIw = new google.maps.InfoWindow({
-                    content: '<div style="font-size:13px;"><strong><i class="fa fa-crosshairs"></i> Last Known Location</strong><br>Time: ' + lastTs + '</div>'
+                    content: '<div style="font-size:13px;"><strong><i class="fa fa-crosshairs" style="color:#27ae60;"></i> Last Known Location</strong><br>' +
+                        '<i class="fa fa-clock-o"></i> Time: ' + formatEpoch(lastGp.ts) + '<br>' +
+                        '<i class="fa fa-crosshairs"></i> Accuracy: ' + (lastGp.accuracy || 'N/A') + 'm</div>'
                 });
                 liveTrackingMap._currentMarker.addListener('click', function () {
                     currentIw.open(liveTrackingMap, liveTrackingMap._currentMarker);
                 });
+            }
         if (hasPoints) {
             liveTrackingMap.fitBounds(bounds);
+        }
+        // Info bar
         var totalVisits = visits.filter(function (v) { return v.markType !== 'PUNCHIN' && v.markType !== 'PUNCHOUT'; }).length;
         var completedVisits = visits.filter(function (v) { return v.markType === 'CHECKIN-CHECKOUT' || v.markType === 'CHECKOUT'; }).length;
         var now = new Date();
         var timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0') + ':' + now.getSeconds().toString().padStart(2, '0');
+        var avgAccuracy = accuracyCount > 0 ? (accuracySum / accuracyCount).toFixed(0) : null;
+        var accuracyLabel = '';
-        $('#liveTrackingInfo').html(
+        var accuracyBadge = '';
+        if (avgAccuracy) {
+            if (avgAccuracy <= 10) { accuracyLabel = 'High'; accuracyBadge = 'background:#27ae60;'; }
+            else if (avgAccuracy <= 30) { accuracyLabel = 'Good'; accuracyBadge = 'background:#2ecc71;'; }
+            else if (avgAccuracy <= 100) { accuracyLabel = 'Average'; accuracyBadge = 'background:#f39c12;'; }
+            else { accuracyLabel = 'Low'; accuracyBadge = 'background:#e74c3c;'; }
+        }
+        var totalGpsKm = (totalGpsDistanceM / 1000).toFixed(2);
-            '<strong>' + username + '</strong> | ' +
+        var infoHtml = '<strong>' + username + '</strong> | ' +
             'Visits: <strong>' + totalVisits + '</strong> | ' +
-            'Completed: <strong>' + completedVisits + '</strong> | ' +
+            'Completed: <strong>' + completedVisits + '</strong>';
+        if (pathPoints.length > 0) {
+            infoHtml += ' | GPS Distance: <strong>' + totalGpsKm + ' km</strong>';
-            'Path Points: <strong>' + pathPoints.length + '</strong>' +
+            infoHtml += ' | Points: <strong>' + pathPoints.length + '</strong>';
+            if (accuracyLabel) {
+                infoHtml += ' | Accuracy: <span class="label" style="' + accuracyBadge + ' color:white; padding:2px 8px; border-radius:3px; font-size:11px;">' + accuracyLabel + '</span> (' + avgAccuracy + 'm)';
+            }
+            if (stopsDetected.length > 0) {
+                infoHtml += ' | <span style="color:#f39c12;"><i class="fa fa-pause-circle"></i></span> Stops: <strong>' + stopsDetected.length + '</strong>';
+            }
-            (pathPoints.length > 0 ? ' | <span style="color:#e74c3c;"><i class="fa fa-circle"></i></span> Last Known' : '') +
+            infoHtml += ' | <span style="color:#27ae60;"><i class="fa fa-circle"></i></span> Last Known';
+        } else {
-            ' | <span style="color:#3498db;">━</span> GPS Path' +
+            infoHtml += ' | <span style="color:#999;"><i class="fa fa-exclamation-triangle"></i> No GPS data yet</span>';
+        }
-            (visitCoords.length > 1 ? ' | <span style="color:#8e44ad;">┅</span> Visit Route' : '') +
+        infoHtml += ' | <span style="color:#e74c3c;"><i class="fa fa-circle" style="font-size:8px;"></i></span> GPS Trail';
+        if (visitCoords.length > 1) {
+            infoHtml += ' | <span style="background:#8e44ad; display:inline-block; width:14px; height:3px; vertical-align:middle; margin:0 2px;"></span> Route';
+        }
-            ' | <span style="color:#999;">Updated: ' + timeStr + '</span>'
+        infoHtml += ' | <span style="color:#999;">Updated: ' + timeStr + '</span>';
+        $('#liveTrackingInfo').html(infoHtml);
+        // Low data warning
+        if (pathPoints.length > 0 && pathPoints.length < 10) {
+            $('#liveTrackingInfo').append(
+                '<div style="margin-top:4px; padding:4px 8px; background:#fff3cd; border:1px solid #ffc107; border-radius:3px; font-size:11px; color:#856404;">' +
+                '<i class="fa fa-exclamation-triangle"></i> Received less data points from device due to: Low Battery level, ' +
+                'GPS/location switched off, or phone automatically switched off the location service.' +
+                '</div>'
+            );
-        );
+        }
+    }
     function ensureGoogleMaps(callback) {
         if (window.google && window.google.maps) {
             callback();

Subversion Repositories SmartDukaan

(root)//trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/beat-report-user-detail.vm – Rev 36682 → 36685