|
|
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head th:replace="~{fragments/modules/base/head :: head}"></head><body> <div class="wrapper"> <!-- header top menu Start --> <header th:replace="~{fragments/modules/base/header :: header}"></header> <!-- header top menu end --> <div class="page-wrap"> <!--=============== Left Menu side Start ================--> <div th:replace="~{fragments/modules/base/menu :: menu}"></div> <!--=============== Left side End ================--> <div class="main-content"> <div class="container-fluid"> <div class="page-header"> <div class="row align-items-end"> <div class="col-lg-8"> <div class="page-header-title"> <i class="ik ik-layers bg-blue"></i> <div class="d-inline"> <h5>PGR List</h5> <span>PGR list module</span> </div> </div> </div> <div class="col-lg-4"> <nav class="breadcrumb-container" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/index"><i class="ik ik-home"></i></a></li> <li class="breadcrumb-item">PGR Complaints</li> <li class="breadcrumb-item">All Reports</li> <li class="breadcrumb-item active" aria-current="page">Complaints List</li> </ol> </nav> </div> </div> </div>
<hr> <div class="row"> <div class="col-md-12"> <div class="card">
<div class="card-block"> <form class="" action="" onsubmit="getReport()"> <div class="row">
<div class="col-md-6"> <label for="fromDate" class="">From Date</label> <input type="date" class="form-control" id="fromDate" name="sFrDate" th:value="${sFrDate}" data-date-format="dd/mm/yy" required> </div> <div class="col-md-6"> <label for="toDate" class="">To Date</label> <input type="date" class="form-control" id="toDate" name="sToDate" th:value="${sToDate}" data-date-format="dd/mm/yy" required> </div> </div>
<div class="row">
<div class="col-md-6">
<label for="complaintgroupDropdown">Group:</label> <select class="form-control" name="sRptGroup" id="group"> <option value='0' th:selected="${sRptGroup == 0}">---- All ----</option> <option th:each="complaintGroup : ${complaintGroups}" th:value="${complaintGroup.name}" th:text="${complaintGroup.name}" th:selected="${sRptGroup == complaintGroup.name}"></option> </select>
</div> <div class="col-md-6">
<label for="complainttypesDropdown">Complaint Type:</label> <select class="form-control" name="sRptType" id="type"> <option value='0' th:selected="${sRptType == 0}">---- All ----</option> <option th:each="complaintType : ${complaintTypes}" th:value="${complaintType.name}" th:text="${complaintType.name}" th:selected="${sRptType == complaintType.name}"></option> </select>
</div>
</div>
<div class="row"> <div class="col-md-6"> <label for="complaintStatus">Status :</label> <select class="form-control" name="cbCompStatus" id="status"><option value='0'>---- All ----</option> <option value='Pending' th:selected="${cbCompStatus == 'Pending'}">Pending</option> <option value='Completed' th:selected="${cbCompStatus == 'Completed'}">Completed</option> <option value='Forwarded' th:selected="${cbCompStatus == 'Forwarded'}">Forwarded</option> <option value='Reopened' th:selected="${cbCompStatus == 'Reopened'}">Reopened</option>
</select>
</div>
<div class="col-md-6"> <label for="modes">Modes :</label> <select class="form-control" name="mode" id="mode"> <option value='0'>---- All ----</option> <option value='2'>Phone</option> <option value='3'>Paper form</option> <option value='1'>Internet</option> <option value='4'>WHATSAPP</option> <option value='5'>FLOOD CONTROL</option> <option value='6'>MOBILE APPLICATION</option> <option value='7'>SOCIAL MEDIA</option> <option value='8'>NEWS PAPER</option> </select>
</div>
<div class="col-md-6" style="display: flex; justify-content: space-between; align-items: center; margin-top: 25px;"> <button type="submit" style="width: 100%; height: auto;" class=" btn btn-sm btn-primary btn-l">search</button> </div> </div> </form> <br> <br>
<div> <table id="assetDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%"> <thead class="thead-dark"> <tr role="row"> <th class="text-center no-sort" width="1%">S.No</th> <th class="text-center" width="20%">Zone No</th> <th class="text-center" width="10%">Div No</th> <th class="text-center" width="10%">User Name</th> <th class="text-center" width="20%">Complaint No</th> <th class="text-center" width="10%">Complaint Type</th> <th class="text-center" width="10%">Mode</th> <th class="text-center" width="20%">Location</th> <th class="text-center" width="10%">Date</th> <th class="text-center" width="10%">Time</th> <th class="text-center" width="10%">Status</th>
</tr> </theadclass="thead-dark"> <tbody> <tr th:each="pgrreport, i : ${pgrreportlist}" class="pgrreportlist"> <td th:text="${i.count}">0</td> <td class="text-center" th:text="${pgrreport.ZONE_NAME}"></td> <td class="text-center" th:text="${pgrreport.DIVISION_NAME}"></td> <td class="text-center" th:text="${pgrreport.USER_NAME}"></td> <td class="text-center" th:text="${pgrreport.COMPLAINTNUMBER}"></td> <td class="text-center" th:text="${pgrreport.COMPLAINTTYPENAME}"></td> <td class="text-center" th:text="${pgrreport.MODE}"></td> <td class="text-center" th:text="${pgrreport.LOCATION}"></td> <td class="text-center" th:text="${pgrreport.COMPDATE}"></td> <td class="text-center" th:text="${pgrreport.TIME}"></td> <td class="text-center" th:text="${pgrreport.STATUS}"></td> <!-- <td class="text-center" th:if="${asset.isActive}"><span class="badge bg-success">Active</span></td>
<td class="text-center" th:unless="${asset.isActive}"><span class="badge bg-warning">InActive</span></td> --> <!-- <td class="text-center">
<a th:href="@{#}" th:onclick="return callEdit()" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit"><i class="ik ik-edit f-16 text-green"></i></a> <a th:href="@{#}" th:onclick="return callDelete();" data-animation="true" data-toggle="tooltip" data-placement="top" title="Delete" data-original-title="Delete"><i class="ik ik-trash-2 f-16 text-red"></i></a> </td> --> </tr>
</tbody> <tfoot class="thead-dark"> <tr> <th class="text-center">S.No</th> <th class="text-center">Zone No</th> <th class="text-center">Div No</th> <th class="text-center">User Name</th> <th class="text-center">Complaint No</th> <th class="text-center">Complaint Type</th> <th class="text-center">Mode</th> <th class="text-center">Location</th> <th class="text-center">Date</th> <th class="text-center">Time</th> <th class="text-center">Status</th> </tr> </tfoot> </table> </div> </div> </div> </div> </div>
</div> </div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> </div> </div>
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
<script th:replace="~{fragments/modules/base/script :: script}"></script> <script> let mod = [[${mode}]]; function setDefaultValue(){ document.getElementById("mode").value=mod; } setDefaultValue(); $(document).ready(function() { // DataTables buttons configuration var buttons = [ { extend: 'pageLength', className: 'btn btn-warning' }, { title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary', id: 'copyBtn' }, { extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary', id: 'excelBtn' }, { extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary', id: 'csvBtn' }, { extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary', id: 'pdfBtn' }, // Additional button /* { text: '<i class="far fa-plus-square"></i> Add New Asset', className: 'btn btn-warning', action: function () { callAdd(); } } */ ]; $('#assetDatatable').DataTable( { dom: 'Bftip', columnDefs: [ { targets: 'no-sort', orderable: false } ], lengthMenu: [ [ 50, 100, 200, 500, -1 ], [ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ] ], scrollY: '50vh', fixedColumns: { left: 1, right: 1 }, buttons: [buttons], fixedHeader: true, autoWidth: true, responsive: true, searching: false, select: false, processing: false, } ); } ); function callAdd(){ $('#addForm').modal({ backdrop: 'static', keyboard: false }) $('#addForm').modal('show'); } function getReport(){ alert("Wait for response..") let sFrDate = document.getElementById("fromdate").value; let sToDate = document.getElementById("todate").value; let sRptGroup = document.getElementById("group").value; let sRptType = document.getElementById("type").value; let cbCompStatus = document.getElementById("status").value; let mode = document.getElementById("mode").value; window.location.href='/allreportlist?sFrDate='+sFrDate+'&sToDate='+sToDate+'&sRptgroup='+sRptgroup+'&sRptType='+sRptType+'&cbCompStatus='+cbCompStatus+'&mode='+mode; } // Complainttypes dropdown $(document).ready(function () { $.ajax({ url: '/pgr/allreportlist', // Change this URL to your endpoint type: 'GET', success: function (data) { var dropdown = $('#complainttypesDropdown') $.each(data, function (index, complaintType) { dropdown.append($('<option></option>').attr('value', complaintType.id).text(complaintType.name)); }); }, error: function () { alert('Error loading complaint types.'); } }); }); //ComplaintGroups dropdown $(document).ready(function () { $.ajax({ url: '/pgr/allreportlist', // Change this URL to your endpoint type: 'GET', success: function (data) { var dropdown = $('#complaintgroupDropdown') $.each(data, function (index, complaintGroup) { dropdown.append($('<option></option>').attr('value', complaintGroup.id).text(complaintGroup.name)); }); }, error: function () { alert('Error loading complaint group.'); } }); });
</script></body></html>
|
