@ -1,22 +1,25 @@
<!DOCTYPE html> <!DOCTYPE html>
< html xmlns:th = "http://www.thymeleaf.org" > < html xmlns:th = "http://www.thymeleaf.org" >
< head th:replace = "~{fragments/modules/base/head :: head}" > < / head > < head th:replace = "~{fragments/modules/base/head :: head}" > < / head >
< style > < style >
.required { .required {
color: red; color: red;
} }
/* Mobile screens - targeting devices with a max width of 767px */ /* Mobile screens - targeting devices with a max width of 767px */
@media (max-width: 767px)
{
@media (max-width: 767px) {
#requestlistform label { #requestlistform label {
margin-top: 10px; margin-top: 10px;
} }
} }
#viewModal .modal-body { #viewModal .modal-body {
max-height: 70vh; /* Limit the height to 70% of the viewport */
overflow-y: auto; /* Enable vertical scrolling */
max-height: 70vh;
/* Limit the height to 70% of the viewport */
overflow-y: auto;
/* Enable vertical scrolling */
} }
.custom-doc-btn { .custom-doc-btn {
@ -75,6 +78,7 @@ padding-bottom: 10px;
input.form-control { input.form-control {
padding: 10px; padding: 10px;
} }
.form-select { .form-select {
padding: 10px; padding: 10px;
height: 40px; height: 40px;
@ -89,7 +93,7 @@ input.form-control {
max-width: 100%; max-width: 100%;
} }
#pac-input {
/* #pac-input {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 50%; left: 50%;
@ -113,8 +117,7 @@ input.form-control {
background-color: white; background-color: white;
border-radius: 4px; border-radius: 4px;
padding: 0; padding: 0;
/* Removed extra padding to match the input width */
}
} */
#search-box { #search-box {
width: 100%; width: 100%;
@ -128,7 +131,7 @@ input.form-control {
/* Makes sure padding is considered in width */ /* Makes sure padding is considered in width */
} }
#suggestions {
/* #suggestions {
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
max-height: 200px; max-height: 200px;
@ -137,15 +140,15 @@ input.form-control {
background-color: white; background-color: white;
display: none; display: none;
width: 100%; width: 100%;
/* Matches the width of the container and input */
box-sizing: border-box; box-sizing: border-box;
/* Ensures the width includes borders and padding */
}
} */
.pac-container { .pac-container {
z-index: 2000 !important; /* higher than modal's z-index */
z-index: 2000 !important;
/* higher than modal's z-index */
} }
#suggestions ul {
/* #suggestions ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -158,8 +161,74 @@ input.form-control {
#suggestions ul li:hover { #suggestions ul li:hover {
background-color: #f0f0f0; background-color: #f0f0f0;
} */
#pac-input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 15px;
box-sizing: border-box;
}
#suggestions {
width: 100%;
display: none;
background: #fff;
border: 1px solid #ccc;
border-top: none;
max-height: 220px;
overflow-y: auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
#suggestions ul {
margin: 0;
padding: 0;
list-style: none;
}
#suggestions li {
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
#suggestions li:hover {
background: #f5f5f5;
}
#search-container {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 420px;
z-index: 1000;
} }
< / style > < / style >
< body > < body >
<!-- [if lt IE 8]> <!-- [if lt IE 8]>
@ -191,8 +260,8 @@ input.form-control {
< div class = "col-lg-4" > < div class = "col-lg-4" >
< nav class = "breadcrumb-container" aria-label = "breadcrumb" > < nav class = "breadcrumb-container" aria-label = "breadcrumb" >
< ol class = "breadcrumb" > < ol class = "breadcrumb" >
< li class = "breadcrumb-item" > < a href = "/gcc/index" > < i
class="ik ik-home">< / i > < / a > < / li >
< li class = "breadcrumb-item" > < a href = "/gcc/index" > < i class = "ik ik-home" > < / i > < / a >
< / li >
< li class = "breadcrumb-item" aria-current = "page" > Vending Committe< / li > < li class = "breadcrumb-item" aria-current = "page" > Vending Committe< / li >
< li class = "breadcrumb-item active" aria-current = "page" > Zone Requests< / li > < li class = "breadcrumb-item active" aria-current = "page" > Zone Requests< / li >
< / ol > < / ol >
@ -209,11 +278,16 @@ input.form-control {
< div class = "card-block" > < div class = "card-block" >
< div class = "page-header-title" > < div class = "page-header-title" >
< h5 style = "margin: 0;font-weight: bold;" > < span th:text = "${zone}" id = "userzone" > < / span > - Zone Request List< / h5 > < span th:text = "${LoginUserId}" id = "userIdSpan" style = "display: none;" > < / span > < hr >
< h5 style = "margin: 0;font-weight: bold;" > < span th:text = "${zone}"
id="userzone">< / span > - Zone Request List< / h5 > < span
th:text="${LoginUserId}" id="userIdSpan" style="display: none;">< / span >
< hr >
< / div > < / div >
< div > < div >
< table id = "RequestListDatatable" class = "table table-striped table-bordered table-hover dataTable" role = "grid" >
< table id = "RequestListDatatable"
class="table table-striped table-bordered table-hover dataTable"
role="grid">
< thead class = "thead-dark" > < thead class = "thead-dark" >
< tr role = "row" > < tr role = "row" >
< th class = "text-center" > S.No< / th > < th class = "text-center" > S.No< / th >
@ -258,7 +332,8 @@ input.form-control {
<!-- Modal --> <!-- Modal -->
< div class = "modal fade" id = "viewModal" tabindex = "-1" aria-labelledby = "viewModalLabel" aria-hidden = "true" data-bs-backdrop = "static" data-bs-keyboard = "false" >
< div class = "modal fade" id = "viewModal" tabindex = "-1" aria-labelledby = "viewModalLabel" aria-hidden = "true"
data-bs-backdrop="static" data-bs-keyboard="false">
< div class = "modal-dialog modal-lg" > < div class = "modal-dialog modal-lg" >
< div class = "modal-content" > < div class = "modal-content" >
< div class = "modal-header" > < div class = "modal-header" >
@ -316,23 +391,27 @@ input.form-control {
< / div > < / div >
< div id = "mapContainer" style = "position: relative; height: 500px;" > < div id = "mapContainer" style = "position: relative; height: 500px;" >
< input id = "pac-input" class = "controls" type = "text" placeholder = "Search location" >
< div id = "googleMap" style = "height: 90%; width: 100%;" > < / div >
< / div >
< div id = "search-container" > < div id = "search-container" >
<!-- <input type="text" id="search - box" placeholder="Search for a location..."> -->
< input id = "pac-input" class = "controls" type = "text"
placeholder="Search location - please enter minimum of 5 characters">
< div id = "suggestions" > < / div > < div id = "suggestions" > < / div >
< / div > < / div >
< div id = "googleMap" style = "height: 90%; width: 100%;" > < / div >
< / div >
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label for = "latitude_field" > Latitude< / label > < label for = "latitude_field" > Latitude< / label >
< input type = "text" class = "form-control" id = "latitude_field" name = "latitude_field" readonly >
< input type = "text" class = "form-control" id = "latitude_field"
name="latitude_field" readonly>
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label for = "longitude_field" > Longitude< / label > < label for = "longitude_field" > Longitude< / label >
< input type = "text" class = "form-control" id = "longitude_field" name = "longitude_field" readonly >
< input type = "text" class = "form-control" id = "longitude_field"
name="longitude_field" readonly>
< / div > < / div >
< / div > < / div >
@ -351,29 +430,41 @@ input.form-control {
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Landmark (maximum 255 characters)< span class = "text-danger" > *< / span > < / label >
< textarea class = "form-control" id = "landmark" name = "landmark" maxlength = "255" required = "required" > < / textarea >
< label class = "form-label" > Landmark (maximum 255 characters)< span
class="text-danger">*< / span > < / label >
< textarea class = "form-control" id = "landmark" name = "landmark" maxlength = "255"
required="required">< / textarea >
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > விற்பனை பகுதி< span class = "text-danger" > *< / span > < / label >
< textarea class = "form-control" id = "landmark_tamil" name = "landmark_tamil" placeholder = "தமிழில் பதிவு செய்யவும்" required = "required" > < / textarea >
< label class = "form-label" > விற்பனை பகுதி< span
class="text-danger">*< / span > < / label >
< textarea class = "form-control" id = "landmark_tamil" name = "landmark_tamil"
placeholder="தமிழில் பதிவு செய்யவும்" required="required">< / textarea >
< / div > < / div >
< / div > < / div >
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > District | மாவட்டம்< span class = "text-danger" > *< / span > < / label >
< input type = "text" class = "form-control" id = "vendor_district" name = "vendor_district" oninput = "this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" required = "required" >
< label class = "form-label" > District | மாவட்டம்< span
class="text-danger">*< / span > < / label >
< input type = "text" class = "form-control" id = "vendor_district"
name="vendor_district"
oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')"
required="required">
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > மாவட்டம்< span class = "text-danger" > *< / span > < / label > < label class = "form-label" > மாவட்டம்< span class = "text-danger" > *< / span > < / label >
< input type = "text" class = "form-control" id = "vendor_district_tamil" name = "vendor_district_tamil" placeholder = "தமிழில் பதிவு செய்யவும்" required = "required" >
< input type = "text" class = "form-control" id = "vendor_district_tamil"
name="vendor_district_tamil" placeholder="தமிழில் பதிவு செய்யவும்"
required="required">
< / div > < / div >
< / div > < / div >
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Pincode | அஞ்சல் குறியீடு< span class = "text-danger" > *< / span > < / label >
< input type = "text" class = "form-control" id = "vendor_pincode" name = "vendor_pincode" oninput = "validatePincode(this)" required = "required" >
< label class = "form-label" > Pincode | அஞ்சல் குறியீடு< span
class="text-danger">*< / span > < / label >
< input type = "text" class = "form-control" id = "vendor_pincode"
name="vendor_pincode" oninput="validatePincode(this)" required="required">
< / div > < / div >
< / div > < / div >
@ -381,12 +472,14 @@ input.form-control {
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label for = "businesstype" class = "form-label" > Type of Business < span class = "text-danger" > *< / span >
< label for = "businesstype" class = "form-label" > Type of Business < span
class="text-danger">*< / span >
< / label > < / label >
< select id = "businesstype" name = "businesstype" class = "form-control" required > < select id = "businesstype" name = "businesstype" class = "form-control" required >
< option value = "" > -- Select Business Type --< / option > < option value = "" > -- Select Business Type --< / option >
< th:block th:each = "vendingCategory : ${vendingCategories}" > < th:block th:each = "vendingCategory : ${vendingCategories}" >
< option th:value = "${vendingCategory.id}" th:text = "${vendingCategory.vending_category_name}" > < / option >
< option th:value = "${vendingCategory.id}"
th:text="${vendingCategory.vending_category_name}">< / option >
< / th:block > < / th:block >
< / select > < / select >
@ -394,12 +487,16 @@ input.form-control {
< div class = "col-md-6" > < div class = "col-md-6" >
< label for = "tamilbusinesstype" class = "form-label" > வியாபார வகை < span class = "text-danger" > *< / span >
< label for = "tamilbusinesstype" class = "form-label" > வியாபார வகை < span
class="text-danger">*< / span >
< / label > < / label >
< select id = "tamilbusinesstype" name = "tamilbusinesstype" class = "form-control" required >
< select id = "tamilbusinesstype" name = "tamilbusinesstype" class = "form-control"
required>
< option value = "" > -- வியாபார வகையைத் தேர்ந்தெடுக்கவும் --< / option > < option value = "" > -- வியாபார வகையைத் தேர்ந்தெடுக்கவும் --< / option >
< th:block th:each = "tamilvendingCategory : ${tamilvendingCategories}" > < th:block th:each = "tamilvendingCategory : ${tamilvendingCategories}" >
< option th:value = "${tamilvendingCategory.id}" th:text = "${tamilvendingCategory.tamil_vending_category_name}" > < / option >
< option th:value = "${tamilvendingCategory.id}"
th:text="${tamilvendingCategory.tamil_vending_category_name}">
< / option >
< / th:block > < / th:block >
< / select > < / select >
< / div > < / div >
@ -407,28 +504,34 @@ input.form-control {
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Business Space (Sq ft)| வியாபார இடம்< span class = "text-danger" > *< / span > < / label >
< input type = "text" class = "form-control" id = "business_space" name = "business_space" required = "required" >
< label class = "form-label" > Business Space (Sq ft)| வியாபார இடம்< span
class="text-danger">*< / span > < / label >
< input type = "text" class = "form-control" id = "business_space"
name="business_space" required="required">
< / div > < / div >
< / div > < / div >
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Did you get SVANIDHI loan? | ஸ்வநிதி கடன் வாங்கினீங்களா? < / label > < br >
< label class = "form-label" > Did you get SVANIDHI loan? | ஸ்வநிதி கடன்
வாங்கினீங்களா? < / label > < br >
< input type = "radio" name = "svanidhi" value = "Yes" > Yes < input type = "radio" name = "svanidhi" value = "Yes" > Yes
< input type = "radio" name = "svanidhi" value = "No" class = "ms-3" > No < input type = "radio" name = "svanidhi" value = "No" class = "ms-3" > No
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Do you have a Bank Account? | வங்கி கணக்கு உள்ளதா? < / label > < br >
< label class = "form-label" > Do you have a Bank Account? | வங்கி கணக்கு உள்ளதா?
< / label > < br >
< input type = "radio" name = "bank_account" value = "Yes" > Yes < input type = "radio" name = "bank_account" value = "Yes" > Yes
< input type = "radio" name = "bank_account" value = "No" class = "ms-3" > No < input type = "radio" name = "bank_account" value = "No" class = "ms-3" > No
< / div > < / div >
< div class = "col-md-6" id = "bank_passbook_container" style = "display:none;" > < div class = "col-md-6" id = "bank_passbook_container" style = "display:none;" >
< label for = "bank_passbook" class = "form-label" > Upload Bank Passbook (jpg/jpeg/pdf)< span class = "text-danger" > *< / span >
< label for = "bank_passbook" class = "form-label" > Upload Bank Passbook
(jpg/jpeg/pdf)< span class = "text-danger" > *< / span >
< / label > < / label >
< input type = "file" class = "form-control" id = "bank_passbook" name = "bank_passbook" accept = ".jpg,.jpeg,.pdf,application/pdf" >
< input type = "file" class = "form-control" id = "bank_passbook" name = "bank_passbook"
accept=".jpg,.jpeg,.pdf,application/pdf">
< div id = "bank_passbookpreview" class = "mt-2" style = "display: none;" > < / div > < div id = "bank_passbookpreview" class = "mt-2" style = "display: none;" > < / div >
< / div > < / div >
@ -450,21 +553,29 @@ input.form-control {
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Name < span class = "required" > *< / span > < / label > < label class = "form-label" > Name < span class = "required" > *< / span > < / label >
< input type = "text" class = "form-control" id = "name" name = "name" oninput = "this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" required >
< input type = "text" class = "form-control" id = "name" name = "name"
oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" required>
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > பெயர் < span class = "required" > *< / span > < / label > < label class = "form-label" > பெயர் < span class = "required" > *< / span > < / label >
< input type = "text" class = "form-control" id = "name_tamil" name = "name_tamil" placeholder = "தமிழில் பதிவு செய்யவும்" required >
< input type = "text" class = "form-control" id = "name_tamil" name = "name_tamil"
placeholder="தமிழில் பதிவு செய்யவும்" required>
< / div > < / div >
< / div > < / div >
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Father's / Husband's Name < span class = "text-danger" > *< / span > < / label >
< input type = "text" class = "form-control" id = "father_name" name = "father_name" oninput = "this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" required = "required" >
< label class = "form-label" > Father's / Husband's Name < span
class="text-danger">*< / span > < / label >
< input type = "text" class = "form-control" id = "father_name" name = "father_name"
oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')"
required="required">
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > தந்தை/கணவர் பெயர் < span class = "text-danger" > *< / span > < / label >
< input type = "text" class = "form-control" id = "father_name_tamil" name = "father_name_tamil" placeholder = "தமிழில் பதிவு செய்யவும்" required = "required" >
< label class = "form-label" > தந்தை/கணவர் பெயர் < span
class="text-danger">*< / span > < / label >
< input type = "text" class = "form-control" id = "father_name_tamil"
name="father_name_tamil" placeholder="தமிழில் பதிவு செய்யவும்"
required="required">
< / div > < / div >
< / div > < / div >
@ -477,17 +588,21 @@ input.form-control {
< input type = "radio" name = "gender" value = "Transgender" class = "ms-3" > Transgender < input type = "radio" name = "gender" value = "Transgender" class = "ms-3" > Transgender
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > பாலினம் < span class = "text-danger" > *< / span > < / label > < br >
< label class = "form-label" > பாலினம் < span
class="text-danger">*< / span > < / label > < br >
< input type = "radio" name = "gender_tamil" value = "ஆண்" > ஆண் < input type = "radio" name = "gender_tamil" value = "ஆண்" > ஆண்
< input type = "radio" name = "gender_tamil" value = "பெண்" class = "ms-3" > பெண் < input type = "radio" name = "gender_tamil" value = "பெண்" class = "ms-3" > பெண்
< input type = "radio" name = "gender_tamil" value = "பிற்பாலினர்" class = "ms-3" > பிற்பாலினர்
< input type = "radio" name = "gender_tamil" value = "பிற்பாலினர்"
class="ms-3">பிற்பாலினர்
< / div > < / div >
< / div > < / div >
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Mobile Number | மொபைல் எண் < span class = "required" > *< / span > < / label >
< input type = "text" class = "form-control" id = "mobile_no" name = "mobile_no" oninput = "validatePhoneNumber(this)" required readonly = "readonly" >
< label class = "form-label" > Mobile Number | மொபைல் எண் < span
class="required">*< / span > < / label >
< input type = "text" class = "form-control" id = "mobile_no" name = "mobile_no"
oninput="validatePhoneNumber(this)" required readonly="readonly">
< / div > < / div >
< / div > < / div >
@ -495,12 +610,15 @@ input.form-control {
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Date of Birth | பிறந்த தேதி < span class = "text-danger" > *< / span > < / label >
< label class = "form-label" > Date of Birth | பிறந்த தேதி < span
class="text-danger">*< / span > < / label >
< input type = "date" id = "dob" class = "form-control" name = "dob" required = "required" > < input type = "date" id = "dob" class = "form-control" name = "dob" required = "required" >
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Community Category | சமூக வகை < span class = "text-danger" > *< / span > < / label >
< select class = "form-control" id = "community" name = "community" required = "required" >
< label class = "form-label" > Community Category | சமூக வகை < span
class="text-danger">*< / span > < / label >
< select class = "form-control" id = "community" name = "community"
required="required">
< option value = "" > -- Select Community --< / option > < option value = "" > -- Select Community --< / option >
< th:block th:each = "com : ${communities}" > < th:block th:each = "com : ${communities}" >
< option th:value = "${com.id}" th:text = "${com.category_name}" > < / option > < option th:value = "${com.id}" th:text = "${com.category_name}" > < / option >
@ -511,13 +629,15 @@ input.form-control {
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Differently Abled | இயலாமை உள்ளவரா? < span class = "required" > *< / span > < / label > < br >
< label class = "form-label" > Differently Abled | இயலாமை உள்ளவரா? < span
class="required">*< / span > < / label > < br >
< input type = "radio" name = "differently_abled" value = "Yes" > Yes < input type = "radio" name = "differently_abled" value = "Yes" > Yes
< input type = "radio" name = "differently_abled" value = "No" class = "ms-3" > No < input type = "radio" name = "differently_abled" value = "No" class = "ms-3" > No
< / div > < / div >
< div class = "col-md-6" id = "diffSection" style = "display: none;" > < div class = "col-md-6" id = "diffSection" style = "display: none;" >
< label class = "form-label" > Type of Disability | இயலாமையின் வகை < span class = "required" > *< / span > < / label >
< label class = "form-label" > Type of Disability | இயலாமையின் வகை < span
class="required">*< / span > < / label >
< select class = "form-control" id = "diff_type" name = "diff_type" > < select class = "form-control" id = "diff_type" name = "diff_type" >
< option value = "" > -- Select Disability --< / option > < option value = "" > -- Select Disability --< / option >
< th:block th:each = "diff : ${DiffAbledList}" > < th:block th:each = "diff : ${DiffAbledList}" >
@ -530,16 +650,14 @@ input.form-control {
Specify Disability | இயலாமையை குறிப்பிடவும் Specify Disability | இயலாமையை குறிப்பிடவும்
< span class = "required" > *< / span > < span class = "required" > *< / span >
< / label > < / label >
< input type = "text"
class="form-control"
id="other_disability"
name="other_disability"
placeholder="Enter Disability">
< input type = "text" class = "form-control" id = "other_disability"
name="other_disability" placeholder="Enter Disability">
< / div > < / div >
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Street Vendor’s educational status | தெருவணிகரின் கல்வித்தகுதி < / label >
< label class = "form-label" > Street Vendor’s educational status | தெருவணிகரின்
கல்வித்தகுதி < / label >
< select class = "form-control" id = "education" name = "education" > < select class = "form-control" id = "education" name = "education" >
< option value = "" > -- Select Education Status--< / option > < option value = "" > -- Select Education Status--< / option >
< th:block th:each = "edu : ${educationList}" > < th:block th:each = "edu : ${educationList}" >
@ -552,17 +670,20 @@ input.form-control {
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label for = "maritalstatus" class = "form-label" > Marital Status | திருமண நிலை < / label >
< label for = "maritalstatus" class = "form-label" > Marital Status | திருமண நிலை
< / label >
< select class = "form-control" id = "maritalStatus" name = "maritalStatus" > < select class = "form-control" id = "maritalStatus" name = "maritalStatus" >
< option value = "" > -- Select Marital Status --< / option > < option value = "" > -- Select Marital Status --< / option >
< th:block th:each = "status : ${maritalStatuses}" > < th:block th:each = "status : ${maritalStatuses}" >
< option th:value = "${status.id}" th:text = "${status.marital_status}" > < / option >
< option th:value = "${status.id}" th:text = "${status.marital_status}" >
< / option >
< / th:block > < / th:block >
< / select > < / select >
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label for = "religion" class = "form-label" > Religion | மதம்< span class = "text-danger" > *< / span > < / label >
< label for = "religion" class = "form-label" > Religion | மதம்< span
class="text-danger">*< / span > < / label >
< select class = "form-control" id = "religion" name = "religion" required = "required" > < select class = "form-control" id = "religion" name = "religion" required = "required" >
< option value = "" > -- Select Religion --< / option > < option value = "" > -- Select Religion --< / option >
< th:block th:each = "religion : ${religionList}" > < th:block th:each = "religion : ${religionList}" >
@ -573,15 +694,18 @@ input.form-control {
< / div > < / div >
< div class = "col-md-6 mt-3" > < div class = "col-md-6 mt-3" >
< label for = "familymembers" class = "form-label" > Number of Family Members | குடும்ப உறுப்பினர்கள் எண்ணிக்கை< span class = "text-danger" > *< / span > < / label >
< input type = "number" class = "form-control" name = "familymembers" id = "familymembers" max = "15" required = "required" >
< label for = "familymembers" class = "form-label" > Number of Family Members | குடும்ப
உறுப்பினர்கள் எண்ணிக்கை< span class = "text-danger" > *< / span > < / label >
< input type = "number" class = "form-control" name = "familymembers"
id="familymembers" max="15" required="required">
< / div > < / div >
< / div > < / div >
< div id = "familyMemberContainer" > < / div > < div id = "familyMemberContainer" > < / div >
< div class = "mb-3" > < div class = "mb-3" >
< label class = "form-label" > Are any of your family member involved in street vending | உங்கள் குடும்ப உறுப்பினர் வியாபாரத்தில் உள்ளவரா? < / label > < br >
< label class = "form-label" > Are any of your family member involved in street vending |
உங்கள் குடும்ப உறுப்பினர் வியாபாரத்தில் உள்ளவரா? < / label > < br >
< input type = "radio" name = "fam_vendor" value = "Yes" > Yes < input type = "radio" name = "fam_vendor" value = "Yes" > Yes
< input type = "radio" name = "fam_vendor" value = "No" class = "ms-3" > No < input type = "radio" name = "fam_vendor" value = "No" class = "ms-3" > No
< / div > < / div >
@ -596,31 +720,42 @@ input.form-control {
< input type = "text" class = "form-control" name = "doorno" id = "doorno" > < input type = "text" class = "form-control" name = "doorno" id = "doorno" >
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Street Name | தெரு பெயர் < span class = "text-danger" > *< / span > < / label >
< input type = "text" class = "form-control" name = "streetname" id = "streetname" required = "required" >
< label class = "form-label" > Street Name | தெரு பெயர் < span
class="text-danger">*< / span > < / label >
< input type = "text" class = "form-control" name = "streetname" id = "streetname"
required="required">
< / div > < / div >
< / div > < / div >
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Area Name | பகுதி பெயர் < span class = "text-danger" > *< / span > < / label >
< input type = "text" class = "form-control" name = "areaname" id = "areaname" required = "required" >
< label class = "form-label" > Area Name | பகுதி பெயர் < span
class="text-danger">*< / span > < / label >
< input type = "text" class = "form-control" name = "areaname" id = "areaname"
required="required">
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > District | மாவட்டம் < span class = "text-danger" > *< / span > < / label >
< input type = "text" class = "form-control" name = "district" id = "district" oninput = "this.value = this.value.replace(/[^a-zA-Z\s]/g, '')" required = "required" >
< label class = "form-label" > District | மாவட்டம் < span
class="text-danger">*< / span > < / label >
< input type = "text" class = "form-control" name = "district" id = "district"
oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '')"
required="required">
< / div > < / div >
< / div > < / div >
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Pincode | அஞ்சல் குறியீடு < span class = "text-danger" > *< / span > < / label >
< input type = "text" class = "form-control" name = "pincode" id = "pincode" oninput = "validatePincode(this)" required = "required" >
< label class = "form-label" > Pincode | அஞ்சல் குறியீடு < span
class="text-danger">*< / span > < / label >
< input type = "text" class = "form-control" name = "pincode" id = "pincode"
oninput="validatePincode(this)" required="required">
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Aadhaar Number | ஆதார் எண் < span class = "text-danger" > *< / span > < / label >
< input type = "text" class = "form-control" id = "aadhar_number" name = "aadhar_number" maxlength = "12" oninput = "validateAadhar(this)" required = "required" >
< label class = "form-label" > Aadhaar Number | ஆதார் எண் < span
class="text-danger">*< / span > < / label >
< input type = "text" class = "form-control" id = "aadhar_number" name = "aadhar_number"
maxlength="12" oninput="validateAadhar(this)" required="required">
< / div > < / div >
< / div > < / div >
@ -631,7 +766,8 @@ input.form-control {
< / div > < / div >
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Aadhaar Front Image | ஆதார் முன்னணி படத்தை பதிவேற்றவும் (jpg/jpeg/pdf)< / label >
< label class = "form-label" > Aadhaar Front Image | ஆதார் முன்னணி படத்தை
பதிவேற்றவும் (jpg/jpeg/pdf)< / label >
< input type = "file" class = "form-control" id = "aadharfrontimage" < input type = "file" class = "form-control" id = "aadharfrontimage"
accept=".jpg,.jpeg,.pdf,application/pdf" name="aadharfrontimage"> accept=".jpg,.jpeg,.pdf,application/pdf" name="aadharfrontimage">
@ -639,7 +775,8 @@ input.form-control {
< / div > < / div >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Aadhaar Back Image | ஆதார் பின்னணி படத்தை பதிவேற்றவும் (jpg/jpeg/pdf)< / label >
< label class = "form-label" > Aadhaar Back Image | ஆதார் பின்னணி படத்தை பதிவேற்றவும்
(jpg/jpeg/pdf)< / label >
< input type = "file" class = "form-control" id = "aadharbackimage" < input type = "file" class = "form-control" id = "aadharbackimage"
accept=".jpg,.jpeg,.pdf,application/pdf" name="aadharbackimage"> accept=".jpg,.jpeg,.pdf,application/pdf" name="aadharbackimage">
@ -648,7 +785,8 @@ input.form-control {
< / div > < / div >
< div class = "row mb-3" > < div class = "row mb-3" >
< div class = "col-md-6" > < div class = "col-md-6" >
< label class = "form-label" > Take Ration Card Front Image | ரேஷன் கார்டு முன்னணி படத்தை பதிவேற்றவும் (jpg/jpeg/pdf)< / label >
< label class = "form-label" > Take Ration Card Front Image | ரேஷன் கார்டு முன்னணி
படத்தை பதிவேற்றவும் (jpg/jpeg/pdf)< / label >
< input type = "file" class = "form-control" id = "ration_card_photo" < input type = "file" class = "form-control" id = "ration_card_photo"
accept=".jpg,.jpeg,.pdf,application/pdf" name="ration_card_photo"> accept=".jpg,.jpeg,.pdf,application/pdf" name="ration_card_photo">
@ -657,7 +795,8 @@ input.form-control {
< / div > < / div >
<!-- Submit --> <!-- Submit -->
< div class = "text-center mt-4" > < div class = "text-center mt-4" >
< button type = "submit" class = "btn btn-primary" name = "submitBtn" id = "submitBtn" > Update< / button >
< button type = "submit" class = "btn btn-primary" name = "submitBtn"
id="submitBtn">Update< / button >
< / div > < / div >
@ -669,7 +808,8 @@ input.form-control {
< / div > < / 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 style = "position: relative; top: 50%; transform: translateY(-50%);" >
< div class = "spinner-border text-primary" role = "status" style = "width: 3rem; height: 3rem;" > < div class = "spinner-border text-primary" role = "status" style = "width: 3rem; height: 3rem;" >
< span class = "sr-only" > Loading...< / span > < span class = "sr-only" > Loading...< / span >
@ -745,41 +885,167 @@ allowTamilAndSymbols("father_name_tamil");
const infowindow = new google.maps.InfoWindow(); const infowindow = new google.maps.InfoWindow();
// 🔍 Initialize the SearchBox // 🔍 Initialize the SearchBox
let input = document.getElementById('pac-input');
let searchBox = new google.maps.places.SearchBox(input);
//map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// let input = document.getElementById('pac-input');
// let searchBox = new google.maps.places.SearchBox(input);
// //map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// map.addListener('bounds_changed', function () {
// searchBox.setBounds(map.getBounds());
// });
// searchBox.addListener('places_changed', function () {
// const places = searchBox.getPlaces();
// if (places.length === 0) return;
// if (marker) marker.setMap(null);
// const place = places[0];
// if (!place.geometry) return;
// marker = new google.maps.Marker({
// map: map,
// position: place.geometry.location
// });
// const lat = place.geometry.location.lat().toFixed(6);
// const lng = place.geometry.location.lng().toFixed(6);
// document.getElementById("latitude_field").value = lat;
// document.getElementById("longitude_field").value = lng;
// map.setCenter(place.geometry.location);
// map.setZoom(15);
// infowindow.setContent(`Latitude: ${lat}< br > Longitude: ${lng}`);
// infowindow.open(map, marker);
// fetchStreets(lat, lng);
// });
const input = document.getElementById("pac-input");
const suggestions = document.getElementById("suggestions");
const autocompleteService = new google.maps.places.AutocompleteService();
const placesService = new google.maps.places.PlacesService(map);
let debounceTimer = null;
input.addEventListener("input", function () {
clearTimeout(debounceTimer);
const query = this.value.trim();
// Hide suggestions
if (query.length < 5 ) {
suggestions.style.display = "none";
suggestions.innerHTML = "";
return;
}
debounceTimer = setTimeout(function () {
autocompleteService.getPlacePredictions({
input: query,
bounds: map.getBounds()
}, showPredictions);
}, 500);
map.addListener('bounds_changed', function () {
searchBox.setBounds(map.getBounds());
}); });
searchBox.addListener('places_changed', function () {
const places = searchBox.getPlaces();
if (places.length === 0) return;
function showPredictions(predictions, status) {
if (marker) marker.setMap(null);
const place = places[0];
if (!place.geometry) return;
suggestions.innerHTML = "";
if (
status !== google.maps.places.PlacesServiceStatus.OK ||
!predictions ||
predictions.length === 0
) {
suggestions.style.display = "none";
return;
}
const ul = document.createElement("ul");
predictions.forEach(function (prediction) {
const li = document.createElement("li");
li.innerHTML = prediction.description;
li.onclick = function () {
input.value = prediction.description;
suggestions.style.display = "none";
loadPlace(prediction.place_id);
};
ul.appendChild(li);
});
suggestions.appendChild(ul);
suggestions.style.display = "block";
}
function loadPlace(placeId) {
placesService.getDetails({
placeId: placeId,
fields: [
"geometry",
"formatted_address",
"name"
]
}, function (place, status) {
if (status !== google.maps.places.PlacesServiceStatus.OK)
return;
if (marker)
marker.setMap(null);
marker = new google.maps.Marker({ marker = new google.maps.Marker({
map: map, map: map,
position: place.geometry.location position: place.geometry.location
}); });
const lat = place.geometry.location.lat().toFixed(6); const lat = place.geometry.location.lat().toFixed(6);
const lng = place.geometry.location.lng().toFixed(6); const lng = place.geometry.location.lng().toFixed(6);
document.getElementById("latitude_field").value = lat; document.getElementById("latitude_field").value = lat;
document.getElementById("longitude_field").value = lng; document.getElementById("longitude_field").value = lng;
map.setCenter(place.geometry.location); map.setCenter(place.geometry.location);
map.setZoom(15); map.setZoom(15);
infowindow.setContent(`Latitude: ${lat}< br > Longitude: ${lng}`);
infowindow.setContent(
"Latitude : " + lat +
"< br > Longitude : " + lng
);
infowindow.open(map, marker); infowindow.open(map, marker);
fetchStreets(lat, lng); fetchStreets(lat, lng);
}); });
}
map.addListener("click", function (event) { map.addListener("click", function (event) {
const clickedLatLng = event.latLng; const clickedLatLng = event.latLng;
if (marker) marker.setMap(null); if (marker) marker.setMap(null);
@ -1074,6 +1340,20 @@ allowTamilAndSymbols("father_name_tamil");
}); });
document.addEventListener("click", function (e) {
if (
!suggestions.contains(e.target) & &
e.target !== input
) {
suggestions.style.display = "none";
}
});
// Validation helpers // Validation helpers
function validatePhoneNumber(input) { function validatePhoneNumber(input) {
input.value = input.value.replace(/[^0-9]/g, '').slice(0, 10); input.value = input.value.replace(/[^0-9]/g, '').slice(0, 10);
@ -2102,4 +2382,5 @@ allowTamilAndSymbols("father_name_tamil");
} }
< / script > < / script >
< / body > < / body >
< / html > < / html >
KaNi-04
2 months ago