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