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.
371 lines
17 KiB
371 lines
17 KiB
<!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>
|
|
|