KaNi-04
2 months ago
387 changed files with 0 additions and 228546 deletions
-
57src/main/resources/templates/error-403.html
-
57src/main/resources/templates/error-404.html
-
57src/main/resources/templates/error-500.html
-
BINsrc/main/resources/templates/fragments/modules/.DS_Store
-
53src/main/resources/templates/fragments/modules/admin/modal-box.html
-
BINsrc/main/resources/templates/fragments/modules/base/.DS_Store
-
94src/main/resources/templates/fragments/modules/base/app_module_menu_box.html
-
7src/main/resources/templates/fragments/modules/base/footer.html
-
633src/main/resources/templates/fragments/modules/base/head.html
-
74src/main/resources/templates/fragments/modules/base/header.html
-
7src/main/resources/templates/fragments/modules/base/loader.html
-
23src/main/resources/templates/fragments/modules/base/menu.html
-
153src/main/resources/templates/fragments/modules/base/menu_source.html
-
0src/main/resources/templates/fragments/modules/base/nav.html
-
366src/main/resources/templates/fragments/modules/base/script.html
-
141src/main/resources/templates/fragments/modules/base/search.html
-
116src/main/resources/templates/fragments/modules/c_petition/modal-box.html
-
290src/main/resources/templates/fragments/modules/c_petition/petition_view_script.html
-
338src/main/resources/templates/fragments/modules/c_petition/script.html
-
19src/main/resources/templates/fragments/modules/c_petition/search_form.html
-
116src/main/resources/templates/fragments/modules/circular/modal-box.html
-
50src/main/resources/templates/fragments/modules/circular/script.html
-
116src/main/resources/templates/fragments/modules/com_petition/modal-box.html
-
293src/main/resources/templates/fragments/modules/com_petition/petition_view_script.html
-
360src/main/resources/templates/fragments/modules/com_petition/script.html
-
19src/main/resources/templates/fragments/modules/com_petition/search_form.html
-
116src/main/resources/templates/fragments/modules/m_petition/modal-box.html
-
291src/main/resources/templates/fragments/modules/m_petition/petition_view_script.html
-
360src/main/resources/templates/fragments/modules/m_petition/script.html
-
19src/main/resources/templates/fragments/modules/m_petition/search_form.html
-
22src/main/resources/templates/fragments/modules/mtm/event_search_form.html
-
119src/main/resources/templates/fragments/modules/mtm/modal-box.html
-
709src/main/resources/templates/fragments/modules/mtm/script.html
-
68src/main/resources/templates/fragments/modules/pgr/modal-box.html
-
275src/main/resources/templates/fragments/modules/pgr/script.html
-
19src/main/resources/templates/fragments/modules/pgr/search_form.html
-
139src/main/resources/templates/fragments/modules/ward_sabha/modal-box.html
-
293src/main/resources/templates/fragments/modules/ward_sabha/petition_view_script.html
-
660src/main/resources/templates/fragments/modules/ward_sabha/script.html
-
19src/main/resources/templates/fragments/modules/ward_sabha/search_form.html
-
108src/main/resources/templates/fragments/modules/works/edit_stage_script.html
-
140src/main/resources/templates/fragments/modules/works/modal-box.html
-
185src/main/resources/templates/fragments/modules/works/script.html
-
19src/main/resources/templates/fragments/modules/works/search_form.html
-
239src/main/resources/templates/fragments/modules/works/user_works_update_script.html
-
328src/main/resources/templates/fragments/modules/works/user_works_view_script.html
-
120src/main/resources/templates/fragments/modules/works/works_view_script.html
-
139src/main/resources/templates/fragments/modules/zerohours_petition/modal-box.html
-
293src/main/resources/templates/fragments/modules/zerohours_petition/petition_view_script.html
-
660src/main/resources/templates/fragments/modules/zerohours_petition/script.html
-
19src/main/resources/templates/fragments/modules/zerohours_petition/search_form.html
-
359src/main/resources/templates/index.html
-
63src/main/resources/templates/login.html
-
BINsrc/main/resources/templates/modules/.DS_Store
-
92src/main/resources/templates/modules/admin/index.html
-
272src/main/resources/templates/modules/admin/user-group-access.html
-
183src/main/resources/templates/modules/admin/user-group-list.html
-
226src/main/resources/templates/modules/admin/user-list.html
-
3007src/main/resources/templates/modules/bulkwaste/requestdetails.html
-
789src/main/resources/templates/modules/c_petition/complaint_list.html
-
267src/main/resources/templates/modules/c_petition/new_petition.html
-
237src/main/resources/templates/modules/c_petition/petition_ack.html
-
282src/main/resources/templates/modules/c_petition/petition_list.html
-
267src/main/resources/templates/modules/c_petition/petition_not_mapped_list.html
-
719src/main/resources/templates/modules/c_petition/petition_update.html
-
158src/main/resources/templates/modules/c_petition/petition_view.html
-
108src/main/resources/templates/modules/c_petition/petition_view_modal_page.html
-
974src/main/resources/templates/modules/callcenter/addcategory.html
-
1807src/main/resources/templates/modules/callcenter/agentscampaign.html
-
230src/main/resources/templates/modules/callcenter/attendancereport.html
-
1256src/main/resources/templates/modules/callcenter/campaignlist.html
-
973src/main/resources/templates/modules/callcenter/campaignreport.html
-
1956src/main/resources/templates/modules/callcenter/createcampaign.html
-
BINsrc/main/resources/templates/modules/callcenterqaqc/.DS_Store
-
416src/main/resources/templates/modules/callcenterqaqc/agentgrievancedashboard.html
-
1171src/main/resources/templates/modules/callcenterqaqc/agentqaqccalls.html
-
1015src/main/resources/templates/modules/callcenterqaqc/agentqaqcfollowupcalls.html
-
1022src/main/resources/templates/modules/callcenterqaqc/agentqaqcinprogresscalls.html
-
1088src/main/resources/templates/modules/callcenterqaqc/agentqaqcpublicfollowupcalls.html
-
1000src/main/resources/templates/modules/callcenterqaqc/complaintstatus.html
-
783src/main/resources/templates/modules/callcenterqaqc/domesticwastecancel.html
-
459src/main/resources/templates/modules/callcenterqaqc/domesticwastecheckstatus.html
-
1579src/main/resources/templates/modules/callcenterqaqc/domesticwastecomplaints.html
-
613src/main/resources/templates/modules/callcenterqaqc/overallreport.html
-
2145src/main/resources/templates/modules/callcenterqaqc/pgrcomplaints.html
-
597src/main/resources/templates/modules/callcenterqaqc/qaqcadminsettings.html
-
801src/main/resources/templates/modules/callcenterqaqc/qaqcagentperformance.html
-
659src/main/resources/templates/modules/callcenterqaqc/qaqcfollowuplist.html
-
1050src/main/resources/templates/modules/callcenterqaqc/qaqcgrievancedashboard.html
-
925src/main/resources/templates/modules/callcenterqaqc/qaqctaskagentassign.html
-
639src/main/resources/templates/modules/callcenterqaqc/qaqctasklist.html
-
1040src/main/resources/templates/modules/callcenterqaqc/scpreport.html
-
1149src/main/resources/templates/modules/callcenterqaqc/scpverification.html
-
1486src/main/resources/templates/modules/callcenterqaqc/socialmediacomplaints.html
-
756src/main/resources/templates/modules/callcenterqaqc/socialmediacompletedlist.html
-
805src/main/resources/templates/modules/callcenterqaqc/socialmediaregcompclosing.html
-
649src/main/resources/templates/modules/callcenterqaqc/unattendedclosing.html
-
401src/main/resources/templates/modules/cdwaste/approval.html
-
537src/main/resources/templates/modules/cdwaste/pending.html
-
139src/main/resources/templates/modules/cdwaste/receipt.html
@ -1,57 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<div class="auth-wrapper"> |
|||
<div class="container-fluid h-100"> |
|||
<div class="row flex-row h-100 bg-white"> |
|||
<div class="col-xl-6 col-lg-6 col-md-5 p-0 d-md-block d-lg-block d-sm-none d-none"> |
|||
<div class="lavalite-bg authentication-form mx-auto text-center"> |
|||
<div class="logo-centered" style="padding-top: 30px;"></div> |
|||
<img src="images/403.png" width="90%"/> |
|||
</div> |
|||
</div> |
|||
<div class="col-xl-6 col-lg-6 col-md-7 my-auto p-0"> |
|||
<div class="authentication-form mx-auto text-center"> |
|||
<div class="logo-centered"> |
|||
<a href="/"><img src="images/logo.png" alt="Greater Chennai Corporation" class="header-brand-img" width="100%"></a> |
|||
</div> |
|||
<h3>Greater Chennai Corporation</h3> |
|||
<!-- Content --> |
|||
<div class="flex-grow-1 d-flex align-items-center p-5 bg-body-light"> |
|||
<div class="w-100"> |
|||
<p class="text-danger fs-4 fw-bold text-uppercase mb-2" th:utext="${errorStatus}"> |
|||
403 Error |
|||
</p> |
|||
<h1 class="fw-bold mb-2" th:utext="${errorError}"> |
|||
403 - Access Denied |
|||
</h1> |
|||
<p class="fs-4 fw-medium text-muted mb-5" th:utext="${errorMessage}"> |
|||
Oops, You don`t have permission to access this page. |
|||
</p> |
|||
<a class="btn btn-lg btn-alt-danger" href="#403" onclick="return goBack();"> |
|||
<i class="fa fa-arrow-left opacity-50 me-1"></i> Back |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<!-- END Content --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script> |
|||
function goBack() { |
|||
history.go(-1); // This will go back one step in the browser's history |
|||
return false; // Prevent the default link behavior |
|||
} |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,57 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<div class="auth-wrapper"> |
|||
<div class="container-fluid h-100"> |
|||
<div class="row flex-row h-100 bg-white"> |
|||
<div class="col-xl-6 col-lg-6 col-md-5 p-0 d-md-block d-lg-block d-sm-none d-none my-auto"> |
|||
<div class="lavalite-bg authentication-form mx-auto text-center" > |
|||
<div class="logo-centered" style="padding-top: 120px;"></div> |
|||
<img src="images/error-bg-404.png" width="90%"/> |
|||
</div> |
|||
</div> |
|||
<div class="col-xl-6 col-lg-6 col-md-7 my-auto p-0"> |
|||
<div class="authentication-form mx-auto text-center"> |
|||
<div class="logo-centered"> |
|||
<a href="/"><img src="images/logo.png" alt="Greater Chennai Corporation" class="header-brand-img" width="100%"></a> |
|||
</div> |
|||
<h3>Greater Chennai Corporation</h3> |
|||
<!-- Content --> |
|||
<div class="flex-grow-1 d-flex align-items-center p-5 bg-body-light"> |
|||
<div class="w-100"> |
|||
<p class="text-danger fs-4 fw-bold text-uppercase mb-2"> |
|||
404 Error |
|||
</p> |
|||
<h1 class="fw-bold mb-2"> |
|||
Page Not Found |
|||
</h1> |
|||
<p class="fs-4 fw-medium text-muted mb-5"> |
|||
We are sorry but the page you are looking for was not found. |
|||
</p> |
|||
<a class="btn btn-lg btn-alt-danger" href="#404" onclick="return goBack();"> |
|||
<i class="fa fa-arrow-left opacity-50 me-1"></i> Back |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<!-- END Content --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script> |
|||
function goBack() { |
|||
history.go(-1); // This will go back one step in the browser's history |
|||
return false; // Prevent the default link behavior |
|||
} |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,57 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<div class="auth-wrapper"> |
|||
<div class="container-fluid h-100"> |
|||
<div class="row flex-row h-100 bg-white"> |
|||
<div class="col-xl-6 col-lg-6 col-md-5 p-0 d-md-block d-lg-block d-sm-none d-none"> |
|||
<div class="lavalite-bg authentication-form mx-auto text-center"> |
|||
<div class="logo-centered" style="padding-top: 30px;"></div> |
|||
<img src="images/error-bg.png" width="90%"/> |
|||
</div> |
|||
</div> |
|||
<div class="col-xl-6 col-lg-6 col-md-7 my-auto p-0"> |
|||
<div class="authentication-form mx-auto text-center"> |
|||
<div class="logo-centered"> |
|||
<a href="/"><img src="images/logo.png" alt="Greater Chennai Corporation" class="header-brand-img" width="100%"></a> |
|||
</div> |
|||
<h3>Greater Chennai Corporation</h3> |
|||
<!-- Content --> |
|||
<div class="flex-grow-1 d-flex align-items-center p-5 bg-body-light"> |
|||
<div class="w-100"> |
|||
<p class="text-danger fs-4 fw-bold text-uppercase mb-2"> |
|||
500 Error |
|||
</p> |
|||
<h1 class="fw-bold mb-2"> |
|||
Internal Server Error |
|||
</h1> |
|||
<p class="fs-4 fw-medium text-muted mb-5"> |
|||
The server encountered an internal error or misconfiguration and was unable to complete your request |
|||
</p> |
|||
<a class="btn btn-lg btn-alt-danger" href="#500" onclick="return goBack();"> |
|||
<i class="fa fa-arrow-left opacity-50 me-1"></i> Back |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<!-- END Content --> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script> |
|||
function goBack() { |
|||
history.go(-1); // This will go back one step in the browser's history |
|||
return false; // Prevent the default link behavior |
|||
} |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,53 +0,0 @@ |
|||
<div class="modal fade" id="viewUserDetails" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="exampleModalDefaultLabel">Exploring User Details:</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body pb-1"> |
|||
<div id="profilehtml"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<div class="modal fade" id="petitionStatus" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="exampleModalDefaultLabel">புகார் நிலை / Complaint Status</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div class="row"> |
|||
<div class="col-sm-6 col-xl-6"> |
|||
<div class="block block-rounded d-flex flex-column h-100 mb-0" id="petitionStatusForm" style="font-size:12px;"> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-sm-6 col-xl-6"> |
|||
<div class="block block-rounded d-flex flex-column h-100 mb-0" id="petitionUpdateForm" style="font-size:12px;"> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div><!--end row--> |
|||
</div><!--end modal-body--> |
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
|
|||
@ -1,94 +0,0 @@ |
|||
|
|||
<div class="modal fade apps-modal" id="appsModal" tabindex="-1" role="dialog" aria-labelledby="appsModalLabel" aria-hidden="true" data-backdrop="false"> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="ik ik-x-circle"></i></button> |
|||
<div class="modal-dialog modal-dialog-centered" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="quick-search"> |
|||
<div class="container"> |
|||
<div class="row"> |
|||
<div class="col-md-4 ml-auto mr-auto"> |
|||
<div class="input-wrap"> |
|||
<input type="text" id="quick-search" class="form-control" placeholder="Search..." /> |
|||
<i class="ik ik-search"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="modal-body d-flex align-items-center"> |
|||
<div class="container"> |
|||
<div class="apps-wrap"> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Box 1 --> |
|||
<div class="modal fade" id="passwordreset" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-l" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="ackModalTitle">Password Reset Form</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
|
|||
<div class="modal-body"> |
|||
<div id="passwordModalBody"> |
|||
<input type="hidden" value="" name="resetuserid" id="resetuserid"> |
|||
<div class="form-group"> |
|||
<label for="councillorName">Old Password / பழைய கடவுச்சொல்</label> |
|||
<input type="password" class="form-control" name="oldpassword" id="oldpassword" required> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="councillorName">New Password / புதிய கடவுச்சொல்</label> |
|||
<input type="password" class="form-control" name="password" id="password" required> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="councillorName">Confirm Password / கடவுச்சொல்லை உறுதிப்படுத்தவும்</label> |
|||
<input type="password" class="form-control" name="newpassword" id="newpassword" required> |
|||
</div> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
<button type="button" class="btn btn-secondary" onclick="savePassword();">Save</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Kural Modal Page --> |
|||
<div class="modal fade" id="kuralModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="kuralTitle">Kural</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
|
|||
<div class="modal-body"> |
|||
<div id="kuralBody"> |
|||
|
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
|
|||
|
|||
@ -1,7 +0,0 @@ |
|||
<footer class="footer"> |
|||
<form id="logout-form" th:action="@{/gcc/logout}" method="post" style="display: none;"></form> |
|||
<div class="w-100 clearfix"> |
|||
<span class="text-center text-sm-left d-md-inline-block">Copyright © Greater Chennai Corporation | All rights reserved</span> |
|||
<span class="float-none float-sm-right mt-1 mt-sm-0 text-center">Coded By BonTon Softwares Pvt Ltd</span> |
|||
</div> |
|||
</footer> |
|||
@ -1,633 +0,0 @@ |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="x-ua-compatible" content="ie=edge"> |
|||
<title>GCC APP</title> |
|||
<meta name="description" content=""> |
|||
<meta name="keywords" content=""> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
|
|||
<base th:href="${assetsBaseUrl}"> |
|||
|
|||
<link rel="icon" href="/favicon.ico" type="image/x-icon" /> |
|||
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet"> |
|||
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> |
|||
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"> |
|||
<link rel="stylesheet" href="node_modules/ionicons/dist/css/ionicons.min.css"> |
|||
<link rel="stylesheet" href="node_modules/icon-kit/dist/css/iconkit.min.css"> |
|||
<link rel="stylesheet" href="node_modules/fullcalendar/dist/fullcalendar.min.css"> |
|||
<link rel="stylesheet" href="node_modules/perfect-scrollbar/css/perfect-scrollbar.css"> |
|||
<link rel="stylesheet" href="node_modules/select2/dist/css/select2.min.css"> |
|||
<link rel="stylesheet" href="node_modules/weather-icons/css/weather-icons.min.css"> |
|||
<link rel="stylesheet" href="node_modules/sweetalert2/sweetalert2.min.css"> |
|||
|
|||
<link href="node_modules/datatable/DataTables-1.13.6/css/jquery.dataTables.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/AutoFill-2.6.0/css/autoFill.bootstrap4.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/Buttons-2.4.1/css/buttons.bootstrap4.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/ColReorder-1.7.0/css/colReorder.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/DateTime-1.5.1/css/dataTables.dateTime.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/FixedColumns-4.3.0/css/fixedColumns.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/FixedHeader-3.4.0/css/fixedHeader.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/KeyTable-2.10.0/css/keyTable.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/Responsive-2.5.0/css/responsive.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/RowGroup-1.4.0/css/rowGroup.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/RowReorder-1.4.1/css/rowReorder.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/Scroller-2.2.0/css/scroller.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/SearchBuilder-1.5.0/css/searchBuilder.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/SearchPanes-2.2.0/css/searchPanes.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/Select-1.7.0/css/select.bootstrap4.min.css" rel="stylesheet"> |
|||
<link href="node_modules/datatable/StateRestore-1.3.0/css/stateRestore.bootstrap4.min.css" rel="stylesheet"> |
|||
|
|||
<link rel="stylesheet" href="dist/css/theme.css"> |
|||
<script src="js/vendor/modernizr-2.8.3.min.js"></script> |
|||
<style> |
|||
.text-center { |
|||
text-align: center !important; |
|||
} |
|||
/* Define the keyframes for the ringing animation */ |
|||
.bell{ |
|||
padding-top: 12px; |
|||
display:block; |
|||
font-size: 40px; |
|||
/*margin:50px auto 0;*/ |
|||
/*color: #9e9e9e;*/ |
|||
-webkit-animation: ring 4s .7s ease-in-out infinite; |
|||
-webkit-transform-origin: 50% 4px; |
|||
-moz-animation: ring 4s .7s ease-in-out infinite; |
|||
-moz-transform-origin: 50% 4px; |
|||
animation: ring 4s .7s ease-in-out infinite; |
|||
transform-origin: 50% 4px; |
|||
} |
|||
|
|||
@-webkit-keyframes ring { |
|||
0% { -webkit-transform: rotateZ(0); } |
|||
1% { -webkit-transform: rotateZ(30deg); } |
|||
3% { -webkit-transform: rotateZ(-28deg); } |
|||
5% { -webkit-transform: rotateZ(34deg); } |
|||
7% { -webkit-transform: rotateZ(-32deg); } |
|||
9% { -webkit-transform: rotateZ(30deg); } |
|||
11% { -webkit-transform: rotateZ(-28deg); } |
|||
13% { -webkit-transform: rotateZ(26deg); } |
|||
15% { -webkit-transform: rotateZ(-24deg); } |
|||
17% { -webkit-transform: rotateZ(22deg); } |
|||
19% { -webkit-transform: rotateZ(-20deg); } |
|||
21% { -webkit-transform: rotateZ(18deg); } |
|||
23% { -webkit-transform: rotateZ(-16deg); } |
|||
25% { -webkit-transform: rotateZ(14deg); } |
|||
27% { -webkit-transform: rotateZ(-12deg); } |
|||
29% { -webkit-transform: rotateZ(10deg); } |
|||
31% { -webkit-transform: rotateZ(-8deg); } |
|||
33% { -webkit-transform: rotateZ(6deg); } |
|||
35% { -webkit-transform: rotateZ(-4deg); } |
|||
37% { -webkit-transform: rotateZ(2deg); } |
|||
39% { -webkit-transform: rotateZ(-1deg); } |
|||
41% { -webkit-transform: rotateZ(1deg); } |
|||
|
|||
43% { -webkit-transform: rotateZ(0); } |
|||
100% { -webkit-transform: rotateZ(0); } |
|||
} |
|||
|
|||
@-moz-keyframes ring { |
|||
0% { -moz-transform: rotate(0); } |
|||
1% { -moz-transform: rotate(30deg); } |
|||
3% { -moz-transform: rotate(-28deg); } |
|||
5% { -moz-transform: rotate(34deg); } |
|||
7% { -moz-transform: rotate(-32deg); } |
|||
9% { -moz-transform: rotate(30deg); } |
|||
11% { -moz-transform: rotate(-28deg); } |
|||
13% { -moz-transform: rotate(26deg); } |
|||
15% { -moz-transform: rotate(-24deg); } |
|||
17% { -moz-transform: rotate(22deg); } |
|||
19% { -moz-transform: rotate(-20deg); } |
|||
21% { -moz-transform: rotate(18deg); } |
|||
23% { -moz-transform: rotate(-16deg); } |
|||
25% { -moz-transform: rotate(14deg); } |
|||
27% { -moz-transform: rotate(-12deg); } |
|||
29% { -moz-transform: rotate(10deg); } |
|||
31% { -moz-transform: rotate(-8deg); } |
|||
33% { -moz-transform: rotate(6deg); } |
|||
35% { -moz-transform: rotate(-4deg); } |
|||
37% { -moz-transform: rotate(2deg); } |
|||
39% { -moz-transform: rotate(-1deg); } |
|||
41% { -moz-transform: rotate(1deg); } |
|||
|
|||
43% { -moz-transform: rotate(0); } |
|||
100% { -moz-transform: rotate(0); } |
|||
} |
|||
|
|||
@keyframes ring { |
|||
0% { transform: rotate(0); } |
|||
1% { transform: rotate(30deg); } |
|||
3% { transform: rotate(-28deg); } |
|||
5% { transform: rotate(34deg); } |
|||
7% { transform: rotate(-32deg); } |
|||
9% { transform: rotate(30deg); } |
|||
11% { transform: rotate(-28deg); } |
|||
13% { transform: rotate(26deg); } |
|||
15% { transform: rotate(-24deg); } |
|||
17% { transform: rotate(22deg); } |
|||
19% { transform: rotate(-20deg); } |
|||
21% { transform: rotate(18deg); } |
|||
23% { transform: rotate(-16deg); } |
|||
25% { transform: rotate(14deg); } |
|||
27% { transform: rotate(-12deg); } |
|||
29% { transform: rotate(10deg); } |
|||
31% { transform: rotate(-8deg); } |
|||
33% { transform: rotate(6deg); } |
|||
35% { transform: rotate(-4deg); } |
|||
37% { transform: rotate(2deg); } |
|||
39% { transform: rotate(-1deg); } |
|||
41% { transform: rotate(1deg); } |
|||
|
|||
43% { transform: rotate(0); } |
|||
100% { transform: rotate(0); } |
|||
} |
|||
|
|||
.showInputValue { |
|||
padding: 0.375rem 0.75rem !important; |
|||
margin-bottom: 0.5rem !important; |
|||
} |
|||
.h4{ |
|||
font-size: 14px; |
|||
border-bottom: 1px solid rgba(204,204,204,0.35); |
|||
color: #2c3e50; |
|||
} |
|||
|
|||
/* Change the background color of the tooltip for elements with the .custom-tooltip class */ |
|||
.custom-tooltip-success .tooltip-inner { |
|||
background-color: #2dce89; |
|||
color: white; /* Optional: Change the text color for better readability */ |
|||
} |
|||
.custom-tooltip-success .tooltip.bs-tooltip-top .arrow:before { |
|||
border-top-color: #2dce89; |
|||
} |
|||
.custom-tooltip-success .tooltip.bs-tooltip-right .arrow:before { |
|||
border-right-color: #2dce89; |
|||
} |
|||
.custom-tooltip-success .tooltip.bs-tooltip-bottom .arrow:before { |
|||
border-bottom-color: #2dce89; |
|||
} |
|||
.custom-tooltip-success .tooltip.bs-tooltip-left .arrow:before { |
|||
border-left-color: #2dce89; |
|||
} |
|||
|
|||
|
|||
.custom-tooltip-warning .tooltip-inner { |
|||
background-color: #fb6340; |
|||
color: white; /* Optional: Change the text color for better readability */ |
|||
} |
|||
|
|||
.custom-tooltip-warning .tooltip.bs-tooltip-top .arrow:before { |
|||
border-top-color: #fb6340; |
|||
} |
|||
.custom-tooltip-warning .tooltip.bs-tooltip-right .arrow:before { |
|||
border-right-color: #fb6340; |
|||
} |
|||
.custom-tooltip-warning .tooltip.bs-tooltip-bottom .arrow:before { |
|||
border-bottom-color: #fb6340; |
|||
} |
|||
.custom-tooltip-warning .tooltip.bs-tooltip-left .arrow:before { |
|||
border-left-color: #fb6340; |
|||
} |
|||
|
|||
.form-label{ |
|||
font-weight: bold !important; |
|||
} |
|||
.modal-header{ |
|||
color:#fff !important; |
|||
background-color: #404E67 !important; |
|||
} |
|||
.bg-modal-title{ |
|||
background-color: rgb(220, 221, 226) !important; |
|||
} |
|||
|
|||
.close{ |
|||
color: #fff !important; |
|||
} |
|||
|
|||
|
|||
/* For tree view */ |
|||
ul { |
|||
list-style-type: none; |
|||
margin: 3px; |
|||
} |
|||
|
|||
ul.checktree li:before { |
|||
height: 1em; |
|||
width: 12px; |
|||
border-bottom: 1px dashed; |
|||
content: ""; |
|||
display: inline-block; |
|||
top: -0.3em; |
|||
} |
|||
|
|||
ul.checktree li { border-left: 1px dashed; } |
|||
|
|||
ul.checktree li:last-child:before { border-left: 1px dashed; } |
|||
|
|||
ul.checktree li:last-child { border-left: none; } |
|||
|
|||
/* For datatable */ |
|||
th.no-sort { |
|||
pointer-events: none; |
|||
cursor: default; |
|||
} |
|||
|
|||
th.no-sort::after { |
|||
display: none !important; |
|||
} |
|||
|
|||
th.no-sort::before { |
|||
display: none !important; |
|||
} |
|||
.link{ |
|||
color:#0d6efd; |
|||
} |
|||
|
|||
.swal-title-custom { |
|||
font-size: 15px; /* Change the font size as needed */ |
|||
} |
|||
|
|||
|
|||
::-webkit-file-upload-button { |
|||
font: inherit; |
|||
-webkit-appearance: button; |
|||
} |
|||
|
|||
::file-selector-button { |
|||
font: inherit; |
|||
-webkit-appearance: button; |
|||
} |
|||
.form-control[type=file] { |
|||
overflow: hidden; |
|||
} |
|||
.form-control[type=file]:not(:disabled):not([readonly]) { |
|||
cursor: pointer; |
|||
} |
|||
.form-control::-webkit-file-upload-button { |
|||
padding: 0.375rem 0.75rem; |
|||
margin: -0.375rem -0.75rem; |
|||
min-height: 40px; |
|||
-webkit-margin-end: 0.75rem; |
|||
margin-inline-end: 0.75rem; |
|||
color: #343a40; |
|||
background-color: #edf0f7; |
|||
pointer-events: none; |
|||
border-color: inherit; |
|||
border-style: solid; |
|||
border-width: 0; |
|||
border-inline-end-width: 1px; |
|||
border-radius: 0; |
|||
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; |
|||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; |
|||
} |
|||
.form-control::file-selector-button { |
|||
padding: 0.375rem 0.75rem; |
|||
margin: -0.375rem -0.75rem; |
|||
min-height: 40px; |
|||
-webkit-margin-end: 0.75rem; |
|||
margin-inline-end: 0.75rem; |
|||
color: #343a40; |
|||
background-color: #edf0f7; |
|||
pointer-events: none; |
|||
border-color: inherit; |
|||
border-style: solid; |
|||
border-width: 0; |
|||
border-inline-end-width: 1px; |
|||
border-radius: 0; |
|||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; |
|||
} |
|||
@media (prefers-reduced-motion: reduce) { |
|||
.form-control::-webkit-file-upload-button { |
|||
-webkit-transition: none; |
|||
transition: none; |
|||
} |
|||
.form-control::file-selector-button { |
|||
transition: none; |
|||
} |
|||
} |
|||
.form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button { |
|||
background-color: #e1e4eb; |
|||
} |
|||
.form-control:hover:not(:disabled):not([readonly])::file-selector-button { |
|||
background-color: #e1e4eb; |
|||
} |
|||
|
|||
/* For print */ |
|||
@media print { |
|||
.wrapper .page-wrap .main-content { |
|||
padding: 0 !important; |
|||
background-color: #F6F7FB; |
|||
min-height: 0 !important; |
|||
margin-top: 0 !important; |
|||
padding-right: 0 !important; |
|||
padding-left: 0 !important; |
|||
} |
|||
.header-top, |
|||
.app-sidebar, |
|||
.page-overlay, |
|||
.page-loader, |
|||
.page-header, |
|||
.footer, |
|||
.sidebar, |
|||
.side-overlay, |
|||
.block-options { |
|||
padding: 0 !important; |
|||
margin: 0 !important; |
|||
display: none !important; |
|||
} |
|||
.block { |
|||
box-shadow: none !important; |
|||
} |
|||
/* |
|||
#ack1table{ |
|||
margin-top:50px !important; |
|||
margin-right:100px !important; |
|||
margin-left:100px !important; |
|||
} |
|||
#ack2table{ |
|||
margin-top:50px !important; |
|||
margin-right:100px !important; |
|||
margin-left:100px !important; |
|||
} |
|||
*/ |
|||
|
|||
|
|||
.ack { |
|||
height: 100%; /* Set height to 100% */ |
|||
} |
|||
|
|||
.ack-container { |
|||
display: flex; |
|||
justify-content: center; /* Center horizontally */ |
|||
align-items: center; /* Center vertically */ |
|||
height: 100%; /* Set height to 100% */ |
|||
|
|||
} |
|||
|
|||
#ack1table { |
|||
width: 70% !important; /* Set width */ |
|||
page-break-before: auto; /* Avoid page breaks after ack1table */ |
|||
} |
|||
|
|||
#ack2table { |
|||
width: 70% !important; /* Set width */ |
|||
page-break-before: auto; /* Avoid page breaks after ack1table */ |
|||
} |
|||
|
|||
.printack2{ |
|||
margin-top:250px; |
|||
} |
|||
.print_no{ |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
.ack { |
|||
height: 100%; /* Set height to 100% */ |
|||
} |
|||
|
|||
.ack-container { |
|||
display: flex; |
|||
justify-content: center; /* Center horizontally */ |
|||
align-items: center; /* Center vertically */ |
|||
height: 100%; /* Set height to 100% */ |
|||
} |
|||
|
|||
#ack1table { |
|||
border: 1px solid black; /* Add border */ |
|||
width: 99%; /* Set width */ |
|||
height: 100%; /* Set height */ |
|||
} |
|||
#ack2table { |
|||
border: 1px solid black; /* Add border */ |
|||
width: 99%; /* Set width */ |
|||
height: 100%; /* Set height */ |
|||
} |
|||
</style> |
|||
<style> |
|||
.ribbon1 { |
|||
position: absolute; |
|||
top: -6.1px; |
|||
right: 10px; |
|||
} |
|||
.ribbon1:after { |
|||
position: absolute; |
|||
content: ""; |
|||
width: 0; |
|||
height: 0; |
|||
border-left: 53px solid transparent; |
|||
border-right: 53px solid transparent; |
|||
border-top: 10px solid #F8463F; |
|||
} |
|||
.ribbon1 span { |
|||
position: relative; |
|||
display: block; |
|||
text-align: center; |
|||
background: #F8463F; |
|||
font-size: 14px; |
|||
line-height: 1; |
|||
padding: 12px 8px 10px; |
|||
border-top-right-radius: 8px; |
|||
width: 90px; |
|||
} |
|||
.ribbon1 span:before, .ribbon1 span:after { |
|||
position: absolute; |
|||
content: ""; |
|||
} |
|||
.ribbon1 span:before { |
|||
height: 6px; |
|||
width: 6px; |
|||
left: -6px; |
|||
top: 0; |
|||
background: #F8463F; |
|||
} |
|||
.ribbon1 span:after { |
|||
height: 6px; |
|||
width: 8px; |
|||
left: -8px; |
|||
top: 0; |
|||
border-radius: 8px 8px 0 0; |
|||
background: #C02031; |
|||
} |
|||
.ribbon2 { |
|||
width: 60px; |
|||
padding: 10px 0; |
|||
position: absolute; |
|||
top: -6px; |
|||
left: 25px; |
|||
text-align: center; |
|||
border-top-left-radius: 3px; |
|||
background: #F47530; |
|||
} |
|||
.ribbon2:before { |
|||
height: 0; |
|||
width: 0; |
|||
right: -5.5px; |
|||
top: 0.1px; |
|||
border-bottom: 6px solid #8D5A20; |
|||
border-right: 6px solid transparent; |
|||
} |
|||
.ribbon2:before, .ribbon2:after { |
|||
content: ""; |
|||
position: absolute; |
|||
} |
|||
.ribbon2:after { |
|||
height: 0; |
|||
width: 0; |
|||
bottom: -29.5px; |
|||
left: 0; |
|||
border-left: 30px solid #F47530; |
|||
border-right: 30px solid #F47530; |
|||
border-bottom: 30px solid transparent; |
|||
} |
|||
.ribbon3 { |
|||
width: 150px; |
|||
height: 50px; |
|||
line-height: 50px; |
|||
padding-left: 15px; |
|||
position: absolute; |
|||
left: -8px; |
|||
top: 20px; |
|||
background: #59324C; |
|||
} |
|||
.ribbon3:before, .ribbon3:after { |
|||
content: ""; |
|||
position: absolute; |
|||
} |
|||
.ribbon3:before { |
|||
height: 0; |
|||
width: 0; |
|||
top: -8.5px; |
|||
left: 0.1px; |
|||
border-bottom: 9px solid black; |
|||
border-left: 9px solid transparent; |
|||
} |
|||
.ribbon3:after { |
|||
height: 0; |
|||
width: 0; |
|||
right: -14.5px; |
|||
border-top: 25px solid transparent; |
|||
border-bottom: 25px solid transparent; |
|||
border-left: 15px solid #59324C; |
|||
} |
|||
.ribbon4 { |
|||
position: absolute; |
|||
top: 15px; |
|||
padding: 8px 10px; |
|||
background: #00B3ED; |
|||
box-shadow: -1px 2px 3px rgba(0,0,0,.3); |
|||
} |
|||
.ribbon4:before, .ribbon4:after { |
|||
content: ""; |
|||
position: absolute; |
|||
} |
|||
.ribbon4:before { |
|||
width: 7px; |
|||
height: 100%; |
|||
top: 0; |
|||
left: -6.5px; |
|||
padding: 0 0 7px; |
|||
background: inherit; |
|||
border-radius: 5px 0 0 5px; |
|||
} |
|||
.ribbon4:after { |
|||
width: 5px; |
|||
height: 5px; |
|||
bottom: -5px; |
|||
left: -4.5px; |
|||
background: lightblue; |
|||
border-radius: 5px 0 0 5px; |
|||
} |
|||
.ribbon5 { |
|||
display: block; |
|||
width: calc(100% + 20px); |
|||
height: 50px; |
|||
line-height: 50px; |
|||
text-align: center; |
|||
margin-left: -10px; |
|||
margin-right: -10px; |
|||
background: #EDBA19; |
|||
position: relative; |
|||
top: 20px; |
|||
} |
|||
.ribbon5:before, .ribbon5:after { |
|||
content: ""; |
|||
position: absolute; |
|||
} |
|||
.ribbon5:before { |
|||
height: 0; |
|||
width: 0; |
|||
bottom: -10px; |
|||
left: 0; |
|||
border-top: 10px solid #cd8d11; |
|||
border-left: 10px solid transparent; |
|||
} |
|||
.ribbon5:after { |
|||
height: 0; |
|||
width: 0; |
|||
right: 0; |
|||
bottom: -10px; |
|||
border-top: 10px solid #cd8d11; |
|||
border-right: 10px solid transparent; |
|||
} |
|||
.wrap { |
|||
width: 100%; |
|||
height: 188px; |
|||
position: absolute; |
|||
top: -8px; |
|||
left: 8px; |
|||
overflow: hidden; |
|||
} |
|||
.wrap:before, .wrap:after { |
|||
content: ""; |
|||
position: absolute; |
|||
} |
|||
.wrap:before { |
|||
width: 40px; |
|||
height: 8px; |
|||
right: 100px; |
|||
background: #4D6530; |
|||
border-radius: 8px 8px 0px 0px; |
|||
} |
|||
.wrap:after { |
|||
width: 8px; |
|||
height: 40px; |
|||
right: 0px; |
|||
top: 100px; |
|||
background: #4D6530; |
|||
border-radius: 0px 8px 8px 0px; |
|||
} |
|||
.ribbon6 { |
|||
width: 200px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
position: absolute; |
|||
top: 30px; |
|||
right: -50px; |
|||
z-index: 2; |
|||
overflow: hidden; |
|||
-webkit-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
border: 1px dashed; |
|||
box-shadow:0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0,0,0,0.6); |
|||
background: #57DD43; |
|||
text-align: center; |
|||
} |
|||
@media (min-width: 500px) { |
|||
.ribbons-wrapper { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
} |
|||
.ribbon { |
|||
width: 48%; |
|||
} |
|||
} |
|||
|
|||
.cursure_poiter{ |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
</head> |
|||
@ -1,74 +0,0 @@ |
|||
<header class="header-top" header-theme="dark"> |
|||
<div class="container-fluid"> |
|||
<div class="d-flex justify-content-between"> |
|||
<div class="top-menu d-flex align-items-center"> |
|||
<button type="button" class="btn-icon mobile-nav-toggle d-lg-none"><span></span></button> |
|||
<!-- <div class="header-search"> |
|||
<div class="input-group"> |
|||
<span class="input-group-addon search-close"><i class="ik ik-x"></i></span> |
|||
<input type="text" class="form-control"> |
|||
<span class="input-group-addon search-btn"><i class="ik ik-search"></i></span> |
|||
</div> |
|||
</div> |
|||
--> |
|||
<button type="button" id="navbar-fullscreen" class="nav-link"><i class="ik ik-maximize"></i></button> |
|||
</div> |
|||
<div class="top-menu d-flex align-items-center"> |
|||
<!-- |
|||
<div class="dropdown"> |
|||
<a class="nav-link dropdown-toggle" href="#" id="notiDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
|||
<i class="ik ik-bell bell"></i><span class="badge bg-danger">3</span> |
|||
</a> |
|||
<div class="dropdown-menu dropdown-menu-right notification-dropdown" aria-labelledby="notiDropdown"> |
|||
<h4 class="header">Notifications</h4> |
|||
<div class="notifications-wrap"> |
|||
<a href="#" class="media"> |
|||
<span class="d-flex"> |
|||
<i class="ik ik-check"></i> |
|||
</span> |
|||
<span class="media-body"> |
|||
<span class="heading-font-family media-heading">Invitation accepted</span> |
|||
<span class="media-content">Your have been Invited ...</span> |
|||
</span> |
|||
</a> |
|||
<a href="#" class="media"> |
|||
<span class="d-flex"> |
|||
<img src="images/users/user.jpg" class="rounded-circle" alt=""> |
|||
</span> |
|||
<span class="media-body"> |
|||
<span class="heading-font-family media-heading">Steve Smith</span> |
|||
<span class="media-content">I slowly updated projects</span> |
|||
</span> |
|||
</a> |
|||
<a href="#" class="media"> |
|||
<span class="d-flex"> |
|||
<i class="ik ik-calendar"></i> |
|||
</span> |
|||
<span class="media-body"> |
|||
<span class="heading-font-family media-heading">To Do</span> |
|||
<span class="media-content">Meeting with Nathan on Friday 8 AM ...</span> |
|||
</span> |
|||
</a> |
|||
</div> |
|||
<div class="footer"><a href="javascript:void(0);">See all activity</a></div> |
|||
</div> |
|||
</div> |
|||
--> |
|||
<div class="dropdown"> |
|||
<a class="dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
|||
<img class="avatar" src="images/users/user.jpg" alt=""> |
|||
</a> |
|||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown"> |
|||
<!-- <a class="dropdown-item" href="profile.html"><i class="ik ik-user dropdown-icon"></i> Profile</a> |
|||
<a class="dropdown-item" href="#"><i class="ik ik-settings dropdown-icon"></i> Settings</a> |
|||
<a class="dropdown-item" href="#"><span class="float-right"><span class="badge badge-primary">6</span></span><i class="ik ik-mail dropdown-icon"></i> Inbox</a> |
|||
<a class="dropdown-item" href="#"><i class="ik ik-navigation dropdown-icon"></i> Message</a> --> |
|||
<a class="dropdown-item" th:href="@{/gcc/logout}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();"><i class="ik ik-power dropdown-icon"></i> Logout</a> |
|||
<a class="dropdown-item" th:href="@{#}" onclick="event.preventDefault();passwordReset();"><i class="ik ik-settings dropdown-icon"></i> Password Reset</a> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
@ -1,7 +0,0 @@ |
|||
<loader> |
|||
<div class='loadscreen' id="preloader"> |
|||
<div class="loader spinner-bubble spinner-bubble-primary"> |
|||
|
|||
</div> |
|||
</div> |
|||
</loader> |
|||
@ -1,23 +0,0 @@ |
|||
<menu> |
|||
<div class="app-sidebar colored"> |
|||
<div class="sidebar-header"> |
|||
<a class="header-brand" href="/gcc"> |
|||
<div class="logo-img"> |
|||
<img src="images/logo.png" class="header-brand-img" alt="GCC" width="25px"> |
|||
</div> |
|||
<span class="text"> GCC APP</span> |
|||
</a> |
|||
<!-- <button type="button" class="nav-toggle"><i data-toggle="expanded" class="ik ik-toggle-right toggle-icon"></i></button> --> |
|||
<button id="sidebarClose" class="nav-close"><i class="ik ik-x"></i></button> |
|||
</div> |
|||
|
|||
<div class="sidebar-content"> |
|||
<div class="nav-container"> |
|||
<nav id="main-menu-navigation" class="navigation-main"> |
|||
<!--<div class="nav-lavel">Makkalai Thedi Mayor</div>--> |
|||
<div th:utext="${menuItemsHTML}"></div> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</menu> |
|||
@ -1,153 +0,0 @@ |
|||
<menu> |
|||
<div class="app-sidebar colored"> |
|||
<div class="sidebar-header"> |
|||
<a class="header-brand" href="index.html"> |
|||
<div class="logo-img"> |
|||
<img src="/assets/images/logo.png" class="header-brand-img" alt="GCC" width="25px"> |
|||
</div> |
|||
<span class="text"> GCC APP</span> |
|||
</a> |
|||
<button type="button" class="nav-toggle"><i data-toggle="expanded" class="ik ik-toggle-right toggle-icon"></i></button> |
|||
<button id="sidebarClose" class="nav-close"><i class="ik ik-x"></i></button> |
|||
</div> |
|||
|
|||
<div class="sidebar-content"> |
|||
<div class="nav-container"> |
|||
<nav id="main-menu-navigation" class="navigation-main"> |
|||
<div class="nav-lavel">Makkalai Thedi Mayor</div> |
|||
<div class="nav-item"> |
|||
<a href="index"><i class="ik ik-bar-chart-2"></i><span>Dashboard</span></a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a href="navbar.html"><i class="ik ik-menu"></i><span>Navigation</span> <span class="badge badge-success">New</span></a> |
|||
</div> |
|||
<div class="nav-item has-sub"> |
|||
<a href="javascript:void(0)"><i class="ik ik-layers"></i><span>Widgets</span> <span class="badge badge-danger">150+</span></a> |
|||
<div class="submenu-content"> |
|||
<a href="widgets" class="menu-item">Basic</a> |
|||
<a href="widget-statistic" class="menu-item">Statistic</a> |
|||
<a href="widget-data" class="menu-item">Data</a> |
|||
<a href="widget-chart" class="menu-item">Chart Widget</a> |
|||
</div> |
|||
</div> |
|||
<div class="nav-lavel">UI Element</div> |
|||
<div class="nav-item has-sub"> |
|||
<a href="#"><i class="ik ik-box"></i><span>Basic</span></a> |
|||
<div class="submenu-content"> |
|||
<a href="ui/alerts.html" class="menu-item">Alerts</a> |
|||
<a href="ui/badges.html" class="menu-item">Badges</a> |
|||
<a href="ui/buttons.html" class="menu-item">Buttons</a> |
|||
<a href="ui/navigation.html" class="menu-item">Navigation</a> |
|||
</div> |
|||
</div> |
|||
<div class="nav-item has-sub"> |
|||
<a href="#"><i class="ik ik-gitlab"></i><span>Advance</span> <span class="badge badge-success">New</span></a> |
|||
<div class="submenu-content"> |
|||
<a href="ui/modals.html" class="menu-item">Modals</a> |
|||
<a href="ui/notifications.html" class="menu-item">Notifications</a> |
|||
<a href="ui/carousel.html" class="menu-item">Slider</a> |
|||
<a href="ui/range-slider.html" class="menu-item">Range Slider</a> |
|||
<a href="ui/rating.html" class="menu-item">Rating</a> |
|||
</div> |
|||
</div> |
|||
<div class="nav-item has-sub"> |
|||
<a href="#"><i class="ik ik-package"></i><span>Extra</span></a> |
|||
<div class="submenu-content"> |
|||
<a href="ui/session-timeout.html" class="menu-item">Session Timeout</a> |
|||
</div> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a href="ui/icons.html"><i class="ik ik-command"></i><span>Icons</span></a> |
|||
</div> |
|||
<div class="nav-lavel">Forms</div> |
|||
<div class="nav-item has-sub"> |
|||
<a href="#"><i class="ik ik-edit"></i><span>Forms</span></a> |
|||
<div class="submenu-content"> |
|||
<a href="form-components.html" class="menu-item">Components</a> |
|||
<a href="form-addon.html" class="menu-item">Add-On</a> |
|||
<a href="form-advance.html" class="menu-item">Advance</a> |
|||
</div> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a href="form-picker.html"><i class="ik ik-terminal"></i><span>Form Picker</span> <span class="badge badge-success">New</span></a> |
|||
</div> |
|||
|
|||
<div class="nav-lavel">Tables</div> |
|||
<div class="nav-item"> |
|||
<a href="table-bootstrap.html"><i class="ik ik-credit-card"></i><span>Bootstrap Table</span></a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a href="table-datatable.html"><i class="ik ik-inbox"></i><span>Data Table</span></a> |
|||
</div> |
|||
|
|||
<div class="nav-lavel">Charts</div> |
|||
<div class="nav-item has-sub"> |
|||
<a href="#"><i class="ik ik-pie-chart"></i><span>Charts</span> <span class="badge badge-success">New</span></a> |
|||
<div class="submenu-content"> |
|||
<a href="charts-chartist.html" class="menu-item">Chartist</a> |
|||
<a href="charts-flot.html" class="menu-item">Flot</a> |
|||
<a href="charts-knob.html" class="menu-item">Knob</a> |
|||
<a href="charts-amcharts.html" class="menu-item">Amcharts</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="nav-lavel">Apps</div> |
|||
<div class="nav-item"> |
|||
<a href="calendar.html"><i class="ik ik-calendar"></i><span>Calendar</span></a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a href="taskboard.html"><i class="ik ik-server"></i><span>Taskboard</span></a> |
|||
</div> |
|||
|
|||
<div class="nav-lavel">Pages</div> |
|||
|
|||
<div class="nav-item has-sub"> |
|||
<a href="#"><i class="ik ik-lock"></i><span>Authentication</span></a> |
|||
<div class="submenu-content"> |
|||
<a href="login.html" class="menu-item">Login</a> |
|||
<a href="register.html" class="menu-item">Register</a> |
|||
<a href="forgot-password.html" class="menu-item">Forgot Password</a> |
|||
</div> |
|||
</div> |
|||
<div class="nav-item has-sub"> |
|||
<a href="#"><i class="ik ik-file-text"></i><span>Other</span></a> |
|||
<div class="submenu-content"> |
|||
<a href="profile.html" class="menu-item">Profile</a> |
|||
<a href="invoice.html" class="menu-item">Invoice</a> |
|||
</div> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a href="layouts.html"><i class="ik ik-layout"></i><span>Layouts</span><span class="badge badge-success">New</span></a> |
|||
</div> |
|||
<div class="nav-lavel">Other</div> |
|||
<div class="nav-item has-sub"> |
|||
<a href="javascript:void(0)"><i class="ik ik-list"></i><span>Menu Levels</span></a> |
|||
<div class="submenu-content"> |
|||
<a href="javascript:void(0)" class="menu-item">Menu Level 2.1</a> |
|||
<div class="nav-item has-sub"> |
|||
<a href="javascript:void(0)" class="menu-item">Menu Level 2.2</a> |
|||
<div class="submenu-content"> |
|||
<a href="javascript:void(0)" class="menu-item">Menu Level 3.1</a> |
|||
</div> |
|||
</div> |
|||
<a href="javascript:void(0)" class="menu-item">Menu Level 2.3</a> |
|||
</div> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a href="javascript:void(0)" class="disabled"><i class="ik ik-slash"></i><span>Disabled Menu</span></a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a href="javascript:void(0)"><i class="ik ik-award"></i><span>Sample Page</span></a> |
|||
</div> |
|||
<div class="nav-lavel">Support</div> |
|||
<div class="nav-item"> |
|||
<a href="javascript:void(0)"><i class="ik ik-monitor"></i><span>Documentation</span></a> |
|||
</div> |
|||
<div class="nav-item"> |
|||
<a href="javascript:void(0)"><i class="ik ik-help-circle"></i><span>Submit Issue</span></a> |
|||
</div> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</menu> |
|||
@ -1,366 +0,0 @@ |
|||
<script src="node_modules/datatable/jQuery-3.7.0/jquery-3.7.0.min.js"></script> |
|||
|
|||
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script> |
|||
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> |
|||
<script src="node_modules/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script> |
|||
<script src="node_modules/select2/dist/js/select2.min.js"></script> |
|||
<script src="node_modules/screenfull/dist/screenfull.js"></script> |
|||
<script src="node_modules/moment/moment.js"></script> |
|||
<script src="node_modules/sweetalert2/sweetalert2.min.js"></script> |
|||
|
|||
<script src="node_modules/datatable/JSZip-3.10.1/jszip.min.js"></script> |
|||
<script src="node_modules/datatable/pdfmake-0.2.7/pdfmake.min.js"></script> |
|||
<script src="node_modules/datatable/pdfmake-0.2.7/vfs_fonts.js"></script> |
|||
<script src="node_modules/datatable/DataTables-1.13.6/js/jquery.dataTables.min.js"></script> |
|||
<script src="node_modules/datatable/AutoFill-2.6.0/js/dataTables.autoFill.min.js"></script> |
|||
<script src="node_modules/datatable/Buttons-2.4.1/js/dataTables.buttons.min.js"></script> |
|||
<script src="node_modules/datatable/Buttons-2.4.1/js/buttons.bootstrap4.min.js"></script> |
|||
<script src="node_modules/datatable/Buttons-2.4.1/js/buttons.colVis.min.js"></script> |
|||
<script src="node_modules/datatable/Buttons-2.4.1/js/buttons.html5.min.js"></script> |
|||
<script src="node_modules/datatable/Buttons-2.4.1/js/buttons.print.min.js"></script> |
|||
<script src="node_modules/datatable/ColReorder-1.7.0/js/dataTables.colReorder.min.js"></script> |
|||
<script src="node_modules/datatable/DateTime-1.5.1/js/dataTables.dateTime.min.js"></script> |
|||
<script src="node_modules/datatable/FixedColumns-4.3.0/js/dataTables.fixedColumns.min.js"></script> |
|||
<script src="node_modules/datatable/FixedHeader-3.4.0/js/dataTables.fixedHeader.min.js"></script> |
|||
<script src="node_modules/datatable/KeyTable-2.10.0/js/dataTables.keyTable.min.js"></script> |
|||
<script src="node_modules/datatable/Responsive-2.5.0/js/dataTables.responsive.min.js"></script> |
|||
<script src="node_modules/datatable/RowGroup-1.4.0/js/dataTables.rowGroup.min.js"></script> |
|||
<script src="node_modules/datatable/RowReorder-1.4.1/js/dataTables.rowReorder.min.js"></script> |
|||
<script src="node_modules/datatable/Scroller-2.2.0/js/dataTables.scroller.min.js"></script> |
|||
<script src="node_modules/datatable/SearchBuilder-1.5.0/js/dataTables.searchBuilder.min.js"></script> |
|||
<script src="node_modules/datatable/SearchPanes-2.2.0/js/dataTables.searchPanes.min.js"></script> |
|||
<script src="node_modules/datatable/Select-1.7.0/js/dataTables.select.min.js"></script> |
|||
<script src="node_modules/datatable/StateRestore-1.3.0/js/dataTables.stateRestore.min.js"></script> |
|||
|
|||
<script src="dist/js/theme.js"></script> |
|||
<script th:inline="javascript"> |
|||
// Get the current page URL path |
|||
var currentPagePath = window.location.pathname; |
|||
// Remove the leading slash from the current page URL path |
|||
currentPagePath = currentPagePath.substr(1); |
|||
//alert(currentPagePath); |
|||
// Get the parent menu item and the sub-menu item based on the current page URL path |
|||
var parentMenuItem = document.querySelector('.nav-item.has-sub'); |
|||
var subMenuItem = document.querySelector('.submenu-content .menu-item[href="' + currentPagePath + '"]'); |
|||
|
|||
// Add the "active" class to the parent menu item and its associated sub-menu item |
|||
if (parentMenuItem && subMenuItem) { |
|||
parentMenuItem.classList.add('active', 'open'); |
|||
subMenuItem.classList.add('active'); |
|||
} |
|||
</script> |
|||
|
|||
<script th:inline="javascript"> |
|||
$(document).ready(function() { |
|||
/* |
|||
// Get the current URL |
|||
var currentUrl = window.location.href; |
|||
|
|||
// Remove the query parameter from the URL |
|||
var newUrl = currentUrl.split("?")[0]; |
|||
|
|||
// Replace the current URL with the modified URL without the query parameter |
|||
window.history.replaceState({}, document.title, newUrl); |
|||
*/ |
|||
////////////////////////////////////////////////////////////////////////////////////////////////////// |
|||
var currentPagePath = window.location.pathname; |
|||
//console.error(currentPagePath); |
|||
currentPagePath = "/"+currentPagePath.substr(1); |
|||
//console.error(currentPagePath); |
|||
// Set active class for parent menu items |
|||
$('.nav-item').each(function() { |
|||
var link = $(this).find('a').attr('href'); |
|||
//console.log("Main: "+link +" == "+ currentPagePath); |
|||
if (link === currentPagePath || link === currentPagePath) { |
|||
$(this).addClass('active'); |
|||
$(this).parents('.has-sub').addClass('active open'); |
|||
} |
|||
}); |
|||
|
|||
// Set active class for submenu items |
|||
$('.submenu-content .menu-item').each(function() { |
|||
var link = $(this).attr('href'); |
|||
//console.log("Sub: "+link +" == "+ currentPagePath); |
|||
if (link === currentPagePath || link === currentPagePath) { |
|||
//console.error("Sub: "+link +" == "+ currentPagePath); |
|||
$(this).addClass('active'); |
|||
$(this).parents('.has-sub').addClass('active open'); |
|||
} |
|||
}); |
|||
|
|||
$(document).ready(function(){ |
|||
$('[data-toggle="popover"]').popover(); |
|||
}); |
|||
|
|||
$(".select2").select2(); |
|||
}); |
|||
|
|||
|
|||
function call_loading(div,action){ |
|||
var divID="#"+div; |
|||
var loadingimage= `<center><img src="images/loading.svg" style="opacity: 1; visibility: visible; height:40px;"></center>`; |
|||
if(action=='start'){ |
|||
$(divID).html(loadingimage) |
|||
} |
|||
} |
|||
|
|||
// Date format |
|||
function convertdate(date_txt){ |
|||
var datetxt = date_txt; |
|||
var date = new Date(datetxt); |
|||
|
|||
// Extract the date components |
|||
var day = date.getDate(); |
|||
var month = date.getMonth() + 1; // Month starts from 0, so add 1 |
|||
var year = date.getFullYear(); |
|||
|
|||
// Extract the time components |
|||
var hours = date.getHours(); |
|||
var minutes = date.getMinutes(); |
|||
|
|||
// Determine if it's AM or PM |
|||
var period = hours >= 12 ? 'PM' : 'AM'; |
|||
|
|||
// Adjust the hours to 12-hour format |
|||
hours = hours % 12; |
|||
hours = hours ? hours : 12; // Handle the case when hours is 0 |
|||
|
|||
// Format the date and time string |
|||
//var formattedDate = `${day}/${month}/${year}`; |
|||
//var formattedTime = `${hours}:${minutes.toString().padStart(2, '0')} ${period}`; |
|||
|
|||
// Format the date and time strings |
|||
var formattedDate = `${day.toString().padStart(2, '0')}-${month.toString().padStart(2, '0')}-${year}`; |
|||
var formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')} ${period}`; |
|||
|
|||
// Concatenate the formatted date and time |
|||
var formattedDateTime = `${formattedDate} ${formattedTime}`; |
|||
|
|||
return formattedDateTime; |
|||
} |
|||
|
|||
//Date format |
|||
function convertdate_2(date_txt){ |
|||
var datetxt = date_txt; |
|||
var date = new Date(datetxt); |
|||
|
|||
// Extract the date components |
|||
var day = date.getDate(); |
|||
var month = date.getMonth() + 1; // Month starts from 0, so add 1 |
|||
var year = date.getFullYear(); |
|||
|
|||
// Format the date and time strings |
|||
var formattedDate = `${day.toString().padStart(2, '0')}-${month.toString().padStart(2, '0')}-${year}`; |
|||
|
|||
// Concatenate the formatted date and time |
|||
var formattedDateTime = `${formattedDate}`; |
|||
|
|||
return formattedDateTime; |
|||
} |
|||
|
|||
function date_difference(fromdate,todate,type='datetime'){ |
|||
|
|||
// Parse the date strings into moment objects with the specified format |
|||
var startDate = moment(fromdate, 'DD-MM-YYYY hh:mm A'); |
|||
var endDate = moment(todate, 'DD-MM-YYYY hh:mm A'); |
|||
|
|||
// Calculate the difference in days |
|||
var daysDifference = endDate.diff(startDate, 'days'); |
|||
|
|||
// Calculate the remaining time components (hours, minutes) |
|||
var duration = moment.duration(endDate - startDate); |
|||
var hoursDifference = duration.hours(); |
|||
var minutesDifference = duration.minutes(); |
|||
|
|||
var date_diff_txt =""; |
|||
var day_txt = "day"; |
|||
var hour_txt = "hour"; |
|||
|
|||
var days_txt =""; |
|||
|
|||
if(daysDifference>1){ |
|||
day_txt = "days"; |
|||
} |
|||
if(hoursDifference>1){ |
|||
hour_txt = "hours"; |
|||
} |
|||
|
|||
// Display the result |
|||
//1 day, 1 hour and 34 minutes. |
|||
if(type=='days'){ |
|||
date_diff_txt = daysDifference + ' '+day_txt; |
|||
}else if(type=='time'){ |
|||
date_diff_txt = hoursDifference + ' '+ hour_txt +' and ' + minutesDifference + ' minutes'; |
|||
} |
|||
else{ |
|||
if(daysDifference>0){ |
|||
days_txt = daysDifference + ' '+day_txt+', '; |
|||
} |
|||
date_diff_txt = days_txt + hoursDifference + ' '+ hour_txt +' and ' + minutesDifference + ' minutes'; |
|||
} |
|||
return date_diff_txt; |
|||
} |
|||
|
|||
function nodata(message="Data are not availble at this moment please check later"){ |
|||
var nodata = `<center><img src="images/nodata_ani.gif" width="40%"><br><p class="text-warning">`+message+`</p></center>`; |
|||
return nodata; |
|||
} |
|||
|
|||
function searchinfo(message="Data are not availble at this moment please check later"){ |
|||
var nodata = `<center><img src="images/hi_robo.gif" width="20%"><br><p class="text-warning">`+message+`</p></center>`; |
|||
return nodata; |
|||
} |
|||
|
|||
//Function to display random messages while waiting |
|||
function getLoadingMessage() { |
|||
var messages = [ |
|||
"Please wait as we fetch the data. It will take less than 30 seconds.", |
|||
"Loading data... This won't take long.", |
|||
"Fetching information. Thank you for your patience.", |
|||
"Just a moment while we gather the data.", |
|||
"Loading... Sit tight!", |
|||
"Hold on tight! We're almost there.", |
|||
"Data is on its way. Thanks for waiting.", |
|||
"Patience is a virtue! We're working on it.", |
|||
"Just a few more seconds...", |
|||
"Almost done! Thanks for your patience.", |
|||
"We appreciate your patience. Data is coming shortly.", |
|||
"Stay tuned! Data is loading." |
|||
]; |
|||
|
|||
// Select a random message from the array |
|||
var randomMessage = messages[Math.floor(Math.random() * messages.length)]; |
|||
|
|||
// Display the random message |
|||
return randomMessage; |
|||
} |
|||
|
|||
//To convert the file size from bytes |
|||
function formatFileSize(bytes) { |
|||
if (bytes === 0) return '0 Bytes'; |
|||
const k = 1024; |
|||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; |
|||
const i = Math.floor(Math.log(bytes) / Math.log(k)); |
|||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
|||
} |
|||
|
|||
/* Check file Exits */ |
|||
function checkFileExists(url) { |
|||
return fetch(url) |
|||
.then(response => { |
|||
if (!response.ok) { |
|||
throw new Error('File not found'); |
|||
} |
|||
return true; |
|||
}) |
|||
.catch(error => { |
|||
console.error('Error checking file existence:', error); |
|||
return false; |
|||
}); |
|||
} |
|||
|
|||
/* File Doanload script |
|||
* Send fileUrl - Full Path |
|||
* var fileUrl = "/gcc/files/m_petition/m_action_file/filename.jpg"; |
|||
*/ |
|||
function callDownload(fileUrl,fileName){ |
|||
checkFileExists(fileUrl).then(exists => { |
|||
if (exists) { |
|||
//download file - fileUrl |
|||
// Create a temporary anchor element |
|||
var link = document.createElement("a"); |
|||
link.href = fileUrl; |
|||
link.download = fileName; // Set the download attribute to the file name |
|||
link.click(); // Simulate a click on the anchor element to trigger the download |
|||
} else { |
|||
console.log('File does not exist'); |
|||
|
|||
} |
|||
}); |
|||
} |
|||
/* encode a string to Base64 */ |
|||
function encodeBase64(value) { |
|||
if (value && value.trim() !== '') { |
|||
// Encode the string to Base64 |
|||
var encodedString = btoa(value); |
|||
return encodedString; |
|||
} else { |
|||
return ''; |
|||
} |
|||
} |
|||
|
|||
|
|||
function passwordReset(){ |
|||
var loginid = /*[[${LoginUserId}]]*/''; |
|||
if(loginid!="" && loginid>0){ |
|||
$("#passwordreset").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
|
|||
$("#resetuserid").val(loginid); |
|||
$("#oldpassword").val(''); |
|||
$("#password").val(''); |
|||
$("#newpassword").val(''); |
|||
} |
|||
} |
|||
|
|||
function savePassword() { |
|||
var userid = $("#resetuserid").val(); |
|||
var oldpassword = $("#oldpassword").val(); |
|||
var password = $("#password").val(); |
|||
var confirmpassword = $("#newpassword").val(); |
|||
|
|||
// Input validation |
|||
if (!userid || !oldpassword || !password || !confirmpassword) { |
|||
alert("All fields are required."); |
|||
return; |
|||
} |
|||
|
|||
if (password !== confirmpassword) { |
|||
alert("New password and confirmation password do not match."); |
|||
return; |
|||
} |
|||
|
|||
var formData = new FormData(); |
|||
formData.append('userid', userid); |
|||
formData.append('oldpassword', oldpassword); |
|||
formData.append('newpassword', password); |
|||
|
|||
// Send AJAX request to reset password |
|||
$.ajax({ |
|||
url: '/gcc/api/resetPassword', // Update with the actual endpoint URL |
|||
type: 'POST', |
|||
data: formData, |
|||
contentType: false, // Required for FormData |
|||
processData: false, // Required for FormData |
|||
success: function(response) { |
|||
// Handle success response |
|||
if (response === 'success') { |
|||
alert("Password reset successfully."); |
|||
// Optionally, redirect the user or reset the form |
|||
document.getElementById('logout-form').submit(); |
|||
} else { |
|||
alert(response.message || "Failed to reset password."); |
|||
} |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Handle error response |
|||
var errorMessage = "An error occurred. Please try again later."; |
|||
if (xhr.responseJSON && xhr.responseJSON.message) { |
|||
errorMessage = xhr.responseJSON.message; |
|||
} |
|||
alert(errorMessage); |
|||
} |
|||
}); |
|||
} |
|||
</script> |
|||
<!-- |
|||
<script th:inline="javascript"> |
|||
function logout() { |
|||
fetch(/*[[ @{/logout} ]]*/"", { method: 'POST' }) |
|||
.then(() => window.location.href = /*[[ @{/login} ]]*/"") |
|||
.catch(error => console.error('Error logging out:', error)); |
|||
} |
|||
</script> |
|||
--> |
|||
@ -1,141 +0,0 @@ |
|||
<search> |
|||
<div class="search-ui"> |
|||
<div class="search-header"> |
|||
<img src="./assets/images/logo.png" alt="" class="logo"> |
|||
<button class="search-close btn btn-icon bg-transparent float-right mt-2"> |
|||
<i class="i-Close-Window text-22 text-muted"></i> |
|||
</button> |
|||
</div> |
|||
|
|||
<input type="text" placeholder="Type here" class="search-input" autofocus> |
|||
|
|||
<div class="search-title"> |
|||
<span class="text-muted">Search results</span> |
|||
</div> |
|||
|
|||
<div class="search-results list-horizontal"> |
|||
<div class="list-item col-md-12 p-0"> |
|||
<div class="card o-hidden flex-row mb-4 d-flex"> |
|||
<div class="list-thumb d-flex"> |
|||
<!-- TUMBNAIL --> |
|||
<img src="./assets/images/products/headphone-1.jpg" alt=""> |
|||
</div> |
|||
<div class="flex-grow-1 pl-2 d-flex"> |
|||
<div class="card-body align-self-center d-flex flex-column justify-content-between align-items-lg-center flex-lg-row"> |
|||
<!-- OTHER DATA --> |
|||
<a href="" class="w-40 w-sm-100"> |
|||
<div class="item-title">Headphone 1</div> |
|||
</a> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100">Gadget</p> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100"> |
|||
$300 |
|||
<del class="text-secondary">$400</del> |
|||
</p> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100 d-none d-lg-block item-badges"> |
|||
<span class="badge badge-danger">Sale</span> |
|||
</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="list-item col-md-12 p-0"> |
|||
<div class="card o-hidden flex-row mb-4 d-flex"> |
|||
<div class="list-thumb d-flex"> |
|||
<!-- TUMBNAIL --> |
|||
<img src="./assets/images/products/headphone-2.jpg" alt=""> |
|||
</div> |
|||
<div class="flex-grow-1 pl-2 d-flex"> |
|||
<div class="card-body align-self-center d-flex flex-column justify-content-between align-items-lg-center flex-lg-row"> |
|||
<!-- OTHER DATA --> |
|||
<a href="" class="w-40 w-sm-100"> |
|||
<div class="item-title">Headphone 1</div> |
|||
</a> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100">Gadget</p> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100"> |
|||
$300 |
|||
<del class="text-secondary">$400</del> |
|||
</p> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100 d-none d-lg-block item-badges"> |
|||
<span class="badge badge-primary">New</span> |
|||
</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="list-item col-md-12 p-0"> |
|||
<div class="card o-hidden flex-row mb-4 d-flex"> |
|||
<div class="list-thumb d-flex"> |
|||
<!-- TUMBNAIL --> |
|||
<img src="./assets/images/products/headphone-3.jpg" alt=""> |
|||
</div> |
|||
<div class="flex-grow-1 pl-2 d-flex"> |
|||
<div class="card-body align-self-center d-flex flex-column justify-content-between align-items-lg-center flex-lg-row"> |
|||
<!-- OTHER DATA --> |
|||
<a href="" class="w-40 w-sm-100"> |
|||
<div class="item-title">Headphone 1</div> |
|||
</a> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100">Gadget</p> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100"> |
|||
$300 |
|||
<del class="text-secondary">$400</del> |
|||
</p> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100 d-none d-lg-block item-badges"> |
|||
<span class="badge badge-primary">New</span> |
|||
</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="list-item col-md-12 p-0"> |
|||
<div class="card o-hidden flex-row mb-4 d-flex"> |
|||
<div class="list-thumb d-flex"> |
|||
<!-- TUMBNAIL --> |
|||
<img src="./assets/images/products/headphone-4.jpg" alt=""> |
|||
</div> |
|||
<div class="flex-grow-1 pl-2 d-flex"> |
|||
<div class="card-body align-self-center d-flex flex-column justify-content-between align-items-lg-center flex-lg-row"> |
|||
<!-- OTHER DATA --> |
|||
<a href="" class="w-40 w-sm-100"> |
|||
<div class="item-title">Headphone 1</div> |
|||
</a> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100">Gadget</p> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100"> |
|||
$300 |
|||
<del class="text-secondary">$400</del> |
|||
</p> |
|||
<p class="m-0 text-muted text-small w-15 w-sm-100 d-none d-lg-block item-badges"> |
|||
<span class="badge badge-primary">New</span> |
|||
</p> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- PAGINATION CONTROL --> |
|||
<div class="col-md-12 mt-5 text-center"> |
|||
<nav aria-label="Page navigation example"> |
|||
<ul class="pagination d-inline-flex"> |
|||
<li class="page-item"> |
|||
<a class="page-link" href="#" aria-label="Previous"> |
|||
<span aria-hidden="true">«</span> |
|||
<span class="sr-only">Previous</span> |
|||
</a> |
|||
</li> |
|||
<li class="page-item"><a class="page-link" href="#">1</a></li> |
|||
<li class="page-item"><a class="page-link" href="#">2</a></li> |
|||
<li class="page-item"><a class="page-link" href="#">3</a></li> |
|||
<li class="page-item"> |
|||
<a class="page-link" href="#" aria-label="Next"> |
|||
<span aria-hidden="true">»</span> |
|||
<span class="sr-only">Next</span> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</search> |
|||
@ -1,116 +0,0 @@ |
|||
|
|||
<!-- Box 1 --> |
|||
<div class="modal fade" id="ackModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="ackModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ackModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 2 --> |
|||
<div class="modal fade" id="ComplaintStatusBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="complaint-title">புகார் நிலை / Complaint Status:</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ComplaintStatusBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 3 --> |
|||
<div class="modal fade" id="viewFileBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewFileTitle">View File</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewFileBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 4 --> |
|||
<div class="modal fade" id="viewpetition" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewPetitionTitle">View Petition</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewPetitionBoxBody"> |
|||
<iframe id="iframe" width="100%" height="400px" src=""></iframe> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 0 common --> |
|||
<div class="modal fade" id="forwardModalBox" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="forwardModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="forwardModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
@ -1,290 +0,0 @@ |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var petitionNo = /*[[${petitionNo}]]*/''; |
|||
var petitionId = 0; |
|||
var closedComplaintsList=[]; |
|||
var complaintTypeList = ""; |
|||
var officerMasterList = ""; |
|||
|
|||
/* Get Complaint Type Data */ |
|||
function get_complaint_type_data(){ |
|||
|
|||
get_complaint_type_list().then(function(complaintTypes) { |
|||
// Handle the Complaint list |
|||
complaintTypeList = complaintTypes; |
|||
|
|||
// Call Petition function to fetch the data |
|||
get_petition_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching complaint type list:', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Officer Master Data */ |
|||
function get_officer_master_data(){ |
|||
|
|||
get_officer_list().then(function(officers) { |
|||
// Handle the officer list |
|||
officerMasterList = officers; |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching offcier master data:', error); |
|||
}); |
|||
} |
|||
|
|||
// Function to get complaint_type and complaint_typeid by complaint_typeid |
|||
function getComplaintTypeById(complaintTypeId) { |
|||
for (var i = 0; i < complaintTypeList.length; i++) { |
|||
if (complaintTypeList[i].complaint_typeid == complaintTypeId) { |
|||
return { |
|||
complaint_type: complaintTypeList[i].complaint_type, |
|||
complaint_typeid: complaintTypeList[i].complaint_typeid |
|||
}; |
|||
} |
|||
} |
|||
return null; // Return null if no matching complaint_typeid is found |
|||
} |
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_data(){ |
|||
get_petition_details().then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint; |
|||
petitionId = petitionDetails[0].petition_id; |
|||
var complaintArray = complaint.split(","); |
|||
$("#complaintType").val(complaintArray); |
|||
|
|||
$('#complaintType').trigger('change'); |
|||
|
|||
closedComplaintsList = complaintArray; |
|||
$("#cdate_value").html(convertdate(petitionDetails[0].cdate)); |
|||
$("#petition_no_value").html(petitionDetails[0].petition_no); |
|||
$("#petitioner_name_value").html(petitionDetails[0].petitioner_name); |
|||
$("#petitioner_mobile_value").html(petitionDetails[0].petitioner_mobile); |
|||
$("#petitioner_address_value").html(petitionDetails[0].petitioner_address); |
|||
$("#petitioner_pincode_value").html(petitionDetails[0].petitioner_pincode); |
|||
|
|||
$("#complaint_with_maping_value").html(petitionDetails[0].complaint_nature); |
|||
|
|||
var petition_status = petitionDetails[0].status |
|||
|
|||
if(petition_status=='pending' || petition_status=='partial'){ |
|||
$("#petition_summary_title").html("Pending Summary"); |
|||
var currentDate = new Date(); |
|||
var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),''); |
|||
$("#petition_summary_html").html(`This petition has been pending for more than ${totaldayspending}`); |
|||
} |
|||
if(petition_status=='close'){ |
|||
$("#petition_summary_title").html("Close Summary"); |
|||
var currentDate = new Date(); |
|||
var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),''); |
|||
$("#petition_summary_html").html(`The time taken to close this petition is ${totaldayspending}`); |
|||
} |
|||
|
|||
petition_status=petition_status.charAt(0).toUpperCase() + petition_status.slice(1); |
|||
|
|||
$("#petition_status_value").html(`<b style="color:red">${petition_status}</b>`); |
|||
|
|||
// Call Complaint list based on Petition No and Id |
|||
get_petition_mapping_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition Data ('+petitionNo+'):', error.message); |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_details() { |
|||
|
|||
var formData = new FormData(); |
|||
formData.append('petitionNo',petitionNo); |
|||
var apiUrl = '/gcc/api/c_petition/getPetitionDetails?petitionNo='+petitionNo; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function get_petition_mapping_data(){ |
|||
get_petition_mapping_list().then(function(mappingDetails) { |
|||
|
|||
// Initialize count |
|||
let totalCount = mappingDetails.length; |
|||
let completedCount = 0; |
|||
let pendingCount = 0; |
|||
|
|||
var tableListHTML = ""; |
|||
|
|||
for(j = 0; j < mappingDetails.length; j++){ |
|||
var complaint_status=mappingDetails[j].complaint_status; |
|||
complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1); |
|||
|
|||
tableListHTML += `<tr> |
|||
<td>${j+1}</td> |
|||
<td>${mappingDetails[j].complaint_type}</td> |
|||
<td>${mappingDetails[j].off_nm} (${mappingDetails[j].off_id})</td> |
|||
<td>${convertdate(mappingDetails[j].mappedOn)}</td> |
|||
<td>${complaint_status}</td> |
|||
</tr>`; |
|||
|
|||
// Check if the status is "pending" |
|||
if (mappingDetails[j].complaint_status === "pending") { |
|||
// Increment the count |
|||
pendingCount++; |
|||
} |
|||
else if(mappingDetails[j].complaint_status === "close"){ |
|||
completedCount++; |
|||
} |
|||
} |
|||
|
|||
var listOfComplaintsHTML = `<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>Complaint</th> |
|||
<th>Assigned To</th> |
|||
<th>Assigned On</th> |
|||
<th>Status</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${tableListHTML} |
|||
</tbody> |
|||
</table>`; |
|||
$("#listOfComplaintsHTML").html(listOfComplaintsHTML); |
|||
|
|||
$("#total_complaints_value").html(`<b>${totalCount}</b>`); |
|||
$("#total_complaints_completed_value").html(`<b style="color:green">${completedCount}</b>`); |
|||
$("#total_complaints_pending_value").html(`<b style="color:red">${pendingCount}</b>`); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching Mapping Data ('+petitionId+'):', error.message); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_mapping_list() { |
|||
|
|||
var formData = new FormData(); |
|||
var apiUrl = '/gcc/api/c_petition/getComplaintListByPetitionId?petitionId='+petitionId; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function call_petition_search_from(errorTXT){ |
|||
var errorHTML = ""; |
|||
if(errorTXT!=""){ |
|||
errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`; |
|||
} |
|||
var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();"> |
|||
<div class="card-header"> |
|||
<h3>View Petition Form</h3> |
|||
<div class="card-header-right"> |
|||
<h3 th:utext="'Petition No: '+${petitionNo}+''"></h3> |
|||
</div> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-12 text-center"> |
|||
${errorHTML} |
|||
<div class="form-group"> |
|||
<label for="petitionNoSearch">Petition No / மனு எண் </label> |
|||
<input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="CP00000000" maxlength="10" required> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="col-12"> |
|||
<div class="block-content" id="userinfo2"> |
|||
<div id="comp_mapping_to_officers" class="row"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card-footer text-center"> |
|||
<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button> |
|||
<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button> |
|||
</div> |
|||
</form>`; |
|||
|
|||
$("#petitionViewtable").html(searchFormHTML); |
|||
$("#petitionNoSearch").mask('CP00000000'); |
|||
} |
|||
|
|||
function searchRequest(){ |
|||
var searchValue = $('#petitionNoSearch').val(); |
|||
if (searchValue && searchValue.trim() !== '') { |
|||
searchValue = encodeBase64(searchValue); |
|||
window.location.href = "/gcc/c_petition/view-petition?petitionNo="+searchValue; |
|||
} |
|||
else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
return false; |
|||
} |
|||
</script> |
|||
<script> |
|||
$(document).ready(function() { |
|||
if(petitionNo!=null && petitionNo!="error"){ |
|||
get_complaint_type_data(); |
|||
get_officer_master_data(); |
|||
} |
|||
else{ |
|||
if(petitionNo=="error"){ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
else{ |
|||
call_petition_search_from(""); |
|||
} |
|||
} |
|||
|
|||
}); |
|||
</script> |
|||
@ -1,338 +0,0 @@ |
|||
<script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script> |
|||
<script th:inline="javascript"> |
|||
var nodata = nodata(); |
|||
|
|||
var baseURL = "/gcc/c_petition/"; |
|||
|
|||
/* Complaint Type List */ |
|||
function get_complaint_type_list() { |
|||
|
|||
var apiUrl = '/gcc/api/c_petition/getComplaintTypes'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Officer Master List */ |
|||
function get_officer_list() { |
|||
|
|||
var apiUrl = '/gcc/api/c_petition/getOfficerList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function viewAck(petitionNo){ |
|||
|
|||
loading_text_msg = getLoadingMessage(); // get Loading random text |
|||
$('#ackModalTitle').html("Loading Petition Acknowledgement ("+petitionNo+")"); |
|||
var loading=searchinfo("<b>"+loading_text_msg+"</b>"); |
|||
var ackContentHTML=` |
|||
<div class="row"> |
|||
<div class="col-lg-6"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack1table" class="ack-content"> |
|||
<div id="ack1">${loading}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-6 printack2"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack2table" class="ack-content"> |
|||
<div id="ack2">${loading}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!--<div class="col-lg-12 text-center block-options pt-10"> |
|||
<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button> |
|||
</div>--> |
|||
</div>`; |
|||
|
|||
$('#ackModalBody').html(ackContentHTML); // Box content (Body) |
|||
|
|||
$("#ackModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
|
|||
get_petition_ack_data(petitionNo); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_ack_data(petitionNo){ |
|||
get_petition_details_byNo(petitionNo).then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint_txt; |
|||
|
|||
var complaintArray = complaint.split(','); |
|||
|
|||
for(j = 0; j < complaintArray.length; j++){ |
|||
if(j>0){ |
|||
complaintHTML+="<br>"; |
|||
} |
|||
complaintHTML+= (j+1)+') '+complaintArray[j]; |
|||
} |
|||
var ack =` |
|||
<table class="table table-borderless table-vcenter p-0 m-0"> |
|||
<tbody> |
|||
<tr> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
<td class="fw-semibold text-center"> |
|||
<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br> |
|||
மக்களை தேடி மேயர் திட்டம்<br> |
|||
ஒப்புகை சீட்டு / Acknowledgement Receipt</b> |
|||
</td> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<hr style="margin:0px"> |
|||
<div class="block-content p-0 m-0"> |
|||
<table class="table table-borderless table-vcenter" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${convertdate(petitionDetails[0].cdate)} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petition_no} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_name} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_mobile} |
|||
</td> |
|||
</tr> |
|||
<tr style="font-size:12px;"> |
|||
<th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintHTML} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th> |
|||
</tr> |
|||
<tr style="text-align: right;"> |
|||
<th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div>`; |
|||
$('#ackModalTitle').html("Acknowledgement Of Petition ("+petitionNo+")"); |
|||
$("#ack1").html(ack); |
|||
$("#ack2").html(ack); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_details_byNo(petitionNo) { |
|||
|
|||
var apiUrl = '/gcc/api/c_petition/getPetitionDetails?petitionNo='+petitionNo |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_complaint_details_byId(mapId) { |
|||
|
|||
var apiUrl = '/gcc/api/c_petition/getComplaintDetails?mapId='+mapId |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_complaint_action_byId(mapId) { |
|||
|
|||
var apiUrl = '/gcc/api/c_petition/getComplaintActionDetails?mapId='+mapId |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
|
|||
/* File View */ |
|||
function viewFile(fileOf,fileName,fileType){ |
|||
$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box |
|||
|
|||
var fileUrl = "/gcc/files/c_petition/"; |
|||
|
|||
if(fileOf=="petition") |
|||
{ |
|||
fileUrl=fileUrl+fileName; |
|||
} |
|||
else if(fileOf="action"){ |
|||
fileUrl=fileUrl+"m_action_file/"+fileName; |
|||
} |
|||
else{ |
|||
fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name |
|||
} |
|||
|
|||
checkFileExists(fileUrl).then(exists => { |
|||
if (exists) { |
|||
if(fileType=='application/pdf'){ |
|||
var fileHTML = `<iframe src="${fileUrl}" type="application/pdf" width="100%" height="600px"></iframe>`; |
|||
|
|||
} |
|||
else if(fileType=='application/octet-stream'){ |
|||
fileHTML =`<p class='text-danger m-0 p-0'>File Preview not avaiable.<br>Try to download and view.</p>`; |
|||
} |
|||
else{ |
|||
fileHTML =`<img src="${fileUrl}" alt="${fileType}" width="100%">`; |
|||
} |
|||
} else { |
|||
console.log('File does not exist'); |
|||
fileHTML = `<p class='text-danger m-0 p-0'>File does not exist</p>`; |
|||
} |
|||
|
|||
$("#viewFileBoxBody").html(fileHTML); // Modal Box Body |
|||
$("#viewFileBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
}); |
|||
} |
|||
|
|||
/* Downlaod file */ |
|||
function downloadFile(fileOf,fileName,fileType){ |
|||
$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box |
|||
|
|||
var fileUrl = "/gcc/files/c_petition/"; |
|||
|
|||
if(fileOf=="petition") |
|||
{ |
|||
fileUrl=fileUrl+fileName; |
|||
callDownload(fileUrl,fileName); |
|||
} |
|||
else if(fileOf="action"){ |
|||
fileUrl=fileUrl+"m_action_file/"+fileName; |
|||
callDownload(fileUrl,fileName); |
|||
} |
|||
else{ |
|||
fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name |
|||
} |
|||
} |
|||
|
|||
/* Show Complaint forward Modal */ |
|||
function forward_compliant(mapId,title){ |
|||
var compmapHTML =`<div class="col-12" id="comp${mapId}"> |
|||
|
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">${title}</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div class="form-group"> |
|||
<label for="dept${mapId}">Select Department Type</label> |
|||
<select name="dept[]" id="dept${mapId}" class="form-control" onchange="javascript:calloffice(this.value,${mapId})"> |
|||
<option value="0">Select Department</option> |
|||
<option value="1">GCC Department</option> |
|||
<option value="2">External Department</option> |
|||
</select> |
|||
</div> |
|||
<div id="officedata${mapId}"></div> |
|||
<div id="officers${mapId}"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div>`; |
|||
|
|||
$("#forwardModalBody").html(compmapHTML); // Modal Box Body |
|||
$("#forwardModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
} |
|||
</script> |
|||
@ -1,19 +0,0 @@ |
|||
<div class="row"> |
|||
<div class="col-12 mb-2"> |
|||
<div class="input-group mb-0"> |
|||
<span class="input-group-prepend"> |
|||
<button type="button" id="filter_reset_btn" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset"> |
|||
<i class="ik ik-refresh-ccw"></i> |
|||
</button> |
|||
</span> |
|||
<select class="form-control" id="search_department_id" name="search_department_id"> |
|||
<option value="0">All Department`s</option> |
|||
</select> |
|||
<span class="input-group-append"> |
|||
<button type="button" id="filter_search_btn" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search"> |
|||
<i class="ik ik-search me-1"></i> Search |
|||
</button> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,116 +0,0 @@ |
|||
|
|||
<!-- Box 1 --> |
|||
<div class="modal fade" id="ackModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="ackModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ackModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 2 --> |
|||
<div class="modal fade" id="ComplaintStatusBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="complaint-title">புகார் நிலை / Complaint Status:</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ComplaintStatusBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 3 --> |
|||
<div class="modal fade" id="viewFileBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewFileTitle">View File</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body p-0"> |
|||
<div id="viewFileBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 4 --> |
|||
<div class="modal fade" id="viewFile" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewFileTitle">View File</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewFileBoxBody2"> |
|||
ss |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 0 common --> |
|||
<div class="modal fade" id="forwardModalBox" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="forwardModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="forwardModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
@ -1,50 +0,0 @@ |
|||
<script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script> |
|||
<script th:inline="javascript"> |
|||
var nodata = nodata(); |
|||
|
|||
var baseURL = "/gcc/circular/"; |
|||
|
|||
/* Circular Type List */ |
|||
function get_circular_type_list() { |
|||
|
|||
var apiUrl = '/gcc/api/circular/getCircularTypes'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Department List */ |
|||
function get_department_list() { |
|||
|
|||
var apiUrl = '/gcc/api/circular/getDeprtmentList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
</script> |
|||
@ -1,116 +0,0 @@ |
|||
|
|||
<!-- Box 1 --> |
|||
<div class="modal fade" id="ackModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="ackModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ackModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 2 --> |
|||
<div class="modal fade" id="ComplaintStatusBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="complaint-title">புகார் நிலை / Complaint Status:</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ComplaintStatusBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 3 --> |
|||
<div class="modal fade" id="viewFileBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewFileTitle">View File</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewFileBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 4 --> |
|||
<div class="modal fade" id="viewpetition" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewPetitionTitle">View Petition</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewPetitionBoxBody"> |
|||
<iframe id="iframe" width="100%" height="400px" src=""></iframe> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 0 common --> |
|||
<div class="modal fade" id="forwardModalBox" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="forwardModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="forwardModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
@ -1,293 +0,0 @@ |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var petitionNo = /*[[${petitionNo}]]*/''; |
|||
var petitionId = 0; |
|||
var closedComplaintsList=[]; |
|||
var complaintTypeList = ""; |
|||
var officerMasterList = ""; |
|||
|
|||
/* Get Complaint Type Data */ |
|||
function get_complaint_type_data(){ |
|||
|
|||
get_complaint_type_list().then(function(complaintTypes) { |
|||
// Handle the Complaint list |
|||
complaintTypeList = complaintTypes; |
|||
|
|||
// Call Petition function to fetch the data |
|||
get_petition_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching complaint type list:', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Officer Master Data */ |
|||
function get_officer_master_data(){ |
|||
|
|||
get_officer_list().then(function(officers) { |
|||
// Handle the officer list |
|||
officerMasterList = officers; |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching offcier master data:', error); |
|||
}); |
|||
} |
|||
|
|||
// Function to get complaint_type and complaint_typeid by complaint_typeid |
|||
function getComplaintTypeById(complaintTypeId) { |
|||
for (var i = 0; i < complaintTypeList.length; i++) { |
|||
if (complaintTypeList[i].complaint_typeid == complaintTypeId) { |
|||
return { |
|||
complaint_type: complaintTypeList[i].complaint_type, |
|||
complaint_typeid: complaintTypeList[i].complaint_typeid |
|||
}; |
|||
} |
|||
} |
|||
return null; // Return null if no matching complaint_typeid is found |
|||
} |
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_data(){ |
|||
get_petition_details().then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint; |
|||
petitionId = petitionDetails[0].petition_id; |
|||
var complaintArray = complaint.split(","); |
|||
$("#complaintType").val(complaintArray); |
|||
|
|||
$('#complaintType').trigger('change'); |
|||
|
|||
closedComplaintsList = complaintArray; |
|||
$("#cdate_value").html(convertdate(petitionDetails[0].cdate)); |
|||
$("#petition_no_value").html(petitionDetails[0].petition_no); |
|||
$("#petitioner_name_value").html(petitionDetails[0].petitioner_name); |
|||
$("#petitioner_mobile_value").html(petitionDetails[0].petitioner_mobile); |
|||
$("#petitioner_address_value").html(petitionDetails[0].petitioner_address); |
|||
$("#petitioner_pincode_value").html(petitionDetails[0].petitioner_pincode); |
|||
|
|||
$("#complaint_with_maping_value").html(petitionDetails[0].complaint_nature); |
|||
$("#remarks_with_value").html(petitionDetails[0].remarks); |
|||
|
|||
var petition_status = petitionDetails[0].status |
|||
|
|||
if(petition_status=='pending' || petition_status=='partial'){ |
|||
$("#petition_summary_title").html("Pending Summary"); |
|||
var currentDate = new Date(); |
|||
var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),''); |
|||
$("#petition_summary_html").html(`This petition has been pending for more than ${totaldayspending}`); |
|||
} |
|||
if(petition_status=='close'){ |
|||
$("#petition_summary_title").html("Close Summary"); |
|||
var currentDate = new Date(); |
|||
var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),''); |
|||
$("#petition_summary_html").html(`The time taken to close this petition is ${totaldayspending}`); |
|||
} |
|||
|
|||
petition_status=petition_status.charAt(0).toUpperCase() + petition_status.slice(1); |
|||
|
|||
$("#petition_status_value").html(`<b style="color:red">${petition_status}</b>`); |
|||
|
|||
// Call Complaint list based on Petition No and Id |
|||
get_petition_mapping_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition Data ('+petitionNo+'):', error.message); |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_details() { |
|||
|
|||
var formData = new FormData(); |
|||
formData.append('petitionNo',petitionNo); |
|||
|
|||
var apiUrl = '/gcc/api/com_petition/getPetitionDetails?petitionNo='+petitionNo; |
|||
//alert(petitionNo); |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function get_petition_mapping_data(){ |
|||
get_petition_mapping_list().then(function(mappingDetails) { |
|||
|
|||
// Initialize count |
|||
let totalCount = mappingDetails.length; |
|||
let completedCount = 0; |
|||
let pendingCount = 0; |
|||
|
|||
var tableListHTML = ""; |
|||
|
|||
for(j = 0; j < mappingDetails.length; j++){ |
|||
var complaint_status=mappingDetails[j].complaint_status; |
|||
complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1); |
|||
|
|||
tableListHTML += `<tr> |
|||
<td>${j+1}</td> |
|||
<td>${mappingDetails[j].complaint_type}</td> |
|||
<td>${mappingDetails[j].off_nm} (${mappingDetails[j].off_id})</td> |
|||
<td>${convertdate(mappingDetails[j].mappedOn)}</td> |
|||
<td>${complaint_status}</td> |
|||
</tr>`; |
|||
|
|||
// Check if the status is "pending" |
|||
if (mappingDetails[j].complaint_status === "pending") { |
|||
// Increment the count |
|||
pendingCount++; |
|||
} |
|||
else if(mappingDetails[j].complaint_status === "close"){ |
|||
completedCount++; |
|||
} |
|||
} |
|||
|
|||
var listOfComplaintsHTML = `<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>Complaint</th> |
|||
<th>Assigned To</th> |
|||
<th>Assigned On</th> |
|||
<th>Status</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${tableListHTML} |
|||
</tbody> |
|||
</table>`; |
|||
$("#listOfComplaintsHTML").html(listOfComplaintsHTML); |
|||
|
|||
$("#total_complaints_value").html(`<b>${totalCount}</b>`); |
|||
$("#total_complaints_completed_value").html(`<b style="color:green">${completedCount}</b>`); |
|||
$("#total_complaints_pending_value").html(`<b style="color:red">${pendingCount}</b>`); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching Mapping Data ('+petitionId+'):', error.message); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_mapping_list() { |
|||
|
|||
var formData = new FormData(); |
|||
var apiUrl = '/gcc/api/com_petition/getComplaintListByPetitionId?petitionId='+petitionId; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function call_petition_search_from(errorTXT){ |
|||
var errorHTML = ""; |
|||
if(errorTXT!=""){ |
|||
errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`; |
|||
} |
|||
var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();"> |
|||
<div class="card-header"> |
|||
<h3>View Petition Form</h3> |
|||
<div class="card-header-right"> |
|||
<h3 th:utext="'Petition No: '+${petitionNo}+''"></h3> |
|||
</div> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-12 text-center"> |
|||
${errorHTML} |
|||
<div class="form-group"> |
|||
<label for="petitionNoSearch">Petition No / மனு எண் </label> |
|||
<input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="COM00000000" maxlength="11" required> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="col-12"> |
|||
<div class="block-content" id="userinfo2"> |
|||
<div id="comp_mapping_to_officers" class="row"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card-footer text-center"> |
|||
<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button> |
|||
<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button> |
|||
</div> |
|||
</form>`; |
|||
|
|||
$("#petitionViewtable").html(searchFormHTML); |
|||
$("#petitionNoSearch").mask('COM00000000'); |
|||
} |
|||
|
|||
function searchRequest(){ |
|||
var searchValue = $('#petitionNoSearch').val(); |
|||
if (searchValue && searchValue.trim() !== '') { |
|||
searchValue = encodeBase64(searchValue); |
|||
window.location.href = "/gcc/com_petition/view-petition?petitionNo="+searchValue; |
|||
} |
|||
else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
return false; |
|||
} |
|||
</script> |
|||
<script> |
|||
$(document).ready(function() { |
|||
if(petitionNo!=null && petitionNo!="error"){ |
|||
get_complaint_type_data(); |
|||
get_officer_master_data(); |
|||
} |
|||
else{ |
|||
if(petitionNo=="error"){ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
else{ |
|||
call_petition_search_from(""); |
|||
} |
|||
} |
|||
|
|||
}); |
|||
</script> |
|||
@ -1,360 +0,0 @@ |
|||
<script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script> |
|||
<script th:inline="javascript"> |
|||
var nodata = nodata(); |
|||
|
|||
var baseURL = "/gcc/com_petition/"; |
|||
|
|||
/* Complaint Type List */ |
|||
function get_complaint_type_list() { |
|||
|
|||
var apiUrl = '/gcc/api/com_petition/getComplaintTypes'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Officer Master List */ |
|||
function get_officer_list() { |
|||
|
|||
var apiUrl = '/gcc/api/com_petition/getOfficerList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Petition Type List */ |
|||
function get_petition_type_list() { |
|||
|
|||
var apiUrl = '/gcc/api/com_petition/getPetitionTypes'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function viewAck(petitionNo){ |
|||
|
|||
loading_text_msg = getLoadingMessage(); // get Loading random text |
|||
$('#ackModalTitle').html("Loading Petition Acknowledgement ("+petitionNo+")"); |
|||
var loading=searchinfo("<b>"+loading_text_msg+"</b>"); |
|||
var ackContentHTML=` |
|||
<div class="row"> |
|||
<div class="col-lg-6"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack1table" class="ack-content"> |
|||
<div id="ack1">${loading}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-6 printack2"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack2table" class="ack-content"> |
|||
<div id="ack2">${loading}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!--<div class="col-lg-12 text-center block-options pt-10"> |
|||
<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button> |
|||
</div>--> |
|||
</div>`; |
|||
|
|||
$('#ackModalBody').html(ackContentHTML); // Box content (Body) |
|||
|
|||
$("#ackModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
|
|||
get_petition_ack_data(petitionNo); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_ack_data(petitionNo){ |
|||
get_petition_details_byNo(petitionNo).then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint_txt; |
|||
|
|||
var complaintArray = complaint.split(','); |
|||
|
|||
for(j = 0; j < complaintArray.length; j++){ |
|||
if(j>0){ |
|||
complaintHTML+="<br>"; |
|||
} |
|||
complaintHTML+= (j+1)+') '+complaintArray[j]; |
|||
} |
|||
var ack =` |
|||
<table class="table table-borderless table-vcenter p-0 m-0"> |
|||
<tbody> |
|||
<tr> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
<td class="fw-semibold text-center"> |
|||
<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br> |
|||
மக்களை தேடி மேயர் திட்டம்<br> |
|||
ஒப்புகை சீட்டு / Acknowledgement Receipt</b> |
|||
</td> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<hr style="margin:0px"> |
|||
<div class="block-content p-0 m-0"> |
|||
<table class="table table-borderless table-vcenter" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${convertdate(petitionDetails[0].cdate)} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petition_no} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_name} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_mobile} |
|||
</td> |
|||
</tr> |
|||
<tr style="font-size:12px;"> |
|||
<th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintHTML} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th> |
|||
</tr> |
|||
<tr style="text-align: right;"> |
|||
<th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div>`; |
|||
$('#ackModalTitle').html("Acknowledgement Of Petition ("+petitionNo+")"); |
|||
$("#ack1").html(ack); |
|||
$("#ack2").html(ack); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_details_byNo(petitionNo) { |
|||
|
|||
var apiUrl = '/gcc/api/com_petition/getPetitionDetails?petitionNo='+petitionNo |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_complaint_details_byId(mapId) { |
|||
|
|||
var apiUrl = '/gcc/api/com_petition/getComplaintDetails?mapId='+mapId |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_complaint_action_byId(mapId) { |
|||
|
|||
var apiUrl = '/gcc/api/com_petition/getComplaintActionDetails?mapId='+mapId |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
|
|||
/* File View */ |
|||
function viewFile(fileOf,fileName,fileType){ |
|||
$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box |
|||
|
|||
var fileUrl = "/gcc/files/com_petition/"; |
|||
|
|||
if(fileOf=="petition") |
|||
{ |
|||
fileUrl=fileUrl+fileName; |
|||
} |
|||
else if(fileOf="action"){ |
|||
fileUrl=fileUrl+"com_action_file/"+fileName; |
|||
} |
|||
else{ |
|||
fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name |
|||
} |
|||
|
|||
checkFileExists(fileUrl).then(exists => { |
|||
if (exists) { |
|||
if(fileType=='application/pdf'){ |
|||
var fileHTML = `<iframe src="${fileUrl}" type="application/pdf" width="100%" height="600px"></iframe>`; |
|||
|
|||
} |
|||
else if(fileType=='application/octet-stream'){ |
|||
fileHTML =`<p class='text-danger m-0 p-0'>File Preview not avaiable.<br>Try to download and view.</p>`; |
|||
} |
|||
else{ |
|||
fileHTML =`<img src="${fileUrl}" alt="${fileType}" width="100%">`; |
|||
} |
|||
} else { |
|||
console.log('File does not exist'); |
|||
fileHTML = `<p class='text-danger m-0 p-0'>File does not exist</p>`; |
|||
} |
|||
|
|||
$("#viewFileBoxBody").html(fileHTML); // Modal Box Body |
|||
$("#viewFileBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
}); |
|||
} |
|||
|
|||
/* Downlaod file */ |
|||
function downloadFile(fileOf,fileName,fileType){ |
|||
$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box |
|||
|
|||
var fileUrl = "/gcc/files/com_petition/"; |
|||
|
|||
if(fileOf=="petition") |
|||
{ |
|||
fileUrl=fileUrl+fileName; |
|||
callDownload(fileUrl,fileName); |
|||
} |
|||
else if(fileOf="action"){ |
|||
fileUrl=fileUrl+"com_action_file/"+fileName; |
|||
callDownload(fileUrl,fileName); |
|||
} |
|||
else{ |
|||
fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name |
|||
} |
|||
} |
|||
|
|||
/* Show Complaint forward Modal */ |
|||
function forward_compliant(mapId,title){ |
|||
var compmapHTML =`<div class="col-12" id="comp${mapId}"> |
|||
|
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">${title}</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div class="form-group"> |
|||
<label for="dept${mapId}">Select Department Type</label> |
|||
<select name="dept[]" id="dept${mapId}" class="form-control" onchange="javascript:calloffice(this.value,${mapId})"> |
|||
<option value="0">Select Department</option> |
|||
<option value="1">GCC Department</option> |
|||
<option value="2">External Department</option> |
|||
</select> |
|||
</div> |
|||
<div id="officedata${mapId}"></div> |
|||
<div id="officers${mapId}"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div>`; |
|||
|
|||
$("#forwardModalBody").html(compmapHTML); // Modal Box Body |
|||
$("#forwardModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
} |
|||
</script> |
|||
@ -1,19 +0,0 @@ |
|||
<div class="row"> |
|||
<div class="col-12 mb-2"> |
|||
<div class="input-group mb-0"> |
|||
<span class="input-group-prepend"> |
|||
<button type="button" id="filter_reset_btn" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset"> |
|||
<i class="ik ik-refresh-ccw"></i> |
|||
</button> |
|||
</span> |
|||
<select class="form-control" id="search_department_id" name="search_department_id"> |
|||
<option value="0">All Department`s</option> |
|||
</select> |
|||
<span class="input-group-append"> |
|||
<button type="button" id="filter_search_btn" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search"> |
|||
<i class="ik ik-search me-1"></i> Search |
|||
</button> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,116 +0,0 @@ |
|||
|
|||
<!-- Box 1 --> |
|||
<div class="modal fade" id="ackModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="ackModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ackModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 2 --> |
|||
<div class="modal fade" id="ComplaintStatusBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="complaint-title">புகார் நிலை / Complaint Status:</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ComplaintStatusBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 3 --> |
|||
<div class="modal fade" id="viewFileBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewFileTitle">View File</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewFileBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 4 --> |
|||
<div class="modal fade" id="viewpetition" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewPetitionTitle">View Petition</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewPetitionBoxBody"> |
|||
<iframe id="iframe" width="100%" height="400px" src=""></iframe> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 0 common --> |
|||
<div class="modal fade" id="forwardModalBox" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="forwardModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="forwardModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
@ -1,291 +0,0 @@ |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var petitionNo = /*[[${petitionNo}]]*/''; |
|||
var petitionId = 0; |
|||
var closedComplaintsList=[]; |
|||
var complaintTypeList = ""; |
|||
var officerMasterList = ""; |
|||
|
|||
/* Get Complaint Type Data */ |
|||
function get_complaint_type_data(){ |
|||
|
|||
get_complaint_type_list().then(function(complaintTypes) { |
|||
// Handle the Complaint list |
|||
complaintTypeList = complaintTypes; |
|||
|
|||
// Call Petition function to fetch the data |
|||
get_petition_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching complaint type list:', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Officer Master Data */ |
|||
function get_officer_master_data(){ |
|||
|
|||
get_officer_list().then(function(officers) { |
|||
// Handle the officer list |
|||
officerMasterList = officers; |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching offcier master data:', error); |
|||
}); |
|||
} |
|||
|
|||
// Function to get complaint_type and complaint_typeid by complaint_typeid |
|||
function getComplaintTypeById(complaintTypeId) { |
|||
for (var i = 0; i < complaintTypeList.length; i++) { |
|||
if (complaintTypeList[i].complaint_typeid == complaintTypeId) { |
|||
return { |
|||
complaint_type: complaintTypeList[i].complaint_type, |
|||
complaint_typeid: complaintTypeList[i].complaint_typeid |
|||
}; |
|||
} |
|||
} |
|||
return null; // Return null if no matching complaint_typeid is found |
|||
} |
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_data(){ |
|||
get_petition_details().then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint; |
|||
petitionId = petitionDetails[0].petition_id; |
|||
var complaintArray = complaint.split(","); |
|||
$("#complaintType").val(complaintArray); |
|||
|
|||
$('#complaintType').trigger('change'); |
|||
|
|||
closedComplaintsList = complaintArray; |
|||
$("#cdate_value").html(convertdate(petitionDetails[0].cdate)); |
|||
$("#petition_no_value").html(petitionDetails[0].petition_no); |
|||
$("#petitioner_name_value").html(petitionDetails[0].petitioner_name); |
|||
$("#petitioner_mobile_value").html(petitionDetails[0].petitioner_mobile); |
|||
$("#petitioner_address_value").html(petitionDetails[0].petitioner_address); |
|||
$("#petitioner_pincode_value").html(petitionDetails[0].petitioner_pincode); |
|||
|
|||
$("#complaint_with_maping_value").html(petitionDetails[0].complaint_nature); |
|||
|
|||
var petition_status = petitionDetails[0].status |
|||
|
|||
if(petition_status=='pending' || petition_status=='partial'){ |
|||
$("#petition_summary_title").html("Pending Summary"); |
|||
var currentDate = new Date(); |
|||
var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),''); |
|||
$("#petition_summary_html").html(`This petition has been pending for more than ${totaldayspending}`); |
|||
} |
|||
if(petition_status=='close'){ |
|||
$("#petition_summary_title").html("Close Summary"); |
|||
var currentDate = new Date(); |
|||
var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),''); |
|||
$("#petition_summary_html").html(`The time taken to close this petition is ${totaldayspending}`); |
|||
} |
|||
|
|||
petition_status=petition_status.charAt(0).toUpperCase() + petition_status.slice(1); |
|||
|
|||
$("#petition_status_value").html(`<b style="color:red">${petition_status}</b>`); |
|||
|
|||
// Call Complaint list based on Petition No and Id |
|||
get_petition_mapping_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition Data ('+petitionNo+'):', error.message); |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_details() { |
|||
|
|||
var formData = new FormData(); |
|||
formData.append('petitionNo',petitionNo); |
|||
|
|||
var apiUrl = '/gcc/api/m_petition/getPetitionDetails?petitionNo='+petitionNo; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function get_petition_mapping_data(){ |
|||
get_petition_mapping_list().then(function(mappingDetails) { |
|||
|
|||
// Initialize count |
|||
let totalCount = mappingDetails.length; |
|||
let completedCount = 0; |
|||
let pendingCount = 0; |
|||
|
|||
var tableListHTML = ""; |
|||
|
|||
for(j = 0; j < mappingDetails.length; j++){ |
|||
var complaint_status=mappingDetails[j].complaint_status; |
|||
complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1); |
|||
|
|||
tableListHTML += `<tr> |
|||
<td>${j+1}</td> |
|||
<td>${mappingDetails[j].complaint_type}</td> |
|||
<td>${mappingDetails[j].off_nm} (${mappingDetails[j].off_id})</td> |
|||
<td>${convertdate(mappingDetails[j].mappedOn)}</td> |
|||
<td>${complaint_status}</td> |
|||
</tr>`; |
|||
|
|||
// Check if the status is "pending" |
|||
if (mappingDetails[j].complaint_status === "pending") { |
|||
// Increment the count |
|||
pendingCount++; |
|||
} |
|||
else if(mappingDetails[j].complaint_status === "close"){ |
|||
completedCount++; |
|||
} |
|||
} |
|||
|
|||
var listOfComplaintsHTML = `<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>Complaint</th> |
|||
<th>Assigned To</th> |
|||
<th>Assigned On</th> |
|||
<th>Status</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${tableListHTML} |
|||
</tbody> |
|||
</table>`; |
|||
$("#listOfComplaintsHTML").html(listOfComplaintsHTML); |
|||
|
|||
$("#total_complaints_value").html(`<b>${totalCount}</b>`); |
|||
$("#total_complaints_completed_value").html(`<b style="color:green">${completedCount}</b>`); |
|||
$("#total_complaints_pending_value").html(`<b style="color:red">${pendingCount}</b>`); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching Mapping Data ('+petitionId+'):', error.message); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_mapping_list() { |
|||
|
|||
var formData = new FormData(); |
|||
var apiUrl = '/gcc/api/m_petition/getComplaintListByPetitionId?petitionId='+petitionId; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function call_petition_search_from(errorTXT){ |
|||
var errorHTML = ""; |
|||
if(errorTXT!=""){ |
|||
errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`; |
|||
} |
|||
var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();"> |
|||
<div class="card-header"> |
|||
<h3>View Petition Form</h3> |
|||
<div class="card-header-right"> |
|||
<h3 th:utext="'Petition No: '+${petitionNo}+''"></h3> |
|||
</div> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-12 text-center"> |
|||
${errorHTML} |
|||
<div class="form-group"> |
|||
<label for="petitionNoSearch">Petition No / மனு எண் </label> |
|||
<input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="MP00000000" maxlength="10" required> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="col-12"> |
|||
<div class="block-content" id="userinfo2"> |
|||
<div id="comp_mapping_to_officers" class="row"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card-footer text-center"> |
|||
<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button> |
|||
<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button> |
|||
</div> |
|||
</form>`; |
|||
|
|||
$("#petitionViewtable").html(searchFormHTML); |
|||
$("#petitionNoSearch").mask('MP00000000'); |
|||
} |
|||
|
|||
function searchRequest(){ |
|||
var searchValue = $('#petitionNoSearch').val(); |
|||
if (searchValue && searchValue.trim() !== '') { |
|||
searchValue = encodeBase64(searchValue); |
|||
window.location.href = "/gcc/m_petition/view-petition?petitionNo="+searchValue; |
|||
} |
|||
else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
return false; |
|||
} |
|||
</script> |
|||
<script> |
|||
$(document).ready(function() { |
|||
if(petitionNo!=null && petitionNo!="error"){ |
|||
get_complaint_type_data(); |
|||
get_officer_master_data(); |
|||
} |
|||
else{ |
|||
if(petitionNo=="error"){ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
else{ |
|||
call_petition_search_from(""); |
|||
} |
|||
} |
|||
|
|||
}); |
|||
</script> |
|||
@ -1,360 +0,0 @@ |
|||
<script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script> |
|||
<script th:inline="javascript"> |
|||
var nodata = nodata(); |
|||
|
|||
var baseURL = "/gcc/m_petition/"; |
|||
|
|||
/* Complaint Type List */ |
|||
function get_complaint_type_list() { |
|||
|
|||
var apiUrl = '/gcc/api/m_petition/getComplaintTypes'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Officer Master List */ |
|||
function get_officer_list() { |
|||
|
|||
var apiUrl = '/gcc/api/m_petition/getOfficerList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Petition Type List */ |
|||
function get_petition_type_list() { |
|||
|
|||
var apiUrl = '/gcc/api/m_petition/getPetitionTypes'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function viewAck(petitionNo){ |
|||
|
|||
loading_text_msg = getLoadingMessage(); // get Loading random text |
|||
$('#ackModalTitle').html("Loading Petition Acknowledgement ("+petitionNo+")"); |
|||
var loading=searchinfo("<b>"+loading_text_msg+"</b>"); |
|||
var ackContentHTML=` |
|||
<div class="row"> |
|||
<div class="col-lg-6"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack1table" class="ack-content"> |
|||
<div id="ack1">${loading}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-6 printack2"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack2table" class="ack-content"> |
|||
<div id="ack2">${loading}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!--<div class="col-lg-12 text-center block-options pt-10"> |
|||
<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button> |
|||
</div>--> |
|||
</div>`; |
|||
|
|||
$('#ackModalBody').html(ackContentHTML); // Box content (Body) |
|||
|
|||
$("#ackModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
|
|||
get_petition_ack_data(petitionNo); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_ack_data(petitionNo){ |
|||
get_petition_details_byNo(petitionNo).then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint_txt; |
|||
|
|||
var complaintArray = complaint.split(','); |
|||
|
|||
for(j = 0; j < complaintArray.length; j++){ |
|||
if(j>0){ |
|||
complaintHTML+="<br>"; |
|||
} |
|||
complaintHTML+= (j+1)+') '+complaintArray[j]; |
|||
} |
|||
var ack =` |
|||
<table class="table table-borderless table-vcenter p-0 m-0"> |
|||
<tbody> |
|||
<tr> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
<td class="fw-semibold text-center"> |
|||
<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br> |
|||
மக்களை தேடி மேயர் திட்டம்<br> |
|||
ஒப்புகை சீட்டு / Acknowledgement Receipt</b> |
|||
</td> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<hr style="margin:0px"> |
|||
<div class="block-content p-0 m-0"> |
|||
<table class="table table-borderless table-vcenter" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${convertdate(petitionDetails[0].cdate)} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petition_no} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_name} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_mobile} |
|||
</td> |
|||
</tr> |
|||
<tr style="font-size:12px;"> |
|||
<th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintHTML} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th> |
|||
</tr> |
|||
<tr style="text-align: right;"> |
|||
<th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div>`; |
|||
$('#ackModalTitle').html("Acknowledgement Of Petition ("+petitionNo+")"); |
|||
$("#ack1").html(ack); |
|||
$("#ack2").html(ack); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_details_byNo(petitionNo) { |
|||
|
|||
var apiUrl = '/gcc/api/m_petition/getPetitionDetails?petitionNo='+petitionNo |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_complaint_details_byId(mapId) { |
|||
|
|||
var apiUrl = '/gcc/api/m_petition/getComplaintDetails?mapId='+mapId |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_complaint_action_byId(mapId) { |
|||
|
|||
var apiUrl = '/gcc/api/m_petition/getComplaintActionDetails?mapId='+mapId |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
|
|||
/* File View */ |
|||
function viewFile(fileOf,fileName,fileType){ |
|||
$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box |
|||
|
|||
var fileUrl = "/gcc/files/m_petition/"; |
|||
|
|||
if(fileOf=="petition") |
|||
{ |
|||
fileUrl=fileUrl+fileName; |
|||
} |
|||
else if(fileOf="action"){ |
|||
fileUrl=fileUrl+"m_action_file/"+fileName; |
|||
} |
|||
else{ |
|||
fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name |
|||
} |
|||
|
|||
checkFileExists(fileUrl).then(exists => { |
|||
if (exists) { |
|||
if(fileType=='application/pdf'){ |
|||
var fileHTML = `<iframe src="${fileUrl}" type="application/pdf" width="100%" height="600px"></iframe>`; |
|||
|
|||
} |
|||
else if(fileType=='application/octet-stream'){ |
|||
fileHTML =`<p class='text-danger m-0 p-0'>File Preview not avaiable.<br>Try to download and view.</p>`; |
|||
} |
|||
else{ |
|||
fileHTML =`<img src="${fileUrl}" alt="${fileType}" width="100%">`; |
|||
} |
|||
} else { |
|||
console.log('File does not exist'); |
|||
fileHTML = `<p class='text-danger m-0 p-0'>File does not exist</p>`; |
|||
} |
|||
|
|||
$("#viewFileBoxBody").html(fileHTML); // Modal Box Body |
|||
$("#viewFileBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
}); |
|||
} |
|||
|
|||
/* Downlaod file */ |
|||
function downloadFile(fileOf,fileName,fileType){ |
|||
$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box |
|||
|
|||
var fileUrl = "/gcc/files/m_petition/"; |
|||
|
|||
if(fileOf=="petition") |
|||
{ |
|||
fileUrl=fileUrl+fileName; |
|||
callDownload(fileUrl,fileName); |
|||
} |
|||
else if(fileOf="action"){ |
|||
fileUrl=fileUrl+"m_action_file/"+fileName; |
|||
callDownload(fileUrl,fileName); |
|||
} |
|||
else{ |
|||
fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name |
|||
} |
|||
} |
|||
|
|||
/* Show Complaint forward Modal */ |
|||
function forward_compliant(mapId,title){ |
|||
var compmapHTML =`<div class="col-12" id="comp${mapId}"> |
|||
|
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">${title}</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div class="form-group"> |
|||
<label for="dept${mapId}">Select Department Type</label> |
|||
<select name="dept[]" id="dept${mapId}" class="form-control" onchange="javascript:calloffice(this.value,${mapId})"> |
|||
<option value="0">Select Department</option> |
|||
<option value="1">GCC Department</option> |
|||
<option value="2">External Department</option> |
|||
</select> |
|||
</div> |
|||
<div id="officedata${mapId}"></div> |
|||
<div id="officers${mapId}"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div>`; |
|||
|
|||
$("#forwardModalBody").html(compmapHTML); // Modal Box Body |
|||
$("#forwardModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
} |
|||
</script> |
|||
@ -1,19 +0,0 @@ |
|||
<div class="row"> |
|||
<div class="col-12 mb-2"> |
|||
<div class="input-group mb-0"> |
|||
<span class="input-group-prepend"> |
|||
<button type="button" id="filter_reset_btn" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset"> |
|||
<i class="ik ik-refresh-ccw"></i> |
|||
</button> |
|||
</span> |
|||
<select class="form-control" id="search_department_id" name="search_department_id"> |
|||
<option value="0">All Department`s</option> |
|||
</select> |
|||
<span class="input-group-append"> |
|||
<button type="button" id="filter_search_btn" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search"> |
|||
<i class="ik ik-search me-1"></i> Search |
|||
</button> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,22 +0,0 @@ |
|||
<div class="row"> |
|||
<div class="col-12 mb-2"> |
|||
<div class="input-group mb-0"> |
|||
<span class="input-group-prepend"> |
|||
<button type="button" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset"> |
|||
<i class="ik ik-refresh-ccw"></i> |
|||
</button> |
|||
</span> |
|||
<select class="form-control" id="search_eid" name="search_eid"> |
|||
<option value="0">All Events</option> |
|||
<option th:each="mtmEvents : ${mtmEventsList}" th:value="${mtmEvents.mtmId}" |
|||
th:utext="${mtmEvents.eventName} +'('+${mtmEvents.eventDate}+')'" |
|||
th:selected="${session.eventid == #strings.toString(mtmEvents.mtmId)}"></option> |
|||
</select> |
|||
<span class="input-group-append"> |
|||
<button type="button" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search"> |
|||
<i class="ik ik-search me-1"></i> Search |
|||
</button> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,119 +0,0 @@ |
|||
<div class="modal fade" id="viewFile" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="exampleModalDefaultLabel">Petition Files</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="filehtml"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<div class="modal fade" id="petitionStatus" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="exampleModalDefaultLabel">புகார் நிலை / Complaint Status</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div class="row"> |
|||
<div class="col-sm-6 col-xl-6"> |
|||
<div class="block block-rounded d-flex flex-column h-100 mb-0" id="petitionStatusForm" style="font-size:12px;"> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-sm-6 col-xl-6"> |
|||
<div class="block block-rounded d-flex flex-column h-100 mb-0" id="petitionUpdateForm" style="font-size:12px;"> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div><!--end row--> |
|||
</div><!--end modal-body--> |
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
|
|||
<!-- PopUp Modal Help Form --> |
|||
<div class="modal fade" id="complaintStatus" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="exampleModalDefaultLabel">புகார் நிலை / Complaint Status</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
|
|||
<div class="modal-body"> |
|||
<div class="row"> |
|||
<div class="col-lg-1"></div> <!-- Left column --> |
|||
<div class="col-lg-10"> |
|||
<div class="block block-rounded" style="border: 1px solid black;"> |
|||
<div id="ack1"> |
|||
<table class="table table-borderless table-vcenter p-0 m-0"> |
|||
<tbody> |
|||
<tr> |
|||
<th scope="row"><img th:src="@{/assets/images/logo-sm.png}" width="80px"></th> |
|||
<td class="fw-semibold text-center"> |
|||
<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br> |
|||
மக்களை தேடி மேயர் திட்டம்<br> |
|||
ஒப்புகை சீட்டு / Acknowledgement Receipt</b> |
|||
</td></tr> |
|||
</tbody> |
|||
</table> |
|||
<hr style="margin:0px"> |
|||
<div class="block-content p-0 m-0" id="petitionStatusDetails"> |
|||
|
|||
</div></div> |
|||
</div> |
|||
<div class="col-lg-1"></div> <!-- Right column --> |
|||
</div> |
|||
</div><!--end row--> |
|||
</div><!--end modal-body--> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
|
|||
<div class="modal fade" id="viewCloseFile" tabindex="1" role="dialog" aria-labelledby="otpFormLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="exampleModalDefaultLabel">View File</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div class="row"> |
|||
<div class="col-sm-12 col-xl-12"> |
|||
<div class="block block-rounded d-flex flex-column h-100 mb-0" id="viewFileHtml" style="font-size:12px;"> |
|||
|
|||
</div> |
|||
</div> |
|||
</div><!--end row--> |
|||
</div><!--end modal-body--> |
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
@ -1,709 +0,0 @@ |
|||
<script th:inline="javascript"> |
|||
var nodata = `<center><img src="/assets/images/nodata_ani.gif" width="40%"><br><p class="text-warning">Data are not availble at this moment please check later</p></center>`; |
|||
|
|||
var complaintTypesList = /*[[${complaintTypesList}]]*/ []; |
|||
var complaintTypes =[]; |
|||
var complaintHTML=''; |
|||
console.log(complaintTypesList.length); |
|||
for (var i = 0; i < complaintTypesList.length; i++) { |
|||
complaintTypes[complaintTypesList[i].complaintTypeId] = complaintTypesList[i].complaintType; |
|||
} |
|||
|
|||
/* Event Id Search */ |
|||
function callReSetEventId(eventid){ |
|||
$.ajax({ |
|||
type: "GET", |
|||
url: '/gcc/api/mtm/setEventId', |
|||
data: { |
|||
'eventid': eventid |
|||
}, |
|||
}).done(function(response) { |
|||
location.reload(); |
|||
}).fail(function(jqXHR, textStatus, errorThrown) { |
|||
/* |
|||
// Log the error and any relevant information |
|||
console.error("Error sending request: " + textStatus + " " + errorThrown); |
|||
*/ |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
function callSetEventId(){ |
|||
var eventid = $("#search_eid").val(); |
|||
$.ajax({ |
|||
type: "GET", |
|||
url: '/gcc/api/mtm/setEventId', |
|||
data: { |
|||
'eventid': eventid |
|||
}, |
|||
}).done(function(response) { |
|||
location.reload(); |
|||
}).fail(function(jqXHR, textStatus, errorThrown) { |
|||
/* |
|||
// Log the error and any relevant information |
|||
console.error("Error sending request: " + textStatus + " " + errorThrown); |
|||
*/ |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
/* Event Id Search */ |
|||
function callSetEventById(eventid,link){ |
|||
$.ajax({ |
|||
type: "GET", |
|||
url: '/gcc/api/mtm/setEventId', |
|||
data: { |
|||
'eventid': eventid |
|||
}, |
|||
}).done(function(response) { |
|||
window.location.href = link; |
|||
}).fail(function(jqXHR, textStatus, errorThrown) { |
|||
/* |
|||
// Log the error and any relevant information |
|||
console.error("Error sending request: " + textStatus + " " + errorThrown); |
|||
*/ |
|||
}); |
|||
return false; |
|||
} |
|||
/* ///////////////// */ |
|||
|
|||
/* // for Petition // */ |
|||
|
|||
function callViewFiles( id , pet_num){ |
|||
|
|||
$('#modaltitle').html(`Petition (${pet_num}) Files`); |
|||
$.ajax({ |
|||
type: "GET", |
|||
dataType: 'json', |
|||
url: "/gcc/api/mtm/petitionFilesBypetitionId?pid="+id, |
|||
|
|||
success: function(data){ |
|||
petitionFiles = data; |
|||
var fileLength = petitionFiles.length; |
|||
var fileHTML=''; |
|||
if(fileLength>0){ |
|||
for (var i = 0; i < fileLength; i++) { |
|||
var petitionFile = petitionFiles[i]; |
|||
var fileId = petitionFile.mtmPetitionFileId; |
|||
var fileName = petitionFile.fileName; |
|||
var fileSize = null; |
|||
var fileType = null; |
|||
// Get the file size and type from the data object |
|||
if (petitionFile.data && petitionFile.data.wrappedBlob) { |
|||
var binaryStream = petitionFile.data.wrappedBlob.binaryStream; |
|||
if (binaryStream) { |
|||
// Get the file size |
|||
fileSize = Object.keys(binaryStream).length; |
|||
// Get the file type |
|||
fileType = fileName.split(".").pop(); |
|||
} |
|||
} |
|||
var filetypeico = "file-lines"; |
|||
if(fileType=='pdf'){ |
|||
filetypeico = "file-pdf"; |
|||
} |
|||
else{ |
|||
filetypeico = "file-image"; |
|||
} |
|||
sno=i+1; |
|||
/* |
|||
fileHTML+=` |
|||
<li> |
|||
<a class="d-flex py-2" href="/blob/${fileId}/download"> |
|||
<div class="flex-shrink-0 me-3 ms-2 overlay-container overlay-left"> |
|||
<i class="far fa-3x fa-${filetypeico}"></i> |
|||
</div> |
|||
<div class="flex-grow-1"> |
|||
<div class="fw-semibold">FileName: ${fileName}</div> |
|||
<div class="fs-sm text-muted">FileType: ${fileType}</div> |
|||
</div> |
|||
</a> |
|||
</li> |
|||
`; |
|||
*/ |
|||
fileHTML+=` |
|||
<tr> |
|||
<td>${sno}</td> |
|||
<td>${fileName}</td> |
|||
<td>${fileType}</td> |
|||
<td class="text-center" style="width: 100px;"> |
|||
<a href="/blob/${fileId}/download" data-toggle="tooltip" data-animation="true" data-placement="top" class="js-tooltip-enabled" aria-label="Downlaod" data-original-title="Download"><i class="fa fa-fw fa-download" style="font-size: 18px;"></i></a> |
|||
<a href="#" onclick="return call_blobData(${fileId},'petition');" data-toggle="tooltip" data-animation="true" data-placement="top" class="js-tooltip-enabled" aria-label="View Files" data-original-title="View"><i class="far fa-3x fa-${filetypeico}" style="font-size: 18px;"></i></a> |
|||
</td> |
|||
</tr> |
|||
`; |
|||
|
|||
} |
|||
//$('#filehtml').html('<ul class="nav-items push">'+fileHTML+'</ul>'); |
|||
fileHTML = `<table class="table table-bordered table-vcenter"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>File Name</th> |
|||
<th>File Type</th> |
|||
<th>Action</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${fileHTML} |
|||
</tbody> |
|||
</table>`; |
|||
$('#filehtml').html(fileHTML); |
|||
} |
|||
else{ |
|||
$('#filehtml').html('<center>NO Data</center>'); |
|||
} |
|||
|
|||
$('#viewFile').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}) |
|||
$('#viewFile').modal('show'); |
|||
} |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
function call_view_complaint(mapid){ |
|||
|
|||
$.ajax({ |
|||
type: "GET", |
|||
url: '/gcc/api/mtm/getComMappingDetailsByMapId', |
|||
data: { |
|||
'mapid': mapid, |
|||
}, |
|||
dataType: 'json', |
|||
}).done(function(response) { |
|||
//alert(response.length); |
|||
// Handle the response here |
|||
if(response.length<=0){ |
|||
//console.error("Error:"+response); |
|||
$("#error").html("<p class='text-danger m-0 p-0'>Invalid Acknowledgement Number!</p>"); |
|||
} |
|||
else{ |
|||
|
|||
|
|||
var complaintBodyHTML=''; |
|||
var com_txt = response[0].mtmComplaintTypes.complaintType; |
|||
var com_status=response[0].status; |
|||
var com_status_txt = `<span class="badge bg-info">UNDER PROGRESS</span> <i class="fa fa-arrow-right"></i> ${response[0].officer_name}`; |
|||
if(com_status=='close'){ |
|||
var com_status_txt = `<span class="badge bg-success">Completed</span> <i class="fa fa-arrow-right"></i> ${response[0].officer_name}`; |
|||
} |
|||
complaintBodyHTML+=`<tr> |
|||
<td class="fw-semibold"> |
|||
${com_txt} <i class="fa fa-arrow-right"></i> ${com_status_txt} |
|||
</td> |
|||
</tr>`; |
|||
|
|||
var complaintHTML=` |
|||
<table class="table table-bordered table-vcenter"> |
|||
<thead> |
|||
<tr> |
|||
<th>Complaint <i class="fa fa-arrow-right"></i> Status</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${complaintBodyHTML} |
|||
</tbody> |
|||
</table> |
|||
`; |
|||
var date_txt = convertdate(response[0].mtmEventsPetitionId.cDate); |
|||
var statusHTML = `<table class="table table-borderless table-vcenter p-0 m-0" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${date_txt} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Table No / User No: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].mtmEventsPetitionId.tableNo} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].mtmEventsPetitionId.petitionNumber} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].mtmEventsPetitionId.petitionerName} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].mtmEventsPetitionId.petitionerMobile} |
|||
</td> |
|||
</tr> |
|||
<tr style="font-size:12px;"> |
|||
<td colspan="2" style="padding: 0.45rem 0.45rem;"><b>புகாரின் தன்மை / Nature of complaint:</b><br> |
|||
${response[0].mtmEventsPetitionId.petitionerNatureOfComplaint} |
|||
</td> |
|||
<tr style="font-size:12px;"> |
|||
<td colspan="2" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintHTML} |
|||
</td> |
|||
</tr> |
|||
<tr style="text-align: right;"> |
|||
<th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th> |
|||
</tr> |
|||
</tbody> |
|||
</table>`; |
|||
|
|||
$('#petitionStatusDetails').html(statusHTML); |
|||
$("#error").html(""); |
|||
$('#complaintStatus').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); |
|||
$('#complaintStatus').modal('show'); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
}).fail(function(jqXHR, textStatus, errorThrown) { |
|||
/* |
|||
// Log the error and any relevant information |
|||
console.error("Error sending request: " + textStatus + " " + errorThrown); |
|||
console.error("URL: /api/ogin"); |
|||
console.error("Query parameters:", { |
|||
'ptax': ptax, |
|||
'uname': uname, |
|||
'upass': upass |
|||
}); |
|||
*/ |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
function call_view_petition(petitionNo){ |
|||
var petition_no = petitionNo; |
|||
|
|||
$.ajax({ |
|||
type: "GET", |
|||
url: '/gcc/api/mtm/getPetitionStatusPublic', |
|||
data: { |
|||
'petition_no': petition_no, |
|||
}, |
|||
dataType: 'json', |
|||
}).done(function(response) { |
|||
|
|||
// Handle the response here |
|||
if(response.length<=0){ |
|||
$("#error").html("<p class='text-danger m-0 p-0'>Invalid Acknowledgement Number!</p>"); |
|||
} |
|||
else{ |
|||
|
|||
var complaint = response[0].petitionerComplaint; |
|||
var complaintArray = complaint.split(','); |
|||
|
|||
var complaintBodyHTML=``; |
|||
|
|||
$.ajax({ |
|||
type: "GET", |
|||
url: '/gcc/api/mtm/getComMappingDetailsByPetId', |
|||
data: { |
|||
'petid': response[0].petitionId |
|||
}, |
|||
dataType: 'json', |
|||
|
|||
}).done(function(response2) { |
|||
complaintBodyHTML=``; |
|||
var mapid=0; |
|||
for(j = 0; j < response2.length; j++){ |
|||
|
|||
var com_txt= complaintTypes[response2[j].mtmComplaintTypes.complaintTypeId]; |
|||
//console.log(response2[j].mtmComplaintTypes.complaintTypeId); |
|||
var com_status_link=``; |
|||
var com_status=response2[j].status; |
|||
var com_status_txt = `<span class="badge bg-info">UNDER PROGRESS</span> <i class="fa fa-arrow-right"></i> ${response2[j].officer_name}`; |
|||
if(com_status=='close'){ |
|||
var com_status_txt = `<span class="badge bg-success">Completed</span> <i class="fa fa-arrow-right"></i> ${response2[j].officer_name}`; |
|||
var com_status_link=`<a href="#" onclick="return call_close_details(${response2[j].mapId});">View</a>`; |
|||
mapid = response2[j].mapId |
|||
} |
|||
complaintBodyHTML+=`<tr> |
|||
<td class="text-center" scope="row">${j+1}</td> |
|||
<td class="fw-semibold"> |
|||
${com_txt} <i class="fa fa-arrow-right"></i> ${com_status_txt} |
|||
</td> |
|||
<td class="fw-semibold">${com_status_link}</td> |
|||
</tr>`; |
|||
} |
|||
|
|||
if(response2.length==0){ |
|||
var complaint = response[0].petitionerComplaint; |
|||
var complaintArray = complaint.split(','); |
|||
|
|||
var complaintBodyHTML=''; |
|||
for(j = 0; j < complaintArray.length; j++){ |
|||
var sno = (j+1); |
|||
var com_txt= complaintTypes[complaintArray[j]]; |
|||
var com_status=0; |
|||
var com_status_txt = `<span class="badge bg-danger">Not Assigned</span>`; |
|||
complaintBodyHTML+=`<tr> |
|||
<td class="text-center" scope="row">${sno}</td> |
|||
<td class="fw-semibold"> |
|||
${com_txt} <i class="fa fa-arrow-right"></i> ${com_status_txt} |
|||
</td> |
|||
<td> - </td> |
|||
</tr>`; |
|||
} |
|||
} |
|||
else if(response2.length==1){ |
|||
call_close_details(mapid); |
|||
} |
|||
|
|||
var complaintHTML=` |
|||
<table class="table table-bordered table-vcenter"> |
|||
<thead> |
|||
<tr> |
|||
<th class="text-center" style="width: 50px;">#</th> |
|||
<th>Complaint <i class="fa fa-arrow-right"></i> Status</th> |
|||
<th class="text-center" style="width: 50px;"><i class="fa fa-link"></i></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${complaintBodyHTML} |
|||
</tbody> |
|||
</table> |
|||
`; |
|||
var date_txt = convertdate(response[0].cDate); |
|||
var statusHTML = `<table class="table table-borderless table-vcenter p-0 m-0" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${date_txt} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Table No / User No: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].tableNo} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].petitionNumber} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].petitionerName} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].petitionerMobile} |
|||
</td> |
|||
</tr> |
|||
<tr style="font-size:12px;"> |
|||
<td colspan="2" style="padding: 0.45rem 0.45rem;"><b>புகாரின் தன்மை / Nature of complaint:</b><br> |
|||
${response[0].petitionerNatureOfComplaint} |
|||
</td> |
|||
<tr style="font-size:12px;"> |
|||
<td colspan="2" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintHTML} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table>`; |
|||
|
|||
statusHTML = `<div class="card mb-0"> |
|||
<div class="card-header bg-modal-title"><h3>Complaint Details</h3></div> |
|||
<div class="card-body">${statusHTML}</div> |
|||
</div>`; |
|||
|
|||
petupdateForm = `<div class="card mb-0"> |
|||
<div class="card-header bg-modal-title"><h3>Complaint Update Details</h3></div> |
|||
<div class="card-body text-center"><br><br> |
|||
Select View from Left 'Complaint <i class="fa fa-arrow-right"></i> Status' |
|||
<br><br><br> |
|||
</div> |
|||
</div>`; |
|||
|
|||
$('#petitionUpdateForm').html(petupdateForm); |
|||
$('#petitionStatusForm').html(statusHTML); |
|||
$("#error").html(""); |
|||
$('#petitionStatus').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); |
|||
$('#petitionStatus').modal('show'); |
|||
}); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
}).fail(function(jqXHR, textStatus, errorThrown) { |
|||
/* |
|||
// Log the error and any relevant information |
|||
console.error("Error sending request: " + textStatus + " " + errorThrown); |
|||
console.error("URL: /api/ogin"); |
|||
*/ |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
function call_close_petition_details(mapid){ |
|||
|
|||
$.ajax({ |
|||
type: "GET", |
|||
url: '/gcc/api/mtm/getComMappingActionByMapId', |
|||
data: { |
|||
'mapid': mapid, |
|||
}, |
|||
dataType: 'json', |
|||
}).done(function(response) { |
|||
//alert(response.length); |
|||
// Handle the response here |
|||
if(response.length<=0){ |
|||
//console.error("Error:"+response); |
|||
var err=`<div scope="row" class="text-warning text-center">Dev Ref ID: ${mapid}</div> |
|||
<div scope="row" class="text-danger text-center">No data Found!</div>`; |
|||
$('#petitionStatusForm').html(err); |
|||
$('#petitionUpdateForm').html(err); |
|||
$('#petitionStatusupdate').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); |
|||
$('#petitionStatusupdate').modal('show'); |
|||
} |
|||
else{ |
|||
var complaintBodyHTML=''; |
|||
var com_txt = response[0].mtmEventsPetitionMapping.mtmComplaintTypes.complaintType; |
|||
var com_status=response[0].status; |
|||
var date_txt = response[0].cDate; |
|||
var action_taken_date= convertdate(date_txt); |
|||
var com_status_txt = `<span class="badge bg-info">UNDER PROGRESS</span> <i class="fa fa-arrow-right"></i> ${response[0].officer_name}`; |
|||
if(com_status=='close'){ |
|||
var com_status_txt = `<span class="badge bg-success">Completed</span> <i class="fa fa-arrow-right"></i> ${response[0].officer_name}`; |
|||
} |
|||
complaintBodyHTML+=`<tr> |
|||
<td class="fw-semibold"> |
|||
${com_txt} <i class="fa fa-arrow-right"></i> ${com_status_txt} |
|||
</td> |
|||
</tr>`; |
|||
|
|||
var complaintHTML=` |
|||
<table class="table table-bordered table-vcenter"> |
|||
<thead> |
|||
<tr> |
|||
<th>Complaint <i class="fa fa-arrow-right"></i> Status</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${complaintBodyHTML} |
|||
</tbody> |
|||
</table> |
|||
`; |
|||
var date_txt = convertdate(response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.cDate); |
|||
var statusHTML = `<table class="table table-borderless table-vcenter p-0 m-0" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${date_txt} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Table No / User No: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.tableNo} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.petitionNumber} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.petitionerName} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.petitionerMobile} |
|||
</td> |
|||
</tr> |
|||
<tr style="font-size:12px;"> |
|||
<td colspan="2" style="padding: 0.45rem 0.45rem;"><b>புகாரின் தன்மை / Nature of complaint:</b><br> |
|||
${response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.petitionerNatureOfComplaint} |
|||
</td> |
|||
<tr style="font-size:12px;"> |
|||
<td colspan="2" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintHTML} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table>`; |
|||
|
|||
statusHTML=`<div class="card mb-0"> |
|||
<div class="card-header bg-modal-title"><h3>Complaint Details</h3></div> |
|||
<div class="card-body">${statusHTML}</div> |
|||
</div>`; |
|||
|
|||
$('#petitionStatusForm').html(statusHTML); |
|||
|
|||
call_close_details(mapid); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
}).fail(function(jqXHR, textStatus, errorThrown) { |
|||
|
|||
// Log the error and any relevant information |
|||
console.error("Error sending request: " + textStatus + " " + errorThrown); |
|||
|
|||
|
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
function call_close_details(mapid){ |
|||
|
|||
$.ajax({ |
|||
type: "GET", |
|||
url: '/gcc/api/mtm/getComMappingActionByMapId', |
|||
data: { |
|||
'mapid': mapid, |
|||
}, |
|||
dataType: 'json', |
|||
}).done(function(response) { |
|||
|
|||
// Handle the response here |
|||
if(response.length<=0){ |
|||
|
|||
petupdateForm = `<div class="card mb-0"> |
|||
<div class="card-header bg-modal-title"><h3>Complaint Update Details</h3> |
|||
<div class="card-header-right"> |
|||
<p class="bg-warning lbl-card"> Ref ID: ${mapid}</p> |
|||
</div> |
|||
</div> |
|||
<div class="card-body">${nodata}</div> |
|||
</div>`; |
|||
|
|||
$('#petitionUpdateForm').html(petupdateForm); |
|||
$("#formError").html(""); |
|||
|
|||
} |
|||
else{ |
|||
var complaintBodyHTML=''; |
|||
var com_txt = response[0].mtmEventsPetitionMapping.mtmComplaintTypes.complaintType; |
|||
var com_status=response[0].status; |
|||
var date_txt = response[0].cDate; |
|||
var action_taken_date= convertdate(date_txt); |
|||
|
|||
var fromdate=convertdate(response[0].mtmEventsPetitionMapping.mtmEventsPetitionId.cDate); |
|||
var todate = action_taken_date; |
|||
var petupdateForm=` |
|||
<label class="form-label">நடவடிக்கை தேதி / Action Date:</label> |
|||
<div class="mb-0 text-warning">${action_taken_date} |
|||
<a href="#" onclick="return false;"data-toggle="tooltip" data-html="true" data-animation="true" data-placement="top" title="In Days: ${date_difference(fromdate,todate,'days')}<br> In Time: ${date_difference(fromdate,todate,'time')}"> <i class="ik ik-clock text-success"></i> </a></div> |
|||
<hr> |
|||
<label class="form-label">நடவடிக்கை / Action:</label> |
|||
<div class="text"><p>${response[0].comments}</p></div> |
|||
<hr> |
|||
<label class="form-label">ஆவணப் பதிவேற்றம் / Document Upload:</label><br> |
|||
<p class="mb-0 text btn" onclick="call_blobData(${response[0].solMapId},'action');">${response[0].fileName}</p> |
|||
<div id="formError" class="text-danger"></div> |
|||
</div> |
|||
`; |
|||
|
|||
petupdateForm = `<div class="card mb-0"> |
|||
<div class="card-header bg-modal-title"><h3>Complaint Update Details</h3> |
|||
<div class="card-header-right"> |
|||
<span class="badge badge-pill badge-success mb-1">Ref ID: ${mapid}</span> |
|||
</div> |
|||
</div> |
|||
<div class="card-body">${petupdateForm}</div> |
|||
</div>`; |
|||
|
|||
$('#petitionUpdateForm').html(petupdateForm); |
|||
$("#formError").html(""); |
|||
} |
|||
$('#petitionStatus').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); |
|||
$('#petitionStatus').modal('show'); |
|||
|
|||
$('[data-toggle="tooltip"]').tooltip(); |
|||
|
|||
}).fail(function(jqXHR, textStatus, errorThrown) { |
|||
|
|||
// Log the error and any relevant information |
|||
console.error("Error sending request: " + textStatus + " " + errorThrown); |
|||
|
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
function call_blobData(id,inTable){ |
|||
|
|||
$.ajax({ |
|||
type: "GET", |
|||
url: '/gcc/api/mtm/viewBlobData', |
|||
data: { |
|||
'id': id, |
|||
'table': inTable, |
|||
}, |
|||
dataType: 'json', |
|||
}).done(function(response) { |
|||
|
|||
var fileHTML = ''; |
|||
// Handle the response here |
|||
if(response.length<=0){ |
|||
fileHTML = `<p class='text-danger m-0 p-0'>No Data!</p>`; |
|||
} |
|||
else{ |
|||
if(response[1]=='application/pdf'){ |
|||
var fileHTML = `<iframe src="data:application/pdf;base64,${response[0]}" type="application/pdf" width="100%" height="600px"></iframe>`; |
|||
|
|||
} |
|||
else if(response[1]=='application/octet-stream'){ |
|||
fileHTML =`<p class='text-danger m-0 p-0'>File Preview not avaiable.<br>Try to download and view.</p>`; |
|||
} |
|||
else{ |
|||
fileHTML =`<img src="data:${response[1]};base64,${response[0]}" alt="File">`; |
|||
} |
|||
|
|||
} |
|||
/* |
|||
console.log(response); |
|||
console.log(response.length); |
|||
console.log(response[1]); |
|||
console.log(fileHTML); |
|||
*/ |
|||
$('#viewFileHtml').html(fileHTML); |
|||
$('#viewCloseFile').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); |
|||
$('#viewCloseFile').modal('show'); |
|||
|
|||
}).fail(function(jqXHR, textStatus, errorThrown) { |
|||
|
|||
// Log the error and any relevant information |
|||
console.error("Error sending request: " + textStatus + " " + errorThrown); |
|||
|
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
/* //////////////// */ |
|||
</script> |
|||
@ -1,68 +0,0 @@ |
|||
<!-- Box 1 --> |
|||
<div class="modal fade" id="pgrModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="modalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="modalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 2 --> |
|||
<div class="modal fade" id="pgrModalBox_2" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="modalTitle_2">Modal Box 2 Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="modalBody_2"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 3 --> |
|||
<div class="modal fade" id="pgrModalBox_3" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="modalTitle_3">Complaint Details</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="modalBody_3"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
@ -1,275 +0,0 @@ |
|||
<script th:inline="javascript"> |
|||
var nodata = nodata();//`<center><img src="/assets/images/nodata_ani.gif" width="40%"><br><p class="text-warning">Data are not availble at this moment please check later</p></center>`; |
|||
|
|||
var baseURL = "/gcc/pgr/"; |
|||
|
|||
/* Department List */ |
|||
function get_department_list() { |
|||
|
|||
var apiUrl = '/gcc/api/pgr/getDepartments'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Event Id Search */ |
|||
function callReSetEventId(eventid){ |
|||
$.ajax({ |
|||
type: "GET", |
|||
url: '/gcc/api/mtm/setEventId', |
|||
data: { |
|||
'eventid': eventid |
|||
}, |
|||
}).done(function(response) { |
|||
location.reload(); |
|||
}).fail(function(jqXHR, textStatus, errorThrown) { |
|||
/* |
|||
// Log the error and any relevant information |
|||
console.error("Error sending request: " + textStatus + " " + errorThrown); |
|||
*/ |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
function complaintTypes() { |
|||
var complaintList = { |
|||
"NonBURSTLT": "Street Light not burning", |
|||
"REOFGAR": "Removal of Garbage", |
|||
"ROAD": "Road Damaged", |
|||
"MOSQUITE": "Mosquito Nuisance", |
|||
"WATER": "Water Stagnation", |
|||
"REOFDEB": "Removal of Debris", |
|||
"TREE": "Tree Fallen", |
|||
"DOGS": "Dog Menace", |
|||
"ENCMTN": "Encroachment", |
|||
"POT": "Pothole", |
|||
"PTAX": "Property Tax", |
|||
"OTHERS": "Others" |
|||
}; |
|||
|
|||
return complaintList; |
|||
} |
|||
|
|||
function complaintTypeId() { |
|||
var complaintIdList = { |
|||
"NonBURSTLT": "52,146", |
|||
"REOFGAR": "1,97", |
|||
"ROAD": "22,32,57,59,70,113,114,130,145", |
|||
"MOSQUITE": "18,118", |
|||
"WATER": "69,138", |
|||
"REOFDEB": "7,99", |
|||
"TREE": "71,152", |
|||
"DOGS": "19,119", |
|||
"ENCMTN": "75,181", |
|||
"POT": "58,112", |
|||
"PTAX": "43,166", |
|||
"OTHERS": "52,146,1,97,22,32,57,59,70,113,114,130,145,18,118,69,138,7,99,71,152,19,119,75,181,58,112,43,166" |
|||
}; |
|||
return complaintIdList; |
|||
} |
|||
|
|||
/////////////////////////////////////// Common Modal Box - 3 /////////////////////////////////////// |
|||
|
|||
var model_box_3 = "#pgrModalBox_3"; |
|||
|
|||
function viewComplaintDetails(complaintNumber) |
|||
{ |
|||
|
|||
get_table_list_modal_box_3(complaintNumber); |
|||
/* |
|||
var dept_name_txt = dept_name.split("-"); |
|||
|
|||
if(dept_name_txt.length<=1){ |
|||
dept_name_txt[0] = "-"; |
|||
} |
|||
|
|||
dept_name_txt[1] = dept_name_txt[1].charAt(0).toUpperCase() + dept_name_txt[1].slice(1).toLowerCase(); |
|||
|
|||
$('#modalTitle_2').html("Officer`s Pending Report Of "+dept_name_txt[1]+" Zone ("+dept_name_txt[0]+")"); // Box title |
|||
*/ |
|||
loading_text_msg = getLoadingMessage(); // get Loading random text |
|||
|
|||
$('#modalBody_3').html(searchinfo("<b>"+loading_text_msg+"</b>")); // Box content (Body) |
|||
|
|||
$(model_box_3).modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
|
|||
//$(model_box_2).modal('show'); // Show Modal Box |
|||
|
|||
return false; |
|||
} |
|||
|
|||
/* Get Data of Main Page 1 */ |
|||
function get_modal_box_3_table_data(complaintNumber){ |
|||
var apiUrl = '/gcc/api/pgr/getComplaintDetails'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
data: { |
|||
'complaintNumber': complaintNumber, |
|||
}, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
//console.log('Response list:', jsonResponse); |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Complaints List */ |
|||
function get_table_list_modal_box_3(complaintNumber){ |
|||
get_modal_box_3_table_data(complaintNumber).then(function(complaintDetails) { |
|||
// Handle the data list |
|||
//console.log('Response list:', complaintList); |
|||
//$('#modalBody_3').html(get_modal_box_3_table_html()); // Box content (Body) |
|||
|
|||
generate_table_modal_box_3(complaintDetails); |
|||
|
|||
//$(model_box_3).modal('show'); // Show Modal Box |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching department list:', error); |
|||
}); |
|||
} |
|||
|
|||
/* Call Complaints Details function */ |
|||
function generate_table_modal_box_3(data){ |
|||
|
|||
var complaintDetailsHTML = ""; |
|||
|
|||
$.each(data, function(index, row) { |
|||
complaintDetailsHTML = `<table class="table table-bordered table-vcenter p-0 m-0" style="font-size:12px;"> |
|||
<thead> |
|||
<tr> |
|||
<th colspan="4">Complaint Information:</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Complaint No: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
`+row["COMPLAINTNUMBER"]+` |
|||
</td> |
|||
|
|||
<th style="padding: 0.45rem 0.45rem;">Department: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
`+row["DEPT_NAME"]+` |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Complaint Date: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
`+row["COMPDATE"]+` |
|||
</td> |
|||
|
|||
<th style="padding: 0.45rem 0.45rem;">Complaint Type:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
`+row["COMPLAINTTYPENAME"]+` |
|||
</td> |
|||
</tr> |
|||
|
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Complaint Title: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
`+row["COMPLAINTTITLE"]+` |
|||
</td> |
|||
|
|||
<th style="padding: 0.45rem 0.45rem; background-color:#fbffe0;">Officer ID:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem; background-color:#fbffe0;"> |
|||
`+row["USER_NAME"]+` |
|||
</td> |
|||
</tr> |
|||
|
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Details of Complaint:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" colspan="3"> |
|||
`+row["COMPLAINTDETAILS"]+` |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Complaint Location:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" colspan="3"> |
|||
`+row["COMPLAINTLOCATION"]+` |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Complaint Specific Location:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" colspan="3"> |
|||
`+row["COMPLAINTLANDMARK"]+` |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table>`; |
|||
|
|||
complaintDetailsHTML +=`<br> |
|||
<table class="table table-bordered table-vcenter p-0 m-0" style="font-size:12px;"> |
|||
<thead> |
|||
<tr> |
|||
<th colspan="4">Complaining Person\'s Details:</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Person Name: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
`+row["COMPLAINANTFIRSTNAME"]+` |
|||
</td> |
|||
|
|||
<th style="padding: 0.45rem 0.45rem;">Email: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
`+row["COMPLAINANTEMAIL"]+` |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Phone Number: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
`+row["COMPLAINANTTELEPHONE"]+` |
|||
</td> |
|||
|
|||
<th style="padding: 0.45rem 0.45rem;">Mobile Number: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
`+row["MOBILENUMBER"]+` |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Address: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
`+row["COMPLAINANTADDRESS"]+` |
|||
</td> |
|||
|
|||
<th style="padding: 0.45rem 0.45rem;">Pincode: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
`+row["PINCODE"]+` |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table>`; |
|||
}); |
|||
|
|||
$('#modalBody_3').html(complaintDetailsHTML); // Box content (Body) |
|||
} |
|||
</script> |
|||
@ -1,19 +0,0 @@ |
|||
<div class="row"> |
|||
<div class="col-12 mb-2"> |
|||
<div class="input-group mb-0"> |
|||
<span class="input-group-prepend"> |
|||
<button type="button" id="filter_reset_btn" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset"> |
|||
<i class="ik ik-refresh-ccw"></i> |
|||
</button> |
|||
</span> |
|||
<select class="form-control" id="search_department_id" name="search_department_id"> |
|||
<option value="0">All Department`s</option> |
|||
</select> |
|||
<span class="input-group-append"> |
|||
<button type="button" id="filter_search_btn" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search"> |
|||
<i class="ik ik-search me-1"></i> Search |
|||
</button> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,139 +0,0 @@ |
|||
|
|||
<!-- Box 1 --> |
|||
<div class="modal fade" id="ackModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="ackModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ackModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 1 --> |
|||
<div class="modal fade" id="mappingModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="mappingModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="mappingModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 2 --> |
|||
<div class="modal fade" id="ComplaintStatusBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="complaint-title">புகார் நிலை / Complaint Status:</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ComplaintStatusBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 3 --> |
|||
<div class="modal fade" id="viewFileBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewFileTitle">View File</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewFileBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 4 --> |
|||
<div class="modal fade" id="viewpetition" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewPetitionTitle">View Petition</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewPetitionBoxBody"> |
|||
<iframe id="iframe" width="100%" height="400px" src=""></iframe> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 0 common --> |
|||
<div class="modal fade" id="forwardModalBox" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="forwardModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="forwardModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
@ -1,293 +0,0 @@ |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var petitionNo = /*[[${petitionNo}]]*/''; |
|||
var petitionId = 0; |
|||
var closedComplaintsList=[]; |
|||
var complaintTypeList = ""; |
|||
var officerMasterList = ""; |
|||
|
|||
/* Get Complaint Type Data */ |
|||
function get_complaint_type_data(){ |
|||
|
|||
get_complaint_type_list().then(function(complaintTypes) { |
|||
// Handle the Complaint list |
|||
complaintTypeList = complaintTypes; |
|||
|
|||
// Call Petition function to fetch the data |
|||
get_petition_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching complaint type list:', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Officer Master Data */ |
|||
function get_officer_master_data(){ |
|||
|
|||
get_officer_list().then(function(officers) { |
|||
// Handle the officer list |
|||
officerMasterList = officers; |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching offcier master data:', error); |
|||
}); |
|||
} |
|||
|
|||
// Function to get complaint_type and complaint_typeid by complaint_typeid |
|||
function getComplaintTypeById(complaintTypeId) { |
|||
for (var i = 0; i < complaintTypeList.length; i++) { |
|||
if (complaintTypeList[i].complaint_typeid == complaintTypeId) { |
|||
return { |
|||
complaint_type: complaintTypeList[i].complaint_type, |
|||
complaint_typeid: complaintTypeList[i].complaint_typeid |
|||
}; |
|||
} |
|||
} |
|||
return null; // Return null if no matching complaint_typeid is found |
|||
} |
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_data(){ |
|||
get_petition_details().then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint; |
|||
petitionId = petitionDetails[0].petition_id; |
|||
var complaintArray = complaint.split(","); |
|||
$("#complaintType").val(complaintArray); |
|||
|
|||
$('#complaintType').trigger('change'); |
|||
|
|||
closedComplaintsList = complaintArray; |
|||
$("#cdate_value").html(convertdate(petitionDetails[0].cdate)); |
|||
$("#petition_no_value").html(petitionDetails[0].petition_no); |
|||
$("#petitioner_name_value").html(petitionDetails[0].petitioner_name); |
|||
$("#petitioner_mobile_value").html(petitionDetails[0].petitioner_mobile); |
|||
$("#petitioner_address_value").html(petitionDetails[0].petitioner_address); |
|||
$("#petitioner_pincode_value").html(petitionDetails[0].petitioner_pincode); |
|||
|
|||
$("#complaint_with_maping_value").html(petitionDetails[0].complaint_nature); |
|||
|
|||
var petition_status = petitionDetails[0].status |
|||
|
|||
if(petition_status=='pending' || petition_status=='partial'){ |
|||
$("#petition_summary_title").html("Pending Summary"); |
|||
var currentDate = new Date(); |
|||
var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),''); |
|||
$("#petition_summary_html").html(`This petition has been pending for more than ${totaldayspending}`); |
|||
} |
|||
if(petition_status=='close'){ |
|||
$("#petition_summary_title").html("Close Summary"); |
|||
var currentDate = new Date(); |
|||
var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),''); |
|||
$("#petition_summary_html").html(`The time taken to close this petition is ${totaldayspending}`); |
|||
} |
|||
|
|||
petition_status=petition_status.charAt(0).toUpperCase() + petition_status.slice(1); |
|||
|
|||
$("#petition_status_value").html(`<b style="color:red">${petition_status}</b>`); |
|||
|
|||
// Call Complaint list based on Petition No and Id |
|||
get_petition_mapping_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition Data ('+petitionNo+'):', error.message); |
|||
call_petition_search_from("** Invalid Petition Number: Please provide a valid petition number."); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_details() { |
|||
//alert(); |
|||
var formData = new FormData(); |
|||
formData.append('petitionNo',petitionNo); |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getPetitionDetails?petitionNo='+petitionNo; |
|||
//alert(petitionNo); |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
//alert(jsonResponse[0].petitioner_name); |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("* Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function get_petition_mapping_data(){ |
|||
get_petition_mapping_list().then(function(mappingDetails) { |
|||
|
|||
// Initialize count |
|||
let totalCount = mappingDetails.length; |
|||
let completedCount = 0; |
|||
let pendingCount = 0; |
|||
|
|||
var tableListHTML = ""; |
|||
|
|||
for(j = 0; j < mappingDetails.length; j++){ |
|||
var complaint_status=mappingDetails[j].complaint_status; |
|||
complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1); |
|||
|
|||
tableListHTML += `<tr> |
|||
<td>${j+1}</td> |
|||
<td>${mappingDetails[j].complaint_type}</td> |
|||
<td>${mappingDetails[j].off_nm} (${mappingDetails[j].off_id})</td> |
|||
<td>${convertdate(mappingDetails[j].mappedOn)}</td> |
|||
<td>${complaint_status}</td> |
|||
</tr>`; |
|||
|
|||
// Check if the status is "pending" |
|||
if (mappingDetails[j].complaint_status === "pending") { |
|||
// Increment the count |
|||
pendingCount++; |
|||
} |
|||
else if(mappingDetails[j].complaint_status === "close"){ |
|||
completedCount++; |
|||
} |
|||
} |
|||
|
|||
var listOfComplaintsHTML = `<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>Complaint</th> |
|||
<th>Assigned To</th> |
|||
<th>Assigned On</th> |
|||
<th>Status</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${tableListHTML} |
|||
</tbody> |
|||
</table>`; |
|||
$("#listOfComplaintsHTML").html(listOfComplaintsHTML); |
|||
|
|||
$("#total_complaints_value").html(`<b>${totalCount}</b>`); |
|||
$("#total_complaints_completed_value").html(`<b style="color:green">${completedCount}</b>`); |
|||
$("#total_complaints_pending_value").html(`<b style="color:red">${pendingCount}</b>`); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching Mapping Data ('+petitionId+'):', error.message); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_mapping_list() { |
|||
alert(petitionId); |
|||
var formData = new FormData(); |
|||
var apiUrl = '/gcc/api/zerohours_petition/getComplaintListByPetitionId?petitionId='+petitionId; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("***Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function call_petition_search_from(errorTXT){ |
|||
var errorHTML = ""; |
|||
if(errorTXT!=""){ |
|||
errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`; |
|||
} |
|||
var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();"> |
|||
<div class="card-header"> |
|||
<h3>View Petition Form</h3> |
|||
<div class="card-header-right"> |
|||
<h3 th:utext="'Petition No: '+${petitionNo}+''"></h3> |
|||
</div> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-12 text-center"> |
|||
${errorHTML} |
|||
<div class="form-group"> |
|||
<label for="petitionNoSearch">Petition No / மனு எண் </label> |
|||
<input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="ZH00000000" maxlength="11" required> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="col-12"> |
|||
<div class="block-content" id="userinfo2"> |
|||
<div id="comp_mapping_to_officers" class="row"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card-footer text-center"> |
|||
<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button> |
|||
<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button> |
|||
</div> |
|||
</form>`; |
|||
|
|||
$("#petitionViewtable").html(searchFormHTML); |
|||
$("#petitionNoSearch").mask('ZH00000000'); |
|||
} |
|||
|
|||
function searchRequest(){ |
|||
var searchValue = $('#petitionNoSearch').val(); |
|||
if (searchValue && searchValue.trim() !== '') { |
|||
searchValue = encodeBase64(searchValue); |
|||
window.location.href = "/gcc/zerohours_petition/view-petition?petitionNo="+searchValue; |
|||
} |
|||
else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
return false; |
|||
} |
|||
</script> |
|||
<script> |
|||
$(document).ready(function() { |
|||
if(petitionNo!=null && petitionNo!="error"){ |
|||
get_complaint_type_data(); |
|||
get_officer_master_data(); |
|||
} |
|||
else{ |
|||
if(petitionNo=="error"){ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
else{ |
|||
call_petition_search_from(""); |
|||
} |
|||
} |
|||
|
|||
}); |
|||
</script> |
|||
@ -1,660 +0,0 @@ |
|||
<script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script> |
|||
<script th:inline="javascript"> |
|||
var nodata = nodata(); |
|||
|
|||
var baseURL = "/gcc/ward_sabha/"; |
|||
|
|||
|
|||
/* Zero Hours Event List */ |
|||
function get_event_list() { |
|||
|
|||
var apiUrl = '/gcc/api/ward_sabha/getEventList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Zero Hours Event List */ |
|||
function get_current_event_list() { |
|||
|
|||
var apiUrl = '/gcc/api/ward_sabha/getCurrentEventList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
|
|||
/* Zone and Ward List */ |
|||
function get_zone_ward_list() { |
|||
|
|||
var apiUrl = '/gcc/api/ward_sabha/getZoneAndWard'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Councillor List */ |
|||
function get_councillor_list(ward) { |
|||
|
|||
var apiUrl = '/gcc/api/ward_sabha/getCouncillor?ward='+ward; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Complaint Type List */ |
|||
function get_complaint_type_list() { |
|||
|
|||
var apiUrl = '/gcc/api/ward_sabha/getComplaintTypes'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Officer Master List */ |
|||
function get_officer_list() { |
|||
|
|||
var apiUrl = '/gcc/api/ward_sabha/getOfficerList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Petition Type List */ |
|||
function get_petition_type_list() { |
|||
|
|||
var apiUrl = '/gcc/api/ward_sabha/getPetitionTypes'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function viewAck(petitionNo){ |
|||
|
|||
loading_text_msg = getLoadingMessage(); // get Loading random text |
|||
$('#ackModalTitle').html("Loading Petition Acknowledgement ("+petitionNo+")"); |
|||
var loading=searchinfo("<b>"+loading_text_msg+"</b>"); |
|||
var ackContentHTML=` |
|||
<div class="row"> |
|||
<div class="col-lg-6"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack1table" class="ack-content"> |
|||
<div id="ack1">${loading}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-6 printack2"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack2table" class="ack-content"> |
|||
<div id="ack2">${loading}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!--<div class="col-lg-12 text-center block-options pt-10"> |
|||
<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button> |
|||
</div>--> |
|||
</div>`; |
|||
|
|||
$('#ackModalBody').html(ackContentHTML); // Box content (Body) |
|||
|
|||
$("#ackModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
|
|||
get_petition_ack_data(petitionNo); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_ack_data(petitionNo){ |
|||
get_petition_details_byNo(petitionNo).then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint_txt; |
|||
|
|||
var complaintArray = complaint.split(','); |
|||
|
|||
for(j = 0; j < complaintArray.length; j++){ |
|||
if(j>0){ |
|||
complaintHTML+="<br>"; |
|||
} |
|||
complaintHTML+= (j+1)+') '+complaintArray[j]; |
|||
} |
|||
var ack =` |
|||
<table class="table table-borderless table-vcenter p-0 m-0"> |
|||
<tbody> |
|||
<tr> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
<td class="fw-semibold text-center"> |
|||
<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br> |
|||
மக்களை தேடி மேயர் திட்டம்<br> |
|||
ஒப்புகை சீட்டு / Acknowledgement Receipt</b> |
|||
</td> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<hr style="margin:0px"> |
|||
<div class="block-content p-0 m-0"> |
|||
<table class="table table-borderless table-vcenter" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${convertdate(petitionDetails[0].cdate)} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petition_no} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_name} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_mobile} |
|||
</td> |
|||
</tr> |
|||
<tr style="font-size:12px;"> |
|||
<th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintHTML} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th> |
|||
</tr> |
|||
<tr style="text-align: right;"> |
|||
<th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div>`; |
|||
$('#ackModalTitle').html("Acknowledgement Of Petition ("+petitionNo+")"); |
|||
$("#ack1").html(ack); |
|||
$("#ack2").html(ack); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_details_byNo(petitionNo) { |
|||
|
|||
var apiUrl = '/gcc/api/ward_sabha/getPetitionDetails?petitionNo='+petitionNo |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_complaint_details_byId(mapId) { |
|||
|
|||
var apiUrl = '/gcc/api/ward_sabha/getComplaintDetails?mapId='+mapId |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_complaint_action_byId(mapId) { |
|||
|
|||
var apiUrl = '/gcc/api/ward_sabha/getComplaintActionDetails?mapId='+mapId |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
|
|||
/* File View */ |
|||
function viewFile(fileOf,fileName,fileType){ |
|||
$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box |
|||
|
|||
var fileUrl = "/gcc/files/zh_petition/"; |
|||
|
|||
if(fileOf=="petition") |
|||
{ |
|||
fileUrl=fileUrl+fileName; |
|||
} |
|||
else if(fileOf="action"){ |
|||
fileUrl=fileUrl+"zh_action_file/"+fileName; |
|||
} |
|||
else{ |
|||
fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name |
|||
} |
|||
|
|||
checkFileExists(fileUrl).then(exists => { |
|||
if (exists) { |
|||
if(fileType=='application/pdf'){ |
|||
var fileHTML = `<iframe src="${fileUrl}" type="application/pdf" width="100%" height="600px"></iframe>`; |
|||
|
|||
} |
|||
else if(fileType=='application/octet-stream'){ |
|||
fileHTML =`<p class='text-danger m-0 p-0'>File Preview not avaiable.<br>Try to download and view.</p>`; |
|||
} |
|||
else{ |
|||
fileHTML =`<img src="${fileUrl}" alt="${fileType}" width="100%">`; |
|||
} |
|||
} else { |
|||
console.log('File does not exist'); |
|||
fileHTML = `<p class='text-danger m-0 p-0'>File does not exist</p>`; |
|||
} |
|||
|
|||
$("#viewFileBoxBody").html(fileHTML); // Modal Box Body |
|||
$("#viewFileBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
}); |
|||
} |
|||
|
|||
/* Downlaod file */ |
|||
function downloadFile(fileOf,fileName,fileType){ |
|||
$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box |
|||
|
|||
var fileUrl = "/gcc/files/zh_petition/"; |
|||
|
|||
if(fileOf=="petition") |
|||
{ |
|||
fileUrl=fileUrl+fileName; |
|||
callDownload(fileUrl,fileName); |
|||
} |
|||
else if(fileOf="action"){ |
|||
fileUrl=fileUrl+"zh_action_file/"+fileName; |
|||
callDownload(fileUrl,fileName); |
|||
} |
|||
else{ |
|||
fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name |
|||
} |
|||
} |
|||
|
|||
/* Show Complaint forward Modal */ |
|||
function forward_compliant(mapId,title){ |
|||
var compmapHTML =`<div class="col-12" id="comp${mapId}"> |
|||
|
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">${title}</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div class="form-group"> |
|||
<label for="dept${mapId}">Select Department Type</label> |
|||
<select name="dept[]" id="dept${mapId}" class="form-control" onchange="javascript:calloffice(this.value,${mapId})"> |
|||
<option value="0">Select Department</option> |
|||
<option value="1">GCC Department</option> |
|||
<option value="2">External Department</option> |
|||
</select> |
|||
</div> |
|||
<div id="officedata${mapId}"></div> |
|||
<div id="officers${mapId}"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div>`; |
|||
|
|||
$("#forwardModalBody").html(compmapHTML); // Modal Box Body |
|||
$("#forwardModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
} |
|||
|
|||
/* Show Complaint forward Modal */ |
|||
function compliant_mapping(petitionId,title,petitionNo){ |
|||
get_mapped_list(petitionId).then(function(listHTML) { |
|||
var compmapHTML =`<div class="row"><div class="col-6" id="comp${petitionId}"> |
|||
<input type="hidden" name="petitionid" id="petitionid" value="${petitionId}"> |
|||
<input type="hidden" name="petitionno" id="petitionno" value="${petitionNo}"> |
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">${title}</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div class="form-group"> |
|||
<label for="dept${petitionId}">Select Department Type</label> |
|||
<select name="dept[]" id="dept${petitionId}" class="form-control" onchange="javascript:calloffice(this.value,${petitionId})"> |
|||
<option value="0">Select Department</option> |
|||
<option value="1">GCC Department</option> |
|||
<option value="2">External Department</option> |
|||
</select> |
|||
</div> |
|||
<div id="officedata${petitionId}"></div> |
|||
<div id="officers${petitionId}"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div>`; |
|||
|
|||
var strListHTML = ""; |
|||
for (const key in listHTML) { |
|||
if (listHTML.hasOwnProperty(key)) { |
|||
//console.log(`${key}: ${listHTML[key]}`); |
|||
strListHTML += `<tr> |
|||
<td class="fw-semibold">${key+1}</td> |
|||
<td class="fw-semibold">${listHTML[key]['petition_no']}</td> |
|||
<td class="fw-semibold">${listHTML[key]['off_nm']}</td> |
|||
<td class="fw-semibold"> |
|||
<a href="javascript:void(0)" class="link mr-10" onclick="unmapOfficer(${listHTML[key]['mapid']},${listHTML[key]['petition_id']},'${listHTML[key]['off_nm']}','${listHTML[key]['petition_no']}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Un-Map" data-original-title="Un-Map"><i class="fas fa-unlink"></i></a> |
|||
</td> |
|||
</tr>`; |
|||
} |
|||
} |
|||
strListHTML = `<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>Petition No</th> |
|||
<th>Department</th> |
|||
<th><i class="fas fa-unlink"></i></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${strListHTML} |
|||
</tbody> |
|||
</table>`; |
|||
|
|||
compmapHTML = compmapHTML + `<div class="col-6" id="mappeddata"> |
|||
|
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">Mapped List</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div id="mappedTableHTML"> |
|||
${strListHTML} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div></div>`; |
|||
|
|||
$("#mappingModalTitle").html("Mapping Form"); |
|||
$("#mappingModalBody").html(compmapHTML); // Modal Box Body |
|||
$("#mappingModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching Mapped data:', error); |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
function updateModelBox(petitionId,title,petitionNo){ |
|||
get_mapped_list(petitionId).then(function(listHTML) { |
|||
var compmapHTML =`<div class="row"><div class="col-6" id="comp${petitionId}"> |
|||
<input type="hidden" name="petitionid" id="petitionid" value="${petitionId}"> |
|||
<input type="hidden" name="petitionno" id="petitionno" value="${petitionNo}"> |
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">${title}</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div class="form-group"> |
|||
<label for="dept${petitionId}">Select Department Type</label> |
|||
<select name="dept[]" id="dept${petitionId}" class="form-control" onchange="javascript:calloffice(this.value,${petitionId})"> |
|||
<option value="0">Select Department</option> |
|||
<option value="1">GCC Department</option> |
|||
<option value="2">External Department</option> |
|||
</select> |
|||
</div> |
|||
<div id="officedata${petitionId}"></div> |
|||
<div id="officers${petitionId}"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div>`; |
|||
|
|||
var strListHTML = ""; |
|||
|
|||
for (const key in listHTML) { |
|||
if (listHTML.hasOwnProperty(key)) { |
|||
//console.log(`${key}: ${listHTML[key]}`); |
|||
strListHTML += `<tr> |
|||
<td class="fw-semibold">${key+1}</td> |
|||
<td class="fw-semibold">${listHTML[key]['petition_no']}</td> |
|||
<td class="fw-semibold">${listHTML[key]['off_nm']}</td> |
|||
<td class="fw-semibold"> |
|||
<a href="javascript:void(0)" class="link mr-10" onclick="unmapOfficer(${listHTML[key]['mapid']},${listHTML[key]['petition_id']},'${listHTML[key]['off_nm']}','${listHTML[key]['petition_no']}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="un-Map" data-original-title="Un-Map"><i class="fas fa-unlink"></i></a> |
|||
</td> |
|||
</tr>`; |
|||
} |
|||
} |
|||
strListHTML = `<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>Petition No</th> |
|||
<th>Department</th> |
|||
<th><i class="fas fa-unlink"></i></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${strListHTML} |
|||
</tbody> |
|||
</table>`; |
|||
|
|||
compmapHTML = compmapHTML + `<div class="col-6" id="mappeddata"> |
|||
|
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">Mapped List</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div id="mappedTableHTML"> |
|||
${strListHTML} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div></div>`; |
|||
|
|||
|
|||
$("#mappingModalBody").html(compmapHTML); // Modal Box Body |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching Mapped data:', error); |
|||
}); |
|||
return false; |
|||
} |
|||
function unmapOfficer(mapid,petitionId,department,petitionNo){ |
|||
// Handle the response |
|||
Swal.fire({ |
|||
title: 'Are you sure to unmap this department?<br>'+department, |
|||
customClass: { |
|||
title: 'swal-title-custom' // Add a custom class for the title |
|||
}, |
|||
//text: "Error", |
|||
icon: 'warning', |
|||
showCancelButton: true, |
|||
confirmButtonColor: '#3085d6', |
|||
cancelButtonColor: '#d33', |
|||
confirmButtonText: 'Yes', |
|||
}).then(function(result) { |
|||
if (result.isConfirmed) { |
|||
unmapPetition(mapid).then(function(status) { |
|||
if(status=="success"){ |
|||
updateModelBox(petitionId,"Assign to the Department Officer",petitionNo); |
|||
} |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error unmapping mapid:'+mapid, error); |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
return false; |
|||
} |
|||
function unmapPetition(mapid){ |
|||
var apiUrl = '/gcc/api/ward_sabha/unmapPetition?mapid='+mapid |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
//dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition maping details ('+mapid+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
</script> |
|||
@ -1,19 +0,0 @@ |
|||
<div class="row"> |
|||
<div class="col-12 mb-2"> |
|||
<div class="input-group mb-0"> |
|||
<span class="input-group-prepend"> |
|||
<button type="button" id="filter_reset_btn" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset"> |
|||
<i class="ik ik-refresh-ccw"></i> |
|||
</button> |
|||
</span> |
|||
<select class="form-control" id="search_department_id" name="search_department_id"> |
|||
<option value="0">All Department`s</option> |
|||
</select> |
|||
<span class="input-group-append"> |
|||
<button type="button" id="filter_search_btn" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search"> |
|||
<i class="ik ik-search me-1"></i> Search |
|||
</button> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,108 +0,0 @@ |
|||
<script th:inline="javascript"> |
|||
/* Get Petition data */ |
|||
function get_works_stage_data_data(){ |
|||
get_works_stage_details().then(function(worksDetails) { |
|||
//alert(); |
|||
//console.log(worksDetails); |
|||
//console.log(worksDetails[0].id); |
|||
|
|||
// Handle the data list |
|||
//$("#selectedestid_stage").val(worksDetails[0].estid); |
|||
/* |
|||
// 1. Basic Details |
|||
$("#estno_stage").html(worksDetails[0].estimate_no); |
|||
$("#estdate_stage").html(convertdate(worksDetails[0].estimate_date)); |
|||
$("#zone_ward_stage").html(worksDetails[0].zone +" / "+ worksDetails[0].ward); |
|||
$("#projectname_stage").html(worksDetails[0].project_name); |
|||
$("#location_stage").html(worksDetails[0].location); |
|||
|
|||
|
|||
// 2. Department and Contractor Details |
|||
|
|||
$("#department_stage").html(worksDetails[0].department); |
|||
$("#contractorname_stage").html(worksDetails[0].contractor_name); |
|||
$("#contractorperiod_stage").html(worksDetails[0].contractor_period); |
|||
|
|||
// 3. Funding and Scheme Details |
|||
$("#sourceoffund_stage").html(worksDetails[0].fund_source); |
|||
$("#scheme_stage").html(worksDetails[0].scheme); |
|||
$("#category_stage").html(worksDetails[0].category); |
|||
$("#subcategory_stage").html(worksDetails[0].sub_category); |
|||
$("#estamount_stage").html(worksDetails[0].estimation_amount); |
|||
$("#ordervalue_stage").html(worksDetails[0].est_val_with_oh); |
|||
|
|||
|
|||
// 4. Sanctions and Tender Process |
|||
$("#techsanctiondate_stage").html(convertdate_2(worksDetails[0].technical_sanction_date)); |
|||
$("#adminsanctiondate_stage").html(convertdate_2(worksDetails[0].admin_sanction_date)); |
|||
$("#tendercalleddate_stage").html(convertdate_2(worksDetails[0].tender_called_date)); |
|||
$("#tenderfinalizeddate_stage").html(convertdate_2(worksDetails[0].tender_finalized_date)); |
|||
|
|||
// 5. Contract and Execution Details |
|||
$("#loadate_stage").html(convertdate_2(worksDetails[0].loa_date)); |
|||
$("#agreementdate_stage").html(convertdate_2(worksDetails[0].agreement_date)); |
|||
$("#workorderdate_stage").html(convertdate_2(worksDetails[0].work_order_date)); |
|||
$("#workcommenceddate_stage").html(convertdate_2(worksDetails[0].work_commenced_date)); |
|||
*/ |
|||
|
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching works stage data ('+estid+'):', error.message); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_works_stage_details() { |
|||
|
|||
var formData = new FormData(); |
|||
var apiUrl = '/gcc/works/api/estimates/getUserEstWorkDetailsById?estid='+estid; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
//call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
// For Work Stage |
|||
function get_works_stage_data(estid){ |
|||
let stageListHTML = ""; |
|||
//alert(estid); |
|||
getStageList(estid).then(function(worksStages) { |
|||
//alert(worksStages.length); |
|||
for (let i = 0; i < worksStages.length; i++) { |
|||
action = `<a href="" onclick="return EditStage(${worksStages[i].tmid});">Edit</a>`; |
|||
stageListHTML += ` |
|||
<tr> |
|||
<td style="padding: 0.45rem 0.45rem;">${i+1}</td> |
|||
<td class="fw-semibold">${worksStages[i].stagename}</td> |
|||
<td class="fw-semibold">${worksStages[i].orderby}</td> |
|||
<td class="fw-semibold">${action}</td> |
|||
</tr>`; |
|||
} |
|||
|
|||
//$("#stageListHTML").html(stageListHTML); |
|||
get_works_stage_data_data(estid); |
|||
}); |
|||
} |
|||
|
|||
</script> |
|||
@ -1,140 +0,0 @@ |
|||
|
|||
<!-- Box 1 --> |
|||
<div class="modal fade" id="ackModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="ackModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ackModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 2 --> |
|||
<div class="modal fade" id="worksStatusBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="complaint-title">புகார் நிலை / Complaint Status:</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ComplaintStatusBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 3 --> |
|||
<div class="modal fade" id="viewFileBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewFileTitle">View File</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewFileBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 4 --> |
|||
<div class="modal fade" id="viewWorks" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewWorksTitle"></h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewWorksBoxBody"> |
|||
<iframe id="iframe" width="100%" height="400px" src=""></iframe> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 4 --> |
|||
<div class="modal fade" id="addeditStage" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-l" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #5946f0 !important;"> |
|||
<h6 class="modal-title m-0" id="addeditStageTitle"></h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="addeditStageBoxBody"> |
|||
<iframe id="iframe" width="100%" height="400px" src=""></iframe> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 0 common --> |
|||
<div class="modal fade" id="forwardModalBox" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="forwardModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="forwardModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
@ -1,185 +0,0 @@ |
|||
<script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script> |
|||
<script th:inline="javascript"> |
|||
//var nodata = nodata(); |
|||
|
|||
var baseURL = "/gcc/works/"; |
|||
|
|||
|
|||
function loadWards() { |
|||
var zone = document.getElementById("erpzone").value; |
|||
var wardDropdown = document.getElementById("erpward"); |
|||
wardDropdown.innerHTML = '<option value="" disabled selected>Select a Ward</option>'; |
|||
|
|||
if (zone) { |
|||
fetch('/gcc/works/wards?zone=' + zone) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
data.forEach(ward => { |
|||
var option = document.createElement("option"); |
|||
option.value = ward; |
|||
option.textContent = ward; |
|||
wardDropdown.appendChild(option); |
|||
}); |
|||
}) |
|||
.catch(error => console.error('Error loading wards:', error)); |
|||
} |
|||
} |
|||
|
|||
function loadScheme() { |
|||
fetch('/gcc/works/api/estimates/getSchemeList') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
let schemeDropdown = document.getElementById('erpscheme'); |
|||
schemeDropdown.innerHTML = '<option value="" disabled selected>Select Scheme</option>'; // Reset dropdown |
|||
|
|||
data.forEach(scheme => { |
|||
let option = document.createElement('option'); |
|||
option.value = scheme.id; // Use ID as the value |
|||
option.textContent = scheme.name; // Display Name |
|||
schemeDropdown.appendChild(option); |
|||
}); |
|||
}) |
|||
.catch(error => console.error('Error fetching schemes:', error)); |
|||
} |
|||
|
|||
function loadCategory() { |
|||
fetch('/gcc/works/api/estimates/getCategoryList') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
let categoryDropdown = document.getElementById('erpcategory'); |
|||
categoryDropdown.innerHTML = '<option value="" disabled selected>Select Category</option>'; // Reset dropdown |
|||
|
|||
data.forEach(category => { |
|||
let option = document.createElement('option'); |
|||
option.value = category.id; // Use ID as the value |
|||
option.textContent = category.name; // Display Name |
|||
categoryDropdown.appendChild(option); |
|||
}); |
|||
}) |
|||
.catch(error => console.error('Error fetching Category:', error)); |
|||
} |
|||
|
|||
function loadSubCategory() { |
|||
fetch('/gcc/works/api/estimates/getSubCategoryList') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
let subCategoryDropdown = document.getElementById('erpsubcategory'); |
|||
subCategoryDropdown.innerHTML = '<option value="" disabled selected>Select SubCategory</option>'; // Reset dropdown |
|||
|
|||
data.forEach(subCategory => { |
|||
let option = document.createElement('option'); |
|||
option.value = subCategory.id; // Use ID as the value |
|||
option.textContent = subCategory.description; // Display Name |
|||
subCategoryDropdown.appendChild(option); |
|||
}); |
|||
}) |
|||
.catch(error => console.error('Error fetching subCategory:', error)); |
|||
} |
|||
|
|||
function loadDepartment() { |
|||
fetch('/gcc/works/api/estimates/getDepartmentList') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
let departmentDropdown = document.getElementById('erpdepartment'); |
|||
departmentDropdown.innerHTML = '<option value="" disabled selected>Select Department</option>'; // Reset dropdown |
|||
|
|||
data.forEach(department => { |
|||
let option = document.createElement('option'); |
|||
option.value = department.id; // Use ID as the value |
|||
option.textContent = department.dept_name; // Display Name |
|||
departmentDropdown.appendChild(option); |
|||
}); |
|||
}) |
|||
.catch(error => console.error('Error fetching Department:', error)); |
|||
} |
|||
|
|||
function loadSource() { |
|||
fetch('/gcc/works/api/estimates/getSourceofFundList') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
let SourceDropDown = document.getElementById('erpfundsource'); |
|||
SourceDropDown.innerHTML = '<option value="" disabled selected>Select Source of Fund</option>'; // Reset dropdown |
|||
|
|||
data.forEach(source => { |
|||
let option = document.createElement('option'); |
|||
option.value = source.id; // Use ID as the value |
|||
option.textContent = source.name; // Display Name |
|||
SourceDropDown.appendChild(option); |
|||
}); |
|||
}) |
|||
.catch(error => console.error('Error fetching Department:', error)); |
|||
} |
|||
|
|||
function loadWardsFilter() { |
|||
var zone = document.getElementById("zonef").value; |
|||
var wardDropdown = document.getElementById("wardf"); |
|||
wardDropdown.innerHTML = '<option value="" disabled selected>Select a Ward</option>'; |
|||
|
|||
if (zone) { |
|||
fetch('/gcc/works/wards?zone=' + zone) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
data.forEach(ward => { |
|||
var option = document.createElement("option"); |
|||
option.value = ward; |
|||
option.textContent = ward; |
|||
wardDropdown.appendChild(option); |
|||
}); |
|||
}) |
|||
.catch(error => console.error('Error loading wards:', error)); |
|||
} |
|||
} |
|||
|
|||
function loadDepartmentFilter() { |
|||
fetch('/gcc/works/api/estimates/getDepartmentList') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
let departmentDropdown = document.getElementById('departmentf'); |
|||
departmentDropdown.innerHTML = '<option value="" disabled selected>Select Department</option>'; // Reset dropdown |
|||
|
|||
data.forEach(department => { |
|||
let option = document.createElement('option'); |
|||
option.value = department.id; // Use ID as the value |
|||
option.textContent = department.dept_name; // Display Name |
|||
departmentDropdown.appendChild(option); |
|||
}); |
|||
}) |
|||
.catch(error => console.error('Error fetching Department:', error)); |
|||
} |
|||
|
|||
function loadSourceFilter() { |
|||
fetch('/gcc/works/api/estimates/getSourceofFundList') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
let SourceDropDown = document.getElementById('fundsourcef'); |
|||
SourceDropDown.innerHTML = '<option value="" disabled selected>Select Source of Fund</option>'; // Reset dropdown |
|||
|
|||
data.forEach(source => { |
|||
let option = document.createElement('option'); |
|||
option.value = source.id; // Use ID as the value |
|||
option.textContent = source.name; // Display Name |
|||
SourceDropDown.appendChild(option); |
|||
}); |
|||
}) |
|||
.catch(error => console.error('Error fetching Department:', error)); |
|||
} |
|||
|
|||
|
|||
|
|||
function printContent() { |
|||
var popupContent = document.getElementById("printarea").innerHTML; |
|||
var printWindow = window.open("", "_blank"); |
|||
|
|||
var styles = document.head.innerHTML; // Get all existing styles |
|||
|
|||
printWindow.document.write("<html><head>" + styles + "<title>Print</title></head><body>"); |
|||
printWindow.document.write(popupContent); |
|||
printWindow.document.write("</body></html>"); |
|||
printWindow.document.close(); |
|||
|
|||
setTimeout(function () { |
|||
printWindow.print(); |
|||
printWindow.close(); |
|||
}, 500); |
|||
} |
|||
</script> |
|||
@ -1,19 +0,0 @@ |
|||
<div class="row"> |
|||
<div class="col-12 mb-2"> |
|||
<div class="input-group mb-0"> |
|||
<span class="input-group-prepend"> |
|||
<button type="button" id="filter_reset_btn" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset"> |
|||
<i class="ik ik-refresh-ccw"></i> |
|||
</button> |
|||
</span> |
|||
<select class="form-control" id="search_department_id" name="search_department_id"> |
|||
<option value="0">All Department`s</option> |
|||
</select> |
|||
<span class="input-group-append"> |
|||
<button type="button" id="filter_search_btn" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search"> |
|||
<i class="ik ik-search me-1"></i> Search |
|||
</button> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,239 +0,0 @@ |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var estid = /*[[${estid}]]*/''; |
|||
|
|||
var petitionId = 0; |
|||
var closedComplaintsList=[]; |
|||
var complaintTypeList = ""; |
|||
var officerMasterList = ""; |
|||
|
|||
|
|||
/* Get Petition data */ |
|||
function get_works_update_data(){ |
|||
get_works_update_details().then(function(worksDetails) { |
|||
|
|||
//console.log(worksDetails); |
|||
//console.log(worksDetails[0].id); |
|||
|
|||
// Handle the data list |
|||
$("#selectedestid").val(worksDetails[0].estid); |
|||
|
|||
// 1. Basic Details |
|||
$("#estno").html(worksDetails[0].estimate_no); |
|||
$("#estdate").html(convertdate(worksDetails[0].estimate_date)); |
|||
$("#zone_ward").html(worksDetails[0].zone +" / "+ worksDetails[0].ward); |
|||
$("#projectname").html(worksDetails[0].project_name); |
|||
$("#location").html(worksDetails[0].location); |
|||
|
|||
|
|||
// 2. Department and Contractor Details |
|||
|
|||
$("#department").html(worksDetails[0].department); |
|||
$("#contractorname").html(worksDetails[0].contractor_name); |
|||
$("#contractorperiod").html(worksDetails[0].contractor_period); |
|||
|
|||
// 3. Funding and Scheme Details |
|||
$("#sourceoffund").html(worksDetails[0].fund_source); |
|||
$("#scheme").html(worksDetails[0].scheme); |
|||
$("#category").html(worksDetails[0].category); |
|||
$("#subcategory").html(worksDetails[0].sub_category); |
|||
$("#estamount").html(worksDetails[0].estimation_amount); |
|||
$("#ordervalue").html(worksDetails[0].est_val_with_oh); |
|||
|
|||
if(worksDetails[0].project_type){ |
|||
$("#projecttype").val(worksDetails[0].project_type); |
|||
} |
|||
|
|||
govt_funded_project = 0; |
|||
if(worksDetails[0].govt_funded_project){ |
|||
govt_funded_project = 1; |
|||
} |
|||
$("#govtfund").val(govt_funded_project); |
|||
|
|||
special_category = 0; |
|||
if(worksDetails[0].special_category){ |
|||
special_category = 1; |
|||
} |
|||
$("#specialcat").val(special_category); |
|||
/* |
|||
// 4. Sanctions and Tender Process |
|||
$("#techsanctiondate").val(convertdate_2(worksDetails[0].technical_sanction_date)); |
|||
$("#adminsanctiondate").val(convertdate_2(worksDetails[0].admin_sanction_date)); |
|||
$("#tendercalleddate").val(convertdate_2(worksDetails[0].tender_called_date)); |
|||
$("#tenderfinalizeddate").val(convertdate_2(worksDetails[0].tender_finalized_date)); |
|||
|
|||
// 5. Contract and Execution Details |
|||
$("#loadate").val(convertdate_2(worksDetails[0].loa_date)); |
|||
$("#agreementdate").val(convertdate_2(worksDetails[0].agreement_date)); |
|||
$("#workorderdate").val(convertdate_2(worksDetails[0].work_order_date)); |
|||
$("#workcommenceddate").val(convertdate_2(worksDetails[0].work_commenced_date)); |
|||
*/ |
|||
|
|||
// 6. File Details |
|||
$("#adminfileHTML").html( |
|||
`<a href="${worksDetails[0].admin_sanction_file}" |
|||
target="_blank" |
|||
onclick="window.open(this.href, 'popup', 'width=800,height=600'); return false;"> |
|||
View |
|||
</a>` |
|||
); |
|||
$("#loafileHTML").html( |
|||
`<a href="${worksDetails[0].loa_file}" |
|||
target="_blank" |
|||
onclick="window.open(this.href, 'popup', 'width=800,height=600'); return false;"> |
|||
View |
|||
</a>` |
|||
); |
|||
$("#agreementfileHTML").html( |
|||
`<a href="${worksDetails[0].agreement_file}" |
|||
target="_blank" |
|||
onclick="window.open(this.href, 'popup', 'width=800,height=600'); return false;"> |
|||
View |
|||
</a>` |
|||
); |
|||
$("#workorderfileHTML").html( |
|||
`<a href="${worksDetails[0].work_order_file}" |
|||
target="_blank" |
|||
onclick="window.open(this.href, 'popup', 'width=800,height=600'); return false;"> |
|||
View |
|||
</a>` |
|||
); |
|||
|
|||
|
|||
// For Update |
|||
// 4. Sanctions and Tender Process |
|||
if(worksDetails[0].technical_sanction_date==null){ |
|||
$("#erptechsanctiondate").val(); |
|||
} |
|||
else{ |
|||
$("#erptechsanctiondate").val(convertdate_2(worksDetails[0].technical_sanction_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].admin_sanction_date==null){ |
|||
$("#erptechsanctiondate").val(); |
|||
} |
|||
else{ |
|||
$("#erpadminsanctiondate").val(convertdate_2(worksDetails[0].admin_sanction_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].tender_called_date==null){ |
|||
$("#erptendercalldate").val(); |
|||
} |
|||
else{ |
|||
$("#erptendercalldate").val(convertdate_2(worksDetails[0].tender_called_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].tender_finalized_date==null){ |
|||
$("#erptenderfinalizeddate").val(); |
|||
} |
|||
else{ |
|||
$("#erptenderfinalizeddate").val(convertdate_2(worksDetails[0].tender_finalized_date)); |
|||
} |
|||
|
|||
|
|||
// 5. Contract and Execution Details |
|||
|
|||
if(worksDetails[0].loa_date==null){ |
|||
$("#erploadate").val(); |
|||
} |
|||
else{ |
|||
$("#erploadate").val(convertdate_2(worksDetails[0].loa_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].agreement_date==null){ |
|||
$("#erpagreementdate").val(); |
|||
} |
|||
else{ |
|||
$("#erpagreementdate").val(convertdate_2(worksDetails[0].agreement_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].work_order_date==null){ |
|||
$("#erpworkorderdate").val(); |
|||
} |
|||
else{ |
|||
$("#erpworkorderdate").val(convertdate_2(worksDetails[0].work_order_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].work_commenced_date==null){ |
|||
$("#erpworkcommenceddate").val(); |
|||
} |
|||
else{ |
|||
$("#erpworkcommenceddate").val(convertdate_2(worksDetails[0].work_commenced_date)); |
|||
} |
|||
|
|||
//Is iconic Project |
|||
if(worksDetails[0].isiconic==0){ |
|||
$("#isiconic").prop("checked", false); |
|||
} |
|||
else{ |
|||
$("#isiconic").prop("checked", true); |
|||
} |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching works data ('+estid+'):', error.message); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_works_update_details() { |
|||
|
|||
var formData = new FormData(); |
|||
var apiUrl = '/gcc/works/api/estimates/getUserEstWorkDetailsById?estid='+estid; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
//call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function searchRequest(){ |
|||
var searchValue = $('#petitionNoSearch').val(); |
|||
if (searchValue && searchValue.trim() !== '') { |
|||
searchValue = encodeBase64(searchValue); |
|||
window.location.href = "/gcc/c_petition/view-petition?petitionNo="+searchValue; |
|||
} |
|||
else{ |
|||
//call_petition_search_from("Invalid EST ID: Please provide a valid EST number."); |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
|
|||
$(document).ready(function() { |
|||
|
|||
if(estid!=null && estid!="error"){ |
|||
get_works_update_data(); |
|||
} |
|||
else{ |
|||
if(estid=="error"){ |
|||
alert("Invalid EST Number: Please provide a valid EST number." + estid); |
|||
} |
|||
else{ |
|||
alert(estid); |
|||
} |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
</script> |
|||
@ -1,328 +0,0 @@ |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var estid = /*[[${estid}]]*/''; |
|||
|
|||
var petitionId = 0; |
|||
var closedComplaintsList=[]; |
|||
var complaintTypeList = ""; |
|||
var officerMasterList = ""; |
|||
|
|||
|
|||
/* Get Petition data */ |
|||
function get_works_data(){ |
|||
get_works_details().then(function(worksDetails) { |
|||
|
|||
//console.log(worksDetails); |
|||
//console.log(worksDetails[0].id); |
|||
|
|||
// Handle the data list |
|||
$("#selectedestid").val(worksDetails[0].estid); |
|||
|
|||
// 1. Basic Details |
|||
$("#estno").html(worksDetails[0].estimate_no); |
|||
$("#estdate").html(convertdate(worksDetails[0].estimate_date)); |
|||
$("#zone_ward").html(worksDetails[0].zone +" / "+ worksDetails[0].ward); |
|||
$("#projectname").html(worksDetails[0].project_name); |
|||
$("#location").html(worksDetails[0].location); |
|||
|
|||
|
|||
// 2. Department and Contractor Details |
|||
|
|||
$("#department").html(worksDetails[0].department); |
|||
$("#contractorname").html(worksDetails[0].contractor_name); |
|||
$("#contractorperiod").html(worksDetails[0].contractor_period); |
|||
|
|||
// 3. Funding and Scheme Details |
|||
$("#sourceoffund").html(worksDetails[0].fund_source); |
|||
$("#scheme").html(worksDetails[0].scheme); |
|||
$("#category").html(worksDetails[0].category); |
|||
$("#subcategory").html(worksDetails[0].sub_category); |
|||
$("#estamount").html(worksDetails[0].estimation_amount); |
|||
$("#ordervalue").html(worksDetails[0].est_val_with_oh); |
|||
|
|||
|
|||
// 4. Sanctions and Tender Process |
|||
if(worksDetails[0].technical_sanction_date==null){ |
|||
$("#techsanctiondate").html(); |
|||
} |
|||
else{ |
|||
$("#techsanctiondate").html(convertdate_2(worksDetails[0].technical_sanction_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].admin_sanction_date==null){ |
|||
$("#techsanctiondate").html(); |
|||
} |
|||
else{ |
|||
$("#adminsanctiondate").html(convertdate_2(worksDetails[0].admin_sanction_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].tender_called_date==null){ |
|||
$("#tendercalldate").html(); |
|||
} |
|||
else{ |
|||
$("#tendercalldate").html(convertdate_2(worksDetails[0].tender_called_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].tender_finalized_date==null){ |
|||
$("#tenderfinalizeddate").html(); |
|||
} |
|||
else{ |
|||
$("#tenderfinalizeddate").html(convertdate_2(worksDetails[0].tender_finalized_date)); |
|||
} |
|||
|
|||
|
|||
// 5. Contract and Execution Details |
|||
|
|||
if(worksDetails[0].loa_date==null){ |
|||
$("#loadate").html(); |
|||
} |
|||
else{ |
|||
$("#loadate").html(convertdate_2(worksDetails[0].loa_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].agreement_date==null){ |
|||
$("#agreementdate").html(); |
|||
} |
|||
else{ |
|||
$("#agreementdate").html(convertdate_2(worksDetails[0].agreement_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].work_order_date==null){ |
|||
$("#workorderdate").html(); |
|||
} |
|||
else{ |
|||
$("#workorderdate").html(convertdate_2(worksDetails[0].work_order_date)); |
|||
} |
|||
/* ===========*/ |
|||
if(worksDetails[0].work_commenced_date==null){ |
|||
$("#workcommenceddate").html(); |
|||
} |
|||
else{ |
|||
$("#workcommenceddate").html(convertdate_2(worksDetails[0].work_commenced_date)); |
|||
} |
|||
|
|||
/* |
|||
// 4. Sanctions and Tender Process |
|||
$("#techsanctiondate").html(convertdate_2(worksDetails[0].technical_sanction_date)); |
|||
$("#adminsanctiondate").html(convertdate_2(worksDetails[0].admin_sanction_date)); |
|||
$("#tendercalleddate").html(convertdate_2(worksDetails[0].tender_called_date)); |
|||
$("#tenderfinalizeddate").html(convertdate_2(worksDetails[0].tender_finalized_date)); |
|||
|
|||
// 5. Contract and Execution Details |
|||
$("#loadate").html(convertdate_2(worksDetails[0].loa_date)); |
|||
$("#agreementdate").html(convertdate_2(worksDetails[0].agreement_date)); |
|||
$("#workorderdate").html(convertdate_2(worksDetails[0].work_order_date)); |
|||
$("#workcommenceddate").html(convertdate_2(worksDetails[0].work_commenced_date)); |
|||
*/ |
|||
// 6. File Details |
|||
$("#adminfile").html( |
|||
`<a href="${worksDetails[0].admin_sanction_file}" |
|||
target="_blank" |
|||
onclick="window.open(this.href, 'popup', 'width=800,height=600'); return false;"> |
|||
View |
|||
</a>` |
|||
); |
|||
$("#loafile").html( |
|||
`<a href="${worksDetails[0].loa_file}" |
|||
target="_blank" |
|||
onclick="window.open(this.href, 'popup', 'width=800,height=600'); return false;"> |
|||
View |
|||
</a>` |
|||
); |
|||
$("#agreementfile").html( |
|||
`<a href="${worksDetails[0].agreement_file}" |
|||
target="_blank" |
|||
onclick="window.open(this.href, 'popup', 'width=800,height=600'); return false;"> |
|||
View |
|||
</a>` |
|||
); |
|||
$("#workorderfile").html( |
|||
`<a href="${worksDetails[0].work_order_file}" |
|||
target="_blank" |
|||
onclick="window.open(this.href, 'popup', 'width=800,height=600'); return false;"> |
|||
View |
|||
</a>` |
|||
); |
|||
|
|||
|
|||
// For Update |
|||
|
|||
$("#project_type").html(worksDetails[0].project_type); |
|||
$("#govt_funded_project").html(worksDetails[0].govt_funded_project); |
|||
$("#special_category").html(worksDetails[0].special_category); |
|||
|
|||
/* |
|||
// 4. Sanctions and Tender Process |
|||
$("#erptechsanctiondate").val(convertdate_2(worksDetails[0].technical_sanction_date)); |
|||
$("#erpadminsanctiondate").val(convertdate_2(worksDetails[0].admin_sanction_date)); |
|||
$("#erptendercalldate").val(convertdate_2(worksDetails[0].tender_called_date)); |
|||
$("#erptenderfinalizeddate").val(convertdate_2(worksDetails[0].tender_finalized_date)); |
|||
|
|||
// 5. Contract and Execution Details |
|||
$("#erploadate").val(convertdate_2(worksDetails[0].loa_date)); |
|||
$("#erpagreementdate").val(convertdate_2(worksDetails[0].agreement_date)); |
|||
$("#erpworkorderdate").val(convertdate_2(worksDetails[0].work_order_date)); |
|||
$("#erpworkcommenceddate").val(convertdate_2(worksDetails[0].work_commenced_date)); |
|||
*/ |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching works data ('+estid+'):', error.message); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_works_details() { |
|||
|
|||
var formData = new FormData(); |
|||
var apiUrl = '/gcc/works/api/estimates/getUserEstWorkDetailsById?estid='+estid; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
//call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function searchRequest(){ |
|||
var searchValue = $('#petitionNoSearch').val(); |
|||
if (searchValue && searchValue.trim() !== '') { |
|||
searchValue = encodeBase64(searchValue); |
|||
window.location.href = "/gcc/c_petition/view-petition?petitionNo="+searchValue; |
|||
} |
|||
else{ |
|||
//call_petition_search_from("Invalid EST ID: Please provide a valid EST number."); |
|||
} |
|||
return false; |
|||
} |
|||
</script> |
|||
<script> |
|||
$(document).ready(function() { |
|||
|
|||
if(estid!=null && estid!="error"){ |
|||
get_works_data(); |
|||
} |
|||
else{ |
|||
if(estid=="error"){ |
|||
alert("Invalid EST Number: Please provide a valid EST number." + estid); |
|||
} |
|||
else{ |
|||
alert(estid); |
|||
} |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
// For Work Stage |
|||
function get_works_stage_data(estid){ |
|||
let stageListHTML = ""; |
|||
//alert(estid); |
|||
getStageList(estid).then(function(worksStages) { |
|||
//alert(worksStages.length); |
|||
for (let i = 0; i < worksStages.length; i++) { |
|||
action = `<a href="" onclick="return EditStage(${worksStages[i].tmid},${worksStages[i].estid});">Edit</a>`; |
|||
stageListHTML += ` |
|||
<tr> |
|||
<td style="padding: 0.45rem 0.45rem;">${i+1}</td> |
|||
<td class="fw-semibold">${worksStages[i].stagename}</td> |
|||
<td class="fw-semibold">${worksStages[i].orderby}</td> |
|||
<td class="fw-semibold">${action}</td> |
|||
</tr>`; |
|||
} |
|||
|
|||
$("#stageListHTML").html(stageListHTML); |
|||
}); |
|||
} |
|||
function getStageList(estid){ |
|||
var formData = new FormData(); |
|||
var apiUrl = '/gcc/works/api/estimates/getUserEstWorkStageDetailsByEstid?estid='+estid; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
//call_petition_search_from("Invalid Est Id: Please provide a valid EST number."); |
|||
//console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching Est details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
// For Work Stage |
|||
function get_works_edit_stage_data(estid,tmid){ |
|||
let stageListHTML = ""; |
|||
//alert(estid); |
|||
getStageList(estid).then(function(worksStages) { |
|||
//alert(worksStages.length); |
|||
for (let i = 0; i < worksStages.length; i++) { |
|||
if(worksStages[i].tmid=tmid){ |
|||
$("#tmid_stage").val(worksStages[i].tmid); |
|||
$("#estid_stage").val(worksStages[i].estid); |
|||
$("#orderby_stage").val(worksStages[i].orderby); |
|||
$("#stagename_stage").val(worksStages[i].stagename); |
|||
} |
|||
} |
|||
|
|||
$("#stageListHTML").html(stageListHTML); |
|||
}); |
|||
} |
|||
function EditStage(tmid,estid){ |
|||
$("#addeditStage").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
|
|||
var url = '/gcc/works/edit_stage_modal?tmid='+tmid+'&estid='+estid; |
|||
|
|||
$.ajax({ |
|||
url: url, |
|||
type: 'GET', |
|||
dataType: 'html', |
|||
success: function(data) { |
|||
$('#addeditStageTitle').html("Add / Edit Work Stage"); |
|||
$('#addeditStageBoxBody').html(data); // Inject content into modal body |
|||
get_works_edit_stage_data() |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
console.error("Error loading URL:", error); |
|||
// Handle error, display a message, etc. |
|||
} |
|||
}); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
|
|||
</script> |
|||
@ -1,120 +0,0 @@ |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var estid = /*[[${estid}]]*/''; |
|||
|
|||
var petitionId = 0; |
|||
var closedComplaintsList=[]; |
|||
var complaintTypeList = ""; |
|||
var officerMasterList = ""; |
|||
|
|||
|
|||
/* Get Petition data */ |
|||
function get_works_data(){ |
|||
get_works_details().then(function(worksDetails) { |
|||
|
|||
console.log(worksDetails); |
|||
console.log(worksDetails[0].id); |
|||
|
|||
// Handle the data list |
|||
$("#selectedestid").val(worksDetails[0].id); |
|||
|
|||
// 1. Basic Details |
|||
$("#estno").html(worksDetails[0].ESTIMATE_NO); |
|||
$("#estdate").html(convertdate(worksDetails[0].ESTIMATE_DATE)); |
|||
$("#zone_ward").html(worksDetails[0].ZONE +" / "+ worksDetails[0].WARD); |
|||
$("#projectname").html(worksDetails[0].PROJECT_NAME); |
|||
$("#location").html(worksDetails[0].LOCATION); |
|||
|
|||
|
|||
// 2. Department and Contractor Details |
|||
|
|||
$("#department").html(worksDetails[0].DEPARTMENT_NAME); |
|||
$("#contractorname").html(worksDetails[0].CONTRACTOR_NAME); |
|||
$("#contractorperiod").html(worksDetails[0].CONTRACTOR_PERIOD); |
|||
|
|||
// 3. Funding and Scheme Details |
|||
$("#sourceoffund").html(worksDetails[0].FUND_SOURCE); |
|||
$("#scheme").html(worksDetails[0].SCHEME); |
|||
$("#category").html(worksDetails[0].CATEGORY); |
|||
$("#subcategory").html(worksDetails[0].SUB_CATEGORY); |
|||
$("#estamount").html(worksDetails[0].ESTIMATION_AMOUNT); |
|||
$("#ordervalue").html(worksDetails[0].EST_VAL_WITH_OH); |
|||
|
|||
// 4. Sanctions and Tender Process |
|||
//$("#erptechsanctiondate").val(convertdate_2(worksDetails[0].TECHNICAL_SANCTION_DATE)); |
|||
//$("#erpadminsanctiondate").val(convertdate_2(worksDetails[0].ADMIN_SANCTION_DATE)); |
|||
//$("#erptendercalldate").val(convertdate_2(worksDetails[0].TENDER_CALLED_DATE)); |
|||
//$("#erptenderfinalizeddate").val(convertdate_2(worksDetails[0].TENDER_FINALIZED_DATE)); |
|||
|
|||
// 5. Contract and Execution Details |
|||
//$("#erploadate").val(convertdate_2(worksDetails[0].LOA_DATE)); |
|||
//$("#erpagreementdate").val(convertdate_2(worksDetails[0].AGREEMENT_DATE)); |
|||
//$("#erpworkorderdate").val(convertdate_2(worksDetails[0].WORK_ORDER_DATE)); |
|||
//$("#erpworkcommenceddate").val(convertdate_2(worksDetails[0].WORK_COMMENCED_DATE)); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching works data ('+estid+'):', error.message); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_works_details() { |
|||
|
|||
var formData = new FormData(); |
|||
var apiUrl = '/gcc/works/api/estimates/getestimateworkdetailsById?estid='+estid; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function searchRequest(){ |
|||
var searchValue = $('#petitionNoSearch').val(); |
|||
if (searchValue && searchValue.trim() !== '') { |
|||
searchValue = encodeBase64(searchValue); |
|||
window.location.href = "/gcc/c_petition/view-petition?petitionNo="+searchValue; |
|||
} |
|||
else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
return false; |
|||
} |
|||
</script> |
|||
<script> |
|||
$(document).ready(function() { |
|||
|
|||
if(estid!=null && estid!="error"){ |
|||
get_works_data(); |
|||
} |
|||
else{ |
|||
if(estid=="error"){ |
|||
alert("Invalid EST Number: Please provide a valid EST number." + estid); |
|||
} |
|||
else{ |
|||
alert(estid); |
|||
} |
|||
} |
|||
|
|||
}); |
|||
</script> |
|||
@ -1,139 +0,0 @@ |
|||
|
|||
<!-- Box 1 --> |
|||
<div class="modal fade" id="ackModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="ackModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ackModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 1 --> |
|||
<div class="modal fade" id="mappingModalBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="mappingModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="mappingModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 2 --> |
|||
<div class="modal fade" id="ComplaintStatusBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header"> |
|||
<h6 class="modal-title m-0" id="complaint-title">புகார் நிலை / Complaint Status:</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="ComplaintStatusBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 3 --> |
|||
<div class="modal fade" id="viewFileBox" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewFileTitle">View File</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewFileBoxBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 4 --> |
|||
<div class="modal fade" id="viewpetition" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="viewPetitionTitle">View Petition</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="viewPetitionBoxBody"> |
|||
<iframe id="iframe" width="100%" height="400px" src=""></iframe> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
|
|||
<!-- Box 0 common --> |
|||
<div class="modal fade" id="forwardModalBox" data-backdrop="static" tabindex="1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
|
|||
<div class="modal-header" style="background-color: #28a745 !important;"> |
|||
<h6 class="modal-title m-0" id="forwardModalTitle">Modal Title</h6> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div><!--end modal-header--> |
|||
<div class="modal-body"> |
|||
<div id="forwardModalBody"> |
|||
</div> |
|||
</div><!--end modal-body--> |
|||
|
|||
<div class="modal-footer bg-body"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div><!--end modal-footer--> |
|||
|
|||
</div><!--end modal-content--> |
|||
</div><!--end modal-dialog--> |
|||
</div><!--end modal--> |
|||
<!-- END Page Content --> |
|||
@ -1,293 +0,0 @@ |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var petitionNo = /*[[${petitionNo}]]*/''; |
|||
var petitionId = 0; |
|||
var closedComplaintsList=[]; |
|||
var complaintTypeList = ""; |
|||
var officerMasterList = ""; |
|||
|
|||
/* Get Complaint Type Data */ |
|||
function get_complaint_type_data(){ |
|||
|
|||
get_complaint_type_list().then(function(complaintTypes) { |
|||
// Handle the Complaint list |
|||
complaintTypeList = complaintTypes; |
|||
|
|||
// Call Petition function to fetch the data |
|||
get_petition_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching complaint type list:', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Officer Master Data */ |
|||
function get_officer_master_data(){ |
|||
|
|||
get_officer_list().then(function(officers) { |
|||
// Handle the officer list |
|||
officerMasterList = officers; |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching offcier master data:', error); |
|||
}); |
|||
} |
|||
|
|||
// Function to get complaint_type and complaint_typeid by complaint_typeid |
|||
function getComplaintTypeById(complaintTypeId) { |
|||
for (var i = 0; i < complaintTypeList.length; i++) { |
|||
if (complaintTypeList[i].complaint_typeid == complaintTypeId) { |
|||
return { |
|||
complaint_type: complaintTypeList[i].complaint_type, |
|||
complaint_typeid: complaintTypeList[i].complaint_typeid |
|||
}; |
|||
} |
|||
} |
|||
return null; // Return null if no matching complaint_typeid is found |
|||
} |
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_data(){ |
|||
get_petition_details().then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint; |
|||
petitionId = petitionDetails[0].petition_id; |
|||
var complaintArray = complaint.split(","); |
|||
$("#complaintType").val(complaintArray); |
|||
|
|||
$('#complaintType').trigger('change'); |
|||
|
|||
closedComplaintsList = complaintArray; |
|||
$("#cdate_value").html(convertdate(petitionDetails[0].cdate)); |
|||
$("#petition_no_value").html(petitionDetails[0].petition_no); |
|||
$("#petitioner_name_value").html(petitionDetails[0].petitioner_name); |
|||
$("#petitioner_mobile_value").html(petitionDetails[0].petitioner_mobile); |
|||
$("#petitioner_address_value").html(petitionDetails[0].petitioner_address); |
|||
$("#petitioner_pincode_value").html(petitionDetails[0].petitioner_pincode); |
|||
|
|||
$("#complaint_with_maping_value").html(petitionDetails[0].complaint_nature); |
|||
|
|||
var petition_status = petitionDetails[0].status |
|||
|
|||
if(petition_status=='pending' || petition_status=='partial'){ |
|||
$("#petition_summary_title").html("Pending Summary"); |
|||
var currentDate = new Date(); |
|||
var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),''); |
|||
$("#petition_summary_html").html(`This petition has been pending for more than ${totaldayspending}`); |
|||
} |
|||
if(petition_status=='close'){ |
|||
$("#petition_summary_title").html("Close Summary"); |
|||
var currentDate = new Date(); |
|||
var totaldayspending = date_difference(convertdate(petitionDetails[0].cdate),convertdate(currentDate),''); |
|||
$("#petition_summary_html").html(`The time taken to close this petition is ${totaldayspending}`); |
|||
} |
|||
|
|||
petition_status=petition_status.charAt(0).toUpperCase() + petition_status.slice(1); |
|||
|
|||
$("#petition_status_value").html(`<b style="color:red">${petition_status}</b>`); |
|||
|
|||
// Call Complaint list based on Petition No and Id |
|||
get_petition_mapping_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition Data ('+petitionNo+'):', error.message); |
|||
call_petition_search_from("** Invalid Petition Number: Please provide a valid petition number."); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_details() { |
|||
//alert(); |
|||
var formData = new FormData(); |
|||
formData.append('petitionNo',petitionNo); |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getPetitionDetails?petitionNo='+petitionNo; |
|||
//alert(petitionNo); |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
//alert(jsonResponse[0].petitioner_name); |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("* Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function get_petition_mapping_data(){ |
|||
get_petition_mapping_list().then(function(mappingDetails) { |
|||
|
|||
// Initialize count |
|||
let totalCount = mappingDetails.length; |
|||
let completedCount = 0; |
|||
let pendingCount = 0; |
|||
|
|||
var tableListHTML = ""; |
|||
|
|||
for(j = 0; j < mappingDetails.length; j++){ |
|||
var complaint_status=mappingDetails[j].complaint_status; |
|||
complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1); |
|||
|
|||
tableListHTML += `<tr> |
|||
<td>${j+1}</td> |
|||
<td>${mappingDetails[j].complaint_type}</td> |
|||
<td>${mappingDetails[j].off_nm} (${mappingDetails[j].off_id})</td> |
|||
<td>${convertdate(mappingDetails[j].mappedOn)}</td> |
|||
<td>${complaint_status}</td> |
|||
</tr>`; |
|||
|
|||
// Check if the status is "pending" |
|||
if (mappingDetails[j].complaint_status === "pending") { |
|||
// Increment the count |
|||
pendingCount++; |
|||
} |
|||
else if(mappingDetails[j].complaint_status === "close"){ |
|||
completedCount++; |
|||
} |
|||
} |
|||
|
|||
var listOfComplaintsHTML = `<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>Complaint</th> |
|||
<th>Assigned To</th> |
|||
<th>Assigned On</th> |
|||
<th>Status</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${tableListHTML} |
|||
</tbody> |
|||
</table>`; |
|||
$("#listOfComplaintsHTML").html(listOfComplaintsHTML); |
|||
|
|||
$("#total_complaints_value").html(`<b>${totalCount}</b>`); |
|||
$("#total_complaints_completed_value").html(`<b style="color:green">${completedCount}</b>`); |
|||
$("#total_complaints_pending_value").html(`<b style="color:red">${pendingCount}</b>`); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching Mapping Data ('+petitionId+'):', error.message); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_mapping_list() { |
|||
alert(petitionId); |
|||
var formData = new FormData(); |
|||
var apiUrl = '/gcc/api/zerohours_petition/getComplaintListByPetitionId?petitionId='+petitionId; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("***Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function call_petition_search_from(errorTXT){ |
|||
var errorHTML = ""; |
|||
if(errorTXT!=""){ |
|||
errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`; |
|||
} |
|||
var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();"> |
|||
<div class="card-header"> |
|||
<h3>View Petition Form</h3> |
|||
<div class="card-header-right"> |
|||
<h3 th:utext="'Petition No: '+${petitionNo}+''"></h3> |
|||
</div> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-12 text-center"> |
|||
${errorHTML} |
|||
<div class="form-group"> |
|||
<label for="petitionNoSearch">Petition No / மனு எண் </label> |
|||
<input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="ZH00000000" maxlength="11" required> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="col-12"> |
|||
<div class="block-content" id="userinfo2"> |
|||
<div id="comp_mapping_to_officers" class="row"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card-footer text-center"> |
|||
<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button> |
|||
<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button> |
|||
</div> |
|||
</form>`; |
|||
|
|||
$("#petitionViewtable").html(searchFormHTML); |
|||
$("#petitionNoSearch").mask('ZH00000000'); |
|||
} |
|||
|
|||
function searchRequest(){ |
|||
var searchValue = $('#petitionNoSearch').val(); |
|||
if (searchValue && searchValue.trim() !== '') { |
|||
searchValue = encodeBase64(searchValue); |
|||
window.location.href = "/gcc/zerohours_petition/view-petition?petitionNo="+searchValue; |
|||
} |
|||
else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
return false; |
|||
} |
|||
</script> |
|||
<script> |
|||
$(document).ready(function() { |
|||
if(petitionNo!=null && petitionNo!="error"){ |
|||
get_complaint_type_data(); |
|||
get_officer_master_data(); |
|||
} |
|||
else{ |
|||
if(petitionNo=="error"){ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
else{ |
|||
call_petition_search_from(""); |
|||
} |
|||
} |
|||
|
|||
}); |
|||
</script> |
|||
@ -1,660 +0,0 @@ |
|||
<script src="node_modules/jquery.mask/1.14.16/jquery.mask.min.js"></script> |
|||
<script th:inline="javascript"> |
|||
var nodata = nodata(); |
|||
|
|||
var baseURL = "/gcc/zerohours_petition/"; |
|||
|
|||
|
|||
/* Zero Hours Event List */ |
|||
function get_event_list() { |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getEventList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Zero Hours Event List */ |
|||
function get_current_event_list() { |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getCurrentEventList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
|
|||
/* Zone and Ward List */ |
|||
function get_zone_ward_list() { |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getZoneAndWard'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Councillor List */ |
|||
function get_councillor_list(ward) { |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getCouncillor?ward='+ward; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Complaint Type List */ |
|||
function get_complaint_type_list() { |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getComplaintTypes'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Officer Master List */ |
|||
function get_officer_list() { |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getOfficerList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Petition Type List */ |
|||
function get_petition_type_list() { |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getPetitionTypes'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function viewAck(petitionNo){ |
|||
|
|||
loading_text_msg = getLoadingMessage(); // get Loading random text |
|||
$('#ackModalTitle').html("Loading Petition Acknowledgement ("+petitionNo+")"); |
|||
var loading=searchinfo("<b>"+loading_text_msg+"</b>"); |
|||
var ackContentHTML=` |
|||
<div class="row"> |
|||
<div class="col-lg-6"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack1table" class="ack-content"> |
|||
<div id="ack1">${loading}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-6 printack2"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack2table" class="ack-content"> |
|||
<div id="ack2">${loading}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!--<div class="col-lg-12 text-center block-options pt-10"> |
|||
<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button> |
|||
</div>--> |
|||
</div>`; |
|||
|
|||
$('#ackModalBody').html(ackContentHTML); // Box content (Body) |
|||
|
|||
$("#ackModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
|
|||
get_petition_ack_data(petitionNo); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_ack_data(petitionNo){ |
|||
get_petition_details_byNo(petitionNo).then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint_txt; |
|||
|
|||
var complaintArray = complaint.split(','); |
|||
|
|||
for(j = 0; j < complaintArray.length; j++){ |
|||
if(j>0){ |
|||
complaintHTML+="<br>"; |
|||
} |
|||
complaintHTML+= (j+1)+') '+complaintArray[j]; |
|||
} |
|||
var ack =` |
|||
<table class="table table-borderless table-vcenter p-0 m-0"> |
|||
<tbody> |
|||
<tr> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
<td class="fw-semibold text-center"> |
|||
<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br> |
|||
மக்களை தேடி மேயர் திட்டம்<br> |
|||
ஒப்புகை சீட்டு / Acknowledgement Receipt</b> |
|||
</td> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<hr style="margin:0px"> |
|||
<div class="block-content p-0 m-0"> |
|||
<table class="table table-borderless table-vcenter" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${convertdate(petitionDetails[0].cdate)} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petition_no} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_name} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_mobile} |
|||
</td> |
|||
</tr> |
|||
<tr style="font-size:12px;"> |
|||
<th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintHTML} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th> |
|||
</tr> |
|||
<tr style="text-align: right;"> |
|||
<th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div>`; |
|||
$('#ackModalTitle').html("Acknowledgement Of Petition ("+petitionNo+")"); |
|||
$("#ack1").html(ack); |
|||
$("#ack2").html(ack); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_details_byNo(petitionNo) { |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getPetitionDetails?petitionNo='+petitionNo |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_complaint_details_byId(mapId) { |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getComplaintDetails?mapId='+mapId |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_complaint_action_byId(mapId) { |
|||
|
|||
var apiUrl = '/gcc/api/zerohours_petition/getComplaintActionDetails?mapId='+mapId |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
|
|||
/* File View */ |
|||
function viewFile(fileOf,fileName,fileType){ |
|||
$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box |
|||
|
|||
var fileUrl = "/gcc/files/zh_petition/"; |
|||
|
|||
if(fileOf=="petition") |
|||
{ |
|||
fileUrl=fileUrl+fileName; |
|||
} |
|||
else if(fileOf="action"){ |
|||
fileUrl=fileUrl+"zh_action_file/"+fileName; |
|||
} |
|||
else{ |
|||
fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name |
|||
} |
|||
|
|||
checkFileExists(fileUrl).then(exists => { |
|||
if (exists) { |
|||
if(fileType=='application/pdf'){ |
|||
var fileHTML = `<iframe src="${fileUrl}" type="application/pdf" width="100%" height="600px"></iframe>`; |
|||
|
|||
} |
|||
else if(fileType=='application/octet-stream'){ |
|||
fileHTML =`<p class='text-danger m-0 p-0'>File Preview not avaiable.<br>Try to download and view.</p>`; |
|||
} |
|||
else{ |
|||
fileHTML =`<img src="${fileUrl}" alt="${fileType}" width="100%">`; |
|||
} |
|||
} else { |
|||
console.log('File does not exist'); |
|||
fileHTML = `<p class='text-danger m-0 p-0'>File does not exist</p>`; |
|||
} |
|||
|
|||
$("#viewFileBoxBody").html(fileHTML); // Modal Box Body |
|||
$("#viewFileBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
}); |
|||
} |
|||
|
|||
/* Downlaod file */ |
|||
function downloadFile(fileOf,fileName,fileType){ |
|||
$("#viewFileTitle").html("View File ("+fileName+")"); // Title for the Modal Box |
|||
|
|||
var fileUrl = "/gcc/files/zh_petition/"; |
|||
|
|||
if(fileOf=="petition") |
|||
{ |
|||
fileUrl=fileUrl+fileName; |
|||
callDownload(fileUrl,fileName); |
|||
} |
|||
else if(fileOf="action"){ |
|||
fileUrl=fileUrl+"zh_action_file/"+fileName; |
|||
callDownload(fileUrl,fileName); |
|||
} |
|||
else{ |
|||
fileUrl=fileUrl+"invaliedFile.txt"; // For File Not Exits Default file name |
|||
} |
|||
} |
|||
|
|||
/* Show Complaint forward Modal */ |
|||
function forward_compliant(mapId,title){ |
|||
var compmapHTML =`<div class="col-12" id="comp${mapId}"> |
|||
|
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">${title}</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div class="form-group"> |
|||
<label for="dept${mapId}">Select Department Type</label> |
|||
<select name="dept[]" id="dept${mapId}" class="form-control" onchange="javascript:calloffice(this.value,${mapId})"> |
|||
<option value="0">Select Department</option> |
|||
<option value="1">GCC Department</option> |
|||
<option value="2">External Department</option> |
|||
</select> |
|||
</div> |
|||
<div id="officedata${mapId}"></div> |
|||
<div id="officers${mapId}"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div>`; |
|||
|
|||
$("#forwardModalBody").html(compmapHTML); // Modal Box Body |
|||
$("#forwardModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
} |
|||
|
|||
/* Show Complaint forward Modal */ |
|||
function compliant_mapping(petitionId,title,petitionNo){ |
|||
get_mapped_list(petitionId).then(function(listHTML) { |
|||
var compmapHTML =`<div class="row"><div class="col-6" id="comp${petitionId}"> |
|||
<input type="hidden" name="petitionid" id="petitionid" value="${petitionId}"> |
|||
<input type="hidden" name="petitionno" id="petitionno" value="${petitionNo}"> |
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">${title}</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div class="form-group"> |
|||
<label for="dept${petitionId}">Select Department Type</label> |
|||
<select name="dept[]" id="dept${petitionId}" class="form-control" onchange="javascript:calloffice(this.value,${petitionId})"> |
|||
<option value="0">Select Department</option> |
|||
<option value="1">GCC Department</option> |
|||
<option value="2">External Department</option> |
|||
</select> |
|||
</div> |
|||
<div id="officedata${petitionId}"></div> |
|||
<div id="officers${petitionId}"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div>`; |
|||
|
|||
var strListHTML = ""; |
|||
for (const key in listHTML) { |
|||
if (listHTML.hasOwnProperty(key)) { |
|||
//console.log(`${key}: ${listHTML[key]}`); |
|||
strListHTML += `<tr> |
|||
<td class="fw-semibold">${key+1}</td> |
|||
<td class="fw-semibold">${listHTML[key]['petition_no']}</td> |
|||
<td class="fw-semibold">${listHTML[key]['off_nm']}</td> |
|||
<td class="fw-semibold"> |
|||
<a href="javascript:void(0)" class="link mr-10" onclick="unmapOfficer(${listHTML[key]['mapid']},${listHTML[key]['petition_id']},'${listHTML[key]['off_nm']}','${listHTML[key]['petition_no']}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Un-Map" data-original-title="Un-Map"><i class="fas fa-unlink"></i></a> |
|||
</td> |
|||
</tr>`; |
|||
} |
|||
} |
|||
strListHTML = `<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>Petition No</th> |
|||
<th>Department</th> |
|||
<th><i class="fas fa-unlink"></i></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${strListHTML} |
|||
</tbody> |
|||
</table>`; |
|||
|
|||
compmapHTML = compmapHTML + `<div class="col-6" id="mappeddata"> |
|||
|
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">Mapped List</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div id="mappedTableHTML"> |
|||
${strListHTML} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div></div>`; |
|||
|
|||
$("#mappingModalTitle").html("Mapping Form"); |
|||
$("#mappingModalBody").html(compmapHTML); // Modal Box Body |
|||
$("#mappingModalBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching Mapped data:', error); |
|||
}); |
|||
return false; |
|||
} |
|||
|
|||
function updateModelBox(petitionId,title,petitionNo){ |
|||
get_mapped_list(petitionId).then(function(listHTML) { |
|||
var compmapHTML =`<div class="row"><div class="col-6" id="comp${petitionId}"> |
|||
<input type="hidden" name="petitionid" id="petitionid" value="${petitionId}"> |
|||
<input type="hidden" name="petitionno" id="petitionno" value="${petitionNo}"> |
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">${title}</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div class="form-group"> |
|||
<label for="dept${petitionId}">Select Department Type</label> |
|||
<select name="dept[]" id="dept${petitionId}" class="form-control" onchange="javascript:calloffice(this.value,${petitionId})"> |
|||
<option value="0">Select Department</option> |
|||
<option value="1">GCC Department</option> |
|||
<option value="2">External Department</option> |
|||
</select> |
|||
</div> |
|||
<div id="officedata${petitionId}"></div> |
|||
<div id="officers${petitionId}"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div>`; |
|||
|
|||
var strListHTML = ""; |
|||
|
|||
for (const key in listHTML) { |
|||
if (listHTML.hasOwnProperty(key)) { |
|||
//console.log(`${key}: ${listHTML[key]}`); |
|||
strListHTML += `<tr> |
|||
<td class="fw-semibold">${key+1}</td> |
|||
<td class="fw-semibold">${listHTML[key]['petition_no']}</td> |
|||
<td class="fw-semibold">${listHTML[key]['off_nm']}</td> |
|||
<td class="fw-semibold"> |
|||
<a href="javascript:void(0)" class="link mr-10" onclick="unmapOfficer(${listHTML[key]['mapid']},${listHTML[key]['petition_id']},'${listHTML[key]['off_nm']}','${listHTML[key]['petition_no']}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="un-Map" data-original-title="Un-Map"><i class="fas fa-unlink"></i></a> |
|||
</td> |
|||
</tr>`; |
|||
} |
|||
} |
|||
strListHTML = `<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>Petition No</th> |
|||
<th>Department</th> |
|||
<th><i class="fas fa-unlink"></i></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
${strListHTML} |
|||
</tbody> |
|||
</table>`; |
|||
|
|||
compmapHTML = compmapHTML + `<div class="col-6" id="mappeddata"> |
|||
|
|||
<div class="widget mb-0"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">Mapped List</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div id="mappedTableHTML"> |
|||
${strListHTML} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div></div>`; |
|||
|
|||
|
|||
$("#mappingModalBody").html(compmapHTML); // Modal Box Body |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching Mapped data:', error); |
|||
}); |
|||
return false; |
|||
} |
|||
function unmapOfficer(mapid,petitionId,department,petitionNo){ |
|||
// Handle the response |
|||
Swal.fire({ |
|||
title: 'Are you sure to unmap this department?<br>'+department, |
|||
customClass: { |
|||
title: 'swal-title-custom' // Add a custom class for the title |
|||
}, |
|||
//text: "Error", |
|||
icon: 'warning', |
|||
showCancelButton: true, |
|||
confirmButtonColor: '#3085d6', |
|||
cancelButtonColor: '#d33', |
|||
confirmButtonText: 'Yes', |
|||
}).then(function(result) { |
|||
if (result.isConfirmed) { |
|||
unmapPetition(mapid).then(function(status) { |
|||
if(status=="success"){ |
|||
updateModelBox(petitionId,"Assign to the Department Officer",petitionNo); |
|||
} |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error unmapping mapid:'+mapid, error); |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
return false; |
|||
} |
|||
function unmapPetition(mapid){ |
|||
var apiUrl = '/gcc/api/zerohours_petition/unmapPetition?mapid='+mapid |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
//dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition maping details ('+mapid+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
</script> |
|||
@ -1,19 +0,0 @@ |
|||
<div class="row"> |
|||
<div class="col-12 mb-2"> |
|||
<div class="input-group mb-0"> |
|||
<span class="input-group-prepend"> |
|||
<button type="button" id="filter_reset_btn" class="btn btn-success" onclick="callReSetEventId(0);" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Reset" title="Reset"> |
|||
<i class="ik ik-refresh-ccw"></i> |
|||
</button> |
|||
</span> |
|||
<select class="form-control" id="search_department_id" name="search_department_id"> |
|||
<option value="0">All Department`s</option> |
|||
</select> |
|||
<span class="input-group-append"> |
|||
<button type="button" id="filter_search_btn" class="btn btn-success" onclick="callSetEventId();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title="Search"> |
|||
<i class="ik ik-search me-1"></i> Search |
|||
</button> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,359 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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-bar-chart-2 bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Dashboard</h5> |
|||
<span>Main Dashboard of GCC App</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 active" aria-current="page">Dashboard</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-lg-6 col-md-6 col-sm-12"> |
|||
<div class="widget"> |
|||
<div class="widget-header"> |
|||
<h3 class="widget-title">My Details</h3> |
|||
<div class="widget-tools pull-right"> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="widget-body" style="" id="basicUserProfile"> |
|||
The body of the widget |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-6 col-md-6 col-sm-12"> |
|||
<div class="widget"> |
|||
<div class="widget-header"> |
|||
<h3 class="widget-title">தினம் ஒரு திருக்குறள்:</h3> |
|||
<div class="widget-tools pull-right text-right"> |
|||
<img src="/gcc/files/app_uploads/icons/thiruvalluvar.jpeg" width="15%" class="rounded-circle"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="widget-body" id="kural_dashboard"> |
|||
<table> |
|||
<tr> |
|||
<td class="text-center" width="20%"><img src="/gcc/files/app_uploads/icons/thiruvalluvar.jpeg" width="90%" class="rounded"></td> |
|||
<td> |
|||
<div class="mb-0" style="font-size:20px;">அகர முதல எழுத்தெல்லாம</div> |
|||
<div class="mb-0" style="font-size:20px;">ஆதி பகவன் முதற்றே உலக</div> |
|||
<div class="mb-0 text-right">( குறள் எண் : 6 ) | <a href="javascript:void(0);" class="link"> விளக்கம்</a></div> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- |
|||
<div class="col-lg-3 col-md-6 col-sm-12"> |
|||
<div class="widget"> |
|||
<div class="widget-header"> |
|||
<h3 class="widget-title">Your Info</h3> |
|||
<div class="widget-tools pull-right"></div> |
|||
</div> |
|||
<div class="widget-body" id=""> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
--> |
|||
</div> |
|||
<!-- |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h3>User Profile</h3> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="col-sm-12" id="userProfile"></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 th:inline="javascript"> |
|||
var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script |
|||
|
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
//alert(createdBy); |
|||
// Loading Div id |
|||
const loading = $("#userProfile"); |
|||
|
|||
function call_loading(){ |
|||
loading.html(searchinfo("<b>"+loading_text_msg+"</b>")); |
|||
} |
|||
|
|||
function remove_loading(){ |
|||
loading.html(""); |
|||
} |
|||
|
|||
|
|||
/* Get Complaints Data */ |
|||
function get_user_basic_data(){ |
|||
var apiUrl = '/gcc/api/getUserProfileBasic?userId='+createdBy; |
|||
//alert(apiUrl); |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
/*dataType: 'json',*/ |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Complaints List */ |
|||
function get_user_basic_info(){ |
|||
get_user_basic_data().then(function(userProfile) { |
|||
// Handle the userProfile |
|||
//$("#basicUserProfile").html(userProfile); |
|||
$("#basicUserProfile").html("<br><br><center>Welecome Back!</center><br><br>"); |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
if (error && error.message) { |
|||
console.error('Error fetching User Profile:', error.message); |
|||
} else { |
|||
console.error('An error occurred while fetching user profile:', error); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/* Get Complaints Data */ |
|||
function get_user_data(){ |
|||
var apiUrl = '/gcc/api/getUserProfile?userId='+createdBy; |
|||
//alert(apiUrl); |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
/*dataType: 'json',*/ |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Complaints List */ |
|||
function get_user_info(){ |
|||
get_user_data().then(function(userProfile) { |
|||
// Handle the userProfile |
|||
$("#userProfile").html(userProfile); |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
if (error && error.message) { |
|||
console.error('Error fetching User Profile:', error.message); |
|||
} else { |
|||
console.error('An error occurred while fetching user profile:', error); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function getDailyContent_kural(){ |
|||
get_kural_data().then(function(data) { |
|||
var kural_html =``; |
|||
$.each(data, function(index, row) { |
|||
kural_html =`<table> |
|||
<tr> |
|||
<td class="text-center" width="20%"><img src="/gcc/files/app_uploads/icons/thiruvalluvar.jpeg" width="90%" class="rounded"></td> |
|||
<td> |
|||
<div class="mb-0" style="font-size:20px;">${row['Line1']}</div> |
|||
<div class="mb-0" style="font-size:20px;">${row['Line2']}</div> |
|||
<div class="mb-0 text-right">( குறள் எண் : ${row['Number']} ) | <a href="#" onclick="return openKural(${row['Number']});" class="link"> விளக்கம் </a></div> |
|||
</td> |
|||
</tr> |
|||
</table>`; |
|||
}); |
|||
$("#kural_dashboard").html(kural_html); |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
if (error && error.message) { |
|||
console.error('Error fetching Kural:', error.message); |
|||
} else { |
|||
console.error('An error occurred while fetching Kural:', error); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function get_kural_data(){ |
|||
var apiUrl = '/gcc/api/getDailyKural'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function openKural(number){ |
|||
//alert(number); |
|||
get_kural_data().then(function(data) { |
|||
var kural_html =``; |
|||
$.each(data, function(index, row) { |
|||
kural_html =`<table class="table bg-warning" style="color:#fff"> |
|||
<tr> |
|||
<td> |
|||
<div class="mb-0" style="font-size:18px;">குறள் எண் : ${row['Number']}</div> |
|||
</td> |
|||
<td> |
|||
<div class="mb-0" style="font-size:18px;">${row['Line1']}</div> |
|||
<div class="mb-0" style="font-size:18px;">${row['Line2']}</div> |
|||
</td> |
|||
<td> |
|||
<div class="mb-0" style="font-size:18px;">${row['transliteration1']}</div> |
|||
<div class="mb-0" style="font-size:18px;">${row['transliteration2']}</div> |
|||
</td> |
|||
</tr> |
|||
</table> |
|||
|
|||
<div class="row pt-10"> |
|||
<div class="col-md-6"> |
|||
<div class="card" style="min-height: 100px;margin-bottom: 10px;"> |
|||
<div class="card-header" style="background:#cdd6a0;padding:5px;"> |
|||
<h3>மு.வ விளக்கம்:</h3> |
|||
<div class="card-header-right"> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="card-body timeline" style="font-size:15px;"> |
|||
${row['mv']} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-md-6"> |
|||
<div class="card" style="min-height: 100px;margin-bottom: 10px;"> |
|||
<div class="card-header" style="background:#cdd6a0;padding:5px;"> |
|||
<h3>சாலமன் பாப்பையா விளக்கம்:</h3> |
|||
<div class="card-header-right"> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="card-body timeline" style="font-size:15px;"> |
|||
${row['sp']} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<div class="card" style="min-height: 100px;margin-bottom: 10px;"> |
|||
<div class="card-header" style="background:#cdd6a0;padding:5px;"> |
|||
<h3>கலைஞர் விளக்கம்:</h3> |
|||
<div class="card-header-right"> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="card-body timeline" style="font-size:15px;"> |
|||
${row['mk']} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-md-6"> |
|||
<div class="card" style="min-height: 100px;"> |
|||
<div class="card-header" style="background:#cdd6a0;padding:5px;"> |
|||
<h3>Explanation:</h3> |
|||
<div class="card-header-right"> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="card-body timeline" style="font-size:15px;"> |
|||
${row['explanation']} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
}); |
|||
$("#kuralBody").html(kural_html); |
|||
$("#kuralModal").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
if (error && error.message) { |
|||
console.error('Error fetching Kural:', error.message); |
|||
} else { |
|||
console.error('An error occurred while fetching Kural:', error); |
|||
} |
|||
}); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
$(document).ready(function() { |
|||
call_loading(); |
|||
//get_user_info(); |
|||
get_user_basic_info(); |
|||
getDailyContent_kural(); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,63 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<div class="auth-wrapper"> |
|||
<div class="container-fluid h-100"> |
|||
<div class="row flex-row h-100 bg-white"> |
|||
<div class="col-xl-8 col-lg-6 col-md-5 p-0 d-md-block d-lg-block d-sm-none d-none"> |
|||
<div class="lavalite-bg" style="background-image: url('images/login-bg.jpg')"> |
|||
<div class="lavalite-overlay"></div> |
|||
</div> |
|||
</div> |
|||
<div class="col-xl-4 col-lg-6 col-md-7 my-auto p-0"> |
|||
<div class="authentication-form mx-auto text-center"> |
|||
<div class="logo-centered"> |
|||
<a href="/gcc"><img src="images/logo.png" alt="Greater Chennai Corporation" class="header-brand-img" width="100%"></a> |
|||
</div> |
|||
<h3>Greater Chennai Corporation</h3> |
|||
<p>Happy to see you again!</p> |
|||
<div th:if="${param.error}"> |
|||
<p style="color: red;">Invalid credentials.</p> |
|||
</div> |
|||
<form th:action="@{/gcc/login}" method="post"> |
|||
<div class="form-group"> |
|||
<input type="text" class="form-control" id="username" name="username" placeholder="Username" required="" value=""> |
|||
<i class="ik ik-user"></i> |
|||
</div> |
|||
<div class="form-group"> |
|||
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required="" value=""> |
|||
<i class="ik ik-lock"></i> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col text-left"> |
|||
<label class="custom-control custom-checkbox"> |
|||
<input type="checkbox" class="custom-control-input" id="item_checkbox" name="item_checkbox" value="option1"> |
|||
<span class="custom-control-label"> Remember Me</span> |
|||
</label> |
|||
</div> |
|||
<div class="col text-right"> |
|||
<a href="#">Forgot Password ?</a> |
|||
</div> |
|||
</div> |
|||
<div class="sign-btn text-center"> |
|||
<button class="btn btn-theme">Sign In</button> |
|||
</div> |
|||
</form> |
|||
<div class="register"> |
|||
<p>Don't have an account? <a href="#">Create an account</a></p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
</body> |
|||
</html> |
|||
@ -1,92 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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-bar-chart-2 bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>User List</h5> |
|||
<span>GCC Application Admin (Configuration Page)</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 active" aria-current="page">Admin</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h3>Page Title</h3> |
|||
</div> |
|||
<div class="card-body"> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h3>Datatable Test</h3> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="col-sm-12"><table id="example" class="table table-striped table-bordered table-hover nowrap dataTable" role="grid" aria-describedby="simpletable_info"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="simpletable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 178.258px;">Name</th><th class="sorting" tabindex="0" aria-controls="simpletable" rowspan="1" colspan="1" aria-label="Position: activate to sort column ascending" style="width: 268.727px;">Position</th><th class="sorting" tabindex="0" aria-controls="simpletable" rowspan="1" colspan="1" aria-label="Office: activate to sort column ascending" style="width: 129.852px;">Office</th><th class="sorting" tabindex="0" aria-controls="simpletable" rowspan="1" colspan="1" aria-label="Age: activate to sort column ascending" style="width: 72.1875px;">Age</th><th class="sorting" tabindex="0" aria-controls="simpletable" rowspan="1" colspan="1" aria-label="Start date: activate to sort column ascending" style="width: 135.57px;">Start date</th><th class="sorting" tabindex="0" aria-controls="simpletable" rowspan="1" colspan="1" aria-label="Salary: activate to sort column ascending" style="width: 96.4062px;">Salary</th></tr> |
|||
</theadclass="thead-dark"> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
<tfoot class="thead-dark"> |
|||
<tr><th rowspan="1" colspan="1">Name</th><th rowspan="1" colspan="1">Position</th><th rowspan="1" colspan="1">Office</th><th rowspan="1" colspan="1">Age</th><th rowspan="1" colspan="1">Start date</th><th rowspan="1" colspan="1">Salary</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> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,272 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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="fa fa-id-badge bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>User Group Access</h5> |
|||
<span>GCC Application Configuration</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" aria-current="page">Admin</li> |
|||
<li class="breadcrumb-item active" aria-current="page">User Group Access</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<p></p> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
|
|||
<div class="row"> |
|||
<div class="col-md-12"></div> |
|||
<div class="input-group col-md-12 mb-0"> |
|||
|
|||
<label for="search_groupid" class="pt-2"> User Group: </label> |
|||
|
|||
<select class="form-control select2" id="search_groupid" name="search_groupid"> |
|||
<option value="">Please choose a User Group Name to retrieve data.</option> |
|||
<option th:each="userGroup: ${userGroupList}" th:value="${userGroup.id}" th:text="${userGroup.name}">-</option> |
|||
</select> |
|||
<span class="input-group-append"> |
|||
<button type="button" id="groupSearchbtn" class="btn btn-success" onclick="showAccessTree();" data-toggle="tooltip" data-animation="true" data-placement="top" data-original-title="Search" title=""> |
|||
<i class="ik ik-search me-1"></i> Search |
|||
</button> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="col-sm-12"> |
|||
<div id="loadaccesstree"></div> |
|||
<!-- <div th:utext="${accessHTML}"></div> --> |
|||
</div> |
|||
</div> |
|||
<div class="card-footer"> |
|||
<div class="col-sm-12 text-right"> |
|||
<button type="reset" class="btn btn-secondary btn-sm" data-dismiss="modal" onclick="return closeModel();"><i class="ik ik-x-square"></i>Close</button> |
|||
<button type="submit" class="btn btn-success btn-sm" id="savebtn" onclick="return getCheckedData()"><i class="ik ik-save"></i>Save</button> |
|||
</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> |
|||
(function($){ |
|||
$.fn.extend({ |
|||
// Tree Check By Paranet (Check All) |
|||
checktree: function(){ |
|||
$(this) |
|||
.addClass('checktree-root') |
|||
.on('change', 'input[type="checkbox"]', function(e){ |
|||
e.stopPropagation(); |
|||
e.preventDefault(); |
|||
|
|||
checkParents($(this)); |
|||
checkChildren($(this)); |
|||
}) |
|||
; |
|||
|
|||
var checkParents = function (c) |
|||
{ |
|||
var parentLi = c.parents('ul:eq(0)').parents('li:eq(0)'); |
|||
|
|||
if (parentLi.length) |
|||
{ |
|||
var siblingsChecked = parseInt($('input[type="checkbox"]:checked', c.parents('ul:eq(0)')).length), |
|||
rootCheckbox = parentLi.find('input[type="checkbox"]:eq(0)') |
|||
; |
|||
|
|||
if (c.is(':checked')) |
|||
rootCheckbox.prop('checked', true) |
|||
else if (siblingsChecked === 0) |
|||
rootCheckbox.prop('checked', false); |
|||
|
|||
checkParents(rootCheckbox); |
|||
} |
|||
} |
|||
|
|||
var checkChildren = function (c) |
|||
{ |
|||
var childLi = $('ul li input[type="checkbox"]', c.parents('li:eq(0)')); |
|||
|
|||
if (childLi.length) |
|||
childLi.prop('checked', c.is(':checked')); |
|||
} |
|||
} |
|||
|
|||
}); |
|||
})(jQuery); |
|||
|
|||
callMenuTreeAccess = function(groupId,groupName){ |
|||
|
|||
const loadaccesstree = $("#loadaccesstree"); |
|||
const searchBtn = $("#groupSearchbtn"); |
|||
const savebtn = $("#savebtn"); |
|||
const apiUrl = "/gcc/api/getAccessTree?groupId="+groupId+"&groupName="+groupName; |
|||
|
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'text', |
|||
success: function(Response) { |
|||
// Handle the API response data here |
|||
//console.log('Data from API:', Response); |
|||
|
|||
// Parse the JSON response into a JavaScript object |
|||
var data = Response; |
|||
if(data.ResultStatus=="False") |
|||
{ |
|||
loadaccesstree.html("<center>"+nodata(data.Message)+"</center>"); |
|||
searchBtn.prop("disabled", false); |
|||
searchBtn.html('<i class="ik ik-search me-1"></i> Search'); |
|||
} |
|||
else{ |
|||
|
|||
loadaccesstree.html(data); |
|||
$('#tree').checktree(); |
|||
// Enable the button |
|||
searchBtn.prop("disabled", false); |
|||
searchBtn.html('<i class="ik ik-search me-1"></i> Search'); |
|||
savebtn.prop("disabled", false); |
|||
} |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Handle errors here |
|||
console.error('Error fetching data:', xhr.status, error); |
|||
if (xhr.status == 404) { |
|||
// Handle 404 error specifically |
|||
loadaccesstree.html(nodata("<b>Unable to fetch data. Please try again later.<br>Error 404: Resource not found. Please check the URL.</b>")); |
|||
} else { |
|||
// Handle other errors |
|||
loadaccesstree.html(nodata("<b>Error: Unable to fetch data. Please try again later.</b>")); |
|||
} |
|||
// Enable the button |
|||
searchBtn.prop("disabled", false); |
|||
searchBtn.html('<i class="ik ik-search me-1"></i> Search'); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// Load Access Tree |
|||
showAccessTree = function(){ |
|||
|
|||
const loadaccesstree = $("#loadaccesstree"); |
|||
const selectedGroup = $('#search_groupid'); |
|||
const selectedGroupId = selectedGroup.val(); |
|||
const selectedGroupName = selectedGroup.find('option:selected').text(); |
|||
const searchBtn = $("#groupSearchbtn"); |
|||
const savebtn = $("#savebtn"); |
|||
|
|||
call_loading('loadaccesstree','start'); |
|||
savebtn.prop("disabled", true); // Stop Save button |
|||
|
|||
if(selectedGroupId>0){ |
|||
// Disable the button to prevent multiple clicks |
|||
searchBtn.prop("disabled", true); |
|||
// Show the loading icon on the button |
|||
searchBtn.html('<i class="fas fa-spinner fa-spin"></i>'); |
|||
|
|||
callMenuTreeAccess(selectedGroupId,selectedGroupName); |
|||
} |
|||
else{ |
|||
loadaccesstree.html(searchinfo("<b>Please select and search for a User Group to continue.</b>")); |
|||
} |
|||
} |
|||
showAccessTree(); |
|||
|
|||
|
|||
var getCheckedData = function() { |
|||
var checkedData = []; |
|||
$('input[type="checkbox"]:checked', "#tree").each(function() { |
|||
checkedData.push($(this).val()); |
|||
}); |
|||
|
|||
|
|||
// Push Group ID |
|||
const selectedGroup = $('#search_groupid'); |
|||
const selectedGroupId = selectedGroup.val();; |
|||
|
|||
console.log(checkedData); |
|||
|
|||
submitCheckedData(checkedData,selectedGroupId); |
|||
|
|||
return false;//checkedData; |
|||
}; |
|||
|
|||
var submitCheckedData = function(checkedData, groupId) { |
|||
// Perform your AJAX request here using checkedData |
|||
// Replace the URL and other options with your actual API endpoint and data |
|||
const apiUrl = "/gcc/api/saveGroupAccessData"; |
|||
|
|||
const selectedGroup = $('#search_groupid'); |
|||
const selectedGroupName = selectedGroup.find('option:selected').text(); |
|||
|
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'POST', |
|||
contentType: 'application/json', |
|||
data: JSON.stringify({ checkedData: checkedData, groupId: groupId }), |
|||
success: function(response) { |
|||
// Handle the success response |
|||
console.log('API response:', response); |
|||
Swal.fire( |
|||
'User Group Access!', |
|||
'Access has been successfully mapped to the User Group (' + selectedGroupName + ')!', |
|||
'success' |
|||
).then(() => { |
|||
location.reload(); |
|||
}); |
|||
}, |
|||
error: function(error) { |
|||
// Handle the error response |
|||
console.error('API error:', error); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,183 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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-6"> |
|||
<div class="page-header-title"> |
|||
<i class="fa fa-users bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>User Group List</h5> |
|||
<span>GCC Application Configuration</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-6"> |
|||
<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">Admin </li> |
|||
<li class="breadcrumb-item active" aria-current="page">User Group List</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<hr> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
|
|||
<div class="card-block"> |
|||
|
|||
<div> |
|||
<table id="assetDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%"> |
|||
<thead class="thead-dark"> |
|||
<tr class="table-bordered"> |
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Petition No.</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile</th> |
|||
<th class="text-center">Address</th> |
|||
<th class="text-center">Postal code</th> |
|||
<th class="text-center">Type of complaint</th> |
|||
<th class="text-center" width="10%">Status</th> |
|||
<th class="text-center" width="10%">Action</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr th:each="petition, i : ${petitionlist}" class="${petitionlist}"> |
|||
<td th:utext="${i.count}">0</td> |
|||
<td th:utext="${petition.petitionNumber}"></td> |
|||
<td th:utext="${petition.petitionerName}" class="text-center"></td> |
|||
<td th:text="${petition.petitionerMobile}"></td> |
|||
<td th:utext="${petition.petitionerAddress}"></td> |
|||
<td th:utext="${petition.petitionerPincode}"></td> |
|||
<td th:text="${petition.PetitionerComplaint_txt}"></td> |
|||
<td style="text-transform: capitalize;" class="text-center"><a href="#" th:onclick="return call_view_petition([[${petition.petitionNumber}]]);" th:utext="${petition.status}" class="text-warning"></a></td> |
|||
<td class="text-center"> |
|||
<a th:href="@{#}" th:onclick="return callViewFiles( [[${petition.petitionId}]],[[${petition.petitionNumber}]] );" data-toggle="tooltip" data-animation="true" data-placement="top" title="View Files" data-original-title="View Files"><i class="ik ik-file-text text-green" style="font-size: 18px;"></i></a> |
|||
<a th:href="@{/petition-ack/{petitionNumber}(petitionNumber=${petition.petitionNumber})}" |
|||
data-toggle="tooltip" data-animation="true" data-placement="top" title="View ACK" data-original-title="View ACK"> |
|||
<i class="far fa-thumbs-up" style="font-size: 18px;"></i> |
|||
</a> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot class="thead-dark"> |
|||
<tr> |
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Petition No.</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile</th> |
|||
<th class="text-center">Address</th> |
|||
<th class="text-center">Postal code</th> |
|||
<th class="text-center">Type of complaint</th> |
|||
<th class="text-center" width="10%">Status</th> |
|||
<th class="text-center" width="10%">Action</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/mtm/modal-box :: div}"></div> |
|||
|
|||
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script th:replace="~{fragments/modules/mtm/script :: script}"></script> |
|||
<script th:inline="javascript"> |
|||
//var qrAssetFeedbackApiUrl = "[[${qrAssetFeedbackApiUrl}]]"; |
|||
|
|||
$(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', |
|||
title: 'Petition List' |
|||
}, |
|||
{ |
|||
extend: 'csvHtml5', |
|||
text: 'CSV', |
|||
className: 'btn btn-secondary', |
|||
id: 'csvBtn', |
|||
title: 'Petition List' |
|||
}, |
|||
{ |
|||
extend: 'pdfHtml5', |
|||
text: 'PDF', |
|||
className: 'btn btn-secondary', |
|||
id: 'pdfBtn', |
|||
title: 'Petition List' |
|||
} |
|||
]; |
|||
|
|||
$('#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], |
|||
responsive: true, |
|||
searching: false, |
|||
select: false, |
|||
processing: false, |
|||
} ); |
|||
} ); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,226 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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-6"> |
|||
<div class="page-header-title"> |
|||
<i class="fa fa-user bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>User List</h5> |
|||
<span>GCC Application Configuration</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-6"> |
|||
<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">Admin</li> |
|||
<li class="breadcrumb-item active" aria-current="page">User List</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<hr> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
|
|||
<div class="card-block"> |
|||
|
|||
<div> |
|||
<table id="assetDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%"> |
|||
<thead class="thead-dark"> |
|||
<tr class="table-bordered"> |
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">E-mail</th> |
|||
<th class="text-center">Mobile</th> |
|||
<th class="text-center">Username</th> |
|||
<th class="text-center">Role</th> |
|||
<th class="text-center">Access Group</th> |
|||
<th class="text-center" width="10%">Status</th> |
|||
<th class="text-center" width="10%">Action</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr th:each="userlistData, i : ${userlist}" class="${userlist}"> |
|||
<td th:utext="${i.count}">0</td> |
|||
<td th:utext="${userlistData.userid.name}"></td> |
|||
<td th:utext="${userlistData.userid.email}"></td> |
|||
<td th:utext="${userlistData.userid.phone}"></td> |
|||
<td th:text="${userlistData.username}"></td> |
|||
<td th:utext="${userlistData.roles}" class="text-center"></td> |
|||
<td th:text="${userlistData.usergroup_id.name}"></td> |
|||
<td style="text-transform: capitalize;" th:utext="${userlistData.isActive} ? 'Active' : 'Inactive'" th:class="${userlistData.isActive} ? 'text-center text-green' : 'text-center text-red'"></td> |
|||
<td class="text-center"> |
|||
<a th:href="@{#}" th:onclick="return callUserDetails([[${userlistData.id}]]);" data-toggle="tooltip" data-animation="true" data-placement="top" title="View User Details" data-original-title="View User Details"><i class="ik ik-file-text text-green" style="font-size: 18px;"></i></a> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
<tfoot class="thead-dark"> |
|||
<tr class="table-bordered"> |
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">E-mail</th> |
|||
<th class="text-center">Mobile</th> |
|||
<th class="text-center">Username</th> |
|||
<th class="text-center">Role</th> |
|||
<th class="text-center">Access Group</th> |
|||
<th class="text-center" width="10%">Status</th> |
|||
<th class="text-center" width="10%">Action</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/admin/modal-box :: div}"></div> |
|||
|
|||
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script th:inline="javascript"> |
|||
//var qrAssetFeedbackApiUrl = "[[${qrAssetFeedbackApiUrl}]]"; |
|||
|
|||
$(document).ready(function() { |
|||
var exportTitle = "GCC Application User List"; |
|||
// 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', |
|||
title: exportTitle |
|||
}, |
|||
{ |
|||
extend: 'csvHtml5', |
|||
text: 'CSV', |
|||
className: 'btn btn-secondary', |
|||
id: 'csvBtn', |
|||
title: exportTitle |
|||
}, |
|||
{ |
|||
extend: 'pdfHtml5', |
|||
text: 'PDF', |
|||
className: 'btn btn-secondary', |
|||
id: 'pdfBtn', |
|||
title: exportTitle |
|||
} |
|||
]; |
|||
|
|||
$('#assetDatatable').DataTable( { |
|||
/* Disable initial sort */ |
|||
aaSorting: [], |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
dom: 'Bftip', |
|||
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], |
|||
responsive: true, |
|||
searching: false, |
|||
select: false, |
|||
processing: false, |
|||
} ); |
|||
} ); |
|||
|
|||
|
|||
// For view user details |
|||
function callUserDetails(userid){ |
|||
$("#profilehtml").html(searchinfo("<b>Retrieving Information, Please Wait...<div id=\"loadingimg\"></div></b>")); |
|||
call_loading("loadingimg","start"); |
|||
|
|||
$('#viewUserDetails').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}) |
|||
$('#viewUserDetails').modal('show'); |
|||
|
|||
var userProfileHtml = ""; |
|||
|
|||
getUserDetails(userid).then(response => { |
|||
// Handle the success response |
|||
$("#profilehtml").html(response); |
|||
}) |
|||
.catch(error => { |
|||
// Handle the error response |
|||
$("#profilehtml").html(error); |
|||
}); |
|||
|
|||
} |
|||
|
|||
function getUserDetails(userid){ |
|||
const apiUrl = "/gcc/api/getUserProfile"; |
|||
return new Promise((resolve, reject) => { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'text', |
|||
data: { userId: userid}, |
|||
success: function(response) { |
|||
// Handle the success response |
|||
resolve(response); |
|||
}, |
|||
error: function(error) { |
|||
// Handle the error response |
|||
console.error('API error:', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
</script> |
|||
</body> |
|||
</html> |
|||
3007
src/main/resources/templates/modules/bulkwaste/requestdetails.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,789 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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-6"> |
|||
<div class="page-header-title"> |
|||
<i class="far fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Complaint List</h5> |
|||
<span>Councillor Petition</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-6"> |
|||
<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" aria-current="page">Councillor Petition</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Complaint List</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<hr> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
|
|||
<div class="card-block"> |
|||
<div id="tableLoading"></div> |
|||
<div> |
|||
<table id="complaintDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%"> |
|||
<thead class="thead-dark"> |
|||
<tr class="table-bordered"> |
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Petition No.</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile</th> |
|||
<th class="text-center"> Address </th> |
|||
<th class="text-center">Postal Code</th> |
|||
<th class="text-center">Type of Complaint</th> |
|||
<th class="text-center">Date</th> |
|||
<th class="text-center">Status</th> |
|||
<th class="text-center">Department Officer</th> |
|||
<th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
<tfoot class="thead-dark"> |
|||
<tr> |
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Petition No.</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile</th> |
|||
<th class="text-center">Address</th> |
|||
<th class="text-center">Postal Code</th> |
|||
<th class="text-center">Type of Complaint</th> |
|||
<th class="text-center">Date</th> |
|||
<th class="text-center">Status</th> |
|||
<th class="text-center">Department Officer</th> |
|||
<th class="text-center no-sort no-exportable no-print"><i class="ik ik-more-horizontal"></i></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/c_petition/modal-box :: div}"></div> |
|||
|
|||
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script th:replace="~{fragments/modules/c_petition/script :: script}"></script> |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script |
|||
var officerMasterList = ""; |
|||
|
|||
// Loading Div id |
|||
const loading = $("#tableLoading"); |
|||
|
|||
// 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', |
|||
title: 'Petition List' |
|||
}, |
|||
{ |
|||
extend: 'csvHtml5', |
|||
text: 'CSV', |
|||
className: 'btn btn-secondary', |
|||
id: 'csvBtn', |
|||
title: 'Petition List' |
|||
}, |
|||
{ |
|||
extend: 'pdfHtml5', |
|||
text: 'PDF', |
|||
className: 'btn btn-secondary', |
|||
id: 'pdfBtn', |
|||
title: 'Petition List' |
|||
}, |
|||
{ |
|||
extend: 'print', |
|||
text: 'Print', |
|||
className: 'btn btn-secondary', |
|||
id: 'printBtn', |
|||
title: 'Petition List', |
|||
exportOptions: { |
|||
columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view |
|||
} |
|||
}, |
|||
{ |
|||
extend: 'colvis', |
|||
className: 'btn btn-warning' |
|||
}, |
|||
]; |
|||
|
|||
|
|||
function call_loading(){ |
|||
loading.html(searchinfo("<b>"+loading_text_msg+"</b>")); |
|||
} |
|||
|
|||
function remove_loading(){ |
|||
loading.html(""); |
|||
} |
|||
|
|||
|
|||
/* Get Complaints Data */ |
|||
function get_complaint_data(){ |
|||
var apiUrl = '/gcc/api/c_petition/getComplaintList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Officer Master Data */ |
|||
function get_officer_master_data(){ |
|||
|
|||
get_officer_list().then(function(officers) { |
|||
// Handle the officer list |
|||
officerMasterList = officers; |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching offcier master data:', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Complaints List */ |
|||
function get_complaint_list(){ |
|||
get_complaint_data().then(function(complaintList) { |
|||
// Handle the complaint list |
|||
generate_table(complaintList); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
if (error && error.message) { |
|||
console.error('Error fetching complaint list:', error.message); |
|||
} else { |
|||
console.error('An error occurred while fetching complaint list:', error); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function viewPetitionSummary(petitionNo){ |
|||
$("#viewpetition").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
|
|||
var url = '/gcc/c_petition/view-petition-modal?petitionNo='+petitionNo; |
|||
$.ajax({ |
|||
url: url, |
|||
type: 'GET', |
|||
dataType: 'html', |
|||
success: function(data) { |
|||
$('#viewPetitionBoxBody').html(data); // Inject content into modal body |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
console.error("Error loading URL:", error); |
|||
// Handle error, display a message, etc. |
|||
} |
|||
}); |
|||
|
|||
return false; |
|||
} |
|||
|
|||
function updateStatus(mapId){ |
|||
$("#ComplaintStatusBox").modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); // Show Modal Box |
|||
|
|||
callComplaintDetails(mapId); |
|||
return false; |
|||
} |
|||
|
|||
function callComplaintDetails(mapId){ |
|||
loading_text_msg = getLoadingMessage(); // get Loading random text |
|||
var loading=searchinfo("<b>"+loading_text_msg+"</b>"); |
|||
var complaintContentHTML=` |
|||
<div class="row"> |
|||
<div class="col-lg-6"> |
|||
<div class="block block-rounded"> |
|||
|
|||
<div id="leftContainer">${loading}</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-6 printack2"> |
|||
<div class="block block-rounded"> |
|||
|
|||
<div id="rightContainer">${loading}</div> |
|||
|
|||
</div> |
|||
</div> |
|||
<!--<div class="col-lg-12 text-center block-options pt-10"> |
|||
<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button> |
|||
</div>--> |
|||
</div>`; |
|||
|
|||
$('#ComplaintStatusBoxBody').html(complaintContentHTML); // Box content (Body) |
|||
|
|||
getComplaintData(mapId); |
|||
} |
|||
|
|||
function getComplaintData(mapId){ |
|||
get_complaint_details_byId(mapId).then(function(complaintDetails) { |
|||
|
|||
var complaintStatus = complaintDetails[0].status; |
|||
|
|||
var statusBadge = complaintStatus.charAt(0).toUpperCase() + complaintStatus.slice(1); |
|||
var refRibben = `<div class="card-header-right" style="top:auto;"> |
|||
Ref ID: ${mapId} |
|||
</div>`; |
|||
var statusRibben = ""; |
|||
if(complaintStatus=='pending'){ |
|||
statusRibben = `<div class="ribbon"> |
|||
<div class="wrap"> |
|||
<span class="ribbon6 bg-danger"><div styel="color:#fff;">${statusBadge}</div></span> |
|||
</div> |
|||
</div>`; |
|||
statusRibben = ""; |
|||
statusBadge = `<span class="badge badge-danger" style="font-size:10px;padding:0.25em 0.4em;">${statusBadge}</span>`; |
|||
|
|||
} |
|||
else if(complaintStatus=='close'){ |
|||
statusBadge = `<span class="badge badge-success" style="font-size:10px;padding:0.25em 0.4em;">${statusBadge}</span>`; |
|||
} |
|||
var complaintRightBody = ""; |
|||
|
|||
var fileType_c = complaintDetails[0].file_type; |
|||
fileType_c = fileType_c.split("/").pop(); |
|||
var filetypeico_c = "file-lines"; |
|||
if(fileType_c=='pdf'){ |
|||
filetypeico_c = "file-pdf"; |
|||
} |
|||
else{ |
|||
filetypeico_c = "file-image"; |
|||
} |
|||
|
|||
var complaintLeftBody = `<div class="card mb-0"> |
|||
<div class="card-header" style="color: #004085;background-color: #e7eff7;"> |
|||
<h3>Complaint Details</h3> |
|||
${statusRibben} |
|||
</div> |
|||
<div class="card-body"> |
|||
<table class="table table-borderless table-vcenter mb-0" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${convertdate(complaintDetails[0].cdate)} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintDetails[0].petition_no} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintDetails[0].petitioner_name} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintDetails[0].petitioner_mobile} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th colspan="2" style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:<br><p class="fw-semibold mb-0" style="font-weight:normal;">${complaintDetails[0].complaint_nature}</p></th> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="2" style="padding: 0.45rem 0.45rem;"> |
|||
<div class="like-comm mt-20 mb-0"> |
|||
<b>ஆவணப் பதிவேற்றம் / Document Upload:</b><br> |
|||
|
|||
<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>File Name</th> |
|||
<th>Size</th> |
|||
<th>Type</th> |
|||
<th><i class="ik ik-more-horizontal"></i></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="fw-semibold">1</td> |
|||
<td class="fw-semibold">${complaintDetails[0].file_name}</td> |
|||
<td class="fw-semibold">${formatFileSize(complaintDetails[0].file_size)}</td> |
|||
<td class="fw-semibold">${fileType_c}</td> |
|||
<td class="fw-semibold"> |
|||
<a href="javascript:void(0)" class="link mr-10" onclick="downloadFile('petition','${complaintDetails[0].file_name}','${complaintDetails[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Download File"><i class="fa fa-fw fa-download" style="font-size: 18px;"></i></a> |
|||
<a href="javascript:void(0)" class="link mr-10" onclick="viewFile('petition','${complaintDetails[0].file_name}','${complaintDetails[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View File"><i class="far fa-3x fa-${filetypeico_c}" style="font-size: 18px;"></i></a> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>Complaint <i class="fa fa-arrow-right"></i> Status</th> |
|||
<th class="text-right" id="complaint_forward_link"><a href="javascript:void(0);" onclick="return forward_compliant(${complaintDetails[0].mapid}, '${complaintDetails[0].complaint_type}');" class="link" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Click here to forward this complaint to another department officer."><i class="far fa-share-square"></i> Click to forward </a></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td colspan="2" class="fw-semibold"> |
|||
${complaintDetails[0].complaint_type} <i class="fa fa-arrow-right"></i> ${statusBadge} <i class="fa fa-arrow-right"></i> ${complaintDetails[0].off_nm} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div>`; |
|||
|
|||
$('#leftContainer').html(complaintLeftBody); |
|||
|
|||
if(complaintStatus!='close'){ |
|||
complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data"> |
|||
<div class="card mb-0"> |
|||
<div class="card-header" style="color: #004085;background-color: #e7eff7;"> |
|||
<h3>Complaint Update Details</h3> |
|||
${refRibben} |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="form-group"> |
|||
<label for="complaintActionText">நடவடிக்கை / Action:</label> |
|||
<textarea class="form-control" id="complaintActionText" name="complaintActionText" rows="6" maxlength="250" placeholder="புகாரின் தன்மை..." required></textarea> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="action_san_page1">ஆவணப் பதிவேற்றம் / Document Upload:</label> |
|||
<input name="action_san_page1" id="action_san_page1" class="form-control" type="file" capture="camera" accept="application/pdf, image/*" required> |
|||
</div> |
|||
<div class="form-group mb-0 text-center"> |
|||
<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveandclose(${mapId},${complaintDetails[0].petition_id},'${complaintDetails[0].petition_no}');" id="updatebtn"><i class="ik ik-save"></i> Save and Close </button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</form>`; |
|||
$('#rightContainer').html(complaintRightBody); |
|||
} |
|||
else{ |
|||
// first remove forward link |
|||
$("#complaint_forward_link").html(""); |
|||
|
|||
get_complaint_action_byId(mapId).then(function(complaintAction) { |
|||
var fileType = complaintAction[0].file_type; |
|||
fileType = fileType.split("/").pop(); |
|||
var filetypeico = "file-lines"; |
|||
if(fileType=='pdf'){ |
|||
filetypeico = "file-pdf"; |
|||
} |
|||
else{ |
|||
filetypeico = "file-image"; |
|||
} |
|||
|
|||
complaintRightBody =`<form class="action-form" id="action-form" onsubmit="return saveandclose();" enctype="multipart/form-data"> |
|||
<div class="card mb-0"> |
|||
<div class="card-header" style="color: #004085;background-color: #e7eff7;"> |
|||
<h3>Complaint Update Details</h3> |
|||
${refRibben} |
|||
</div> |
|||
<div class="card-body"> |
|||
<div> |
|||
<b>நடவடிக்கை தேதி / Action Date:</b> ${convertdate(complaintAction[0].cdate)} |
|||
<hr> |
|||
<b>நடவடிக்கை / Action:</b><br> |
|||
<p class="mt-10">${complaintAction[0].comments}</p> |
|||
</div> |
|||
<hr> |
|||
<div class="like-comm mt-20 mb-0"> |
|||
<b>ஆவணப் பதிவேற்றம் / Document Upload:</b><br> |
|||
|
|||
<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th>S.no</th> |
|||
<th>File Name</th> |
|||
<th>Size</th> |
|||
<th>Type</th> |
|||
<th><i class="ik ik-more-horizontal"></i></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="fw-semibold">1</td> |
|||
<td class="fw-semibold">${complaintAction[0].file_name}</td> |
|||
<td class="fw-semibold">${formatFileSize(complaintAction[0].file_size)}</td> |
|||
<td class="fw-semibold">${fileType}</td> |
|||
<td class="fw-semibold"> |
|||
<a href="javascript:void(0)" class="link mr-10" onclick="downloadFile('action','${complaintAction[0].file_name}','${complaintAction[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Download File"><i class="fa fa-fw fa-download" style="font-size: 18px;"></i></a> |
|||
<a href="javascript:void(0)" class="link mr-10" onclick="viewFile('action','${complaintAction[0].file_name}','${complaintAction[0].file_type}');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View File"><i class="far fa-3x fa-${filetypeico}" style="font-size: 18px;"></i></a> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</form>`; |
|||
$('#rightContainer').html(complaintRightBody); |
|||
// Enable tooltips for all elements with data-toggle="tooltip" |
|||
$('[data-toggle="tooltip"]').tooltip(); |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching action details ('+mapId+'):', error); |
|||
}); |
|||
|
|||
} |
|||
// Enable tooltips for all elements with data-toggle="tooltip" |
|||
$('[data-toggle="tooltip"]').tooltip(); |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching Complaint details ('+mapId+'):', error); |
|||
}); |
|||
|
|||
} |
|||
|
|||
/* Call DataTable function */ |
|||
function generate_table(data){ |
|||
|
|||
var table = $('#complaintDatatable').DataTable( { |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', "orderable": false }, |
|||
{ targets: 'no-exportable', "exportable": false } |
|||
], |
|||
lengthMenu: [ |
|||
[ 50, 100, 200, 500, -1 ], |
|||
[ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ] |
|||
], |
|||
/*scrollY: '50vh',*/ |
|||
fixedColumns: { |
|||
left: 0, |
|||
right: 0 |
|||
}, |
|||
buttons: [buttons], |
|||
responsive: true, |
|||
searching: false, |
|||
select: false, |
|||
processing: false, |
|||
} ); |
|||
|
|||
// Clearn Table data |
|||
table.clear().draw(); |
|||
|
|||
// Add rows to DataTable |
|||
var rowNum = 1; |
|||
$.each(data, function(index, row) { |
|||
var complaint_status=row["status"]; |
|||
complaint_status=complaint_status.charAt(0).toUpperCase() + complaint_status.slice(1); |
|||
|
|||
actionHTML = `<div class="dropdown d-inline-block show"> |
|||
<!--<a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a> |
|||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end"> |
|||
Action for: `+row['petition_no']+` |
|||
<a class="dropdown-item" href="" onclick="return viewAck('`+row['petition_no']+`');" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View Acknowledgement"><i class="ik ik-eye"></i> Acknowledgement</a> |
|||
<a class="dropdown-item" href="/gcc/c_petition/petition-ack/`+row['petition_no']+`" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print Acknowledgement"><i class="ik ik-printer"></i> Acknowledgement</a> |
|||
</div>--> |
|||
</div>` |
|||
table.row.add([ |
|||
rowNum++, |
|||
'<a href="#" onclick="return viewPetitionSummary(\''+row['petitionNoEncode']+'\');">'+row['petition_no']+'</a>', |
|||
row['petitioner_name'], |
|||
row['petitioner_mobile'], |
|||
row['petitioner_address'], |
|||
row['petitioner_pincode'], |
|||
row['complaint_type'], |
|||
convertdate(row['cdate']), |
|||
'<a href="#" onclick="return updateStatus('+row['mapid']+');" style="text-transform: capitalize;"">'+complaint_status+'</a>', |
|||
row['off_nm'], |
|||
actionHTML |
|||
]).draw(false); |
|||
}); |
|||
|
|||
// Enable tooltips for all elements with data-toggle="tooltip" |
|||
$('[data-toggle="tooltip"]').tooltip(); |
|||
remove_loading(); // remove Loading |
|||
onSearchComplete(); |
|||
} |
|||
|
|||
// Save New Action |
|||
function saveandclose(mapId,petitionId,petitionNo){ |
|||
// Disable the button to prevent multiple clicks |
|||
form_btn_disable(); |
|||
|
|||
var comments = $('#complaintActionText'); |
|||
var textLength = comments.val().length; |
|||
comments.removeClass('is-invalid'); |
|||
|
|||
var fileInput = $("#action_san_page1"); |
|||
fileInput.removeClass('is-invalid'); |
|||
var selectedFile = fileInput.val(); |
|||
|
|||
if (textLength>=10 && selectedFile) { |
|||
|
|||
// Serialize form data |
|||
var formData = new FormData($('#action-form')[0]); |
|||
formData.append('createdBy',createdBy); |
|||
formData.append('mapId',mapId); |
|||
formData.append('petitionId',petitionId); |
|||
formData.append('petitionNo',petitionNo); |
|||
formData.append('complaintStatus','close'); |
|||
|
|||
saveActionFormData(formData).then(function(response) { |
|||
if(response!="error"){ |
|||
// Handle the response |
|||
Swal.fire({ |
|||
title: 'Complaint action saved successfully.', |
|||
customClass: { |
|||
title: 'swal-title-custom' // Add a custom class for the title |
|||
}, |
|||
//text: "Error", |
|||
icon: 'success', |
|||
showCancelButton: false, |
|||
confirmButtonColor: '#3085d6', |
|||
cancelButtonColor: '#d33', |
|||
confirmButtonText: 'Ok', |
|||
}).then(function(result) { |
|||
if (result.isConfirmed) { |
|||
$("#ComplaintStatusBox").modal('hide'); |
|||
} |
|||
}); |
|||
} |
|||
else{ |
|||
// Handle the response |
|||
// if response == "error" |
|||
Swal.fire({ |
|||
title: 'Failed to save complaint action. Please try again!', |
|||
customClass: { |
|||
title: 'swal-title-custom' // Add a custom class for the title |
|||
}, |
|||
//text: "Error", |
|||
icon: 'error', |
|||
showCancelButton: false, |
|||
confirmButtonColor: '#3085d6', |
|||
cancelButtonColor: '#d33', |
|||
confirmButtonText: 'Ok', |
|||
}).then(function(result) { |
|||
if (result.isConfirmed) { |
|||
form_btn_enable(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error on save petition:', error.message); |
|||
form_btn_enable(); |
|||
}); |
|||
} |
|||
else{ |
|||
if(textLength<10){ |
|||
comments.addClass('is-invalid'); |
|||
} |
|||
|
|||
if (!selectedFile) { |
|||
fileInput.addClass('is-invalid'); |
|||
} |
|||
form_btn_enable(); |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
function saveActionFormData(formData){ |
|||
var apiUrl = '/gcc/api/c_petition/saveComplanitStatus'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'POST', |
|||
data: formData, |
|||
processData: false, |
|||
contentType: false, |
|||
success: function(response) { |
|||
console.log(response); |
|||
// Handle success response |
|||
resolve(response); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
console.error('Error:', error); |
|||
// Handle error response |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function form_btn_enable(){ |
|||
$("#updatebtn").prop("disabled", false); |
|||
$("#updatebtn").html('<i class="ik ik-save"></i> Save and Close '); |
|||
} |
|||
|
|||
function form_btn_disable(){ |
|||
$("#updatebtn").prop("disabled", true); |
|||
// Show the loading icon on the button |
|||
$("#updatebtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...'); |
|||
} |
|||
|
|||
// For Complient Map Select HTML |
|||
function calloffice(val,id){ |
|||
if(val==1){ // Intenal |
|||
var officeSelectHTML = `<div class="mb-4"> |
|||
<label for="office${id}">Select Office</label> |
|||
<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})"> |
|||
<option value="0">Select Office</option> |
|||
<option value="1">HQ</option> |
|||
<option value="2">Zonal Office</option> |
|||
</select> |
|||
</div>`; |
|||
$("#officedata"+id).html(officeSelectHTML); |
|||
} |
|||
else if(val==2){ // External |
|||
$("#officers"+id).html(''); |
|||
var ExSelectHTML = getselect(id,"ExSelect"); |
|||
var departmentSelectHTML = `<div class="mb-4"> |
|||
<label for="dept3">Select Department</label> |
|||
${ExSelectHTML} |
|||
</div>`; |
|||
$("#officedata"+id).html(departmentSelectHTML); |
|||
} |
|||
else{ |
|||
$("#officedata"+id).html(''); |
|||
$("#officers"+id).html(''); |
|||
} |
|||
$("#officers"+id).html(''); |
|||
} |
|||
|
|||
function callofficers(val,id){ |
|||
|
|||
if(val==1){ |
|||
// HQ |
|||
var HQSelectHTML = getselect(id,"HQSelect"); |
|||
$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`); |
|||
} |
|||
else if(val==2){ |
|||
// Zone Office |
|||
var ZoneSelectHTML = getselect(id,"ZoneSelect"); |
|||
$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`); |
|||
} |
|||
else{ |
|||
$("#officers"+id).html(''); |
|||
} |
|||
|
|||
} |
|||
|
|||
function getselect(comid,type){ |
|||
var HQSelect = ''; |
|||
var ZoneSelect = ''; |
|||
var ExSelect = ''; |
|||
|
|||
for (var i = 0; i < officerMasterList.length; i++) { |
|||
if(officerMasterList[i].zone_id=="HQ"){ |
|||
HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
else if(officerMasterList[i].zone_id=="99"){ |
|||
ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
else{ |
|||
ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
} |
|||
|
|||
// Forward Save Button |
|||
var forward_Btn = `<div class="col-12 pt-3 mb-0 pb-0" id="submitdiv"> |
|||
<label class="form-label" for="forwardcomp">Forward Comments</label> |
|||
<textarea class="js-maxlength form-control" id="forwardcomp" name="forwardcomp" rows="6" maxlength="250" placeholder="கருத்துகள்..." data-always-show="true" data-placement="right" th:utext="" required></textarea> |
|||
<div class="text-center pt-3"> |
|||
<button type="button" class="btn btn-sm rounded-pill btn-hero btn-success me-1" onclick="javascript:saveForward(${comid});" id="updatebtn"><i class="si si-rocket me-1"></i> Save and Forward</button> |
|||
<div id="forwardFormError" class="text-danger"></div> |
|||
</div> |
|||
</div>`; |
|||
|
|||
if(type=="HQSelect"){ |
|||
return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> </option>${HQSelect}</select>${forward_Btn}`; |
|||
} |
|||
if(type=="ZoneSelect"){ |
|||
return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> </option>${ZoneSelect}</select>${forward_Btn}`; |
|||
} |
|||
if(type=="ExSelect"){ |
|||
return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> </option>${ExSelect}</select>${forward_Btn}`; |
|||
} |
|||
return ''; |
|||
} |
|||
$(document).ready(function() { |
|||
call_loading(); |
|||
get_officer_master_data(); |
|||
get_complaint_list(); |
|||
|
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,267 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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="far fa-calendar-plus bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Add New Petition</h5> |
|||
<span>Councillor Petition</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" aria-current="page">Councillor Petition</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Add Petition</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
<div class="row"> |
|||
<div class="col-md-2"></div> |
|||
<div class="col-md-8"> |
|||
<div class="card"> |
|||
<form class="request-form" id="request-form" onsubmit="return saveRequest();" enctype="multipart/form-data"> |
|||
<div class="card-header"><h3>New Petition Form</h3></div> |
|||
<div class="card-body"> |
|||
<div class="form-group"> |
|||
<label for="petitionerName">Petitioner's Name / மனுதாரரின் பெயர்</label> |
|||
<input type="text" class="form-control" name="petitionerName" id="petitionerName" autocomplete="off" placeholder="மனுதாரரின் பெயர்" maxlength="250" required> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="petitionerMobile">Mobile NO / கைபேசி எண்</label> |
|||
<input type="text" class="js-maxlength form-control" id="petitionerMobile" name="petitionerMobile" autocomplete="off" placeholder="கைபேசி எண்" maxlength="10" data-always-show="true" data-placement="top" required> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="complaintType">Type of complaint / புகார் வகை (பலவற்றை தேர்ந்தெடு..) </label> |
|||
<select class="select2" id="complaintType" name="complaintType" style="width: 100%;" data-placeholder="பலவற்றை தேர்ந்தெடு.." multiple required> |
|||
<option th:each="complaintType : ${complaintTypesList}" th:value="${complaintType.complaintTypeId}" th:text="${complaintType.complaintType}"></option> |
|||
</select> |
|||
</div> |
|||
<div class="row"> |
|||
|
|||
<div class="col-lg-6"> |
|||
<div class="form-group"> |
|||
<label for="san_page1">Petition Page 1 / மனு பக்கம் 1</label> |
|||
<input name="san_page1" id="san_page1" class="form-control" type="file" capture="camera" accept="application/pdf, image/*"> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-6"> |
|||
<div class="form-group"> |
|||
<label for="san_page2">Petition Page 2 / மனு பக்கம் 2</label> |
|||
<input name="san_page2" id="san_page2" class="form-control" type="file" capture="camera" accept="application/pdf, image/*"> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-lg-6"> |
|||
<div class="form-group"> |
|||
<label for="san_page3">Petition Page 3 / மனு பக்கம் 3</label> |
|||
<input name="san_page3" id="san_page3" class="form-control" type="file" capture="camera" accept="application/pdf, image/*"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-6"> |
|||
<div class="form-group"> |
|||
<label for="san_page4">Petition Page 4 / மனு பக்கம் 4</label> |
|||
<input name="san_page4" id="san_page4" class="form-control" type="file" capture="camera" accept="application/pdf, image/*"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="card-footer text-right"> |
|||
<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button> |
|||
<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-2"></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 th:replace="~{fragments/modules/c_petition/script :: script}"></script> |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var complaintTypeList = ""; |
|||
/* Get Complaint Type Data */ |
|||
function get_complaint_type_data(){ |
|||
|
|||
get_complaint_type_list().then(function(complaintTypes) { |
|||
// Handle the Complaint list |
|||
complaintTypeList = complaintTypes; |
|||
|
|||
// Iterate through the department list and add options to the select element |
|||
$.each(complaintTypeList, function(index, complaintType) { |
|||
// Create an option element |
|||
var option = $('<option>', { |
|||
value: complaintType.complaint_typeid, // case-sensitive as per object |
|||
text: complaintType.complaint_type |
|||
}); |
|||
// Append the option to the select element |
|||
$('#complaintType').append(option); |
|||
}); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching complaint type list:', error); |
|||
}); |
|||
} |
|||
|
|||
// Save New petition |
|||
function saveRequest(){ |
|||
// Disable the button to prevent multiple clicks |
|||
form_btn_disable(); |
|||
|
|||
var inputElementMobileNo = $('#petitionerMobile'); |
|||
var mobileNo = inputElementMobileNo.val(); |
|||
var mobileFormatRegex = /^\d{10}$/; //'0000000000'; |
|||
inputElementMobileNo.removeClass('is-invalid'); |
|||
|
|||
var inputElementComplaintType = $('#complaintType'); |
|||
var complaintType = inputElementComplaintType.val(); |
|||
|
|||
if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) { |
|||
|
|||
// Serialize form data |
|||
var formData = new FormData($('#request-form')[0]); |
|||
formData.append('createdBy',createdBy); |
|||
saveFormData(formData).then(function(response) { |
|||
if(response!="error"){ |
|||
// Handle the response |
|||
Swal.fire({ |
|||
title: 'Petition data saved successfully.', |
|||
customClass: { |
|||
title: 'swal-title-custom' // Add a custom class for the title |
|||
}, |
|||
//text: "Error", |
|||
icon: 'success', |
|||
showCancelButton: false, |
|||
confirmButtonColor: '#3085d6', |
|||
cancelButtonColor: '#d33', |
|||
confirmButtonText: 'Ok', |
|||
}).then(function(result) { |
|||
if (result.isConfirmed) { |
|||
// Reload the current page |
|||
//location.reload(); |
|||
// Navigate to a Ack page |
|||
window.location = "/gcc/c_petition/petition-ack/"+response; |
|||
} |
|||
}); |
|||
} |
|||
else{ |
|||
// Handle the response |
|||
// if response == "error" |
|||
Swal.fire({ |
|||
title: 'Failed to save petition data. Please try again!', |
|||
customClass: { |
|||
title: 'swal-title-custom' // Add a custom class for the title |
|||
}, |
|||
//text: "Error", |
|||
icon: 'error', |
|||
showCancelButton: false, |
|||
confirmButtonColor: '#3085d6', |
|||
cancelButtonColor: '#d33', |
|||
confirmButtonText: 'Ok', |
|||
}).then(function(result) { |
|||
if (result.isConfirmed) { |
|||
form_btn_enable(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error on save petition:', error.message); |
|||
form_btn_enable(); |
|||
}); |
|||
} |
|||
else{ |
|||
inputElementMobileNo.addClass('is-invalid'); |
|||
form_btn_enable(); |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
function saveFormData(formData){ |
|||
var apiUrl = '/gcc/api/c_petition/savePetition'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'POST', |
|||
data: formData, |
|||
processData: false, |
|||
contentType: false, |
|||
success: function(response) { |
|||
console.log(response); |
|||
// Handle success response |
|||
resolve(response); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
console.error('Error:', error); |
|||
// Handle error response |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function form_btn_enable(){ |
|||
$("#resetFormBtn").prop("disabled", false); |
|||
$("#requestSubmitBtn").prop("disabled", false); |
|||
$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save'); |
|||
} |
|||
|
|||
function form_btn_disable(){ |
|||
$("#resetFormBtn").prop("disabled", true); |
|||
$("#requestSubmitBtn").prop("disabled", true); |
|||
// Show the loading icon on the button |
|||
$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...'); |
|||
} |
|||
|
|||
$(document).ready(function() { |
|||
get_complaint_type_data(); |
|||
$('#petitionerMobile').mask('0000000000'); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,237 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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="far fa-calendar-plus bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5 th:utext="'Petition Acknowledgement ('+${petitionNo}+')'">Petition Acknowledgement</h5> |
|||
<span>Councillor Petition</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" aria-current="page">Councillor Petition</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Petition Acknowledgement</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<hr class="print_no"> |
|||
<!-- |
|||
<div class="row"> |
|||
<div class="col-lg-6"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack1table" style="border: 1px solid black;"> |
|||
<div id="ack1"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-6"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack2table" style="border: 1px solid black;"> |
|||
<div id="ack2"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-12 text-center block-options pt-10"> |
|||
<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button> |
|||
</div> |
|||
</div> |
|||
--> |
|||
<div class="row"> |
|||
<div class="col-lg-6"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack1table" class="ack-content"> |
|||
<div id="ack1">This is ack1</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-6 printack2"> |
|||
<div class="block block-rounded ack ack-container"> |
|||
<div id="ack2table" class="ack-content"> |
|||
<div id="ack2">This is ack2</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-12 text-center block-options pt-10"> |
|||
<button type="button" class="btn btn-warning btn-rounded btn-block-option" onclick="window.print()"><i class="ik ik-printer"></i> Print</button> |
|||
</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 th:replace="~{fragments/modules/c_petition/script :: script}"></script> |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var petitionNo = /*[[${petitionNo}]]*/''; |
|||
var complaintTypeList = ""; |
|||
|
|||
/* Get Complaint Type Data */ |
|||
function get_complaint_type_data(){ |
|||
|
|||
get_complaint_type_list().then(function(complaintTypes) { |
|||
// Handle the Complaint list |
|||
complaintTypeList = complaintTypes; |
|||
|
|||
// After Complaint Type list created we call petition details |
|||
get_petition_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching complaint type list:', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_data(){ |
|||
get_petition_details().then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint_txt; |
|||
|
|||
var complaintArray = complaint.split(','); |
|||
|
|||
for(j = 0; j < complaintArray.length; j++){ |
|||
if(j>0){ |
|||
complaintHTML+="<br>"; |
|||
} |
|||
complaintHTML+= (j+1)+') '+complaintArray[j]; |
|||
} |
|||
var ack =` |
|||
<table class="table table-borderless table-vcenter p-0 m-0"> |
|||
<tbody> |
|||
<tr> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
<td class="fw-semibold text-center"> |
|||
<b>பெருநகர சென்னை மாநகராட்சி | Greater Chennai Corporation<br> |
|||
மக்களை தேடி மேயர் திட்டம்<br> |
|||
ஒப்புகை சீட்டு / Acknowledgement Receipt</b> |
|||
</td> |
|||
<td scope="row"><img src="images/logo-sm.png" width="80px"/></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<hr style="margin:0px"> |
|||
<div class="block-content p-0 m-0"> |
|||
<table class="table table-borderless table-vcenter" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date : </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${convertdate(petitionDetails[0].cdate)} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petition_no} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name :</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_name} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${petitionDetails[0].petitioner_mobile} |
|||
</td> |
|||
</tr> |
|||
<tr style="font-size:12px;"> |
|||
<th style="padding: 0.45rem 0.45rem;">புகாரின் தன்மை / Nature of complaint:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"> |
|||
${complaintHTML} |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td scope="row" colspan="2" style="font-size:10px">இம்மனுவின் ஒப்புகைச் சீட்டு எண் மனு தாரரின் கைபேசி எண்ணிற்கு குறுஞ்செய்தி மூலம் அனுப்பி வைக்கப்படும் . இம்மனுவின் நிலை குறித்து https://chennaicorporation.gov.in/MTM/ என்ற இணையதளத்தில் மனுவின் எண்ணை குறிப்பிட்டு அறிந்துகொள்ளலாம்</th> |
|||
</tr> |
|||
<tr style="text-align: right;"> |
|||
<th scope="row" colspan="2" style="padding: 0.45rem 0.45rem;">வட்டார அலுவலகம்<br>Office of the Regional Deputy Commissioner</th> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
`; |
|||
|
|||
$("#ack1").html(ack); |
|||
$("#ack2").html(ack); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
|
|||
function get_petition_details() { |
|||
|
|||
var formData = new FormData(); |
|||
formData.append('petitionNo',petitionNo); |
|||
|
|||
var apiUrl = '/gcc/api/c_petition/getPetitionDetails?petitionNo='+petitionNo; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
$(document).ready(function() { |
|||
get_complaint_type_data(); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,282 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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-6"> |
|||
<div class="page-header-title"> |
|||
<i class="far fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Petition List</h5> |
|||
<span>Councillor Petition</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-6"> |
|||
<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" aria-current="page">Councillor Petition</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Petition List</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<hr> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
|
|||
<div class="card-block"> |
|||
<div id="tableLoading"></div> |
|||
<div> |
|||
<table id="petitionDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%"> |
|||
<thead class="thead-dark"> |
|||
<tr class="table-bordered"> |
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Petition No.</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile</th> |
|||
<th class="text-center">Address</th> |
|||
<th class="text-center">Postal Code</th> |
|||
<th class="text-center">Type of Complaint</th> |
|||
<th class="text-center">Date</th> |
|||
<th class="text-center">Status</th> |
|||
<th class="text-center">Department</th> |
|||
<th class="text-center no-sort no-exportable no-print">Action</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
<tfoot class="thead-dark"> |
|||
<tr> |
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Petition No.</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile</th> |
|||
<th class="text-center">Address</th> |
|||
<th class="text-center">Postal Code</th> |
|||
<th class="text-center">Type of Complaint</th> |
|||
<th class="text-center">Date</th> |
|||
<th class="text-center">Status</th> |
|||
<th class="text-center">Department</th> |
|||
<th class="text-center no-sort no-exportable no-print">Action</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/c_petition/modal-box :: div}"></div> |
|||
|
|||
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script th:replace="~{fragments/modules/c_petition/script :: script}"></script> |
|||
<script th:inline="javascript"> |
|||
var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script |
|||
|
|||
// Loading Div id |
|||
const loading = $("#tableLoading"); |
|||
|
|||
// 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', |
|||
title: 'Petition List' |
|||
}, |
|||
{ |
|||
extend: 'csvHtml5', |
|||
text: 'CSV', |
|||
className: 'btn btn-secondary', |
|||
id: 'csvBtn', |
|||
title: 'Petition List' |
|||
}, |
|||
{ |
|||
extend: 'pdfHtml5', |
|||
text: 'PDF', |
|||
className: 'btn btn-secondary', |
|||
id: 'pdfBtn', |
|||
title: 'Petition List' |
|||
}, |
|||
{ |
|||
extend: 'print', |
|||
text: 'Print', |
|||
className: 'btn btn-secondary', |
|||
id: 'printBtn', |
|||
title: 'Petition List', |
|||
exportOptions: { |
|||
columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view |
|||
} |
|||
} |
|||
]; |
|||
|
|||
|
|||
function call_loading(){ |
|||
loading.html(searchinfo("<b>"+loading_text_msg+"</b>")); |
|||
} |
|||
|
|||
function remove_loading(){ |
|||
loading.html(""); |
|||
} |
|||
|
|||
|
|||
/* Get Complaints Data */ |
|||
function get_petitions_data(){ |
|||
var apiUrl = '/gcc/api/c_petition/getPetitionList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Complaints List */ |
|||
function get_petitions_list(){ |
|||
get_petitions_data().then(function(petitionList) { |
|||
// Handle the department list |
|||
generate_table(petitionList); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
if (error && error.message) { |
|||
console.error('Error fetching petition list:', error.message); |
|||
} else { |
|||
console.error('An error occurred while fetching petition list:', error); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
|
|||
/* Call DataTable function */ |
|||
function generate_table(data){ |
|||
|
|||
var table = $('#petitionDatatable').DataTable( { |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', "orderable": false }, |
|||
{ targets: 'no-exportable', "exportable": false } |
|||
], |
|||
lengthMenu: [ |
|||
[ 50, 100, 200, 500, -1 ], |
|||
[ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ] |
|||
], |
|||
scrollY: '50vh', |
|||
fixedColumns: { |
|||
left: 0, |
|||
right: 0 |
|||
}, |
|||
buttons: [buttons], |
|||
responsive: true, |
|||
searching: false, |
|||
select: false, |
|||
processing: false, |
|||
} ); |
|||
|
|||
// Clearn Table data |
|||
table.clear().draw(); |
|||
|
|||
// Add rows to DataTable |
|||
var rowNum = 1; |
|||
$.each(data, function(index, row) { |
|||
|
|||
//View Acknowledgement: View the acknowledgement for petition MP10000001. |
|||
//Print Acknowledgement: Print the acknowledgement for petition MP10000001. |
|||
//View Petition Details: View the details of petition MP10000001. |
|||
//View Uploaded Files: View the files uploaded for petition MP10000001. |
|||
|
|||
actionHTML = `<div class="dropdown d-inline-block show"> |
|||
<a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="ik ik-more-horizontal"></i></a> |
|||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown" x-placement="bottom-end"> |
|||
|
|||
<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the acknowledgement for petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Acknowledgement</a> |
|||
<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="Print the acknowledgement for petition `+row['petition_no']+`."><i class="ik ik-printer"></i> Print Acknowledgement</a> |
|||
<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the details of petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Petition Details</a> |
|||
<a class="dropdown-item" href="" data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View the files uploaded for petition `+row['petition_no']+`."><i class="ik ik-eye"></i> View Uploaded Files</a> |
|||
</div> |
|||
</div>` |
|||
table.row.add([ |
|||
rowNum++, |
|||
'<a href="/gcc/c_petition/update-petition?petitionNo='+row['petitionNoEncode']+'">'+row['petition_no']+'</a>', |
|||
row['petitioner_name'], |
|||
row['petitioner_mobile'], |
|||
row['petitioner_address'], |
|||
row['petitioner_pincode'], |
|||
row['petitioner_complaint_txt'], |
|||
convertdate(row['cdate']), |
|||
row['status'], |
|||
row['created_by'], |
|||
actionHTML |
|||
]).draw(false); |
|||
}); |
|||
|
|||
// Enable tooltips for all elements with data-toggle="tooltip" |
|||
$('[data-toggle="tooltip"]').tooltip(); |
|||
remove_loading(); // remove Loading |
|||
} |
|||
|
|||
$(document).ready(function() { |
|||
call_loading(); |
|||
get_petitions_list(); |
|||
|
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,267 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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-6"> |
|||
<div class="page-header-title"> |
|||
<i class="far fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Unmapped Petition List</h5> |
|||
<span>Councillor Petition</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-6"> |
|||
<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" aria-current="page">Councillor Petition</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Unmapped Petition List</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<hr> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h3>These are the petitions that are currently not assigned to any department officer:</h3> |
|||
</div> |
|||
<div class="card-block"> |
|||
<div id="tableLoading"></div> |
|||
<div> |
|||
<table id="petitionDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%"> |
|||
<thead class="thead-dark"> |
|||
<tr class="table-bordered"> |
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Petition No.</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile</th> |
|||
<th class="text-center">Address</th> |
|||
<th class="text-center">Postal Code</th> |
|||
<th class="text-center">Type of Complaint</th> |
|||
<th class="text-center">Date</th> |
|||
<th class="text-center">Status</th> |
|||
<th class="text-center">Department</th> |
|||
<th class="text-center no-sort no-exportable no-print">Action</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
<tfoot class="thead-dark"> |
|||
<tr> |
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Petition No.</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile</th> |
|||
<th class="text-center">Address</th> |
|||
<th class="text-center">Postal Code</th> |
|||
<th class="text-center">Type of Complaint</th> |
|||
<th class="text-center">Date</th> |
|||
<th class="text-center">Status</th> |
|||
<th class="text-center">Department</th> |
|||
<th class="text-center no-sort no-exportable no-print">Action</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/c_petition/modal-box :: div}"></div> |
|||
|
|||
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script th:replace="~{fragments/modules/c_petition/script :: script}"></script> |
|||
<script th:inline="javascript"> |
|||
var loading_text_msg = getLoadingMessage(); // get Random loading message from base/script |
|||
|
|||
// Loading Div id |
|||
const loading = $("#tableLoading"); |
|||
|
|||
// 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', |
|||
title: 'Petition List' |
|||
}, |
|||
{ |
|||
extend: 'csvHtml5', |
|||
text: 'CSV', |
|||
className: 'btn btn-secondary', |
|||
id: 'csvBtn', |
|||
title: 'Petition List' |
|||
}, |
|||
{ |
|||
extend: 'pdfHtml5', |
|||
text: 'PDF', |
|||
className: 'btn btn-secondary', |
|||
id: 'pdfBtn', |
|||
title: 'Petition List' |
|||
}, |
|||
{ |
|||
extend: 'print', |
|||
text: 'Print', |
|||
className: 'btn btn-secondary', |
|||
id: 'printBtn', |
|||
title: 'Petition List', |
|||
exportOptions: { |
|||
columns: ':visible:not(.no-print)' // Exclude columns with class 'no-print' from print view |
|||
} |
|||
} |
|||
]; |
|||
|
|||
|
|||
function call_loading(){ |
|||
loading.html(searchinfo("<b>"+loading_text_msg+"</b>")); |
|||
} |
|||
|
|||
function remove_loading(){ |
|||
loading.html(""); |
|||
} |
|||
|
|||
|
|||
/* Get Complaints Data */ |
|||
function get_petitions_data(){ |
|||
var apiUrl = '/gcc/api/c_petition/getUnmapPetitionList'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
resolve(jsonResponse); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Complaints List */ |
|||
function get_petitions_list(){ |
|||
get_petitions_data().then(function(petitionList) { |
|||
// Handle the department list |
|||
generate_table(petitionList); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
if (error && error.message) { |
|||
console.error('Error fetching petition list:', error.message); |
|||
} else { |
|||
console.error('An error occurred while fetching petition list:', error); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
|
|||
/* Call DataTable function */ |
|||
function generate_table(data){ |
|||
|
|||
var table = $('#petitionDatatable').DataTable( { |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', "orderable": false }, |
|||
{ targets: 'no-exportable', "exportable": false } |
|||
], |
|||
lengthMenu: [ |
|||
[ 50, 100, 200, 500, -1 ], |
|||
[ '50 rows', '100 rows', '200 rows','500 rows', 'Show all' ] |
|||
], |
|||
scrollY: '50vh', |
|||
fixedColumns: { |
|||
left: 0, |
|||
right: 0 |
|||
}, |
|||
buttons: [buttons], |
|||
responsive: true, |
|||
searching: false, |
|||
select: false, |
|||
processing: false, |
|||
} ); |
|||
|
|||
// Clearn Table data |
|||
table.clear().draw(); |
|||
|
|||
// Add rows to DataTable |
|||
var rowNum = 1; |
|||
$.each(data, function(index, row) { |
|||
table.row.add([ |
|||
rowNum++, |
|||
'<a href="/gcc/c_petition/update-petition?petitionNo='+row['petitionNoEncode']+'">'+row['petition_no']+'</a>', |
|||
row['petitioner_name'], |
|||
row['petitioner_mobile'], |
|||
row['petitioner_address'], |
|||
row['petitioner_pincode'], |
|||
row['petitioner_complaint_txt'], |
|||
convertdate(row['cdate']), |
|||
row['status'], |
|||
row['created_by'], |
|||
'<a href="" onclick="return viewAck(\''+row['petition_no']+'\');"data-animation="true" data-toggle="tooltip" data-placement="top" data-html="true" title="View Ack"><i class="far fa-handshake"></i></a>', |
|||
]).draw(false); |
|||
}); |
|||
// Enable tooltips for all elements with data-toggle="tooltip" |
|||
$('[data-toggle="tooltip"]').tooltip(); |
|||
|
|||
remove_loading(); // remove Loading |
|||
} |
|||
|
|||
$(document).ready(function() { |
|||
call_loading(); |
|||
get_petitions_list(); |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,719 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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="far fa-calendar-plus bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Edit / Update Petition</h5> |
|||
<span>Councillor Petition</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" aria-current="page">Councillor Petition</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Edit/Update Petition</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<div class="card" id="petitionUpdateForm"> |
|||
<form class="update-request-form" id="update-request-form" onsubmit="return updateRequest();"> |
|||
<div class="card-header"> |
|||
<h3>Edit / Update Petition Form</h3> |
|||
<div class="card-header-right"> |
|||
<h3 th:utext="'Petition No: '+${petitionNo}+''"></h3> |
|||
</div> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<div class="form-group"> |
|||
<label for="petitionerName">Petitioner's Name / மனுதாரரின் பெயர்</label> |
|||
<input type="text" class="form-control" name="petitionerName" id="petitionerName" autocomplete="off" placeholder="மனுதாரரின் பெயர்" maxlength="250" required> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="petitionerMobile">Mobile NO / கைபேசி எண்</label> |
|||
<input type="text" class="form-control" id="petitionerMobile" name="petitionerMobile" autocomplete="off" placeholder="கைபேசி எண்" maxlength="10" required> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="complaintNature">புகாரின் தன்மை / Nature Of Complaint</label> |
|||
<textarea class="form-control" id="complaintNature" name="complaintNature" rows="6" maxlength="250" placeholder="புகாரின் தன்மை..."></textarea> |
|||
</div> |
|||
</div> |
|||
<div class="col-6"> |
|||
<div class="form-group"> |
|||
<label for="petitionerAddress">Address of petitioner / மனுதாரரின் முகவரி</label> |
|||
<textarea class="form-control" id="petitionerAddress" name="petitionerAddress" rows="6" maxlength="250" placeholder="மனுதாரரின் முகவரி..."></textarea> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="petitionerPincode">Postal code / தபால் குறியீடு</label> |
|||
<input type="text" class="form-control" id="petitionerPincode" name="petitionerPincode" placeholder="தபால் குறியீடு" maxlength="6" required> |
|||
</div> |
|||
<div class="form-group"> |
|||
<label for="complaintType">Type of complaint / புகார் வகை (பலவற்றை தேர்ந்தெடு..) </label> |
|||
<select class="select2" id="complaintType" name="complaintType" style="width: 100%;" data-placeholder="பலவற்றை தேர்ந்தெடு.." multiple required onchange="javascript:load_mapper();"> |
|||
<option></option> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<div class="col-12"> |
|||
<div class="block-content" id="userinfo2"> |
|||
<div id="comp_mapping_to_officers" class="row"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card-footer text-right"> |
|||
<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button> |
|||
<button type="submit" class="btn btn-success" id="requestSubmitBtn"><i class="ik ik-save"></i>Save</button> |
|||
</div> |
|||
</form> |
|||
</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 th:replace="~{fragments/modules/c_petition/script :: script}"></script> |
|||
<script th:inline="javascript"> |
|||
var createdBy = /*[[${LoginUserId}]]*/''; |
|||
var petitionNo = /*[[${petitionNo}]]*/''; |
|||
var petitionId = 0; |
|||
var closedComplaintsList=[]; |
|||
var complaintTypeList = ""; |
|||
var officerMasterList = ""; |
|||
|
|||
/* Get Complaint Type Data */ |
|||
function get_complaint_type_data(){ |
|||
|
|||
get_complaint_type_list().then(function(complaintTypes) { |
|||
// Handle the Complaint list |
|||
complaintTypeList = complaintTypes; |
|||
|
|||
// Iterate through the Master Complanint Type and add options to the select element |
|||
$.each(complaintTypeList, function(index, complaintType) { |
|||
// Create an option element |
|||
var option = $('<option>', { |
|||
value: complaintType.complaint_typeid, // case-sensitive as per object |
|||
text: complaintType.complaint_type |
|||
}); |
|||
// Append the option to the select element |
|||
$('#complaintType').append(option); |
|||
}); |
|||
// Call Petition function to fetch the data |
|||
get_petition_data(); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching complaint type list:', error); |
|||
}); |
|||
} |
|||
|
|||
/* Get Officer Master Data */ |
|||
function get_officer_master_data(){ |
|||
|
|||
get_officer_list().then(function(officers) { |
|||
// Handle the officer list |
|||
officerMasterList = officers; |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching offcier master data:', error); |
|||
}); |
|||
} |
|||
|
|||
// Function to get complaint_type and complaint_typeid by complaint_typeid |
|||
function getComplaintTypeById(complaintTypeId) { |
|||
for (var i = 0; i < complaintTypeList.length; i++) { |
|||
if (complaintTypeList[i].complaint_typeid == complaintTypeId) { |
|||
return { |
|||
complaint_type: complaintTypeList[i].complaint_type, |
|||
complaint_typeid: complaintTypeList[i].complaint_typeid |
|||
}; |
|||
} |
|||
} |
|||
return null; // Return null if no matching complaint_typeid is found |
|||
} |
|||
|
|||
// Save New petition |
|||
function updateRequest(){ |
|||
// Disable the button to prevent multiple clicks |
|||
form_btn_disable(); |
|||
|
|||
var inputElementMobileNo = $('#petitionerMobile'); |
|||
var mobileNo = inputElementMobileNo.val(); |
|||
var mobileFormatRegex = /^\d{10}$/; //'0000000000'; |
|||
inputElementMobileNo.removeClass('is-invalid'); |
|||
|
|||
var inputElementComplaintType = $('#complaintType'); |
|||
var complaintType = inputElementComplaintType.val(); |
|||
|
|||
if (mobileNo !== null && mobileFormatRegex.test(mobileNo) && mobileNo.length == 10) { |
|||
|
|||
// Serialize form data |
|||
var formData = new FormData($('#update-request-form')[0]); |
|||
formData.append('petitionNo',petitionNo); |
|||
formData.append('createdBy',createdBy); |
|||
formData.append('petitionId',petitionId); |
|||
updateFormData(formData).then(function(response) { |
|||
// Handle the response |
|||
if(response==true){ |
|||
// Delete Old data in Petition Mapping table |
|||
savePetitionMapData(formData).then(function(response) { |
|||
if(response==true){ |
|||
Swal.fire({ |
|||
title: 'Petition updated successfully!', |
|||
customClass: { |
|||
title: 'swal-title-custom' // Add a custom class for the title |
|||
}, |
|||
//text: "Error", |
|||
icon: 'success', |
|||
showCancelButton: false, |
|||
confirmButtonColor: '#3085d6', |
|||
cancelButtonColor: '#d33', |
|||
confirmButtonText: 'Ok', |
|||
}).then(function(result) { |
|||
if (result.isConfirmed) { |
|||
form_btn_enable(); |
|||
} |
|||
}); |
|||
} |
|||
else{ |
|||
Swal.fire({ |
|||
title: 'Petition details have been updated, but mapping the complaint to the officer has failed.', |
|||
customClass: { |
|||
title: 'swal-title-custom' // Add a custom class for the title |
|||
}, |
|||
//text: "Error", |
|||
icon: 'warning', |
|||
showCancelButton: false, |
|||
confirmButtonColor: '#3085d6', |
|||
cancelButtonColor: '#d33', |
|||
confirmButtonText: 'Ok', |
|||
}).then(function(result) { |
|||
if (result.isConfirmed) { |
|||
form_btn_enable(); |
|||
} |
|||
}); |
|||
} |
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching offcier master data:', error); |
|||
form_btn_enable(); |
|||
}); |
|||
|
|||
} |
|||
else{ |
|||
Swal.fire({ |
|||
title: 'Failed to update petition details!', |
|||
customClass: { |
|||
title: 'swal-title-custom' // Add a custom class for the title |
|||
}, |
|||
//text: "Error", |
|||
icon: 'error', |
|||
showCancelButton: false, |
|||
confirmButtonColor: '#3085d6', |
|||
cancelButtonColor: '#d33', |
|||
confirmButtonText: 'Ok', |
|||
}).then(function(result) { |
|||
if (result.isConfirmed) { |
|||
form_btn_enable(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error on save petition:', error.message); |
|||
form_btn_enable(); |
|||
}); |
|||
} |
|||
else{ |
|||
inputElementMobileNo.addClass('is-invalid'); |
|||
form_btn_enable(); |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
function updateFormData(formData){ |
|||
var apiUrl = '/gcc/api/c_petition/updatePetition'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'POST', |
|||
data: formData, |
|||
processData: false, |
|||
contentType: false, |
|||
success: function(response) { |
|||
console.log(response); |
|||
// Handle success response |
|||
resolve(response); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
console.error('Error:', error); |
|||
// Handle error response |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function savePetitionMapData(formData){ |
|||
var apiUrl = '/gcc/api/c_petition/mapComplientToOfficer'; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'POST', |
|||
data: formData, |
|||
processData: false, |
|||
contentType: false, |
|||
success: function(response) { |
|||
console.log(response); |
|||
// Handle success response |
|||
resolve(response); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
console.error('Error:', error); |
|||
// Handle error response |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition data */ |
|||
function get_petition_data(){ |
|||
get_petition_details().then(function(petitionDetails) { |
|||
// Handle the Complaint list |
|||
var complaintHTML = ""; |
|||
var complaint = petitionDetails[0].petitioner_complaint; |
|||
petitionId = petitionDetails[0].petition_id; |
|||
var complaintArray = complaint.split(","); |
|||
$("#complaintType").val(complaintArray); |
|||
|
|||
$('#complaintType').trigger('change'); |
|||
|
|||
closedComplaintsList = complaintArray; |
|||
|
|||
$("#petitionerName").val(petitionDetails[0].petitioner_name); |
|||
$("#petitionerMobile").val(petitionDetails[0].petitioner_mobile); |
|||
$("#petitionerAddress").val(petitionDetails[0].petitioner_address); |
|||
$("#petitionerPincode").val(petitionDetails[0].petitioner_pincode); |
|||
|
|||
$("#complaintNature").val(petitionDetails[0].complaint_nature); |
|||
|
|||
//load_mapper(); // Call for Complaint Mapping Form |
|||
|
|||
// IDs of the values you want to prevent from being deselected |
|||
var valuesToPreventDeselection = closedComplaintsList;//['value1', 'value2', 'value3']; |
|||
|
|||
$('#complaintType').on('select2:unselect', function (e) { |
|||
var deselectedValue = e.params.data.id; |
|||
|
|||
// Check if the deselected value should be prevented from being deselected |
|||
if (valuesToPreventDeselection.includes(deselectedValue)) { |
|||
// Prevent the deselection |
|||
e.preventDefault(); |
|||
// Re-select the deselected value to prevent it from being deselected |
|||
$(this).val(valuesToPreventDeselection).trigger('change.select2'); |
|||
// Optionally, you can display a message or perform any other action |
|||
console.log('Deselection of value ' + deselectedValue + ' prevented'); |
|||
alert('Deselection of value ' + deselectedValue + ' prevented'); |
|||
} |
|||
}); |
|||
|
|||
}).catch(function(error) { |
|||
// Handle errors |
|||
console.error('Error fetching petition Data ('+petitionNo+'):', error.message); |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
}); |
|||
} |
|||
|
|||
/* Get Petition details by petition number */ |
|||
function get_petition_details() { |
|||
|
|||
var formData = new FormData(); |
|||
formData.append('petitionNo',petitionNo); |
|||
|
|||
var apiUrl = '/gcc/api/c_petition/getPetitionDetails?petitionNo='+petitionNo; |
|||
// Return a Promise |
|||
return new Promise(function(resolve, reject) { |
|||
$.ajax({ |
|||
url: apiUrl, |
|||
type: 'GET', |
|||
//data: formData, |
|||
dataType: 'json', |
|||
success: function(jsonResponse) { |
|||
// Resolve the Promise with the department list |
|||
if(jsonResponse.length>0){ |
|||
resolve(jsonResponse); |
|||
}else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
console.log('Fetched petition details ('+petitionNo+') Is null:'); |
|||
} |
|||
|
|||
}, |
|||
error: function(xhr, status, error) { |
|||
// Reject the Promise with the error message |
|||
console.error('Error fetching petition details ('+petitionNo+'):', error.message); |
|||
reject(error); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
function load_mapper(){ |
|||
var complaintArray = $("#complaintType").val(); |
|||
//var complaintArray = complaint.split(','); |
|||
var compPetitionNo = petitionNo; |
|||
var compPetitionId = petitionId; |
|||
|
|||
var compmapHTML=''; |
|||
for(j = 0; j < complaintArray.length; j++){ |
|||
var complaintTypeDetails = getComplaintTypeById(complaintArray[j]); // Pass the complaint_typeid |
|||
var title=(j+1)+') '+ complaintTypeDetails.complaint_type; // Map form title |
|||
var compID="comp"+j; |
|||
var complaintTypeId = complaintTypeDetails.complaint_typeid; |
|||
|
|||
getMappingByComplaintsID(complaintTypeId); |
|||
|
|||
compmapHTML+=`<div class="col-lg-6" id="comp${complaintArray[j]}"> |
|||
|
|||
<div class="widget"> |
|||
<div class="widget-header" style="background-color:#2a807f;color:#fff;"> |
|||
<h3 class="widget-title" style="font-size:13px;">${title}</h3> |
|||
</div> |
|||
<div class="widget-body"> |
|||
<div class="form-group"> |
|||
<label for="dept${complaintArray[j]}">Select Department Type</label> |
|||
<select name="dept[]" id="dept${complaintArray[j]}" class="form-control" onchange="javascript:calloffice(this.value,${complaintArray[j]})"> |
|||
<option value="0">Select Department</option> |
|||
<option value="1">GCC Department</option> |
|||
<option value="2">External Department</option> |
|||
</select> |
|||
</div> |
|||
<div id="officedata${complaintArray[j]}"></div> |
|||
<div id="officers${complaintArray[j]}"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div>`; |
|||
|
|||
} |
|||
$('#comp_mapping_to_officers').html(compmapHTML); |
|||
|
|||
} |
|||
|
|||
</script> |
|||
|
|||
<script> |
|||
// For Complient Map Select HTML |
|||
function calloffice(val,id){ |
|||
if(val==1){ // Intenal |
|||
var officeSelectHTML = `<div class="mb-4"> |
|||
<label for="office${id}">Select Office</label> |
|||
<select name="office[]" id="office${id}" class="form-control" onchange="javascript:callofficers(this.value,${id})"> |
|||
<option value="0">Select Office</option> |
|||
<option value="1">HQ</option> |
|||
<option value="2">Zonal Office</option> |
|||
</select> |
|||
</div>`; |
|||
$("#officedata"+id).html(officeSelectHTML); |
|||
} |
|||
else if(val==2){ // External |
|||
$("#officers"+id).html(''); |
|||
var ExSelectHTML = getselect(id,"ExSelect"); |
|||
var departmentSelectHTML = `<div class="mb-4"> |
|||
<label for="dept3">Select Department</label> |
|||
${ExSelectHTML} |
|||
</div>`; |
|||
$("#officedata"+id).html(departmentSelectHTML); |
|||
} |
|||
else{ |
|||
$("#officedata"+id).html(''); |
|||
$("#officers"+id).html(''); |
|||
} |
|||
$("#officers"+id).html(''); |
|||
} |
|||
|
|||
function callofficers(val,id){ |
|||
|
|||
if(val==1){ |
|||
// HQ |
|||
var HQSelectHTML = getselect(id,"HQSelect"); |
|||
$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${HQSelectHTML}</div>`); |
|||
} |
|||
else if(val==2){ |
|||
// Zone Office |
|||
var ZoneSelectHTML = getselect(id,"ZoneSelect"); |
|||
$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${id}">Select Department</label>${ZoneSelectHTML}</div>`); |
|||
} |
|||
else{ |
|||
$("#officers"+id).html(''); |
|||
} |
|||
|
|||
} |
|||
|
|||
function getselect(comid,type){ |
|||
var HQSelect = ''; |
|||
var ZoneSelect = ''; |
|||
var ExSelect = ''; |
|||
|
|||
for (var i = 0; i < officerMasterList.length; i++) { |
|||
if(officerMasterList[i].zone_id=="HQ"){ |
|||
HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
else if(officerMasterList[i].zone_id=="99"){ |
|||
ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
else{ |
|||
ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
} |
|||
|
|||
if(type=="HQSelect"){ |
|||
return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> </option>${HQSelect}</select>`; |
|||
} |
|||
if(type=="ZoneSelect"){ |
|||
return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> </option>${ZoneSelect}</select>`; |
|||
} |
|||
if(type=="ExSelect"){ |
|||
return `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> </option>${ExSelect}</select>`; |
|||
} |
|||
return ''; |
|||
} |
|||
|
|||
function form_btn_enable(){ |
|||
$("#resetFormBtn").prop("disabled", false); |
|||
$("#requestSubmitBtn").prop("disabled", false); |
|||
$("#requestSubmitBtn").html('<i class="ik ik-save"></i>Save'); |
|||
} |
|||
|
|||
function form_btn_disable(){ |
|||
$("#resetFormBtn").prop("disabled", true); |
|||
$("#requestSubmitBtn").prop("disabled", true); |
|||
// Show the loading icon on the button |
|||
$("#requestSubmitBtn").html('<i class="fas fa-spinner fa-spin"></i> Validating your request, please wait...'); |
|||
} |
|||
|
|||
function getMappingByComplaintsID(complaintTypeId){ |
|||
|
|||
$.ajax({ |
|||
type: "GET", |
|||
url: '/gcc/api/c_petition/getComplaintMappingDetails', |
|||
data: { |
|||
'petitionId': petitionId, |
|||
'petitionNo': petitionNo, |
|||
'complaintTypeId': complaintTypeId |
|||
}, |
|||
dataType: 'json', |
|||
}).done(function(response) { |
|||
|
|||
//console.log(response); |
|||
|
|||
if(response.length>0){ |
|||
var comid = response[0]["complaint_typeid"]; |
|||
var offid = response[0]["off_id"]; |
|||
var mapid = response[0]["mapid"]; |
|||
loadSelectforUpdate(comid,offid,comid); |
|||
} |
|||
|
|||
|
|||
}).fail(function(jqXHR, textStatus, errorThrown) { |
|||
|
|||
// Log the error and any relevant information |
|||
console.error("Error sending request: " + textStatus + " " + errorThrown); |
|||
|
|||
}); |
|||
} |
|||
|
|||
function loadSelectforUpdate(comid,offid,id){ |
|||
var type ="NULL"; |
|||
var HQSelect = ''; |
|||
var ZoneSelect = ''; |
|||
var ExSelect = ''; |
|||
|
|||
for (var i = 0; i < officerMasterList.length; i++) { |
|||
//console.log(officerMasterList[i]); |
|||
if(officerMasterList[i].zone_id=="HQ"){ |
|||
|
|||
if(offid>0 && officerMasterList[i].off_id == offid){ |
|||
type = "HQSelect"; |
|||
HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
else{ |
|||
HQSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
|
|||
} |
|||
else if(officerMasterList[i].zone_id=="99"){ |
|||
if(offid>0 && officerMasterList[i].off_id == offid){ |
|||
type = "ExSelect"; |
|||
ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
else{ |
|||
ExSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
} |
|||
else{ |
|||
if(offid>0 && officerMasterList[i].off_id == offid){ |
|||
type = "ZoneSelect"; |
|||
//console.log(type + " === "+ officerMasterList[i].offId +" == "+ offid); |
|||
ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}" selected>${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
else{ |
|||
ZoneSelect+=`<option value="${comid}_${officerMasterList[i].off_id}">${officerMasterList[i].off_nm}</option>`; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//console.log("comid : "+comid +",\noffid : "+offid+",\nid : "+id+",\ntype : "+type); |
|||
|
|||
if(type=="HQSelect"){ |
|||
//console.log("I am from HQSelect: \n #officers"+id); |
|||
$("#officedata"+id).html('<div class="mb-4">' + |
|||
'<label for="office$'+id+'">Select Office</label>' + |
|||
'<select name="office[]" id="office$'+id+'" class="form-control" onchange="javascript:callofficers(this.value,'+id+')">' + |
|||
'<option value="0">Select Office</option>' + |
|||
'<option value="1" Selected>HQ</option>' + |
|||
'<option value="2">Zonal Office</option>' + |
|||
'</select>' + |
|||
'</div>'); |
|||
HQSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> </option>${HQSelect}</select>`; |
|||
$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${HQSelectHTML}</div>`); |
|||
|
|||
} |
|||
if(type=="ZoneSelect"){ |
|||
//console.log("I am from ZoneSelect: \n #officers"+id); |
|||
$("#officedata"+id).html('<div class="mb-4">' + |
|||
'<label for="office$'+id+'">Select Office</label>' + |
|||
'<select name="office[]" id="office$'+id+'" class="form-control" onchange="javascript:callofficers(this.value,'+id+')">' + |
|||
'<option value="0">Select Office</option>' + |
|||
'<option value="1">HQ</option>' + |
|||
'<option value="2" Selected>Zonal Office</option>' + |
|||
'</select>' + |
|||
'</div>'); |
|||
|
|||
ZoneSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> </option>${ZoneSelect}</select>`; |
|||
$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${ZoneSelectHTML}</div>`); |
|||
} |
|||
if(type=="ExSelect"){ |
|||
//console.log("I am from ExSelect: \n #officers"+id); |
|||
ExSelectHTML = `<select name="mapOfficers" id="mapOfficers${comid}" class="form-control"> <option value="0"> </option>${ExSelect}</select>`; |
|||
$("#officers"+id).html(`<div class="mb-4"><label for="mapOfficers${comid}">Select Department</label>${ExSelectHTML}</div>`); |
|||
} |
|||
|
|||
} |
|||
|
|||
function call_petition_search_from(errorTXT){ |
|||
var errorHTML = ""; |
|||
if(errorTXT!=""){ |
|||
errorHTML = `<div class="form-group text-center text-danger">${errorTXT}</div>`; |
|||
} |
|||
var searchFormHTML = `<form class="search-form" id="search-form" onsubmit="return searchRequest();"> |
|||
<div class="card-header"> |
|||
<h3>Edit / Update Petition Form</h3> |
|||
<div class="card-header-right"> |
|||
<h3 th:utext="'Petition No: '+${petitionNo}+''"></h3> |
|||
</div> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-12 text-center"> |
|||
${errorHTML} |
|||
<div class="form-group"> |
|||
<label for="petitionNoSearch">Petition No / மனு எண் </label> |
|||
<input type="text" class="form-control text-center" name="petitionNoSearch" id="petitionNoSearch" autocomplete="off" placeholder="CP00000000" maxlength="10" required> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="col-12"> |
|||
<div class="block-content" id="userinfo2"> |
|||
<div id="comp_mapping_to_officers" class="row"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="card-footer text-center"> |
|||
<button type="reset" class="btn btn-secondary mr-2" id="resetFormBtn"><i class="ik ik-refresh-cw"></i>Reset</button> |
|||
<button type="submit" class="btn btn-success" id="searchSubmitBtn"><i class="ik ik-search"></i>Search</button> |
|||
</div> |
|||
</form>`; |
|||
|
|||
$("#petitionUpdateForm").html(searchFormHTML); |
|||
$('#petitionNoSearch').mask('MP00000000'); |
|||
} |
|||
|
|||
function searchRequest(){ |
|||
var searchValue = $('#petitionNoSearch').val(); |
|||
if (searchValue && searchValue.trim() !== '') { |
|||
searchValue = encodeBase64(searchValue); |
|||
window.location.href = "/gcc/c_petition/update-petition?petitionNo="+searchValue; |
|||
} |
|||
else{ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
return false; |
|||
} |
|||
</script> |
|||
<script> |
|||
$(document).ready(function() { |
|||
|
|||
if(petitionNo!=null && petitionNo!="error"){ |
|||
get_complaint_type_data(); |
|||
get_officer_master_data(); |
|||
} |
|||
else{ |
|||
if(petitionNo=="error"){ |
|||
call_petition_search_from("Invalid Petition Number: Please provide a valid petition number."); |
|||
} |
|||
else{ |
|||
call_petition_search_from(""); |
|||
} |
|||
} |
|||
|
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,158 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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="far fa-calendar-plus bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>View Petition</h5> |
|||
<span>Councillor Petition</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" aria-current="page">Councillor Petition</li> |
|||
<li class="breadcrumb-item active" aria-current="page">View Petition</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<div class="card mb-0" id="petitionViewtable"> |
|||
<div class="card-header" style="color: #004085;background-color: #e7eff7;"> |
|||
<h3>Petition Details</h3> |
|||
<div class="card-header-right text-center block-options pt-10" style="padding-right: 20px;"> |
|||
<a href="javascript:void(0);" onclick="window.print()" class="link"><i class="ik ik-printer"></i> Print</a> |
|||
</div> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<table class="table table-bordered table-vcenter" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="cdate_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petition_no_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_name_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_mobile_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Address of petitioner / மனுதாரரின் முகவரி:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_address_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;">புகாரின் தன்மை / Nature of complaint:<br> |
|||
<p class="fw-semibold mb-0" style="font-weight:normal;" id="complaint_nature_value"></p> |
|||
</th> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;" id="complaint_with_maping_value"></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="col-6"> |
|||
|
|||
<table class="table table-bordered table-vcenter" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Petition Status: </th> |
|||
<td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_status_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Total number of complaints in this petition: </th> |
|||
<td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Total Complaints Completed:</th> |
|||
<td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_completed_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Total Complaints Pending:</th> |
|||
<td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_pending_value"></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
|
|||
<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th id="petition_summary_title">Pending Summary</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr style="background-color:#fbffe0;"> |
|||
<td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_summary_html"></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
|
|||
<div class="col-12"> |
|||
<div class="card-title">List of Complaints in this Petition and Their Status:</div> |
|||
<div id="listOfComplaintsHTML"></div> |
|||
</div> |
|||
</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 th:replace="~{fragments/modules/c_petition/script :: script}"></script> |
|||
<script th:replace="~{fragments/modules/c_petition/petition_view_script :: script}"></script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,108 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<body> |
|||
|
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<div class="card mb-0" id="petitionViewtable"> |
|||
<div class="card-header" style="color: #004085;background-color: #e7eff7;"> |
|||
<h3>Petition Details</h3> |
|||
<div class="card-header-right text-center block-options pt-10" style="padding-right: 20px;"> |
|||
<a href="javascript:void(0);" onclick="window.print()" class="link"><i class="ik ik-printer"></i> Print</a> |
|||
</div> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<table class="table table-bordered table-vcenter" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">நாள் / Date: </th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="cdate_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">ஒப்புகை சீட்டு எண்/ Acknowledgement No:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petition_no_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">பெயர் / Name:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_name_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">கைபேசி எண் / Mobile No.</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_mobile_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">மனுதாரரின் முகவரி / Address of petitioner:</th> |
|||
<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="petitioner_address_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;">புகாரின் தன்மை / Nature of complaint:<br> |
|||
<p class="fw-semibold mb-0" style="font-weight:normal;" id="complaint_nature_value"></p> |
|||
</th> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="2" style="padding: 0.45rem 0.45rem;border: 0px;" id="complaint_with_maping_value"></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="col-6"> |
|||
|
|||
<table class="table table-bordered table-vcenter" style="font-size:12px;"> |
|||
<tbody> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Petition Status: </th> |
|||
<td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_status_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Total number of complaints in this petition: </th> |
|||
<td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Total Complaints Completed:</th> |
|||
<td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_completed_value"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="padding: 0.45rem 0.45rem;">Total Complaints Pending:</th> |
|||
<td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="total_complaints_pending_value"></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
|
|||
<table class="table table-bordered table-vcenter mb-0"> |
|||
<thead> |
|||
<tr> |
|||
<th id="petition_summary_title">Pending Summary</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr style="background-color:#fbffe0;"> |
|||
<td class="fw-semibold text-center" style="padding: 0.45rem 0.45rem;" id="petition_summary_html"></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
|
|||
<div class="col-12"> |
|||
<div class="card-title">List of Complaints in this Petition and Their Status:</div> |
|||
<div id="listOfComplaintsHTML"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<script th:replace="~{fragments/modules/c_petition/script :: script}"></script> |
|||
<script th:replace="~{fragments/modules/c_petition/petition_view_script :: script}"></script> |
|||
</body> |
|||
</html> |
|||
@ -1,974 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<style> |
|||
.required{ |
|||
color: red; |
|||
} |
|||
|
|||
/* Custom CSS for SweetAlert2 */ |
|||
.swal-container { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.swal-popup { |
|||
width: 80% !important; /* Adjust width as needed */ |
|||
max-width: 600px; /* Max width for larger screens */ |
|||
border-radius: 8px; /* Optional: round the corners */ |
|||
padding: 2rem; /* Optional: adjust padding */ |
|||
} |
|||
|
|||
.swal-confirm-button { |
|||
background-color: #dc3545; /* Example: red background for delete button */ |
|||
border: none; |
|||
color: #fff; |
|||
} |
|||
|
|||
.swal-cancel-button { |
|||
background-color: #6c757d; /* Example: gray background for cancel button */ |
|||
border: none; |
|||
color: #fff; |
|||
} |
|||
|
|||
#addcategoryform .modal-body { |
|||
max-height: 500px; /* Set max height */ |
|||
overflow-y: auto; /* Enable vertical scrolling when content overflows */ |
|||
} |
|||
|
|||
#editCategoryModal .modal-body { |
|||
max-height: 500px; /* Set max height */ |
|||
overflow-y: auto; /* Enable vertical scrolling when content overflows */ |
|||
} |
|||
|
|||
|
|||
|
|||
</style> |
|||
<body> |
|||
|
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-8"> |
|||
<div class="page-header-title"> |
|||
<i class="fas fa-th-large bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Add Category</h5> |
|||
<span>1913 Add Category</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="/gcc/index"><i |
|||
class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">1913 Campaign</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Add Category</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<h4 class="h4 text-right text-mute" style="font-size: 12px;"> |
|||
Auot refresh in <font id="refresh-countdown">00</font> seconds |
|||
</h4> |
|||
|
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
|
|||
<div class="card-block"> |
|||
<div class="page-header-title" > |
|||
<h5 style="margin: 0;font-weight: bold;">Category List</h5><hr> |
|||
</div> |
|||
<div> |
|||
<table id="categoryDatatable" 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">S.No</th> |
|||
<th class="text-center">Category</th> |
|||
<th class="text-center no-sort">Action</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr th:each="category, iterStat : ${categories}"> |
|||
<td class="text-center" th:text="${iterStat.index + 1}"></td> |
|||
<td class="text-center" th:text="${category.category_name}"></td> |
|||
<td class="text-center"> |
|||
<a href="#" th:onclick="return callEdit([[${category.category_id}]])" data-animation="true" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit"> |
|||
<i class="ik ik-edit f-16 mr-15 text-green"></i> |
|||
</a> |
|||
<!-- Delete button --> |
|||
<a href="javascript:void(0);" th:onclick="return openDeleteModal([[${category.category_id}]])" title="Delete"> |
|||
<i class="ik ik-trash-2 f-16 text-red ml-4"></i> |
|||
</a> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
|
|||
|
|||
<tfoot class="thead-dark"> |
|||
<tr> |
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Category</th> |
|||
<th class="text-center no-sort">Action</th> |
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Category Modal Form --> |
|||
<div class="modal fade" id="addcategoryform" tabindex="-1" role="dialog"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title">Category Form</h5> |
|||
<button type="button" class="close" data-dismiss="modal">×</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<form id="addCategoryForm"> |
|||
<div class="form-group"> |
|||
<label>Category Name <span class="required">*</span></label> |
|||
<input type="text" class="form-control" id="categoryname" name="categoryname" placeholder="Enter Category Name" required> |
|||
</div> |
|||
|
|||
<div id="columnInputs"> |
|||
|
|||
|
|||
<label>Column Name <span class="required">*</span></label> |
|||
<div class="form-group row column-group"> |
|||
|
|||
<div class="col-sm-10"> |
|||
<input type="text" class="form-control columnname" name="columns[]" placeholder="Column Name" required> |
|||
</div> |
|||
<div class="col-sm-2"> |
|||
<button type="button" class="btn btn-danger remove-column">×</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<button type="button" class="btn btn-primary" id="addMoreColumn">+ Add Column</button> |
|||
<button type="button" class="btn btn-success" id="createCategoryBtn">Save Category</button> |
|||
|
|||
</form> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Edit Category Modal --> |
|||
<div class="modal fade" id="editCategoryModal" tabindex="-1" role="dialog" aria-labelledby="editCategoryModalLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="editCategoryModalLabel">Edit Category</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<form id="editCategoryForm"> |
|||
<input type="hidden" id="categoryId" name="categoryId"> |
|||
|
|||
<div class="form-group"> |
|||
<label for="showcategoryName">Category Name <span class="required">*</span></label> |
|||
<input type="text" class="form-control" id="showcategoryName" name="showcategoryName" required readonly="readonly"> |
|||
</div> |
|||
|
|||
<div id="editColumnInputs"></div> |
|||
<div id="editaddColumnInputs"></div> |
|||
<hr> |
|||
<button type="button" class="btn btn-success" id="addMoreEditColumn">+ Add Column</button> |
|||
<button type="button" class="btn btn-primary" id="updateCategoryButton">Save Changes</button> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<!-- Delete Confirmation Modal --> |
|||
<div class="modal fade" id="deleteCategoryModal" tabindex="-1" role="dialog" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> <!-- Add modal-lg here --> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="deleteCategoryModalLabel">Confirm Deletion</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<p>Are you sure you want to delete this category?</p> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> |
|||
<button type="button" class="btn btn-danger" id="confirmDeleteButton">Delete</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
|
|||
<script> |
|||
$(document).ready(function () { |
|||
// Initialize DataTables with export buttons |
|||
var buttons = [ |
|||
{ |
|||
extend: 'pageLength', |
|||
className: 'btn btn-warning' |
|||
}, |
|||
{ |
|||
title: 'Data export', |
|||
extend: 'copyHtml5', |
|||
text: 'Copy', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'excelHtml5', |
|||
text: 'Excel', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'csvHtml5', |
|||
text: 'CSV', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'pdfHtml5', |
|||
text: 'PDF', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
|
|||
text: '<i class="far fa-plus-square"></i> Add New Category', |
|||
className: 'btn btn-warning', |
|||
action: function () { |
|||
callAdd(); // Now it will work |
|||
} |
|||
|
|||
|
|||
} |
|||
]; |
|||
|
|||
$('#categoryDatatable').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: '30vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
buttons: buttons, |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
searching: false, |
|||
select: false, |
|||
processing: false, |
|||
}); |
|||
|
|||
|
|||
// Show Modal |
|||
function callAdd() { |
|||
resetForm(); |
|||
$('#addcategoryform').modal({ backdrop: 'static', keyboard: false }); |
|||
$('#addcategoryform').modal('show'); |
|||
} |
|||
|
|||
// Reset Form |
|||
function resetForm() { |
|||
$('#addCategoryForm')[0].reset(); |
|||
$("#columnInputs .column-group:not(:first)").remove(); |
|||
$(".remove-column").hide(); |
|||
} |
|||
|
|||
//validateColumns |
|||
function validateColumns(columns) { |
|||
let columnSet = new Set(); |
|||
let regex = /^[A-Za-z0-9_ ]+$/; // Allow alphabets, numbers, underscores, and spaces |
|||
let invalidRegex = /^[_ ]+$/; // Match column names with only underscores and/or spaces |
|||
|
|||
for (let col of columns) { |
|||
if (!regex.test(col)) { |
|||
Swal.fire({ |
|||
title: "Validation Error", |
|||
text: "Column names must contain only alphabets (A-Z, a-z), numbers (0-9), underscores (_), and spaces.", |
|||
icon: "warning", |
|||
confirmButtonText: "OK" |
|||
}); |
|||
return false; |
|||
} |
|||
if (invalidRegex.test(col)) { |
|||
Swal.fire({ |
|||
title: "Validation Error", |
|||
text: "Column names cannot contain only spaces and underscores (_).", |
|||
icon: "warning", |
|||
confirmButtonText: "OK" |
|||
}); |
|||
return false; |
|||
} |
|||
let trimmedCol = col.trim().toLowerCase(); // Trim spaces for uniqueness check |
|||
if (columnSet.has(trimmedCol)) { |
|||
Swal.fire({ |
|||
title: "Validation Error", |
|||
text: "Duplicate column names are not allowed.", |
|||
icon: "warning", |
|||
confirmButtonText: "OK" |
|||
}); |
|||
return false; |
|||
} |
|||
columnSet.add(trimmedCol); |
|||
} |
|||
return true; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
// Add default fields on page load |
|||
/* var defaultFields = ` |
|||
<div class="form-group row column-group"> |
|||
<div class="col-sm-10"> |
|||
<input type="text" class="form-control" name="columns[]" value="name" readonly> |
|||
<input type="text" class="form-control" name="columns[]" value="mobilenumber" readonly> |
|||
<input type="text" class="form-control" name="columns[]" value="address" readonly> |
|||
</div> |
|||
</div>`; |
|||
$('#columnInputs').append(defaultFields); */ |
|||
|
|||
|
|||
var defaultFields = ` |
|||
<div class="form-group row column-group"> |
|||
<div class="col-sm-10"> |
|||
<input type="text" class="form-control" name="columns[]" value="Name" > |
|||
</div> |
|||
</div> |
|||
<div class="form-group row column-group"> |
|||
<div class="col-sm-10"> |
|||
<input type="text" class="form-control" name="columns[]" value="Mobilenumber" > |
|||
</div> |
|||
</div> |
|||
|
|||
</div>`; |
|||
|
|||
$('#columnInputs').append(defaultFields); |
|||
|
|||
$('#addcategoryform').on('shown.bs.modal', function () { |
|||
$('#columnInputs').html(''); // Clear existing columns |
|||
$('#columnInputs').append(defaultFields); // Append default values |
|||
}); |
|||
|
|||
|
|||
$('#addcategoryform').on('hidden.bs.modal', function () { |
|||
$('#categoryname').val(""); // Reset category name |
|||
$('#columnInputs').html(""); // Clear all columns |
|||
}); |
|||
$('#editCategoryModal').on('hidden.bs.modal', function () { |
|||
$('#editColumnInputs').html(''); // Clear all columns when modal is closed |
|||
$('#editaddColumnInputs').html(''); // Clear additional columns if applicable |
|||
}); |
|||
|
|||
// Add More Column Fields |
|||
$('#addMoreColumn').click(function () { |
|||
|
|||
|
|||
var newColumnField = ` |
|||
<div class="form-group row column-group"> |
|||
<div class="col-sm-10"> |
|||
<input type="text" class="form-control columnname" name="columns[]" placeholder="Column Name" required> |
|||
</div> |
|||
<div class="col-sm-2"> |
|||
<button type="button" class="btn btn-danger remove-column">×</button> |
|||
</div> |
|||
</div>`; |
|||
$('#columnInputs').append(newColumnField); |
|||
$('.remove-column').show(); |
|||
}); |
|||
|
|||
// Remove Column Field |
|||
$(document).on('click', '.remove-column', function () { |
|||
$(this).closest('.column-group').remove(); |
|||
if ($('.column-group').length === 1) { |
|||
$('.remove-column').hide(); |
|||
} |
|||
}); |
|||
|
|||
$('#createCategoryBtn').click(function () { |
|||
var categoryName = $('#categoryname').val().trim(); |
|||
//var columnNames = $('.columnname').map(function () { |
|||
var columnNames = $('input[name="columns[]"]').map(function () { |
|||
return $(this).val().trim(); |
|||
}).get().filter(name => name !== ""); |
|||
|
|||
console.log("categoryName=", categoryName); |
|||
console.log("columnNames=", columnNames); |
|||
|
|||
if (categoryName === "") { |
|||
Swal.fire({ |
|||
title: "Validation Error", |
|||
text: "Please enter a category name.", |
|||
icon: "warning", |
|||
confirmButtonText: "OK" |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (columnNames.length < 2) { |
|||
Swal.fire({ |
|||
title: "Validation Error", |
|||
text: "Please enter at least two column names.", |
|||
icon: "warning", |
|||
confirmButtonText: "OK" |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (!validateColumns(columnNames)) { |
|||
return; |
|||
} |
|||
|
|||
$('#createCategoryBtn').prop('disabled', true).text('Processing...'); |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/category/save', |
|||
type: 'POST', |
|||
contentType: 'application/json', |
|||
data: JSON.stringify({ categoryname: categoryName, columns: columnNames }), |
|||
success: function (response) { |
|||
$('#createCategoryBtn').prop('disabled', false).text('Save Category'); |
|||
Swal.fire({ |
|||
title: "Success", |
|||
text: "Category saved successfully!", |
|||
icon: "success", |
|||
confirmButtonText: "OK" |
|||
}).then(function () { |
|||
$('#addcategoryform').modal('hide'); |
|||
$('#createCategoryBtn').prop('disabled', false).text('Save Category'); |
|||
location.reload(); |
|||
}); |
|||
}, |
|||
error: function (error) { |
|||
$('#createCategoryBtn').prop('disabled', false).text('Save Category'); |
|||
Swal.fire({ |
|||
title: "Error", |
|||
text: error.responseText, |
|||
icon: "error", |
|||
confirmButtonText: "OK" |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
/* $('#createCategoryBtn').click(function () { |
|||
var categoryName = $('#categoryname').val().trim(); |
|||
var columnNames = $('.columnname').map(function () { |
|||
return $(this).val().trim(); |
|||
}).get().filter(name => name !== ""); |
|||
console.log("categoryName=========="+categoryName); |
|||
console.log("columnNames=========="+columnNames); |
|||
// Validation: Ensure category name is not empty and at least two columns are provided |
|||
if (categoryName === "") { |
|||
Swal.fire({ |
|||
title: 'Validation Error', |
|||
text: 'Please enter a category name.', |
|||
icon: 'warning', |
|||
confirmButtonText: 'OK' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (columnNames.length < 2) { |
|||
Swal.fire({ |
|||
title: 'Validation Error', |
|||
text: 'Please enter at least two column names.', |
|||
icon: 'warning', |
|||
confirmButtonText: 'OK' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
|
|||
// Proceed with AJAX request if validation passes |
|||
$.ajax({ |
|||
url: '/gcc/api/category/save', |
|||
type: 'POST', |
|||
contentType: 'application/json', |
|||
data: JSON.stringify({ categoryname: categoryName, columns: columnNames }), |
|||
success: function (response) { |
|||
Swal.fire({ |
|||
title: 'Success', |
|||
text: 'Category saved successfully!', |
|||
icon: 'success', |
|||
confirmButtonText: 'OK' |
|||
}).then(function () { |
|||
$('#addcategoryform').modal('hide'); |
|||
location.reload(); |
|||
}); |
|||
}, |
|||
error: function (error) { |
|||
Swal.fire({ |
|||
title: 'Error', |
|||
text: error.responseText, |
|||
icon: 'error', |
|||
confirmButtonText: 'OK' |
|||
}); |
|||
} |
|||
}); |
|||
}); */ |
|||
|
|||
// Function to fetch category details and populate the edit modal |
|||
window.callEdit = function (categoryId) { |
|||
fetchCategoryDetails(categoryId); |
|||
return false; |
|||
}; |
|||
|
|||
function fetchCategoryDetails(categoryId) { |
|||
$.ajax({ |
|||
url: '/gcc/api/category/showcategoryId', |
|||
type: 'GET', |
|||
data: { category_id: categoryId }, |
|||
success: function (response) { |
|||
if (response) { |
|||
$('#categoryId').val(response.category_id); |
|||
$('#showcategoryName').val(response.category_name); |
|||
|
|||
$('#editColumnInputs').empty(); |
|||
|
|||
$('#editaddColumnInputs').empty(); |
|||
|
|||
if (response.columns && response.columns.length > 0) { |
|||
response.columns.forEach(col => addEditColumnField(col.id, col.column_name)); |
|||
} else { |
|||
addEditColumnField(); |
|||
} |
|||
|
|||
$('#editCategoryModal').modal({ backdrop: 'static', keyboard: false }); |
|||
} else { |
|||
Swal.fire('Error', 'Category not found.', 'error'); |
|||
} |
|||
}, |
|||
error: function (xhr) { |
|||
Swal.fire('Error', 'Error fetching category details: ' + xhr.responseText, 'error'); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
|
|||
|
|||
function addEditColumnField(id = "", value = "", containerId = "editColumnInputs") { |
|||
let removeButton = containerId === "editColumnInputs" |
|||
? `<button type="button" class="btn btn-danger" onclick="removeColumn(this, '${id}')">×</button>` |
|||
: `<button type="button" class="btn btn-danger remove-column">×</button>`; |
|||
|
|||
let columnField = ` |
|||
<div class="form-group row column-group"> |
|||
<input type="hidden" class="showcolumnId" value="${id}"> |
|||
<div class="col-sm-10"> |
|||
<input type="text" class="form-control showcolumnname" name="columns[]" placeholder="Column Name" value="${value}" required> |
|||
</div> |
|||
<div class="col-sm-2"> |
|||
${removeButton} |
|||
</div> |
|||
</div>`; |
|||
$('#' + containerId).append(columnField); |
|||
} |
|||
|
|||
|
|||
$('#addMoreEditColumn').click(function () { |
|||
addEditColumnField("", "", "editaddColumnInputs"); |
|||
}); |
|||
|
|||
$(document).ready(function () { |
|||
window.removeColumn = function (button, columnId) { |
|||
if (columnId) { |
|||
Swal.fire({ |
|||
title: "Are you sure?", |
|||
text: "This column will be permanently deleted!", |
|||
icon: "warning", |
|||
showCancelButton: true, |
|||
confirmButtonColor: "#d33", |
|||
cancelButtonColor: "#3085d6", |
|||
confirmButtonText: "Yes, delete it!" |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
$.ajax({ |
|||
url: '/gcc/api/category/deleteColumnById', |
|||
type: 'POST', |
|||
data: { columnId: columnId }, |
|||
success: function (response) { |
|||
if (response.success) { |
|||
$(button).closest('.column-group').remove(); |
|||
Swal.fire({ |
|||
title: "Deleted!", |
|||
text: "Column has been removed.", |
|||
icon: "success", |
|||
timer: 2000, // Auto-close after 2 seconds |
|||
showConfirmButton: false |
|||
}); |
|||
} else { |
|||
Swal.fire({ |
|||
title: "Error", |
|||
text: "Unable to delete column. Try again.", |
|||
icon: "error", |
|||
timer: 2000, // Auto-close after 2 seconds |
|||
showConfirmButton: false |
|||
}); |
|||
} |
|||
}, |
|||
error: function (xhr) { |
|||
Swal.fire("Error", "Something went wrong: " + xhr.responseText, "error"); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} else { |
|||
console.log("columnId=" + columnId); |
|||
Swal.fire("Error!", "Problem in columnId", "error"); |
|||
} |
|||
}; |
|||
}); |
|||
|
|||
|
|||
|
|||
// Event to remove column input dynamically |
|||
$(document).on('click', '.remove-column', function () { |
|||
$(this).closest('.column-group').remove(); |
|||
}); |
|||
|
|||
$('#updateCategoryButton').click(function () { |
|||
let categoryId = parseInt($('#categoryId').val(), 10); |
|||
|
|||
let existingColumns = []; |
|||
$('#editColumnInputs .column-group').each(function () { |
|||
let columnId = parseInt($(this).find('.showcolumnId').val(), 10); |
|||
let columnName = $(this).find('.showcolumnname').val(); |
|||
if (columnName.trim() !== "") { |
|||
existingColumns.push({ id: columnId, name: columnName }); |
|||
} |
|||
}); |
|||
|
|||
let newColumns = []; |
|||
$('#editaddColumnInputs .column-group').each(function () { |
|||
let columnName = $(this).find('.showcolumnname').val(); |
|||
if (columnName.trim() !== "") { |
|||
newColumns.push({ name: columnName }); |
|||
} |
|||
}); |
|||
|
|||
console.log("Category ID:", categoryId); |
|||
console.log("Existing Columns:", existingColumns); |
|||
console.log("New Columns:", newColumns); |
|||
|
|||
let allColumnNames = [...existingColumns.map(col => col.name), ...newColumns.map(col => col.name)]; |
|||
|
|||
console.log("allColumnNames="+allColumnNames); |
|||
|
|||
if ((existingColumns.length + newColumns.length) < 2) { |
|||
Swal.fire({ |
|||
title: "Info", |
|||
text: "You must have at least 2 columns!", |
|||
icon: "info", |
|||
confirmButtonText: "OK" |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (!validateColumns(allColumnNames)) { |
|||
return; |
|||
} |
|||
|
|||
$('#updateCategoryButton').prop('disabled', true).text('Processing'); |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/category/updateCategoryColumns', |
|||
type: 'POST', |
|||
contentType: 'application/json', |
|||
data: JSON.stringify({ categoryId: categoryId, columns: existingColumns }), |
|||
success: function (response) { |
|||
$('#updateCategoryButton').prop('disabled', false).text('Save Changes'); |
|||
if (response.success) { |
|||
Swal.fire({ |
|||
title: "Success!", |
|||
text: "Category updated successfully!", |
|||
icon: "success", |
|||
showConfirmButton: false, |
|||
timer: 2000 |
|||
}).then(() => { |
|||
$('#updateCategoryButton').prop('disabled', false).text('Save Changes'); |
|||
location.reload(); |
|||
}); |
|||
} else { |
|||
$('#updateCategoryButton').prop('disabled', false).text('Save Changes'); |
|||
Swal.fire({ |
|||
title: "Error", |
|||
text: "Unable to update column. Try again.", |
|||
icon: "error", |
|||
showConfirmButton: true |
|||
}); |
|||
} |
|||
}, |
|||
error: function (xhr) { |
|||
$('#updateCategoryButton').prop('disabled', false).text('Save Changes'); |
|||
Swal.fire("Error", "Failed to update category: " + xhr.responseText, "error"); |
|||
} |
|||
}); |
|||
|
|||
if (newColumns.length > 0) { |
|||
$('#updateCategoryButton').prop('disabled', true).text('Processing'); |
|||
$.ajax({ |
|||
url: '/gcc/api/category/addNewColumns', |
|||
type: 'POST', |
|||
contentType: 'application/json', |
|||
data: JSON.stringify({ categoryId: categoryId, columns: newColumns }), |
|||
success: function (response) { |
|||
$('#updateCategoryButton').prop('disabled', false).text('Save Changes'); |
|||
if (response.success) { |
|||
Swal.fire({ |
|||
title: "Success!", |
|||
text: "Category updated successfully!", |
|||
icon: "success", |
|||
showConfirmButton: false, |
|||
timer: 2000 |
|||
}).then(() => { |
|||
$('#updateCategoryButton').prop('disabled', false).text('Save Changes'); |
|||
location.reload(); |
|||
}); |
|||
} else { |
|||
$('#updateCategoryButton').prop('disabled', false).text('Save Changes'); |
|||
Swal.fire({ |
|||
title: "Error", |
|||
text: "Unable to update column. Try again.", |
|||
icon: "error", |
|||
showConfirmButton: true |
|||
}); |
|||
} |
|||
}, |
|||
error: function (xhr) { |
|||
$('#updateCategoryButton').prop('disabled', false).text('Save Changes'); |
|||
Swal.fire("Error", "Failed to add new columns: " + xhr.responseText, "error"); |
|||
} |
|||
}); |
|||
$('#updateCategoryButton').prop('disabled', false).text('Save Changes'); |
|||
} |
|||
}); |
|||
|
|||
|
|||
/* $('#updateCategoryButton').click(function () { |
|||
let categoryId = parseInt($('#categoryId').val(), 10); |
|||
|
|||
// Collect existing columns |
|||
let existingColumns = []; |
|||
$('#editColumnInputs .column-group').each(function () { |
|||
let columnId = parseInt($(this).find('.showcolumnId').val(), 10); |
|||
let columnName = $(this).find('.showcolumnname').val(); |
|||
if (columnName.trim() !== "") { |
|||
existingColumns.push({ id: columnId, name: columnName }); |
|||
} |
|||
}); |
|||
|
|||
// Collect new columns |
|||
let newColumns = []; |
|||
$('#editaddColumnInputs .column-group').each(function () { |
|||
let columnName = $(this).find('.showcolumnname').val(); |
|||
if (columnName.trim() !== "") { |
|||
newColumns.push({ name: columnName }); |
|||
} |
|||
}); |
|||
|
|||
// Debugging: Log values before AJAX calls |
|||
console.log("Category ID:", categoryId); |
|||
console.log("Existing Columns:", existingColumns); |
|||
console.log("New Columns:", newColumns); |
|||
|
|||
if ((existingColumns.length + newColumns.length) < 2) { |
|||
Swal.fire({ |
|||
title: "Info", |
|||
text: "You must have at least 2 columns!", |
|||
icon: "info", |
|||
confirmButtonText: "OK" |
|||
}); |
|||
return; // Stop execution if condition fails |
|||
} |
|||
|
|||
// 1️⃣ Send existing columns update AJAX |
|||
$.ajax({ |
|||
url: '/gcc/api/category/updateCategoryColumns', |
|||
type: 'POST', |
|||
contentType: 'application/json', |
|||
data: JSON.stringify({ categoryId: categoryId, columns: existingColumns }), |
|||
success: function (response) { |
|||
|
|||
if (response.success) { |
|||
|
|||
Swal.fire({ |
|||
title: "Success!", |
|||
text: "Category updated successfully!", |
|||
icon: "success", |
|||
showConfirmButton: false, |
|||
timer: 2000 // Show message for 2 seconds |
|||
}).then(() => { |
|||
location.reload(); // Reload the page after SweetAlert closes |
|||
}); |
|||
} else { |
|||
Swal.fire({ |
|||
title: "Error", |
|||
text: "Unable to update column. Try again.", |
|||
icon: "error", |
|||
showConfirmButton: true |
|||
}); |
|||
} |
|||
}, |
|||
error: function (xhr) { |
|||
Swal.fire("Error", "Failed to update category: " + xhr.responseText, "error"); |
|||
} |
|||
}); |
|||
|
|||
// 2️⃣ Send new columns addition AJAX (only if there are new columns) |
|||
if (newColumns.length > 0) { |
|||
$.ajax({ |
|||
url: '/gcc/api/category/addNewColumns', |
|||
type: 'POST', |
|||
contentType: 'application/json', |
|||
data: JSON.stringify({ categoryId: categoryId, columns: newColumns }), |
|||
success: function (response) { |
|||
if (response.success) { |
|||
|
|||
Swal.fire({ |
|||
title: "Success!", |
|||
text: "Category updated successfully!", |
|||
icon: "success", |
|||
showConfirmButton: false, |
|||
timer: 2000 // Show message for 2 seconds |
|||
}).then(() => { |
|||
location.reload(); // Reload the page after SweetAlert closes |
|||
}); |
|||
} else { |
|||
Swal.fire({ |
|||
title: "Error", |
|||
text: "Unable to update column. Try again.", |
|||
icon: "error", |
|||
showConfirmButton: true |
|||
}); |
|||
} |
|||
}, |
|||
error: function (xhr) { |
|||
Swal.fire("Error", "Failed to add new columns: " + xhr.responseText, "error"); |
|||
} |
|||
}); |
|||
} |
|||
}); */ |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
window.openDeleteModal = function (categoryId) { |
|||
$('#categoryId').val(categoryId); // Set the categoryId before showing the modal |
|||
fetchDeleteCategoryDetails(); |
|||
return false; // Prevent default anchor click behavior |
|||
}; |
|||
|
|||
function fetchDeleteCategoryDetails() { |
|||
Swal.fire({ |
|||
title: 'Confirm Deletion', |
|||
text: 'Are you sure you want to delete this category?', |
|||
icon: 'warning', |
|||
showCancelButton: true, |
|||
confirmButtonText: 'Delete', |
|||
cancelButtonText: 'Cancel', |
|||
customClass: { |
|||
container: 'swal-container', |
|||
popup: 'swal-popup', |
|||
confirmButton: 'swal-confirm-button', |
|||
cancelButton: 'swal-cancel-button' |
|||
}, |
|||
width: '80%', |
|||
padding: '3rem', |
|||
heightAuto: false |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
// Call the function to delete the category |
|||
deleteCategory(); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function deleteCategory() { |
|||
var categoryId = $('#categoryId').val(); // Ensure this is correctly set |
|||
console.log("Deleting category with ID: " + categoryId); // Debugging line |
|||
$.ajax({ |
|||
url: '/gcc/api/category/delete/' + categoryId, |
|||
type: 'DELETE', |
|||
success: function (response) { |
|||
Swal.fire({ |
|||
title: 'Deleted!', |
|||
text: 'Category has been deleted.', |
|||
icon: 'success' |
|||
}).then(() => { |
|||
location.reload(); // Refresh the page or update the UI as needed |
|||
}); |
|||
}, |
|||
error: function (xhr, status, error) { |
|||
Swal.fire({ |
|||
title: 'Error', |
|||
text: 'Error deleting category: ' + xhr.responseText, |
|||
icon: 'error' |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
1807
src/main/resources/templates/modules/callcenter/agentscampaign.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,230 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"> |
|||
<style> |
|||
|
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="wrapper"> |
|||
<!-- Header --> |
|||
<header th:replace="~{fragments/modules/base/header :: header}"></header> |
|||
|
|||
<div class="page-wrap"> |
|||
<!-- Left Menu --> |
|||
<div th:replace="~{fragments/modules/base/menu :: menu}"></div> |
|||
|
|||
<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="fa fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>1913 Attendance Reports</h5> |
|||
<span>List of 1913 Agents Attendance</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" aria-current="page">1913 Attendance</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Attendance Report</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<hr> |
|||
|
|||
<div id="pageLoader" |
|||
style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class ="card-body"> |
|||
<form th:action="@{/gcc/callcenterattendance/attendancereport}" method="get" onsubmit="showLoader()"> |
|||
<div class="row"> |
|||
|
|||
<div class="col-sm-6 mb-3"> |
|||
<label for="fromDate" |
|||
style="font-size: medium;; margin-bottom: 0px;">From |
|||
Date:</label> <input type="date" id="fromDate" name="fromDate" |
|||
th:value="${fromDate}" class="form-control" required> |
|||
</div> |
|||
<div class="col-sm-6 mb-3"> |
|||
<label for="toDate" |
|||
style="font-size: medium; margin-bottom: 0px;">To |
|||
Date:</label> <input type="date" id="toDate" name="toDate" |
|||
th:value="${toDate}" class="form-control" required> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="col-12 d-flex justify-content-center"> |
|||
<button type="submit" id="filterButton" |
|||
class="btn btn-primary mx-2">Filter</button> |
|||
|
|||
<button class="btn btn-danger mx-2" onclick="resetDate()" |
|||
name="reset">Reset</button> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<!-- Agents Attendance report --> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
|
|||
<div class="card-block"> |
|||
<div class="page-header-title" > |
|||
<h5 style="margin: 0;font-weight: bold;">Attendance Reports</h5><hr> |
|||
</div> |
|||
<div> |
|||
<table id="AttendanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="100%" height="100%"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th class="text-center">S.No</th> |
|||
<!-- <th class="text-center">Zone</th> |
|||
<th class="text-center">Division</th> --> |
|||
<th class="text-center">Employee Id</th> |
|||
<th class="text-center">Employee Name</th> |
|||
<!-- <th class="text-center">Department Name</th> --> |
|||
<th class="text-center">Designation</th> |
|||
<th class="text-center">Device Location</th> |
|||
<th class="text-center">Punch Date</th> |
|||
<th class="text-center">Punch In</th> |
|||
<th class="text-center">Punch Out</th> |
|||
<th class="text-center">Total Working hours</th> |
|||
|
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr th:each="row,sno : ${attendanceData}"> |
|||
<td th:text="${sno.index + 1}" class="text-center"></td> |
|||
<!-- <td th:text="${row.zone}" class="text-center"></td> |
|||
<td th:text="${row.division}" class="text-center"></td> --> |
|||
<td th:text="${row.user_id}" class="text-center"></td> |
|||
<td th:text="${row.user_name}" class="text-center"></td> |
|||
<!-- <td th:text="${row.departmentname}" class="text-center"></td> --> |
|||
<td th:text="${row.designation}" class="text-center"></td> |
|||
<td th:text="${row.device_name}" class="text-center"></td> |
|||
<td th:text="${row.punch_date}" class="text-center"></td> |
|||
<td th:text="${row.PUNCHIN}" class="text-center"></td> |
|||
<td th:text="${row.PUNCHOUT}" class="text-center"></td> |
|||
<td th:text="${row.total_working_hours}" class="text-center"></td> |
|||
</tr> |
|||
|
|||
</tbody> |
|||
|
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Include jQuery and Bootstrap JavaScript --> |
|||
|
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
|
|||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<!-- sweet alert --> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
<script type="text/javascript"> |
|||
|
|||
// Initialize DataTables with export buttons |
|||
$(document).ready(function () { |
|||
var buttons = [ |
|||
{ extend: 'pageLength', className: 'btn btn-warning' }, |
|||
{ title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' }, |
|||
{ extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' }, |
|||
{ extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' }, |
|||
{ extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' }, |
|||
]; |
|||
|
|||
$('#AttendanceDatatable').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: true, |
|||
select: false, |
|||
processing: false, |
|||
}); |
|||
}); |
|||
|
|||
$("#fromDate").on("change", function() { |
|||
const startDate = $(this).val(); // Get the selected start date |
|||
// Set the min value for To Date to be the selected From Date |
|||
$("#toDate").attr("min", startDate); |
|||
}); |
|||
|
|||
// Event listener for To Date selection |
|||
$("#toDate").on("change", function() { |
|||
const endDate = $(this).val(); // Get the selected end date |
|||
// Set the max value for From Date to be the selected To Date |
|||
$("#fromDate").attr("max", endDate); |
|||
}); |
|||
|
|||
//Function to reset the date fields and reload the page with cleared data |
|||
function resetDate() { |
|||
// Clear the date inputs |
|||
document.getElementById("fromDate").value = ""; |
|||
document.getElementById("toDate").value = ""; |
|||
|
|||
// Redirect to the endpoint without parameters to reset the page |
|||
window.location.href = "/gcc/callcenterattendance/attendancereport"; |
|||
} |
|||
|
|||
//Function to show the loader when the form is submitted |
|||
function showLoader() { |
|||
document.getElementById('pageLoader').style.display = 'block'; |
|||
} |
|||
|
|||
// Function to hide the loader after the page has loaded |
|||
window.onload = function () { |
|||
document.getElementById('pageLoader').style.display = 'none'; |
|||
}; |
|||
|
|||
</script> |
|||
|
|||
|
|||
|
|||
</body> |
|||
</html> |
|||
1256
src/main/resources/templates/modules/callcenter/campaignlist.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,973 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"> |
|||
|
|||
</head> |
|||
<style> |
|||
.required{ |
|||
color: red; |
|||
} |
|||
.card-box { |
|||
box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px; |
|||
|
|||
} |
|||
|
|||
@media (max-width: 768px) { |
|||
.card-box { |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
/* #questionDatatable { |
|||
table-layout: fixed !important; |
|||
width: 100% !important; |
|||
} |
|||
|
|||
#questionDatatable th, |
|||
#questionDatatable td { |
|||
white-space: nowrap !important; |
|||
text-align: center; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
#questionDatatable td:nth-child(2) { |
|||
text-align: left !important; |
|||
} */ |
|||
.table-responsive { |
|||
min-width: 100%; |
|||
overflow-x: auto; |
|||
} |
|||
|
|||
|
|||
/* Active tab color */ |
|||
.nav-tabs .nav-link.active { |
|||
background-color: rgb(40, 185, 123) !important; |
|||
color: white !important; |
|||
border-color: rgb(40, 185, 123) !important; |
|||
} |
|||
|
|||
/* Inactive tab color */ |
|||
.nav-tabs .nav-link { |
|||
background-color: #f8f9fa; |
|||
color: black; |
|||
border-color: #ddd; |
|||
} |
|||
|
|||
/* Hover effect */ |
|||
.nav-tabs .nav-link:hover { |
|||
background-color: rgba(40, 185, 123, 0.8); |
|||
color: white; |
|||
} |
|||
|
|||
|
|||
.modal-body { |
|||
max-height: 70vh; |
|||
overflow-y: auto; /* Enables vertical scrolling */ |
|||
overflow-x: hidden; /* Hides horizontal scrolling */ |
|||
padding-right: 15px; /* Prevents content cutoff */ |
|||
} |
|||
|
|||
|
|||
</style> |
|||
<body> |
|||
<div class="wrapper"> |
|||
<!-- Header --> |
|||
<header th:replace="~{fragments/modules/base/header :: header}"></header> |
|||
|
|||
<div class="page-wrap"> |
|||
<!-- Left Menu --> |
|||
<div th:replace="~{fragments/modules/base/menu :: menu}"></div> |
|||
|
|||
<div class="main-content"> |
|||
<div class="container-fluid"> |
|||
<div class="page-header"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-6"> |
|||
<div class="page-header-title"> |
|||
<i class="fa fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Campaign Report</h5> |
|||
<span>1913 Campaign Report</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-6"> |
|||
<nav class="breadcrumb-container" aria-label="breadcrumb"> |
|||
<ol class="breadcrumb"> |
|||
<li class="breadcrumb-item"> |
|||
<a href="/gcc/index"><i class="ik ik-home"></i></a> |
|||
</li> |
|||
<li class="breadcrumb-item" aria-current="page">1913 Campaign</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Campaign Report</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row mt-4"> |
|||
|
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h3>Task Details</h3> |
|||
</div> |
|||
|
|||
<div class="row mt-3 ml-2"> |
|||
<div class="col-md-3"> |
|||
<label for="startDate" class="form-label" style="font-size: medium;">From Date:</label> |
|||
<input type="date" id="startDate" class="form-control" placeholder="Start Date" onclick="this.showPicker()"> |
|||
</div> |
|||
<div class="col-md-3"> |
|||
<label for="endDate" class="form-label" style="font-size: medium;">To Date:</label> |
|||
<input type="date" id="endDate" class="form-control" placeholder="End Date" onclick="this.showPicker()"> |
|||
</div> |
|||
<div class="col-md-3" style="margin-top: 30px;"> |
|||
<button id="searchBtn" class="btn btn-primary">Search</button> |
|||
<button id="resetBtn" class="btn btn-secondary">Reset</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="card-body"> |
|||
|
|||
<table id="QaqcDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th rowspan="2" class="text-center" width="1%;">S.No</th> |
|||
|
|||
<th colspan="3" class="text-center">Campaign</th> |
|||
<th colspan="3" class="text-center">Performance</th> |
|||
<th colspan="5" class="text-center">Call Results</th> |
|||
<th rowspan="2" class="text-center">Action</th> |
|||
|
|||
</tr> |
|||
<tr role="row"> |
|||
|
|||
<th class="text-center no-sort" style="text-align: center;">Campaign Name</th> |
|||
<th class="text-center no-sort" style="text-align: center;">Date</th> |
|||
<th class="text-center no-sort" style="text-align: center;">Category</th> |
|||
<th class="text-center no-sort" style="text-align: center;">Total Data</th> |
|||
<th class="text-center no-sort" style="text-align: center;">Assigned Calls</th> |
|||
<th class="text-center no-sort" style="text-align: center;">Not Assigned Calls</th> |
|||
<!-- <th class="text-center no-sort">Completion(%)</th> --> |
|||
<th class="no-sort" style="text-align: center;">Information Given</th> |
|||
<th class="no-sort" style="text-align: center;">Call Back Later</th> |
|||
<th class="no-sort" style="text-align: center;">Unattended</th> |
|||
<th class="no-sort" style="text-align: center;">Switch Off</th> |
|||
<th class="no-sort" style="text-align: center;">Wrong Number</th> |
|||
|
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
|
|||
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<!-- Add the 'Please wait' text below the spinner --> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--agentperformance Modal --> |
|||
<div class="modal fade" id="agentperformance" tabindex="-1" |
|||
role="dialog" aria-labelledby="exampleModalCenterLabel" |
|||
aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl modal-dialog-scrollable" |
|||
role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="exampleModalCenterLabel">Task |
|||
Details</h5> |
|||
<button type="button" class="close" data-dismiss="modal" |
|||
aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
|
|||
|
|||
<div class="modal-body"> |
|||
<form id="editForm" onsubmit="submitForm(event)"> |
|||
<input type="hidden" name="campaign_id" id="campaign_id" /> |
|||
|
|||
<div class="form-group"> |
|||
<input type="hidden" name="category_id" class="form-control" |
|||
id="category_id" readonly> |
|||
</div> |
|||
|
|||
<div class="mt-1" style="font-size: 14px;"> |
|||
<div class="row pb-2"> |
|||
<div class="col-md-6"> |
|||
<strong>From Date:</strong> <span id="start_date">N/A</span> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<strong>To Date:</strong> <span id="end_date">N/A</span> |
|||
</div> |
|||
</div> |
|||
<div class="row pb-2"> |
|||
<div class="col-md-6"> |
|||
<strong>Description:</strong> <span id="description_modal">N/A</span> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<strong>Campaign Category:</strong> <span id="category">N/A</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</form> |
|||
|
|||
|
|||
<!-- Bootstrap Tabs for Switching Tables --> |
|||
<ul class="nav nav-tabs" id="tableTabs" role="tablist" |
|||
style="margin-bottom: 10px;"> |
|||
<li class="nav-item"><a class="nav-link active mr-2" |
|||
id="performance-tab" data-toggle="tab" href="#performanceTable" |
|||
role="tab" aria-controls="performanceTable" aria-selected="true">Agent |
|||
With Report</a></li> |
|||
<li class="nav-item"><a class="nav-link" id="question-tab" |
|||
data-toggle="tab" href="#questionTable" role="tab" |
|||
aria-controls="questionTable" aria-selected="false">Feedback |
|||
Report</a></li> |
|||
</ul> |
|||
|
|||
<!-- <div class="modal-body"> --> |
|||
<div class="tab-content"> |
|||
<!-- Performance Table --> |
|||
<div class="tab-pane fade show active" id="performanceTable" |
|||
role="tabpanel" aria-labelledby="performance-tab"> |
|||
<div class="table-responsive"> |
|||
<table id="agentperformanceDatatable" |
|||
class="table table-striped table-bordered table-hover dataTable" |
|||
role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th rowspan="2" class="text-center">S.No</th> |
|||
<th rowspan="2" class="text-center">Agent Name</th> |
|||
<th colspan="4" class="text-center">Performance</th> |
|||
<th colspan="5" class="text-center">Call Results</th> |
|||
</tr> |
|||
<tr role="row"> |
|||
<th class="text-center">Assigned Calls</th> |
|||
<th class="text-center">Finished</th> |
|||
<th class="text-center">Pending Calls</th> |
|||
<th class="text-center">Completion (%)</th> |
|||
<th class="text-center">Information Given</th> |
|||
<th class="text-center">Call Back</th> |
|||
<th class="text-center">Unattended</th> |
|||
<th class="text-center">Switch Off</th> |
|||
<th class="text-center">Wrong Number</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Questions Table --> |
|||
<div class="tab-pane fade" id="questionTable" role="tabpanel" |
|||
aria-labelledby="question-tab"> |
|||
|
|||
<table id="questionDatatable" |
|||
class="table table-striped table-bordered table-hover dataTable" |
|||
role="grid"> |
|||
|
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th class="text-center ">S.No</th> |
|||
<th class="text-center no-sort">Question</th> |
|||
<th class="text-center no-sort">Answers</th> |
|||
</tr> |
|||
|
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
</table> |
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
<!-- </div> --> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" |
|||
data-dismiss="modal">Cancel</button> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
|
|||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<!-- sweet alert --> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
<script type="text/javascript"> |
|||
$(document).ready(function() { |
|||
|
|||
$('#agentperformance').on('shown.bs.modal', function () { |
|||
|
|||
let buttons = [ |
|||
{ |
|||
extend: 'pageLength', |
|||
className: 'btn btn-warning' |
|||
}, |
|||
{ |
|||
title: 'Data export', |
|||
extend: 'copyHtml5', |
|||
text: 'Copy', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'excelHtml5', |
|||
text: 'Excel', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'csvHtml5', |
|||
text: 'CSV', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'pdfHtml5', |
|||
text: 'PDF', |
|||
className: 'btn btn-secondary' |
|||
} |
|||
]; |
|||
|
|||
if (!$.fn.DataTable.isDataTable('#agentperformanceDatatable')) { |
|||
$('#agentperformanceDatatable').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: '30vh', |
|||
scrollX: true, // Enable horizontal scrolling |
|||
|
|||
buttons: buttons, |
|||
fixedHeader: false, |
|||
autoWidth: true, |
|||
responsive: false, |
|||
searching: true, |
|||
select: false, |
|||
processing: false, |
|||
}); |
|||
} |
|||
|
|||
}); |
|||
|
|||
var table = $('#QaqcDatatable').DataTable({ |
|||
|
|||
|
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '50vh', |
|||
scrollX: true, |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: false, |
|||
responsive: false, |
|||
searching:true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
|
|||
/* var questiontable = $('#questionDatatable').DataTable({ |
|||
|
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '50vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: false, |
|||
autoWidth: true, |
|||
responsive: false, |
|||
searching:true, |
|||
select: false, |
|||
processing: false |
|||
}); */ |
|||
|
|||
// Ensure DataTable columns adjust when modal is shown |
|||
/* $('#agentperformance').on('shown.bs.modal', function () { |
|||
if ($.fn.DataTable.isDataTable('#questionDatatable')) { |
|||
let questionDatatable = $('#questionDatatable').DataTable(); |
|||
questionDatatable.columns.adjust().draw(); |
|||
} |
|||
}); */ |
|||
|
|||
// Initialize DataTable with export buttons |
|||
|
|||
//const overallcountapiUrl = "/gcc/api/callcenterqaqc/qaqctasklist/overalltaskcount"; // Replace with your API endpoint |
|||
|
|||
const tableApiUrl = "/gcc/api/campaignreport/getcampaignData"; |
|||
const agentApiUrl = "/gcc/api/campaignreport/getagentdatacount"; |
|||
const excelurl = "/gcc/api/campaign/getCampaignQuestionData"; |
|||
|
|||
//const dataTableElement = $("#QaqcDatatable").DataTable(); // Initialize DataTable |
|||
//const questionTableElement = $("#questionDatatable").DataTable(); // Initialize DataTable |
|||
|
|||
// Fetch Data Function |
|||
|
|||
|
|||
|
|||
// Fetch and Populate Table Data Function |
|||
|
|||
const fetchTableData = async (startDate = "", endDate = "") => { |
|||
$('#pageLoader').show(); |
|||
try { |
|||
const params = new URLSearchParams(); |
|||
if (startDate) params.append("startDate", startDate); |
|||
if (endDate) params.append("endDate", endDate); |
|||
|
|||
const response = await fetch(`${tableApiUrl}?${params.toString()}`); |
|||
const tableData = await response.json(); |
|||
|
|||
// Update DataTable with new data |
|||
table.clear(); // Clear existing data |
|||
tableData.forEach((row, index) => { |
|||
table.row.add([ |
|||
|
|||
`<div style="text-align: center;">${index + 1}</div>`, |
|||
`<button class="btn btn-success" data-campaign_id="${row.campaign_id}" |
|||
onclick="handleTaskButtonClick('${row.campaign_id}')">${row.campaign_name}</button>`, |
|||
`<div style="text-align: center;"> ${row.start_date} - ${row.end_date}</div>`, |
|||
`<div style="text-align: center;">${row.category_name}</div>`, |
|||
`<div style="text-align: center;">${row.assigned_count}</div>`, |
|||
`<div style="text-align: center;">${row.total_count}</div>`, |
|||
`<div style="text-align: center;">${row.not_assigned_count}</div>`, |
|||
`<div style="text-align: center;">${row.informationgiven_count}</div>`, |
|||
`<div style="text-align: center;">${row.callback_count}</div>`, |
|||
`<div style="text-align: center;">${row.unattended_count}</div>`, |
|||
`<div style="text-align: center;">${row.switchoff_count}</div>`, |
|||
`<div style="text-align: center;">${row.wrongnumber_count}</div>`, |
|||
`<button class="btn btn-primary downloadExcelBtn" |
|||
data-categoryid="${row.category_id}" |
|||
data-campaignid="${row.campaign_id}" |
|||
|
|||
> |
|||
Download Excel |
|||
</button>` |
|||
|
|||
]); |
|||
|
|||
}); |
|||
table.draw(); // Redraw the DataTable with the updated data |
|||
|
|||
} catch (error) { |
|||
console.error("Error fetching table data:", error); |
|||
}finally { |
|||
$('#pageLoader').hide(); // Hide loader in both success or error |
|||
} |
|||
|
|||
}; |
|||
|
|||
$(document).on("click", ".downloadExcelBtn", function () { |
|||
let categoryId = $(this).data("categoryid"); |
|||
let campaignId = $(this).data("campaignid"); |
|||
|
|||
|
|||
console.log("dfd",categoryId); |
|||
console.log("d",campaignId); |
|||
//console.log("Row Data:", row); |
|||
|
|||
|
|||
window.location.href = `/gcc/api/campaignreport/download-excel?categoryId=${categoryId}&campaignId=${campaignId}`; |
|||
}); |
|||
|
|||
let today = new Date(); |
|||
|
|||
// Get the first day of the current month (this should give 2024-11-01 for November) |
|||
let firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); |
|||
|
|||
// Manually format the date as yyyy-mm-dd without relying on toISOString |
|||
let formattedFirstDay = firstDayOfMonth.getFullYear() + '-' + |
|||
(firstDayOfMonth.getMonth() + 1).toString().padStart(2, '0') + '-' + |
|||
firstDayOfMonth.getDate().toString().padStart(2, '0'); |
|||
|
|||
let formattedToday = today.getFullYear() + '-' + |
|||
(today.getMonth() + 1).toString().padStart(2, '0') + '-' + |
|||
today.getDate().toString().padStart(2, '0'); |
|||
|
|||
// Set the date input values |
|||
$('#startDate').val(formattedFirstDay); |
|||
$('#endDate').val(formattedToday); |
|||
|
|||
// Example: Fetch Data initially without filters |
|||
fetchTableData(formattedFirstDay,formattedToday); |
|||
|
|||
|
|||
// Function to Download Campaign Excel |
|||
|
|||
|
|||
|
|||
|
|||
// Event listener for From Date selection |
|||
$("#startDate").on("change", function() { |
|||
const startDate = $(this).val(); // Get the selected start date |
|||
// Set the min value for To Date to be the selected From Date |
|||
$("#endDate").attr("min", startDate); |
|||
}); |
|||
|
|||
// Event listener for To Date selection |
|||
$("#endDate").on("change", function() { |
|||
const endDate = $(this).val(); // Get the selected end date |
|||
// Set the max value for From Date to be the selected To Date |
|||
$("#startDate").attr("max", endDate); |
|||
}); |
|||
|
|||
// Search Button Click |
|||
document.getElementById("searchBtn").addEventListener("click", () => { |
|||
const startDate = document.getElementById("startDate").value; |
|||
const endDate = document.getElementById("endDate").value; |
|||
|
|||
//console.log("xsnskjx"); |
|||
console.log(startDate); |
|||
|
|||
// Check if startDate or endDate is empty |
|||
if (!startDate || !endDate) { |
|||
Swal.fire({ |
|||
icon: "warning", |
|||
title: "Incomplete Search", |
|||
text: "Please select the Date Before searching", |
|||
confirmButtonText: "OK", |
|||
}); |
|||
} else { |
|||
// Call fetchTableData if dates are provided |
|||
fetchTableData(startDate, endDate); |
|||
} |
|||
}); |
|||
|
|||
|
|||
// Reset Button Click |
|||
document.getElementById("resetBtn").addEventListener("click", () => { |
|||
/* document.getElementById("startDate").value = ""; |
|||
document.getElementById("endDate").value = ""; |
|||
fetchData(); // Fetch data without date filters |
|||
fetchTableData(); */ |
|||
window.location.reload(); |
|||
}); |
|||
|
|||
// Initial Load |
|||
//fetchData(); // Load overall data initially |
|||
//fetchTableData(); |
|||
}); |
|||
|
|||
|
|||
/* function downloadCampaignExcel(campaignId) { |
|||
const excelurl = `/gcc/api/campaign/exportCampaignData?campaign_id=${campaignId}`; |
|||
|
|||
$.ajax({ |
|||
url: excelurl, |
|||
type: 'GET', |
|||
xhrFields: { |
|||
responseType: 'blob' // Ensure response is treated as a Blob (binary file) |
|||
}, |
|||
success: function (data, status, xhr) { |
|||
const blob = new Blob([data], { type: xhr.getResponseHeader('Content-Type') }); |
|||
|
|||
// Extract filename from Content-Disposition header |
|||
let filename = "campaign_data.xlsx"; // Default filename |
|||
const disposition = xhr.getResponseHeader('Content-Disposition'); |
|||
if (disposition && disposition.includes('filename=')) { |
|||
filename = disposition.split('filename=')[1].trim().replace(/['"]/g, ''); // Clean up filename |
|||
} |
|||
|
|||
const downloadUrl = URL.createObjectURL(blob); |
|||
const link = document.createElement("a"); |
|||
link.href = downloadUrl; |
|||
link.setAttribute("download", filename); // Set dynamic filename |
|||
document.body.appendChild(link); |
|||
link.click(); |
|||
document.body.removeChild(link); |
|||
URL.revokeObjectURL(downloadUrl); // Clean up memory |
|||
}, |
|||
error: function (xhr, status, error) { |
|||
console.error("Error downloading Excel file:", error); |
|||
alert("Failed to download the file. Please try again."); |
|||
} |
|||
}); |
|||
} */ |
|||
|
|||
|
|||
|
|||
function handleTaskButtonClick(CampaignId) |
|||
{ |
|||
//console.log("CampaignId",CampaignId); |
|||
|
|||
|
|||
$('#agentperformance').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); |
|||
$('#agentperformance').modal('show'); |
|||
|
|||
// Set default active tab |
|||
$('#performance-tab').tab('show'); |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/campaignreport/getReportCampaignid?campaign_id='+CampaignId, |
|||
type: 'GET', |
|||
contentType: 'application/json', |
|||
success: function (response) { |
|||
if (response && response.length > 0) { |
|||
const campaign = response[0]; |
|||
|
|||
// Populate form fields with response data |
|||
$('#campaign_id').val(campaign.campaign_id); |
|||
$('#category_id').val(campaign.category_id); |
|||
|
|||
|
|||
$('#start_date').text(campaign.start_date || 'N/A'); |
|||
$('#end_date').text(campaign.end_date || 'N/A'); |
|||
$('#description_modal').text(campaign.description || 'N/A'); |
|||
$('#category').text(campaign.category_name || 'N/A'); |
|||
|
|||
// Update modal title dynamically |
|||
$('#exampleModalCenterLabel').html( |
|||
`<b>Campaign ID:</b> ${campaign.campaign_id} and |
|||
|
|||
<b>Created Date:</b> ${campaign.created_date}` |
|||
); |
|||
|
|||
// Open modal |
|||
$('#agentperformance').modal('show'); |
|||
} else { |
|||
console.warn('No data found for the given campaign ID'); |
|||
$('#exampleModalCenterLabel').html('<b>No data found</b>'); |
|||
} |
|||
}, |
|||
error: function (xhr, status, error) { |
|||
console.error('Error fetching campaign details:', error); |
|||
$('#exampleModalCenterLabel').html('<b class="text-danger">Failed to load campaign details</b>'); |
|||
} |
|||
}); |
|||
|
|||
if ($.fn.DataTable.isDataTable('#agentperformanceDatatable')) { |
|||
$('#agentperformanceDatatable').DataTable().clear().destroy(); |
|||
} |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/campaignreport/getagentdatacount?campaign_id='+CampaignId, |
|||
type: 'GET', |
|||
contentType: 'application/json', |
|||
success: function (response) { |
|||
//console.log("response",response); |
|||
if (response && response.length > 0) { |
|||
|
|||
let CtableBody = $('#agentperformanceDatatable tbody'); |
|||
CtableBody.empty(); |
|||
response.forEach((item, index) => { |
|||
let row = ` |
|||
<tr> |
|||
<td class="text-center">${index + 1}</td> |
|||
<td class="text-center">${item.agent_name}</td> |
|||
<td class="text-center">${item.assigned_count || 0}</td> |
|||
<td class="text-center">${item.completed_count || 0}</td> |
|||
<td class="text-center">${item.pending_count || 0}</td> |
|||
<td class="text-center">${item.completed_percentage || 0}%</td> |
|||
<td class="text-center">${item.informationgiven_count || 0}</td> |
|||
<td class="text-center">${item.callback_count || 0}</td> |
|||
<td class="text-center">${item.unattended_count || 0}</td> |
|||
<td class="text-center">${item.switchoff_count || 0}</td> |
|||
<td class="text-center">${item.wrongnumber_count || 0}</td> |
|||
</tr> |
|||
`; |
|||
CtableBody.append(row); |
|||
}); |
|||
} |
|||
else { |
|||
$('#agentperformanceDatatable tbody').html(` |
|||
<tr> |
|||
<td colspan="10" class="text-center">No data available</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
|
|||
}, |
|||
error: function (xhr, status, error) { |
|||
console.error('Error in Fetching Task:', error); |
|||
$('#agentperformanceDatatable tbody').html(` |
|||
<tr> |
|||
<td colspan="10" class="text-center text-danger">Failed to load data</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
}); |
|||
|
|||
if ($.fn.DataTable.isDataTable('#questionDatatable')) { |
|||
$('#questionDatatable').DataTable().clear().destroy(); |
|||
} |
|||
|
|||
|
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/campaignreport/question-answers?campaign_id=' + CampaignId, |
|||
type: 'GET', |
|||
contentType: 'application/json', |
|||
success: function (response) { |
|||
if (response && response.length > 0) { |
|||
|
|||
let Qtable = $('#questionDatatable tbody'); |
|||
Qtable.empty(); // Clear existing data |
|||
|
|||
|
|||
response.forEach((item, index) => { |
|||
let answerColumn = item.answers.map(ans => `${ans.campaign_answer} - ${ans.answer_percentage}%`).join('<br>'); |
|||
|
|||
let row = ` |
|||
<tr> |
|||
<td class="text-center">${index + 1}</td> |
|||
<td class="text-center">${item.questions}</td> |
|||
<td class="text-center">${answerColumn}</td> |
|||
</tr> |
|||
`; |
|||
Qtable.append(row); |
|||
}); |
|||
} else { |
|||
$('#questionDatatable tbody').html(` |
|||
<tr> |
|||
<td colspan="1" class="text-center">No data available</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
}, |
|||
error: function (xhr, status, error) { |
|||
console.error('Error fetching question answers:', error); |
|||
console.error('Error in Fetching Task:', error); |
|||
$('#questionDatatable tbody').html(` |
|||
<tr> |
|||
<td colspan="1" class="text-center text-danger">Failed to load data</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
}); |
|||
|
|||
|
|||
/* $.ajax({ |
|||
url: '/gcc/api/campaignreport/question-answers?campaign_id='+CampaignId, |
|||
type: 'GET', |
|||
contentType: 'application/json', |
|||
success: function (response) { |
|||
let QtableBody = $('#questionDatatable tbody'); |
|||
QtableBody.empty(); |
|||
|
|||
if (response && response.length > 0) { |
|||
response.forEach((item, index) => { |
|||
// Extract Yes and No answers from the array |
|||
let yesAnswer = item.answers.find(ans => ans.campaign_answer.toLowerCase() === "yes") || { answer_percentage: 0 }; |
|||
let noAnswer = item.answers.find(ans => ans.campaign_answer.toLowerCase() === "no") || { answer_percentage: 0 }; |
|||
|
|||
// Create the table row with percentage values |
|||
let row = ` |
|||
<tr> |
|||
<td >${index + 1}</td> |
|||
<td >${item.questions}</td> |
|||
<td >${yesAnswer.answer_percentage}%</td> |
|||
<td >${noAnswer.answer_percentage}%</td> |
|||
</tr> |
|||
`; |
|||
QtableBody.append(row); |
|||
}); |
|||
} else { |
|||
QtableBody.html(` |
|||
<tr> |
|||
<td colspan="4" class="text-center">No data available</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
}, |
|||
error: function (xhr, status, error) { |
|||
console.error('Error fetching question answers:', error); |
|||
$('#questionDatatable tbody').html(` |
|||
<tr> |
|||
<td colspan="4" class="text-center text-danger">Failed to load data</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
}); */ |
|||
|
|||
} |
|||
|
|||
$(document).ready(function() { |
|||
|
|||
$('#agentperformance').on('shown.bs.modal', function () { |
|||
|
|||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { |
|||
let target = $(e.target).attr("href"); // Get the active tab |
|||
|
|||
if (target === "#questionTable") { |
|||
if ($.fn.DataTable.isDataTable('#questionDatatable')) { |
|||
$('#questionDatatable').DataTable().clear().destroy(); |
|||
|
|||
} |
|||
} |
|||
}); |
|||
|
|||
let buttons = [ |
|||
{ |
|||
extend: 'pageLength', |
|||
className: 'btn btn-warning' |
|||
}, |
|||
{ |
|||
title: 'Data export', |
|||
extend: 'copyHtml5', |
|||
text: 'Copy', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'excelHtml5', |
|||
text: 'Excel', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'csvHtml5', |
|||
text: 'CSV', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'pdfHtml5', |
|||
text: 'PDF', |
|||
className: 'btn btn-secondary' |
|||
} |
|||
]; |
|||
|
|||
if (!$.fn.DataTable.isDataTable('#questionDatatable')) { |
|||
$('#questionDatatable').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: '30vh', |
|||
scrollX: true, // Enable horizontal scrolling |
|||
buttons: buttons, |
|||
fixedHeader: true, |
|||
autoWidth: false, |
|||
responsive: false, |
|||
searching: true, |
|||
select: false, |
|||
processing: false, |
|||
}); |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
}); |
|||
|
|||
|
|||
</script> |
|||
|
|||
|
|||
|
|||
</body> |
|||
</html> |
|||
1956
src/main/resources/templates/modules/callcenter/createcampaign.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,416 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"> |
|||
|
|||
</head> |
|||
<style> |
|||
.required { |
|||
color: red; |
|||
} |
|||
|
|||
.card-box { |
|||
box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px; |
|||
} |
|||
</style> |
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-8"> |
|||
<div class="page-header-title"> |
|||
<i class="far fa-calendar-plus bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Dashboard QAQC</h5> |
|||
<span>1913 QAQC Dashboard</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="/gcc/index"><i |
|||
class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">1913 QAQC</li> |
|||
<li class="breadcrumb-item" aria-current="page">Agents |
|||
QAQC</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Dashboard</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12"> |
|||
<div class="card"> |
|||
<div |
|||
class="card-header d-flex justify-content-between align-items-center"> |
|||
<h3 class="mb-0" style="font-weight: bold;font-size: large;"><span th:text="${agent[0]['agent_name']}" style="font-weight: bold;font-size: large;"></span>'s Task Dashboard</h3> |
|||
|
|||
|
|||
|
|||
<form id="dateForm" method="POST" |
|||
action="/gcc/callcenterqaqc/agent/agentgrievancedashboard"> |
|||
<div class="d-flex"> |
|||
<!-- Date input fields for start and end dates --> |
|||
|
|||
<input type="date" class="form-control mr-2" id="startDate" |
|||
name="startDate" placeholder="Start Date"> <input |
|||
type="date" class="form-control mr-2" id="endDate" |
|||
name="endDate" placeholder="Start Date"> |
|||
|
|||
<!-- Hidden form to submit the selected dates --> |
|||
|
|||
<!-- <input type="hidden" id="hiddenStartDate" name="startDate"> |
|||
<input type="hidden" id="hiddenEndDate" name="endDate"> --> |
|||
<button type="submit" class="btn btn-primary" id="searchBtn">Search</button> |
|||
<button type="button" class="btn btn-secondary ml-2" |
|||
id="resetBtn">Reset</button> |
|||
</div> |
|||
</form> |
|||
|
|||
|
|||
|
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row mt-2"> |
|||
<!-- Total Calls Assigned --> |
|||
<div class="col-xl-3 col-md-6 col-sm-12"> |
|||
<div class="card card-box p-3 text-center h-100"> |
|||
<h6 class="text-facebook mb-2"> |
|||
<b>Total Calls Assigned</b> |
|||
</h6> |
|||
<h4 class="text-twitter fw-700 mt-3" |
|||
th:text="${details[0]?.Total_Calls_assigned}"> |
|||
<!-- Display Total Calls Assigned --> |
|||
|
|||
</h4> |
|||
</div> |
|||
</div> |
|||
<!-- QA&QC Calls --> |
|||
<div class="col-xl-3 col-md-6 col-sm-12"> |
|||
<div class="card card-box p-3 text-center h-100"> |
|||
<h6 class="text-facebook mb-2"> |
|||
<b>QA&QC Calls</b> |
|||
</h6> |
|||
<h4 class="text-twitter fw-700 mt-3" |
|||
th:text=" ${details[0]?.Closed_Call_count}"> |
|||
<!-- Display Closed Calls Count --> |
|||
|
|||
</h4> |
|||
</div> |
|||
</div> |
|||
<!-- In-progress Calls --> |
|||
<div class="col-xl-2 col-md-6 col-sm-12"> |
|||
<div class="card card-box p-3 text-center h-100"> |
|||
<h6 class="text-facebook mb-2"> |
|||
<b>In-progress Calls</b> |
|||
</h6> |
|||
<h4 class="text-twitter fw-700 mt-3" |
|||
th:text="${details[0]?.Inprogress_Call_count}"> |
|||
<!-- Display In-progress Calls Count --> |
|||
|
|||
</h4> |
|||
</div> |
|||
</div> |
|||
<!-- Follow-up Calls --> |
|||
<div class="col-xl-2 col-md-6 col-sm-12"> |
|||
<div class="card card-box p-3 text-center h-100"> |
|||
<h6 class="text-facebook mb-2"> |
|||
<b>Official Follow-up Calls</b> |
|||
</h6> |
|||
<h4 class="text-twitter fw-700 mt-3" |
|||
th:text="${details[0]?.Followup_Call_count}"> |
|||
<!-- Display Follow-up Calls Count --> |
|||
|
|||
</h4> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-xl-2 col-md-6 col-sm-12"> |
|||
<div class="card card-box p-3 text-center h-100"> |
|||
<h6 class="text-facebook mb-2"> |
|||
<b>Public Follow-up Calls</b> |
|||
</h6> |
|||
<h4 class="text-twitter fw-700 mt-3" |
|||
th:text="${details[0]?.PublicFollowup_Call_count}"> |
|||
<!-- Display Follow-up Calls Count --> |
|||
|
|||
</h4> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="card-block"> |
|||
<div class="card-header"> |
|||
<h3 style="font-weight: bold;">Your Performance Overview</h3> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row mt-2"> |
|||
<div class="col-xl-3 col-md-6 col-sm-12"> |
|||
<div class="card card-box p-3 text-center h-100"> |
|||
<h6 class="text-facebook mb-2"> |
|||
<b>Total Assigned</b> |
|||
</h6> |
|||
<h4 class="text-twitter fw-700 mt-3" |
|||
th:text="${details2[0]?.total_data_count}"></h4> |
|||
</div> |
|||
</div> |
|||
<!-- QA&QC Calls --> |
|||
<div class="col-xl-3 col-md-6 col-sm-12"> |
|||
<div class="card card-box p-3 text-center h-100"> |
|||
<h6 class="text-facebook mb-2"> |
|||
<b>Finished</b> |
|||
</h6> |
|||
<h4 class="text-twitter fw-700 mt-3" |
|||
th:text="${details2[0]?.completed_count}"></h4> |
|||
</div> |
|||
</div> |
|||
<!-- In-progress Calls --> |
|||
<div class="col-xl-3 col-md-6 col-sm-12"> |
|||
<div class="card card-box p-3 text-center h-100"> |
|||
<h6 class="text-facebook mb-2"> |
|||
<b>Pending</b> |
|||
</h6> |
|||
<h4 class="text-twitter fw-700 mt-3" |
|||
th:text="${details2[0]?.pending_count}"></h4> |
|||
</div> |
|||
</div> |
|||
<!-- Follow-up Calls --> |
|||
<div class="col-xl-3 col-md-6 col-sm-12"> |
|||
<div class="card card-box p-3 text-center h-100"> |
|||
<h6 class="text-facebook mb-2"> |
|||
<b>Completion (%)</b> |
|||
</h6> |
|||
<h4 class="text-twitter fw-700 mt-3" |
|||
th:text="${details2[0]?.completed_percentage}+ '%'"></h4> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"><h3><b>Your Task lists</b></h3></div> |
|||
<div class="card-body"> |
|||
<div class="table-responsive"> |
|||
|
|||
<table id="AgentQaqcDatatable" |
|||
class="table table-striped table-bordered table-hover dataTable" |
|||
role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr> |
|||
|
|||
<th rowspan="2" class="text-center">S.No</th> |
|||
<th rowspan="2" class="text-center">Task ID</th> |
|||
<th rowspan="2" class="text-center">Date</th> |
|||
<th rowspan="2" class="text-center">Type</th> |
|||
<th class="text-center" colspan="4">Performance</th> |
|||
|
|||
</tr> |
|||
<tr> |
|||
<th class="text-center">Assigned</th> |
|||
<th class="text-center">Completed</th> |
|||
<th class="text-center">Pending</th> |
|||
<th class="text-center">Completion Percentage(%)</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr th:each="task, iterStat : ${tasks}"> |
|||
<td class="text-center" th:text="${iterStat.count}"></td> |
|||
<td class="text-center" th:text="${task['taskid']}"></td> |
|||
<td class="text-center" th:text="${task['cdate']}"></td> |
|||
<td class="text-center" th:text="${task['call_category']}"></td> |
|||
<td class="text-center" th:text="${task['assigned']}"></td> |
|||
<td class="text-center" th:text="${task['callstaken']}"></td> |
|||
<td class="text-center" th:text="${task['pending']}"></td> |
|||
<td class="text-center" |
|||
th:text="${task['percentage'] + '%'}"></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- in the code use to show the download different type microsoft --> |
|||
|
|||
<!-- Include jQuery and Bootstrap JavaScript --> |
|||
|
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
|
|||
<script |
|||
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<!-- sweet alert --> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
<script type="text/javascript"> |
|||
$(document).ready(function() { |
|||
|
|||
var table = $('#AgentQaqcDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '50vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
searching: true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
/* let startDate = new Date().toISOString().split('T')[0]; // Current date in 'yyyy-mm-dd' format |
|||
let endDate = new Date().toISOString().split('T')[0]; // Current date in 'yyyy-mm-dd' format |
|||
|
|||
console.log("Start Date:", startDate); // Logs the current date |
|||
console.log("End Date:", endDate); */ // Logs the current date |
|||
|
|||
/* $.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/agent/getAgentDashboardData', |
|||
method: 'GET', |
|||
success: function(response) { |
|||
console.log("Response:", response); |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
console.error("Error occurred: ", error); |
|||
} |
|||
}); */ |
|||
|
|||
/* window.onload = function () { |
|||
// Get the current date in YYYY-MM-DD format |
|||
const today = new Date().toISOString().split('T')[0]; |
|||
|
|||
//Set the hidden inputs with the current date |
|||
document.getElementById('hiddenStartDate').value = today; |
|||
document.getElementById('hiddenEndDate').value = today; |
|||
|
|||
// Set the date input fields to empty |
|||
document.getElementById('startDate').value = ''; |
|||
document.getElementById('endDate').value = ''; |
|||
|
|||
|
|||
// Retrieve stored start and end date from sessionStorage (only for the current session) |
|||
const storedStartDate = sessionStorage.getItem('startDate'); |
|||
const storedEndDate = sessionStorage.getItem('endDate'); |
|||
|
|||
if (storedStartDate && storedEndDate) { |
|||
document.getElementById('startDate').value = storedStartDate; |
|||
document.getElementById('endDate').value = storedEndDate; |
|||
} |
|||
}; */ |
|||
|
|||
document.getElementById('resetBtn').addEventListener('click', function () { |
|||
event.preventDefault(); |
|||
|
|||
window.location.href="/gcc/callcenterqaqc/agent/agentgrievancedashboard"; |
|||
|
|||
}); |
|||
|
|||
|
|||
document.getElementById('searchBtn').addEventListener('click', function (e) { |
|||
const startDate = document.getElementById('startDate').value; |
|||
const endDate = document.getElementById('endDate').value; |
|||
|
|||
//console.log("startdate: ", startDate); |
|||
//console.log("enddate: ", endDate); |
|||
|
|||
if (!startDate || !endDate) { |
|||
// Show SweetAlert if dates are missing |
|||
Swal.fire({ |
|||
icon: 'warning', // Warning icon |
|||
title: 'Please select both start and end dates.', |
|||
showConfirmButton: true, // Show a confirmation button |
|||
timer: 3000 // Optional: Auto-close after 3 seconds |
|||
}); |
|||
|
|||
e.preventDefault(); // Prevent form submission if validation fails |
|||
return; |
|||
} |
|||
|
|||
|
|||
// Submit the form to fetch the data based on the selected date range |
|||
document.getElementById('dateForm').submit(); // This will submit the form |
|||
}); |
|||
|
|||
|
|||
|
|||
}); |
|||
|
|||
|
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
1171
src/main/resources/templates/modules/callcenterqaqc/agentqaqccalls.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1015
src/main/resources/templates/modules/callcenterqaqc/agentqaqcfollowupcalls.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1022
src/main/resources/templates/modules/callcenterqaqc/agentqaqcinprogresscalls.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1088
src/main/resources/templates/modules/callcenterqaqc/agentqaqcpublicfollowupcalls.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1000
src/main/resources/templates/modules/callcenterqaqc/complaintstatus.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,783 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"> |
|||
|
|||
</head> |
|||
<style> |
|||
#viewModal .modal-body { |
|||
max-height: 70vh; /* Limit the height to 70% of the viewport */ |
|||
overflow-y: auto; /* Enable vertical scrolling */ |
|||
} |
|||
|
|||
.custom-doc-btn { |
|||
height: 20px; |
|||
width: 80px; |
|||
font-size: 9px; |
|||
font-weight:bold; |
|||
text-align: center; |
|||
padding: 0px; |
|||
border:1px solid grey; |
|||
} |
|||
.col-md-3{ |
|||
padding-bottom: 10px; |
|||
} |
|||
|
|||
</style> |
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-8"> |
|||
<div class="page-header-title"> |
|||
<i class="fa fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Sofa and Bed Collection</h5> |
|||
<span>1913 Sofa and Bed Collection - Cancel Page</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="/gcc/index"><i |
|||
class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">Sofa and Bed Collection</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Cancel Complaints</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<span style="font-size: medium;font-weight: bold;">Details Filters</span> |
|||
<span th:text="${userId}" style="display:none;" id="userIdSpan"></span> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="startDate" style="font-size: medium;">From Date:<span class="text-danger">*</span></label> |
|||
<input type="date" id="startDate" class="form-control"> |
|||
</div> |
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="endDate" style="font-size: medium;">To Date:<span class="text-danger">*</span></label> |
|||
<input type="date" id="endDate" class="form-control"> |
|||
</div> |
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="mobileNumber" style="font-size: medium;">Mobile Number:</label> |
|||
<input type="number" id="mobileNumber" class="form-control"> |
|||
</div> |
|||
<!-- <div class="col-sm-2 mb-2"> |
|||
<label for="requestNumber" style="font-size: medium;">Request Number:</label> |
|||
<input type="number" id="requestNumber" class="form-control"> |
|||
</div> --> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12 d-flex justify-content-center"> |
|||
<button type="submit" id="searchBtn" |
|||
class="btn btn-primary mx-2">Search</button> |
|||
|
|||
<button class="btn btn-danger mx-2" id="resetBtn" |
|||
name="reset" type="reset">Reset</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<span style="font-size: medium;font-weight: bold;">Complaints Open And Pending List</span> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="table-responsive"> |
|||
|
|||
<table id="ReportDatatable" |
|||
class="table table-striped table-bordered table-hover dataTable" |
|||
role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
|
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center" width="100px;">Date</th> |
|||
<th class="text-center no-sort">Request Number</th> |
|||
<th class="text-center no-sort">Public Name</th> |
|||
<th class="text-center">Public Mobile no</th> |
|||
<th class="text-center no-sort">Address</th> |
|||
<th class="text-center">Street Name</th> |
|||
<th class="text-center">Current Status</th> |
|||
<th class="text-center">Action</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<!-- Modal --> |
|||
<div class="modal fade" id="viewModal" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> |
|||
<div class="modal-dialog modal-lg"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="viewLabel">Request Details</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body" id="modalBodyContent"> |
|||
<!-- Dynamic content loads here --> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Image Modal --> |
|||
<div class="modal fade" id="docModal" tabindex="-1" aria-hidden="true"> |
|||
<div class="modal-dialog modal-dialog-scrollable modal-lg"> |
|||
<div class="modal-content border-0"> |
|||
<div class="modal-body p-0 text-center" style="background-color: #f8f9fa;"> |
|||
<div id="docContainer" style="max-height: 90vh; overflow: auto;"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<!-- Add the 'Please wait' text below the spinner --> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<!-- in the code use to show the download different type microsoft --> |
|||
|
|||
<!-- Include jQuery and Bootstrap JavaScript --> |
|||
|
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
|
|||
<script |
|||
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<!-- sweet alert --> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
<script type="text/javascript"> |
|||
|
|||
$(document).ready(function() { |
|||
|
|||
$('#mobileNumber').on('input', function () { |
|||
this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10); |
|||
}); |
|||
|
|||
var table = $('#ReportDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '80vh', |
|||
scrollX: false, |
|||
|
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: false, |
|||
responsive: false, |
|||
searching: true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
// Event listener for From Date selection |
|||
$("#startDate").on("change", function() { |
|||
const startDate = $(this).val(); // Get the selected start date |
|||
// Set the min value for To Date to be the selected From Date |
|||
$("#endDate").attr("min", startDate); |
|||
}); |
|||
|
|||
// Event listener for To Date selection |
|||
$("#endDate").on("change", function() { |
|||
const endDate = $(this).val(); // Get the selected end date |
|||
// Set the max value for From Date to be the selected To Date |
|||
$("#startDate").attr("max", endDate); |
|||
}); |
|||
|
|||
document.getElementById('resetBtn').addEventListener('click', function () { |
|||
event.preventDefault(); |
|||
|
|||
location.reload(); |
|||
|
|||
}); |
|||
|
|||
document.getElementById('searchBtn').addEventListener('click', function (e) { |
|||
|
|||
|
|||
let startDate = document.getElementById('startDate').value; |
|||
let endDate = document.getElementById('endDate').value; |
|||
let mobileNumber = document.getElementById('mobileNumber').value; |
|||
/* let requestNumber = document.getElementById('requestNumber').value; */ |
|||
|
|||
|
|||
console.log("startdate: ",startDate); |
|||
console.log("enddate: ",endDate); |
|||
console.log("mobileNumber: ",mobileNumber); |
|||
/* console.log("requestNumber: ",requestNumber); */ |
|||
|
|||
if(!startDate && !endDate){ |
|||
|
|||
Swal.fire({ |
|||
icon: 'info', |
|||
title: 'Missing', |
|||
text: 'Please Select Both Dates', |
|||
showConfirmButton: true, |
|||
timer: 3000 |
|||
}); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if(!startDate){ |
|||
|
|||
Swal.fire({ |
|||
icon: 'info', |
|||
title: 'Missing', |
|||
text: 'Please Select From Date', |
|||
showConfirmButton: true, |
|||
timer: 3000 |
|||
}); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
if(!endDate){ |
|||
|
|||
Swal.fire({ |
|||
icon: 'info', |
|||
title: 'Missing', |
|||
text: 'Please Select To Date', |
|||
showConfirmButton: true, |
|||
timer: 3000 |
|||
}); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
/* if(!mobileNumber){ |
|||
|
|||
Swal.fire({ |
|||
icon: 'info', |
|||
title: 'Missing', |
|||
text: 'Please Enter Mobile Number', |
|||
showConfirmButton: true, |
|||
timer: 3000 |
|||
}); |
|||
e.preventDefault(); |
|||
return; |
|||
} */ |
|||
|
|||
|
|||
if(mobileNumber){ |
|||
|
|||
if (!/^\d{10}$/.test(mobileNumber)) { |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Invalid Mobile Number', |
|||
text: 'Please enter a valid 10-digit mobile number.' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (/^0{10}$/.test(mobileNumber)) { |
|||
|
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Invalid Mobile Number', |
|||
text: 'Mobile number cannot be all zeros.' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (mobileNumber.startsWith('0')) { |
|||
|
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Invalid Mobile Number', |
|||
text: 'Mobile number cannot start with zero.' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (/^(\d)\1{9}$/.test(mobileNumber)) { |
|||
|
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Invalid Mobile Number', |
|||
text: 'Mobile number cannot have all digits the same.' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
} |
|||
|
|||
const params = new URLSearchParams({ |
|||
startDate:startDate, |
|||
endDate:endDate, |
|||
mobile:mobileNumber |
|||
}); |
|||
$('#pageLoader').show(); |
|||
$.ajax({ |
|||
type: "GET", |
|||
url: `/gcc/api/domestic_waste/getpendingcomplaints?${params.toString()}`, // Append query string to URL |
|||
contentType: "application/json", |
|||
success: function (response) { |
|||
console.log("API Response:", response); |
|||
$('#pageLoader').hide(); |
|||
if (response.status === "success") { |
|||
console.log("Details Array:", response.data); |
|||
// Ensure details is an array and has at least one entry |
|||
if (Array.isArray(response.data) && response.data.length > 0) { |
|||
|
|||
let tableContainer = $('#ReportDatatable'); |
|||
let table = $('#ReportDatatable').DataTable({ |
|||
destroy: true, |
|||
searching: true, |
|||
autoWidth: false, |
|||
paging: true, |
|||
info: true, |
|||
data: response.data, |
|||
columns: [ |
|||
{ |
|||
data: null, |
|||
render: (data, type, row, meta) => meta.row + 1, |
|||
className: 'text-center' |
|||
}, |
|||
{ data: 'created_date', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'request_id', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'user_name', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'mobile', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'address', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'street_name', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'status_name', defaultContent: '-', className: 'text-center' } , |
|||
{ |
|||
data: 'request_id', |
|||
render: function (data, type, row) { |
|||
return `<button class="btn btn-primary btn-sm btn-view" data-id="${data}">View</button>`; |
|||
}, |
|||
className: 'text-center' |
|||
} |
|||
|
|||
], |
|||
dom: 'Bfrtip', |
|||
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' |
|||
} |
|||
], |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '80vh', |
|||
scrollX: true, |
|||
responsive: false, |
|||
searching: true |
|||
}); |
|||
|
|||
|
|||
// Bind view buttons |
|||
tableContainer.on('click', '.btn-view', function () { |
|||
let id = $(this).data('id'); |
|||
console.log("req_id="+id); |
|||
$.ajax({ |
|||
url: `/gcc/api/domestic_waste/getDetailsByReqId?requestId=${id}`, |
|||
method: 'GET', |
|||
success: function (response) { |
|||
console.log("response="+response.data); |
|||
|
|||
if(response.status === "success"){ |
|||
|
|||
const details = response.data[0]; |
|||
|
|||
// ✅ Handle items array |
|||
let itemsHTML = ''; |
|||
if (details.items && details.items.length > 0) { |
|||
itemsHTML += ` |
|||
<table class="table table-bordered table-striped"> |
|||
<thead class="thead-light"> |
|||
<tr> |
|||
<th class="text-center">S.No</th> |
|||
<th class="text-center">Item Name</th> |
|||
<th class="text-center">Quantity</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
`; |
|||
details.items.forEach((item, index) => { |
|||
itemsHTML += ` |
|||
<tr> |
|||
<td class="text-center">${index + 1}</td> |
|||
<td class="text-center">${item.item_name || '-'}</td> |
|||
<td class="text-center">${item.quantity || '-'}</td> |
|||
</tr> |
|||
`; |
|||
}); |
|||
itemsHTML += ` |
|||
</tbody> |
|||
</table> |
|||
`; |
|||
} else { |
|||
itemsHTML = `<p class="text-center text-muted mb-0">No items available.</p>`; |
|||
} |
|||
|
|||
const ImagePhotoBtn= details.image_url ? `<button class="btn btn-sm btn-light custom-doc-btn" onclick="openDocModal('${details.image_url}')">View</button>` : '-'; |
|||
|
|||
const content = ` |
|||
|
|||
<div class="container-fluid"> |
|||
|
|||
<!-- Personal Details --> |
|||
<div class="card mb-3"> |
|||
|
|||
<div class="card-header bg-primary text-white">Personal Details</div> |
|||
<div class="card-body row"> |
|||
|
|||
<div class="col-md-3"><strong>Name:</strong></div> |
|||
<div class="col-md-3">${details.user_name || '-'}</div> |
|||
<div class="col-md-3"><strong>Mobile:</strong></div> |
|||
<div class="col-md-3">${details.mobile || '-'}</div> |
|||
<div class="col-md-3"><strong>Zone:</strong></div> |
|||
<div class="col-md-3">${details.zone || '-'}</div> |
|||
<div class="col-md-3"><strong>Division:</strong></div> |
|||
<div class="col-md-3">${details.division || '-'}</div> |
|||
<div class="col-md-3"><strong>Address:</strong></div> |
|||
<div class="col-md-3">${details.address || '-'}</div> |
|||
<div class="col-md-3"><strong>Street:</strong></div> |
|||
<div class="col-md-3">${details.street_name || '-'}</div> |
|||
<div class="col-md-3"><strong>User Uploaded Image:</strong></div> |
|||
<div class="col-md-3">${ImagePhotoBtn || '-'}</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Item Details --> |
|||
<div class="card mb-3"> |
|||
<div class="card-header bg-success text-white">Item Details</div> |
|||
<div class="card-body"> |
|||
${itemsHTML} |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Remarks Section --> |
|||
<div class="card mb-3"> |
|||
<p class="mt-2 ml-3">Remarks<span class="text-danger">*</span></p> |
|||
<div class="card-body text-center"> |
|||
<textarea id="remarksText" class="form-control mb-3" rows="3" placeholder="Enter remarks..."></textarea> |
|||
<button class="btn btn-danger" id="submitRemarksBtn" data-id="${id}"> |
|||
Cancel |
|||
</button> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
`; |
|||
|
|||
$('#modalBodyContent').html(content); |
|||
$('#viewLabel').text( `${id} - Details`); |
|||
$('#viewModal').modal('show'); |
|||
} |
|||
|
|||
else if (response.status === "nodata") { |
|||
$('#modalBodyContent').html("<p>No data found for this request.</p>"); |
|||
$('#viewLabel').text( `${id} - Details`); |
|||
$('#viewModal').modal('show'); |
|||
return; |
|||
} |
|||
|
|||
else if (response.status === "error") { |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
return; |
|||
} |
|||
else{ |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text:'Something went wrong!' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
}, |
|||
error: function (xhr) { |
|||
console.error("Error fetching detail:", xhr.responseText); |
|||
alert("Failed to fetch vendor details."); |
|||
} |
|||
}); |
|||
}); |
|||
} |
|||
|
|||
} |
|||
else if (response.status === "nodata") { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'No Data', |
|||
text: 'No Pending data available.' |
|||
}); |
|||
} |
|||
else if (response.status === "error") { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
} |
|||
else { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
error: function (error) { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
|
|||
}); |
|||
|
|||
|
|||
// Handle Remarks Submit button click |
|||
$(document).on('click', '#submitRemarksBtn', function () { |
|||
const requestId = $(this).data('id'); |
|||
const remarks = $('#remarksText').val().trim(); |
|||
let userId = document.getElementById('userIdSpan').textContent; |
|||
|
|||
if (remarks === "") { |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Remarks Required', |
|||
text: 'Please enter remarks before Cancelling.' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
console.log("Request ID:", requestId); |
|||
console.log("Remarks:", remarks); |
|||
console.log("userId:", userId); |
|||
|
|||
// ✅ Confirmation popup |
|||
Swal.fire({ |
|||
title: 'Are you sure to Cancel?', |
|||
text: "You won't be able to revert this complaint!", |
|||
icon: 'warning', |
|||
showCancelButton: true, |
|||
confirmButtonColor: '#3085d6', |
|||
cancelButtonColor: '#d33', |
|||
confirmButtonText: 'Yes, Cancel it!', |
|||
cancelButtonText: 'No' |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
|
|||
cancelRequest(requestId, remarks, userId); |
|||
} else { |
|||
|
|||
console.log("User cancelled the action."); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
function cancelRequest(requestId, remarks, userId){ |
|||
|
|||
$('#pageLoader').show(); |
|||
$.ajax({ |
|||
type: "POST", |
|||
url: `/gcc/api/domestic_waste/cancelbyagents`, |
|||
data:{ |
|||
requestId:requestId, |
|||
remarks:remarks, |
|||
userId:userId |
|||
}, |
|||
success: function (response) { |
|||
$('#pageLoader').hide(); |
|||
console.log("API Response:", response); |
|||
|
|||
if(response.status === "success"){ |
|||
Swal.fire({ |
|||
icon: 'success', |
|||
title: 'Success', |
|||
text: response.message, |
|||
allowOutsideClick: false, |
|||
allowEscapeKey: false, |
|||
allowEnterKey: false, |
|||
showConfirmButton: true |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
location.reload(); |
|||
} |
|||
}); |
|||
} |
|||
else{ |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
} |
|||
}, |
|||
error: function (error) { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
|
|||
} |
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
function openDocModal(fileUrl) { |
|||
const container = document.getElementById('docContainer'); |
|||
const ext = fileUrl.split('.').pop().toLowerCase(); |
|||
|
|||
if (ext === 'pdf') { |
|||
container.innerHTML = `<iframe src="${fileUrl}" style="width:100%; height:90vh;" frameborder="0"></iframe>`; |
|||
} else { |
|||
container.innerHTML = `<img src="${fileUrl}" class="img-fluid" style="max-height:90vh; max-width:100%;" onerror="No image">`; |
|||
} |
|||
|
|||
$('#docModal').modal('show'); |
|||
} |
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,459 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"> |
|||
|
|||
</head> |
|||
<style> |
|||
|
|||
</style> |
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-8"> |
|||
<div class="page-header-title"> |
|||
<i class="fa fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Sofa and Bed Collection</h5> |
|||
<span>1913 Sofa and Bed Collection - Check Status</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="/gcc/index"><i |
|||
class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">Sofa and Bed Collection</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Check Status</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<span style="font-size: medium;font-weight: bold;">Enter Registered Mobile Number</span> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<!-- <div class="col-sm-2 mb-2"> |
|||
<label for="startDate" style="font-size: medium;">From Date:</label> |
|||
<input type="date" id="startDate" class="form-control"> |
|||
</div> |
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="endDate" style="font-size: medium;">To Date:</label> |
|||
<input type="date" id="endDate" class="form-control"> |
|||
</div> --> |
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="mobileNumber" style="font-size: medium;">Mobile Number:</label> |
|||
<input type="number" id="mobileNumber" class="form-control"> |
|||
</div> |
|||
<!-- <div class="col-sm-2 mb-2"> |
|||
<label for="requestNumber" style="font-size: medium;">Request Number:</label> |
|||
<input type="number" id="requestNumber" class="form-control"> |
|||
</div> --> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12 d-flex justify-content-center"> |
|||
<button type="submit" id="searchBtn" |
|||
class="btn btn-primary mx-2">Search</button> |
|||
|
|||
<button class="btn btn-danger mx-2" id="resetBtn" |
|||
name="reset" type="reset">Reset</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<span style="font-size: medium;font-weight: bold;">Reports List</span> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="table-responsive"> |
|||
|
|||
<table id="ReportDatatable" |
|||
class="table table-striped table-bordered table-hover dataTable" |
|||
role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
|
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Date</th> |
|||
<th class="text-center no-sort">Request Number</th> |
|||
<th class="text-center no-sort">Public Name</th> |
|||
<th class="text-center">Public Mobile no</th> |
|||
<th class="text-center">Zone</th> |
|||
<th class="text-center">Ward</th> |
|||
<th class="text-center">Item Type</th> |
|||
<th class="text-center no-sort">Address</th> |
|||
<th class="text-center">Street Name</th> |
|||
<th class="text-center">Remarks</th> |
|||
<th class="text-center">Current Status</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<!-- Add the 'Please wait' text below the spinner --> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<!-- in the code use to show the download different type microsoft --> |
|||
|
|||
<!-- Include jQuery and Bootstrap JavaScript --> |
|||
|
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
|
|||
<script |
|||
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<!-- sweet alert --> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
<script type="text/javascript"> |
|||
|
|||
$(document).ready(function() { |
|||
|
|||
$('#mobileNumber').on('input', function () { |
|||
this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10); |
|||
}); |
|||
|
|||
var table = $('#ReportDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '80vh', |
|||
scrollX: true, |
|||
|
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: false, |
|||
searching: true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
// Event listener for From Date selection |
|||
/* $("#startDate").on("change", function() { |
|||
const startDate = $(this).val(); // Get the selected start date |
|||
// Set the min value for To Date to be the selected From Date |
|||
$("#endDate").attr("min", startDate); |
|||
}); |
|||
|
|||
// Event listener for To Date selection |
|||
$("#endDate").on("change", function() { |
|||
const endDate = $(this).val(); // Get the selected end date |
|||
// Set the max value for From Date to be the selected To Date |
|||
$("#startDate").attr("max", endDate); |
|||
}); */ |
|||
|
|||
document.getElementById('resetBtn').addEventListener('click', function () { |
|||
event.preventDefault(); |
|||
|
|||
location.reload(); |
|||
|
|||
}); |
|||
|
|||
document.getElementById('searchBtn').addEventListener('click', function (e) { |
|||
|
|||
|
|||
/* let startDate = document.getElementById('startDate').value; |
|||
let endDate = document.getElementById('endDate').value; */ |
|||
let mobileNumber = document.getElementById('mobileNumber').value; |
|||
/* let requestNumber = document.getElementById('requestNumber').value; */ |
|||
|
|||
|
|||
/* console.log("startdate: ",startDate); |
|||
console.log("enddate: ",endDate); */ |
|||
console.log("mobileNumber: ",mobileNumber); |
|||
/* console.log("requestNumber: ",requestNumber); */ |
|||
|
|||
if(!mobileNumber){ |
|||
|
|||
Swal.fire({ |
|||
icon: 'info', |
|||
title: 'Missing', |
|||
text: 'Please Enter Mobile Number', |
|||
showConfirmButton: true, |
|||
timer: 3000 |
|||
}); |
|||
e.preventDefault(); |
|||
return; |
|||
} |
|||
|
|||
|
|||
if(mobileNumber){ |
|||
|
|||
if (!/^\d{10}$/.test(mobileNumber)) { |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Invalid Mobile Number', |
|||
text: 'Please enter a valid 10-digit mobile number.' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (/^0{10}$/.test(mobileNumber)) { |
|||
|
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Invalid Mobile Number', |
|||
text: 'Mobile number cannot be all zeros.' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (mobileNumber.startsWith('0')) { |
|||
|
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Invalid Mobile Number', |
|||
text: 'Mobile number cannot start with zero.' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
if (/^(\d)\1{9}$/.test(mobileNumber)) { |
|||
|
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Invalid Mobile Number', |
|||
text: 'Mobile number cannot have all digits the same.' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
const params = new URLSearchParams({ |
|||
mobile:mobileNumber |
|||
}); |
|||
$('#pageLoader').show(); |
|||
$.ajax({ |
|||
type: "GET", |
|||
url: `/gcc/api/domestic_waste/checkstatusbymobile?${params.toString()}`, // Append query string to URL |
|||
contentType: "application/json", |
|||
success: function (response) { |
|||
console.log("API Response:", response); |
|||
$('#pageLoader').hide(); |
|||
if (response.status === "success") { |
|||
console.log("Details Array:", response.data); |
|||
// Ensure details is an array and has at least one entry |
|||
if (Array.isArray(response.data) && response.data.length > 0) { |
|||
let table = $('#ReportDatatable').DataTable({ |
|||
destroy: true, |
|||
searching: true, |
|||
autoWidth: true, |
|||
paging: true, |
|||
info: true, |
|||
data: response.data, |
|||
columns: [ |
|||
{ |
|||
data: null, |
|||
render: (data, type, row, meta) => meta.row + 1, |
|||
className: 'text-center' |
|||
}, |
|||
{ data: 'cdate', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'request_id', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'user_name', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'mobile', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'zone', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'division', defaultContent: '-', className: 'text-center' }, |
|||
{ |
|||
data: 'items', |
|||
className: 'text-center', |
|||
render: function (data, type, row) { |
|||
if (Array.isArray(data) && data.length > 0) { |
|||
return data.map(item => `${item.item_name} - ${item.quantity}`).join(', '); |
|||
} |
|||
return '-'; |
|||
} |
|||
}, |
|||
{ data: 'address', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'street_name', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'remarks', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'status', defaultContent: '-', className: 'text-center' } |
|||
|
|||
], |
|||
dom: 'Bfrtip', |
|||
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' |
|||
} |
|||
], |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '80vh', |
|||
scrollX: true, |
|||
responsive: false, |
|||
searching: true |
|||
}); |
|||
} |
|||
|
|||
} |
|||
else if (response.status === "no data") { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'No Data', |
|||
text: 'No data available for the Mobile Number.' |
|||
}); |
|||
} |
|||
else if (response.status === "error") { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
} |
|||
else { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
error: function (error) { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
|
|||
}); |
|||
|
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
1579
src/main/resources/templates/modules/callcenterqaqc/domesticwastecomplaints.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,613 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"> |
|||
|
|||
</head> |
|||
<style> |
|||
|
|||
</style> |
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-8"> |
|||
<div class="page-header-title"> |
|||
<i class="fa fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>PGR Reports</h5> |
|||
<span>1913 PGR Reports</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="/gcc/index"><i |
|||
class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">Reports</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Overall Reports</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<span style="font-size: medium;font-weight: bold;">Reports Filters</span> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="startDate" style="font-size: medium;">From Date:</label> |
|||
<input type="date" id="startDate" class="form-control"> |
|||
</div> |
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="endDate" style="font-size: medium;">To Date:</label> |
|||
<input type="date" id="endDate" class="form-control"> |
|||
</div> |
|||
|
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="regiondropdown" style="font-size: medium;">Region:</label> |
|||
<select id="regiondropdown" class="form-control"> |
|||
<option value="">Select</option> |
|||
<option value="North Region">North Region</option> |
|||
<option value="Central Region">Central Region</option> |
|||
<option value="South Region">South Region</option> |
|||
|
|||
</select> |
|||
</div> |
|||
|
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="stsdropdown" style="font-size: medium;">Status:</label> |
|||
<select id="stsdropdown" class="form-control"> |
|||
<option value="total">Select</option> |
|||
<option value="processing">Processing</option> |
|||
<option value="reopened">Reopened</option> |
|||
<option value="pendingwithinsla">Pending Within SLA</option> |
|||
<option value="pendingbelow15days">Pending Below 15days</option> |
|||
<option value="pending15to30days">Pending 15 to 30 days</option> |
|||
<option value="pending30to60days">Pending 30 to 60 days</option> |
|||
<option value="pendingabove60days">Pending Above 60 days</option> |
|||
<option value="redressed">Action Taken Level 1</option> |
|||
<option value="closed">Action Taken Level 2</option> |
|||
<option value="completed">Final Closure</option> |
|||
</select> |
|||
</div> |
|||
|
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="dropdown4" style="font-size: medium;">Group:</label> |
|||
<select id="dropdown4" class="form-control"> |
|||
<option value="">Select</option> |
|||
<!-- <option value="">general</option> --> |
|||
<!-- Add options here --> |
|||
</select> |
|||
</div> |
|||
|
|||
|
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="dropdown1" style="font-size: medium;">Type:</label> |
|||
<select id="dropdown1" class="form-control"> |
|||
<option value="">Select</option> |
|||
<!-- <option value="Cleanliness in Parks">Cleanliness in Parks</option> --> |
|||
|
|||
</select> |
|||
</div> |
|||
|
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="dropdown3" style="font-size: medium;">Mode:</label> |
|||
<select id="dropdown3" class="form-control"> |
|||
<option value="">Select</option> |
|||
<!-- <option value="">INTERNET</option> --> |
|||
|
|||
</select> |
|||
</div> |
|||
|
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="dropdown2" style="font-size: medium;">Zone:</label> |
|||
<select id="dropdown2" class="form-control"> |
|||
<option value="">Select</option> |
|||
<!-- <option value="N01">N01</option> --> |
|||
<!-- <option value="ALL">ALL</option> --> |
|||
|
|||
</select> |
|||
</div> |
|||
|
|||
</div> |
|||
<!-- <div class="row mt-2"> |
|||
|
|||
</div> --> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12 d-flex justify-content-center"> |
|||
<button type="submit" id="searchBtn" |
|||
class="btn btn-primary mx-2">Search</button> |
|||
|
|||
<button class="btn btn-danger mx-2" id="resetBtn" |
|||
name="reset" type="reset">Reset</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<span style="font-size: medium;font-weight: bold;">Reports List</span> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="table-responsive"> |
|||
|
|||
<table id="ReportDatatable" |
|||
class="table table-striped table-bordered table-hover dataTable" |
|||
role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
|
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center no-sort">Complaint Number</th> |
|||
<th class="text-center">Complaint Type</th> |
|||
<th class="text-center">Complaint Group</th> |
|||
<th class="text-center">Mode</th> |
|||
|
|||
<th class="text-center">Department</th> |
|||
<th class="text-center">Zone</th> |
|||
<th class="text-center">Ward</th> |
|||
<th class="text-center no-sort">Public Name</th> |
|||
<th class="text-center no-sort">Address</th> |
|||
<th class="text-center">Public Mobile no</th> |
|||
<th class="text-center">Media Link</th> |
|||
<th class="text-center">Assign To</th> |
|||
<th class="text-center">Official Contact Number</th> |
|||
<th class="text-center">Current Status</th> |
|||
<th class="text-center">Complaint Opened Date</th> |
|||
<th class="text-center">Complaint Redressed Date</th> |
|||
<th class="text-center">Complaint Closed Date</th> |
|||
<th class="text-center">Complaint Reopen Date</th> |
|||
<th class="text-center">Complaint Completed Date</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<!-- Add the 'Please wait' text below the spinner --> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<!-- in the code use to show the download different type microsoft --> |
|||
|
|||
<!-- Include jQuery and Bootstrap JavaScript --> |
|||
|
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
|
|||
<script |
|||
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<!-- sweet alert --> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
<script type="text/javascript"> |
|||
document.addEventListener("DOMContentLoaded", function () { |
|||
const complaintTypeDropdown = document.getElementById('dropdown1'); |
|||
const complaintGroupDropdown = document.getElementById('dropdown4'); |
|||
const complaintModeDropdown = document.getElementById('dropdown3'); |
|||
const complaintZoneDropdown = document.getElementById('dropdown2'); |
|||
const regionDropdown = document.getElementById('regiondropdown'); |
|||
|
|||
let allZones = []; |
|||
// Load Complaint Groups |
|||
fetch('/gcc/api/callcenterqaqc/getComplaintGroup') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
// Clear existing options |
|||
complaintGroupDropdown.innerHTML = `<option value="">Select</option>`; |
|||
|
|||
// Add options from the API response |
|||
data.forEach(complaintGroupName => { |
|||
complaintGroupDropdown.innerHTML += `<option value="${complaintGroupName}">${complaintGroupName}</option>`; |
|||
}); |
|||
}) |
|||
.catch(error => { |
|||
console.error('Error fetching complaint groups:', error); |
|||
}); |
|||
|
|||
// Event Listener for Complaint Group Change |
|||
complaintGroupDropdown.addEventListener('change', function () { |
|||
const selectedGroup = complaintGroupDropdown.value; |
|||
|
|||
if (selectedGroup) { |
|||
// Fetch Complaint Types based on selected group |
|||
fetch(`/gcc/api/callcenterqaqc/getComplaintTypesByGroup?group=${encodeURIComponent(selectedGroup)}`) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
// Clear existing options |
|||
complaintTypeDropdown.innerHTML = `<option value="">Select</option>`; |
|||
|
|||
// Add options from the API response |
|||
data.forEach(complaintTypeName => { |
|||
complaintTypeDropdown.innerHTML += `<option value="${complaintTypeName}">${complaintTypeName}</option>`; |
|||
}); |
|||
}) |
|||
.catch(error => { |
|||
console.error('Error fetching complaint types:', error); |
|||
}); |
|||
} else { |
|||
// Clear complaint type dropdown if no group is selected |
|||
complaintTypeDropdown.innerHTML = `<option value="">Select</option>`; |
|||
} |
|||
}); |
|||
|
|||
|
|||
// Load all Modes |
|||
fetch('/gcc/api/callcenterqaqc/getModes') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
// Clear existing options |
|||
complaintModeDropdown.innerHTML = `<option value="">Select</option>`; |
|||
|
|||
// Add options from the API response |
|||
data.forEach(complaintMode => { |
|||
complaintModeDropdown.innerHTML += `<option value="${complaintMode}">${complaintMode}</option>`; |
|||
}); |
|||
}) |
|||
.catch(error => { |
|||
console.error('Error fetching complaint groups:', error); |
|||
}); |
|||
|
|||
|
|||
// Load all zones and store them globally |
|||
fetch('/gcc/api/callcenterqaqc/getZones') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
allZones = data; // Store zones globally |
|||
updateZoneDropdown(); // Populate zones initially |
|||
}) |
|||
.catch(error => console.error('Error fetching complaint zones:', error)); |
|||
|
|||
// Event Listener for Region Dropdown Change |
|||
regionDropdown.addEventListener('change', updateZoneDropdown); |
|||
|
|||
// Function to update Zone Dropdown based on Region selection |
|||
function updateZoneDropdown() { |
|||
const selectedRegion = regionDropdown.value; |
|||
complaintZoneDropdown.innerHTML = `<option value="">Select</option>`; |
|||
|
|||
let filteredZones = []; |
|||
|
|||
if (selectedRegion === "North Region") { |
|||
filteredZones = allZones.filter(zone => zone >= "N01" && zone <= "N05"); |
|||
} else if (selectedRegion === "Central Region") { |
|||
filteredZones = allZones.filter(zone => zone >= "N06" && zone <= "N10"); |
|||
} else if (selectedRegion === "South Region") { |
|||
filteredZones = allZones.filter(zone => zone >= "N11" && zone <= "N15"); |
|||
} else { |
|||
// Show all if no region is selected |
|||
filteredZones = allZones; |
|||
} |
|||
|
|||
filteredZones.forEach(zone => { |
|||
complaintZoneDropdown.innerHTML += `<option value="${zone}">${zone}</option>`; |
|||
}); |
|||
} |
|||
|
|||
}); |
|||
|
|||
$(document).ready(function() { |
|||
|
|||
var table = $('#ReportDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '80vh', |
|||
scrollX: true, |
|||
|
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: false, |
|||
searching: true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
// Event listener for From Date selection |
|||
$("#startDate").on("change", function() { |
|||
const startDate = $(this).val(); // Get the selected start date |
|||
// Set the min value for To Date to be the selected From Date |
|||
$("#endDate").attr("min", startDate); |
|||
}); |
|||
|
|||
// Event listener for To Date selection |
|||
$("#endDate").on("change", function() { |
|||
const endDate = $(this).val(); // Get the selected end date |
|||
// Set the max value for From Date to be the selected To Date |
|||
$("#startDate").attr("max", endDate); |
|||
}); |
|||
|
|||
document.getElementById('resetBtn').addEventListener('click', function () { |
|||
event.preventDefault(); |
|||
|
|||
window.location.href="/gcc/callcenterqaqcreports/overallreport"; |
|||
|
|||
}); |
|||
|
|||
document.getElementById('searchBtn').addEventListener('click', function (e) { |
|||
|
|||
|
|||
let startDate = document.getElementById('startDate').value; |
|||
let endDate = document.getElementById('endDate').value; |
|||
|
|||
let status = document.getElementById('stsdropdown').value; |
|||
let group= document.getElementById('dropdown4').value; |
|||
let type= document.getElementById('dropdown1').value; |
|||
let mode= document.getElementById('dropdown3').value; |
|||
let zone= document.getElementById('dropdown2').value; |
|||
let region=document.getElementById('regiondropdown').value; |
|||
|
|||
console.log("startdate: ",startDate); |
|||
console.log("enddate: ",endDate); |
|||
console.log("status: ",status); |
|||
console.log("group: ",group); |
|||
console.log("type: ",type); |
|||
console.log("mode: ",mode); |
|||
console.log("zone: ",zone); |
|||
console.log("region: ",region); |
|||
if (!startDate && !endDate) { |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Error', |
|||
text: 'Please Select Both From Date and To Date', |
|||
showConfirmButton: true, |
|||
timer: 3000 |
|||
}); |
|||
e.preventDefault(); // Prevent the default action |
|||
return; // Stop further execution |
|||
} |
|||
const params = new URLSearchParams({ |
|||
startDate: startDate, |
|||
endDate: endDate, |
|||
status: status, |
|||
group: group, |
|||
type: type, |
|||
mode: mode, |
|||
zone: zone, |
|||
region:region |
|||
}); |
|||
$('#pageLoader').show(); |
|||
$.ajax({ |
|||
type: "GET", |
|||
url: `/gcc/api/callcenterqaqc/getfilterreport?${params.toString()}`, // Append query string to URL |
|||
contentType: "application/json", |
|||
success: function (response) { |
|||
console.log("API Response:", response); |
|||
$('#pageLoader').hide(); |
|||
if (response.status === "success") { |
|||
console.log("Details Array:", response.details); |
|||
// Ensure details is an array and has at least one entry |
|||
if (Array.isArray(response.details) && response.details.length > 0) { |
|||
let table = $('#ReportDatatable').DataTable({ |
|||
destroy: true, |
|||
searching: true, |
|||
autoWidth: true, |
|||
paging: true, |
|||
info: true, |
|||
data: response.details, |
|||
columns: [ |
|||
{ |
|||
data: null, |
|||
render: (data, type, row, meta) => meta.row + 1, |
|||
className: 'text-center' |
|||
}, |
|||
{ data: 'Complaint Number', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'Complaint Type', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'Complaint Group', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'Complaint Mode', defaultContent: '-', className: 'text-center' }, |
|||
|
|||
{ data: 'Department', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'Zone', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'Ward', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'Complaint Person Name', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'Address', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'Complaint Person Number', defaultContent: '-', className: 'text-center' }, |
|||
{ |
|||
data: 'Media Link', |
|||
defaultContent: '-', |
|||
className: 'text-center', |
|||
render: function (data, type, row) { |
|||
if (!data || data === "null" || data.trim() === "") { |
|||
return '-'; |
|||
} |
|||
// ✅ Make it a clickable hyperlink opening in a new tab |
|||
return `<a href="${data}" target="_blank" style="color: #007bff; text-decoration: underline;">${data}</a>`; |
|||
} |
|||
}, |
|||
{ data: 'Assign To', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'Official Contact Number', defaultContent: '-', className: 'text-center',render: function (data, type, row) { |
|||
return (data === null || data === "null") ? '-' : data; |
|||
} }, |
|||
{ data: 'Current Status', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'Complaint Opened Date', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'Complaint Redressed Date', defaultContent: '-', className: 'text-center',render: function (data, type, row) { |
|||
return (data === null || data === "null") ? '-' : data; |
|||
} }, |
|||
{ data: 'Complaint Closed Date', defaultContent: '-', className: 'text-center',render: function (data, type, row) { |
|||
return (data === null || data === "null") ? '-' : data; |
|||
} }, |
|||
{ data: 'Complaint Reopen Date', defaultContent: '-', className: 'text-center',render: function (data, type, row) { |
|||
return (data === null || data === "null") ? '-' : data; |
|||
} }, |
|||
{ data: 'Complaint Completed Date', defaultContent: '-', className: 'text-center',render: function (data, type, row) { |
|||
return (data === null || data === "null") ? '-' : data; |
|||
} } |
|||
|
|||
], |
|||
dom: 'Bfrtip', |
|||
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' |
|||
} |
|||
], |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '80vh', |
|||
scrollX: true, |
|||
responsive: false, |
|||
searching: true |
|||
}); |
|||
} |
|||
|
|||
} |
|||
else if (response.status === "nodata") { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'No Data', |
|||
text: 'No data available for the selected criteria.' |
|||
}); |
|||
} |
|||
else if (response.status === "error") { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
} |
|||
else { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
error: function (error) { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || 'Something went wrong!' |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
|
|||
}); |
|||
|
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
2145
src/main/resources/templates/modules/callcenterqaqc/pgrcomplaints.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,597 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<style> |
|||
.required{ |
|||
color: red; |
|||
} |
|||
.editAgentName { |
|||
color: black; /* Default color */ |
|||
text-decoration: none; /* Remove underline */ |
|||
transition: color 0.1s ease-in-out; /* Smooth color transition */ |
|||
} |
|||
|
|||
.editAgentName:hover { |
|||
color: blue; /* Change color to blue on hover */ |
|||
text-decoration: underline; /* Optional: add underline on hover */ |
|||
} |
|||
/* Mobile screens - targeting devices with a max width of 767px */ |
|||
@media (max-width: 767px) |
|||
{ |
|||
#qaqcRequestForm label{ |
|||
margin-top: 10px; |
|||
} |
|||
} |
|||
</style> |
|||
<body> |
|||
|
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-8"> |
|||
<div class="page-header-title"> |
|||
<i class="fas fa-edit bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Admin Settings</h5> |
|||
<span>1913 Admin Setting for Select Agents inbound or outbound</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="/gcc/index"><i |
|||
class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">Admin Settings</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Admin Settings</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
|
|||
|
|||
|
|||
<div class="col-md-12"> |
|||
<div class="card" style="margin-top: 0px;"> |
|||
<div class="card-header justify-content-between align-items-center"> |
|||
<h3><b>Admin Settings</b></h3> |
|||
</div> |
|||
<div class="card-body"> |
|||
|
|||
|
|||
<div class="form-group"> |
|||
<div class="row"> |
|||
<div class="col-sm-12 col-md-3"> |
|||
<label for="productivity_count">Productivity Count Per Agent<span class="required">*</span></label> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
id="productivity_count" |
|||
th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].productivity_count : 0}" |
|||
> |
|||
</div> |
|||
<div class="col-sm-12 col-md-3"> |
|||
<label for="total_count">Total Agents</label> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
id="total_count" |
|||
th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].total_count : 0}" |
|||
readonly> |
|||
</div> |
|||
<div class="col-sm-12 col-md-3"> |
|||
<label for="assigned">Assigned Agents</label> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
id="assigned" |
|||
th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].assigned : 0}" |
|||
readonly> |
|||
</div> |
|||
<div class="col-sm-12 col-md-3"> |
|||
<label for="notassigned">Not Assigned Agents</label> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
id="notassigned" |
|||
th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].notassigned : 0}" |
|||
readonly> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<div class="row mt-3"> |
|||
<div class="col-sm-12 col-md-3"> |
|||
<label for="inbound_count">Inbound Agents</label> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
id="inbound_count" |
|||
th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].inbound_count : 0}" |
|||
readonly> |
|||
</div> |
|||
|
|||
<div class="col-sm-12 col-md-3"> |
|||
<label for="outbound_count">Outbound Agents</label> |
|||
<input |
|||
type="number" |
|||
class="form-control" |
|||
id="outbound_count" |
|||
th:value="${Counts != null && !Counts.isEmpty() ? Counts[0].outbound_count : 0}" |
|||
readonly> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="form-group text-center"> |
|||
<button type="submit" class="btn btn-primary" id="requestSubmit">Submit</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-block"> |
|||
<div class="page-header-title"> |
|||
<h5 style="margin: 0; font-weight: bold;">Agent List</h5> |
|||
<hr> |
|||
</div> |
|||
|
|||
<div> |
|||
<table id="QaqcDatatable" class="table table-bordered table-hover dataTable" role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th class="text-center">S.No</th> |
|||
<th class="text-center">Agent ID</th> |
|||
<th class="text-center">Username</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Phone No</th> |
|||
<th class="text-center "> |
|||
<div class="d-inline-flex align-items-center"> |
|||
<input type="checkbox" id="selectAllInbound" title="Select All InBound" style="margin-right: 5px;"> |
|||
<span>InBound</span> |
|||
</div> |
|||
</th> |
|||
<th class="text-center"> |
|||
<div class="d-inline-flex align-items-center"> |
|||
<input type="checkbox" id="selectAllOutbound" title="Select All OutBound" style="margin-right: 5px;"> |
|||
<span>OutBound</span> |
|||
</div> |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<!-- Populate the table dynamically using Thymeleaf --> |
|||
<tr th:each="agent, iterStat : ${Agents}"> |
|||
<td th:text="${iterStat.index + 1}" class="text-center"></td> |
|||
<td th:text="${agent.agent_id}" class="text-center"></td> |
|||
<td th:text="${agent.username}" class="text-center"></td> |
|||
<td class="text-center"> |
|||
<a href="#" th:text="${agent.agent_name}" |
|||
th:attr="data-id=${agent.agent_id}, data-name=${agent.agent_name}" |
|||
class="editAgentName" |
|||
data-toggle="modal" data-target="#editAgentModal"></a> |
|||
</td> |
|||
<td th:text="${agent.mobile_number}" class="text-center"></td> |
|||
<td class="text-center"> |
|||
<!-- Inbound checkbox, checked if calling_type is INBOUND --> |
|||
<input type="checkbox" th:id="'inbound_' + ${agent.agent_id}" th:checked="${'INBOUND'.equals(agent.calling_type)}"> |
|||
</td> |
|||
<td class="text-center"> |
|||
<!-- Outbound checkbox, checked if calling_type is OUTBOUND --> |
|||
<input type="checkbox" th:id="'outbound_' + ${agent.agent_id}" th:checked="${'OUTBOUND'.equals(agent.calling_type)}"> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<!-- Center the Submit button --> |
|||
<div class="text-center mt-2"> |
|||
<button type="button" class="btn btn-primary" id="submitBtn">Click to Assign</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<!-- Add the 'Please wait' text below the spinner --> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Edit Agent Modal --> |
|||
<div class="modal fade" id="editAgentModal" tabindex="-1" role="dialog" aria-labelledby="editAgentModalLabel" aria-hidden="true"> |
|||
<div class="modal-dialog" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="editAgentModalLabel">Edit Agent Name</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<form id="editAgentForm"> |
|||
<input type="hidden" id="editAgentId"> <!-- Hidden input for agent_id --> |
|||
<div class="form-group"> |
|||
<label for="editAgentName">Agent Name</label> |
|||
<input type="text" class="form-control" id="editAgentName" required> |
|||
</div> |
|||
<button type="submit" class="btn btn-primary">Save Changes</button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
|
|||
<script type="text/javascript"> |
|||
|
|||
$(document).ready(function () { |
|||
// When clicking the agent name |
|||
$(".editAgentName").click(function () { |
|||
let agentId = $(this).data("id"); // Get agent ID |
|||
let agentName = $(this).data("name"); // Get agent name |
|||
|
|||
$("#editAgentId").val(agentId); // Set ID in hidden field |
|||
$("#editAgentName").val(agentName); // Set name in input field |
|||
}); |
|||
|
|||
// Handle Save button inside modal |
|||
$("#editAgentForm").submit(function (e) { |
|||
e.preventDefault(); // Prevent form from reloading page |
|||
|
|||
let updatedName = $("#editAgentName").val(); |
|||
let agentId = $("#editAgentId").val(); |
|||
|
|||
|
|||
console.log("Updated Agent ID:", agentId); |
|||
console.log("Updated Name:", updatedName); |
|||
|
|||
// Here, you can send the updated name to the server via AJAX |
|||
$.ajax({ |
|||
type: "POST", |
|||
url: "/gcc/api/callcenterqaqc/adminsettings/updateagentname", |
|||
contentType: "application/json", |
|||
data: JSON.stringify({ agent_id: agentId, agent_name: updatedName }), |
|||
success: function (response) { |
|||
if (response.status === "success") { |
|||
Swal.fire({ |
|||
allowOutsideClick: false, |
|||
allowEscapeKey: false, |
|||
allowEnterKey: false, |
|||
icon: "success", |
|||
title: "Success", |
|||
text: response.message, |
|||
confirmButtonText: "OK" |
|||
}).then(() => { |
|||
location.reload(); // Reload page after user clicks "OK" |
|||
}); |
|||
} else { |
|||
Swal.fire({ |
|||
icon: "error", |
|||
title: "Error", |
|||
text: response.message |
|||
}); |
|||
} |
|||
}, |
|||
error: function (xhr) { |
|||
let errorMessage = "Error updating agent name!"; |
|||
if (xhr.responseJSON && xhr.responseJSON.message) { |
|||
errorMessage = xhr.responseJSON.message; |
|||
} |
|||
Swal.fire({ |
|||
icon: "error", |
|||
title: "Error", |
|||
text: errorMessage |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
|
|||
$("#editAgentModal").modal("hide"); // Close modal after saving |
|||
}); |
|||
}); |
|||
|
|||
$(document).ready(function() { |
|||
|
|||
var table = $('#QaqcDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[200, 500, -1], |
|||
[ '200 rows','500 rows', 'Show all'] |
|||
], |
|||
scrollY: '80vh', |
|||
|
|||
scrollX: true, |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: false, |
|||
responsive: false, |
|||
searching: true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
}); |
|||
|
|||
$(document).ready(function () { |
|||
let lastClickedColumn = null; // Track the last clicked "Select All" checkbox |
|||
|
|||
// Handle "Select All" for InBound |
|||
$('#selectAllInbound').on('change', function () { |
|||
if (this.checked) { |
|||
// Uncheck the "Select All" checkbox in the OutBound column |
|||
$('#selectAllOutbound').prop('checked', false); |
|||
lastClickedColumn = 'Inbound'; |
|||
|
|||
// Check all checkboxes in the InBound column |
|||
$('#QaqcDatatable tbody input[id^="inbound_"]').prop('checked', true); |
|||
|
|||
// Uncheck all checkboxes in the OutBound column |
|||
$('#QaqcDatatable tbody input[id^="outbound_"]').prop('checked', false); |
|||
} else { |
|||
// Uncheck all checkboxes in the InBound column |
|||
$('#QaqcDatatable tbody input[id^="inbound_"]').prop('checked', false); |
|||
} |
|||
}); |
|||
|
|||
// Handle "Select All" for OutBound |
|||
$('#selectAllOutbound').on('change', function () { |
|||
if (this.checked) { |
|||
// Uncheck the "Select All" checkbox in the InBound column |
|||
$('#selectAllInbound').prop('checked', false); |
|||
lastClickedColumn = 'Outbound'; |
|||
|
|||
// Check all checkboxes in the OutBound column |
|||
$('#QaqcDatatable tbody input[id^="outbound_"]').prop('checked', true); |
|||
|
|||
// Uncheck all checkboxes in the InBound column |
|||
$('#QaqcDatatable tbody input[id^="inbound_"]').prop('checked', false); |
|||
} else { |
|||
// Uncheck all checkboxes in the OutBound column |
|||
$('#QaqcDatatable tbody input[id^="outbound_"]').prop('checked', false); |
|||
} |
|||
}); |
|||
|
|||
// Ensure individual checkboxes deselect the "Select All" if unchecked |
|||
$('#QaqcDatatable').on('change', 'input[id^="inbound_"], input[id^="outbound_"]', function () { |
|||
const agentId = $(this).closest('tr').find('td:eq(1)').text().trim(); |
|||
|
|||
// Uncheck "Select All" if any checkbox in its column is deselected |
|||
if ($(this).attr('id').includes('inbound')) { |
|||
if (!this.checked) { |
|||
$('#selectAllInbound').prop('checked', false); |
|||
} |
|||
$('#outbound_' + agentId).prop('checked', false); |
|||
} else if ($(this).attr('id').includes('outbound')) { |
|||
if (!this.checked) { |
|||
$('#selectAllOutbound').prop('checked', false); |
|||
} |
|||
$('#inbound_' + agentId).prop('checked', false); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
|
|||
$(document).ready(function () { |
|||
// Ensure only one checkbox is selected at a time (Inbound or Outbound) |
|||
$('#QaqcDatatable').on('change', 'input[type="checkbox"]', function () { |
|||
var agentId = $(this).closest('tr').find('td:eq(1)').text().trim(); // Get agent_id from the second column |
|||
if ($(this).attr('id').includes('inbound')) { |
|||
// If Inbound checkbox is selected, uncheck Outbound |
|||
$('#outbound_' + agentId).prop('checked', false); |
|||
} else if ($(this).attr('id').includes('outbound')) { |
|||
// If Outbound checkbox is selected, uncheck Inbound |
|||
$('#inbound_' + agentId).prop('checked', false); |
|||
} |
|||
}); |
|||
|
|||
|
|||
|
|||
$('#submitBtn').click(function () { |
|||
var selectedAgents = []; |
|||
$('#QaqcDatatable tbody tr').each(function () { |
|||
var agentId = $(this).find('td:eq(1)').text().trim(); // Get agent_id from the second column |
|||
var isInboundChecked = $(this).find('input[id="inbound_' + agentId + '"]').prop('checked'); |
|||
var isOutboundChecked = $(this).find('input[id="outbound_' + agentId + '"]').prop('checked'); |
|||
|
|||
// Set calling_type based on the checked checkboxes |
|||
var callingType = null; |
|||
if (isInboundChecked) { |
|||
callingType = 'INBOUND'; |
|||
} else if (isOutboundChecked) { |
|||
callingType = 'OUTBOUND'; |
|||
} |
|||
|
|||
// Add agent object to the array with agent_id and calling_type |
|||
selectedAgents.push({ agent_id: parseInt(agentId, 10), calling_type: callingType }); |
|||
}); |
|||
|
|||
|
|||
|
|||
// Check if no agents were selected and show an alert |
|||
if (selectedAgents.length === 0) { |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'No Selection', |
|||
text: 'Please select at least one agent to proceed.', |
|||
}); |
|||
return; // Stop further execution |
|||
} |
|||
|
|||
$('#pageLoader').show(); |
|||
// Send the selected agents and their calling types to the API |
|||
$.ajax({ |
|||
type: "POST", |
|||
url: "/gcc/api/callcenterqaqc/adminsettings/updateCallType", // Your API endpoint |
|||
data: JSON.stringify(selectedAgents), |
|||
contentType: "application/json", |
|||
success: function (response) { |
|||
$('#pageLoader').hide(); |
|||
// Success: Show success message with Swal |
|||
Swal.fire({ |
|||
icon: 'success', |
|||
title: 'Success', |
|||
text: response.message || 'Agents Assigned Successfully', |
|||
}).then(function () { |
|||
// Reload the page after the Swal is closed |
|||
location.reload(); |
|||
}); |
|||
}, |
|||
error: function (error) { |
|||
$('#pageLoader').hide(); |
|||
// Error: Show error message with Swal |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: error.responseJSON.message || 'Error in Assigning Agents', |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
}); |
|||
|
|||
$(document).ready(function () { |
|||
$('#requestSubmit').click(function (event) { |
|||
event.preventDefault(); // Prevent form submission if it's inside a form |
|||
|
|||
// Get the productivity_count value from the input field |
|||
let productivityCount = $('#productivity_count').val(); |
|||
|
|||
// Check if the value is null, empty, or NaN |
|||
if (!productivityCount || isNaN(parseInt(productivityCount, 10))) { |
|||
// Show an error message using Swal |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Invalid Input', |
|||
text: 'Please enter a valid productivity count.', |
|||
}); |
|||
return; // Stop further execution |
|||
} |
|||
|
|||
// Parse productivityCount as an integer |
|||
productivityCount = parseInt(productivityCount, 10); |
|||
|
|||
// Prepare the data to send |
|||
const data = { productivity_count: productivityCount }; |
|||
|
|||
$('#pageLoader').show(); |
|||
// Send the data to the API using AJAX |
|||
$.ajax({ |
|||
type: "POST", |
|||
url: "/gcc/api/callcenterqaqc/adminsettings/updateproductivity", // Replace with your API endpoint |
|||
data: JSON.stringify(data), |
|||
contentType: "application/json", |
|||
success: function (response) { |
|||
$('#pageLoader').hide(); |
|||
// Show a success message using Swal |
|||
Swal.fire({ |
|||
icon: 'success', |
|||
title: 'Success', |
|||
text: response.message || 'Productivity updated successfully!', |
|||
}).then(function () { |
|||
// Reload the page after the Swal is closed |
|||
location.reload(); |
|||
|
|||
}); |
|||
}, |
|||
error: function (error) { |
|||
$('#pageLoader').hide(); |
|||
// Show an error message using Swal |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: error.responseJSON?.message || 'Failed to update productivity!', |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
}); |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,801 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<style> |
|||
|
|||
#QaqcDatatable th, #QaqcDatatable td { |
|||
text-align: center; |
|||
} |
|||
|
|||
.modal-dialog { |
|||
max-width: 80%; /* Adjust width as needed */ |
|||
} |
|||
.modal-header { |
|||
background-color: #007bff; |
|||
color: #fff; |
|||
} |
|||
.modal-title { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
.boxcard { |
|||
height: 100px; |
|||
border-radius: 20px; |
|||
} |
|||
|
|||
|
|||
.required{ |
|||
color: red; |
|||
} |
|||
.card-box { |
|||
box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px; |
|||
} |
|||
|
|||
@media (max-width: 768px) { |
|||
.card-box { |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
<body> |
|||
|
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-6"> |
|||
<div class="page-header-title"> |
|||
<i class="fas fa-user-graduate bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>QAQC Agent Performance</h5> |
|||
<span>1913 Agent Performance</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-6"> |
|||
<nav class="breadcrumb-container" aria-label="breadcrumb"> |
|||
<ol class="breadcrumb"> |
|||
<li class="breadcrumb-item"><a href="/gcc/index"><i |
|||
class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">1913 Reports</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Agent Performance</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
|
|||
|
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h3>Agent Performance</h3> |
|||
</div> |
|||
<div class="row mt-3 ml-2"> |
|||
|
|||
<div class="col-md-3"> |
|||
<label for="startDate" class="form-label" style="font-size: medium;">From Date:</label> |
|||
<input type="date" id="startDate" class="form-control"> |
|||
</div> |
|||
<div class="col-md-3"> |
|||
<label for="endDate" class="form-label" style="font-size: medium;">To Date:</label> |
|||
<input type="date" id="endDate" class="form-control"> |
|||
</div> |
|||
<div class="col-md-3" style="margin-top: 30px;"> |
|||
<button id="searchBtn" class="btn btn-primary">Search</button> |
|||
<button id="resetBtn" class="btn btn-secondary">Reset</button> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<div class="card-body"> |
|||
|
|||
<div> |
|||
<div class="row mt-2"> |
|||
<div class="col-xl-3 col-md-12"> |
|||
<div class="card card-box p-4"> |
|||
<p class="text-facebook mb-20 text-center mt-2"><b>No Of Agents</b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="totalnoofagentsCount"></h3> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-xl-3 col-md-4"> |
|||
<div class="card card-box p-4"> |
|||
<p class="text-facebook mb-20 text-center mt-2"><b>Assigned Calls</b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="totalassignedCount"></h3> |
|||
</div> |
|||
</div> |
|||
<div class="col-xl-3 col-md-4"> |
|||
<div class="card card-box p-4"> |
|||
<p class="text-facebook mb-20 text-center mt-2"><b>Finished</b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="totalcompleteCount"></h3> |
|||
</div> |
|||
</div> |
|||
<div class="col-xl-3 col-md-4"> |
|||
<div class="card card-box p-4"> |
|||
<p class="text-facebook mb-20 text-center mt-2"><b>Pending Calls</b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="totalpendingCount"></h3> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="cards"> |
|||
<table id="QaqcDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th rowspan="2" class="text-center">S.No</th> |
|||
<th rowspan="2" class="text-center">Agent Name</th> |
|||
<th colspan="4" class="text-center">Performance</th> |
|||
<th colspan="4" class="text-center">Call Results</th> |
|||
</tr> |
|||
<tr role="row"> |
|||
<th class="text-center no-sort">Assigned Calls</th> |
|||
<th class="text-center no-sort">Finished</th> |
|||
<th class="text-center no-sort">Pending Calls</th> |
|||
<th class="text-center no-sort">Completion(%)</th> |
|||
<th class="no-sort">Completed</th> |
|||
<th class="no-sort">Reopen</th> |
|||
<th class="no-sort">Followup</th> |
|||
<th class="no-sort">Others</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<!-- Data will be populated here --> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<!-- Add the 'Please wait' text below the spinner --> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!--agentperformance Modal --> |
|||
<div class="modal fade" id="agentperformance" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="exampleModalCenterLabel">Task Details</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div> |
|||
|
|||
<div class="modal-body"> |
|||
<div class="table-responsive" > |
|||
<table id="agentperformanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" > |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th rowspan="2" class="text-center">S.No</th> |
|||
<th rowspan="2" class="text-center">TaskId</th> |
|||
<th rowspan="2" class="text-center" width="100px;">Date</th> |
|||
<th colspan="4" class="text-center">Performance</th> |
|||
<th colspan="4" class="text-center">Call Results</th> |
|||
</tr> |
|||
<tr role="row"> |
|||
<th class="text-center">Assigned Calls</th> |
|||
<th class="text-center">Finished</th> |
|||
<th class="text-center">Pending Calls</th> |
|||
<th class="text-center no-sort">Completion (%)</th> |
|||
<th class="text-center no-sort">Completed</th> |
|||
<th class="text-center no-sort">Reopen</th> |
|||
<th class="text-center no-sort">Followup</th> |
|||
<th class="text-center no-sort">Others</th> |
|||
|
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
|
|||
</table> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Assign Task Details Modal --> |
|||
<div class="modal fade" id="Assignagentperformance" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel1" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="exampleModalCenterLabel1">Assign Task Details</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
|
|||
<div class="modal-body"> |
|||
<div class="table-responsive"> |
|||
<table id="AssignagentperformanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th class="text-center">S.No</th> |
|||
|
|||
<th class="text-center">Call Category</th> |
|||
<th class="text-center">Complaint Number</th> |
|||
<th class="text-center">Complaint Date</th> |
|||
<th class="text-center">Complaint Person Name</th> |
|||
<th class="text-center">Complaint Mob no</th> |
|||
<th class="text-center">Complaint Type</th> |
|||
<th class="text-center">Official Name</th> |
|||
<th class="text-center">Official Ph no</th> |
|||
<th class="text-center">Call Status</th> |
|||
<th class="text-center">Remarks</th> |
|||
<!-- <th class="text-center">Updated Date</th> --> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<!-- Dynamic content will be populated here --> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
|
|||
<script type="text/javascript"> |
|||
|
|||
$(document).ready(function() { |
|||
|
|||
$('#agentperformance').on('shown.bs.modal', function () { |
|||
|
|||
var buttons = [ |
|||
{ |
|||
extend: 'pageLength', |
|||
className: 'btn btn-warning' |
|||
}, |
|||
{ |
|||
title: 'Data export', |
|||
extend: 'copyHtml5', |
|||
text: 'Copy', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'excelHtml5', |
|||
text: 'Excel', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'csvHtml5', |
|||
text: 'CSV', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'pdfHtml5', |
|||
text: 'PDF', |
|||
className: 'btn btn-secondary' |
|||
} |
|||
]; |
|||
|
|||
$('#agentperformanceDatatable').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', |
|||
scrollX: true, // Enable horizontal scrolling |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
buttons: buttons, |
|||
fixedHeader: false, |
|||
autoWidth: false, |
|||
responsive: true, |
|||
searching: true, |
|||
select: false, |
|||
processing: false, |
|||
}); |
|||
|
|||
|
|||
}); |
|||
|
|||
|
|||
$('#Assignagentperformance').on('shown.bs.modal', function () { |
|||
|
|||
var buttons = [ |
|||
{ |
|||
extend: 'pageLength', |
|||
className: 'btn btn-warning' |
|||
}, |
|||
{ |
|||
title: 'Data export', |
|||
extend: 'copyHtml5', |
|||
text: 'Copy', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'excelHtml5', |
|||
text: 'Excel', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'csvHtml5', |
|||
text: 'CSV', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'pdfHtml5', |
|||
text: 'PDF', |
|||
className: 'btn btn-secondary' |
|||
} |
|||
]; |
|||
|
|||
$('#AssignagentperformanceDatatable').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: '30vh', |
|||
scrollX: true, // Enable horizontal scrolling |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
buttons: buttons, |
|||
fixedHeader: false, |
|||
autoWidth: false, |
|||
responsive: true, |
|||
searching: true, |
|||
select: false, |
|||
processing: false, |
|||
}); |
|||
|
|||
|
|||
}); |
|||
|
|||
var table = $('#QaqcDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '50vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
searching:true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
|
|||
// Initialize DataTable with export buttons |
|||
|
|||
|
|||
|
|||
const overallcountapiUrl = "/gcc/api/callcenterqaqc/agent/getagentperformancecount"; // Replace with your API endpoint |
|||
const tableApiUrl = "/gcc/api/callcenterqaqc/agent/getagentperformancelist"; |
|||
|
|||
|
|||
|
|||
const totalagents = document.getElementById("totalnoofagentsCount"); |
|||
|
|||
const assignedcallscount = document.getElementById("totalassignedCount"); |
|||
const totalcompletedcount = document.getElementById("totalcompleteCount"); |
|||
const pendingcallscount = document.getElementById("totalpendingCount"); |
|||
/* const dataTableElement = $("#QaqcDatatable").DataTable(); // Initialize DataTable |
|||
*/ |
|||
// Fetch Data Function |
|||
const fetchData = async (startDate = "", endDate = "") => { |
|||
|
|||
try { |
|||
const params = new URLSearchParams(); |
|||
if (startDate) params.append("startDate", startDate); |
|||
if (endDate) params.append("endDate", endDate); |
|||
|
|||
const response = await fetch(`${overallcountapiUrl}?${params.toString()}`); |
|||
const data = await response.json(); |
|||
|
|||
//console.log(data); |
|||
// Update Summary Counts |
|||
const firstItem = data[0]; // Get the first object from the array |
|||
totalagents.textContent = firstItem.no_of_agents || 0; |
|||
assignedcallscount.textContent = firstItem.total_calls || 0; |
|||
totalcompletedcount.textContent = firstItem.completed_calls || 0; |
|||
pendingcallscount.textContent = firstItem.pending_calls || 0; |
|||
} catch (error) { |
|||
console.error("Error fetching data:", error); |
|||
} |
|||
}; |
|||
|
|||
|
|||
//fetchData(); |
|||
|
|||
// Fetch and Populate Table Data Function |
|||
const fetchTableData = async (startDate = "", endDate = "") => { |
|||
$('#pageLoader').show(); |
|||
try { |
|||
const params = new URLSearchParams(); |
|||
if (startDate) params.append("startDate", startDate); |
|||
if (endDate) params.append("endDate", endDate); |
|||
|
|||
const response = await fetch(`${tableApiUrl}?${params.toString()}`); |
|||
const tableData = await response.json(); |
|||
|
|||
// Update DataTable with new data |
|||
table.clear(); // Clear existing data |
|||
tableData.forEach((row, index) => { |
|||
|
|||
|
|||
const percentage = row.Assigned |
|||
? Math.round((row.TotalCompleted / row.Assigned) * 100) |
|||
: 0; |
|||
|
|||
table.row.add([ |
|||
|
|||
`<div style="text-align: center;">${index + 1}</div>`, |
|||
`<button class="btn btn-success" data-agentId="${row.agent_id}" |
|||
onclick="handleTaskButtonClick('${row.agent_id}')">${row.agent_name}</button>`, |
|||
/* `<button class="btn btn-success" data-agentId="${row.agent_id}" |
|||
onclick="handleAssignTaskButtonClick('${row.agent_id}')">${row.Assigned}</button>`, */ |
|||
`<div style="text-align: center;">${row.Assigned}</div>`, |
|||
`<div style="text-align: center;">${row.TotalCompleted}</div>`, |
|||
`<div style="text-align: center;">${row.Pending}</div>`, |
|||
`<div style="text-align: center;">${percentage}%</div>`, |
|||
`<div style="text-align: center;">${row.Completed_count}</div>`, |
|||
`<div style="text-align: center;">${row.Reopened_count}</div>`, |
|||
`<div style="text-align: center;">${row.Followup_count}</div>`, |
|||
`<div style="text-align: center;">${row.Other_count}</div>`, |
|||
|
|||
|
|||
]); |
|||
|
|||
}); |
|||
table.draw(); // Redraw the DataTable with the updated data |
|||
|
|||
} catch (error) { |
|||
console.error("Error fetching table data:", error); |
|||
}finally { |
|||
$('#pageLoader').hide(); // Hide loader in both success or error |
|||
} |
|||
}; |
|||
|
|||
|
|||
|
|||
// Search Button Click |
|||
document.getElementById("searchBtn").addEventListener("click", () => { |
|||
const startDate = document.getElementById("startDate").value; |
|||
const endDate = document.getElementById("endDate").value; |
|||
|
|||
if (!startDate || !endDate) { |
|||
// Show SweetAlert if dates are missing |
|||
Swal.fire({ |
|||
icon: 'warning', // Warning icon |
|||
title: 'Please select both dates.', |
|||
showConfirmButton: true, // Show a confirmation button |
|||
timer: 3000 // Optional: Auto-close after 3 seconds |
|||
}); |
|||
|
|||
e.preventDefault(); // Prevent form submission if validation fails |
|||
return; |
|||
} |
|||
|
|||
fetchData(startDate, endDate); |
|||
fetchTableData(startDate,endDate); |
|||
|
|||
|
|||
}); |
|||
|
|||
// Reset Button Click |
|||
document.getElementById("resetBtn").addEventListener("click", () => { |
|||
/* document.getElementById("startDate").value = ""; |
|||
document.getElementById("endDate").value = ""; |
|||
fetchData(); // Fetch data without date filters |
|||
fetchTableData(); */ |
|||
window.location.href = "/gcc/callcenterqaqcreports/qaqcagentperformance"; |
|||
}); |
|||
|
|||
|
|||
|
|||
let today = new Date(); |
|||
|
|||
// Get the first day of the current month (this should give 2024-11-01 for November) |
|||
let firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); |
|||
|
|||
// Manually format the date as yyyy-mm-dd without relying on toISOString |
|||
let formattedFirstDay = firstDayOfMonth.getFullYear() + '-' + |
|||
(firstDayOfMonth.getMonth() + 1).toString().padStart(2, '0') + '-' + |
|||
firstDayOfMonth.getDate().toString().padStart(2, '0'); |
|||
|
|||
let formattedToday = today.getFullYear() + '-' + |
|||
(today.getMonth() + 1).toString().padStart(2, '0') + '-' + |
|||
today.getDate().toString().padStart(2, '0'); |
|||
|
|||
// Set the date input values |
|||
$('#startDate').val(formattedFirstDay); |
|||
$('#endDate').val(formattedToday); |
|||
|
|||
$('#endDate').attr('min', formattedFirstDay); // Initial minimum for To Date |
|||
$('#startDate').attr('max', formattedToday); // Initial maximum for From Date |
|||
|
|||
|
|||
// Update To Date's min attribute when From Date changes |
|||
$('#startDate').on('change', function () { |
|||
const fromDate = $(this).val(); |
|||
$('#endDate').attr('min', fromDate); // Update min attribute for To Date |
|||
|
|||
// If To Date is earlier than the new From Date, adjust it |
|||
const toDate = $('#endDate').val(); |
|||
if (new Date(toDate) < new Date(fromDate)) { |
|||
$('#endDate').val(fromDate); |
|||
} |
|||
}); |
|||
|
|||
// Update From Date's max attribute when To Date changes |
|||
$('#endDate').on('change', function () { |
|||
const toDate = $(this).val(); |
|||
$('#startDate').attr('max', toDate); // Update max attribute for From Date |
|||
|
|||
// If From Date is later than the new To Date, adjust it |
|||
const fromDate = $('#startDate').val(); |
|||
if (new Date(fromDate) > new Date(toDate)) { |
|||
$('#startDate').val(toDate); |
|||
} |
|||
}); |
|||
|
|||
// Initial Load |
|||
fetchData(formattedFirstDay, formattedToday); |
|||
fetchTableData(formattedFirstDay, formattedToday); |
|||
}); |
|||
|
|||
function handleTaskButtonClick(agentId) |
|||
{ |
|||
//console.log("agentId",agentId); |
|||
|
|||
const fromDate = document.getElementById("startDate").value; |
|||
const toDate = document.getElementById("endDate").value; |
|||
|
|||
if (!fromDate || !toDate) { |
|||
// Show SweetAlert if dates are missing |
|||
Swal.fire({ |
|||
icon: 'warning', // Warning icon |
|||
title: 'Missing Date.', |
|||
showConfirmButton: true, // Show a confirmation button |
|||
timer: 3000 // Optional: Auto-close after 3 seconds |
|||
}); |
|||
|
|||
e.preventDefault(); // Prevent form submission if validation fails |
|||
return; |
|||
} |
|||
|
|||
|
|||
$('#agentperformance').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); |
|||
$('#agentperformance').modal('show'); |
|||
|
|||
// Clear old data from the table |
|||
if ($.fn.DataTable.isDataTable('#agentperformanceDatatable')) { |
|||
$('#agentperformanceDatatable').DataTable().clear().destroy(); |
|||
} |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/agent/agenttaskwise?agentId='+agentId, |
|||
type: 'GET', |
|||
data:{agentId:agentId,startDate:fromDate,endDate:toDate}, |
|||
contentType: 'application/json', |
|||
success: function (response) { |
|||
//console.log("response",response); |
|||
if (response && response.length > 0) { |
|||
|
|||
let CtableBody = $('#agentperformanceDatatable tbody'); |
|||
CtableBody.empty(); |
|||
response.forEach((item, index) => { |
|||
let row = ` |
|||
<tr> |
|||
<td class="text-center">${index + 1}</td> |
|||
<td class="text-center no-sort">${item.taskid}</td> |
|||
<td class="text-center">${item.cdate}</td> |
|||
<td class="text-center">${item.assigned || 0}</td> |
|||
<td class="text-center">${item.callstaken || 0}</td> |
|||
<td class="text-center">${item.pending || 0}</td> |
|||
<td class="text-center">${item.percentage || 0}%</td> |
|||
<td class="text-center">${item.Completed || 0}</td> |
|||
<td class="text-center">${item.Reopened || 0}</td> |
|||
<td class="text-center">${item.Followup || 0}</td> |
|||
<td class="text-center">${item.Others || 0}</td> |
|||
</tr> |
|||
`; |
|||
CtableBody.append(row); |
|||
}); |
|||
|
|||
|
|||
} |
|||
else { |
|||
$('#agentperformanceDatatable tbody').html(` |
|||
<tr> |
|||
<td colspan="11" class="text-center">No data available</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
|
|||
}, |
|||
error: function (xhr, status, error) { |
|||
console.error('Error in Fetching Task:', error); |
|||
$('#agentperformanceDatatable tbody').html(` |
|||
<tr> |
|||
<td colspan="11" class="text-center text-danger">Failed to load data</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
}); |
|||
|
|||
} |
|||
|
|||
|
|||
function handleAssignTaskButtonClick(agentId) { |
|||
// Show modal with static backdrop |
|||
$('#Assignagentperformance').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); |
|||
$('#Assignagentperformance').modal('show'); |
|||
|
|||
// Clear old data from the table |
|||
if ($.fn.DataTable.isDataTable('#AssignagentperformanceDatatable')) { |
|||
$('#AssignagentperformanceDatatable').DataTable().clear().destroy(); |
|||
} |
|||
|
|||
// Fetch and display data |
|||
$.ajax({ |
|||
url: `/gcc/api/callcenterqaqc/agent/agenttaskassign?agentId=${agentId}`, |
|||
type: 'GET', |
|||
contentType: 'application/json', |
|||
success: function (response) { |
|||
let CtableBody1 = $('#AssignagentperformanceDatatable tbody'); |
|||
CtableBody1.empty(); |
|||
|
|||
if (response && response.length > 0) { |
|||
response.forEach((item, index) => { |
|||
let callStatus = item.call_status && item.call_status.trim() !== '' ? item.call_status : 'N/A'; |
|||
let remarks = item.remarks && item.remarks.trim() !== '' ? item.remarks : 'N/A'; |
|||
let row = ` |
|||
<tr> |
|||
<td class="text-center">${index + 1}</td> |
|||
<td class="text-center">${item.call_category}</td> |
|||
<td class="text-center">${item.complaint_number}</td> |
|||
<td class="text-center">${item.complaint_date}</td> |
|||
<td class="text-center">${item.complaint_person_name}</td> |
|||
<td class="text-center">${item.complaint_mobilenumber}</td> |
|||
<td class="text-center">${item.complaint_type}</td> |
|||
<td class="text-center">${item.official_name}</td> |
|||
<td class="text-center">${item.official_mobilenum}</td> |
|||
<td class="text-center">${callStatus}</td> |
|||
<td class="text-center">${remarks}</td> |
|||
</tr> |
|||
`; |
|||
CtableBody1.append(row); |
|||
}); |
|||
} else { |
|||
CtableBody1.html(` |
|||
<tr> |
|||
<td colspan="11" class="text-center">No data available</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
|
|||
}, |
|||
error: function (xhr, status, error) { |
|||
console.error('Error in Fetching Task:', error); |
|||
$('#AssignagentperformanceDatatable tbody').html(` |
|||
<tr> |
|||
<td colspan="11" class="text-center text-danger">Failed to load data</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
//<td class="text-center">${item.updated_date}</td> |
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,659 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<style> |
|||
.required{ |
|||
color: red; |
|||
} |
|||
#modalBody h4 { |
|||
font-weight: bold; |
|||
margin-top: 15px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
#modalBody p { |
|||
margin: 5px 0; |
|||
} |
|||
|
|||
#modalBody hr { |
|||
margin: 15px 0; |
|||
} |
|||
.comment { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.comment p { |
|||
margin: 0; |
|||
} |
|||
|
|||
hr { |
|||
border: 1px solid #ccc; |
|||
margin-top: 20px; |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.col-4 { |
|||
font-weight: bold; |
|||
text-align: right; |
|||
} |
|||
|
|||
.col-8 { |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
.comment { |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
.comment .text-muted { |
|||
font-size: 0.9em; |
|||
color: #6c757d; |
|||
} |
|||
|
|||
.comment hr { |
|||
border-top: 1px solid #ccc; |
|||
} |
|||
|
|||
.comment .btn-link { |
|||
font-size: 0.9em; |
|||
text-decoration: underline; |
|||
color: #007bff; |
|||
} |
|||
/* Make the modal body scrollable */ |
|||
#detailsModal .modal-body { |
|||
max-height: 70vh; /* Limit the height to 70% of the viewport */ |
|||
overflow-y: auto; /* Enable vertical scrolling */ |
|||
} |
|||
|
|||
.card-box { |
|||
border-radius: 20px; |
|||
box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px; |
|||
} |
|||
|
|||
#officialfollowupCard { |
|||
transition: transform 0.2s ease; /* Smooth scaling transition */ |
|||
cursor: pointer; /* Default cursor change */ |
|||
} |
|||
|
|||
#officialfollowupCard:hover { |
|||
transform: scale(1.05); /* Slightly scale up on hover */ |
|||
cursor: pointer; /* Change cursor to hand symbol */ |
|||
} |
|||
|
|||
#publicfollowupCard { |
|||
transition: transform 0.2s ease; /* Smooth scaling transition */ |
|||
cursor: pointer; /* Default cursor change */ |
|||
} |
|||
|
|||
#publicfollowupCard:hover { |
|||
transform: scale(1.05); /* Slightly scale up on hover */ |
|||
cursor: pointer; /* Change cursor to hand symbol */ |
|||
} |
|||
|
|||
</style> |
|||
<body> |
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-8"> |
|||
<div class="page-header-title"> |
|||
<i class="fa fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>FollowUp List</h5> |
|||
<span>1913 QAQC FollowUp List</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="/gcc/index"><i class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">1913 QAQC</li> |
|||
<li class="breadcrumb-item" aria-current="page">Admin QAQC</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Followup List</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-block"> |
|||
<p>Click the card to Assign Agents</p> |
|||
<div class="row"> |
|||
<div class="col-lg-4 col-md-4 col-sm-12"> |
|||
<div class="card card-box" id="officialfollowupCard"> |
|||
<p class="text-facebook mb-20 text-center mt-4" id="todayFollowUpText"><b>Today Followup</b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="officialtotalFollowup"></h3> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-lg-4 col-md-4 col-sm-12"> |
|||
<div class="card card-box" id="publicfollowupCard"> |
|||
<p class="text-facebook mb-20 text-center mt-4" id="todayFollowUpText2"><b>Today Followup</b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="publictotalFollowup"></h3> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
<div class="row mb-4"> |
|||
<div class="col-md-4"> |
|||
<label for="fromDate">From Date <span class="required">*</span></label> |
|||
<input type="date" id="fromDate" class="form-control datepicker" placeholder="yyyy-mm-dd" > |
|||
</div> |
|||
<div class="col-md-4"> |
|||
<label for="toDate">To Date <span class="required">*</span></label> |
|||
<input type="date" id="toDate" class="form-control datepicker" placeholder="yyyy-mm-dd" > |
|||
</div> |
|||
<div class="col-md-4 mt-4"> |
|||
<button id="filterButton" class="btn btn-primary mt-2">Filter</button> |
|||
<button id="resetButton" class="btn btn-secondary mt-2">Reset</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="page-header-title"></div> |
|||
<div> |
|||
<table id="FollowupDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th class="text-center">S.No</th> |
|||
<th class="text-center">Task ID</th> |
|||
<th class="text-center">Complaint Number</th> |
|||
<th class="text-center">Scheduled Date</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile Number</th> |
|||
<th class="text-center">Complaint Type</th> |
|||
<th class="text-center">View</th> |
|||
|
|||
|
|||
|
|||
</tr> |
|||
</thead> |
|||
<tbody style="text-align:center;"> |
|||
|
|||
</tbody> |
|||
<tfoot class="thead-dark"> |
|||
<tr> |
|||
<th class="text-center">S.No</th> |
|||
<th class="text-center">Task ID</th> |
|||
<th class="text-center">Complaint Number</th> |
|||
<th class="text-center">Scheduled Date</th> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile Number</th> |
|||
<th class="text-center">Complaint Type</th> |
|||
<th class="text-center">View</th> |
|||
|
|||
</tr> |
|||
</tfoot> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
<!-- Modal --> |
|||
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="detailsModalLabel">Complaint Details</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body" id="modalBody"> |
|||
<!-- Details will be populated here --> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
|
|||
<script> |
|||
|
|||
$(document).ready(function () { |
|||
// Initialize DataTable |
|||
const table = $('#FollowupDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '50vh', |
|||
buttons: [ |
|||
{ extend: 'pageLength', className: 'btn btn-warning' }, |
|||
{ title: 'Data export', extend: 'copyHtml5', text: 'Copy', className: 'btn btn-secondary' }, |
|||
{ extend: 'excelHtml5', text: 'Excel', className: 'btn btn-secondary' }, |
|||
{ extend: 'csvHtml5', text: 'CSV', className: 'btn btn-secondary' }, |
|||
{ extend: 'pdfHtml5', text: 'PDF', className: 'btn btn-secondary' } |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
searching: false, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
// Default Date Range Setup |
|||
let today = new Date(); |
|||
|
|||
// Get the first day of the current month (this should give 2024-11-01 for November) |
|||
let firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); |
|||
|
|||
// Manually format the date as yyyy-mm-dd without relying on toISOString |
|||
let formattedFirstDay = firstDayOfMonth.getFullYear() + '-' + |
|||
(firstDayOfMonth.getMonth() + 1).toString().padStart(2, '0') + '-' + |
|||
firstDayOfMonth.getDate().toString().padStart(2, '0'); |
|||
|
|||
let formattedToday = today.getFullYear() + '-' + |
|||
(today.getMonth() + 1).toString().padStart(2, '0') + '-' + |
|||
today.getDate().toString().padStart(2, '0'); |
|||
|
|||
//console.log("formattedFirstDay:", formattedFirstDay); // Check what is printed in the console |
|||
|
|||
|
|||
// Set default values for date inputs |
|||
$('#fromDate').val(formattedFirstDay); |
|||
$('#toDate').val(formattedToday); |
|||
$('#toDate').attr('min', formattedFirstDay); // Initial minimum for To Date |
|||
$('#fromDate').attr('max', formattedToday); // Initial maximum for From Date |
|||
|
|||
// Trigger data load on page load |
|||
loadData(formattedFirstDay, formattedToday); |
|||
|
|||
// Update To Date's min attribute when From Date changes |
|||
$('#fromDate').on('change', function () { |
|||
const fromDate = $(this).val(); |
|||
$('#toDate').attr('min', fromDate); // Update min attribute for To Date |
|||
|
|||
// If To Date is earlier than the new From Date, adjust it |
|||
const toDate = $('#toDate').val(); |
|||
if (new Date(toDate) < new Date(fromDate)) { |
|||
$('#toDate').val(fromDate); |
|||
} |
|||
}); |
|||
|
|||
// Update From Date's max attribute when To Date changes |
|||
$('#toDate').on('change', function () { |
|||
const toDate = $(this).val(); |
|||
$('#fromDate').attr('max', toDate); // Update max attribute for From Date |
|||
|
|||
// If From Date is later than the new To Date, adjust it |
|||
const fromDate = $('#fromDate').val(); |
|||
if (new Date(fromDate) > new Date(toDate)) { |
|||
$('#fromDate').val(toDate); |
|||
} |
|||
}); |
|||
|
|||
// Event listener for the Filter button |
|||
$('#filterButton').on('click', function () { |
|||
const fromDate = $('#fromDate').val(); |
|||
const toDate = $('#toDate').val(); |
|||
|
|||
// Ensure valid date range |
|||
if (new Date(fromDate) > new Date(toDate)) { |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Invalid Date Range', |
|||
text: 'From Date cannot be later than To Date.' |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
// Load data for the selected date range |
|||
loadData(fromDate, toDate); |
|||
}); |
|||
|
|||
$('#resetButton').on('click', function () { |
|||
window.location.href = "/gcc/callcenterqaqc/admin/qaqcfollowuplist"; |
|||
}); |
|||
|
|||
// Function to load data based on the date range |
|||
function loadData(fromDate, toDate) { |
|||
const followupStatus = "FOLLOWUP"; |
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/followuplist', |
|||
method: 'GET', |
|||
data: { callStatus: followupStatus,fromDate: fromDate, toDate: toDate }, |
|||
success: function (response) { |
|||
//console.log('API Response:', response); |
|||
|
|||
const table = $('#FollowupDatatable').DataTable(); |
|||
table.clear(); |
|||
|
|||
if (response && response.length > 0) { |
|||
response.forEach(function (item, index) { |
|||
table.row.add([ |
|||
index + 1, |
|||
item.taskid || 'N/A', |
|||
item.complaint_number || 'N/A', |
|||
item.remainder_date || 'N/A', |
|||
item.complaint_person_name || 'N/A', |
|||
item.complaint_mobilenumber || 'N/A', |
|||
item.complaint_type || 'N/A', |
|||
`<button type="button" class="btn btn-info" |
|||
onclick="viewDetails('${item.complaint_number}')">Details</button>`, |
|||
|
|||
]); |
|||
}); |
|||
} else { |
|||
//alert('No data found for the selected date range.'); |
|||
$('#FollowupDatatable tbody').html(` |
|||
<tr> |
|||
<td colspan="8" class="text-center">No data available</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
|
|||
table.draw(); |
|||
}, |
|||
error: function (xhr, status, error) { |
|||
console.error('Error fetching data:', error); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
|
|||
|
|||
function viewDetails(complaintNumber, complaintMode, complaintDept) { |
|||
document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>'; |
|||
$('#detailsModal').modal('show'); |
|||
|
|||
// Fetch the main complaint details |
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails', |
|||
type: 'GET', |
|||
data:{complaintNumber:complaintNumber}, |
|||
success: function (data) { |
|||
// console.log('Complaint Data:', data); |
|||
|
|||
// Fetch agent response details |
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory', |
|||
type: 'GET', |
|||
data: { complaintNumber }, |
|||
success: function (agentResponse) { |
|||
//console.log('Agent Response:', agentResponse); |
|||
|
|||
// Use the logic for building complaint and agent details as HTML |
|||
const detailsHtml = generateDetailsHtml(data, agentResponse); |
|||
|
|||
// Update modal content |
|||
document.getElementById('modalBody').innerHTML = detailsHtml; |
|||
}, |
|||
error: function () { |
|||
document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>'; |
|||
} |
|||
}); |
|||
}, |
|||
error: function () { |
|||
document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>'; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// Function to generate complaint and agent details HTML |
|||
function generateDetailsHtml(data, agentResponse) { |
|||
|
|||
// Helper function to format date to yyyy-mm-dd |
|||
function formatDate(dateStr) { |
|||
if (!dateStr) return 'N/A'; |
|||
const date = new Date(dateStr); |
|||
return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd |
|||
} |
|||
// Format complaint messages |
|||
let messagesHtml = ''; |
|||
if (data.comments && data.comments.length > 0) { |
|||
data.comments.forEach((comment) => { |
|||
const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available" |
|||
? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>` |
|||
: '<p style="color: red;">No image available for this comment.</p>'; |
|||
|
|||
messagesHtml += ` |
|||
<div class="comment mb-4"> |
|||
<div class="row"> |
|||
<div class="col-2 text-center"> |
|||
<p class="text-muted">${comment.comment_date}</p> |
|||
</div> |
|||
<div class="col-10"> |
|||
<p><strong>${comment.user || 'N/A'}</strong> Says:</p> |
|||
<p>${comment.message || 'No message available'}</p> |
|||
<div class="user-image">${commentImageLink}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
}); |
|||
} else { |
|||
messagesHtml = '<p>No comments available.</p>'; |
|||
} |
|||
|
|||
// Format agent responses |
|||
let agentRepliedHtml = ''; |
|||
if (agentResponse.length > 0) { |
|||
agentResponse.forEach((agentItem) => { |
|||
agentRepliedHtml += ` |
|||
<div class="comment mb-4"> |
|||
<div class="row"> |
|||
<div class="col-2 text-center"> |
|||
<p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p> |
|||
</div> |
|||
<div class="col-10"> |
|||
<p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p> |
|||
<p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p> |
|||
<p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
}); |
|||
} else { |
|||
agentRepliedHtml = '<p>No agent replied messages available.</p>'; |
|||
} |
|||
|
|||
// Check for user images |
|||
const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {}; |
|||
const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== "" |
|||
? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>` |
|||
: '<p style="color: red;">UserImages: No image available.</p>'; |
|||
|
|||
// Combine all sections into the final HTML |
|||
const detailsHtml = ` |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<h4>Complaint Person's Details:</h4> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Date:</strong> ${data.complaintdate}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Division:</strong> ${data.Division || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Gender:</strong> ${data.gender || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
<h4>Complaint Details:</h4> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p> |
|||
</div> |
|||
|
|||
</div> |
|||
<hr> |
|||
<h4>Complaint Messages:</h4> |
|||
${messagesHtml} |
|||
<hr> |
|||
<h4>Agent Replied Messages:</h4> |
|||
${agentRepliedHtml} |
|||
<hr> |
|||
${imageLink} |
|||
`; |
|||
|
|||
return detailsHtml; |
|||
} |
|||
|
|||
$(document).ready(function () { |
|||
// Function to fetch today's follow-up count |
|||
function fetchTodayFollowUpCount() { |
|||
const followupStatus = "FOLLOWUP"; // Adjust based on your status filter |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/followup/todayCount', |
|||
method: 'GET', |
|||
data: { followupStatus: followupStatus }, |
|||
success: function (counts) { |
|||
// Update the card with the fetched count |
|||
$('#officialtotalFollowup').text(counts.officialfollowup || 0); |
|||
$('#publictotalFollowup').text(counts.publicfollowup || 0); |
|||
|
|||
// Get the current date in 'yyyy-mm-dd' format |
|||
const currentDate = new Date(); |
|||
const formattedDate = currentDate.toISOString().split('T')[0]; |
|||
|
|||
sessionStorage.setItem('followupname1', 'officialfollowup'); |
|||
sessionStorage.setItem('followupcount1', counts.officialfollowup || "0"); |
|||
sessionStorage.setItem('followupname2', 'publicfollowup'); |
|||
sessionStorage.setItem('followupcount2', counts.publicfollowup || "0"); |
|||
sessionStorage.setItem('startDate', formattedDate); |
|||
sessionStorage.setItem('endDate', formattedDate); |
|||
sessionStorage.setItem('redirected', 'true'); |
|||
|
|||
document.getElementById('officialfollowupCard').addEventListener('click', function () { |
|||
if (parseInt(sessionStorage.getItem('followupcount1')) === 0) { |
|||
Swal.fire({ |
|||
icon: 'info', |
|||
title: 'No Data', |
|||
text: 'No Follow-up records available for today.', |
|||
}); |
|||
} else { |
|||
sessionStorage.setItem('cardType', 'Followup1'); // Set card type |
|||
window.location.href = "/gcc/callcenterqaqc/admin/qaqcassigntaskagents"; |
|||
} |
|||
}); |
|||
|
|||
document.getElementById('publicfollowupCard').addEventListener('click', function () { |
|||
if (parseInt(sessionStorage.getItem('followupcount2')) === 0) { |
|||
Swal.fire({ |
|||
icon: 'info', |
|||
title: 'No Data', |
|||
text: 'No Follow-up records available for today.', |
|||
}); |
|||
} else { |
|||
sessionStorage.setItem('cardType', 'Followup2'); // Set card type |
|||
window.location.href = "/gcc/callcenterqaqc/admin/qaqcassigntaskagents"; |
|||
} |
|||
}); |
|||
|
|||
|
|||
}, |
|||
error: function (xhr, status, error) { |
|||
console.error('Error fetching follow-up count:', error); |
|||
$('#officialtotalFollowup').text('N/A'); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// Fetch count on page load |
|||
fetchTodayFollowUpCount(); |
|||
|
|||
// Get the current date |
|||
const currentDate = new Date(); |
|||
const formattedDate = currentDate.toISOString().split('T')[0]; // Format: YYYY-MM-DD |
|||
|
|||
// Update the text with the current date |
|||
document.getElementById("todayFollowUpText").innerText = `Today Official Follow-up (${formattedDate})`; |
|||
document.getElementById("todayFollowUpText2").innerText = `Today Public Follow-up (${formattedDate})`; |
|||
}); |
|||
</script> |
|||
|
|||
|
|||
</body> |
|||
</html> |
|||
1050
src/main/resources/templates/modules/callcenterqaqc/qaqcgrievancedashboard.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,925 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" dir=""> |
|||
<html xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
<style> |
|||
.required{ |
|||
color: red; |
|||
} |
|||
/* Mobile screens - targeting devices with a max width of 767px */ |
|||
@media (max-width: 767px) |
|||
{ |
|||
#qaqcRequestForm label{ |
|||
margin-top: 10px; |
|||
} |
|||
} |
|||
|
|||
.card-box { |
|||
box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px; |
|||
} |
|||
|
|||
.bg-grey-inline-text { |
|||
padding:2px 2px; |
|||
background-color: #e6e6e6; |
|||
border-radius: 4px; |
|||
} |
|||
</style> |
|||
<body> |
|||
|
|||
<!--[if lt IE 8]> |
|||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
|||
<![endif]--> |
|||
|
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-8"> |
|||
<div class="page-header-title"> |
|||
<i class="far fa-calendar-plus bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>Assign Agents</h5> |
|||
<span>Assign Agents for Task</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="/gcc/index"><i |
|||
class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">1913 QAQC</li> |
|||
<li class="breadcrumb-item" aria-current="page">Admin QAQC</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Assign Agents</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
|
|||
<div class="col-sm-4 mb-2"> |
|||
<label for="displaystartDate" class="form-label" |
|||
style="font-size: medium; margin-bottom: 0px; font-weight: bold;">From |
|||
Date:</label> <input type="date" id="displaystartDate" |
|||
class="form-control" > |
|||
</div> |
|||
<div class="col-sm-4 mb-2"> |
|||
<label for="displayendDate" class="form-label" |
|||
style="font-size: medium; margin-bottom: 0px; font-weight: bold;">To |
|||
Date:</label> <input type="date" id="displayendDate" |
|||
class="form-control"> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-3"> |
|||
|
|||
<div class="col-xl-3 col-md-4 col-sm-12"> |
|||
|
|||
<div class="card card-box" id="closedCard" style="display: none;"> |
|||
<p class="text-facebook mb-20 text-center mt-4" id="displayClosename"><b></b></p> |
|||
<h2 class="text-twitter fw-700 ml-5 text-center" id="displayClosedcount"></h2> |
|||
</div> |
|||
|
|||
<div class="card card-box" id="reopenedCard" style="display: none;"> |
|||
<p class="text-facebook mb-20 text-center mt-4" id="displayReopenname"><b></b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="displayReopenedcount"></h3> |
|||
</div> |
|||
|
|||
<div class="card card-box" id="inProgressCard" style="display: none;"> |
|||
<p class="text-facebook mb-20 text-center mt-4" id="displayInProgressname"><b></b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="displayInProgresscount"></h3> |
|||
</div> |
|||
|
|||
<div class="card card-box" id="redressedCard" style="display: none;"> |
|||
<p class="text-facebook mb-20 text-center mt-4" id="displayRedressedname"><b></b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="displayRedressedcount"></h3> |
|||
</div> |
|||
|
|||
<div class="card card-box" id="followupCard1" style="display: none;"> |
|||
<p class="text-facebook mb-20 text-center mt-4" id="displayFollowupname1"><b></b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="displayfollowupcount1"></h3> |
|||
</div> |
|||
|
|||
<div class="card card-box" id="followupCard2" style="display: none;"> |
|||
<p class="text-facebook mb-20 text-center mt-4" id="displayFollowupname2"><b></b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="displayfollowupcount2"></h3> |
|||
</div> |
|||
|
|||
<div class="card card-box" id="withdrawCard" style="display: none;"> |
|||
<p class="text-facebook mb-20 text-center mt-4" id="displaywithdrawname"><b></b></p> |
|||
<h3 class="text-twitter fw-700 ml-5 text-center" id="displaywithdrawcount"></h3> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<div class="card"> |
|||
<div class="card-block"> |
|||
<label>Task Description If any</label> |
|||
<textarea rows="1" cols="5" style="width: 100%;height:50px;" placeholder="Enter description"></textarea> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<div class="card"> |
|||
<div class="card-block"> |
|||
<div class="row"> |
|||
<div class=" col-lg-4 col-md-5 col-sm-12"> |
|||
<label style="font-size: medium;font-weight: bold;">Click this Button to Clear the Pending Calls...</label> |
|||
</div> |
|||
<div class="col-lg-8 col-md-7 col-sm-12"> |
|||
<button id="clearButton" class="btn btn-danger">Clear</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="col-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h3><b>Available Agent List</b></h3> |
|||
</div> |
|||
|
|||
<div class="card-body"> |
|||
<div class="d-flex justify-content-end mb-2"> |
|||
<button class="btn btn-light mr-4" disabled style="color: blue;border-color: blue;"><i class="ik ik-user-plus f-16" style="color: blue;"></i>Productivity Count:<span class="ml-4" id="productivitycount" style="color: blue;"></span></button> |
|||
<button class="btn btn-primary" disabled><i class="ik ik-user-plus f-16"></i>Total Available agents:<span class="ml-4" id="availableagentcount"></span></button> |
|||
</div> |
|||
<table id="AgentDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" > |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th class="text-center"> |
|||
<input type="checkbox" id="selectAll" /> |
|||
<label for="selectAll">Select All</label> |
|||
</th> |
|||
<th class="text-center" width="1%">S.No</th> |
|||
<th class="text-center">AGENT ID</th> |
|||
<th class="text-center">NAME</th> |
|||
<th class="text-center">CAMPAIGN PENDING CALLS</th> |
|||
<th class="text-center">ALREADY ASSIGNED CALLS</th> |
|||
<th class="text-center">CALLS ASSIGNED</th> |
|||
<th class="text-center">TOTAL CALLS</th> |
|||
<th class="text-center">ACTION</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody style="text-align:center;"> |
|||
|
|||
</tbody> |
|||
<!-- Transfer Modal --> |
|||
<div id="transferModal" class="modal" tabindex="-1" role="dialog"> |
|||
<div class="modal-dialog" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title">Transfer Calls</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<!-- Editable Calls Assigned Count --> |
|||
<div class="form-group"> |
|||
<label for="callsAssignedInput">Calls Assigned Count</label> |
|||
<input type="number" id="callsAssignedInput" class="form-control" min="1" placeholder="Enter Calls Count"> |
|||
</div> |
|||
<!-- Transfer To Dropdown --> |
|||
<div class="form-group"> |
|||
<label for="transferToDropdown">Transfer To</label> |
|||
<select id="transferToDropdown" class="form-control"> |
|||
<!-- Options populated dynamically --> |
|||
</select> |
|||
</div> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" id="transferButton" class="btn btn-primary">Transfer</button> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</table> |
|||
<div class="text-center"> |
|||
<button class="btn btn-primary" id="assignBtn">Click to Assign</button> |
|||
</div> |
|||
<div> |
|||
<button class="btn btn-secondary" id="backBtn">Back</button> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<!-- Add the 'Please wait' text below the spinner --> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</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 src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
|
|||
<script type="text/javascript"> |
|||
|
|||
$(document).ready(function () { |
|||
|
|||
const redirected = sessionStorage.getItem('redirected'); // Check if redirected flag is set |
|||
const cardType = sessionStorage.getItem('cardType'); // Get the card type |
|||
//console.log("Redirected flag:", redirected); |
|||
//console.log("Card Type:", cardType); |
|||
|
|||
if (redirected === 'true') { |
|||
// Fetch data from sessionStorage |
|||
const closeName = sessionStorage.getItem("closename"); |
|||
const closedCount = sessionStorage.getItem("closedcount"); |
|||
const reopenName = sessionStorage.getItem("reopenname"); |
|||
const reopenedCount = sessionStorage.getItem("reopenedcount"); |
|||
const inProgressName = sessionStorage.getItem("inProgressName"); |
|||
const inProgressCount = sessionStorage.getItem("inProgressCount"); |
|||
const redressedName = sessionStorage.getItem("redressedName"); |
|||
const redressedCount = sessionStorage.getItem("redressedCount"); |
|||
const startDate = sessionStorage.getItem("startDate"); |
|||
const endDate = sessionStorage.getItem("endDate"); |
|||
const followupName1=sessionStorage.getItem("followupname1"); |
|||
const followupCount1=sessionStorage.getItem("followupcount1"); |
|||
const followupName2=sessionStorage.getItem("followupname2"); |
|||
const followupCount2=sessionStorage.getItem("followupcount2"); |
|||
const withdrawname = sessionStorage.getItem("withdrawname"); |
|||
const withdrawCount = sessionStorage.getItem("withdrawCount"); |
|||
|
|||
|
|||
const group=sessionStorage.getItem("group"); |
|||
const type=sessionStorage.getItem("type"); |
|||
const mode=sessionStorage.getItem("mode"); |
|||
const zone=sessionStorage.getItem("zone"); |
|||
const region=sessionStorage.getItem("region"); |
|||
|
|||
/* console.log("CloseName:", closeName); |
|||
console.log("ClosedCount:", closedCount); |
|||
console.log("ReopenName:", reopenName); |
|||
console.log("ReopenedCount:", reopenedCount); |
|||
console.log("InProgressName:", inProgressName); |
|||
console.log("InProgressCount:", inProgressCount); |
|||
console.log("RedressedName:", redressedName); |
|||
console.log("RedressedCount:", redressedCount); |
|||
console.log("StartDate:", startDate); |
|||
console.log("EndDate:", endDate); |
|||
console.log("followupName:", followupName); |
|||
console.log("followupCount:", followupCount); |
|||
|
|||
console.log("group:",group); |
|||
console.log("type",type); |
|||
console.log("mode",mode); |
|||
console.log("zone",zone); */ |
|||
|
|||
/* console.log("ofollowupName:", followupName1); |
|||
console.log("ofollowupCount:", followupCount1); |
|||
console.log("pfollowupName:", followupName2); |
|||
console.log("pfollowupCount:", followupCount2); */ |
|||
|
|||
let cardName = ''; |
|||
let cardCount = ''; |
|||
|
|||
// Set the relevant data based on cardType |
|||
if (cardType === 'Closed') { |
|||
cardName = closeName; |
|||
cardCount = closedCount; |
|||
$("#displayClosename").text(closeName); // Display Closed |
|||
$("#displayClosedcount").text(closedCount); |
|||
// Hide others |
|||
$("#reopenedCard, #inProgressCard, #redressedCard","#followupCard1","#followupCard2").hide(); |
|||
$("#closedCard").show(); // Show the Closed card |
|||
} else if (cardType === 'Reopened') { |
|||
cardName = reopenName; |
|||
cardCount = reopenedCount; |
|||
$("#displayReopenname").text(reopenName); // Display Reopened |
|||
$("#displayReopenedcount").text(reopenedCount); |
|||
// Hide others |
|||
$("#closedCard, #inProgressCard, #redressedCard","#followupCard1","#followupCard2").hide(); |
|||
$("#reopenedCard").show(); // Show the Reopened card |
|||
} else if (cardType === 'In Progress') { |
|||
cardName = inProgressName; |
|||
cardCount = inProgressCount; |
|||
$("#displayInProgressname").text(inProgressName); // Display In Progress |
|||
$("#displayInProgresscount").text(inProgressCount); |
|||
// Hide others |
|||
$("#closedCard, #reopenedCard, #redressedCard","#followupCard1","#followupCard2").hide(); |
|||
$("#inProgressCard").show(); // Show the In Progress card |
|||
} else if (cardType === 'Redressed') { |
|||
cardName = redressedName; |
|||
cardCount = redressedCount; |
|||
$("#displayRedressedname").text(redressedName); // Display Redressed |
|||
$("#displayRedressedcount").text(redressedCount); |
|||
// Hide others |
|||
$("#closedCard, #reopenedCard, #inProgressCard","#followupCard1","#followupCard2").hide(); |
|||
$("#redressedCard").show(); // Show the Redressed card |
|||
} |
|||
else if (cardType === 'Followup1') { |
|||
cardName = followupName1; |
|||
cardCount = followupCount1; |
|||
$("#displayFollowupname1").text(followupName1); // Display Redressed |
|||
$("#displayfollowupcount1").text(followupCount1); |
|||
// Hide others |
|||
$("#closedCard, #reopenedCard,#redressedCard, #inProgressCard","#followupCard2").hide(); |
|||
$("#followupCard1").show(); // Show the Redressed card |
|||
} |
|||
else if (cardType === 'Followup2') { |
|||
cardName = followupName2; |
|||
cardCount = followupCount2; |
|||
$("#displayFollowupname2").text(followupName2); // Display Redressed |
|||
$("#displayfollowupcount2").text(followupCount2); |
|||
// Hide others |
|||
$("#closedCard, #reopenedCard,#redressedCard, #inProgressCard","#followupCard1").hide(); |
|||
$("#followupCard2").show(); // Show the Redressed card |
|||
} |
|||
else if (cardType === 'withdraw') { |
|||
cardName = withdrawname; |
|||
cardCount = withdrawCount; |
|||
$("#displaywithdrawname").text(withdrawname); // Display Redressed |
|||
$("#displaywithdrawcount").text(withdrawCount); |
|||
// Hide others |
|||
$("#closedCard, #reopenedCard,#redressedCard, #inProgressCard","#followupCard1","#followupCard2").hide(); |
|||
$("#withdrawCard").show(); // Show the Redressed card |
|||
} |
|||
|
|||
// Fill in date values |
|||
$("#displaystartDate").val(startDate); |
|||
$("#displayendDate").val(endDate); |
|||
|
|||
// Disable the start and end date inputs |
|||
$("#displaystartDate, #displayendDate").prop("disabled", true); |
|||
|
|||
// Call the getStart function |
|||
getStart(cardName, cardCount, startDate, endDate); |
|||
|
|||
|
|||
$('#assignBtn').click(function (event) { |
|||
event.preventDefault(); |
|||
|
|||
|
|||
if (!isCleared) { |
|||
|
|||
// Trigger Clear button flow |
|||
Swal.fire({ |
|||
allowOutsideClick: false, // Disable clicking outside the modal to close it |
|||
allowEscapeKey: false, // Disable escape key to close the modal |
|||
allowEnterKey: false, // Disable enter key to close the modal |
|||
title: 'Clear pending calls before assigning?', |
|||
icon: 'info', |
|||
showCancelButton: true, |
|||
showDenyButton: true, // Show the Deny button |
|||
confirmButtonColor: 'green', |
|||
cancelButtonColor: 'orange', |
|||
denyButtonColor: 'grey', |
|||
confirmButtonText: 'Yes, clear it!', // Confirm button text |
|||
cancelButtonText: 'No, assign without clearing', // Cancel button text |
|||
denyButtonText: 'Exit' // Deny button text |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
// Trigger Clear logic |
|||
$('#clearButton').click(); |
|||
// Wait until Clear logic completes |
|||
const interval = setInterval(() => { |
|||
if (isCleared) { |
|||
clearInterval(interval); // Stop checking |
|||
assignLogic(); // Proceed to Assign logic |
|||
} |
|||
}, 500); // Check every 500ms |
|||
} |
|||
else if (result.isDenied) { |
|||
// Do nothing on cancel (Cancel button clicked) |
|||
Swal.fire('Cancelled', 'No action performed.', 'info'); |
|||
} |
|||
else { |
|||
// Proceed directly to Assign logic |
|||
assignLogic(); |
|||
} |
|||
}); |
|||
} else { |
|||
// Proceed with Assign logic directly if Clear is already done |
|||
assignLogic(); |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
|
|||
function assignLogic() { |
|||
|
|||
// Fetch the values from the fields |
|||
const startDate = $('#displaystartDate').val(); |
|||
const endDate = $('#displayendDate').val(); |
|||
|
|||
const description = $('textarea').val().trim() || "N/A"; // Default to "N/A" if empty |
|||
/* console.log("startDate",startDate); |
|||
console.log("endDate",endDate); */ |
|||
|
|||
// Validate inputs if necessary |
|||
if (!startDate || !endDate || !cardName || !cardCount) { |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: 'All fields must be filled!', |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
const allAgents = []; |
|||
const table = $('#AgentDatatable').DataTable(); |
|||
|
|||
//Loop through all rows in the DataTable |
|||
table.rows().every(function (rowIdx, tableLoop, rowLoop) { |
|||
const row = $(this.node()); // Get the DOM row |
|||
const checkbox = row.find('.select-agent'); |
|||
const agentId = row.find('td:nth-child(3)').text().trim(); |
|||
const callsPerAgent = row.find('td:nth-child(7)').text().trim(); |
|||
|
|||
// Add agent to allAgents with default callsPerAgent = 0 |
|||
allAgents.push({ agentId: agentId, callsPerAgent: 0 }); |
|||
|
|||
// If checkbox is checked, update callsPerAgent |
|||
if (checkbox.is(':checked')) { |
|||
const agent = allAgents.find(a => a.agentId === agentId); |
|||
if (agent) { |
|||
agent.callsPerAgent = callsPerAgent; |
|||
} |
|||
} |
|||
}); |
|||
|
|||
// Remove agents with callsPerAgent still set to 0 |
|||
const filteredAgents = allAgents.filter(agent => agent.callsPerAgent > 0); |
|||
|
|||
// Check if no agents were selected |
|||
if (filteredAgents.length === 0) { |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: 'Please select at least one agent to assign calls!', |
|||
}); |
|||
return; |
|||
} |
|||
|
|||
//console.log('Filtered agents:', filteredAgents); |
|||
|
|||
|
|||
// Prepare the data object to send in the AJAX request |
|||
const data = { |
|||
startDate: startDate, |
|||
endDate: endDate, |
|||
closeName: cardName, |
|||
closedCount: cardCount, |
|||
description: description, |
|||
group:group, |
|||
type:type, |
|||
mode:mode, |
|||
zone:zone, |
|||
region:region, |
|||
agents:filteredAgents // Send only agents with callsPerAgent > 0 |
|||
}; |
|||
|
|||
console.log('Data to send:', data); |
|||
|
|||
// Show the loader |
|||
$('#pageLoader').show(); |
|||
|
|||
// Send the AJAX request |
|||
$.ajax({ |
|||
type: "POST", |
|||
url: "/gcc/api/callcenterqaqc/agentassign/taskassign", // Replace with your API endpoint |
|||
data: JSON.stringify(data), |
|||
contentType: "application/json", |
|||
success: function (response) { |
|||
// Hide the loader |
|||
$('#pageLoader').hide(); |
|||
// Show a success message using Swal |
|||
Swal.fire({ |
|||
icon: 'success', |
|||
title: 'Success', |
|||
allowOutsideClick: false, // Disable clicking outside the modal to close it |
|||
allowEscapeKey: false, // Disable escape key to close the modal |
|||
allowEnterKey: false, // Disable enter key to close the modal |
|||
showConfirmButton: true, // Ensure the confirm button is visible |
|||
text: response.message || 'Data transferred successfully!', |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
window.location.href = `/gcc/callcenterqaqcreports/qaqctasklist`; |
|||
} |
|||
}); |
|||
}, |
|||
error: function (error) { |
|||
$('#pageLoader').hide(); |
|||
// Show an error message using Swal |
|||
Swal.fire({ |
|||
allowOutsideClick: false, // Disable clicking outside the modal to close it |
|||
allowEscapeKey: false, // Disable escape key to close the modal |
|||
allowEnterKey: false, // Disable enter key to close the modal |
|||
showConfirmButton: true, // Ensure the confirm button is visible |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: error.responseJSON?.message, |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`; |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// Clear the redirected flag after use |
|||
sessionStorage.removeItem('redirected'); |
|||
} else { |
|||
// Clear sessionStorage and notify the user |
|||
sessionStorage.clear(); |
|||
// Show Swal alert and redirect on OK button |
|||
Swal.fire({ |
|||
allowOutsideClick: false, // Disable clicking outside the modal to close it |
|||
allowEscapeKey: false, // Disable escape key to close the modal |
|||
allowEnterKey: false, // Disable enter key to close the modal |
|||
showConfirmButton: true, // Ensure the confirm button is visible |
|||
icon: 'error', |
|||
title: 'Access Denied', |
|||
text: 'Please navigate from the Dashboard Page.', |
|||
confirmButtonText: 'OK', |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
// Redirect to the desired page |
|||
window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`; |
|||
} |
|||
}); } |
|||
|
|||
// Optional: You can still allow toggling of cards if needed: |
|||
$('.card-box').on('click', function () { |
|||
// Hide all the card-box elements |
|||
$('.card-box').hide(); |
|||
|
|||
// Get the id of the clicked card-box and show it |
|||
const cardId = $(this).attr('id'); |
|||
$('#' + cardId).show(); |
|||
}); |
|||
|
|||
function getStart(closeName,closedCount,startDate,endDate) |
|||
{ |
|||
// Show the loader |
|||
$('#pageLoader').show(); |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/agentassign/getavailableagents?totalDataCount='+closedCount, |
|||
type: 'GET', |
|||
dataType: 'json', |
|||
success: function(response) { |
|||
// Hide the loader |
|||
$('#pageLoader').hide(); |
|||
if (response.status === 'success') { |
|||
populateDataTable(response); |
|||
$("#productivitycount").text(response.productivity_count); |
|||
$("#availableagentcount").text(response.agent_available_count); |
|||
} if (response.status === 'error') { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message || "Error fetching Agents.", |
|||
confirmButtonText: 'OK', |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
// Reload the same page |
|||
window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`; |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
error: function(xhr, status, error) { |
|||
$('#pageLoader').hide(); |
|||
console.error('Error fetching assigned agents:', error); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function populateDataTable(data) { |
|||
// Clear existing rows |
|||
var table = $('#AgentDatatable').DataTable(); |
|||
table.clear(); |
|||
|
|||
// Populate table |
|||
data.available_agents.forEach((agent, index) => { |
|||
|
|||
table.row.add([ |
|||
`<input type="checkbox" class="select-agent" value="${agent.agent_id}" checked />`, |
|||
index + 1, |
|||
agent.agent_id, |
|||
agent.agent_name, |
|||
agent.campaignPendingCount, |
|||
agent.todayCount1, |
|||
agent.calls_per_agent, |
|||
agent.totalCallsCount, |
|||
`<button class="btn btn-warning btn-sm edit-agent" data-id="${agent.agent_id}"><i class="ik ik-edit"></i></button>` |
|||
]); |
|||
}); |
|||
|
|||
// Redraw table to reflect new data |
|||
table.draw(); |
|||
|
|||
} |
|||
|
|||
let selectedAgentId; // Store the agent being edited |
|||
|
|||
// Handle "Edit" button click |
|||
$(document).on('click', '.edit-agent', function () { |
|||
const row = $(this).closest('tr'); // Get the parent row of the clicked button |
|||
selectedAgentId = row.find('td:nth-child(3)').text().trim(); // Get the Agent ID |
|||
const callsAssigned = row.find('td:nth-child(7)').text().trim(); // Get Calls Assigned Count |
|||
|
|||
// Populate the Calls Assigned input field |
|||
$('#callsAssignedInput').val(callsAssigned); |
|||
|
|||
// Populate the Transfer To dropdown |
|||
const dropdown = $('#transferToDropdown'); |
|||
dropdown.empty(); // Clear previous options |
|||
$('#AgentDatatable tbody tr').each(function () { |
|||
const agentId = $(this).find('td:nth-child(3)').text().trim(); |
|||
const agentName = $(this).find('td:nth-child(4)').text().trim(); |
|||
|
|||
// Exclude the currently selected agent from the dropdown |
|||
if (agentId !== selectedAgentId) { |
|||
dropdown.append(`<option value="${agentId}">${agentName}</option>`); |
|||
} |
|||
}); |
|||
|
|||
// Show the modal |
|||
$('#transferModal').modal('show'); |
|||
}); |
|||
|
|||
// Handle "Transfer" button click |
|||
$('#transferButton').click(function () { |
|||
const transferCount = parseInt($('#callsAssignedInput').val(), 10); |
|||
const transferToAgentId = $('#transferToDropdown').val(); |
|||
|
|||
if (!transferCount || transferCount <= 0) { |
|||
alert('Please enter a valid calls count!'); |
|||
return; |
|||
} |
|||
|
|||
if (!transferToAgentId) { |
|||
alert('Please select an agent to transfer the calls!'); |
|||
return; |
|||
} |
|||
|
|||
let deductionSuccess = false; // Flag for successful deduction from the current agent |
|||
let additionSuccess = false; // Flag for successful addition to the receiving agent |
|||
const productivityCount = parseInt($('#productivitycount').text().trim(), 10); // Fetch dynamic productivity count from the button |
|||
|
|||
// Validate and update the table |
|||
$('#AgentDatatable tbody tr').each(function () { |
|||
const agentId = $(this).find('td:nth-child(3)').text().trim(); |
|||
const callsAssignedCell = $(this).find('td:nth-child(7)'); // Calls Assigned column |
|||
|
|||
// Validate deduction from the current agent |
|||
if (agentId === selectedAgentId) { |
|||
const currentCount = parseInt(callsAssignedCell.text().trim(), 10); |
|||
if (currentCount >= transferCount) { |
|||
deductionSuccess = true; |
|||
} else { |
|||
|
|||
alert('Transfer not allowed! Transferring more calls than assigned.'); |
|||
|
|||
return false; // Stop the operation |
|||
} |
|||
} |
|||
|
|||
// Validate addition to the receiving agent |
|||
if (agentId === transferToAgentId) { |
|||
const currentCount = parseInt(callsAssignedCell.text().trim(), 10); |
|||
const newCount = currentCount + transferCount; |
|||
if (newCount <= productivityCount) { |
|||
additionSuccess = true; |
|||
} else { |
|||
alert(`Transfer not allowed! Transferring ${transferCount} calls will exceed the productivity count of ${productivityCount} for agent ID: ${transferToAgentId}.`); |
|||
|
|||
return false; // Stop the operation |
|||
} |
|||
} |
|||
}); |
|||
|
|||
// If both validations pass, proceed to update the table |
|||
if (deductionSuccess && additionSuccess) { |
|||
$('#AgentDatatable tbody tr').each(function () { |
|||
const agentId = $(this).find('td:nth-child(3)').text().trim(); |
|||
const callsAssignedCell = $(this).find('td:nth-child(7)'); // Calls Assigned column |
|||
const totalCallsCell = $(this).find('td:nth-child(8)'); // TOTAL CALLS column |
|||
|
|||
// Deduct calls from the current agent |
|||
if (agentId === selectedAgentId) { |
|||
const currentCount = parseInt(callsAssignedCell.text().trim(), 10); |
|||
callsAssignedCell.text(currentCount - transferCount); |
|||
|
|||
// Update TOTAL CALLS for the current agent |
|||
const currentTotalCalls = parseInt(totalCallsCell.text().trim(), 10); |
|||
totalCallsCell.text(currentTotalCalls - transferCount); |
|||
} |
|||
|
|||
// Add calls to the receiving agent |
|||
if (agentId === transferToAgentId) { |
|||
const currentCount = parseInt(callsAssignedCell.text().trim(), 10); |
|||
callsAssignedCell.text(currentCount + transferCount); |
|||
|
|||
// Update TOTAL CALLS for the receiving agent |
|||
const currentTotalCalls = parseInt(totalCallsCell.text().trim(), 10); |
|||
totalCallsCell.text(currentTotalCalls + transferCount); |
|||
} |
|||
}); |
|||
|
|||
// Dynamically update the total calls across all agents |
|||
let totalCalls = 0; |
|||
$('#AgentDatatable tbody tr').each(function () { |
|||
const totalCallsCell = $(this).find('td:nth-child(8)'); // TOTAL CALLS column |
|||
totalCalls += parseInt(totalCallsCell.text().trim(), 10); |
|||
}); |
|||
$('#totalCallsCount').text(totalCalls); // Update total calls count across all agents |
|||
|
|||
// Close the modal |
|||
$('#transferModal').modal('hide'); |
|||
} |
|||
|
|||
}); |
|||
|
|||
|
|||
|
|||
// Initialize DataTable |
|||
var table = $('#AgentDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[200, 500, -1], |
|||
[ '200 rows','500 rows', 'Show all'] |
|||
], |
|||
scrollY: '70vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
searching: true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
}); |
|||
|
|||
$(document).ready(function () { |
|||
// "Select All" checkbox functionality |
|||
$('#selectAll').on('change', function () { |
|||
const isChecked = $(this).is(':checked'); |
|||
$('.select-agent').prop('checked', isChecked); // Check/uncheck all checkboxes |
|||
}); |
|||
|
|||
// Ensure "Select All" is checked/unchecked based on individual checkboxes |
|||
$(document).on('change', '.select-agent', function () { |
|||
const allChecked = $('.select-agent:checked').length === $('.select-agent').length; |
|||
$('#selectAll').prop('checked', allChecked); // Check "Select All" only if all checkboxes are selected |
|||
}); |
|||
}); |
|||
</script> |
|||
<script type="text/javascript"> |
|||
$(document).ready(function () { |
|||
$('#backBtn').click(function (event) { |
|||
window.location.href = `/gcc/callcenterqaqc/admin/qaqcgrievancedashboard`; |
|||
}); |
|||
|
|||
}); |
|||
</script> |
|||
<script> |
|||
// Global flag to track if Clear logic has been executed |
|||
let isCleared = false; |
|||
|
|||
document.getElementById('clearButton').addEventListener('click', function () { |
|||
Swal.fire({ |
|||
title: 'Are you sure to clear calls?', |
|||
icon: 'warning', |
|||
allowOutsideClick: false, // Disable clicking outside the modal to close it |
|||
allowEscapeKey: false, // Disable escape key to close the modal |
|||
allowEnterKey: false, // Disable enter key to close the modal |
|||
showCancelButton: true, |
|||
confirmButtonColor: '#d33', |
|||
cancelButtonColor: '#3085d6', |
|||
confirmButtonText: 'Yes, clear it!', |
|||
cancelButtonText: 'No, cancel' |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
// Logic to clear calls can be added here |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/agentassign/deleteRecords', |
|||
type: 'GET', |
|||
contentType: 'application/json', |
|||
success: function (response) { |
|||
//console.log("response",response); |
|||
if (response==="success") { |
|||
|
|||
Swal.fire( |
|||
'Cleared!', |
|||
'The calls have been cleared.', |
|||
'success' |
|||
); |
|||
isCleared = true; // Mark as cleared |
|||
} |
|||
else { |
|||
Swal.fire("Info", "No Records to clear,You can Assign", "info"); |
|||
isCleared = true; // Mark as cleared |
|||
} |
|||
|
|||
}, |
|||
error: function (xhr, status, error) { |
|||
Swal.fire("Error", `An error occurred: ${xhr.responseText || error}`, "error"); |
|||
|
|||
} |
|||
}); |
|||
|
|||
} else { |
|||
Swal.fire( |
|||
'Cancelled', |
|||
'Your data is safe,If you wish you can Assign :)', |
|||
'info' |
|||
); |
|||
isCleared = true; |
|||
} |
|||
}); |
|||
}); |
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,639 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"> |
|||
|
|||
</head> |
|||
<style> |
|||
.required{ |
|||
color: red; |
|||
} |
|||
.card-box { |
|||
box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px; |
|||
|
|||
} |
|||
|
|||
@media (max-width: 768px) { |
|||
.card-box { |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
</style> |
|||
<body> |
|||
<div class="wrapper"> |
|||
<!-- Header --> |
|||
<header th:replace="~{fragments/modules/base/header :: header}"></header> |
|||
|
|||
<div class="page-wrap"> |
|||
<!-- Left Menu --> |
|||
<div th:replace="~{fragments/modules/base/menu :: menu}"></div> |
|||
|
|||
<div class="main-content"> |
|||
<div class="container-fluid"> |
|||
<div class="page-header"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-6"> |
|||
<div class="page-header-title"> |
|||
<i class="fa fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>QAQC Task List</h5> |
|||
<span>1913 QAQC Task List</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-lg-6"> |
|||
<nav class="breadcrumb-container" aria-label="breadcrumb"> |
|||
<ol class="breadcrumb"> |
|||
<li class="breadcrumb-item"> |
|||
<a href="/gcc/index"><i class="ik ik-home"></i></a> |
|||
</li> |
|||
<li class="breadcrumb-item" aria-current="page">1913 Reports</li> |
|||
<li class="breadcrumb-item active" aria-current="page">QAQC Task List</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row mt-4"> |
|||
|
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h3>Task Details</h3> |
|||
</div> |
|||
|
|||
<div class="row mt-3 ml-2"> |
|||
<div class="col-md-3"> |
|||
<label for="startDate" class="form-label" style="font-size: medium;">From Date:</label> |
|||
<input type="date" id="startDate" class="form-control" placeholder="Start Date"> |
|||
</div> |
|||
<div class="col-md-3"> |
|||
<label for="endDate" class="form-label" style="font-size: medium;">To Date:</label> |
|||
<input type="date" id="endDate" class="form-control" placeholder="End Date"> |
|||
</div> |
|||
<div class="col-md-3" style="margin-top: 30px;"> |
|||
<button id="searchBtn" class="btn btn-primary">Search</button> |
|||
<button id="resetBtn" class="btn btn-secondary">Reset</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="card-body"> |
|||
<div> |
|||
<div class="row mt-2"> |
|||
|
|||
|
|||
<div class="col-xl-3 col-md-3 col-sm-12"> |
|||
<div class="card card-box p-4"> |
|||
<h6 class="text-facebook mb-20 mt-2 text-center"><b>Total Task</b></h6> |
|||
<h4 class="text-twitter fw-700 text-center" id="totaltask"></h4> |
|||
</div> |
|||
</div> |
|||
<div class="col-xl-3 col-md-3 col-sm-12"> |
|||
<div class="card card-box p-4"> |
|||
<h6 class="text-facebook mb-20 mt-2 text-center"><b>Assigned Calls</b></h6> |
|||
<h4 class="text-twitter fw-700 text-center" id="totalcalls"></h4> |
|||
</div> |
|||
</div> |
|||
<div class="col-xl-3 col-md-3 col-sm-12"> |
|||
<div class="card card-box p-4"> |
|||
<h6 class="text-facebook mb-20 mt-2 text-center"><b>Finished</b></h6> |
|||
<h4 class="text-twitter fw-700 text-center" id="completedcalls"></h4> |
|||
</div> |
|||
</div> |
|||
<div class="col-xl-3 col-md-3 col-sm-12"> |
|||
<div class="card card-box p-4"> |
|||
<h6 class="text-facebook mb-20 mt-2 text-center"><b>Pending Calls</b></h6> |
|||
<h4 class="text-twitter fw-700 text-center" id="pendingcalls"></h4> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div> |
|||
<table id="QaqcDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" > |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th rowspan="2" class="text-center" width="1%;">S.No</th> |
|||
<th rowspan="2" class="text-center no-sort">Task ID</th> |
|||
<th rowspan="2" class="text-center" width="100px;">Date</th> |
|||
<th rowspan="2" class="text-center no-sort">Category</th> |
|||
<!-- <th rowspan="2" class="text-center">Description</th> --> |
|||
<th colspan="4" class="text-center">Performance</th> |
|||
<th colspan="4" class="text-center">Call Results</th> |
|||
|
|||
</tr> |
|||
<tr role="row"> |
|||
<!-- <th class="text-center">S.No</th> |
|||
<th class="text-center">Task ID</th> --> |
|||
|
|||
<th class="text-center no-sort">Assigned Calls</th> |
|||
<th class="text-center no-sort">Finished</th> |
|||
<th class="text-center no-sort">Pending Calls</th> |
|||
<th class="text-center no-sort">Completion(%)</th> |
|||
<th class="no-sort">Completed</th> |
|||
<th class="no-sort">Reopen</th> |
|||
<th class="no-sort">Followup</th> |
|||
<th class="no-sort">Others</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<!-- Add the 'Please wait' text below the spinner --> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!--agentperformance Modal --> |
|||
<div class="modal fade" id="agentperformance" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-xl" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="exampleModalCenterLabel">Task Details</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> |
|||
</div> |
|||
|
|||
<div class="modal-body"> |
|||
|
|||
<div class="modal-info"></div> |
|||
<div class="table-responsive" > |
|||
<table id="agentperformanceDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" > |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th rowspan="2" class="text-center">S.No</th> |
|||
<th rowspan="2" class="text-center">Agent Name</th> |
|||
<th colspan="4" class="text-center">Performance</th> |
|||
<th colspan="4" class="text-center">Call Results</th> |
|||
</tr> |
|||
<tr role="row"> |
|||
<th class="text-center">Assigned Calls</th> |
|||
<th class="text-center">Finished</th> |
|||
<th class="text-center">Pending Calls</th> |
|||
<th class="text-center">Completion (%)</th> |
|||
<th class="text-center">Completed</th> |
|||
<th class="text-center">Reopen</th> |
|||
<th class="text-center">Followup</th> |
|||
<th class="text-center">Others</th> |
|||
|
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
|
|||
</table> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
|
|||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<!-- sweet alert --> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
<script type="text/javascript"> |
|||
$(document).ready(function() { |
|||
|
|||
$('#agentperformance').on('shown.bs.modal', function () { |
|||
|
|||
var buttons = [ |
|||
{ |
|||
extend: 'pageLength', |
|||
className: 'btn btn-warning' |
|||
}, |
|||
{ |
|||
title: 'Data export', |
|||
extend: 'copyHtml5', |
|||
text: 'Copy', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'excelHtml5', |
|||
text: 'Excel', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'csvHtml5', |
|||
text: 'CSV', |
|||
className: 'btn btn-secondary' |
|||
}, |
|||
{ |
|||
extend: 'pdfHtml5', |
|||
text: 'PDF', |
|||
className: 'btn btn-secondary' |
|||
} |
|||
]; |
|||
|
|||
$('#agentperformanceDatatable').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: '30vh', |
|||
scrollX: true, // Enable horizontal scrolling |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
buttons: buttons, |
|||
fixedHeader: false, |
|||
autoWidth: false, |
|||
responsive: true, |
|||
searching: true, |
|||
select: false, |
|||
processing: false, |
|||
}); |
|||
|
|||
|
|||
}); |
|||
|
|||
var table = $('#QaqcDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '50vh', |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: false, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
searching:true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
// Initialize DataTable with export buttons |
|||
|
|||
const overallcountapiUrl = "/gcc/api/callcenterqaqc/qaqctasklist/overalltaskcount"; // Replace with your API endpoint |
|||
const tableApiUrl = "/gcc/api/callcenterqaqc/qaqctasklist/taskdatacount"; |
|||
const agentApiUrl = "/gcc/api/callcenterqaqc/qaqctasklist/agentdatacount"; |
|||
const totaltasks = document.getElementById("totaltask"); |
|||
const totalcallsassigned = document.getElementById("totalcalls"); |
|||
const completedcallscount = document.getElementById("completedcalls"); |
|||
const pendingcallscount = document.getElementById("pendingcalls"); |
|||
const dataTableElement = $("#QaqcDatatable").DataTable(); // Initialize DataTable |
|||
|
|||
|
|||
// Fetch Data Function |
|||
const fetchData = async (startDate = "", endDate = "") => { |
|||
|
|||
try { |
|||
const params = new URLSearchParams(); |
|||
if (startDate) params.append("startDate", startDate); |
|||
if (endDate) params.append("endDate", endDate); |
|||
|
|||
const response = await fetch(`${overallcountapiUrl}?${params.toString()}`); |
|||
const data = await response.json(); |
|||
|
|||
//console.log(data); |
|||
// Update Summary Counts |
|||
const firstItem = data[0]; // Get the first object from the array |
|||
totaltasks.textContent = firstItem.total_tasks || 0; |
|||
totalcallsassigned.textContent = firstItem.total_calls || 0; |
|||
completedcallscount.textContent = firstItem.completed_calls || 0; |
|||
pendingcallscount.textContent = firstItem.pending_calls || 0; |
|||
} catch (error) { |
|||
console.error("Error fetching data:", error); |
|||
} |
|||
}; |
|||
|
|||
|
|||
// Fetch and Populate Table Data Function |
|||
const fetchTableData = async (startDate = "", endDate = "") => { |
|||
$('#pageLoader').show(); |
|||
try { |
|||
const params = new URLSearchParams(); |
|||
if (startDate) params.append("startDate", startDate); |
|||
if (endDate) params.append("endDate", endDate); |
|||
|
|||
const response = await fetch(`${tableApiUrl}?${params.toString()}`); |
|||
const tableData = await response.json(); |
|||
|
|||
// Update DataTable with new data |
|||
table.clear(); // Clear existing data |
|||
tableData.forEach((row, index) => { |
|||
const percentage = row.Assigned |
|||
? Math.round((row.TotalCompleted / row.Assigned) * 100) |
|||
: 0; |
|||
|
|||
table.row.add([ |
|||
|
|||
`<div style="text-align: center;">${index + 1}</div>`, |
|||
`<button class="btn btn-success" data-taskid="${row.qaqc_id}" |
|||
onclick="handleTaskButtonClick('${row.qaqc_id}')">${row.taskid}</button>`, |
|||
`<div style="text-align: center;">${row.TaskCreatedDate}</div>`, |
|||
`<div style="text-align: center;">${row.call_category}</div>`, |
|||
/* `<div style="text-align: center;">${row.description}</div>`, */ |
|||
`<div style="text-align: center;">${row.Assigned}</div>`, |
|||
`<div style="text-align: center;">${row.TotalCompleted}</div>`, |
|||
`<div style="text-align: center;">${row.Pending}</div>`, |
|||
`<div style="text-align: center;">${percentage}%</div>`, |
|||
`<div style="text-align: center;">${row.Completed}</div>`, |
|||
`<div style="text-align: center;">${row.Reopened}</div>`, |
|||
`<div style="text-align: center;">${row.Followup}</div>`, |
|||
`<div style="text-align: center;">${row.Others}</div>`, |
|||
]); |
|||
|
|||
}); |
|||
table.draw(); // Redraw the DataTable with the updated data |
|||
|
|||
} catch (error) { |
|||
console.error("Error fetching table data:", error); |
|||
}finally { |
|||
$('#pageLoader').hide(); // Hide loader in both success or error |
|||
} |
|||
}; |
|||
|
|||
// Example: Fetch Data initially without filters |
|||
//fetchTableData(); |
|||
|
|||
|
|||
|
|||
// Search Button Click |
|||
document.getElementById("searchBtn").addEventListener("click", () => { |
|||
let startDate = document.getElementById("startDate").value; |
|||
let endDate = document.getElementById("endDate").value; |
|||
|
|||
if (!startDate || !endDate) { |
|||
// Show SweetAlert if dates are missing |
|||
Swal.fire({ |
|||
icon: 'warning', // Warning icon |
|||
title: 'Please select both dates.', |
|||
showConfirmButton: true, // Show a confirmation button |
|||
timer: 3000 // Optional: Auto-close after 3 seconds |
|||
}); |
|||
|
|||
e.preventDefault(); // Prevent form submission if validation fails |
|||
return; |
|||
} |
|||
|
|||
fetchData(startDate, endDate); |
|||
fetchTableData(startDate,endDate); |
|||
|
|||
|
|||
}); |
|||
|
|||
// Reset Button Click |
|||
document.getElementById("resetBtn").addEventListener("click", () => { |
|||
/* document.getElementById("startDate").value = ""; |
|||
document.getElementById("endDate").value = ""; |
|||
fetchData(); // Fetch data without date filters |
|||
fetchTableData(); */ |
|||
window.location.href = "/gcc/callcenterqaqcreports/qaqctasklist"; |
|||
}); |
|||
|
|||
|
|||
|
|||
let today = new Date(); |
|||
|
|||
// Get the first day of the current month (this should give 2024-11-01 for November) |
|||
let firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1); |
|||
|
|||
// Manually format the date as yyyy-mm-dd without relying on toISOString |
|||
let formattedFirstDay = firstDayOfMonth.getFullYear() + '-' + |
|||
(firstDayOfMonth.getMonth() + 1).toString().padStart(2, '0') + '-' + |
|||
firstDayOfMonth.getDate().toString().padStart(2, '0'); |
|||
|
|||
let formattedToday = today.getFullYear() + '-' + |
|||
(today.getMonth() + 1).toString().padStart(2, '0') + '-' + |
|||
today.getDate().toString().padStart(2, '0'); |
|||
|
|||
// Set the date input values |
|||
$('#startDate').val(formattedFirstDay); |
|||
$('#endDate').val(formattedToday); |
|||
|
|||
$('#endDate').attr('min', formattedFirstDay); // Initial minimum for To Date |
|||
$('#startDate').attr('max', formattedToday); // Initial maximum for From Date |
|||
|
|||
|
|||
// Update To Date's min attribute when From Date changes |
|||
$('#startDate').on('change', function () { |
|||
const fromDate = $(this).val(); |
|||
$('#endDate').attr('min', fromDate); // Update min attribute for To Date |
|||
|
|||
// If To Date is earlier than the new From Date, adjust it |
|||
const toDate = $('#endDate').val(); |
|||
if (new Date(toDate) < new Date(fromDate)) { |
|||
$('#endDate').val(fromDate); |
|||
} |
|||
}); |
|||
|
|||
// Update From Date's max attribute when To Date changes |
|||
$('#endDate').on('change', function () { |
|||
const toDate = $(this).val(); |
|||
$('#startDate').attr('max', toDate); // Update max attribute for From Date |
|||
|
|||
// If From Date is later than the new To Date, adjust it |
|||
const fromDate = $('#startDate').val(); |
|||
if (new Date(fromDate) > new Date(toDate)) { |
|||
$('#startDate').val(toDate); |
|||
} |
|||
}); |
|||
|
|||
// Initial Load |
|||
// Call fetch functions with default values |
|||
//fetchData(); |
|||
//fetchTableData(); |
|||
fetchData(formattedFirstDay, formattedToday); |
|||
fetchTableData(formattedFirstDay, formattedToday); |
|||
}); |
|||
|
|||
function handleTaskButtonClick(TaskId) |
|||
{ |
|||
//console.log("TaskId",TaskId); |
|||
|
|||
|
|||
$('#agentperformance').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); |
|||
$('#agentperformance').modal('show'); |
|||
|
|||
// Clear old data from the table |
|||
if ($.fn.DataTable.isDataTable('#agentperformanceDatatable')) { |
|||
$('#agentperformanceDatatable').DataTable().clear().destroy(); |
|||
} |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/qaqctasklist/agentdatacount?qaqc_id='+TaskId, |
|||
type: 'GET', |
|||
contentType: 'application/json', |
|||
success: function (response) { |
|||
//console.log("response",response); |
|||
if (response && response.length > 0) { |
|||
|
|||
let CtableBody = $('#agentperformanceDatatable tbody'); |
|||
CtableBody.empty(); |
|||
response.forEach((item, index) => { |
|||
const modalHeader = ` |
|||
<h5 class="modal-title" id="exampleModalCenterLabel"> |
|||
Task Details - <span>Task ID: ${item.taskId}</span> and |
|||
<span>Created Date: ${item.TaskCreatedDate}</span> |
|||
|
|||
</h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
`; |
|||
$('.modal-header').html(modalHeader); |
|||
|
|||
// Updating the modal body with additional details |
|||
const modalBodyDetails = ` |
|||
<div class="mt-1" style="font-size: 14px;"> |
|||
<div class="row pb-2"> |
|||
<div class="col-md-6"><strong>From Date:</strong> ${item.fromdate || 'N/A'}</div> |
|||
<div class="col-md-6"><strong>To Date:</strong> ${item.todate || 'N/A'}</div> |
|||
</div> |
|||
<div class="row pb-2"> |
|||
<div class="col-md-6"><strong>Description:</strong> ${item.description || 'N/A'}</div> |
|||
<div class="col-md-6"><strong>Call Category:</strong> ${item.call_category || 'N/A'}</div> |
|||
</div> |
|||
<div class="row pb-2"> |
|||
<div class="col-md-6"><strong>Complaint Group:</strong> ${item.complaint_group || 'N/A'}</div> |
|||
<div class="col-md-6"><strong>Complaint Type:</strong> ${item.complaint_type || 'N/A'}</div> |
|||
</div> |
|||
<div class="row pb-2"> |
|||
<div class="col-md-6"><strong>Complaint Mode:</strong> ${item.complaint_mode || 'N/A'}</div> |
|||
<div class="col-md-6"><strong>Complaint Zone:</strong> ${item.complaint_zone || 'N/A'}</div> |
|||
</div> |
|||
<div class="row pb-2"> |
|||
<div class="col-md-6"><strong>Complaint Region:</strong> ${item.complaint_region || 'N/A'}</div> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
`; |
|||
$('.modal-info').html(modalBodyDetails); // Insert the details before the table |
|||
|
|||
let row = ` |
|||
<tr> |
|||
<td class="text-center">${index + 1}</td> |
|||
<td class="text-center">${item.agentName}</td> |
|||
<td class="text-center">${item.assigned || 0}</td> |
|||
<td class="text-center">${item.callstaken || 0}</td> |
|||
<td class="text-center">${item.pending || 0}</td> |
|||
<td class="text-center">${item.percentage || 0}%</td> |
|||
<td class="text-center">${item.Completed || 0}</td> |
|||
<td class="text-center">${item.Reopened || 0}</td> |
|||
<td class="text-center">${item.Followup || 0}</td> |
|||
<td class="text-center">${item.Others || 0}</td> |
|||
</tr> |
|||
`; |
|||
CtableBody.append(row); |
|||
}); |
|||
} |
|||
else { |
|||
$('#agentperformanceDatatable tbody').html(` |
|||
<tr> |
|||
<td colspan="10" class="text-center">No data available</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
|
|||
}, |
|||
error: function (xhr, status, error) { |
|||
console.error('Error in Fetching Task:', error); |
|||
$('#agentperformanceDatatable tbody').html(` |
|||
<tr> |
|||
<td colspan="10" class="text-center text-danger">Failed to load data</td> |
|||
</tr> |
|||
`); |
|||
} |
|||
}); |
|||
|
|||
} |
|||
|
|||
/* $(document).ready(function () { |
|||
|
|||
// Event listener for From Date selection |
|||
$("#startDate").on("change", function() { |
|||
const startDate = $(this).val(); // Get the selected start date |
|||
// Set the min value for To Date to be the selected From Date |
|||
$("#endDate").attr("min", startDate); |
|||
}); |
|||
|
|||
// Event listener for To Date selection |
|||
$("#endDate").on("change", function() { |
|||
const endDate = $(this).val(); // Get the selected end date |
|||
// Set the max value for From Date to be the selected To Date |
|||
$("#startDate").attr("max", endDate); |
|||
}); |
|||
|
|||
}); */ |
|||
|
|||
</script> |
|||
|
|||
|
|||
|
|||
</body> |
|||
</html> |
|||
1040
src/main/resources/templates/modules/callcenterqaqc/scpreport.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1149
src/main/resources/templates/modules/callcenterqaqc/scpverification.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1486
src/main/resources/templates/modules/callcenterqaqc/socialmediacomplaints.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,756 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"> |
|||
|
|||
</head> |
|||
<style> |
|||
#modalBody h4 { |
|||
font-weight: bold; |
|||
margin-top: 15px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
#modalBody p { |
|||
margin: 5px 0; |
|||
} |
|||
|
|||
#modalBody hr { |
|||
margin: 15px 0; |
|||
} |
|||
.comment { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.comment p { |
|||
margin: 0; |
|||
} |
|||
|
|||
hr { |
|||
border: 1px solid #ccc; |
|||
} |
|||
|
|||
.col-4 { |
|||
font-weight: bold; |
|||
text-align: right; |
|||
} |
|||
|
|||
.col-8 { |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
.comment { |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
.comment .text-muted { |
|||
font-size: 0.9em; |
|||
color: #6c757d; |
|||
} |
|||
|
|||
.comment hr { |
|||
border-top: 1px solid #ccc; |
|||
} |
|||
|
|||
.comment .btn-link { |
|||
font-size: 0.9em; |
|||
text-decoration: underline; |
|||
color: #007bff; |
|||
} |
|||
/* Make the modal body scrollable */ |
|||
#detailsModal .modal-body { |
|||
max-height: 70vh; /* Limit the height to 70% of the viewport */ |
|||
overflow-y: auto; /* Enable vertical scrolling */ |
|||
} |
|||
</style> |
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-8"> |
|||
<div class="page-header-title"> |
|||
<i class="fa fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>SocialMedia Complaints</h5> |
|||
<span>View Social Media Completed Complaints</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="/gcc/index"><i |
|||
class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">1913 Social Media</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Completed List</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<span style="font-size: medium;font-weight: bold;">Select Filters</span> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="row"> |
|||
<div class="col-sm-3 mb-2"> |
|||
<label for="startDate" style="font-size: medium;">From Date:</label> |
|||
<input type="date" id="startDate" class="form-control"> |
|||
</div> |
|||
<div class="col-sm-3 mb-2"> |
|||
<label for="endDate" style="font-size: medium;">To Date:</label> |
|||
<input type="date" id="endDate" class="form-control"> |
|||
</div> |
|||
|
|||
<div class="col-sm-3 mb-2"> |
|||
<label for="status" style="font-size: medium;">Status:</label> |
|||
<select id="status" class="form-control"> |
|||
<option value="ALL">Select</option> |
|||
<option value="COMPLETED">Completed</option> |
|||
<option value="REOPEN">Reopened</option> |
|||
<option value="FOLLOWUP">Followup</option> |
|||
</select> |
|||
</div> |
|||
|
|||
<div class="col-sm-3 mb-2"> |
|||
<label for="dropdown2" style="font-size: medium;">Zone:</label> |
|||
<select id="dropdown2" class="form-control"> |
|||
<option value="">Select</option> |
|||
|
|||
</select> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12 d-flex justify-content-center"> |
|||
<button type="submit" id="searchBtn" |
|||
class="btn btn-primary mx-2">Search</button> |
|||
|
|||
<button class="btn btn-danger mx-2" id="resetBtn" |
|||
name="reset" type="reset">Reset</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<h3 style="font-weight: bold;font-size: large;"><span th:text="${userId}" style="display:none;" id="userIdSpan"></span> |
|||
<span th:text="${agent_name}" style="font-weight: bold; font-size: large;"></span>'s Completed List</h3> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="table-responsive"> |
|||
|
|||
<table id="ReportDatatable" |
|||
class="table table-striped table-bordered table-hover dataTable" |
|||
role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
|
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Reg Date</th> |
|||
<th class="text-center no-sort">Complaint No</th> |
|||
<th class="text-center no-sort">zone</th> |
|||
<th class="text-center">ComplaintType</th> |
|||
<th class="text-center no-sort">Public Name</th> |
|||
<th class="text-center">Public Mobile no</th> |
|||
<th class="text-center">Officer Name</th> |
|||
<th class="text-center">Status</th> |
|||
<th class="text-center">View</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<!-- Add the 'Please wait' text below the spinner --> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Modal --> |
|||
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" |
|||
aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="detailsModalLabel">Complaint |
|||
Details</h5> |
|||
<button type="button" class="close" data-dismiss="modal" |
|||
aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body" id="modalBody"> |
|||
<!-- Details will be populated here --> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" |
|||
data-dismiss="modal">Close</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- in the code use to show the download different type microsoft --> |
|||
|
|||
<!-- Include jQuery and Bootstrap JavaScript --> |
|||
|
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
|
|||
<script |
|||
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<!-- sweet alert --> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
<script type="text/javascript"> |
|||
document.addEventListener("DOMContentLoaded", function () { |
|||
|
|||
const complaintZoneDropdown = document.getElementById('dropdown2'); |
|||
|
|||
|
|||
// Load all zones |
|||
fetch('/gcc/api/callcenterqaqc/getZones') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
// Clear existing options |
|||
complaintZoneDropdown.innerHTML = `<option value="">Select</option>`; |
|||
|
|||
// Add options from the API response |
|||
data.forEach(complaintZone => { |
|||
complaintZoneDropdown.innerHTML += `<option value="${complaintZone}">${complaintZone}</option>`; |
|||
}); |
|||
}) |
|||
.catch(error => { |
|||
console.error('Error fetching complaint groups:', error); |
|||
}); |
|||
|
|||
|
|||
|
|||
const startDateField = document.getElementById('startDate'); |
|||
const endDateField = document.getElementById('endDate'); |
|||
|
|||
// Event listener for To Date |
|||
endDateField.addEventListener('change', function () { |
|||
if (endDateField.value) { |
|||
startDateField.max = endDateField.value; // Set max value for From Date |
|||
} else { |
|||
startDateField.removeAttribute('max'); // Remove max if To Date is cleared |
|||
} |
|||
|
|||
// Validate From Date against updated To Date |
|||
if (startDateField.value && new Date(startDateField.value) > new Date(endDateField.value)) { |
|||
startDateField.value = ''; // Clear invalid From Date |
|||
alert("From Date cannot be after To Date."); |
|||
} |
|||
}); |
|||
|
|||
// Event listener for From Date |
|||
startDateField.addEventListener('change', function () { |
|||
if (startDateField.value) { |
|||
endDateField.min = startDateField.value; // Set min value for To Date |
|||
} else { |
|||
endDateField.removeAttribute('min'); // Remove min if From Date is cleared |
|||
} |
|||
|
|||
// Validate To Date against updated From Date |
|||
if (endDateField.value && new Date(endDateField.value) < new Date(startDateField.value)) { |
|||
endDateField.value = ''; // Clear invalid To Date |
|||
alert("To Date cannot be before From Date."); |
|||
} |
|||
}); |
|||
|
|||
|
|||
|
|||
}); |
|||
|
|||
$(document).ready(function() { |
|||
|
|||
var table = $('#ReportDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '100vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
searching: true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
document.getElementById('resetBtn').addEventListener('click', function () { |
|||
event.preventDefault(); |
|||
|
|||
window.location.href="/gcc/callcenterqaqcsocialmedia/smfinishedcomplaints"; |
|||
|
|||
}); |
|||
|
|||
document.getElementById('searchBtn').addEventListener('click', function (e) { |
|||
|
|||
|
|||
let startDate = document.getElementById('startDate').value; |
|||
let endDate = document.getElementById('endDate').value; |
|||
|
|||
let zone= document.getElementById('dropdown2').value; |
|||
let status= document.getElementById('status').value; |
|||
|
|||
console.log("startdate: ",startDate); |
|||
console.log("enddate: ",endDate); |
|||
console.log("status: ",status); |
|||
console.log("zone: ",zone); |
|||
|
|||
if (!startDate && !endDate) { |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Error', |
|||
text: 'Please Select Both From Date and To Date', |
|||
showConfirmButton: true, |
|||
timer: 3000 |
|||
}); |
|||
e.preventDefault(); // Prevent the default action |
|||
return; // Stop further execution |
|||
} |
|||
const params = new URLSearchParams({ |
|||
startDate: startDate, |
|||
endDate: endDate, |
|||
status:status, |
|||
zone: zone |
|||
}); |
|||
$('#pageLoader').show(); |
|||
$.ajax({ |
|||
type: "GET", |
|||
url: `/gcc/api/callcenterqaqc/socialmedia/socialmediacompletedlist?${params.toString()}`, // Append query string to URL |
|||
contentType: "application/json", |
|||
success: function (response) { |
|||
console.log("API Response:", response); |
|||
$('#pageLoader').hide(); |
|||
if (response.status === "success") { |
|||
console.log("Details Array:", response.details); |
|||
// Ensure details is an array and has at least one entry |
|||
if (Array.isArray(response.details) && response.details.length > 0) { |
|||
let table = $('#ReportDatatable').DataTable({ |
|||
destroy: true, |
|||
searching: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
paging: true, |
|||
info: true, |
|||
data: response.details, |
|||
columns: [ |
|||
{ |
|||
data: null, |
|||
render: (data, type, row, meta) => meta.row + 1, |
|||
className: 'text-center' |
|||
}, |
|||
|
|||
{ data: 'complaint_date', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'complaint_number', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'zone', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'complaint_type', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'complaint_person_name', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'complaint_mobilenumber', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'official_name', defaultContent: '-', className: 'text-center' }, |
|||
{ |
|||
data: null, |
|||
defaultContent: '-', |
|||
className: 'text-center', |
|||
render: function(data, type, row) { |
|||
|
|||
if (row.call_status === "FOLLOWUP") { |
|||
|
|||
return ` |
|||
<div> |
|||
<div><b>${row.call_status}</b></div> |
|||
<div class="text-danger"> |
|||
${row.formatted_fdate} |
|||
</div> |
|||
</div> |
|||
`; |
|||
} |
|||
|
|||
return row.call_status || '-'; |
|||
} |
|||
}, |
|||
{ |
|||
data: 'complaint_number', |
|||
render: function(data, type, row) { |
|||
return ` |
|||
<td class="text-center"> |
|||
<button type="button" class="btn btn-info" data-complaint-number="${data}"> |
|||
View |
|||
</button> |
|||
</td>`; |
|||
}, |
|||
className: 'text-center' |
|||
} |
|||
], |
|||
dom: 'Bfrtip', |
|||
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' |
|||
} |
|||
], |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '100vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
} |
|||
}); |
|||
} |
|||
|
|||
} |
|||
else if (response.status === "nodata") { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'No Data', |
|||
text: 'No data available for the selected criteria.' |
|||
}); |
|||
} |
|||
else if (response.status === "error") { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message |
|||
}); |
|||
} |
|||
else { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
error: function (error) { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
|
|||
$(document).on('click', '.btn-info', function () { |
|||
// Retrieve the complaint number from the data attribute |
|||
var complaintNumber = $(this).data('complaint-number'); |
|||
console.log("complaintNumber===="+complaintNumber); |
|||
// Call the viewDetails function with the complaint number |
|||
viewDetails(complaintNumber); |
|||
}); |
|||
|
|||
}); |
|||
function viewDetails(complaintNumber) { |
|||
document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>'; |
|||
$('#detailsModal').modal('show'); |
|||
|
|||
// Fetch the main complaint details |
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails', |
|||
type: 'GET', |
|||
data:{complaintNumber:complaintNumber}, |
|||
success: function (data) { |
|||
//console.log('Complaint Data:', data); |
|||
|
|||
// Fetch agent response details |
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory', |
|||
type: 'GET', |
|||
data: { complaintNumber }, |
|||
success: function (agentResponse) { |
|||
//console.log('Agent Response:', agentResponse); |
|||
|
|||
// Use the logic for building complaint and agent details as HTML |
|||
const detailsHtml = generateDetailsHtml(data, agentResponse); |
|||
|
|||
// Update modal content |
|||
document.getElementById('modalBody').innerHTML = detailsHtml; |
|||
}, |
|||
error: function () { |
|||
document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>'; |
|||
} |
|||
}); |
|||
}, |
|||
error: function () { |
|||
document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>'; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// Function to generate complaint and agent details HTML |
|||
function generateDetailsHtml(data, agentResponse) { |
|||
|
|||
// Helper function to format date to yyyy-mm-dd |
|||
function formatDate(dateStr) { |
|||
if (!dateStr) return 'N/A'; |
|||
const date = new Date(dateStr); |
|||
return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd |
|||
} |
|||
// Format complaint messages |
|||
let messagesHtml = ''; |
|||
if (data.comments && data.comments.length > 0) { |
|||
data.comments.forEach((comment) => { |
|||
const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available" |
|||
? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>` |
|||
: '<p style="color: red;">No image available for this comment.</p>'; |
|||
|
|||
messagesHtml += ` |
|||
<div class="comment mb-4"> |
|||
<div class="row"> |
|||
<div class="col-2 text-center"> |
|||
<p class="text-muted">${comment.comment_date}</p> |
|||
</div> |
|||
<div class="col-10"> |
|||
<p><strong>${comment.user || 'N/A'}</strong> Says:</p> |
|||
<p>${comment.message || 'No message available'}</p> |
|||
<div class="user-image">${commentImageLink}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
}); |
|||
} else { |
|||
messagesHtml = '<p>No comments available.</p>'; |
|||
} |
|||
|
|||
// Format agent responses |
|||
let agentRepliedHtml = ''; |
|||
if (agentResponse.length > 0) { |
|||
agentResponse.forEach((agentItem) => { |
|||
agentRepliedHtml += ` |
|||
<div class="comment mb-4"> |
|||
<div class="row"> |
|||
<div class="col-2 text-center"> |
|||
<p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p> |
|||
</div> |
|||
<div class="col-10"> |
|||
<p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p> |
|||
<p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p> |
|||
<p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
}); |
|||
} else { |
|||
agentRepliedHtml = '<p>No agent replied messages available.</p>'; |
|||
} |
|||
|
|||
// Check for user images |
|||
const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {}; |
|||
const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== "" |
|||
? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>` |
|||
: '<p style="color: red;">UserImages: No image available.</p>'; |
|||
|
|||
// Combine all sections into the final HTML |
|||
const detailsHtml = ` |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<h4>Complaint Person's Details:</h4> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Date:</strong> ${data.complaintdate}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Division:</strong> ${data.Division || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Gender:</strong> ${data.gender || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
<h4>Complaint Details:</h4> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p> |
|||
</div> |
|||
|
|||
</div> |
|||
<hr> |
|||
<h4>Complaint Messages:</h4> |
|||
${messagesHtml} |
|||
<hr> |
|||
<h4>Agent Replied Messages:</h4> |
|||
${agentRepliedHtml} |
|||
<hr> |
|||
${imageLink} |
|||
`; |
|||
|
|||
return detailsHtml; |
|||
} |
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,805 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"> |
|||
|
|||
</head> |
|||
<style> |
|||
#modalBody h4 { |
|||
font-weight: bold; |
|||
margin-top: 15px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
#modalBody p { |
|||
margin: 5px 0; |
|||
} |
|||
|
|||
#modalBody hr { |
|||
margin: 15px 0; |
|||
} |
|||
.comment { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.comment p { |
|||
margin: 0; |
|||
} |
|||
|
|||
hr { |
|||
border: 1px solid #ccc; |
|||
} |
|||
|
|||
.col-4 { |
|||
font-weight: bold; |
|||
text-align: right; |
|||
} |
|||
|
|||
.col-8 { |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
.comment { |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
.comment .text-muted { |
|||
font-size: 0.9em; |
|||
color: #6c757d; |
|||
} |
|||
|
|||
.comment hr { |
|||
border-top: 1px solid #ccc; |
|||
} |
|||
|
|||
.comment .btn-link { |
|||
font-size: 0.9em; |
|||
text-decoration: underline; |
|||
color: #007bff; |
|||
} |
|||
/* Make the modal body scrollable */ |
|||
#detailsModal .modal-body { |
|||
max-height: 70vh; /* Limit the height to 70% of the viewport */ |
|||
overflow-y: auto; /* Enable vertical scrolling */ |
|||
} |
|||
.width1{ |
|||
width: 100px; |
|||
} |
|||
.width2{ |
|||
width: 120px; |
|||
} |
|||
</style> |
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-8"> |
|||
<div class="page-header-title"> |
|||
<i class="fa fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>SocialMedia Complaints</h5> |
|||
<span>Closing Social Media Registered Complaints</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="/gcc/index"><i |
|||
class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">1913 Social Media</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Close Reg Complaints</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<span style="font-size: medium;font-weight: bold;">Complaints List</span> |
|||
<span th:text="${userId}" style="display:none;" id="userIdSpan"></span> |
|||
</div> |
|||
<div class="card-body"> |
|||
|
|||
<div class="table-responsive"> |
|||
|
|||
<table id="ReportDatatable" |
|||
class="table table-striped table-bordered table-hover dataTable" |
|||
role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
|
|||
<th class="text-center no-sort">S.No</th> |
|||
|
|||
<th class="text-center no-sort">Complaint No</th> |
|||
<th class="text-center">Agent</th> |
|||
<th class="text-center">Agent Submitted Date</th> |
|||
<th class="text-center">View</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<!-- Add the 'Please wait' text below the spinner --> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Modal --> |
|||
<div class="modal fade" id="detailsModal" tabindex="-1" role="dialog" |
|||
aria-labelledby="detailsModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="detailsModalLabel">Complaint |
|||
Details</h5> |
|||
<button type="button" class="close" data-dismiss="modal" |
|||
aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body" id="modalBody"> |
|||
<!-- Details will be populated here --> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-secondary" |
|||
data-dismiss="modal">Close</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- in the code use to show the download different type microsoft --> |
|||
|
|||
<!-- Include jQuery and Bootstrap JavaScript --> |
|||
|
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
|
|||
<script |
|||
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<!-- sweet alert --> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
<script type="text/javascript"> |
|||
|
|||
$(document).ready(function() { |
|||
|
|||
var table = $('#ReportDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '100vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
searching: true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
$('#pageLoader').show(); |
|||
|
|||
$.ajax({ |
|||
type: "GET", |
|||
url: `/gcc/api/callcenterqaqc/socialmedia/getfilteredregcomps`, |
|||
success: function (response) { |
|||
$('#pageLoader').hide(); |
|||
if (response.status === "success") { |
|||
|
|||
console.log("Details Array:", response.details); |
|||
|
|||
// Ensure details is an array and has at least one entry |
|||
if (Array.isArray(response.details) && response.details.length > 0) { |
|||
let columns = [ |
|||
{ |
|||
data: null, |
|||
render: (data, type, row, meta) => meta.row + 1, |
|||
className: 'text-center' |
|||
}, |
|||
{ data: 'complaintnumber', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'agent_name', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'submitted_date', defaultContent: '-', className: 'text-center' }, |
|||
|
|||
{ |
|||
data: null, |
|||
render: function(data, type, row) { |
|||
return ` |
|||
<button |
|||
type="button" |
|||
class="btn btn-info btn-view" |
|||
data-complaint-number="${row.complaintnumber}" |
|||
data-remarks="${row.remarks || ''}" |
|||
data-img="${row.img_full_path || ''}"> |
|||
View |
|||
</button> |
|||
`; |
|||
}, |
|||
className: 'text-center' |
|||
} |
|||
|
|||
]; |
|||
|
|||
|
|||
// Initialize the DataTable |
|||
$('#ReportDatatable').DataTable({ |
|||
destroy: true, |
|||
searching: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
paging: true, |
|||
info: true, |
|||
data: response.details, |
|||
columns: columns, |
|||
dom: 'Bfrtip', |
|||
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' |
|||
} |
|||
], |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '100vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
} |
|||
}); |
|||
} |
|||
|
|||
} |
|||
else if (response.status === "nodata") { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'No Data', |
|||
text: 'No data available.' |
|||
}); |
|||
} |
|||
else if (response.status === "error") { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message |
|||
}); |
|||
} |
|||
else { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message |
|||
}); |
|||
} |
|||
}, |
|||
error: function (error) { |
|||
$('#pageLoader').hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
|
|||
$(document).on('click', '.btn-info', function () { |
|||
const complaintNumber = $(this).data('complaint-number'); |
|||
const remarks = $(this).data('remarks'); |
|||
const imgFullPath = $(this).data('img'); |
|||
|
|||
viewDetails(complaintNumber, remarks, imgFullPath); |
|||
}); |
|||
|
|||
function viewDetails(complaintNumber, remarks, imgFullPath) { |
|||
document.getElementById('modalBody').innerHTML = '<p style="text-align:center;">Please wait, loading data...</p>'; |
|||
$('#detailsModal').modal('show'); |
|||
|
|||
// Fetch the main complaint details |
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/agent/qaqccalls/getComplaintDetails', |
|||
type: 'GET', |
|||
data:{complaintNumber:complaintNumber}, |
|||
success: function (data) { |
|||
//console.log('Complaint Data:', data); |
|||
|
|||
// Fetch agent response details |
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/agent/attendedcomplaintshistory', |
|||
type: 'GET', |
|||
data: { complaintNumber }, |
|||
success: function (agentResponse) { |
|||
//console.log('Agent Response:', agentResponse); |
|||
|
|||
// Use the logic for building complaint and agent details as HTML |
|||
const detailsHtml = generateDetailsHtml(data, agentResponse,remarks,imgFullPath); |
|||
|
|||
// Update modal content |
|||
document.getElementById('modalBody').innerHTML = detailsHtml; |
|||
|
|||
|
|||
}, |
|||
error: function () { |
|||
document.getElementById('modalBody').innerHTML = '<p>Error loading agent details. Please try again later.</p>'; |
|||
} |
|||
}); |
|||
}, |
|||
error: function () { |
|||
document.getElementById('modalBody').innerHTML = '<p>Error loading complaint details. Please try again later.</p>'; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function generateDetailsHtml(data, agentResponse,remarks,imgFullPath) { |
|||
|
|||
// Helper function to format date to yyyy-mm-dd |
|||
function formatDate(dateStr) { |
|||
if (!dateStr) return 'N/A'; |
|||
const date = new Date(dateStr); |
|||
return date.toISOString().split('T')[0]; // Formats to yyyy-mm-dd |
|||
} |
|||
// Format complaint messages |
|||
let messagesHtml = ''; |
|||
if (data.comments && data.comments.length > 0) { |
|||
data.comments.forEach((comment) => { |
|||
const commentImageLink = comment.Comp_Image && comment.Comp_Image !== "No image available" |
|||
? `<a href="${comment.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">View Image</a>` |
|||
: '<p style="color: red;">No image available for this comment.</p>'; |
|||
|
|||
messagesHtml += ` |
|||
<div class="comment mb-4"> |
|||
<div class="row"> |
|||
<div class="col-2 text-center"> |
|||
<p class="text-muted">${comment.comment_date}</p> |
|||
</div> |
|||
<div class="col-10"> |
|||
<p><strong>${comment.user || 'N/A'}</strong> Says:</p> |
|||
<p>${comment.message || 'No message available'}</p> |
|||
<div class="user-image">${commentImageLink}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
}); |
|||
} else { |
|||
messagesHtml = '<p>No comments available.</p>'; |
|||
} |
|||
|
|||
// Format agent responses |
|||
let agentRepliedHtml = ''; |
|||
if (agentResponse.length > 0) { |
|||
agentResponse.forEach((agentItem) => { |
|||
agentRepliedHtml += ` |
|||
<div class="comment mb-4"> |
|||
<div class="row"> |
|||
<div class="col-2 text-center"> |
|||
<p class="text-muted"><strong>${formatDate(agentItem.created_date) || 'N/A'}</strong></p> |
|||
</div> |
|||
<div class="col-10"> |
|||
<p><strong>${agentItem.agent_name || 'N/A'}</strong>, Says: ${agentItem.call_status || 'N/A'}</p> |
|||
<p><strong>Remarks: </strong>${agentItem.remarks || 'N/A'}</p> |
|||
<p><strong>Remainder Date: </strong> ${formatDate(agentItem.remainder_date) || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
`; |
|||
}); |
|||
} else { |
|||
agentRepliedHtml = '<p>No agent replied messages available.</p>'; |
|||
} |
|||
|
|||
// Check for user images |
|||
const userImages = data.userimages && data.userimages.length > 0 ? data.userimages[0] : {}; |
|||
const imageLink = userImages.Comp_Image && userImages.Comp_Image !== "null" && userImages.Comp_Image !== "" |
|||
? `<a href="${userImages.Comp_Image}" target="_blank" style="color: green; text-decoration: underline;">UserImages: View Image</a>` |
|||
: '<p style="color: red;">UserImages: No image available.</p>'; |
|||
|
|||
// Combine all sections into the final HTML |
|||
const detailsHtml = ` |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<h4>Complaint Person's Details:</h4> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Number:</strong> ${data.complaintid || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Date:</strong> ${data.complaintdate}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complainant's Name:</strong> ${data.complainantName || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Phone Number:</strong> ${data.mobileNumber || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Zone:</strong> ${data.Zone || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Division:</strong> ${data.Division || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Gender:</strong> ${data.gender || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Complainant's Address:</strong> ${data.Street || 'N/A'}, ${data.Area || 'N/A'}, ${data.Landmark || 'N/A'}, ${data.Location || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<hr> |
|||
<h4>Complaint Details:</h4> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Dept:</strong> ${data.deptname || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Mode:</strong> ${data.compmode || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Complaint Type:</strong> ${data.complaintType || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong>Details of Complaint:</strong> ${data.description || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Current Status:</strong> ${data.currentStatus || 'N/A'}</p> |
|||
</div> |
|||
<div class="col-6"> |
|||
<p><strong style="color:blue;">Official Mobile:</strong> ${data.OfficialMobile || 'N/A'}</p> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-6"> |
|||
<p><strong>Last Updated Date:</strong> ${data.greatestDate || 'N/A'}</p> |
|||
</div> |
|||
|
|||
</div> |
|||
<hr> |
|||
<h4>Complaint Messages:</h4> |
|||
${messagesHtml} |
|||
<hr> |
|||
<h4>Agent Replied Messages:</h4> |
|||
${agentRepliedHtml} |
|||
<hr> |
|||
${imageLink} |
|||
|
|||
<hr> |
|||
|
|||
<h4>Registered Complaint Closing Details</h4> |
|||
|
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
|
|||
<p> |
|||
<strong>Resolved Image:</strong> |
|||
${ |
|||
imgFullPath |
|||
? `<a href="${imgFullPath}" |
|||
target="_blank" |
|||
style="color:blue;text-decoration:underline;"> |
|||
View Resolved Image |
|||
</a>` |
|||
: 'No Image Available' |
|||
} |
|||
</p> |
|||
|
|||
<p> |
|||
<strong>Remarks:</strong> |
|||
${remarks || 'N/A'} |
|||
</p> |
|||
|
|||
<div class="d-flex justify-content-center mt-3"> |
|||
<button |
|||
type="button" |
|||
class="btn btn-success" |
|||
onclick="approveComplaint( |
|||
'${data.complaintid}', |
|||
'${remarks ? remarks.replace(/'/g, "\\'") : ""}', |
|||
'${imgFullPath || ""}' |
|||
)"> |
|||
Complaint Close |
|||
</button> |
|||
|
|||
<button |
|||
type="button" |
|||
class="btn btn-danger ml-2" |
|||
onclick="rejectComplaint( |
|||
'${data.complaintid}' |
|||
)"> |
|||
Reject |
|||
</button> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
`; |
|||
|
|||
return detailsHtml; |
|||
} |
|||
|
|||
function rejectComplaint(complaintId) { |
|||
const userid = document.getElementById('userIdSpan').textContent; |
|||
|
|||
Swal.fire({ |
|||
title: 'Are you sure?', |
|||
text: 'You want to Reject this complaint?', |
|||
icon: 'question', |
|||
showCancelButton: true, |
|||
confirmButtonText: 'Yes, Reject', |
|||
cancelButtonText: 'Cancel' |
|||
}).then((result) => { |
|||
|
|||
if (result.isConfirmed) { |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/socialmedia/rejectComplaint', |
|||
type: 'POST', |
|||
data: { |
|||
complaintId: complaintId, |
|||
userid:userid |
|||
}, |
|||
|
|||
beforeSend: function () { |
|||
Swal.fire({ |
|||
title: 'Please Wait...', |
|||
text: 'Processing approval...', |
|||
allowOutsideClick: false, |
|||
didOpen: () => { |
|||
Swal.showLoading(); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
success: function (response) { |
|||
|
|||
Swal.close(); |
|||
|
|||
if (response.status === 'SUCCESS') { |
|||
|
|||
Swal.fire({ |
|||
icon: 'success', |
|||
title: 'Success', |
|||
text: response.message |
|||
}).then(() => { |
|||
|
|||
$('#detailsModal').modal('hide'); |
|||
|
|||
// reload datatable data if required |
|||
location.reload(); |
|||
}); |
|||
|
|||
} else { |
|||
|
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Failed', |
|||
text: response.message |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
error: function () { |
|||
|
|||
Swal.close(); |
|||
|
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: 'Server error occurred.' |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function approveComplaint(complaintId, remarks, imgFullPath) { |
|||
|
|||
const userid = document.getElementById('userIdSpan').textContent; |
|||
//console.log("userid===="+userid); |
|||
|
|||
Swal.fire({ |
|||
title: 'Are you sure?', |
|||
text: 'You want to Close this complaint?', |
|||
icon: 'question', |
|||
showCancelButton: true, |
|||
confirmButtonText: 'Yes, Close', |
|||
cancelButtonText: 'Cancel' |
|||
}).then((result) => { |
|||
|
|||
if (result.isConfirmed) { |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/socialmedia/approveComplaint', |
|||
type: 'POST', |
|||
data: { |
|||
complaintId: complaintId, |
|||
remarks: remarks, |
|||
imgFullPath: imgFullPath, |
|||
userid:userid |
|||
}, |
|||
|
|||
beforeSend: function () { |
|||
Swal.fire({ |
|||
title: 'Please Wait...', |
|||
text: 'Processing approval...', |
|||
allowOutsideClick: false, |
|||
didOpen: () => { |
|||
Swal.showLoading(); |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
success: function (response) { |
|||
|
|||
Swal.close(); |
|||
|
|||
if (response.status === 'SUCCESS') { |
|||
|
|||
Swal.fire({ |
|||
icon: 'success', |
|||
title: 'Approved', |
|||
text: response.message |
|||
}).then(() => { |
|||
|
|||
$('#detailsModal').modal('hide'); |
|||
|
|||
// reload datatable data if required |
|||
location.reload(); |
|||
}); |
|||
|
|||
} else { |
|||
|
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Failed', |
|||
text: response.message |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
error: function () { |
|||
|
|||
Swal.close(); |
|||
|
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: 'Server error occurred.' |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
</script> |
|||
|
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,649 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"> |
|||
|
|||
</head> |
|||
<style> |
|||
|
|||
</style> |
|||
<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 mb-2"> |
|||
<div class="row align-items-end"> |
|||
<div class="col-lg-8"> |
|||
<div class="page-header-title"> |
|||
<i class="fa fa-list-alt bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>QAQC Unattended List</h5> |
|||
<span>1913 QAQC Unattended List</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="/gcc/index"><i |
|||
class="ik ik-home"></i></a></li> |
|||
<li class="breadcrumb-item" aria-current="page">1913 QAQC</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Admin QAQC</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Unattended</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<span th:text="${userId}" style="display:none;" id="userIdSpan"></span> |
|||
<span style="font-size: medium;font-weight: bold;">Closing Unattended Complaints (<span class="text-danger">You can receive and close only 100 complaints at a time</span>):</span> |
|||
|
|||
</div> |
|||
|
|||
|
|||
<div class="card-body"> |
|||
<span class="text-danger" style="font-size: medium;font-weight: bold;">Use after 7.00 pm</span><br> |
|||
<div class="row"> |
|||
<!-- <div class="col-sm-2 mb-2"> |
|||
<label for="startDate" style="font-size: medium;">From Date:</label> |
|||
<input type="date" id="startDate" class="form-control"> |
|||
</div> |
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="endDate" style="font-size: medium;">To Date:</label> |
|||
<input type="date" id="endDate" class="form-control"> |
|||
</div> --> |
|||
|
|||
<div class="col-sm-3 mb-2"> |
|||
<label for="unattended_count" style="font-size: medium;">Enter Minimum no of unattended counts:</label> |
|||
<input type="number" id="unattended_count" class="form-control" > |
|||
<!-- <select id="stsdropdown" class="form-control"> |
|||
<option value="total">Select</option> |
|||
<option value="processing">Processing</option> |
|||
<option value="reopened">Reopened</option> |
|||
<option value="redressed">Action Taken 1</option> |
|||
<option value="closed">Action Taken 2</option> |
|||
<option value="completed">Final Closure</option> |
|||
</select> --> |
|||
</div> |
|||
|
|||
<!-- <div class="col-sm-2 mb-2"> |
|||
<label for="dropdown4" style="font-size: medium;">Group:</label> |
|||
<select id="dropdown4" class="form-control"> |
|||
<option value="">Select</option> |
|||
<option value="">general</option> |
|||
Add options here |
|||
</select> |
|||
</div> --> |
|||
|
|||
|
|||
<!-- <div class="col-sm-2 mb-2"> |
|||
<label for="dropdown1" style="font-size: medium;">Type:</label> |
|||
<select id="dropdown1" class="form-control"> |
|||
<option value="">Select</option> |
|||
<option value="Cleanliness in Parks">Cleanliness in Parks</option> |
|||
|
|||
</select> |
|||
</div> --> |
|||
|
|||
<!-- <div class="col-sm-2 mb-2"> |
|||
<label for="dropdown3" style="font-size: medium;">Mode:</label> |
|||
<select id="dropdown3" class="form-control"> |
|||
<option value="">Select</option> |
|||
<option value="">INTERNET</option> |
|||
|
|||
</select> |
|||
</div> --> |
|||
</div> |
|||
<!-- <div class="row mt-2"> |
|||
<div class="col-sm-2 mb-2"> |
|||
<label for="dropdown2" style="font-size: medium;">Zone:</label> |
|||
<select id="dropdown2" class="form-control"> |
|||
<option value="">Select</option> |
|||
<option value="N01">N01</option> |
|||
<option value="ALL">ALL</option> |
|||
|
|||
</select> |
|||
</div> |
|||
</div> --> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-12 d-flex justify-content-center"> |
|||
<button type="submit" id="searchBtn" |
|||
class="btn btn-primary mx-2">Search</button> |
|||
|
|||
<button class="btn btn-danger mx-2" id="resetBtn" |
|||
name="reset" type="reset">Reset</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="row mt-4"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
<span style="font-size: medium;font-weight: bold;">Unattended List</span> |
|||
</div> |
|||
<div class="card-body"> |
|||
<div class="table-responsive"> |
|||
|
|||
<table id="ReportDatatable" |
|||
class="table table-striped table-bordered table-hover dataTable" |
|||
role="grid"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
|
|||
<th class="text-center no-sort">S.No</th> |
|||
<th class="text-center">Reg Date</th> |
|||
<th class="text-center no-sort">Complaint No</th> |
|||
<th class="text-center">ComplaintGroup</th> |
|||
<th class="text-center">ComplaintType</th> |
|||
<th class="text-center">Mode</th> |
|||
<th class="text-center no-sort">Public Name</th> |
|||
<th class="text-center">Public Mobile no</th> |
|||
|
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
|
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div id="submitcard" style="display: none;"> |
|||
<div class="card pl-4 pr-4"> |
|||
<div class="row mt-4"> |
|||
<div class="col-md-12"> |
|||
<label for="remarks" class="form-label fw-bold">Remarks<span class="text-danger">*</span></label> |
|||
<textarea id="remarks" class="form-control" rows="4" placeholder="Enter your remarks here"></textarea> |
|||
</div> |
|||
</div> |
|||
<div class="row mb-2 mt-3"> |
|||
<div class="col-md-12 d-flex justify-content-center"> |
|||
<button type="button" class="btn btn-primary" id="closebutton">Mark as Completed</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;"> |
|||
<div style="position: relative; top: 50%; transform: translateY(-50%);"> |
|||
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;"> |
|||
<span class="sr-only">Loading...</span> |
|||
</div> |
|||
<!-- Add the 'Please wait' text below the spinner --> |
|||
<p style="margin-top: 1rem; font-size: 1.2rem; color: #007bff;">Please wait...</p> |
|||
</div> |
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<!-- in the code use to show the download different type microsoft --> |
|||
|
|||
<!-- Include jQuery and Bootstrap JavaScript --> |
|||
|
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
|
|||
<script |
|||
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<!-- sweet alert --> |
|||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|||
<script type="text/javascript"> |
|||
|
|||
/* document.addEventListener("DOMContentLoaded", function () { |
|||
const complaintTypeDropdown = document.getElementById('dropdown1'); |
|||
const complaintGroupDropdown = document.getElementById('dropdown4'); |
|||
const complaintModeDropdown = document.getElementById('dropdown3'); |
|||
// const complaintZoneDropdown = document.getElementById('dropdown2'); |
|||
|
|||
// Load Complaint Groups |
|||
fetch('/gcc/api/callcenterqaqc/getComplaintGroup') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
// Clear existing options |
|||
complaintGroupDropdown.innerHTML = `<option value="">Select</option>`; |
|||
|
|||
// Add options from the API response |
|||
data.forEach(complaintGroupName => { |
|||
complaintGroupDropdown.innerHTML += `<option value="${complaintGroupName}">${complaintGroupName}</option>`; |
|||
}); |
|||
}) |
|||
.catch(error => { |
|||
console.error('Error fetching complaint groups:', error); |
|||
}); |
|||
|
|||
// Event Listener for Complaint Group Change |
|||
complaintGroupDropdown.addEventListener('change', function () { |
|||
const selectedGroup = complaintGroupDropdown.value; |
|||
|
|||
if (selectedGroup) { |
|||
// Fetch Complaint Types based on selected group |
|||
fetch(`/gcc/api/callcenterqaqc/getComplaintTypesByGroup?group=${encodeURIComponent(selectedGroup)}`) |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
// Clear existing options |
|||
complaintTypeDropdown.innerHTML = `<option value="">Select</option>`; |
|||
|
|||
// Add options from the API response |
|||
data.forEach(complaintTypeName => { |
|||
complaintTypeDropdown.innerHTML += `<option value="${complaintTypeName}">${complaintTypeName}</option>`; |
|||
}); |
|||
}) |
|||
.catch(error => { |
|||
console.error('Error fetching complaint types:', error); |
|||
}); |
|||
} else { |
|||
// Clear complaint type dropdown if no group is selected |
|||
complaintTypeDropdown.innerHTML = `<option value="">Select</option>`; |
|||
} |
|||
}); |
|||
|
|||
|
|||
// Load all Modes |
|||
fetch('/gcc/api/callcenterqaqc/getModes') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
// Clear existing options |
|||
complaintModeDropdown.innerHTML = `<option value="">Select</option>`; |
|||
|
|||
// Add options from the API response |
|||
data.forEach(complaintMode => { |
|||
complaintModeDropdown.innerHTML += `<option value="${complaintMode}">${complaintMode}</option>`; |
|||
}); |
|||
}) |
|||
.catch(error => { |
|||
console.error('Error fetching complaint groups:', error); |
|||
}); |
|||
|
|||
|
|||
// Load all zones |
|||
fetch('/gcc/api/callcenterqaqc/getZones') |
|||
.then(response => response.json()) |
|||
.then(data => { |
|||
// Clear existing options |
|||
complaintZoneDropdown.innerHTML = `<option value="">Select</option>`; |
|||
|
|||
// Add options from the API response |
|||
data.forEach(complaintZone => { |
|||
complaintZoneDropdown.innerHTML += `<option value="${complaintZone}">${complaintZone}</option>`; |
|||
}); |
|||
}) |
|||
.catch(error => { |
|||
console.error('Error fetching complaint groups:', error); |
|||
}); |
|||
|
|||
}); */ |
|||
|
|||
|
|||
$(document).ready(function() { |
|||
|
|||
var table = $('#ReportDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '50vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
searching: true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
|
|||
document.getElementById('resetBtn').addEventListener('click', function () { |
|||
event.preventDefault(); |
|||
|
|||
window.location.href="/gcc/callcenterqaqc/admin/unattendedcomplaints"; |
|||
|
|||
}); |
|||
|
|||
|
|||
|
|||
document.getElementById('searchBtn').addEventListener('click', function (e) { |
|||
|
|||
let ucount = document.getElementById('unattended_count').value; |
|||
|
|||
|
|||
console.log("ucount: ",ucount); |
|||
|
|||
|
|||
if (ucount=="") { |
|||
Swal.fire({ |
|||
icon: 'info', |
|||
title: 'Info', |
|||
text: 'Enter Unattended Count', |
|||
showConfirmButton: true, |
|||
timer: 3000 |
|||
}); |
|||
e.preventDefault(); // Prevent the default action |
|||
return; // Stop further execution |
|||
} |
|||
if (ucount=="0") { |
|||
Swal.fire({ |
|||
icon: 'info', |
|||
title: 'Info', |
|||
text: 'You Entered 0 Count', |
|||
showConfirmButton: true, |
|||
timer: 3000 |
|||
}); |
|||
e.preventDefault(); // Prevent the default action |
|||
return; // Stop further execution |
|||
} |
|||
|
|||
let entryDetails = { |
|||
ucount:ucount |
|||
}; |
|||
|
|||
console.log("entryDetails:",entryDetails); |
|||
$('#pageLoader').show(); |
|||
$.ajax({ |
|||
type: "GET", |
|||
url: `/gcc/api/callcenterqaqc/getunattendedcount?ucount=${ucount}`, |
|||
success: function (response) { |
|||
//console.log("API Response:", response); |
|||
$('#pageLoader').hide(); |
|||
if (response.status === "success") { |
|||
$("#submitcard").show(); |
|||
console.log("Details Array:", response.details); |
|||
// Ensure details is an array and has at least one entry |
|||
if (Array.isArray(response.details) && response.details.length > 0) { |
|||
let table = $('#ReportDatatable').DataTable({ |
|||
destroy: true, |
|||
searching: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
paging: true, |
|||
info: true, |
|||
data: response.details, |
|||
columns: [ |
|||
{ |
|||
data: null, |
|||
render: (data, type, row, meta) => meta.row + 1, |
|||
className: 'text-center' |
|||
}, |
|||
{ data: 'complaint_date', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'complaint_number', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'complaint_group', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'complaint_type', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'complaint_mode', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'complaint_person_name', defaultContent: '-', className: 'text-center' }, |
|||
{ data: 'complaint_mobilenumber', defaultContent: '-', className: 'text-center' }, |
|||
|
|||
], |
|||
dom: 'Bfrtip', |
|||
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' |
|||
} |
|||
], |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '50vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
} |
|||
}); |
|||
} |
|||
|
|||
} |
|||
else if (response.status === "nodata") { |
|||
|
|||
$("#submitcard").hide(); |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'No Data', |
|||
text: 'No data available for the count.' |
|||
}); |
|||
} |
|||
else { |
|||
|
|||
$("#submitcard").hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
error: function (error) { |
|||
|
|||
$("#submitcard").hide(); |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: error.responseJSON?.message |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
|
|||
document.getElementById('closebutton').addEventListener('click', function (e) { |
|||
|
|||
let userId = document.getElementById('userIdSpan').textContent; |
|||
console.log("userId=" + userId); |
|||
let remarks = $('#remarks').val().trim(); |
|||
|
|||
// Get all complaint numbers from the DataTable |
|||
let table = $('#ReportDatatable').DataTable(); |
|||
let complaintNumbers = table |
|||
.column(2) // Assuming 'complaint_number' is in the 3rd column (index 2) |
|||
.data() |
|||
.toArray(); // Convert to an array |
|||
|
|||
let compDetails = { |
|||
|
|||
remarks:remarks, |
|||
userId:userId, |
|||
complaintNumbers: complaintNumbers // Add the list of complaint numbers |
|||
}; |
|||
|
|||
console.log("compDetails:",compDetails); |
|||
|
|||
// Regular expression to allow only letters, numbers, and spaces (No special characters) |
|||
let regex = /^[a-zA-Z0-9\s]+$/; |
|||
|
|||
if (!compDetails.remarks || compDetails.remarks === '') { |
|||
Swal.fire({ |
|||
icon: 'info', |
|||
title: 'Info', |
|||
text: 'Remarks are required to complete complaints.', |
|||
confirmButtonText: 'OK' |
|||
}); |
|||
return; // Stop execution |
|||
} |
|||
|
|||
if (!regex.test(compDetails.remarks)) { |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Invalid Input', |
|||
text: 'Remarks should not contain special characters.', |
|||
confirmButtonText: 'OK' |
|||
}); |
|||
return; // Stop execution |
|||
} |
|||
|
|||
|
|||
$('#closebutton').prop('disabled', true).text('Processing...'); |
|||
$('#pageLoader').show(); |
|||
$.ajax({ |
|||
url: '/gcc/api/callcenterqaqc/closingunattendedcomplaints', |
|||
type: 'POST', |
|||
contentType: 'application/json', |
|||
data: JSON.stringify(compDetails), |
|||
success: function (response) { |
|||
$('#pageLoader').hide(); |
|||
$('#closebutton').prop('disabled', false).text('Mark as Completed'); |
|||
|
|||
if (response.status === "success") { |
|||
Swal.fire({ |
|||
icon: 'success', |
|||
title: 'Success', |
|||
text: response.message, |
|||
allowOutsideClick: false, |
|||
allowEscapeKey: false, |
|||
allowEnterKey: false, |
|||
confirmButtonText: 'OK' |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
window.location.href = "/gcc/callcenterqaqc/admin/unattendedcomplaints"; |
|||
} |
|||
}); |
|||
} else if (response.status === "partial_success") { |
|||
Swal.fire({ |
|||
icon: 'warning', |
|||
title: 'Partial Success', |
|||
text: response.message + " Completed: " + response.completedCount + ", Failed: " + response.failedCount, |
|||
allowOutsideClick: false, |
|||
allowEscapeKey: false, |
|||
allowEnterKey: false, |
|||
confirmButtonText: 'OK' |
|||
}); |
|||
} else { |
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: response.message, |
|||
confirmButtonText: 'OK' |
|||
}); |
|||
} |
|||
}, |
|||
error: function (xhr) { |
|||
$('#pageLoader').hide(); |
|||
$('#closebutton').prop('disabled', false).text('Mark as Completed'); |
|||
|
|||
let errorMessage = "An unknown error occurred."; |
|||
if (xhr.responseJSON && xhr.responseJSON.message) { |
|||
errorMessage = xhr.responseJSON.message; |
|||
} |
|||
|
|||
Swal.fire({ |
|||
icon: 'error', |
|||
title: 'Error', |
|||
text: errorMessage, |
|||
confirmButtonText: 'OK' |
|||
}); |
|||
|
|||
console.error('Error:', xhr.responseText); |
|||
} |
|||
|
|||
}); |
|||
|
|||
}); |
|||
|
|||
|
|||
}); |
|||
|
|||
|
|||
|
|||
</script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -1,401 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
|
|||
<style> |
|||
|
|||
/* Main container */ |
|||
.container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
width: 100%; |
|||
} |
|||
|
|||
/* Row container to align 2 fields per row */ |
|||
.labelitems { |
|||
display: flex; |
|||
justify-content: space-between; /* Evenly distributes fields */ |
|||
gap: 15px; |
|||
} |
|||
|
|||
/* Individual field wrapper */ |
|||
.field-container { |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 1; /* Ensures equal spacing */ |
|||
} |
|||
|
|||
/* Label styling */ |
|||
.field-label { |
|||
width: 120px; |
|||
font-weight: bold; |
|||
font-size:14px; |
|||
} |
|||
|
|||
/* Input box styling */ |
|||
.field-input { |
|||
width: 200px; /* Adjusted width */ |
|||
padding: 5px; |
|||
border: 1px solid #ccc; |
|||
border-radius: 5px; |
|||
background-color: #f9f9f9; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.modal-body { |
|||
max-height: 70vh; |
|||
overflow-y: auto; |
|||
overflow-x: hidden; |
|||
padding-right: 15px; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
|
|||
<body> |
|||
<div class="wrapper"> |
|||
<!-- Header --> |
|||
<header th:replace="~{fragments/modules/base/header :: header}"></header> |
|||
|
|||
<div class="page-wrap"> |
|||
<!-- Left Menu --> |
|||
<div th:replace="~{fragments/modules/base/menu :: menu}"></div> |
|||
|
|||
<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="fas fa-th-large bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>C & D Waste Collectors </h5> |
|||
<span>Approval</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">C & D Waste Collectors</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Approval</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<hr> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header" > |
|||
|
|||
<h5 style="font-weight:bold;">Approved List</h5> |
|||
|
|||
</div> |
|||
<div class="card-block"> |
|||
<div> |
|||
<table id="worksDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th class="text-center">S.No</th> <!-- Auto-increment index --> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile No</th> |
|||
<th class="text-center">Address</th> |
|||
<th class="text-center">Vehicle Number</th> |
|||
<th class="text-center">Vehicle Type</th> |
|||
<!-- <th class="text-center">Accepted Date</th> --> |
|||
<th class="text-center">Accepted By</th> |
|||
<th class="text-center">Register ID</th> |
|||
<th class="text-center">Actions</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr th:each="approval, i : ${approvalDetails}"> |
|||
<td class="text-center" th:text="${i.count}">0</td> <!-- Index counter --> |
|||
<td class="text-center" th:text="${approval.name}">Name</td> |
|||
<td class="text-center" th:text="${approval.mobile_no}">Mobile No</td> |
|||
<td class="text-center" th:text="${approval.address}">Address</td> |
|||
<td class="text-center" th:text="${approval.vehicle_num}">Vehicle Number</td> |
|||
<td class="text-center" th:text="${approval.vehicletype}">Vehicle Type</td> |
|||
<!-- <td class="text-center" th:text="${approval.accept}">Accepted Date</td> --> |
|||
<td class="text-center" th:text="${approval.acceptedby}">Accepted By</td> |
|||
<td class="text-center" th:text="${approval.register_id}">Register ID</td> |
|||
<td class="text-center"> |
|||
<button class="btn btn-info" |
|||
th:attr="onclick='showModal(' + ${approval['register_id']} + ')'" |
|||
th:text="'View Details'"> |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
|
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="detailModalLabel">Register id: <span id="modal_register_id"></span></h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<div id="cduserinfoHTML"> |
|||
</div> |
|||
<hr> |
|||
<div class="row labelitems"> |
|||
<div class="col-md-12"> |
|||
<p><strong>Adhaar Photo/Document:</strong></p> |
|||
<div id="modal_adhaar_container"></div> |
|||
</div> |
|||
<div class="col-md-12"> |
|||
<p><strong>User Photo:</strong></p> |
|||
<div id="modal_user_photo_container"></div> |
|||
</div> |
|||
<div class="col-md-12"> |
|||
<p><strong>RC Book Document:</strong></p> |
|||
<div id="modal_vehicle_doc_container"></div> |
|||
</div> |
|||
<div class="col-md-12"> |
|||
<p><strong>Lease Vehicle Document:</strong></p> |
|||
<div id="modal_leasevehicle_doc_container"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Rejection Section --> |
|||
<!--<div id="rejectionSection" style="display: none; margin-top: 20px;"> |
|||
<p><strong>Reason for Rejection <span class="text-danger">*</span></strong></p> |
|||
<textarea id="rejectionReason" rows="4" class="form-control"></textarea> |
|||
<button type="button" class="btn btn-danger mt-2" onclick="confirmRejection()">Confirm</button> |
|||
</div> --> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
|
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<!-- Include jQuery and Bootstrap JavaScript --> |
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script type="text/javascript"> |
|||
$(document).ready(function() { |
|||
|
|||
var table = $('#worksDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '50vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
searching: true, |
|||
select: false, |
|||
processing: false |
|||
}); |
|||
|
|||
}); |
|||
|
|||
//function to show the view details |
|||
|
|||
function showModal(registerId) { |
|||
$.ajax({ |
|||
url: '/gcc/api/registration/pendingbyid?registerId=' + registerId, |
|||
method: 'GET', |
|||
dataType: 'json', |
|||
success: function(data) { |
|||
console.log(data); |
|||
// Check if data is not empty |
|||
if (data.length > 0) { |
|||
// Access the first item in the array |
|||
const userData = data[0]; // Get the first object from the array |
|||
|
|||
const formattedAcceptedDate = userData.accepteddate ? userData.accepteddate.split('T')[0] : ''; |
|||
|
|||
|
|||
let userinfo = ` |
|||
<div style="display: flex; flex-direction: column; gap: 15px;"> |
|||
<div class="container"> |
|||
<!-- First Row --> |
|||
<div class="row"> |
|||
<div class="field-container"> |
|||
<label class="field-label">Name:</label> |
|||
<input type="text" id="modal_name" value="${userData.name}" readonly class="field-input"> |
|||
</div> |
|||
|
|||
<div class="field-container"> |
|||
<label class="field-label">Mobile No:</label> |
|||
<input type="text" id="modal_mobile_no" value="${userData.mobile_no}" readonly class="field-input"> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Second Row --> |
|||
<div class="row"> |
|||
<div class="field-container"> |
|||
<label class="field-label">Address:</label> |
|||
<input type="text" id="modal_address" value="${userData.address}" readonly class="field-input"> |
|||
</div> |
|||
|
|||
<div class="field-container"> |
|||
<label class="field-label">Vehicle No:</label> |
|||
<input type="text" id="modal_vehicle_num" value="${userData.vehicle_num}" readonly class="field-input"> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Third Row --> |
|||
<div class="row"> |
|||
<div class="field-container"> |
|||
<label class="field-label">Vehicle Type:</label> |
|||
<input type="text" id="modal_vehicletype" value="${userData.vehicletype}" readonly class="field-input"> |
|||
</div> |
|||
|
|||
<div class="field-container"> |
|||
<label class="field-label">Ref Num:</label> |
|||
<input type="text" id="modal_ref_num" value="${userData.reference_num}" readonly class="field-input"> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Fourth Row --> |
|||
<div class="row"> |
|||
<div class="field-container"> |
|||
<label class="field-label">Accepted Date:</label> |
|||
<input type="date" id="modal_accepteddate" value="${formattedAcceptedDate}" readonly class="field-input"> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div>`; |
|||
|
|||
$("#cduserinfoHTML").html(userinfo); |
|||
$("#modal_register_id").html(userData.register_id); |
|||
|
|||
console.log(userData.adhaarurl); |
|||
|
|||
// Display the files (Adhaar, User Photo, Vehicle Document) |
|||
if (userData.adhaarurl!=null) { |
|||
displayFile('modal_adhaar_container', userData.adhaarurl); |
|||
} |
|||
if (userData.user_photourl) { |
|||
displayFile('modal_user_photo_container', userData.user_photourl); |
|||
} |
|||
if (userData.rcbookurl) { |
|||
displayFile('modal_vehicle_doc_container', userData.rcbookurl); |
|||
} |
|||
if (userData.leasedocurl) { |
|||
displayFile('modal_leasevehicle_doc_container', userData.leasedocurl); |
|||
} |
|||
|
|||
// Hide rejection section initially |
|||
/* document.getElementById('rejectionSection').style.display = 'none'; |
|||
document.getElementById('rejectionReason').value = ''; // Clear previous input */ |
|||
// Show the modal |
|||
$('#detailModal').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); |
|||
} else { |
|||
// Handle case where no data is returned |
|||
alert('No data found for this registration ID.'); |
|||
} |
|||
}, |
|||
error: function(err) { |
|||
console.error(err); |
|||
alert('Failed to fetch data'); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
//display file function |
|||
|
|||
function displayFile(containerId, filePath) { |
|||
const container = document.getElementById(containerId); |
|||
|
|||
// Ensure the container exists before proceeding |
|||
if (!container) { |
|||
console.error(`Element with ID '${containerId}' not found.`); |
|||
return; |
|||
} |
|||
|
|||
// Ensure filePath is valid before attempting to display |
|||
if (!filePath) { |
|||
container.innerHTML = '<p class="text-danger">No document available</p>'; |
|||
return; |
|||
} |
|||
|
|||
const fileExtension = filePath.split('.').pop().toLowerCase(); |
|||
console.log('Full Path:', filePath); |
|||
|
|||
if (fileExtension === 'pdf') { |
|||
container.innerHTML = `<embed src="${filePath}" type="application/pdf" width="100%" height="500px" />`; |
|||
} else { |
|||
container.innerHTML = `<img src="${filePath}" alt="Document" class="img-fluid img-thumbnail" />`; |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -1,537 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
|||
|
|||
<style> |
|||
|
|||
/* Main container */ |
|||
.container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
width: 100%; |
|||
} |
|||
|
|||
/* Row container to align 2 fields per row */ |
|||
.labelitems { |
|||
display: flex; |
|||
justify-content: space-between; /* Evenly distributes fields */ |
|||
gap: 15px; |
|||
} |
|||
|
|||
/* Individual field wrapper */ |
|||
.field-container { |
|||
display: flex; |
|||
align-items: center; |
|||
flex: 1; /* Ensures equal spacing */ |
|||
} |
|||
|
|||
/* Label styling */ |
|||
.field-label { |
|||
width: 120px; |
|||
font-weight: bold; |
|||
font-size:14px; |
|||
} |
|||
|
|||
/* Input box styling */ |
|||
.field-input { |
|||
width: 200px; /* Adjusted width */ |
|||
padding: 5px; |
|||
border: 1px solid #ccc; |
|||
border-radius: 5px; |
|||
background-color: #f9f9f9; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.modal-body { |
|||
max-height: 70vh; |
|||
overflow-y: auto; /* Enables vertical scrolling */ |
|||
overflow-x: hidden; /* Hides horizontal scrolling */ |
|||
padding-right: 15px; /* Prevents content cutoff */ |
|||
} |
|||
|
|||
|
|||
</style> |
|||
<body> |
|||
<div class="wrapper"> |
|||
<!-- Header --> |
|||
<header th:replace="~{fragments/modules/base/header :: header}"></header> |
|||
|
|||
<div class="page-wrap"> |
|||
<!-- Left Menu --> |
|||
<div th:replace="~{fragments/modules/base/menu :: menu}"></div> |
|||
|
|||
<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="fas fa-th-large bg-blue"></i> |
|||
<div class="d-inline"> |
|||
<h5>C & D Waste Collectors </h5> |
|||
<span>Pending</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">C & D Waste Collectors</li> |
|||
<li class="breadcrumb-item active" aria-current="page">Pending</li> |
|||
</ol> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<hr> |
|||
<div class="row"> |
|||
<div class="col-md-12"> |
|||
<div class="card"> |
|||
<div class="card-header"> |
|||
|
|||
<h5 style="font-weight:bold;"> Pending List</h5> |
|||
|
|||
</div> |
|||
|
|||
<div class="card-block"> |
|||
<!-- Show the table structure --> |
|||
<table id="worksDatatable" class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%"> |
|||
<thead class="thead-dark"> |
|||
<tr role="row"> |
|||
<th class="text-center">S.NO</th> <!-- Auto-incrementing index --> |
|||
<th class="text-center">Name</th> |
|||
<th class="text-center">Mobile No</th> |
|||
<th class="text-center">Address</th> |
|||
<th class="text-center">Actions</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<!-- Check if userDetails is empty or null --> |
|||
|
|||
<!-- Iterate over userDetails to display pending registrations --> |
|||
<tr th:each="pendinglist, status : ${userDetails}"> |
|||
<td class="text-center" th:text="${status.index + 1}">1</td> <!-- Auto-incrementing index --> |
|||
<td class="text-center" th:text="${pendinglist['name']}">Name</td> |
|||
<td class="text-center" th:text="${pendinglist['mobile_no']}">Mobile No</td> |
|||
<td class="text-center" th:text="${pendinglist['address']}">Address</td> |
|||
<td class="text-center"> |
|||
<button class="btn btn-info" |
|||
th:attr="onclick='showModal(' + ${pendinglist['register_id']} + ')'" |
|||
th:text="'View Details'"> |
|||
</button> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
|
|||
</table> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Modal --> |
|||
<!-- Modal --> |
|||
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalLabel" aria-hidden="true"> |
|||
<div class="modal-dialog modal-lg modal-dialog-scrollable" role="document"> |
|||
<div class="modal-content"> |
|||
<div class="modal-header"> |
|||
<h5 class="modal-title" id="detailModalLabel">Register id: <span id="modal_register_id"></span></h5> |
|||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
|||
<span aria-hidden="true">×</span> |
|||
</button> |
|||
</div> |
|||
<div class="modal-body"> |
|||
<div id="cduserinfoHTML"> |
|||
</div> |
|||
<hr> |
|||
<div class="row labelitems" > |
|||
<div class="col-md-12"> |
|||
<p><strong>Adhaar Photo/Document:</strong></p> |
|||
<div id="modal_adhaar_container"></div> |
|||
</div> |
|||
|
|||
<div class="col-md-12"> |
|||
<p><strong>User Photo:</strong></p> |
|||
<div id="modal_user_photo_container"></div> |
|||
</div> |
|||
|
|||
<div class="col-md-12"> |
|||
<p><strong>RC Book Document:</strong></p> |
|||
<div id="modal_vehicle_doc_container"></div> |
|||
</div> |
|||
|
|||
<div class="col-md-12"> |
|||
<p><strong>Lease Vehicle Document:</strong></p> |
|||
<div id="modal_leasevehicle_doc_container"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Rejection Section --> |
|||
<div id="rejectionSection" style="display: none; margin-top: 20px;"> |
|||
<p><strong>Reason for Rejection <span class="text-danger">*</span></strong></p> |
|||
<textarea id="rejectionReason" rows="4" class="form-control"></textarea> |
|||
<button type="button" class="btn btn-danger mt-2" onclick="confirmRejection()">Confirm</button> |
|||
</div> |
|||
</div> |
|||
<div class="modal-footer"> |
|||
<button type="button" class="btn btn-success" onclick="acceptAction()" id="acceptbutton">Accept</button> |
|||
<button type="button" class="btn btn-warning" onclick="showRejectionSection()" id="rejectbutton">Reject</button> |
|||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</div> |
|||
|
|||
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
|
|||
<!-- Include jQuery and Bootstrap JavaScript --> |
|||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> |
|||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|||
|
|||
<script th:replace="~{fragments/modules/base/script :: script}"></script> |
|||
<script type="text/javascript"> |
|||
$(document).ready(function() { |
|||
// Initialize the DataTable |
|||
var table = $('#worksDatatable').DataTable({ |
|||
dom: 'Bftip', |
|||
columnDefs: [ |
|||
{ targets: 'no-sort', orderable: false } // Disable sorting for certain columns |
|||
], |
|||
lengthMenu: [ |
|||
[50, 100, 200, 500, -1], |
|||
['50 rows', '100 rows', '200 rows', 'Show all'] |
|||
], |
|||
scrollY: '50vh', |
|||
fixedColumns: { |
|||
left: 1, |
|||
right: 1 |
|||
}, |
|||
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' |
|||
} |
|||
], |
|||
fixedHeader: true, |
|||
autoWidth: true, |
|||
responsive: true, |
|||
searching: true, |
|||
select: false, |
|||
processing: false, |
|||
language: { |
|||
emptyTable: "No pending registrations available." // Custom message for empty tables |
|||
} |
|||
}); |
|||
|
|||
}); |
|||
|
|||
|
|||
function showModal(registerId) { |
|||
$.ajax({ |
|||
url: '/gcc/api/registration/pendingbyid?registerId=' + registerId, |
|||
method: 'GET', |
|||
dataType: 'json', |
|||
success: function(data) { |
|||
console.log(data); |
|||
// Check if data is not empty |
|||
if (data.length > 0) { |
|||
// Access the first item in the array |
|||
const userData = data[0]; // Get the first object from the array |
|||
|
|||
let userinfo = ` |
|||
<div style="display: flex; flex-direction: column; gap: 15px;"> |
|||
<div class="container"> |
|||
<!-- First Row --> |
|||
<div class="row"> |
|||
<div class="field-container"> |
|||
<label class="field-label">Name:</label> |
|||
<input type="text" id="modal_name" value="${userData.name}" readonly class="field-input"> |
|||
</div> |
|||
|
|||
<div class="field-container"> |
|||
<label class="field-label">Mobile No:</label> |
|||
<input type="text" id="modal_mobile_no" value="${userData.mobile_no}" readonly class="field-input"> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Second Row --> |
|||
<div class="row"> |
|||
<div class="field-container"> |
|||
<label class="field-label">Address:</label> |
|||
<input type="text" id="modal_address" value="${userData.address}" readonly class="field-input"> |
|||
</div> |
|||
|
|||
<div class="field-container"> |
|||
<label class="field-label">Vehicle No:</label> |
|||
<input type="text" id="modal_vehicle_num" value="${userData.vehicle_num}" readonly class="field-input"> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- Third Row --> |
|||
<div class="row"> |
|||
<div class="field-container"> |
|||
<label class="field-label">Vehicle Type:</label> |
|||
<input type="text" id="modal_vehicletype" value="${userData.vehicletype}" readonly class="field-input"> |
|||
</div> |
|||
|
|||
<div class="field-container"> |
|||
<label class="field-label">Ref Num:</label> |
|||
<input type="text" id="modal_ref_num" value="${userData.reference_num}" readonly class="field-input"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div>`; |
|||
|
|||
|
|||
$("#cduserinfoHTML").html(userinfo); |
|||
|
|||
$("#modal_register_id").html(userData.register_id); |
|||
|
|||
console.log(userData.adhaarurl); |
|||
|
|||
// Display the files (Adhaar, User Photo, Vehicle Document) |
|||
if (userData.adhaarurl!=null) { |
|||
displayFile('modal_adhaar_container', userData.adhaarurl); |
|||
} |
|||
if (userData.user_photourl) { |
|||
displayFile('modal_user_photo_container', userData.user_photourl); |
|||
} |
|||
//if (userData.rcbookurl) { |
|||
displayFile('modal_vehicle_doc_container', userData.rcbookurl); |
|||
//} |
|||
if (userData.leasedocurl) { |
|||
displayFile('modal_leasevehicle_doc_container', userData.leasedocurl); |
|||
} |
|||
|
|||
// Hide rejection section initially |
|||
document.getElementById('rejectionSection').style.display = 'none'; |
|||
document.getElementById('rejectionReason').value = ''; // Clear previous input |
|||
// Show the modal |
|||
$('#detailModal').modal({ |
|||
backdrop: 'static', |
|||
keyboard: false |
|||
}); |
|||
} else { |
|||
// Handle case where no data is returned |
|||
alert('No data found for this registration ID.'); |
|||
} |
|||
}, |
|||
error: function(err) { |
|||
console.error(err); |
|||
alert('Failed to fetch data'); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
// Function to handle Accept action |
|||
function acceptAction() { |
|||
const registerId = document.getElementById('modal_register_id').innerText; // Get register_id from the modal |
|||
const rowElement = document.querySelector(`tr[data-register-id="${registerId}"]`); // Find the row by register_id |
|||
const mobileNo = document.getElementById('modal_mobile_no').innerText; |
|||
|
|||
const refNum = document.getElementById('modal_ref_num').innerText; |
|||
|
|||
$('#acceptbutton').prop('disabled', true); |
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/registration/acceptbyid', |
|||
method: 'POST', |
|||
data: { |
|||
registerId: registerId |
|||
}, |
|||
success: function(response) { |
|||
$('#acceptbutton').prop('disabled', false); |
|||
console.log(response); |
|||
|
|||
// URL for accepted registration message |
|||
const acceptMessageUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${mobileNo}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Welcome+to+Greater+Chennai+Corporation%2C+%0A%0AYour+Registered+ID+is+%2A${registerId}%2A+.%0AYour+C%26D+waste+registration+has+been+approved+successfully.+%0A%0AFor+downloading+your+ID+card%2C+kindly+click+on+the+button+below+%F0%9F%91%87&media_url=https%3A%2F%2Fres.cloudinary.com%2Fdpub5muar%2Fimage%2Fupload%2Fv1729597847%2Fq2ihjs99puhhwkjzajyo.png&isTemplate=true&buttonUrlParam=userdetail%3Fregister_id%3D${refNum}`; |
|||
//https://gccservices.chennaicorporation.gov.in/volunteer/wastecollectors/https://gccservices.chennaicorporation.gov.in/volunteer/wastecollectors/userdetail?register_id=5 |
|||
|
|||
// Call the WhatsApp function to send acceptance message |
|||
sendWhatsAppMessage(mobileNo, acceptMessageUrl); |
|||
|
|||
Swal.fire({ |
|||
title: 'Success!', |
|||
text: 'Registration Accepted Successfully', |
|||
icon: 'success', |
|||
confirmButtonText: 'OK' |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
$('#detailModal').modal('hide'); // Close the modal after success |
|||
location.reload(); // Reload page (optional) |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
error: function(error) { |
|||
$('#acceptbutton').prop('disabled', false); |
|||
console.error(error); |
|||
Swal.fire({ |
|||
title: 'Error!', |
|||
text: 'Failed to Accept Registration', |
|||
icon: 'error', |
|||
confirmButtonText: 'OK' |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
|
|||
|
|||
function showRejectionSection() { |
|||
// Show the rejection section when Reject button is clicked |
|||
document.getElementById('rejectionSection').style.display = 'block'; |
|||
} |
|||
|
|||
function confirmRejection() { |
|||
const registerId = document.getElementById('modal_register_id').innerText; // Get register_id from the modal |
|||
const rejectionReason = document.getElementById('rejectionReason').value; // Get the rejection reason |
|||
const mobileNo = document.getElementById('modal_mobile_no').innerText; // Get mobile number from the modal |
|||
const refNum = document.getElementById('modal_ref_num').innerText; |
|||
|
|||
if (!rejectionReason) { |
|||
Swal.fire({ |
|||
title: 'Info', |
|||
text: 'Please provide a reason for rejection.', |
|||
icon: 'info', |
|||
confirmButtonText: 'OK' |
|||
}); |
|||
return; // Stop if no reason is provided |
|||
} |
|||
|
|||
|
|||
$('#rejectbutton').prop('disabled', true); |
|||
|
|||
|
|||
$.ajax({ |
|||
url: '/gcc/api/registration/rejectbyid', // API endpoint for rejection |
|||
method: 'POST', |
|||
data: { |
|||
registerId: registerId, // Pass registerId as request param |
|||
reason: rejectionReason // Pass the rejection reason |
|||
}, |
|||
success: function(response) { |
|||
|
|||
$('#rejectbutton').prop('disabled', false); |
|||
// URL for rejected registration |
|||
const rejectMessageUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${mobileNo}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Welcome+to+Greater+Chennai+Corporation%2C%0A%0AYour+Registered+ID+is+%2A${registerId}%2A+.%0AYour+C%26D+waste+registration+has+been+Rejected.+%0A%0AKindly+click+on+the+button+below+for+viewing+the+status%F0%9F%91%87&media_url=https%3A%2F%2Fres.cloudinary.com%2Fdpub5muar%2Fimage%2Fupload%2Fv1729598221%2Fci7ybspyanctl9lackby.jpg&isTemplate=true&buttonUrlParam=userdetail%3Fregister_id%3D${refNum}`; |
|||
|
|||
//const acceptMessageUrl = `https://media.smsgupshup.com/GatewayAPI/rest?userid=2000233507&password=h2YjFNcJ&send_to=${mobileNo}&v=1.1&format=json&msg_type=IMAGE&method=SENDMEDIAMESSAGE&caption=Welcome+to+Greater+Chennai+Corporation%2C+%0A%0AYour+Registered+ID+is+%2A${registerId}%2A+.%0AYour+C%26D+waste+registration+has+been+approved+successfully.+%0A%0AFor+downloading+your+ID+card%2C+kindly+click+on+the+button+below+%F0%9F%91%87&media_url=https%3A%2F%2Fgccservices.in%2Fgcc%2Ffiles%2Fc_d%2F1_approved.jpg&isTemplate=true&buttonUrlParam=userdetail%3Fregister_id%3D${registerId}`; |
|||
sendWhatsAppMessage(mobileNo, rejectMessageUrl); // Call the WhatsApp function to send rejection message |
|||
Swal.fire({ |
|||
title: 'Success!', |
|||
text: 'Registration Rejected!!', |
|||
icon: 'success', |
|||
confirmButtonText: 'OK' |
|||
}).then((result) => { |
|||
if (result.isConfirmed) { |
|||
$('#detailModal').modal('hide'); // Close the modal after success |
|||
location.reload(); // Reload page (optional) |
|||
|
|||
} |
|||
}); |
|||
}, |
|||
error: function(error) { |
|||
$('#rejectbutton').prop('disabled', false); |
|||
console.error(error); |
|||
Swal.fire({ |
|||
title: 'Error!', |
|||
text: 'Failed to Reject Registration', |
|||
icon: 'error', |
|||
confirmButtonText: 'OK' |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function displayFile(containerId, filePath) { |
|||
const container = document.getElementById(containerId); |
|||
|
|||
// Check if filePath is defined and not null |
|||
if (filePath) { |
|||
const fileExtension = filePath.split('.').pop().toLowerCase(); |
|||
const fullPath = filePath; // Construct full URL |
|||
console.log('Full Path:', fullPath); |
|||
|
|||
if (fileExtension === 'pdf') { |
|||
container.innerHTML = `<embed src="${fullPath}" type="application/pdf" width="100%" height="500px" />`; |
|||
} else { |
|||
container.innerHTML = `<img src="${fullPath}" alt="Document" class="img-fluid img-thumbnail" />`; |
|||
} |
|||
} else { |
|||
// If filePath is undefined or null, display a default message |
|||
container.innerHTML = 'No document available'; |
|||
} |
|||
} |
|||
|
|||
|
|||
function sendWhatsAppMessage(cellnumber, msgUrl) { |
|||
// Send the WhatsApp message |
|||
$.ajax({ |
|||
url: '/gcc/api/cd/whatsapp/send-whatsapp-message', // Replace with your service path |
|||
type: 'POST', |
|||
data: { msgUrl: msgUrl }, |
|||
|
|||
error: function(xhr, status, error) { |
|||
console.error('Error sending WhatsApp message:', error); |
|||
Swal.fire({ |
|||
title: 'Error!', |
|||
text: 'Message Not sent!', |
|||
icon: 'error', |
|||
timer: 2000, |
|||
showConfirmButton: false |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
|
|||
</script> |
|||
</body> |
|||
</html> |
|||
|
|||
|
|||
@ -1,139 +0,0 @@ |
|||
<!-- Pre-loader end --> |
|||
<div id="pcoded" class="pcoded"> |
|||
<div class="pcoded-container"> |
|||
<!-- Menu header --> |
|||
<div class="nav-display"> |
|||
<nav th:replace="~{fragments/nav-user :: nav}"></nav> |
|||
</div> |
|||
<!-- Main content --> |
|||
<div class="container-fluid" style="margin-top: 4%;padding: 15px;"> |
|||
<div class="row"> |
|||
<div class="col-md-12 col-sm-12"> |
|||
<div class="card " style="width:auto"> |
|||
|
|||
<div class="card-body"> |
|||
<table> |
|||
|
|||
<tr style="height:70px;"> |
|||
<td colspan="4" style="text-align: center;"> |
|||
<span><img src="\assets\media\images\logo.png" |
|||
style="width:45px;height:45px;text-align: left;"></span> |
|||
<span> |
|||
<h6 style="text-align: center;font-weight: bold;">Greater Chennai Corporation</h6> |
|||
<h6 style="text-align: center;font-weight: bold;">C & D Waste Collectors</h6> |
|||
<h6 style="text-align: center;font-weight: bold;">Acknowledgement Form</h6> |
|||
</span> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th>User Name:</th> |
|||
<th>Mobile No:</th> |
|||
<th>User Type:</th> |
|||
<th>Email:</th> |
|||
</tr> |
|||
<tr> |
|||
<td id="uName" th:text="${bookingsDetails.users.name}"></td> |
|||
<td id="mobile" th:text="${bookingsDetails.users.mobileNo}"></td> |
|||
<td id="uType" th:text="${bookingsDetails.users.usertype}"></td> |
|||
<td id="eMail" th:text="${bookingsDetails.users.email}"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="font-weight: bold;">Hall Details:</th> |
|||
</tr> |
|||
<tr> |
|||
<th>Hall Name:</th> |
|||
<th>Address:</th> |
|||
<th>Zone:</th> |
|||
<th>Division:</th> |
|||
</tr> |
|||
<tr> |
|||
<td id="hallname" th:text="${bookingsDetails.hallDetails.hallName}"> |
|||
</td> |
|||
<td><span id="address"> |
|||
<span th:text="${bookingsDetails.hallDetails.doorNo}"></span>, |
|||
<span th:text="${bookingsDetails.hallDetails.street}"></span>, |
|||
<span th:text="${bookingsDetails.hallDetails.area}"></span>, |
|||
<span th:text="${bookingsDetails.hallDetails.pinCode}"></span> |
|||
</span></td> |
|||
<td id="zone" th:text="${bookingsDetails.hallDetails.zone}"></td> |
|||
<td id="division" th:text="${bookingsDetails.hallDetails.division}"> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th style="font-weight: bold;">Booking Details:</th> |
|||
</tr> |
|||
<tr> |
|||
<th>Booking Id:</th> |
|||
<th>Booking Date:</th> |
|||
<th>Starting Date:</th> |
|||
<th>Ending Date:</th> |
|||
</tr> |
|||
<tr> |
|||
<td id="bookId" th:text="${bookingsDetails.bookingId}"></td> |
|||
<td id="bookDate" th:text="${bookingsDetails.bookingDate}"></td> |
|||
<td id="startDate" th:text="${bookingsDetails.startDate}"></td> |
|||
<td id="endDate" th:text="${bookingsDetails.endDate}"></td> |
|||
</tr> |
|||
<tr> |
|||
<th>Starting Slot:</th> |
|||
<th>Ending Slot:</th> |
|||
<th>Booking Status:</th> |
|||
<th>Reason For Booking:</th> |
|||
</tr> |
|||
<tr> |
|||
<td id="startingSlot" |
|||
th:text="${bookingsDetails.startingSlot == 1 ? 'Morning' : 'Evening'}"> |
|||
</td> |
|||
<td id="endingSlot" |
|||
th:text="${bookingsDetails.endingSlot == 1 ? 'Morning' : 'Evening'}"> |
|||
</td> |
|||
<td id="bookStatus" th:text="${bookingsDetails.bookingStatus}"></td> |
|||
<td id="reason" th:text="${bookingsDetails.reason}"></td> |
|||
</tr> |
|||
<tr> |
|||
<th style="font-weight: bold;">Payment Details:</th> |
|||
</tr> |
|||
<tr> |
|||
<th>Transaction Id:</th> |
|||
<th>Payment Status:</th> |
|||
<th>Payment Details:</th> |
|||
<th>Payment Type:</th> |
|||
</tr> |
|||
<tr> |
|||
<td id="transId" th:text="${bookingsDetails.payments.TransactionId}"> |
|||
</td> |
|||
<td id="PayStatus" style="text-align: left;font-weight:bold;" |
|||
th:text="${bookingsDetails.payments.paymentStatus}"> |
|||
</td> |
|||
<td id="PayDetails"></td> |
|||
<td id="PayType"></td> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="3" style="text-align: right;font-weight:bold;">Total Amount :</td> |
|||
<td id="PayDate" style="text-align: left;font-weight:bold;" |
|||
th:text="${bookingsDetails.payments.amountReceived}"> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<td colspan="4" style="text-align: center;"> <span> |
|||
<h6 style="text-align: center;font-weight: bold;">*** This is a |
|||
computer-generated |
|||
document. No signature is required ***</h6> |
|||
</span></td> |
|||
</tr> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="button-container" style="display: flex;justify-content: flex-end;"> |
|||
<button class="btn btn-success" onclick="printTables()" |
|||
style="background: #FB6340;">Print</button> |
|||
<button class="btn btn-success" th:onclick="return redirect([[${bookingsDetails.bookingtype}]])" |
|||
style="background: rgb(21, 68, 92);">Back to Home</button> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
Some files were not shown because too many files changed in this diff
Write
Preview
Loading…
Cancel
Save
Reference in new issue