srishanmugip
/
public_grievance_updated
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

git latest commit

master
kirubaasagar.R 2 years ago
parent
aeb146e44e
commit
dbdf267463
4 changed files with 628 additions and 301 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 88
      src/main/java/com/gcc/publicgrievance/Service/ComplaintService.java
  2. 242
      src/main/java/com/gcc/publicgrievance/controller/ComplaintController.java
  3. 262
      src/main/resources/templates/User/home.html
  4. 337
      src/main/resources/templates/checklistofficer/checklistofficer.html

88
src/main/java/com/gcc/publicgrievance/Service/ComplaintService.java
View File

@ -1,4 +1,7 @@
package com.gcc.publicgrievance.Service;
import java.util.ArrayList;
import java.util.Collections;
import java.util.HashMap;
import java.util.List;
@ -13,41 +16,52 @@ import org.springframework.web.client.RestTemplate;
@Service
public class ComplaintService {
private final String baseUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
public String fetchComplaintCategories() {
RestTemplate restTemplate = new RestTemplate();
String url = baseUrl + "?serviceId=getComplCategory&ComplaintGroupId=null";
return restTemplate.getForObject(url, String.class);
}
public String fetchComplaintSubTypes(String groupId) {
RestTemplate restTemplate = new RestTemplate();
String url = baseUrl + "?serviceId=getComplCategory&ComplaintGroupId=" + groupId;
return restTemplate.getForObject(url, String.class);
}
// public String fetchComplaintdetailsbyId(String complaintid) {
// RestTemplate restTemplate = new RestTemplate();
// String url = baseUrl + "?serviceId=getComplaintByID&ComplaintId=" + complaintid;
// return restTemplate.getForObject(url, String.class);
// }
public List<Map<String, Object>> fetchComplaintDetailsById(String complaintId) {
RestTemplate restTemplate = new RestTemplate();
String url = baseUrl + "?serviceId=getComplaintByID&ComplaintId=" + complaintId;
String response = restTemplate.getForObject(url, String.class);
try {
ObjectMapper objectMapper = new ObjectMapper();
return objectMapper.readValue(response, new TypeReference<List<Map<String, Object>>>() {});
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
private final String baseUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
public String fetchComplaintCategories() {
RestTemplate restTemplate = new RestTemplate();
String url = baseUrl + "?serviceId=getComplCategory&ComplaintGroupId=null";
return restTemplate.getForObject(url, String.class);
}
public String fetchComplaintSubTypes(String groupId) {
RestTemplate restTemplate = new RestTemplate();
String url = baseUrl + "?serviceId=getComplCategory&ComplaintGroupId=" + groupId;
return restTemplate.getForObject(url, String.class);
}
public List<Map<String, Object>> fetchComplaintDetailsById(String complaintId) {
RestTemplate restTemplate = new RestTemplate();
String url = baseUrl + "?serviceId=getComplaintByID&ComplaintId=" + complaintId;
String response = restTemplate.getForObject(url, String.class);
try {
ObjectMapper objectMapper = new ObjectMapper();
return objectMapper.readValue(response, new TypeReference<List<Map<String, Object>>>() {
});
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
public List<Map<String, Object>> fetchComplaintDetailsByMobile(String mobileNo) {
RestTemplate restTemplate = new RestTemplate();
String url = baseUrl
+ "?serviceId=getComplaintListWithImg&From_date=01/01/2024&To_date=20/08/2024&jsonResp=Yes&UserType=Public&MobileNo="
+ mobileNo + "&PageIndex=null&Status=null&repYear=2024";
String response = restTemplate.getForObject(url, String.class);
try {
ObjectMapper objectMapper = new ObjectMapper();
return objectMapper.readValue(response, new TypeReference<List<Map<String, Object>>>() {
});
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
}

242
src/main/java/com/gcc/publicgrievance/controller/ComplaintController.java
View File

@ -57,182 +57,11 @@ public class ComplaintController {
public List<Map<String, Object>> getComplaintDetailsById(@RequestParam String complaintid) {
return complaintService.fetchComplaintDetailsById(complaintid);
}
// save api
/*@PostMapping("/register")
public ResponseEntity<String> registerComplaint(
@RequestParam("ComplainantName") String complainantName,
@RequestParam("ComplainantAddr") String complainantAddr,
@RequestParam("MobileNo") String mobileNo,
@RequestParam("Email") String email,
@RequestParam("ComplaintType") String complaintType,
@RequestParam("ComplaintTitle") String complaintTitle,
@RequestParam("ComplaintDetails") String complaintDetails,
@RequestParam("StreetId") String streetId,
@RequestParam("Comp_Image") String compImage,
@RequestParam("latitude") String latitude,
@RequestParam("longtitude") String longtitude,
@RequestParam("Landmark") String landmark,
@RequestParam("gender") String gender) {
String externalUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice"; // // //
// Build the URI with parameters
UriComponentsBuilder uriBuilder = UriComponentsBuilder.fromHttpUrl(externalUrl)
.queryParam("serviceId", "RegComplaint").queryParam("ComplainantName", complainantName)
.queryParam("ComplainantAddr", complainantAddr).queryParam("MobileNo", mobileNo)
.queryParam("Email", email).queryParam("ComplaintType", complaintType)
.queryParam("ComplaintTitle", complaintTitle).queryParam("ComplaintDetails", complaintDetails)
.queryParam("StreetId", streetId).queryParam("Comp_Image", compImage).queryParam("latitude", latitude)
.queryParam("longtitude", longtitude).queryParam("Landmark", landmark).queryParam("gender", gender); // //
// the
// external API
ResponseEntity<String> response = restTemplate.postForEntity(uriBuilder.toUriString(), null, String.class); //
// // Return the response from the external API
return ResponseEntity.status(response.getStatusCode()).body(response.getBody());
}*/
/*
* @PostMapping("/register") public ResponseEntity<String>
* registerComplaint(@RequestParam("ComplainantName") String complainantName,
*
* @RequestParam("ComplainantAddr") String
* complainantAddr, @RequestParam("MobileNo") String mobileNo,
*
* @RequestParam("Email") String email, @RequestParam("ComplaintType") String
* complaintType,
*
* @RequestParam("ComplaintTitle") String complaintTitle,
*
* @RequestParam("ComplaintDetails") String
* complaintDetails, @RequestParam("StreetId") String streetId,
*
* @RequestParam("Comp_Image") MultipartFile
* compImage, @RequestParam("latitude") String latitude,
*
* @RequestParam("longtitude") String longtitude, @RequestParam("Landmark")
* String landmark,
*
* @RequestParam("gender") String gender) {
*
* String externalUrl =
* "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
*
* // Convert the image to a Base64 string String base64Image = ""; if
* (!compImage.isEmpty()) { try { byte[] imageBytes = compImage.getBytes();
* base64Image = Base64.getEncoder().encodeToString(imageBytes); } catch
* (IOException e) { return
* ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).
* body("Error encoding image."); } }
*
* // Build the URI with parameters UriComponentsBuilder uriBuilder =
* UriComponentsBuilder.fromHttpUrl(externalUrl) .queryParam("serviceId",
* "RegComplaint").queryParam("ComplainantName", complainantName)
* .queryParam("ComplainantAddr", complainantAddr).queryParam("MobileNo",
* mobileNo) .queryParam("Email", email).queryParam("ComplaintType",
* complaintType) .queryParam("ComplaintTitle",
* complaintTitle).queryParam("ComplaintDetails", complaintDetails)
* .queryParam("StreetId", streetId).queryParam("Comp_Image", base64Image) //
* Use base64 image here .queryParam("latitude",
* latitude).queryParam("longtitude", longtitude).queryParam("Landmark",
* landmark) .queryParam("gender", gender);
*
* // Make a POST request to the external API ResponseEntity<String> response =
* restTemplate.postForEntity(uriBuilder.toUriString(), null, String.class);
*
* // Return the response from the external API return
* ResponseEntity.status(response.getStatusCode()).body(response.getBody());
*
* }
*/
/*@PostMapping("/register")
public ResponseEntity<String> registerComplaint(
@RequestParam("ComplainantName") String complainantName,
@RequestParam("ComplainantAddr") String complainantAddr,
@RequestParam("MobileNo") String mobileNo,
@RequestParam("Email") String email,
@RequestParam("ComplaintType") String complaintType,
@RequestParam("ComplaintTitle") String complaintTitle,
@RequestParam("ComplaintDetails") String complaintDetails,
@RequestParam("StreetId") String streetId,
@RequestParam("Comp_Image") String compImage,
@RequestParam("latitude") String latitude,
@RequestParam("longtitude") String longtitude,
@RequestParam("Landmark") String landmark,
@RequestParam("gender") String gender) {
String externalUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
try {
// Create the URL object
URL url = new URL(externalUrl);
// Create the HttpURLConnection object
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setRequestMethod("POST");
conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
conn.setDoOutput(true);
// Create the parameters string
String params = "serviceId=RegComplaint" +
"&ComplainantName=" + URLEncoder.encode(complainantName, "UTF-8") +
"&ComplainantAddr=" + URLEncoder.encode(complainantAddr, "UTF-8") +
"&MobileNo=" + URLEncoder.encode(mobileNo, "UTF-8") +
"&Email=" + URLEncoder.encode(email, "UTF-8") +
"&ComplaintType=" + URLEncoder.encode(complaintType, "UTF-8") +
"&ComplaintTitle=" + URLEncoder.encode(complaintTitle, "UTF-8") +
"&ComplaintDetails=" + URLEncoder.encode(complaintDetails, "UTF-8") +
"&StreetId=" + URLEncoder.encode(streetId, "UTF-8") +
"&Comp_Image=" + URLEncoder.encode(compImage, "UTF-8") +
"&latitude=" + URLEncoder.encode(latitude, "UTF-8") +
"&longtitude=" + URLEncoder.encode(longtitude, "UTF-8") +
"&Landmark=" + URLEncoder.encode(landmark, "UTF-8") +
"&gender=" + URLEncoder.encode(gender, "UTF-8");
// Write parameters to request body
try (OutputStream os = conn.getOutputStream()) {
byte[] input = params.getBytes("UTF-8");
os.write(input, 0, input.length);
}
// Read the response
int responseCode = conn.getResponseCode();
BufferedReader reader;
if (responseCode == HttpURLConnection.HTTP_OK) {
reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));
} else {
reader = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
}
StringBuilder response = new StringBuilder();
String line;
while ((line = reader.readLine()) != null) {
response.append(line);
}
reader.close();
// Return the response from the external API
return ResponseEntity.status(responseCode).body(response.toString());
} catch (IOException e) {
e.printStackTrace();
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("An error occurred while processing the request.");
}
@GetMapping("/api/getComplaintDetailsByMobile")
public List<Map<String, Object>> getComplaintDetailsByMobile(@RequestParam String mobileNo) {
return complaintService.fetchComplaintDetailsByMobile(mobileNo);
}
*/
@PostMapping("/register")
public ResponseEntity<String> registerComplaint(
@RequestParam(value = "ComplainantName", required = false) String complainantName,
@ -307,5 +136,70 @@ public class ComplaintController {
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("An error occurred while processing the request.");
}
}
@PostMapping("/updateComplaint")
public ResponseEntity<String> updateComplaint(
@RequestParam("ComplaintId") String complaintId,
@RequestParam(value = "Message", required = false) String message,
@RequestParam(value = "UserType", required = false) String userType,
@RequestParam(value = "Status", required = false) String status,
@RequestParam(value = "Comp_Image", required = false) String compImage) {
String externalUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
try {
// Create the URL object
URL url = new URL(externalUrl);
// Create the HttpURLConnection object
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setRequestMethod("POST");
conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
conn.setDoOutput(true);
// Create the parameters string, handling null values
String params = "serviceId=UpdateComplaint"+
"&ComplaintId=" + URLEncoder.encode(complaintId != null ? complaintId : "", "UTF-8") +
"&Message=" + URLEncoder.encode(message != null ? message : "", "UTF-8") +
"&UserType=" + URLEncoder.encode(userType != null ? userType : "", "UTF-8") +
"&Status=" + URLEncoder.encode(status != null ? status : "", "UTF-8") +
"&Comp_Image=" + URLEncoder.encode(compImage != null ? compImage : "", "UTF-8") +
"&Token=718333469976265947044293";
// Write parameters to request body
try (OutputStream os = conn.getOutputStream()) {
byte[] input = params.getBytes("UTF-8");
os.write(input, 0, input.length);
}
// Read the response
int responseCode = conn.getResponseCode();
BufferedReader reader;
if (responseCode == HttpURLConnection.HTTP_OK) {
reader = new BufferedReader(new InputStreamReader(conn.getInputStream()));
} else {
reader = new BufferedReader(new InputStreamReader(conn.getErrorStream()));
}
StringBuilder response = new StringBuilder();
String line;
while ((line = reader.readLine()) != null) {
response.append(line);
}
reader.close();
// Return the response from the external API
return ResponseEntity.status(responseCode).body(response.toString());
} catch (IOException e) {
e.printStackTrace();
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("An error occurred while processing the request.");
}
}
}

262
src/main/resources/templates/User/home.html
View File

@ -6,6 +6,9 @@
<title>Main Page</title>
<!--Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" 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" />
<!--Bootstrap CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
@ -172,15 +175,41 @@
font-size: 14px;
cursor: pointer;
}
/*for radio button style*/
.radio-group {
display: flex;
align-items: center;
/* Ensures all items are aligned to the center */
}
.radio-item {
display: flex;
align-items: center;
margin-right: 20px;
/* Adds space between each radio item */
}
.radio-item input[type="radio"] {
margin-right: 10px;
/* Adds space between the radio button and its label */
vertical-align: middle;
/* Ensures vertical alignment */
}
.radio-item label {
margin: 0;
/* Removes any default margins that might affect alignment */
}
</style>
</head>
<body>
<div th:insert="~{fragments/accessibility :: accessibility}"></div>
<!-- <div class="header">
<!-- <div class="header">
<div class="logo-left">
<img src="images/gcc1.png" alt="Greater Chennai Corporation Logo">
@ -201,12 +230,15 @@
<!-- Insert the header fragment -->
<div th:insert="fragments/header :: headerFragment"></div>=
<div th:insert="fragments/header :: headerFragment"></div>
<!--<button id="reader-btn" onclick="toggleReader()">Enable Reader</button>-->
<!-- Cards Section -->
<div class="container mt-3">
<div id="loader" style="display: none; text-align: center;">
<img src="images/Thin broken ring.gif" alt="Loading..." />
</div>
<!--<button id="invertColorBtn" onclick="invertColors()">Invert Colors</button>-->
<div class="row">
<div class="col-md-4">
@ -252,51 +284,147 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- Form to Check by Complaint Number -->
<div class="col-md-12">
<div class="card readable">
<div class="card-body">
<img src="images/search.png" alt="Status" class="card-img">
<div class="card-content">
<h5 class="card-title">Check Your Complaint Status</h5>
<div class="form-group">
<input type="radio" id="c_number" name="check_method" value="c_number" checked
onchange="toggleInput()">
<label class="readable">Check By Complaint Number</label>
<input type="radio" id="m_number" name="check_method" value="m_number"
onchange="toggleInput()">
<label class="readable">Check By Mobile Number</label>
</div>
<!-- Input for Complaint Number -->
<div class="form-group" id="complaint-number-input">
<input type="text" class="form-control" id="complaint-number"
placeholder="Enter Complaint Number">
</div>
<!-- Input for Mobile Number (hidden by default) -->
<div class="form-group" id="complaint-mobile-input" style="display: none;">
<input type="text" class="form-control" id="complaint-mobile"
placeholder="Enter Mobile Number">
</div>
</div>
</div>
<div class="card-footer">
<!-- Button for Complaint Number -->
<button class="btn btn-danger" id="check-now-btn">Check Now <i
class="fa fa-arrow-right"></i></button>
<!-- Button for Mobile Number (hidden by default) -->
<button class="btn btn-primary readable" id="check-mobile-btn" style="display: none;">Check Now <i
class="fa fa-arrow-right"></i></button>
</div>
</div>
</div>
<!-- Form to Check by Mobile Number -->
<!--<div class="col-md-6">
<div class="card readable">
<div class="card-body">
<img src="images/search.png" alt="Status" class="card-img">
<div class="card-content">
<h5 class="card-title">Check Your Complaint Status</h5>
<div class="form-group">
<label class="readable">Check By Complaint Number</label>
<label class="readable">Check By Mobile Number</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="complaint-number"
placeholder="Enter Complaint Number">
<input type="text" class="form-control" id="complaint-mobile"
placeholder="Enter Mobile Number">
</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-primary readable" id="check-now-btn">
Check Now <i class="fa fa-arrow-right"></i>
</button>
<button class="btn btn-primary readable" id="check-mobile-btn">Check Now <i
class="fa fa-arrow-right"></i></button>
</div>
</div>
</div>-->
</div>
<div class="modal fade" id="complaintDetailsModal" tabindex="-1" role="dialog"
aria-labelledby="complaintDetailsLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: #3c4959;color: white;">
<h5 class="modal-title" id="complaintDetailsLabel">Complaint Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white;">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<table class="table">
<thead style="background-color: #3c4959;color: white;">
<tr>
<th>Complaint Number</th>
<th>Complaint Type</th>
<th>View</th> <!-- New column for the eye icon -->
</tr>
</thead>
<tbody>
<!-- Dynamic rows will be appended here by JavaScript -->
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal"
style="background-color:#3c4959 ;">Close</button>
</div>
</div>
</div>
</div>
<!-- <div th:insert="fragments/footer :: footerFragment"></div>-->
<!--Bootstrap JS-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<!-- Replace Slim jQuery with Full jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Popper.js (for Bootstrap tooltips, popovers, etc.) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Font Awesome for Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script>
$(document).ready(function () {
// Check by complaint number
$('#check-now-btn').click(function () {
var complaintNumber = $('#complaint-number').val();
if (complaintNumber) {
@ -305,12 +433,110 @@
alert('Please enter a complaint number.');
}
});
});
function toggleInput() {
const checkByComplaint = document.getElementById('c_number').checked;
const complaintInput = document.getElementById('complaint-number-input');
const mobileInput = document.getElementById('complaint-mobile-input');
const checkNowBtn = document.getElementById('check-now-btn');
const checkMobileBtn = document.getElementById('check-mobile-btn');
if (checkByComplaint) {
complaintInput.style.display = 'block';
checkNowBtn.style.display = 'block';
mobileInput.style.display = 'none';
checkMobileBtn.style.display = 'none';
} else {
complaintInput.style.display = 'none';
checkNowBtn.style.display = 'none';
mobileInput.style.display = 'block';
checkMobileBtn.style.display = 'block';
}
}
$(document).ready(function () {
// Trigger modal and load complaint list based on mobile number
$('#check-mobile-btn').on('click', function () {
const mobileNumber = $('#complaint-mobile').val(); // Get the entered mobile number
if (mobileNumber === "") {
alert("Please enter a mobile number.");
return;
}
$('#loader').show();
// AJAX request to fetch complaint details by mobile number
$.ajax({
url: '/api/getComplaintDetailsByMobile', // Replace with your correct API path
method: 'GET',
data: {mobileNo: mobileNumber},
success: function (response) {
$('#loader').hide();
const complaintList = response[0]?.ComplaintListHistory; // Assuming data is inside ComplaintListHistory
// Clear the table before adding new rows
const tableBody = $('#complaintDetailsModal tbody');
tableBody.empty();
// Check if there are complaints
if (complaintList && complaintList.length > 0) {
// Loop through each complaint and add to the table
complaintList.forEach(function (complaint) {
const complaintId = complaint.complaintid || 'N/A'; // Fallback to N/A if complaintid is null
const complaintType = complaint.complainttype || 'N/A';
const newRow = `
<tr>
<td>${complaintId}</td>
<td>${complaintType}</td>
<td>
<button class="btn btn-link view-complaint" data-complaintid="${complaintId}">
<i style="color:#3c4959" class="fa fa-eye"></i>
</button>
</td>
</tr>`;
tableBody.append(newRow); // Append the new row to the table
});
} else {
// No complaints found for the mobile number
tableBody.append('<tr><td colspan="2">No complaints found for this mobile number.</td></tr>');
}
// Display the modal after fetching the data
$('#complaintDetailsModal').modal('show');
},
error: function (error) {
console.log('Error fetching complaints:', error);
alert('There was an error fetching the complaint details. Please try again.');
$('#loader').hide();
}
});
});
// Event delegation to handle click on dynamically generated eye icons
$(document).on('click', '.view-complaint', function () {
var complaintId = $(this).data('complaintid');
if (complaintId) {
// Redirect to the complaint details page using complaintId
window.location.href = 'checklistofficer?complaintno=' + encodeURIComponent(complaintId);
} else {
alert('Complaint ID not found.');
}
});
});
</script>
</body>

337
src/main/resources/templates/checklistofficer/checklistofficer.html
View File

@ -3,11 +3,12 @@
<head>
<meta charset="UTF-8">
<title>CheckList Officer</title>
<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>
@ -43,6 +44,29 @@
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>
@ -53,9 +77,6 @@
<div th:insert="~{fragments/header :: headerFragment}"></div>
<div class="container mt-4">
<!--<button class="plus btn btn-primary">A+</button>
<button class="minus btn btn-secondary">A-</button>-->
<!-- Loader GIF -->
<div id="loader" style="display: none; text-align: center;">
<img src="images/Thin broken ring.gif" alt="Loading..." />
@ -70,28 +91,15 @@
</div>
<!-- Card Section -->
<div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
<div class="row" style="font-weight: bolder;">
<div class="col-md-6">
Complainant Number:
</div>
<div class="col-md-6">
Date:
</div>
</div>
<div class="row" style="font-weight: bolder;color: #414f69;">
<div class="col-md-6">
Complainant Mode:
</div>
<div class="col-md-6">
Expiry:
</div>
</div>
<!-- Add the resizable-content class to the card sections -->
<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>
@ -100,19 +108,16 @@
Complainant Name:
<input type="text" id="complaint-customer-name" class="form-control" value="" disabled>
</div>
<div class="col-md-6">
Complainant Email:
<input type="email" class="form-control" value="" disabled>
</div>
<div class="col-md-6">
<!--<div class="col-md-6">
Gender:
<select class="form-control" disabled>
<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>
@ -155,17 +160,17 @@
<input type="text" class="form-control" id="complaintType" disabled>
</div>
<div class="col-md-4">
<!--<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>-->
<div class="col-md-12">
Complainant Description:
<input type="text" class="form-control" id="" disabled>
<input type="text" class="form-control" id="complaintdesc" disabled>
</div>
</div>
</div>
@ -179,52 +184,61 @@
<!--<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">
<option value="0">Select Complaint</option>
<option value="complaint1">Complaint 1</option>
<option value="complaint2">Complaint 2</option>
<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">
<label for="rating" style="display: block; margin-bottom: 4px;">Feedback Rating:</label>
<div class="rating">
<input type="radio" name="star" id="star1"><label for="star1">★</label>
<input type="radio" name="star" id="star2"><label for="star2">★</label>
<input type="radio" name="star" id="star3"><label for="star3">★</label>
<input type="radio" name="star" id="star4"><label for="star4">★</label>
<input type="radio" name="star" id="star5"><label for="star5">★</label>
</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">
Complainant Locality:
Details of Complaint:
<textarea class="form-control" id="othercomplaint-details" rows="3"
placeholder="Enter complaint details" maxlength="400"></textarea>
placeholder="Enter complaint details" maxlength="400" required></textarea>
</div>
</div>
<div class="row align-items-center justify-content-center" style="margin-top: 5px;">
@ -251,14 +265,11 @@
<script>
// /api/getComplaintDetailsbyId
$(document).ready(function () {
// Get the complaint number from the URL
var urlParams = new URLSearchParams(window.location.search);
var complaintNo = urlParams.get('complaintno');
if (complaintNo) {
$('#loader').show();
$.ajax({
@ -266,18 +277,24 @@
type: 'GET',
data: {complaintid: complaintNo},
success: function (response) {
console.log('API response:', response); // Log response for debugging
console.log('API response:', response);
$('#loader').hide();
// Check if response is an array and has data
if (Array.isArray(response) && response.length > 0) {
var complaintListHistory = response[0].ComplaintListHistory;
// Check if complaintListHistory is an array and has data
if (Array.isArray(complaintListHistory) && complaintListHistory.length > 0) {
var complaintDetails = complaintListHistory[0];
// Populate the form fields with null/undefined checks
// 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 || '';
@ -286,20 +303,118 @@
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 safely
// Handle nested Comments array
if (Array.isArray(complaintDetails.Comments) && complaintDetails.Comments.length > 0) {
// Assuming we want to use the first comment
var firstComment = complaintDetails.Comments[0];
document.getElementById("commentDate").value = firstComment.comment_date || '';
document.getElementById("commentuser").value = firstComment.user || '';
document.getElementById("complaintOfficer").value = firstComment.user || '';
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 {
// Clear fields if Comments are not present
document.getElementById("commentDate").value = '';
document.getElementById("commentuser").value = '';
document.getElementById("complaintOfficer").value = '';
$('#comments-container').html('<p>No comments found.</p>');
}
} else {
alert('No complaint details found in ComplaintListHistory.');
@ -307,25 +422,103 @@
} 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 {
} else {
alert('No complaint number provided.');
}
});
// Utility function to format date and time from datetime string
$(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>

Write Preview
Loading…
Cancel
Save