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.
532 lines
18 KiB
532 lines
18 KiB
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CheckList User</title>
|
|
<!-- Google Font -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
|
|
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<style>
|
|
/*rating style for css*/
|
|
.rating {
|
|
direction: rtl;
|
|
display: inline-flex;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.rating input {
|
|
display: none;
|
|
}
|
|
|
|
.rating label {
|
|
color: #ddd;
|
|
cursor: pointer;
|
|
margin: 0;
|
|
}
|
|
|
|
.rating input:checked~label {
|
|
color: #414f69;
|
|
}
|
|
|
|
.rating label:hover,
|
|
.rating label:hover~label {
|
|
color: #414f69;
|
|
}
|
|
|
|
/* Style for resizing content */
|
|
.resizable-content {
|
|
font-size: medium;
|
|
transition: font-size 0.3s ease;
|
|
}
|
|
|
|
|
|
.comment-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.comment-table td {
|
|
padding: 0.5rem;
|
|
border: 1px solid #ddd;
|
|
/* Light border color */
|
|
}
|
|
|
|
.comment-table td:first-child {
|
|
width: 25%;
|
|
/* Adjust as needed for label column width */
|
|
font-weight: bold;
|
|
}
|
|
|
|
.comment-table td:nth-child(2) {
|
|
width: 75%;
|
|
/* Adjust as needed for value column width */
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Insert the header fragment -->
|
|
|
|
<div th:insert="~{fragments/header :: headerFragment}"></div>
|
|
|
|
<div class="container mt-4">
|
|
<!-- Loader GIF -->
|
|
<div id="loader" style="display: none; text-align: center;">
|
|
<img src="images/Thin broken ring.gif" alt="Loading..." />
|
|
</div>
|
|
|
|
|
|
|
|
<div class="mt-1">
|
|
<div class="row align-items-center justify-content-center">
|
|
<h4 class="title resizable-content" style="color: #414f69;">Check Complaint Status</h4>
|
|
</div>
|
|
</div>
|
|
<!-- Card Section -->
|
|
<div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
|
|
<div class="card mb-3 resizable-content">
|
|
<div class="card-header text-white" style="background-color: #414f69;">1. Complaining Person's Details
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
Complainant ID:
|
|
<input type="text" id="complaintid" class="form-control" value="" disabled>
|
|
</div>
|
|
<div class="col-md-6">
|
|
Complainant Mobile Number:
|
|
<input type="text" id="complaint-mobile-number" class="form-control" value="" disabled>
|
|
</div>
|
|
<div class="col-md-6">
|
|
Complainant Name:
|
|
<input type="text" id="complaint-customer-name" class="form-control" value="" disabled>
|
|
</div>
|
|
|
|
<!--<div class="col-md-6">
|
|
Gender:
|
|
<select class="form-control" id="gender" disabled>
|
|
<option value="0">Select Gender</option>
|
|
<option value="male">Male</option>
|
|
<option value="female">Female</option>
|
|
<option value="transgender">Transgender</option>
|
|
</select>
|
|
</div>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-3 resizable-content">
|
|
<div class="card-header text-white" style="background-color: #414f69;">2. Complaint Location Details
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
Complainant Street:
|
|
<input type="text" id="street" class="form-control" disabled>
|
|
</div>
|
|
<div class="col-md-4">
|
|
Complainant Zone:
|
|
<input type="text" class="form-control" id="zone" disabled>
|
|
</div>
|
|
<div class="col-md-4">
|
|
Complainant Ward:
|
|
<input type="text" class="form-control" id="ward" disabled>
|
|
</div>
|
|
<div class="col-md-4">
|
|
Complainant Area:
|
|
<input type="text" class="form-control" id="area" disabled>
|
|
</div>
|
|
<div class="col-md-4">
|
|
Complainant Locality:
|
|
<input type="text" class="form-control" id="location" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card resizable-content">
|
|
<div class="card-header text-white" style="background-color: #414f69;">3. Complaint Type</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
Complainant Type:
|
|
<input type="text" class="form-control" id="complaintType" disabled>
|
|
</div>
|
|
|
|
<!--<div class="col-md-4">
|
|
Complainant Sub-Type:
|
|
<input type="text" class="form-control" disabled>
|
|
</div>
|
|
<div class="col-md-4">
|
|
Complainant Title:
|
|
<input type="text" class="form-control" disabled>
|
|
</div>-->
|
|
<div class="col-md-12">
|
|
Complainant Description:
|
|
<input type="text" class="form-control" id="complaintdesc" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mb-3 resizable-content">
|
|
<div class="card-header text-white" style="background-color: #414f69;">Complaint Action</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<!--<div class="col-md-2" id="">Aug 24<br>7.00 pm</div>-->
|
|
|
|
<div class="col-md-4">
|
|
Complaint Closed Date:
|
|
|
|
<input type="text" class="form-control" id="commentDate" disabled>
|
|
</div>
|
|
<div class="col-md-4">
|
|
Official Name:
|
|
<input type="text" class="form-control" id="commentuser" disabled>
|
|
</div>
|
|
<!--<div class="col-md-2"><button class="btn btn-sm"
|
|
style="background-color: #414f69;color: white;" id="status"></button></div>-->
|
|
<div class="col-md-4">
|
|
Status:
|
|
<input type="text" class="form-control" id="status"
|
|
style="background-color: #414f69;color: white;" disabled>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="card mb-3 resizable-content">
|
|
<div class="card-header text-white" style="background-color: #414f69;">Complaint Action History</div>
|
|
<div class="card-body">
|
|
<div id="comments-container"></div> <!-- Container for comments -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="card mb-3 resizable-content">
|
|
<div class="card-header text-white" style="background-color: #414f69;">Update Complaint</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
Change Complaint Status:
|
|
<select class="form-control" name="complaintStatusID" id="complaintStatus">
|
|
<option value="0">Choose</option>
|
|
<option value="8">WITHDRAW</option>
|
|
<option value="9">REOPENED</option>
|
|
<option value="10" selected="true">CLOSE</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6" id="img" style="display: none;">
|
|
Photo:
|
|
<input type="file" class="form-control" id="photo">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
Details of Complaint:
|
|
<textarea class="form-control" id="othercomplaint-details" rows="3"
|
|
placeholder="Enter complaint details" maxlength="400" required></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center justify-content-center" style="margin-top: 5px;">
|
|
<button class="btn btn-sm" style="background-color: #414f69;color: white;">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
|
|
</script>
|
|
|
|
|
|
<!-- JavaScript to handle button clicks -->
|
|
<script>
|
|
|
|
// /api/getComplaintDetailsbyId
|
|
$(document).ready(function () {
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
var complaintNo = urlParams.get('complaintno');
|
|
|
|
if (complaintNo) {
|
|
$('#loader').show();
|
|
|
|
$.ajax({
|
|
url: '/api/getComplaintDetailsbyId', // Replace with your actual API endpoint
|
|
type: 'GET',
|
|
data: {complaintid: complaintNo},
|
|
success: function (response) {
|
|
console.log('API response:', response);
|
|
$('#loader').hide();
|
|
|
|
if (Array.isArray(response) && response.length > 0) {
|
|
var complaintListHistory = response[0].ComplaintListHistory;
|
|
|
|
if (Array.isArray(complaintListHistory) && complaintListHistory.length > 0) {
|
|
var complaintDetails = complaintListHistory[0];
|
|
|
|
// Decode HTML entities before populating fields
|
|
function decodeHtmlEntities(str) {
|
|
var txt = document.createElement('textarea');
|
|
txt.innerHTML = str;
|
|
return txt.value;
|
|
}
|
|
|
|
// Populate other form fields
|
|
document.getElementById("complaintid").value = complaintDetails.complaintid || '';
|
|
document.getElementById("complaint-mobile-number").value = complaintDetails.CustomerMobile || '';
|
|
document.getElementById("complaint-customer-name").value = complaintDetails.CustomerName || '';
|
|
document.getElementById("street").value = complaintDetails.Street || '';
|
|
document.getElementById("zone").value = complaintDetails.Zone || '';
|
|
document.getElementById("ward").value = complaintDetails.Division || '';
|
|
document.getElementById("area").value = complaintDetails.Area || '';
|
|
document.getElementById("location").value = complaintDetails.Location || '';
|
|
document.getElementById("complaintType").value = complaintDetails.complainttype || '';
|
|
|
|
// Decode and populate complaint description
|
|
document.getElementById("complaintdesc").value = decodeHtmlEntities(complaintDetails.complaintdetails || '');
|
|
|
|
document.getElementById("commentDate").value = complaintDetails.complaintcloseddate || '';
|
|
document.getElementById("commentuser").value = complaintDetails.Officialname || '';
|
|
document.getElementById("status").value = complaintDetails.complaintcurrentstatus || '';
|
|
|
|
// Handle nested Comments array
|
|
if (Array.isArray(complaintDetails.Comments) && complaintDetails.Comments.length > 0) {
|
|
var commentsContainer = $('#comments-container');
|
|
commentsContainer.empty(); // Clear the container
|
|
|
|
var comments = complaintDetails.Comments;
|
|
var lastComment = comments[comments.length - 1];
|
|
|
|
// Decode HTML entities for last comment
|
|
function decodeHtmlEntities(str) {
|
|
var txt = document.createElement('textarea');
|
|
txt.innerHTML = str;
|
|
return txt.value;
|
|
}
|
|
|
|
// Handle last comment
|
|
var userImageHtml = '';
|
|
if (Array.isArray(lastComment.userimages) && lastComment.userimages.length > 0) {
|
|
var imageUrl = lastComment.userimages[0].Comp_Image;
|
|
if (imageUrl && imageUrl !== 'null') {
|
|
userImageHtml = `
|
|
<div class="col-md-12">
|
|
<img src="${imageUrl}" alt="User Image" class="img-fluid">
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
var lastCommentHtml = `
|
|
<div class="row mb-3">
|
|
<table class="comment-table">
|
|
<tr>
|
|
<td style="color:#3c4959">User:</td>
|
|
<td>${lastComment.user || ''}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="color:#3c4959">Message:</td>
|
|
<td>${lastComment.message || ''}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="color:#3c4959">Comment Date:</td>
|
|
<td>${lastComment.comment_date || ''}</td>
|
|
</tr>
|
|
${userImageHtml}
|
|
</table>
|
|
</div>
|
|
<hr>`;
|
|
|
|
commentsContainer.append(lastCommentHtml);
|
|
|
|
// Add dropdown button for other comments
|
|
if (comments.length > 1) {
|
|
var dropdownHtml = `
|
|
<button id="show-all-comments" class="btn mt-3" style="margin-bottom: 10px;background-color: #3c4959;
|
|
color: white;">Show All Comments</button>
|
|
<div id="all-comments" style="display:none;">`;
|
|
|
|
// Add all comments to dropdown
|
|
comments.forEach(function (comment, index) {
|
|
if (index < comments.length - 1) { // Skip the last comment
|
|
var userImageHtml = '';
|
|
if (Array.isArray(comment.userimages) && comment.userimages.length > 0) {
|
|
var imageUrl = comment.userimages[0].Comp_Image;
|
|
if (imageUrl && imageUrl !== 'null') {
|
|
userImageHtml = `
|
|
<div class="col-md-12">
|
|
<img src="${imageUrl}" alt="User Image" class="img-fluid">
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
dropdownHtml += `
|
|
<div class="row mb-3">
|
|
<table class="comment-table">
|
|
<tr>
|
|
<td style="color:#3c4959">User:</td>
|
|
<td>${comment.user || ''}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="color:#3c4959">Message:</td>
|
|
<td>${comment.message || ''}</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="color:#3c4959">Comment Date:</td>
|
|
<td>${comment.comment_date || ''}</td>
|
|
</tr>
|
|
${userImageHtml}
|
|
</table>
|
|
</div>
|
|
<hr>`;
|
|
}
|
|
});
|
|
|
|
dropdownHtml += '</div>';
|
|
|
|
commentsContainer.append(dropdownHtml);
|
|
|
|
// Toggle display of all comments
|
|
$('#show-all-comments').click(function () {
|
|
$('#all-comments').toggle();
|
|
$(this).text($(this).text() === 'Show All Comments' ? 'Hide Comments' : 'Show All Comments');
|
|
});
|
|
}
|
|
} else {
|
|
$('#comments-container').html('<p>No comments found.</p>');
|
|
}
|
|
} else {
|
|
alert('No complaint details found in ComplaintListHistory.');
|
|
}
|
|
} else {
|
|
alert('Unexpected response structure.');
|
|
}
|
|
},
|
|
error: function (xhr, status, error) {
|
|
console.log('Error:', xhr.responseText);
|
|
alert('An error occurred while fetching complaint details.');
|
|
$('#loader').hide();
|
|
}
|
|
});
|
|
} else {
|
|
alert('No complaint number provided.');
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
$('#complaintStatus').change(function () {
|
|
if ($(this).val() == '9') { // Show the image field if 'REOPENED' is selected
|
|
$('#img').show();
|
|
} else {
|
|
$('#img').hide();
|
|
}
|
|
});
|
|
|
|
// Handle the form submission
|
|
$('.btn').click(function (e) {
|
|
e.preventDefault();
|
|
|
|
var complaintId = 'YOUR_COMPLAINT_ID'; // You should fetch this dynamically
|
|
var status = $('#complaintStatus').val();
|
|
var message = $('#othercomplaint-details').val();
|
|
|
|
// Validate the "Details of Complaint" field
|
|
if (message.trim() === "") {
|
|
// Display a SweetAlert validation message if the field is empty
|
|
Swal.fire({
|
|
title: 'Validation Error!',
|
|
text: 'Please enter the details of the complaint.',
|
|
icon: 'warning',
|
|
confirmButtonText: 'OK'
|
|
});
|
|
return; // Stop the form submission if the field is empty
|
|
}
|
|
|
|
// Convert image to base64 if it's selected
|
|
var imageFile = $('#photo')[0].files[0];
|
|
var compImage = '';
|
|
|
|
if (imageFile) {
|
|
var reader = new FileReader();
|
|
reader.readAsDataURL(imageFile);
|
|
reader.onload = function () {
|
|
compImage = reader.result.split(',')[1]; // Extract base64 part
|
|
|
|
// Proceed with the AJAX call after the image is converted
|
|
updateComplaint(complaintId, message, status, compImage);
|
|
};
|
|
} else {
|
|
// No image selected, proceed with the AJAX call without the image
|
|
updateComplaint(complaintId, message, status, '');
|
|
}
|
|
});
|
|
|
|
// Function to send the AJAX request to the backend
|
|
function updateComplaint(complaintId, message, status, compImage) {
|
|
$.ajax({
|
|
url: '/updateComplaint', // Adjust this to match your endpoint
|
|
type: 'POST',
|
|
data: {
|
|
ComplaintId: complaintId, // complaintId mapped from your backend
|
|
Message: message, // message field
|
|
Status: status, // status dropdown
|
|
Comp_Image: compImage // base64 image data
|
|
},
|
|
success: function (response) {
|
|
// Display SweetAlert and redirect on 'OK'
|
|
Swal.fire({
|
|
title: 'Success!',
|
|
text: 'Complaint updated successfully.',
|
|
icon: 'success',
|
|
confirmButtonText: 'OK'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
// Redirect to home.html after clicking OK
|
|
window.location.href = 'home';
|
|
}
|
|
});
|
|
},
|
|
error: function (xhr, status, error) {
|
|
// Handle error
|
|
console.error('Error updating complaint:', error);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|