Subversion Repositories SmartDukaan

<section class="wrapper">

    <div class="row">

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

            <h3 class="page-header"><i class="icon_calendar"></i> Scheduled Lead Visits</h3>

            <ol class="breadcrumb">

                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>

                <li><i class="icon_group"></i> Partner Acquisition</li>

                <li><i class="icon_calendar"></i> Lead Visits</li>

            </ol>

        </div>

    </div>

    #if($leadRoutes.isEmpty())

        <div class="alert alert-info">No scheduled lead visits.</div>

    #else

        <div class="table-responsive">

            <table class="table table-bordered table-striped table-hover">

                <thead>

                <tr>

                    <th>Lead ID</th>

                    <th>Partner Name</th>

                    <th>Mobile</th>

                    <th>City</th>

                    <th>Beat</th>

                    <th>Schedule Date</th>

                    <th>Stop #</th>

                    <th>Scheduled By</th>

                    <th>Created On</th>

                    <th>Action</th>

                </tr>

                </thead>

                <tbody>

                    #foreach($lr in $leadRoutes)

                        #set($lead = $leadMap.get($lr.getLeadId()))

                        #set($beat = $beatMap.get($lr.getBeatId()))

                        #set($requester = $authUserMap.get($lr.getRequestedBy()))

                    <tr>

                        <td>$lr.getLeadId()</td>

                        <td>#if($lead) $!lead.getFirstName() $!lead.getLastName() #else - #end</td>

                        <td>#if($lead) $!lead.getLeadMobile() #end</td>

                        <td>#if($lead) $!lead.getCity() #end</td>

                        <td>

                            #if($beat)

                                <a href="javascript:;" class="view-beat-on-map"

                                   data-assignedto="$beat.getAuthUserId()"

                                   data-beatdate="$!lr.getScheduleDate()"

                                   data-beatname="$!beat.getName()" style="text-decoration:none;">

                                    <span class="label label-primary" style="font-size:12px;">$!beat.getName()</span>

                                </a>

                                <br>

                                <a href="${rc.contextPath}/beatPlanWindow?authUserId=$beat.getAuthUserId()"

                                   target="_blank"

                                   class="btn btn-xs btn-default" style="margin-top:3px;">View All Beats</a>

                            #else

                                -

                            #end

                        </td>

                        <td><span class="label label-info" style="font-size:12px;">$!lr.getScheduleDate()</span></td>

                        <td>#if($lr.getSequenceOrder()) #set($stopNum = $lr.getSequenceOrder() + 1) $stopNum #else

                            - #end</td>

                        <td>#if($requester) $!requester.getFirstName() $!requester.getLastName() #end</td>

                        <td style="font-size:11px;">$!lr.getCreatedTimestamp()</td>

                        <td>

                            <span class="label label-success">Scheduled</span>

                        </td>

                    </tr>

                    #end

                </tbody>

            </table>

        </div>

    #end

</section>

<!-- Beat Route Map Modal -->

<div class="modal fade" id="beatMapModal" tabindex="-1" style="overflow-y:auto;">

    <div class="modal-dialog" style="width:90%; max-width:1200px; margin-top:30px;">

        <div class="modal-content">

            <div class="modal-header">

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

                <h4 class="modal-title" id="beatMapTitle">Beat Route</h4>

            </div>

            <div class="modal-body" style="padding:10px;">

                <div class="row">

                    <div class="col-md-4" style="max-height:500px; overflow-y:auto;">

                        <div id="beatStopsList"></div>

                    </div>

                    <div class="col-md-8">

                        <div id="beatMapContainer" style="width:100%; height:500px; border-radius:8px;"></div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&libraries=places&v=weekly"></script>

<script>

    var beatMap, beatMarkers = [], beatPolyline;

    function showBeatRoute(authUserId, planDate, title) {

        $('#beatMapTitle').text(title);

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

        setTimeout(function () {

            if (!beatMap) {

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

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

                });

            }

            beatMarkers.forEach(function (m) {

                m.setMap(null);

            });

            beatMarkers = [];

            if (beatPolyline) beatPolyline.setMap(null);

            $.ajax({

                url: context + '/visit-approvals/beat-route?authUserId=' + authUserId + '&planDate=' + planDate,

                method: 'GET',

                success: function (response) {

                    var stops = response.response || response;

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

                    var path = [];

                    var listHtml = '<table class="table table-condensed table-bordered" style="font-size:12px;"><thead><tr><th>#</th><th>Name</th><th>Type</th></tr></thead><tbody>';

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

                        var stop = stops[i];

                        var isLead = stop.type === 'lead';

                        listHtml += '<tr style="' + (isLead ? 'background:#fff3cd; font-weight:bold;' : '') + '">'

                                + '<td>' + (stop.sequence + 1) + '</td>'

                                + '<td>' + (stop.name || '-') + '</td>'

                                + '<td>' + (isLead ? '<span class="label label-warning">LEAD</span>' : '<span class="label label-info">Partner</span>') + '</td>'

                                + '</tr>';

                        if (stop.lat && stop.lng) {

                            var pos = {lat: parseFloat(stop.lat), lng: parseFloat(stop.lng)};

                            path.push(pos);

                            bounds.extend(pos);

                            var marker = new google.maps.Marker({

                                position: pos, map: beatMap,

                                label: {text: '' + (stop.sequence + 1), color: '#fff', fontWeight: 'bold'},

                                icon: {

                                    path: google.maps.SymbolPath.CIRCLE, scale: 14,

                                    fillColor: isLead ? '#e67e22' : '#3498db',

                                    fillOpacity: 1, strokeColor: '#fff', strokeWeight: 2

                                },

                                title: (stop.sequence + 1) + '. ' + (stop.name || '')

                            });

                            beatMarkers.push(marker);

                        }

                    }

                    listHtml += '</tbody></table>';

                    $('#beatStopsList').html(listHtml);

                    if (path.length > 1) {

                        beatPolyline = new google.maps.Polyline({

                            path: path, geodesic: true,

                            strokeColor: '#3498db', strokeOpacity: 0.8, strokeWeight: 3, map: beatMap

                        });

                    }

                    if (path.length > 0) beatMap.fitBounds(bounds);

                }

            });

        }, 300);

    }

    $(document).on('click', '.view-beat-on-map', function () {

        var authUserId = $(this).data('assignedto');

        var beatDate = $(this).data('beatdate');

        var beatName = $(this).data('beatname');

        showBeatRoute(authUserId, beatDate, beatName + ' - ' + beatDate);

    });

</script>