Subversion Repositories SmartDukaan

<style>
    .badge-overdue-high {
        background-color: #d9534f;
        color: #fff;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: bold;
    }

    .badge-overdue-med {
        background-color: #f0ad4e;
        color: #fff;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: bold;
    }

    .badge-overdue-low {
        background-color: #f7dc6f;
        color: #333;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: bold;
    }
</style>
<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header">DELAY PANEL</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><i class="icon_document_alt"></i>Delay Panel</li>
            </ol>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="row" style="margin-bottom:10px;">
            <div class="col-lg-3">
                <select id="teamFilter" class="form-control">
                    <option value="">All Teams</option>
                </select>
            </div>
        </div>
        <table class="table table-border table-condensed table-bordered" id="delayTable" style="width:100%">
            <thead class="row htable" style="background:#F5F5F5;">
            <tr style="color:black;">
                <th>ID</th>
                <th>Partner Name</th>
                <th>Code</th>
                <th>City</th>
                <!--                <th>ASM</th>-->
                <th>Delayed Event</th>
                <th>Responsible Team</th>
                <th>Planned Date</th>
                <th>Days Overdue</th>
            </tr>
            </thead>
            <tbody>
                #foreach($item in $delayItems)
                <tr>
                    <td>$item.getOnboardingId()</td>
                    <td>#if($item.getOutletName())$item.getOutletName()#else-#end</td>
                    <td>#if($item.getCode())$item.getCode()#else-#end</td>
                    <td>#if($item.getCity())$item.getCity()#else-#end</td>
                    <!--                <td>#if($item.getFilledBy())$item.getFilledBy()#else-#end</td>-->
                    <td>$item.getEventName()</td>
                    <td>$item.getResponsibleTeam()</td>
                    <td>$item.getPlannedDate().format($dateFormatter)</td>
                    <td>
                        #if($item.getDaysOverdue() > 7)
                            <span class="badge-overdue-high">$item.getDaysOverdue() days</span>
                        #elseif($item.getDaysOverdue() > 3)
                            <span class="badge-overdue-med">$item.getDaysOverdue() days</span>
                        #else
                            <span class="badge-overdue-low">$item.getDaysOverdue() days</span>
                        #end
                    </td>
                </tr>
                #end
            </tbody>
        </table>
    </div>
</section>

<script type="text/javascript">
    $(document).ready(function () {
        var dtable = $('#delayTable').DataTable({
            "scrollX": true,
            orderCellsTop: true,
            "order": [[0, "desc"]],
            "pageLength": 50
        });

        // Populate team filter dropdown from table data
        var teams = {};
        dtable.column(5).data().each(function (val) {
            teams[val] = true;
        });
        var teamFilter = $('#teamFilter');
        Object.keys(teams).sort().forEach(function (team) {
            var opt = $('<option></option>').val(team).text(team);
            teamFilter.append(opt);
        });

        // Filter by team
        teamFilter.on('change', function () {
            var val = $(this).val();
            if (val) {
                dtable.column(5).search('^'.concat(val).concat('$'), true, false).draw();
            } else {
                dtable.column(5).search('', true, false).draw();
            }
        });
    });
</script>