You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!doctype html><html xmlns:th="http://www.thymeleaf.org"><head th:replace="fragments/head-public :: head"></head> <!-- Page JS Plugins CSS --> <link rel="stylesheet" href="assets/js/plugins/raty-js/jquery.raty.css"> <body> <!-- Page Container --> <div id="page-container" class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark"> <header id="page-header"> <!-- Header Content --> <div class="content-header p-0"> <div class="row col-12 pt-1" style="margin:0px;"> <div class="col-2 text-center"> <img src="assets/media/images/tamilnadu-logo.png" style="padding-top:2px;" width="50px" alt="Tamilnadu Logo"> </div> <div class="col-8 text-center"> Government of Tamil Nadu<br> தமிழ்நாடு அரசு<br> பெருநகர சென்னை மாநகராட்சி </div> <div class="col-2 text-center"> <img src='assets/media/images/logo-sm.png' width="55" alt="Logo Sm"> </div> </div> </div> </header>
<!-- Main Container --> <main id="main-container"> <!-- Hero --> <div class="bg-image"> <img src="/assets/media/images/chennai_bg.png" width="100%"> </div> <!-- END Hero -->
<!-- Page Content --> <div class="content"> <div class="row"> <div class="col-12">
<!-- Content --> <div class="flex-grow-1 d-flex align-items-center p-5 bg-body-light" th:if="${assetId <= 0}"> <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"> We are sorry but there was an issue with our server and couldn’t fulfill your request. </p> </div> </div> <!-- END Content -->
<form th:action="@{/gcc-complaint/save}" th:object="${saveFeedback}" id="saveFeedbackForm" method="post" onsubmit="return validate();" th:if="${assetId > 0}"> <!-- Asset Details --> <div class="card alert-primary mb-3"> <div class="card-header bg-secondary text-white"> Gcc Asset Details </div> <div class="mb-3"> <div class="card-body"> <label for="assetId">Asset Id</label> <div class="mb-0 text-center"> <!--<p class="card-title mb-0 text-center" th:text="${assetId}">Title</p>--> <input type="text" class="form-control text-center" name="person" id="person" th:value="${assetId}" readonly /> </div>
<div class="mb-0"> <p class="card-title mb-0 text-center" th:text="${assetAddress}">Address</p> </div>
</div> </div> <div class="card"> <div class="card-header bg-primary text-white"> Employee Details </div> <div class="card-body"> <div class="mb-3"> <label for="person">Name (Optional):</label> <input type="text" class="form-control" name="person" id="person" placeholder="" required /> <p class="card-title mb-0 text-center" th:text="${person}">Address</p> </div> <div class="mb-3"> <label for="mobile">Mobile No:</label> <input type="text" minlength="10" maxlength="10" pattern="\d*" class="form-control" name="mobile" id="mobile" placeholder="" required /> </div> </div> </div> <div class="card"> <div class="card-header bg-warning text-white"> Complaint Form </div> <div class="card-body"> <div class="table-responsive"> <table class="table mb-0" style="padding:0px;"> <tbody> <!-- Category Questions --> <tr style="border-bottom:0px;" th:each="questions, i : ${feedbackquestionlist}"> <td style="vertical-align:top"><span class="nav-main-link-badge badge rounded-pill bg-primary" th:text="${i.count}">.)</span></td> <td> <p style="margin-bottom: 0.430rem;" th:text="${questions.engQuestion}"></p> <p th:text="${questions.tamilQuestion}"></p> <div class="col-md-9 px-5 py-1"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" th:name="'cq_' + ${questions.cmqId}" th:id="'cq_' + ${questions.cmqId} + '_1'" value="yes" required> <label class="form-check-label" th:for="'cq_' + ${questions.cmqId} + '_1'">ஆம் / Yes</label> </div> <div class="form-check form-check-inline" > <input class="form-check-input" type="radio" th:name="'cq_' + ${questions.cmqId}" th:id="'cq_' + ${questions.cmqId} + '_2'" value="no" required> <label class="form-check-label" th:for="'cq_' + ${questions.cmqId} + '_2'">இல்லை / NO</label> </div> </div> </td> </tr> <!-- Parameter Questions --> <tr style="border-bottom:0px;" th:each="paramQuestions, j : ${assetparameterquestionlist}"> <td style="vertical-align:top" th:text="${j.count + feedbackquestionlist.size}">.)</td> <td> <p style="margin-bottom: 0.430rem;" th:text="${paramQuestions.engQuestion}"></p> <p th:text="${paramQuestions.tamilQuestion}"></p> <div class="col-md-9 px-5 py-1"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" th:name="'pq_' + ${paramQuestions.apqId}" th:id="'pq_' + ${paramQuestions.apqId} + '_1'" value="yes" required> <label class="form-check-label" th:for="'pq_' + ${paramQuestions.apqId} + '_1'">Yes</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" th:name="'pq_' + ${paramQuestions.apqId}" th:id="'pq_' + ${paramQuestions.apqId} + '_2'" value="no" required> <label class="form-check-label" th:for="'pq_' + ${paramQuestions.apqId} + '_2'">NO</label> </div> </div> </td> </tr> <!-- Asset Questions --> <tr style="border-bottom:0px;" th:each="assetQuestion, k : ${assetquestionlist}"> <td style="vertical-align:top" th:text="${k.count + feedbackquestionlist.size + assetparameterquestionlist.size}">.)</td> <td> <p style="margin-bottom: 0.430rem;" th:text="${assetQuestion.engQuestion}"></p> <p th:text="${assetQuestion.tamilQuestion}"></p> <div class="col-md-9 px-5 py-1"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" th:name="'aq_' + ${assetQuestion.aqId}" th:id="'aq_' + ${assetQuestion.aqId} + '_1'" value="yes" required> <label class="form-check-label" th:for="'aq_' + ${assetQuestion.aqId} + '_1'">ஆம் / Yes</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" th:name="'aq_' + ${assetQuestion.aqId}" th:id="'aq_' + ${assetQuestion.aqId} + '_2'" value="on" required> <label class="form-check-label" th:for="'aq_' + ${assetQuestion.aqId} + '_2'">இல்லை / NO</label> </div> </div> </td> </tr> </tbody> </table><!--end /table--> </div> </div> </div> <div class="card"> <div class="card-header bg-success text-white"> Overall Satisfaction? </div> <div class="card-body text-center rating"> <div class="js-rating" style="font-size:26px;"></div> </div><!---end card-body--> <div class="card-footer text-center"> <button type="button" class="btn btn-de-secondary btn-sm" data-bs-dismiss="modal">Reset</button> <button type="submit" class="btn btn-primary btn-sm">Submit</button> </div><!--end modal-footer--> </div> </form>
</div> <!-- end col --> </div> <!-- end row --> </div> <!-- END Page Content --> </main> <!-- END Main Container -->
<!-- Footer --> <footer th:replace="fragments/footer :: footer"></footer> <!-- END Footer --> <!-- PopUp Modal Form --> <div class="modal fade" id="loginForm" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form action="#" th:action="@{/updateParameterQuestion}" th:object="${parameterquestion}" method="post" onsubmit="return sendOTP();"> <div class="block block-rounded block-themed block-transparent mb-0"> <div class="block-header bg-primary-dark"> <h3 class="block-title">OTP Login</h3> <div class="block-options"> <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close"> <i class="fa fa-fw fa-times"></i> </button> </div> </div> <div class="block-content"> <div class="row"> <div class="mb-3 text-center"> <img src="assets/media/images/mobileotp.png" width="50%" alt="Mobileotp"> </div> <div class="mb-3 text-center"> <h4>OTP Verification</h4> <p class="text-mute">We will send you a one-time password to<br>this mobile number</p> </div> <div class="mb-3 text-center"> <label for="mobile">Enter Mobile Number</label> <input type="text" minlength="10" maxlength="10" pattern="\d*" class="form-control text-center" name="mobileNo" id="mobileNo" placeholder="" required /> </div> </div><!--end row--> </div><!--end modal-body--> </div> <div class="block-content block-content-full text-end bg-body"> <button type="button" class="btn btn-de-secondary btn-sm" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary btn-sm">Get OTP</button> </div><!--end modal-footer--> </form> </div><!--end modal-content--> </div><!--end modal-dialog--> </div><!--end modal--> <!-- PopUp Modal OTP Form --> <div class="modal fade" id="otpForm" tabindex="-1" role="dialog" aria-labelledby="otpFormLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <form action="#" th:action="@{/updateParameterQuestion}" th:object="${parameterquestion}" method="post" onsubmit="return verifyOtp();"> <div class="block block-rounded block-themed block-transparent mb-0"> <div class="block-header bg-primary-dark"> <h3 class="block-title">OTP Login</h3> <div class="block-options"> <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close"> <i class="fa fa-fw fa-times"></i> </button> </div> </div> <div class="block-content"> <div class="row"> <div class="mb-3 text-center"> <img src="assets/media/images/mobileotp.png" width="50%" alt="Mobileotp"> </div> <div class="mb-1 text-center"> <h4>OTP Verification</h4> <p class="text-mute">Enter the OTP sent to <b class="text-info" id="mobilenotxt"></b></p> </div> <div class="mb-3 text-center"> <input type="text" minlength="5" maxlength="5" pattern="\d*" class="form-control text-center" name="otp" id="otp" placeholder="" required/> </div> <div class="mb-3 text-center"> <p class="text-mute">Didn`t you receive the OTP? <a href="#" class="text-info" onclick="return validate();">Resend OTP</a></p> </div> </div><!--end row--> </div><!--end modal-body--> <div class="block-content block-content-full text-end bg-body"> <button type="button" class="btn btn-de-secondary btn-sm" data-bs-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary btn-sm">Verify OTP</button> </div><!--end modal-footer--> </div><!--end modal-content--> </form> </div><!--end modal-content--> </div><!--end modal-dialog--> </div><!--end modal--> </div> <!-- END Page Container -->
<!-- Scripts --> <script th:replace="fragments/script :: script"></script> <!-- Page JS Plugins --> <script src="assets/js/plugins/raty-js/jquery.raty.js"></script>
<!-- Page JS Code --> <script src="assets/js/pages/be_comp_rating.min.js"></script> <script> function callLogin(){ $('#loginForm').modal({ backdrop: 'static', keyboard: false }) $('#otpForm').modal({ backdrop: 'static', keyboard: false }) $('#otpForm').modal('hide'); $('#loginForm').modal('show'); } function validate() { var mobile = $("#mobile").val(); //alert(mobile); $("#mobileNo").val(mobile); callLogin(); return false; } function sendOTP(){
var mobileNo = $("#mobileNo").val(); $("#mobile").val(mobileNo); // Set final mobile number after request otp $("#mobilenotxt").html(mobileNo); $('#loginForm').modal('hide'); $.ajax({ type: "GET", url: '/api/sendOTP', data: {'mobileNo':mobileNo}, dataType: 'json', success: function(bodyMessage) { if(bodyMessage!="Error"){ //alert("OTP Send Successfully!!!"); $('#otpForm').modal('show'); }else{ alert("Error on Sending OTP!!!"); } } }); return false; }
//Verify OTP function verifyOtp(){
var otp = $("#otp").val(); //alert(otp); //document.getElementById("saveFeedbackForm").submit(); $.ajax({ type: "GET", url: '/api/verifyOTP', data: {'otp':otp}, dataType: 'text', success: function(bodyMessage) { if(bodyMessage.trim() == "Success"){ //alert("OTP is Verified!!!"); document.getElementById("saveFeedbackForm").submit(); } else { alert("OTP is Incorrect!!!"); // do something here } }, error: function() { alert("Error");// Handle error here } }); return false; } </script> </body></html>
|
