Subversion Repositories SmartDukaan

Rev

Rev 36666 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<script>
    if (!window.google || !window.google.maps) {
        var s = document.createElement('script');
        s.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&v=weekly';
        document.head.appendChild(s);
    }
</script>

<div class="col-lg-12">
    <table class="table table-border table-condensed table-bordered" id="beatReportTable" style="width:100%">
        <thead>
        <tr>
            <th>User Name</th>
            <th>Total Visits</th>
            <th>Completed Visits</th>
            <th>Pending Visits</th>
            <th>Deferred</th>
            <th>Live Tracking</th>
        </tr>
        </thead>
        <tbody>
        #set($rowIndex = 0)
        #foreach($row in $reportRows)
            <tr>
                <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>
                <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>
                <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>
                <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>
                <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>
                <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>
            </tr>

            <script>
                window.beatReportData = window.beatReportData || {};
                window.beatReportData[$rowIndex] = {
                    username: "$row.get('username').replace('"', '\"')",
                    total: [
                        #foreach($lt in $row.get("totalList"))
                        { 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()" },
                        #end
                    ],
                    completed: [
                        #foreach($lt in $row.get("completedList"))
                        { 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()" },
                        #end
                    ],
                    pending: [
                        #foreach($lt in $row.get("pendingList"))
                        { 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()" },
                        #end
                    ],
                    deferred: [
                        #foreach($lt in $row.get("deferredList"))
                        { 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()" },
                        #end
                    ]
                };
            </script>
            #set($rowIndex = $rowIndex + 1)
        #end
        </tbody>
    </table>
</div>

<!-- Map Modal -->
<div class="modal fade" id="beatMapModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document" style="width:90%;">
        <div class="modal-content">
            <div class="modal-header" style="background:#1abc9c; color:white;">
                <button type="button" class="close" data-dismiss="modal" style="color:white;">&times;</button>
                <h4 class="modal-title" id="beatMapModalTitle">Visit Locations</h4>
            </div>
            <div class="modal-body" style="padding:0;">
                <div id="beatMapContainer" style="height:500px; width:100%;"></div>
                <div id="beatMapInfo" style="padding:6px 15px; background:#fff3cd; border-top:1px solid #ddd; color:#856404; display:none;"></div>
                <div style="padding:8px 15px; background:#f5f5f5; border-top:1px solid #ddd;">
                    <span style="margin-right:15px;"><i class="fa fa-circle" style="color:#4285F4;"></i> Check In</span>
                    <span style="margin-right:15px;"><i class="fa fa-circle" style="color:#0F9D58;"></i> Completed</span>
                    <span style="margin-right:15px;"><i class="fa fa-circle" style="color:#F4B400;"></i> Pending</span>
                    <span><i class="fa fa-circle" style="color:#DB4437;"></i> Deferred</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Detail Popup Modal -->
<div class="modal fade" id="beatDetailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header" style="background:#1abc9c; color:white;">
                <button type="button" class="close" data-dismiss="modal" style="color:white;">&times;</button>
                <h4 class="modal-title" id="beatDetailModalTitle">Visit Details</h4>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-condensed table-striped" id="beatDetailTable" style="width:100%">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Task Name</th>
                        <th>Type</th>
                        <th>Status</th>
                        <th>Address</th>
                        <th>Check In</th>
                        <th>Check Out</th>
                        <th>Time Spent</th>
                        <th>Description</th>
                        <th>Attachment</th>
                    </tr>
                    </thead>
                    <tbody id="beatDetailTableBody"></tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    $('#beatReportTable').DataTable({
        "scrollX": true,
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bInfo": true,
        "bAutoWidth": false
    });

    var beatMapMarkerColors = {
        'PENDING': '#F4B400',
        'DEFERRED': '#DB4437',
        'CHECKIN': '#4285F4',
        'CHECKIN-CHECKOUT': '#0F9D58',
        'CHECKOUT': '#0F9D58'
    };

    function getMarkerColor(markType) {
        return beatMapMarkerColors[markType] || '#999999';
    }

    function createColoredMarkerIcon(color, label) {
        var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="42" viewBox="0 0 32 42">' +
            '<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 + '"/>' +
            '<circle cx="16" cy="15" r="10" fill="white"/>' +
            '<text x="16" y="20" text-anchor="middle" font-size="12" font-weight="bold" fill="' + color + '">' + label + '</text>' +
            '</svg>';
        return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
    }

    function getLatLng(item) {
        var loc = item.visitLocation || item.checkInLatLng || '';
        if (!loc || loc === '0.0000,0.0000') return null;
        var parts = loc.split(',');
        if (parts.length !== 2) return null;
        var lat = parseFloat(parts[0].trim());
        var lng = parseFloat(parts[1].trim());
        if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) return null;
        return { lat: lat, lng: lng };
    }

    $(document).on('click', '.beat-map-link', function () {
        var rowIndex = $(this).data('row');
        var data = window.beatReportData[rowIndex];
        if (!data) return;

        var items = data.total || [];
        var username = data.username;
        $('#beatMapModalTitle').text(username + ' - Visit Locations (' + items.length + ')');

        if (typeof google === 'undefined' || !google.maps) {
            alert('Google Maps is still loading. Please try again in a moment.');
            return;
        }

        $('#beatMapModal').modal('show');

        setTimeout(function () {
            var mapDiv = document.getElementById('beatMapContainer');
            var bounds = new google.maps.LatLngBounds();
            var hasMarkers = false;

            var map = new google.maps.Map(mapDiv, {
                zoom: 10,
                center: { lat: 20.5937, lng: 78.9629 },
                mapTypeId: 'roadmap'
            });

            var infoWindow = new google.maps.InfoWindow();

            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                var pos = getLatLng(item);
                if (!pos) continue;

                hasMarkers = true;
                bounds.extend(pos);

                var color = getMarkerColor(item.markType);
                var marker = new google.maps.Marker({
                    position: pos,
                    map: map,
                    title: item.taskName || item.markType,
                    icon: {
                        url: createColoredMarkerIcon(color, (i + 1)),
                        scaledSize: new google.maps.Size(32, 42),
                        anchor: new google.maps.Point(16, 42)
                    }
                });

                (function (m, itm, idx) {
                    google.maps.event.addListener(m, 'click', function () {
                        var content = '<div style="min-width:200px;">' +
                            '<strong>' + (idx + 1) + '. ' + (itm.taskName || '--') + '</strong><br>' +
                            '<b>Status:</b> ' + (itm.markType || '--') + '<br>' +
                            '<b>Address:</b> ' + (itm.address || '--') + '<br>' +
                            '<b>Check In:</b> ' + (itm.checkInTime || '--') + '<br>' +
                            '<b>Check Out:</b> ' + (itm.checkOutTime || '--') + '<br>' +
                            '<b>Time Spent:</b> ' + (itm.timeSpent || '--') +
                            '</div>';
                        infoWindow.setContent(content);
                        infoWindow.open(map, m);
                    });
                })(marker, item, i);
            }

            var markerCount = 0;
            for (var j = 0; j < items.length; j++) { if (getLatLng(items[j])) markerCount++; }

            var infoDiv = document.getElementById('beatMapInfo');
            if (markerCount < items.length) {
                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.';
                infoDiv.style.display = 'block';
            } else {
                infoDiv.style.display = 'none';
            }

            if (hasMarkers) {
                map.fitBounds(bounds);
                if (markerCount === 1) {
                    map.setZoom(14);
                }
            }
        }, 400);
    });

    $(document).on('click', '.beat-detail-link', function () {
        var rowIndex = $(this).data('row');
        var type = $(this).data('type');
        var data = window.beatReportData[rowIndex];
        if (!data) return;

        var items = data[type] || [];
        var username = data.username;

        var typeLabel = type.charAt(0).toUpperCase() + type.slice(1);
        $('#beatDetailModalTitle').text(username + ' - ' + typeLabel + ' Visits (' + items.length + ')');

        var tbody = '';
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            tbody += '<tr>' +
                '<td>' + (i + 1) + '</td>' +
                '<td>' + (item.taskName || '--') + '</td>' +
                '<td>' + (item.taskType || '--') + '</td>' +
                '<td>' + (item.markType || '--') + '</td>' +
                '<td>' + (item.address || '--') + '</td>' +
                '<td>' + (item.checkInTime || '--') + '</td>' +
                '<td>' + (item.checkOutTime || '--') + '</td>' +
                '<td>' + (item.timeSpent || '--') + '</td>' +
                '<td>' + (item.taskDescription || '--') + '</td>' +
                '<td>' + (item.attachment ? '<a href="https://partners.smartdukaan.com/document/' + item.attachment + '" target="_blank"><i class="fa fa-paperclip"></i> View</a>' : '--') + '</td>' +
                '</tr>';
        }
        if (items.length === 0) {
            tbody = '<tr><td colspan="10" class="text-center">No records found</td></tr>';
        }
        $('#beatDetailTableBody').html(tbody);
        $('#beatDetailModal').modal('show');
    });
</script>