Subversion Repositories SmartDukaan

        <div class="col-lg-2">

            <label>Level</label>

            <select id="user-detail-level" class="form-control" data-selected="$!userLevel">

                <option value="">All Levels</option>

                #foreach($et in $escalationTypes)

                    <option value="$et" #if($et.name() == $userLevel)selected#end>$et</option>

                #end

            </select>

        </div>

        <div class="col-lg-3">

            <label>User</label>

            <select id="user-detail-user" class="form-control" data-selected-auth="$!authUserId">

                <option value="$!authUserId">$username</option>

            </select>

        </div>

                    <button type="button" class="btn btn-success live-tracking-btn" data-userid="$userId" data-username="$username" style="margin-left:5px;">

                        <i class="fa fa-map-marker"></i> Live Tracking

                    </button>

<!-- Live Tracking Modal -->

<div class="modal fade" id="liveTrackingModal" 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:#27ae60; color:white;">

                <button type="button" class="close" data-dismiss="modal" style="color:white;">&times;</button>

                <h4 class="modal-title" id="liveTrackingModalTitle"><i class="fa fa-map-marker"></i> Live Tracking</h4>

            </div>

            <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">

                <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>

    (function () {

        var level = $('#user-detail-level').data('selected');

        var selectedAuth = $('#user-detail-user').data('selected-auth');

        if (level && selectedAuth) {

            $.ajax({

                url: context + "/beatPlan/getAuthUsers", type: "GET", dataType: "json",

                data: { categoryId: 4, escalationType: level },

                success: function (r) {

                    var data = r.response || r;

                    var html = '<option value="">Select User</option>';

                    data.forEach(function (u) {

                        html += '<option value="' + u.id + '"' + (u.id == selectedAuth ? ' selected' : '') + '>' + u.name + '</option>';

                    });

                    $('#user-detail-user').html(html);

                }

            });

        }

    })();

    $(document).off('click.beatdetail').off('click.livetrack');

    var liveTrackingMap = null;

    var liveTrackingUserId = null;

    var liveTrackingInterval = null;

    function getMarkerColor(markType) {

        if (markType === 'CHECKIN-CHECKOUT' || markType === 'CHECKOUT') return '#0F9D58';

        if (markType === 'PENDING' || markType === 'CHECKIN') return '#4285F4';

        if (markType === 'DEFERRED') return '#DB4437';

        if (markType === 'PUNCHIN') return '#1abc9c';

        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">' +

            '<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 + '"/>' +

            '<circle cx="14" cy="14" r="7" fill="white"/>' +

            '<text x="14" y="18" text-anchor="middle" font-size="10" 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();

        $.ajax({

            url: context + "/beat-report/live-tracking",

            type: "GET",

            dataType: "json",

            data: { userId: userId, date: selectedDate },

            success: function (data) {

                renderLiveTrackingMap(data, username);

            },

            error: function () {

                $('#liveTrackingInfo').html('<span style="color:red;">Failed to load tracking data.</span>');

            }

        });

    }

    function renderLiveTrackingMap(data, username) {

        var visits = data.visits || [];

        var pathPoints = data.pathPoints || [];

        if (!liveTrackingMap) {

            liveTrackingMap = new google.maps.Map(document.getElementById('liveTrackingMap'), {

                zoom: 12,

                center: { lat: 20.5937, lng: 78.9629 },

                mapTypeControl: true,

                streetViewControl: false

            });

        }

        if (liveTrackingMap._markers) {

            liveTrackingMap._markers.forEach(function (m) { m.setMap(null); });

        }

        if (liveTrackingMap._polyline) {

            liveTrackingMap._polyline.setMap(null);

        }

        if (liveTrackingMap._currentMarker) {

            liveTrackingMap._currentMarker.setMap(null);

        }

        liveTrackingMap._markers = [];

        var bounds = new google.maps.LatLngBounds();

        var hasPoints = false;

        var visitIdx = 0;

        for (var i = 0; i < visits.length; i++) {

            var v = visits[i];

            if (!v.lat || !v.lng) continue;

            var lat = parseFloat(v.lat);

            var lng = parseFloat(v.lng);

            if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) continue;

            hasPoints = true;

            var pos = { lat: lat, lng: lng };

            bounds.extend(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 + ')'

            });

            var infoContent = '<div style="font-size:13px; max-width:250px;">' +

                '<strong>' + (v.taskName || '') + '</strong><br>' +

                '<span class="label" style="background:' + getMarkerColor(v.markType) + '; color:white;">' + v.markType + '</span><br>' +

                (v.checkInTime ? '<i class="fa fa-sign-in"></i> ' + v.checkInTime + '<br>' : '') +

                (v.checkOutTime ? '<i class="fa fa-sign-out"></i> ' + v.checkOutTime + '<br>' : '') +

                (v.address ? '<i class="fa fa-map-marker"></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);

        }

        if (pathPoints.length > 0) {

            var pathCoords = [];

            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;

                pathCoords.push({ lat: pLat, lng: pLng });

                bounds.extend({ lat: pLat, lng: pLng });

                hasPoints = true;

            }

            if (pathCoords.length > 0) {

                liveTrackingMap._polyline = new google.maps.Polyline({

                    path: pathCoords,

                    geodesic: true,

                    strokeColor: '#3498db',

                    strokeOpacity: 0.8,

                    strokeWeight: 3,

                    map: liveTrackingMap

                });

                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',

                        fillOpacity: 1,

                        strokeColor: '#ffffff',

                        strokeWeight: 3

                    },

                    title: 'Last Known Location',

                    zIndex: 999

                });

                var lastTs = pathPoints[pathPoints.length - 1].timestamp || 'N/A';

                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>'

                });

                liveTrackingMap._currentMarker.addListener('click', function () {

                    currentIw.open(liveTrackingMap, liveTrackingMap._currentMarker);

                });

            }

        }

        if (hasPoints) {

            liveTrackingMap.fitBounds(bounds);

        }

        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;

        $('#liveTrackingInfo').html(

            '<strong>' + username + '</strong> | ' +

            'Visits: <strong>' + totalVisits + '</strong> | ' +

            'Completed: <strong>' + completedVisits + '</strong> | ' +

            'Path Points: <strong>' + pathPoints.length + '</strong>' +

            (pathPoints.length > 0 ? ' | <span style="color:#e74c3c;"><i class="fa fa-circle"></i></span> Last Known Location' : '')

        );

    }

    function ensureGoogleMaps(callback) {

        if (window.google && window.google.maps) {

            callback();

            return;

        }

        var s = document.createElement('script');

        s.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&v=weekly';

        s.onload = callback;

        document.head.appendChild(s);

    }

    $(document).on('click.livetrack', '.live-tracking-btn', function () {

        liveTrackingUserId = $(this).data('userid');

        var username = $(this).data('username');

        $('#liveTrackingModalTitle').html('<i class="fa fa-map-marker"></i> Live Tracking - ' + username);

        $('#liveTrackingInfo').html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');

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

        setTimeout(function () {

            liveTrackingMap = null;

            ensureGoogleMaps(function () {

                loadLiveTracking(liveTrackingUserId, username);

            });

        }, 300);

    });

    $(document).on('click.livetrack', '#refreshTrackingBtn', function () {

        if (liveTrackingUserId) {

            var username = $('#liveTrackingModalTitle').text().replace('Live Tracking - ', '').trim();

            $('#liveTrackingInfo').html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Refreshing...</div>');

            loadLiveTracking(liveTrackingUserId, username);

        }

    });

    $('#liveTrackingModal').on('hidden.bs.modal', function () {

        if (liveTrackingInterval) {

            clearInterval(liveTrackingInterval);

            liveTrackingInterval = null;

        }

    });