Subversion Repositories SmartDukaan

<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i> $username - Visit Details ($reportDate)</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><a href="javascript:void(0);" class="beat-report">Beat Report</a></li>
                <li><i class="fa fa-user"></i>$username</li>
            </ol>
        </div>
    </div>
    <br>
    <div class="row col-lg-12" style="float: right;">
        <div class="col-lg-3">
            <label>Select Date</label>
            <div class="input-group">
                <input type="date" id="user-detail-date" class="form-control" value="$reportDate" data-userid="$userId">
                <span class="input-group-btn">
                    <button type="button" class="btn btn-info user-detail-refresh" data-userid="$userId" style="margin-left:10px;">
                        <i class="fa fa-refresh"></i> Refresh
                    </button>
                </span>
            </div>
        </div>
    </div>
    <br><br><br>

    <div class="col-lg-12">
        <div class="row" style="margin-bottom:15px;">
            <div class="col-lg-3">
                <div class="panel panel-default" style="text-align:center; padding:10px;">
                    <h4 style="margin:0; color:#1abc9c; font-weight:bold;">$visits.size()</h4>
                    <small>Total Visits</small>
                </div>
            </div>
            #set($completedCount = 0)
            #set($pendingCount = 0)
            #set($deferredCount = 0)
            #foreach($v in $visits)
                #if($v.getMarkType() == "CHECKIN-CHECKOUT" || $v.getMarkType() == "CHECKOUT")
                    #set($completedCount = $completedCount + 1)
                #elseif($v.getMarkType() == "PENDING" || $v.getMarkType() == "CHECKIN")
                    #set($pendingCount = $pendingCount + 1)
                #elseif($v.getMarkType() == "DEFERRED")
                    #set($deferredCount = $deferredCount + 1)
                #end
            #end
            <div class="col-lg-3">
                <div class="panel panel-default" style="text-align:center; padding:10px;">
                    <h4 style="margin:0; color:#27ae60; font-weight:bold;">$completedCount</h4>
                    <small>Completed</small>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="panel panel-default" style="text-align:center; padding:10px;">
                    <h4 style="margin:0; color:#e67e22; font-weight:bold;">$pendingCount</h4>
                    <small>Pending</small>
                </div>
            </div>
            <div class="col-lg-3">
                <div class="panel panel-default" style="text-align:center; padding:10px;">
                    <h4 style="margin:0; color:#e74c3c; font-weight:bold;">$deferredCount</h4>
                    <small>Deferred</small>
                </div>
            </div>
        </div>

        <table class="table table-border table-condensed table-bordered table-striped" id="userDetailTable" style="width:100%">
            <thead>
            <tr >
                <th>#</th>
                <th>Task Name</th>
                <th>Task Type</th>
                <th>Status</th>
                <th>Address</th>
                <th>Check In Time</th>
                <th>Check Out Time</th>
                <th>Time Spent</th>
                <th>Transit Time</th>
                <th>Distance (km)</th>
            </tr>
            </thead>
            <tbody>
            #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>$!punchIn.getAddress()</td>
                    <td>$!punchIn.getCheckInTime()</td>
                    <td>--</td>
                    <td>--</td>
                    <td>--</td>
                    <td>$!punchIn.getTotalDistance()</td>
                </tr>
            #end
            #set($idx = 1)
            #foreach($v in $visits)
                <tr>
                    <td>$idx</td>
                    <td>$!v.getTaskName()</td>
                    <td>$!v.getTaskType()</td>
                    <td>
                        #if($v.getMarkType() == "CHECKIN-CHECKOUT" || $v.getMarkType() == "CHECKOUT")
                            <span class="label label-success">$v.getMarkType()</span>
                        #elseif($v.getMarkType() == "PENDING" || $v.getMarkType() == "CHECKIN")
                            <span class="label label-warning">$v.getMarkType()</span>
                        #elseif($v.getMarkType() == "DEFERRED")
                            <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
                    </td>
                    <td>$!v.getAddress()</td>
                    <td>$!v.getCheckInTime()</td>
                    <td>$!v.getCheckOutTime()</td>
                    <td>$!v.getTimeSpent()</td>
                    <td>$!v.getTransitTime()</td>
                    <td>$!v.getTotalDistance()</td>
                </tr>
                #set($idx = $idx + 1)
            #end
            #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>$!punchOut.getAddress()</td>
                    <td>$!punchOut.getCheckInTime()</td>
                    <td>--</td>
                    <td>--</td>
                    <td>--</td>
                    <td>$!punchOut.getTotalDistance()</td>
                </tr>
            #end
            </tbody>
            <tfoot>
                <tr style="background:#f2f3f4; font-weight:bold;">
                    <td colspan="5" style="text-align:right;">Totals</td>
                    <td>--</td>
                    <td>--</td>
                    <td>$totalTimeSpentStr</td>
                    <td>$totalTransitStr</td>
                    <td>$totalDistanceStr km | Visits: $visitCount | Leads: $leadCount</td>
                </tr>
            </tfoot>
        </table>
    </div>
</section>

<!-- Task History Modal -->
<div class="modal fade" id="taskHistoryModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document" style="width:85%;">
        <div class="modal-content">
            <div class="modal-header" style="background:#3498db; color:white;">
                <button type="button" class="close" data-dismiss="modal" style="color:white;">&times;</button>
                <h4 class="modal-title" id="taskHistoryModalTitle">Task History</h4>
            </div>
            <div class="modal-body" id="taskHistoryModalBody">
                <div class="text-center"><i class="fa fa-spinner fa-spin fa-2x"></i> Loading...</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

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

    $(document).on('click', '.beat-history-link', function () {
        var userId = $(this).data('userid');
        var taskId = $(this).data('taskid');
        var taskType = $(this).data('tasktype');
        var taskName = $(this).data('taskname');

        $('#taskHistoryModalTitle').text('History - ' + taskName);
        $('#taskHistoryModalBody').html('<div class="text-center"><i class="fa fa-spinner fa-spin fa-2x"></i> Loading...</div>');
        $('#taskHistoryModal').modal('show');

        doGetAjaxRequestHandler(context + "/beat-report/task-history?userId=" + userId + "&taskId=" + taskId + "&taskType=" + encodeURIComponent(taskType),
            function (response) {
                $('#taskHistoryModalBody').html(response);
            });
    });
</script>