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

             #if($punchIn)
                 <tr style="background:#d5f5e3;">
                     <td>--</td>
                     <td><strong>PUNCH IN</strong></td>
                     <td>$!punchIn.getTaskType()</td>
-                    <td><span class="label label-info">PUNCHIN</span> #if($punchIn.getAttachment() && $punchIn.getAttachment() != "")<a href="https://partners.smartdukaan.com/document/$punchIn.getAttachment()" target="_blank" title="View Attachment"><i class="fa fa-paperclip" style="color:#e67e22; margin-left:5px;"></i></a>#end</td>
+                    <td><span class="label label-info">PUNCHIN</span> #if($punchIn.getAttachment() && $punchIn.getAttachment() != "")<a href="javascript:void(0);" class="view-attachment-link" data-attachment="$punchIn.getAttachment()" data-checkin-latlng="$!punchIn.getCheckInLatLng()" data-visit-location="$!punchIn.getVisitLocation()" data-tracking-id="$punchIn.getId()" title="View Attachment"><i class="fa fa-paperclip" style="color:#e67e22; margin-left:5px;"></i></a>#end</td>
                     <td>$!punchIn.getAddress()</td>
                     <td>$!punchIn.getCheckInTime()</td>
                     <td>--</td>
                     <td>--</td>
                     <td>--</td>
                             <span class="label label-danger">$v.getMarkType()</span>
                         #else
                             <span class="label label-default">$!v.getMarkType()</span>
                         #end
                         <a href="javascript:void(0);" class="beat-history-link" data-userid="$userId" data-taskid="$v.getTaskId()" data-tasktype="$!v.getTaskType()" data-taskname="$!v.getTaskName()" title="View History" style="margin-left:5px;"><i class="fa fa-history" style="color:#3498db; font-size:14px;"></i></a>
-                        #if($v.getAttachment() && $v.getAttachment() != "")<a href="https://partners.smartdukaan.com/document/$v.getAttachment()" target="_blank" title="View Attachment"><i class="fa fa-paperclip" style="color:#e67e22; margin-left:3px; font-size:14px;"></i></a>#end
+                        #if($v.getAttachment() && $v.getAttachment() != "")<a href="javascript:void(0);" class="view-attachment-link" data-attachment="$v.getAttachment()" data-checkin-latlng="$!v.getCheckInLatLng()" data-visit-location="$!v.getVisitLocation()" data-tracking-id="$v.getId()" title="View Attachment"><i class="fa fa-paperclip" style="color:#e67e22; margin-left:3px; font-size:14px;"></i></a>#end
                     </td>
                     <td>$!v.getAddress()</td>
                     <td>$!v.getCheckInTime()</td>
                     <td>$!v.getCheckOutTime()</td>
                     <td>$!v.getTimeSpent()</td>
             #if($punchOut)
                 <tr style="background:#fadbd8;">
                     <td>--</td>
                     <td><strong>PUNCH OUT</strong></td>
                     <td>$!punchOut.getTaskType()</td>
-                    <td><span class="label label-danger">PUNCHOUT</span> #if($punchOut.getAttachment() && $punchOut.getAttachment() != "")<a href="https://partners.smartdukaan.com/document/$punchOut.getAttachment()" target="_blank" title="View Attachment"><i class="fa fa-paperclip" style="color:#e67e22; margin-left:5px;"></i></a>#end</td>
+                    <td><span class="label label-danger">PUNCHOUT</span> #if($punchOut.getAttachment() && $punchOut.getAttachment() != "")<a href="javascript:void(0);" class="view-attachment-link" data-attachment="$punchOut.getAttachment()" data-checkin-latlng="$!punchOut.getCheckInLatLng()" data-visit-location="$!punchOut.getVisitLocation()" data-tracking-id="$punchOut.getId()" title="View Attachment"><i class="fa fa-paperclip" style="color:#e67e22; margin-left:5px;"></i></a>#end</td>
                     <td>$!punchOut.getAddress()</td>
                     <td>$!punchOut.getCheckInTime()</td>
                     <td>--</td>
                     <td>--</td>
                     <td>--</td>
             <div class="modal-body" style="padding:0;">
                 <div id="liveTrackingInfo" style="padding:8px 15px; background:#f8f9fa; border-bottom:1px solid #ddd; font-size:13px;"></div>
                 <div id="liveTrackingMap" style="height:500px; width:100%;"></div>
             </div>
             <div class="modal-footer">
-                <label style="float:left; margin-top:7px; font-weight:normal; font-size:13px;">
+                #*<label style="float:left; margin-top:7px; font-weight:normal; font-size:13px;">
-                    <input type="checkbox" id="autoRefreshToggle" checked style="margin-right:5px;"> Auto-refresh (30s)
+                    <input type="checkbox" id="autoRefreshToggle" style="margin-right:5px;"> Auto-refresh (30s)
-                </label>
+                </label>*#
                 <button type="button" class="btn btn-primary" id="refreshTrackingBtn"><i class="fa fa-refresh"></i> Refresh</button>
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             </div>
         </div>
     </div>
 </div>
+<!-- Attachment Viewer Modal -->
+<div class="modal fade" id="attachmentViewerModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document" style="width:600px;">
+        <div class="modal-content">
+            <div class="modal-header" style="background:#e67e22; color:white;">
+                <button type="button" class="close" data-dismiss="modal" style="color:white;">&times;</button>
+                <h4 class="modal-title"><i class="fa fa-paperclip"></i> Attachment</h4>
+            </div>
+            <div class="modal-body" style="text-align:center; padding:15px;">
+                <img id="attachmentImage" src="" style="max-width:100%; max-height:450px; border:1px solid #ddd; border-radius:4px;" />
+                <div id="attachmentDistanceInfo" style="margin-top:10px; font-size:13px;"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-success" id="approveCheckinBtn" style="display:none;">
+                    <i class="fa fa-check"></i> Approve
+                </button>
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
 <script>
     $('#userDetailTable').DataTable({
         "scrollX": true,
         "pageLength": 50,
         "bPaginate": true,
         "bLengthChange": true,
         "bFilter": true,
         "bInfo": true,
-        "bAutoWidth": false
+        "bAutoWidth": false,
+        "ordering": false
     });
     (function () {
         var level = $('#user-detail-level').data('selected');
         var selectedAuth = $('#user-detail-user').data('selected-auth');
         if (markType === 'PUNCHOUT') return '#e74c3c';
         return '#F4B400';
+    }
     function createTrackingMarkerIcon(color, label) {
-        var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="0 0 28 40">' +
+        var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="42" height="60" viewBox="0 0 42 60">' +
-            '<path d="M14 0C6.268 0 0 6.268 0 14c0 10.5 14 26 14 26s14-15.5 14-26C28 6.268 21.732 0 14 0z" fill="' + color + '"/>' +
+            '<path d="M21 0C9.402 0 0 9.402 0 21c0 15.75 21 39 21 39s21-23.25 21-39C42 9.402 32.598 0 21 0z" fill="' + color + '"/>' +
-            '<circle cx="14" cy="14" r="7" fill="white"/>' +
+            '<circle cx="21" cy="21" r="10" fill="white"/>' +
-            '<text x="14" y="18" text-anchor="middle" font-size="10" font-weight="bold" fill="' + color + '">' + label + '</text></svg>';
+            '<text x="21" y="26" text-anchor="middle" font-size="14" font-weight="bold" fill="' + color + '">' + label + '</text></svg>';
         return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
+    }
     function loadLiveTracking(userId, username) {
         var selectedDate = $('#user-detail-date').val();
             var marker = new google.maps.Marker({
                 position: pos,
                 map: liveTrackingMap,
                 icon: {
                     url: createTrackingMarkerIcon(getMarkerColor(v.markType), label),
-                    scaledSize: new google.maps.Size(28, 40),
+                    scaledSize: new google.maps.Size(42, 60),
-                    anchor: new google.maps.Point(14, 40)
+                    anchor: new google.maps.Point(21, 60)
                 },
                 title: v.taskName + ' (' + v.markType + ')',
                 zIndex: 100
             });
                     var stopMarker = new google.maps.Marker({
                         position: { lat: stop.lat, lng: stop.lng },
                         map: liveTrackingMap,
                         icon: {
                             path: google.maps.SymbolPath.CIRCLE,
-                            scale: 14,
+                            scale: 20,
                             fillColor: '#f39c12',
                             fillOpacity: 0.9,
                             strokeColor: '#e67e22',
                             strokeWeight: 2
                         },
-                        label: { text: formatDuration(stop.duration), fontSize: '9px', fontWeight: 'bold', color: '#000' },
+                        label: { text: formatDuration(stop.duration), fontSize: '12px', fontWeight: 'bold', color: '#000' },
                         title: 'Stopped for ' + formatDuration(stop.duration),
                         zIndex: 200
                     });
                     (function(marker, s) {
                         var iw = new google.maps.InfoWindow({
                 liveTrackingMap._currentMarker = new google.maps.Marker({
                     position: lastPoint,
                     map: liveTrackingMap,
                     icon: {
                         url: '${rc.contextPath}/resources/images/Bike-Icon-SD.png',
-                        scaledSize: new google.maps.Size(40, 40),
+                        scaledSize: new google.maps.Size(56, 56),
-                        anchor: new google.maps.Point(20, 20)
+                        anchor: new google.maps.Point(28, 28)
                     },
                     title: 'Last Known Location',
                     zIndex: 999
                 });
                 var lastGp = validPoints[validPoints.length - 1];
         document.head.appendChild(s);
+    }
     var liveTrackingUsername = '';
-    function startAutoRefresh() {
+    /*function startAutoRefresh() {
         stopAutoRefresh();
         if ($('#autoRefreshToggle').is(':checked') && liveTrackingUserId) {
             liveTrackingInterval = setInterval(function () {
                 loadLiveTracking(liveTrackingUserId, liveTrackingUsername);
             }, 30000);
     function stopAutoRefresh() {
         if (liveTrackingInterval) {
             clearInterval(liveTrackingInterval);
             liveTrackingInterval = null;
+        }
-    }
+    }*/
     $(document).on('click.livetrack', '.live-tracking-btn', function () {
         liveTrackingUserId = $(this).data('userid');
         liveTrackingUsername = $(this).data('username');
         $('#liveTrackingModalTitle').html('<img src="${rc.contextPath}/resources/images/Bike-Icon-SD.png" style="height:24px; vertical-align:middle; margin-right:6px;"> Live Tracking - ' + liveTrackingUsername);
     $('#liveTrackingModal').on('hidden.bs.modal', function () {
         stopAutoRefresh();
         liveTrackingUserId = null;
     });
+    // Attachment Viewer
+    $(document).on('click', '.view-attachment-link', function () {
+        var attachment = $(this).data('attachment');
+        var checkinLatLng = $(this).data('checkin-latlng') || '';
+        var visitLocation = $(this).data('visit-location') || '';
+        var trackingId = $(this).data('tracking-id');
+        var imgUrl = context + '/document/' + attachment;
+        $('#attachmentImage').attr('src', imgUrl);
+        $('#approveCheckinBtn').hide().removeData('tracking-id');
+        $('#attachmentDistanceInfo').html('');
+        var distanceM = -1;
+        if (checkinLatLng && visitLocation && checkinLatLng.indexOf(',') > 0 && visitLocation.indexOf(',') > 0) {
+            var cParts = checkinLatLng.toString().split(',');
+            var vParts = visitLocation.toString().split(',');
+            var cLat = parseFloat(cParts[0]);
+            var cLng = parseFloat(cParts[1]);
+            var vLat = parseFloat(vParts[0]);
+            var vLng = parseFloat(vParts[1]);
+            if (!isNaN(cLat) && !isNaN(cLng) && !isNaN(vLat) && !isNaN(vLng) && !(cLat === 0 && cLng === 0) && !(vLat === 0 && vLng === 0)) {
+                distanceM = haversineMeters(cLat, cLng, vLat, vLng);
+            }
+        }
+        if (distanceM > 50) {
+            $('#attachmentDistanceInfo').html(
+                '<span class="label label-danger" style="font-size:12px; padding:4px 10px;">' +
+                '<i class="fa fa-exclamation-triangle"></i> Checkin Distance: ' + Math.round(distanceM) + 'm (exceeds 50m radius)</span>'
+            );
+            $('#approveCheckinBtn').show().data('tracking-id', trackingId);
+        } else if (distanceM >= 0) {
+            $('#attachmentDistanceInfo').html(
+                '<span class="label label-success" style="font-size:12px; padding:4px 10px;">' +
+                '<i class="fa fa-check-circle"></i> Checkin Distance: ' + Math.round(distanceM) + 'm (within 50m radius)</span>'
+            );
+        }
+        $('#attachmentViewerModal').modal('show');
+    });
+    $(document).on('click', '#approveCheckinBtn', function () {
+        var btn = $(this);
+        var trackingId = btn.data('tracking-id');
+        if (!trackingId) return;
+        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Approving...');
+        $.ajax({
+            url: context + '/beat-report/approve-checkin',
+            type: 'POST',
+            data: { trackingId: trackingId },
+            success: function () {
+                btn.html('<i class="fa fa-check"></i> Approved').removeClass('btn-success').addClass('btn-default').prop('disabled', true);
+                alert('Checkin approved successfully');
+            },
+            error: function () {
+                btn.prop('disabled', false).html('<i class="fa fa-check"></i> Approve');
+                alert('Failed to approve checkin');
+            }
+        });
+    });
 </script>

Subversion Repositories SmartDukaan

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