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

for patch

master
kirubaasagar.R 2 years ago
parent
093e53ac1f
commit
84dda19695
12 changed files with 344 additions and 3898 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. 2
      src/main/java/com/gcc/publicgrievance/PublicgrievanceApplication.java
  2. 228
      src/main/java/com/gcc/publicgrievance/controller/ComplaintController.java
  3. 29
      src/main/java/com/gcc/publicgrievance/controller/UserController.java
  4. 1505
      src/main/resources/templates/Tradelicence/tradelicence.html
  5. 90
      src/main/resources/templates/checklistofficer/checklistofficer.html
  6. 275
      src/main/resources/templates/checklistuser/checklistuser.html
  7. 685
      src/main/resources/templates/officer/officercomplaint.html
  8. 217
      src/main/resources/templates/staff/appoinment.html
  9. 251
      src/main/resources/templates/staff/appoinmentscreen.html
  10. 230
      src/main/resources/templates/staff/createorder.html
  11. 186
      src/main/resources/templates/staff/schemegroup.html
  12. 316
      src/main/resources/templates/staff/staffenrollment.html

2
src/main/java/com/gcc/publicgrievance/PublicgrievanceApplication.java
View File

@ -7,7 +7,7 @@ import org.springframework.boot.autoconfigure.SpringBootApplication;
public class PublicgrievanceApplication {
public static void main(String[] args) {
System.out.println("ready.....");
System.out.println("ready.........");
SpringApplication.run(PublicgrievanceApplication.class, args);
}

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

@ -1,6 +1,5 @@
package com.gcc.publicgrievance.controller;
import java.util.Base64;
import java.util.List;
import java.util.Map;
@ -13,9 +12,11 @@ import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.util.LinkedMultiValueMap;
import org.springframework.util.MultiValueMap;
import org.springframework.web.bind.annotation.*;
import java.io.BufferedReader;
@ -25,10 +26,18 @@ import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;
import org.springframework.http.*;
import java.util.Base64;
import java.util.HashMap;
import com.gcc.publicgrievance.Service.ComplaintService;
import org.springframework.web.multipart.MultipartFile;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import javax.imageio.ImageIO;
import java.util.Base64;
@CrossOrigin
@RestController
@ -62,6 +71,7 @@ public class ComplaintController {
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,
@ -91,20 +101,20 @@ public class ComplaintController {
conn.setDoOutput(true);
// Create the parameters string, handling null values
String params = "serviceId=RegComplaint" +
"&ComplainantName=" + URLEncoder.encode(complainantName != null ? complainantName : "", "UTF-8") +
"&ComplainantAddr=" + URLEncoder.encode(complainantAddr != null ? complainantAddr : "", "UTF-8") +
"&MobileNo=" + URLEncoder.encode(mobileNo != null ? mobileNo : "", "UTF-8") +
"&Email=" + URLEncoder.encode(email != null ? email : "", "UTF-8") +
"&ComplaintType=" + URLEncoder.encode(complaintType != null ? complaintType : "", "UTF-8") +
"&ComplaintTitle=" + URLEncoder.encode(complaintTitle != null ? complaintTitle : "", "UTF-8") +
"&ComplaintDetails=" + URLEncoder.encode(complaintDetails != null ? complaintDetails : "", "UTF-8") +
"&StreetId=" + URLEncoder.encode(streetId != null ? streetId : "", "UTF-8") +
"&Comp_Image=" + URLEncoder.encode(compImage != null ? compImage : "", "UTF-8") +
"&latitude=" + URLEncoder.encode(latitude != null ? latitude : "", "UTF-8") +
"&longtitude=" + URLEncoder.encode(longtitude != null ? longtitude : "", "UTF-8") +
"&Landmark=" + URLEncoder.encode(landmark != null ? landmark : "", "UTF-8") +
"&gender=" + URLEncoder.encode(gender != null ? gender : "", "UTF-8");
String params = "serviceId=RegComplaint" + "&ComplainantName="
+ URLEncoder.encode(complainantName != null ? complainantName : "", "UTF-8") + "&ComplainantAddr="
+ URLEncoder.encode(complainantAddr != null ? complainantAddr : "", "UTF-8") + "&MobileNo="
+ URLEncoder.encode(mobileNo != null ? mobileNo : "", "UTF-8") + "&Email="
+ URLEncoder.encode(email != null ? email : "", "UTF-8") + "&ComplaintType="
+ URLEncoder.encode(complaintType != null ? complaintType : "", "UTF-8") + "&ComplaintTitle="
+ URLEncoder.encode(complaintTitle != null ? complaintTitle : "", "UTF-8") + "&ComplaintDetails="
+ URLEncoder.encode(complaintDetails != null ? complaintDetails : "", "UTF-8") + "&StreetId="
+ URLEncoder.encode(streetId != null ? streetId : "", "UTF-8") + "&Comp_Image="
+ URLEncoder.encode(compImage != null ? compImage : "", "UTF-8") + "&latitude="
+ URLEncoder.encode(latitude != null ? latitude : "", "UTF-8") + "&longtitude="
+ URLEncoder.encode(longtitude != null ? longtitude : "", "UTF-8") + "&Landmark="
+ URLEncoder.encode(landmark != null ? landmark : "", "UTF-8") + "&gender="
+ URLEncoder.encode(gender != null ? gender : "", "UTF-8");
// Write parameters to request body
try (OutputStream os = conn.getOutputStream()) {
@ -133,47 +143,159 @@ public class ComplaintController {
} catch (IOException e) {
e.printStackTrace();
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("An error occurred while processing the request.");
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) {
//
// // Print for debugging
// System.out.println("ComplaintId: " + complaintId);
// System.out.println("Message: " + message);
// System.out.println("Status: " + status);
//
// // External API URL
// String externalUrl = "https://erp.chennaicorporation.gov.in/pgr/external/mobileservice";
//
// // Create the request body as MultiValueMap for form-encoded data
// MultiValueMap<String, String> requestBody = new LinkedMultiValueMap<>();
// requestBody.add("serviceId", "UpdateComplaint");
// requestBody.add("ComplaintId", complaintId != null ? complaintId : "");
// requestBody.add("Message", message != null ? message : "");
// requestBody.add("UserType", userType != null ? userType : "");
// requestBody.add("Status", status != null ? status : "");
// requestBody.add("Comp_Image", compImage != null ? compImage : "");
// requestBody.add("Token", "718333469976265947044293");
//// MultiValueMap<String, String> requestBody = new LinkedMultiValueMap<>();
//// requestBody.add("serviceId", "UpdateComplaint");
//// requestBody.add("ComplaintId", "2024-516FGB");
//// requestBody.add("Message","test");
//// requestBody.add("UserType", "Public");
//// requestBody.add("Status","8");
//// requestBody.add("Comp_Image","null");
//// requestBody.add("Token", "718333469976265947044293");
// System.out.println(requestBody);
//
// // Set headers to indicate form data
// HttpHeaders headers = new HttpHeaders();
// headers.setContentType(MediaType.APPLICATION_FORM_URLENCODED);
//
// // Build the request entity with headers and body
// HttpEntity<MultiValueMap<String, String>> entity = new HttpEntity<>(requestBody, headers);
//
// try {
// // Make the POST request using RestTemplate
// ResponseEntity<String> response = restTemplate.exchange(externalUrl, // External API endpoint
// HttpMethod.GET, // HTTP Method
// entity, // The request entity containing body and headers
// String.class // Expected response type
// );
// System.out.println(response.getBody());
//
// // Return the response from the external API
// return new ResponseEntity<>(response.getBody(), response.getStatusCode());
//
// } catch (Exception e) {
// e.printStackTrace();
// return ResponseEntity.status(500).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 = "Status") String status,
*
* @RequestParam(value = "Comp_Image", required = false) String compImage) {
* String userType = "Public";
* System.out.println("message:-"+message+"\n UserType:-"+userType+"\n Status:-"
* +status); 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 , "UTF-8") + "&Status=" + URLEncoder.encode(status
* != null ? status : "", "UTF-8") + "&Comp_Image=" +
* URLEncoder.encode(compImage != null ? compImage : "", "UTF-8") +
* "&Token=718333469976265947044293"; System.out.println(params); // 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();
* System.out.println(response.toString()); // 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."); } }
*/
@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) {
@RequestParam(value = "Status") String status,
@RequestPart(value = "Comp_Image", required = false) MultipartFile compImage) {
String userType = "Public";
System.out.println("message:-" + message + "\n UserType:-" + userType + "\n Status:-" + status);
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);
// Convert and compress the image to base64 if provided
String base64Image = null;
if (compImage != null && !compImage.isEmpty()) {
base64Image = compressAndEncodeToBase64(compImage);
}
// Create the parameters string, handling null values
String params = "serviceId=UpdateComplaint"+
// Construct the POST body with parameters
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") +
"&UserType=" + URLEncoder.encode(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);
}
// Open connection and send POST request
URL url = new URL(externalUrl);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setRequestMethod("POST");
conn.setDoOutput(true);
conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
// Read the response
// Send parameters
OutputStream os = conn.getOutputStream();
os.write(params.getBytes());
os.flush();
os.close();
// Handle the response
int responseCode = conn.getResponseCode();
BufferedReader reader;
if (responseCode == HttpURLConnection.HTTP_OK) {
@ -189,17 +311,37 @@ public class ComplaintController {
}
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.");
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR)
.body("An error occurred while processing the request.");
}
}
private String compressAndEncodeToBase64(MultipartFile file) throws IOException {
// Convert MultipartFile to BufferedImage
BufferedImage originalImage = ImageIO.read(file.getInputStream());
// Resize/Compress the image
int targetWidth = 800; // You can adjust the width as needed
int targetHeight = (int) (originalImage.getHeight() * (800.0 / originalImage.getWidth())); // Preserve aspect
// ratio
BufferedImage resizedImage = new BufferedImage(targetWidth, targetHeight, BufferedImage.TYPE_INT_RGB);
Graphics2D g = resizedImage.createGraphics();
g.drawImage(originalImage, 0, 0, targetWidth, targetHeight, null);
g.dispose();
// Compress the image by writing it to a ByteArrayOutputStream in JPEG format
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(resizedImage, "jpg", baos); // You can change the format to "png" or "jpg"
byte[] compressedBytes = baos.toByteArray();
// Convert the compressed image to base64
return Base64.getEncoder().encodeToString(compressedBytes);
}
}

29
src/main/java/com/gcc/publicgrievance/controller/UserController.java
View File

@ -7,7 +7,7 @@ import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class UserController {
@GetMapping("/home")
@GetMapping({"/", "/home"})
public String home(Model model) {
return "User/home";
}
@ -27,30 +27,5 @@ public class UserController {
public String checklistuser(Model model) {
return "checklistuser/checklistuser";
}
//staff
@GetMapping("/createorder")
public String createorder(Model model) {
return "staff/createorder";
}
@GetMapping("/staffenrollment")
public String staffenrollment(Model model) {
return "staff/staffenrollment";
}
@GetMapping("/appoinmentscreen")
public String appoinmentscreen(Model model) {
return "staff/appoinmentscreen";
}
@GetMapping("/schemegroup")
public String schemegroup(Model model) {
return "staff/schemegroup";
}
@GetMapping("/appoinment")
public String appoinment(Model model) {
return "staff/appoinment";
}
//tradelicence
@GetMapping("/tradelicence")
public String tradelicence(Model model) {
return "Tradelicence/tradelicence";
}
}

1505
src/main/resources/templates/Tradelicence/tradelicence.html
File diff suppressed because it is too large
View File

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

@ -8,9 +8,7 @@
<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>
@ -183,7 +181,7 @@
<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:
@ -194,11 +192,10 @@
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"
<input type="text" class="form-control" id="statusshow"
style="background-color: #414f69;color: white;" disabled>
</div>
</div>
@ -227,7 +224,7 @@
<option value="0">Choose</option>
<option value="8">WITHDRAW</option>
<option value="9">REOPENED</option>
<option value="10" selected="true">CLOSE</option>
</select>
</div>
@ -248,6 +245,10 @@
</div>
</div>
</div>
</div>
@ -311,7 +312,7 @@
document.getElementById("commentDate").value = complaintDetails.complaintcloseddate || '';
document.getElementById("commentuser").value = complaintDetails.Officialname || '';
document.getElementById("status").value = complaintDetails.complaintcurrentstatus || '';
document.getElementById("statusshow").value = complaintDetails.complaintcurrentstatus || '';
// Handle nested Comments array
if (Array.isArray(complaintDetails.Comments) && complaintDetails.Comments.length > 0) {
@ -449,58 +450,51 @@
}
});
// 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 complaintId = $('#complaintid').val();
var complaintStatus = $('#complaintStatus').val();
var message = $('#othercomplaint-details').val();
// Validate the "Details of Complaint" field
// Validate "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
return;
}
// Convert image to base64 if it's selected
var imageFile = $('#photo')[0].files[0];
var compImage = '';
if (complaintStatus == '0') {
Swal.fire({
title: 'Validation Error!',
text: 'Please select a valid complaint status.',
icon: 'warning',
confirmButtonText: 'OK'
});
return;
}
var formData = new FormData();
formData.append("ComplaintId", complaintId);
formData.append("Message", message);
formData.append("Status", complaintStatus);
var imageFile = $('#photo')[0].files[0];
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, '');
formData.append("Comp_Image", imageFile);
}
});
// Function to send the AJAX request to the backend
function updateComplaint(complaintId, message, status, compImage) {
$.ajax({
url: '/updateComplaint', // Adjust this to match your endpoint
url: '/updateComplaint',
type: 'POST',
data: {
ComplaintId: complaintId, // complaintId mapped from your backend
Message: message, // message field
Status: status, // status dropdown
Comp_Image: compImage // base64 image data
},
data: formData,
processData: false,
contentType: false,
success: function (response) {
// Display SweetAlert and redirect on 'OK'
Swal.fire({
title: 'Success!',
text: 'Complaint updated successfully.',
@ -508,25 +502,25 @@
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);
}
let errorMessage = xhr.responseText ? xhr.responseText : 'An error occurred while updating the complaint.';
Swal.fire({
title: 'Error!',
text: errorMessage,
icon: 'error',
confirmButtonText: 'OK'
});
}
});
});
});
</script>
</body>
</html>

275
src/main/resources/templates/checklistuser/checklistuser.html
View File

@ -1,275 +0,0 @@
<!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">
<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>
</head>
<body>
<!-- Insert the header fragment -->
<div th:insert="fragments/header :: headerFragment"></div>
<div class="container mt-4">
<!-- Screen Reader Button -->
<div class="row align-items-center justify-content-center mt-4">
<button id="screenReaderBtn" class="btn btn-info">Screen Reader</button>
</div>
<div class="mt-1">
<div class="row align-items-center justify-content-center">
<!--<button class="back-button" onclick="window.location.href='home';">← Back</button>-->
<h4 class="title" style="color: #414f69;">Check Availability Status</h4>
</div>
</div>
<!-- Card Section -->
<div class="card p-3" 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>
<div class="card mb-3">
<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 Mobile Number:
<input type="text" class="form-control" value="">
</div>
<div class="col-md-6">
Complainant Name:
<input type="text" class="form-control" value="">
</div>
<div class="col-md-6">
Complainant Email:
<input type="email" class="form-control" value="">
</div>
<div class="col-md-6">
Gender:
<select class="form-control">
<option value="0">Select Gender</option>
<option value="male">Male</option>
<option value="femlae">Female</option>
<option value="transgender">Transgender</option>
</select>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<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" class="form-control" value="Street Address">
</div>
<div class="col-md-4">
Complainant Zone:
<input type="text" class="form-control" value="Zone 12">
</div>
<div class="col-md-4">
Complainant Ward:
<input type="text" class="form-control" value="Ward 12">
</div>
<div class="col-md-4">
Complainant Area:
<input type="text" class="form-control" value="Chennai Central">
</div>
<div class="col-md-4">
Complainant Locality:
<input type="text" class="form-control" value="Periyamet">
</div>
</div>
</div>
</div>
<div class="card">
<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" value="Street Light">
</div>
<div class="col-md-4">
Complainant Sub-Type:
<input type="text" class="form-control" value="Mohamed Afridi">
</div>
<div class="col-md-4">
Complainant Title:
<input type="text" class="form-control" value="Male">
</div>
<div class="col-md-12">
Complainant Description:
<input type="text" class="form-control"
value="Street Light is not working. Kindly rectify it.">
</div>
</div>
</div>
</div>
</div>
<div class="card mb-3">
<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">Aug 24<br>7.00 pm</div>
<div class="col-md-8">Officer - AE Zone 15<br>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. In sit arcu aliquet ut dui egestas.</div>
<div class="col-md-2"><button class="btn btn-sm"
style="background-color: #414f69;color: white;">Redressed</button></div>
</div>
<div class="row mt-3">
<div class="col-md-2">Aug 25<br>10.00 am</div>
<div class="col-md-8">Citizen<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ullamcorper ullamcorper quis.</div>
<div class="col-md-2"><button class="btn btn-secondary btn-sm">Reopened</button></div>
</div>
<div class="row mt-3">
<div class="col-md-2">Aug 26<br>3.00 pm</div>
<div class="col-md-8">Officer - AE Zone 15<br>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. In sit arcu aliquet ut dui egestas.</div>
<div class="col-md-2"><button class="btn btn-sm"
style="background-color: #414f69;color: white;">Redressed</button></div>
</div>
</div>
</div>
<div class="card mb-3">
<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>
</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>
</div>
<div class="row">
<div class="col-md-12">
Complainant Locality:
<textarea class="form-control" id="othercomplaint-details" rows="3"
placeholder="Enter complaint details" maxlength="400"></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>
document.getElementById('screenReaderBtn').addEventListener('click', function() {
// Get the content of the page
const content = document.body.innerText; // You might want to filter or customize this
// Check if SpeechSynthesis is supported
if ('speechSynthesis' in window) {
// Create a new speech synthesis utterance
const utterance = new SpeechSynthesisUtterance(content);
// Set the voice, rate, pitch, and volume if needed
utterance.voice = speechSynthesis.getVoices().find(voice => voice.name === 'Google UK English Male'); // Example voice
utterance.rate = 1; // Speed of speech
utterance.pitch = 1; // Pitch of speech
utterance.volume = 1; // Volume of speech
// Speak the content
window.speechSynthesis.speak(utterance);
} else {
alert('Your browser does not support speech synthesis.');
}
});
</script>
</body>
</html>

685
src/main/resources/templates/officer/officercomplaint.html
View File

@ -1,685 +0,0 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Main Page</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">
<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>
body {
font-family: 'Lato', sans-serif;
}
.card {
border-radius: 15px;
border: none;
padding: 20px;
background-color: #f0f4ff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
.card-title {
font-size: 1.2rem;
font-weight: bold;
}
.card-text {
color: #666;
margin-bottom: 20px;
}
.progress {
height: 20px;
border-radius: 10px;
}
.progress-bar {
background-color: #414f69;
/* New color for the progress bar */
border-radius: 10px;
}
.form-row {
margin-bottom: 20px;
}
.form-step {
display: none;
}
.form-step.active {
display: block;
}
.container {
max-width: 100%;
}
/*css for step 3*/
.complaint-icons {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}
.complaint-icon {
text-align: center;
cursor: pointer;
}
.complaint-icon img {
width: 50px;
height: 50px;
}
/*complaints css*/
.complaint-fields {
display: none; /* Default hidden */
}
.complaint-fields.active {
display: block; /* Show when active */
}
/*complaints css*/
/*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 */
}
.back-button {
background: none;
border: none;
color: #000;
font-size: 16px;
cursor: pointer;
padding: 0;
margin-right: auto;
/* Align the button to the left */
}
.title {
text-align: center;
flex-grow: 1;
font-size: 24px;
font-weight: bold;
margin: 0;
}
/*css for map in step2*/
#map {
height: 300px;
width: 100%;
position: relative;
overflow: hidden;
max-width: 100%;
}
#search-container {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
width: 500px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
background-color: white;
border-radius: 4px;
padding: 0;
/* Removed extra padding to match the input width */
}
#search-box {
width: 100%;
/* Ensures the input takes up the entire width of the container */
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
/* Rounded corners matching the container */
box-sizing: border-box;
/* Makes sure padding is considered in width */
}
#suggestions {
border: 1px solid #ccc;
border-radius: 4px;
max-height: 200px;
overflow-y: auto;
margin-top: 5px;
background-color: white;
display: none;
width: 100%;
/* Matches the width of the container and input */
box-sizing: border-box;
/* Ensures the width includes borders and padding */
}
#suggestions ul {
list-style: none;
padding: 0;
margin: 0;
}
#suggestions ul li {
padding: 5px;
cursor: pointer;
}
#suggestions ul li:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<!-- Insert the header fragment -->
<div th:insert="fragments/header :: headerFragment"></div>
<!-- Progress Bar Section -->
<div class="container">
<div class="mt-1">
<div class="row align-items-center justify-content-center">
<button class="back-button" onclick="window.location.href='home';">← Back</button>
<h2 class="title">Registration of Complaint</h2>
</div>
</div>
<div class="card">
<h3>Instructions:</h3>
<p>Please fill your complaint details below and click the ‘Submit’ button at the bottom. You will be given a
Complaint Number upon submitting the complaint that you can use to track the complaint.</p>
</div>
<div class="container">
<!-- Card 1: Step 1 -->
<div class="card col-md-12 mb-3" id="step-1">
<div class="card-body">
<h5 class="card-title">1. Complaining Person's Details:</h5>
<div class="form-row">
<div class="col-md-4">
<label for="mobile">Mobile Number:</label>
<div class="input-group">
<input type="number" class="form-control" id="mobile"
placeholder="Enter your Mobile Number">
<div class="input-group-append">
<button type="button" id="getOtpBtn" class="btn btn-primary"
style="background-color: #414f69;">Get OTP</button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="input-group" id="otpSection" style="display: none;">
<label for="verify">Verify OTP:</label>
<div class="input-group">
<input type="number" class="form-control" id="otp" placeholder="Enter OTP">
<div class="input-group-append">
<button type="button" id="verifyBtn" class="btn btn-success">Verify</button>
</div>
</div>
</div>
</div>
</div>
<div class="form-row mt-3">
<div class="col-md-4">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="col-md-4">
<label for="gender">Gender/பாலினம்:<span class="required">*</span></label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label>
</div>
<div class="radio-item">
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<div class="radio-item">
<input type="radio" id="transgender" name="gender" value="transgender">
<label for="transgender">Transgender</label>
</div>
</div>
</div>
<div class="col-md-4">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
</div>
</div>
</div>
<!-- Card 2: Step 2 -->
<div class="card col-md-12 mb-3" id="step-2">
<div class="card-body">
<h5 class="card-title">2. Complaint Location Details:</h5>
<div class="form-row">
<div class="col-md-12">
<div id="map"></div>
<div id="search-container">
<input type="text" id="search-box" placeholder="Search for a location...">
<div id="suggestions"></div>
</div>
<label for="street">Street:</label>
<input type="text" class="form-control" id="street">
</div>
</div>
</div>
</div>
<!-- Card 3: Step 3 -->
<div class="card col-md-12 mb-3" id="step-3">
<div class="card-body">
<h5 class="card-title">3. Complaint Type:</h5>
<div class="complaint-icons">
<div class="complaint-icon" data-type="specific">
<img src="images/road.png" alt="Pothole">
<p>Pothole</p>
</div>
<div class="complaint-icon" data-type="specific">
<img src="images/recycle.png" alt="garbage">
<p>Garbage</p>
</div>
<div class="complaint-icon" data-type="specific">
<img src="images/waste-bin.png" alt="broken-bin">
<p>Broken-Bin</p>
</div>
<div class="complaint-icon" data-type="specific">
<img src="images/street-lamp.png" alt="StreetLight">
<p>StreetLight</p>
</div>
<div class="complaint-icon" data-type="specific">
<img src="images/portable-bathroom.png" alt="public-toilet">
<p>Public Toilet</p>
</div>
<div class="complaint-icon" data-type="specific">
<img src="images/mosquito.png" alt="mosquito">
<p>Mosquito Menace</p>
</div>
<div class="complaint-icon" data-type="specific">
<img src="images/tsunami.png" alt="waterstag">
<p>WaterStagnation</p>
</div>
<div class="complaint-icon" data-type="specific">
<img src="images/sewage.png" alt="sewage">
<p>Storm Water Drains</p>
</div>
<div class="complaint-icon" data-type="specific">
<img src="images/dog.png" alt="dog">
<p>Street Dog</p>
</div>
<div class="complaint-icon" data-type="specific">
<img src="images/bad-weather.png" alt="weather">
<p>Tree Fallen</p>
</div>
<div class="complaint-icon" data-type="others">
<img src="images/menu.png" alt="Others">
<p>Others</p>
</div>
</div>
<div class="complaint-fields active" id="specific-fields">
<div class="form-row mt-3">
<div class="col-md-6">
<label for="complaint-title">Complaint Title:</label>
<input type="text" class="form-control" id="complaint-title"
placeholder="Enter complaint title">
</div>
<div class="col-md-6">
<label for="othercomplaint-details">Details of Complaint:</label>
<textarea class="form-control" id="othercomplaint-details" rows="3"
placeholder="Enter complaint details" maxlength="400"></textarea>
</div>
</div>
<div class="form-row mt-3">
<div class="col-md-6">
<label for="upload">Upload Photo Or Video:</label>
<input type="file" class="form-control" id="upload">
</div>
</div>
</div>
<div class="complaint-fields" id="others-fields" style="display:none;">
<div class="form-row mt-3">
<div class="col-md-4">
<label for="type">Type:</label>
<select class="form-control" id="type">
<option value="">Please Select</option>
</select>
</div>
<div class="col-md-4">
<label for="sub-type">Sub-Type:</label>
<select class="form-control" id="sub-type">
<option value="">Select complaint</option>
</select>
</div>
<div class="col-md-4">
<label for="uploadothers">Upload Photo or Video:</label>
<input type="file" class="form-control" id="uploadothers" accept="image/*,video/*">
</div>
</div>
<div class="form-row mt-3">
<div class="col-md-6">
<label for="othercomplaint-details">Details of Complaint:</label>
<textarea class="form-control" id="othercomplaint-details" rows="3"
placeholder="Enter complaint details" maxlength="400"></textarea>
</div>
</div>
</div>
</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>
<!-- Font Awesome for Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- Progress Bar Script -->
<script>
let currentStep = 1;
function showStep(step) {
$('.form-step').removeClass('active');
$('#step-' + step).addClass('active');
updateProgressBar(step);
}
function nextStep() {
if (currentStep < 4) {
currentStep++;
showStep(currentStep);
}
}
function prevStep() {
if (currentStep > 1) {
currentStep--;
showStep(currentStep);
}
}
function updateProgressBar(step) {
const progress = (step / 4) * 100;
$('.progress-bar').css('width', progress + '%').attr('aria-valuenow', progress);
}
$(document).ready(function () {
showStep(currentStep);
});
//for step3 onclick function
$(document).ready(function () {
$('.complaint-icon').click(function () {
const type = $(this).data('type');
const title = $(this).find('p').text().trim(); // Get the icon name
// Hide all fields initially
$('.complaint-fields').removeClass('active').hide();
if (type === 'specific') {
$('#specific-fields').addClass('active').show();
$('#complaint-title').val(title); // Set the complaint title to the icon name
} else if (type === 'others') {
$('#others-fields').addClass('active').show();
$('#complaint-title').val(''); // Clear the complaint title for 'Others'
}
});
});
//for complaint group and complainttype wise options dropdown api
$(document).ready(function () {
const $type = $('#type');
const $subType = $('#sub-type');
$subType.prop('disabled', true);
// Fetch and populate the Type dropdown
$.ajax({
url: '/api/getComplaintCategories',
method: 'GET',
success: function (response) {
const data = typeof response === 'string' ? JSON.parse(response) : response;
//console.log('Response:', response); // Log the response to verify
let optionsHtml = '<option value="">Please Select</option>';
data.ComplaintCategoryListResult.forEach(function (group) {
optionsHtml += `<option value="${group.groupid}">${group.groupname}</option>`;
});
$type.html(optionsHtml);
},
error: function (error) {
console.error('Error fetching complaint categories:', error);
}
});
// Handle Type dropdown change
$type.change(function () {
const selectedType = $(this).val();
$subType.empty().append('<option value="">Select complaint</option>');
if (selectedType) {
$.ajax({
url: `/api/getComplaintSubTypes?groupId=${selectedType}`,
method: 'GET',
success: function (response) {
const data = typeof response === 'string' ? JSON.parse(response) : response;
const selectedGroup = data.ComplaintCategoryListResult[0];
if (selectedGroup && selectedGroup.group) {
$subType.prop('disabled', false);
selectedGroup.group.forEach(function (complaint) {
$subType.append(`<option value="${complaint.id}">${complaint.complaintname}</option>`);
});
} else {
$subType.prop('disabled', true);
}
},
error: function (error) {
console.error('Error fetching sub-types:', error);
$subType.prop('disabled', true);
}
});
} else {
$subType.prop('disabled', true);
}
});
});
//for step 1 otp input box
document.getElementById('getOtpBtn').addEventListener('click', function () {
document.getElementById('otpSection').style.display = 'flex';
});
//for sweet alert
function showSuccessAlert() {
Swal.fire({
icon: 'success',
title: 'Complaint Registration Success',
text: 'Complaint Number 123456. Use this Number for Complaint Status Check.',
confirmButtonText: 'Back to Home',
confirmButtonColor: '#3085d6',
}).then((result) => {
if (result.isConfirmed) {
window.location.href = 'home';
}
});
}
//script for map in step2
// Script For Map
function initializeMap() {
var map = L.map('map', {attributionControl: false}).setView([11.1271, 78.6569], 7);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attributionControl: false,
}).addTo(map);
var currentMarker = null;
map.on('click', function (e) {
var lat = e.latlng.lat;
var lng = e.latlng.lng;
if (currentMarker) {
map.removeLayer(currentMarker);
}
currentMarker = L.marker([lat, lng]).addTo(map);
fetchLocationInfo(lat, lng, currentMarker);
});
document.getElementById('search-box').addEventListener('input', function () {
var query = this.value.trim();
if (query.length > 2) {
fetchSuggestions(query);
} else {
document.getElementById('suggestions').style.display = 'none';
}
});
document.getElementById('suggestions').addEventListener('click', function (e) {
if (e.target.tagName === 'LI') {
var latlng = JSON.parse(e.target.dataset.latlng);
map.setView(latlng, 13);
if (currentMarker) {
map.removeLayer(currentMarker);
}
currentMarker = L.marker(latlng).addTo(map);
fetchLocationInfo(latlng[0], latlng[1], currentMarker);
// Clear the search box value
document.getElementById('search-box').value = '';
// Hide the suggestions
document.getElementById('suggestions').style.display = 'none';
}
});
}
function fetchSuggestions(query) {
fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${query}&limit=5`)
.then(response => response.json())
.then(data => {
var suggestions = document.getElementById('suggestions');
suggestions.innerHTML = '';
if (data.length > 0) {
suggestions.style.display = 'block';
var ul = document.createElement('ul');
data.forEach(function (result) {
var li = document.createElement('li');
li.textContent = result.display_name;
li.dataset.latlng = JSON.stringify([result.lat, result.lon]);
ul.appendChild(li);
});
suggestions.appendChild(ul);
} else {
suggestions.style.display = 'none';
}
})
.catch(error => console.error('Error fetching suggestions:', error));
}
function fetchLocationInfo(lat, lng, marker) {
fetch(`https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`)
.then(response => response.json())
.then(data => {
const zoneMatch = data.display_name.match(/Zone (\d+)/);
const divisionMatch = data.display_name.match(/Division (\d+)/);
const wardMatch = data.display_name.match(/Ward (\d+)/);
const zone = zoneMatch ? `Zone: ${zoneMatch[1]}` : '';
const division = divisionMatch ? `Division: ${divisionMatch[1]}` : '';
const ward = wardMatch ? `Ward: ${wardMatch[1]}` : '';
const firstCommaIndex = data.display_name.indexOf(',');
const address = firstCommaIndex !== -1
? `Address: ${data.display_name.substring(firstCommaIndex + 1).trim()}`
: '';
const place1 = firstCommaIndex !== -1
? `Place: ${data.display_name.substring(0, firstCommaIndex).trim()}`
: `Place: ${data.display_name.trim()}`;
const place2 = firstCommaIndex !== -1
? data.display_name.substring(0, firstCommaIndex).trim()
: data.display_name.trim();
document.getElementById('street').value = place2;
let result = `${place1}<br>Latitude: ${lat}<br>Longitude: ${lng}<br>${address}`;
if (zone) {
result += `<br>${zone}`;
}
if (division) {
result += `<br>${division}`;
}
if (ward) {
result += `<br>${ward}`;
}
marker.bindTooltip(result, {permanent: false, direction: 'top'}).openTooltip();
})
.catch(error => console.error('Error fetching location data:', error));
}
document.addEventListener('DOMContentLoaded', function () {
setTimeout(initializeMap, 2000); // Delay map initialization by 2000 milliseconds (2 seconds)
});
</script>
</body>
</html>

217
src/main/resources/templates/staff/appoinment.html
View File

@ -1,217 +0,0 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Create Order</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">
<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>
<!-- Include Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<style>
label {
font-weight: 700;
color: #2d5263;
}
/*for uploading fields*/
.custom-file-upload {
position: relative;
display: flex;
align-items: center;
border: 1px solid #d9dde4;
border-radius: 5px;
padding: 5px;
background-color: #f9fafb;
cursor: pointer;
margin-top: 5px;
}
.custom-file-upload input[type="file"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.custom-file-upload label {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.upload-text {
color: #a6adb5;
font-weight: 700;
}
.upload-icon i {
color: #a6adb5;
font-size: 18px;
}
.file-name {
margin-left: 10px;
color: #414f69;
font-size: 14px;
}
</style>
</head>
<body>
<div class="row align-items-center justify-content-center"
style="color: white;background-color:#414f69 ;padding: 10px;">
<h3 class="title resizable-content">Create Order</h3>
</div>
<div class="container mt-4">
<div class="mt-1">
</div>
<!-- Card Content -->
<div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
<!-- Error message container -->
<div id="errorMessages" style="background-color: #ff6666;color: white;"></div>
<!-- Card Content -->
<div class="card mb-3 resizable-content">
<div class="card-header text-white" style="background-color: #414f69;">Order Details</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<label>Order Number:</label>
<input type="text" class="form-control" id="orderNumber" placeholder="Enter Order Number">
</div>
<div class="col-md-6">
<label>Order Date:</label>
<input type="date" class="form-control" id="orderDate">
</div>
<div class="col-md-6">
<label>Order Title:</label>
<input type="text" class="form-control" id="orderTitle" placeholder="Enter Order Title">
</div>
<div class="col-md-6">
<label>Number Of Staff Required:</label>
<input type="number" class="form-control" id="staffRequired"
placeholder="Enter Staff Required...">
</div>
<div class="col-md-6">
<label>Order Description:</label>
<textarea class="form-control" id="details" rows="3" placeholder="description..."
maxlength="400"></textarea>
</div>
<div class="col-md-6">
<label>Order Document:</label>
<div class="custom-file-upload">
<input type="file" id="file-upload" class="form-control" onchange="displayFileName()">
<label for="file-upload" id="file-label">
<span class="upload-text" id="upload-text">Upload Order Document</span>
<span class="upload-icon">
<i class="fas fa-file-upload"></i>
</span>
</label>
<span id="file-name" class="file-name"></span>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-sm" style="background-color: #414f69; color: white;" id="createorder">Create
Order</button>
</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>
<!-- JavaScript to handle button clicks -->
<script>
function displayFileName() {
const fileInput = document.getElementById('file-upload');
const fileNameSpan = document.getElementById('file-name');
const fileName = fileInput.files[0].name;
fileNameSpan.textContent = fileName;
}
$(document).ready(function () {
$('#createorder').click(function () {
let isValid = true;
let errorMessages = [];
// Clear previous error messages
$('#errorMessages').addClass('d-none').html('');
// Validate Order Number
if ($('#orderNumber').val().trim() == '') {
errorMessages.push('Enter the Order Number.');
isValid = false;
}
// Validate Order Date
if ($('#orderDate').val().trim() === '') {
errorMessages.push('Enter the Order Date.');
isValid = false;
}
// Validate Order Title
if ($('#orderTitle').val().trim() === '') {
errorMessages.push('Enter the Order Title.');
isValid = false;
}
// Validate Number Of Staff Required
if ($('#staffRequired').val().trim() === '') {
errorMessages.push('Enter the Number Of Staff Required.');
isValid = false;
}
// Validate Order Description
if ($('#details').val().trim() === '') {
errorMessages.push('Enter the Order Description.');
isValid = false;
}
// Validate Order Document
if ($('#file-upload').val().trim() === '') {
errorMessages.push('Upload the Order Document.');
isValid = false;
}
// Display error messages if any
if (!isValid) {
$('#errorMessages').removeClass('d-none').html(errorMessages.join('<br>'));
} else {
Swal.fire({
title: 'Success!',
text: 'Order Created Successfully',
icon: 'success',
confirmButtonText: 'OK',
background: '#f5f5f5',
confirmButtonColor: '#414f69'
});
}
});
});
</script>
</body>
</html>

251
src/main/resources/templates/staff/appoinmentscreen.html
View File

@ -1,251 +0,0 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Appoinment Screen</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">
<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" />
<!-- Include Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>
label {
font-weight: 700;
color: #2d5263;
}
/*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 */
}
/*for check box*/
.checkbox-label {
display: block;
margin-bottom: 10px;
font-size: 16px;
}
/*for file uploading*/
.custom-file-upload {
position: relative;
display: flex;
align-items: center;
border: 1px solid #d9dde4;
border-radius: 5px;
padding: 5px;
background-color: #f9fafb;
cursor: pointer;
margin-top: 5px;
}
.custom-file-upload input[type="file"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.custom-file-upload label {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.upload-icon i {
color: #a6adb5;
font-size: 18px;
}
.file-name {
margin-left: 10px;
color: #414f69;
font-size: 14px;
}
#upload-text {
color: #a7adb5;
}
.order-no {
font-size: 14px;
color: lightSkyBlue;
}
.user-icon {
margin-right: 5px;
color: #414f69;
}
</style>
</head>
<body>
<div class="row align-items-center justify-content-center" style="color: white;background-color:#414f69 ;padding: 10px;">
<h3 class="title resizable-content" >Appoinment Screen</h3>
</div>
<div class="container mt-4">
<!-- Card Section -->
<div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
<!-- Add the resizable-content class to the card sections -->
<div class="card mb-3 resizable-content">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<label>Select Order</label>
<select class="form-control">
<option value="0">Select Order</option>
<option value="1">Order 1</option>
<option value="2">Order 2</option>
</select>
</div>
</div>
</div>
</div>
<div class="card mb-3 resizable-content">
<div class="card-body">
<div class="row" style="font-weight: bolder;">
<div class="col-md-6">
<label >Order No: 166565</label>
</div>
</div>
<div class="row" style="font-weight: bolder;">
<div class="col-md-6">
<p class="order-no">16 June 2024</p>
</div>
<div class="col-md-6">
<p><i class="fas fa-user user-icon"></i>85/100</p>
</div>
</div>
<div class="row" >
<div class="col-md-6">
<label>Order Type:</label>
</div>
</div>
<div class="row">
<div class="col-md-6" style="font-weight: bolder;">
<p class="order-no">Order Description Long text</p>
</div>
</div>
</div>
</div>
<div class="card mb-3 resizable-content">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<label>Assign Staff</label>
<select class="form-control">
<option value="0">Select Staff</option>
<option value="1">staff 1</option>
<option value="2">staff 2</option>
</select>
</div>
<br><br>
<div class="col-md-12" style="padding: 14px;">
<input type="text" class="form-control" value="" placeholder="Enter the Staff Name...">
<br>
<input type="text" class="form-control" value="" placeholder="Enter the Staff Name...">
</div>
<br>
<div class="col-md-12">
<label>Date Of Appoinment</label>
<input type="date" class="form-control" value="">
</div>
</div>
</div>
</div>
<button class="btn btn-sm" style="background-color: #414f69; color: white;" id="addAppointmentBtn">Add Appointment</button>
</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>
<!-- JavaScript to handle button clicks -->
<script>
$(document).ready(function () {
$('#addAppointmentBtn').click(function () {
Swal.fire({
title: 'Success!',
text: 'Your appointment has been added',
icon: 'success',
confirmButtonText: 'OK',
background: '#f5f5f5',
confirmButtonColor: '#414f69'
});
});
});
</script>
</body>
</html>

230
src/main/resources/templates/staff/createorder.html
View File

@ -1,230 +0,0 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Create Order</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">
<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>
<!-- Include Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<style>
label {
font-weight: 700;
color: #2d5263;
}
/*for uploading fields*/
.custom-file-upload {
position: relative;
display: flex;
align-items: center;
border: 1px solid #d9dde4;
border-radius: 5px;
padding: 5px;
background-color: #f9fafb;
cursor: pointer;
margin-top: 5px;
}
.custom-file-upload input[type="file"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.custom-file-upload label {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.upload-text {
color: #a6adb5;
font-weight: 700;
}
.upload-icon i {
color: #a6adb5;
font-size: 18px;
}
.file-name {
margin-left: 10px;
color: #414f69;
font-size: 14px;
}
</style>
</head>
<body>
<div class="row align-items-center justify-content-center"
style="color: white;background-color:#414f69 ;padding: 10px;">
<h3 class="title resizable-content">Create Order</h3>
</div>
<div class="container mt-4">
<div class="mt-1">
</div>
<!-- Card Section -->
<div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
<!-- 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;">Order Details
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<label>Order Number:</label>
<input type="text" class="form-control" id="orderNumber" placeholder="Enter Order Number">
<span class="text-danger" id="orderNumberError"></span> <!-- Validation message -->
</div>
<div class="col-md-6">
<label>Order Date:</label>
<input type="date" class="form-control" id="orderDate">
<span class="text-danger" id="orderDateError"></span>
</div>
<div class="col-md-6">
<label>Order Title:</label>
<input type="text" class="form-control" id="orderTitle" placeholder="Enter Order Title">
<span class="text-danger" id="orderTitleError"></span>
</div>
<div class="col-md-6">
<label>Number Of Staff Required:</label>
<input type="number" class="form-control" id="staffRequired"
placeholder="Enter Staff Required...">
<span class="text-danger" id="staffRequiredError"></span>
</div>
<div class="col-md-6">
<label>Order Description:</label>
<textarea class="form-control" id="details" rows="3" placeholder="description..."
maxlength="400"></textarea>
<span class="text-danger" id="detailsError"></span>
</div>
<div class="col-md-6">
<label>Order Document:</label>
<div class="custom-file-upload">
<input type="file" id="file-upload" class="form-control" onchange="displayFileName()">
<label for="file-upload" id="file-label">
<span class="upload-text" id="upload-text">Upload Order Document</span>
<span class="upload-icon">
<i class="fas fa-file-upload"></i>
</span>
</label>
<span id="file-name" class="file-name"></span>
<span class="text-danger" id="fileUploadError"></span>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-sm" style="background-color: #414f69; color: white;" id="createorder">Create
Order</button>
</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>
<!-- JavaScript to handle button clicks -->
<script>
function displayFileName() {
const fileInput = document.getElementById('file-upload');
const fileNameSpan = document.getElementById('file-name');
const fileName = fileInput.files[0].name;
fileNameSpan.textContent = fileName;
}
$(document).ready(function () {
$('#createorder').click(function () {
let isValid = true;
// Clear previous error messages
$('.text-danger').text('');
// Validate Order Number
if ($('#orderNumber').val().trim() == '') {
$('#orderNumberError').text('Enter the Order Number.');
isValid = false;
}
// Validate Order Date
if ($('#orderDate').val().trim() === '') {
$('#orderDateError').text('Enter the Order Date.');
isValid = false;
}
// Validate Order Title
if ($('#orderTitle').val().trim() === '') {
$('#orderTitleError').text('Enter the Order Title.');
isValid = false;
}
// Validate Number Of Staff Required
if ($('#staffRequired').val().trim() === '') {
$('#staffRequiredError').text('Enter the Number Of Staff Required.');
isValid = false;
}
// Validate Order Description
if ($('#details').val().trim() === '') {
$('#detailsError').text('Enter the Order Description.');
isValid = false;
}
// Validate Order Document
if ($('#file-upload').val().trim() === '') {
$('#fileUploadError').text('Upload the Order Document.');
isValid = false;
}
// If all fields are valid, show success message
if (isValid) {
Swal.fire({
title: 'Success!',
text: 'Order Created Successfully',
icon: 'success',
confirmButtonText: 'OK',
background: '#f5f5f5',
confirmButtonColor: '#414f69'
});
}
});
});
</script>
</body>
</html>

186
src/main/resources/templates/staff/schemegroup.html
View File

@ -1,186 +0,0 @@
<!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">
<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>
</head>
<body>
<!-- Insert the header fragment -->
<div th:insert="fragments/header :: headerFragment"></div>
<div class="mt-1">
<div class="row align-items-center justify-content-center">
<h4 class="title" style="color: #414f69;">Acknowledgement</h4>
</div>
</div>
<!-- Card Section -->
<div class="card p-3" style="margin-bottom: 8px;color: #414f69;">
<div class="row">
<!-- First two cards side by side -->
<div class="col-md-6">
<div class="card mb-3">
<div class="card-header text-white" style="background-color: #414f69;">
1. User Details
</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>Name:</td>
<td>Yogesh</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Complainant Name:</td>
<td>John Doe</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Complainant Email:</td>
<td>john.doe@example.com</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Gender:</td>
<td>Male</td> <!-- Replace this value with dynamic data -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card ">
<div class="card-header text-white" style="background-color: #414f69;">
2. Complaint Location Details
</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>Name:</td>
<td>Yogesh</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Complainant Name:</td>
<td>John Doe</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Complainant Email:</td>
<td>john.doe@example.com</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Gender:</td>
<td>Male</td> <!-- Replace this value with dynamic data -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Third card full width -->
<div class="row mb-3">
<div class="col-md-12">
<div class="card">
<div class="card-header text-white" style="background-color: #414f69;">
3. Complaint Type
</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>Name:</td>
<td>Yogesh</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Complainant Name:</td>
<td>John Doe</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Complainant Email:</td>
<td>john.doe@example.com</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Gender:</td>
<td>Male</td> <!-- Replace this value with dynamic data -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header text-white" style="background-color: #414f69;">
3. Complaint Type
</div>
<div class="card-body">
<table class="table">
<tbody>
<tr>
<td>Name:</td>
<td>Yogesh</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Complainant Name:</td>
<td>John Doe</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Complainant Email:</td>
<td>john.doe@example.com</td> <!-- Replace this value with dynamic data -->
</tr>
<tr>
<td>Gender:</td>
<td>Male</td> <!-- Replace this value with dynamic data -->
</tr>
</tbody>
</table>
</div>
</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>
</body>
</html>

316
src/main/resources/templates/staff/staffenrollment.html
View File

@ -1,316 +0,0 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Staff Enrollment</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">
<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" />
<!-- Include Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<style>
label {
font-weight: 700;
color: #2d5263;
}
/*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 */
}
/*for check box*/
.checkbox-label {
display: block;
margin-bottom: 10px;
font-size: 16px;
}
/*for file uploading*/
.custom-file-upload {
position: relative;
display: flex;
align-items: center;
border: 1px solid #d9dde4;
border-radius: 5px;
padding: 5px;
background-color: #f9fafb;
cursor: pointer;
margin-top: 5px;
}
.custom-file-upload input[type="file"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.custom-file-upload label {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
}
.upload-icon i {
color: #a6adb5;
font-size: 18px;
}
.file-name {
margin-left: 10px;
color: #414f69;
font-size: 14px;
}
#upload-text {
color: #a7adb5;
}
</style>
</head>
<body>
<div class="row align-items-center justify-content-center"
style="color: white;background-color:#414f69 ;padding: 10px;">
<h3 class="title resizable-content">Staff Enrollment</h3>
</div>
<div class="container mt-4">
<!-- Card Section -->
<div class="card p-3 resizable-content" style="margin-bottom: 8px;color: #414f69;">
<!-- 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;">Personal Information's
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<label>Name:</label>
<input type="text" class="form-control" value="" placeholder="Enter Name...">
</div>
<div class="col-md-6">
<label>Phone number:</label>
<input type="number" class="form-control" value="" placeholder="Enter the Phone Number...">
</div>
<div class="col-md-6">
<label>Gender:</label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label>
</div>
<div class="radio-item">
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<div class="radio-item">
<input type="radio" id="transgender" name="gender" value="transgender">
<label for="transgender">Transgender</label>
</div>
</div>
</div>
<div class="col-md-6">
<label>Date Of Birth:</label>
<input type="date" class="form-control" value="" placeholder="">
</div>
<div class="col-md-6">
<label>Education Qualification</label>
<select class="form-control">
<option value="0">Select Qualification</option>
<option value="1">B.E</option>
<option value="2">Bcom</option>
</select>
</div>
<div class="col-md-6">
<label>Scheme Group:</label>
<select class="form-control">
<option value="0">Select Scheme Group</option>
<option value="1"> Scheme Group 1</option>
<option value="2"> Scheme Group 2</option>
</select>
</div>
<div class="col-md-12">
<label>Additional Skills:</label>
<div class="row">
<div class="col-md-3">
<div class="form-check checkbox-label">
<input class="form-check-input" type="checkbox" id="typeing" name="skills"
value="typeing">
<label class="form-check-label" for="typeing">
Typing
</label>
</div>
</div>
<div class="col-md-3">
<div class="form-check checkbox-label">
<input class="form-check-input" type="checkbox" id="shortHand" name="skills"
value="shortHand">
<label class="form-check-label" for="shortHand">
ShortHand
</label>
</div>
</div>
<div class="col-md-3">
<div class="form-check checkbox-label">
<input class="form-check-input" type="checkbox" id="dataentry" name="skills"
value="dataentry">
<label class="form-check-label" for="dataentry">
DataEntry
</label>
</div>
</div>
<div class="col-md-3">
<div class="form-check checkbox-label">
<input class="form-check-input" type="checkbox" id="others" name="skills"
value="others">
<label class="form-check-label" for="others">
Others
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<label>Proof Documents:</label>
<div class="row">
<!-- First File Upload -->
<div class="col-md-6">
<div class="custom-file-upload">
<input type="file" id="file-upload-1" class="form-control"
onchange="displayFileName('file-upload-1', 'file-name-1')">
<label for="file-upload-1" id="file-label-1">
<span class="upload-text" id="upload-text">Upload Aadhar Card</span>
<span class="upload-icon">
<i class="fas fa-file-upload"></i>
</span>
</label>
<span id="file-name-1" class="file-name"></span>
</div>
</div>
<!-- Second File Upload -->
<div class="col-md-6">
<div class="custom-file-upload">
<input type="file" id="file-upload-2" class="form-control"
onchange="displayFileName('file-upload-2', 'file-name-2')">
<label for="file-upload-2" id="file-label-2">
<span class="upload-text" id="upload-text">Upload Bank Passbook</span>
<span class="upload-icon">
<i class="fas fa-file-upload"></i>
</span>
</label>
<span id="file-name-2" class="file-name"></span>
</div>
</div>
<!-- Third File Upload -->
<div class="col-md-6">
<div class="custom-file-upload">
<input type="file" id="file-upload-3" class="form-control"
onchange="displayFileName('file-upload-3', 'file-name-3')">
<label for="file-upload-3" id="file-label-3">
<span class="upload-text" id="upload-text">Upload Ration Casd</span>
<span class="upload-icon">
<i class="fas fa-file-upload"></i>
</span>
</label>
<span id="file-name-3" class="file-name"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-sm" style="background-color: #414f69;color: white;" id="staffenroll">Enroll
Staff</button>
</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>
<!-- JavaScript to handle button clicks -->
<script>
function displayFileName(inputId, outputId) {
const fileInput = document.getElementById(inputId);
const fileNameSpan = document.getElementById(outputId);
const fileName = fileInput.files[0]?.name || 'No file chosen';
fileNameSpan.textContent = fileName;
}
$(document).ready(function () {
$('#staffenroll').click(function () {
Swal.fire({
title: 'Success!',
text: 'Staff Enrolled Successfully',
icon: 'success',
confirmButtonText: 'OK',
background: '#f5f5f5',
confirmButtonColor: '#414f69'
});
});
});
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save