hariprasaths
/
green_committe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

emhancement for treee pruning module

master
AJITHKUMAR12 3 months ago
parent
023a7f57aa
commit
2afa5fbcf0
1 changed files with 1274 additions and 1088 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. 244
      src/main/resources/templates/modules/public/form.html

244
src/main/resources/templates/modules/public/form.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>GCC Green Committee</title>
@ -53,7 +54,8 @@
padding: 10px;
display: none;
flex-direction: column;
z-index: 1000; /* Add z-index to bring the menu above other elements */
z-index: 1000;
/* Add z-index to bring the menu above other elements */
}
.menu-dropdown a {
@ -84,9 +86,11 @@
.menu-dropdown {
right: 0;
left: 0;
z-index: 1000; /* Add z-index to bring the menu above other elements */
z-index: 1000;
/* Add z-index to bring the menu above other elements */
}
}
/*css for map in step2*/
#googleMap {
height: 300px;
@ -163,9 +167,11 @@
#suggestions ul li:hover {
background-color: #f0f0f0;
}
.multi-select-dropdown {
position: relative;
}
.dropdown-checkbox-menu {
position: absolute;
background: #fff;
@ -178,6 +184,7 @@
padding: 10px;
border-radius: 5px;
}
.otp-input-box {
/*display: flex;
justify-content: space-between;*/
@ -294,15 +301,15 @@ textarea.form-control {
.row {
row-gap: 15px;
}
#sendOtpButton {
margin-top: 10px !important;
}
}
</style>
</head>
<body style="background-color: #f1f3f4;">
<!-- Header Start-->
@ -345,21 +352,28 @@ textarea.form-control {
<div class="p-4">
<form id="publicform" enctype="multipart/form-data">
<div class="section-header text-center"><h5>GREEN COMMITTEE CITIZEN FORM (PUBLIC)</h5></div>
<div class="section-header text-center">
<h5>GREEN COMMITTEE CITIZEN FORM (PUBLIC)</h5>
</div>
<div class="row mb-3 mt-2">
<div class="col-md-4">
<label class="form-label">Petitioner Name<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="pname" name="name" oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" placeholder="Enter Name" required>
<input type="text" class="form-control" id="pname" name="name"
oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" placeholder="Enter Name"
required>
</div>
<div class="col-md-3">
<label class="form-label">Mobile Number<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="mobile_no" name="mobile_no" oninput="validatePhoneNumber(this)" placeholder="Enter Mobile Number" required>
<input type="text" class="form-control" id="mobile_no" name="mobile_no"
oninput="validatePhoneNumber(this)" placeholder="Enter Mobile Number" required>
</div>
<div class="col-md-2" id="otpbeforeverified">
<button type="button" class="btn btn-primary" id="sendOtpButton" style="margin-top: 32px;">Send OTP</button>
<button type="button" class="btn btn-primary" id="sendOtpButton" style="margin-top: 32px;">Send
OTP</button>
</div>
<div class="col-md-2" id="otpafterverified" style="display: none;">
<i class="fa-solid fa-circle-check"style="margin-top: 40px;font-size: x-large;color: green;"></i>
<i class="fa-solid fa-circle-check"
style="margin-top: 40px;font-size: x-large;color: green;"></i>
</div>
</div>
@ -371,8 +385,10 @@ textarea.form-control {
<input type="radio" name="gender" value="T" class="ms-3 ml-3"> Transgender
</div>
<div class="col-md-8">
<label class="form-label">Tree Land Location (Also click the street in Map)<span class="text-danger">*</span></label>
<textarea class="form-control" id="address" name="address" maxlength="255" placeholder="Type Tree Address Here" required ></textarea>
<label class="form-label">Tree Land Location (Also click the street in Map)<span
class="text-danger">*</span></label>
<textarea class="form-control" id="address" name="address" maxlength="255"
placeholder="Type Tree Address Here" required></textarea>
</div>
</div>
<!-- <div class="row mb-3">
@ -420,20 +436,77 @@ textarea.form-control {
</div>
<div class="row mb-3">
<!-- <div class="row mb-3">
<div class="col-md-4">
<label class="form-label">Details of Complaint<span class="text-danger">*</span></label>
<!-- Dropdown clickable box -->
<div class="multi-select-dropdown">
<div id="dropdownToggle" class="form-control" style="cursor:pointer;" required>
Select Options
</div>
<small class="text-danger">
<strong>Note:</strong> Only one complaint can be selected.
</small>
<!-- Checkbox list appears here -->
<div id="compnature_checkbox_list" class="dropdown-checkbox-menu"></div>
</div>
</div>
</div>-->
<div class="row mb-3">
<!-- Left Side -->
<div class="col-md-4">
<label class="form-label">
Details of Complaint<span class="text-danger">*</span>
</label>
<select id="complaintDropdown" class="form-control" required>
<option value="">Select Complaint</option>
</select>
<div class="text-danger mt-2">
<strong>Note:</strong> Only one complaint can be selected.
</div>
<!-- <div class="multi-select-dropdown">
<div id="dropdownToggle" class="form-control" style="cursor:pointer;" required>
Select Options
</div>
<div class="text-danger mt-2">
<strong>Note:</strong> Only one complaint can be selected.
</div>-->
<!-- <small class="text-danger">
<strong>Note:</strong> Only one complaint can be selected.
</small>-->
<!--- <div id="compnature_checkbox_list" class="dropdown-checkbox-menu"></div>
</div>-->
</div>
<!-- Right Side -->
<div class="col-md-8">
<div class="alert alert-info mb-0 py-2">
<strong>Instructions:</strong><br>
<strong>NOTE: </strong>For tree pruning complaints, please raise your complaint through the
PGR portal
<strong>Complaint Type:</strong> Park and Playground
<br>
<strong>Complaint Sub-Type:</strong> Obstruction of Trees
<br>
<a href="https://gccservices.in/pgr/registercomplaints" target="_blank">
Click here to raise the complaint
</a>
</div>
</div>
</div>
<!-- Dynamic input rows -->
@ -442,24 +515,28 @@ textarea.form-control {
<div class="row mb-3">
<div class="col-md-12">
<label class="form-label">Remarks<span class="text-danger">*</span></label>
<textarea class="form-control" id="remarks" name="remarks" maxlength="255" placeholder="Enter Remarks" required></textarea>
<textarea class="form-control" id="remarks" name="remarks" maxlength="255"
placeholder="Enter Remarks" required></textarea>
</div>
</div>
<div class="row mb-3" id="img_container">
<div class="col-md-6">
<label class="form-label">Upload Image 1 (jpg/jpeg)<span class="text-danger">*</span></label>
<input type="file" class="form-control" id="c1image" accept=".jpg,.jpeg," name="c1image" required="required">
<input type="file" class="form-control" id="c1image" accept=".jpg,.jpeg," name="c1image"
required="required">
</div>
<div class="col-md-6">
<label class="form-label">Upload Image 2 (jpg/jpeg)<span class="text-danger">*</span></label>
<input type="file" class="form-control" id="c2image" accept=".jpg,.jpeg," name="c2image" required="required">
<input type="file" class="form-control" id="c2image" accept=".jpg,.jpeg," name="c2image"
required="required">
</div>
</div>
<span>OTP validation is mandatory for submitting the form.<span class="text-danger">*</span></span>
<div class="text-center mt-4">
<button type="submit" class="btn btn-success" name="submitBtn" id="submitBtn" disabled>Submit</button>
<button type="submit" class="btn btn-success" name="submitBtn" id="submitBtn"
disabled>Submit</button>
</div>
@ -531,7 +608,8 @@ textarea.form-control {
</div><!--end modal-dialog-->
</div>
<div id="pageLoader" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
<div id="pageLoader"
style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center;">
<div style="position: relative; top: 50%; transform: translateY(-50%);">
<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
<span class="sr-only">Loading...</span>
@ -558,7 +636,7 @@ let mobile_valid=false;
$(document).ready(function () {
let checkboxList = $("#compnature_checkbox_list");
/*let checkboxList = $("#compnature_checkbox_list");
let natureContainer = $("#naturecontainer");
// Toggle dropdown on click
@ -571,7 +649,7 @@ $(document).ready(function () {
if (!$(e.target).closest(".multi-select-dropdown").length) {
checkboxList.hide();
}
});
});*/
// Fetch API data
fetch('/greencommittee/api/getcompnatureforpublic')
@ -580,8 +658,17 @@ $(document).ready(function () {
if (result.status !== "success") return;
let list = result.data;
let dropdown = $("#complaintDropdown");
list.forEach(d => {
list.forEach(function (d) {
dropdown.append(
`<option value="${d.id}" data-name="${d.name}">
${d.name}
</option>`
);
});
/*list.forEach(d => {
checkboxList.append(`
<div class="form-check">
<input type="checkbox"
@ -594,11 +681,11 @@ $(document).ready(function () {
</label>
</div>
`);
});
});*/
});
// Handle checkbox selection
$(document).on("change", ".nature-check", function () {
/*$(document).on("change", ".nature-check", function () {
let id = $(this).data("id");
let name = $(this).data("name");
@ -632,10 +719,76 @@ $(document).ready(function () {
$("#treeRow").remove();
}
}
});*/
$(document).on("change", "#complaintDropdown", function () {
$("#treeRow").remove();
let id = $(this).val();
let name = $("#complaintDropdown option:selected").data("name");
if (!id) {
return;
}
$("#naturecontainer").html(`
<div class="row" id="treeRow">
<div class="col-md-4 mb-3">
<label class="form-label">
No. of Trees - ${name}
<span class="text-danger">*</span>
</label>
<input type="number"
class="form-control"
id="trees_${id}"
value="1"
disabled>
</div>
</div>
`);
});
// Handle Complaint Selection (Only One Selection Allowed)
/*$(document).on("change", ".nature-check", function () {
// If checked, uncheck all others
if ($(this).is(":checked")) {
$(".nature-check").not(this).prop("checked", false);
}
// Remove previous tree input
$("#treeRow").remove();
let checked = $(".nature-check:checked");
if (checked.length > 0) {
let id = checked.data("id");
let name = checked.data("name");
$("#naturecontainer").html(`
<div class="row" id="treeRow">
<div class="col-md-4 mb-3">
<label class="form-label">
No. of Trees - ${name}
<span class="text-danger">*</span>
</label>
<input type="number"
class="form-control"
id="trees_${id}"
value="1"
disabled>
</div>
</div>
`);
}
updateDropdownLabel();
});*/
// Update dropdown text with selected names
function updateDropdownLabel() {
/*function updateDropdownLabel() {
let selected = [];
$(".nature-check:checked").each(function () {
@ -647,7 +800,16 @@ $(document).ready(function () {
} else {
$("#dropdownToggle").text(selected.join(", "));
}
}*/ /* function updateDropdownLabel() {
let checked = $(".nature-check:checked");
if (checked.length === 0) {
$("#dropdownToggle").text("Select Complaint");
} else {
$("#dropdownToggle").text(checked.data("name"));
}
}*/
@ -917,20 +1079,43 @@ $('#publicform').submit(function (e) {
let compDetailsList = [];
let invalidCount = false;
$(".nature-check:checked").each(function () {
let id = $(this).data("id");
let id = $("#complaintDropdown").val();
if (id) {
let count = $("#trees_" + id).val();
// Validate invalid count (empty OR zero-like OR negative)
if (!count || Number(count) <= 0) {
invalidCount = true;
}
compDetailsList.push({
id: id,
count: count
count: 1
});
}
/*$(".nature-check:checked").each(function () {
// let id = $(this).data("id");
let count = $("#trees_" + id).val();
// Validate invalid count (empty OR zero-like OR negative)
if (!count || Number(count) <= 0) {
invalidCount = true;
}
//for default one tree by ak
let id = $("#complaintDropdown").val();
if (id) {
compDetailsList.push({
id: id,
count: 1
});
}
});*/
if (compDetailsList.length === 0) {
$('#pageLoader').hide();
$('#submitBtn').prop('disabled', false).text('Submit');
@ -1214,4 +1399,5 @@ $('#sendOtpButton').click(function () {
});
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save