Hariprasath S
7 months ago
3 changed files with 385 additions and 6 deletions
-
358gcc_officer_portal/src/main/resources/templates/modules/nulm/salary-nonInitiatedreport-park.html
-
20gcc_officer_portal/src/main/resources/templates/modules/nulm/staffupdate.html
-
13gcc_officer_portal/src/main/resources/templates/modules/vendors/streetVendorRequestForm.html
@ -0,0 +1,358 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en" dir=""> |
||||
|
<html xmlns:th="http://www.thymeleaf.org"> |
||||
|
|
||||
|
<head th:replace="~{fragments/modules/base/head :: head}"></head> |
||||
|
|
||||
|
<body> |
||||
|
<div class="wrapper"> |
||||
|
<header th:replace="~{fragments/modules/base/header :: header}"></header> |
||||
|
|
||||
|
<div class="page-wrap"> |
||||
|
<div th:replace="~{fragments/modules/base/menu :: menu}"></div> |
||||
|
<div class="main-content"> |
||||
|
<div class="container-fluid"> |
||||
|
<div class="page-header"> |
||||
|
<div class="row align-items-end"> |
||||
|
<div class="col-lg-6"> |
||||
|
<div class="page-header-title"> |
||||
|
<i class="ik ik-thumbs-up bg-blue"></i> |
||||
|
<div class="d-inline"> |
||||
|
<h5>Park STAFF</h5> |
||||
|
<span>Park Salary Not Initiated Report</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="col-lg-6"> |
||||
|
<nav class="breadcrumb-container" aria-label="breadcrumb"> |
||||
|
<ol class="breadcrumb"> |
||||
|
<li class="breadcrumb-item"> |
||||
|
<a href="/index"><i class="ik ik-home"></i></a> |
||||
|
</li> |
||||
|
<li class="breadcrumb-item active" aria-current="page">Salary NotInitiated Report</li> |
||||
|
</ol> |
||||
|
</nav> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<hr> |
||||
|
|
||||
|
<!-- Filters Section --> |
||||
|
<div class="row"> |
||||
|
|
||||
|
<!-- Year --> |
||||
|
<div class="col-md-3 form-group"> |
||||
|
<label for="year">Year</label> |
||||
|
<select class="form-control" id="year" name="year" required> |
||||
|
<option value="">Select Year</option> |
||||
|
<option th:each="year : ${yearList}" th:value="${year.year}" th:text="${year.year}" |
||||
|
th:selected="${year.year == selectedYear}"> |
||||
|
</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Month --> |
||||
|
<div class="col-md-3 form-group"> |
||||
|
<label for="month">Month</label> |
||||
|
<select id="month" class="form-control" name="month" required> |
||||
|
<option value="">Select Month</option> |
||||
|
<option th:each="month : ${monthList}" th:value="${month.month}" th:text="${month.month}" |
||||
|
th:selected="${month.month == selectedMonth}"> |
||||
|
</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<!--<div class="col-sm-3"> |
||||
|
<label for="salaryStatus">Salary Status:</label> |
||||
|
<select id="salaryStatus" class="form-control"> |
||||
|
<option value="">Select</option> |
||||
|
<option value="Initiated">Initiated</option> |
||||
|
<option value="Approved">Approved</option> |
||||
|
<option value="NonInitiated">Non Initiated</option> |
||||
|
</select> |
||||
|
</div>--> |
||||
|
|
||||
|
<div class="col-sm-3" style="display: none;"> |
||||
|
<label for="selfhelp">Self Help Group:</label> |
||||
|
<select id="selfhelp" class="form-control"> |
||||
|
<option value="">Select</option> |
||||
|
<!-- Group names will be populated here --> |
||||
|
</select> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="col-sm-3"> |
||||
|
|
||||
|
<button class="btn btn-primary mt-4" onclick="fetchSalaryReport()">Get List</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Salary Report Table --> |
||||
|
<div class="card-block mt-3"> |
||||
|
<table id="salaryreporttable" class="table table-striped table-bordered"> |
||||
|
<thead class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>S.No</th> |
||||
|
<th>Employee Id</th> |
||||
|
<th>Employee Name</th> |
||||
|
<th>Employee Designation</th> |
||||
|
<th>Incharge Name</th> |
||||
|
<th>Incharge Designation</th> |
||||
|
<th>Incharge Phone No</th> |
||||
|
<th>Self Help Group</th> |
||||
|
<!--<th>Days Present</th> |
||||
|
<th>OD</th> |
||||
|
<th>Total Days for Salary</th> |
||||
|
<th>Total Days</th> |
||||
|
<th>Total Days Absent</th> |
||||
|
<th>Month</th> |
||||
|
<th>Year</th> |
||||
|
<th>Salary Amount</th> |
||||
|
<th>Salary Status</th>--> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr th:each="salary, i : ${salaryNonInitiatedReport}"> |
||||
|
<td th:text="${i.count}">1</td> |
||||
|
<td th:text="${salary.emp_id}"></td> |
||||
|
<td th:text="${salary.name}"></td> |
||||
|
<td th:text="${salary.designation}"></td> |
||||
|
<td th:text="${salary.incharge_name}"></td> |
||||
|
<td th:text="${salary.incharge_designation}"></td> |
||||
|
<td th:text="${salary.incharge_phoneno}"></td> |
||||
|
<td th:text="${salary.group_name}"></td> |
||||
|
<!--<td th:text="${salary.total_days_present}"></td> |
||||
|
<td th:text="${salary.total_days_od}"></td> |
||||
|
<td th:text="${salary.total_days_salary}"></td> |
||||
|
<td th:text="${salary.total_days}"></td> |
||||
|
<td th:text="${salary.total_days_absent}"></td> |
||||
|
<td th:text="${salary.imonth}"></td> |
||||
|
<td th:text="${salary.iyear}"></td> |
||||
|
<td th:text="${salary.total_salary}"></td> |
||||
|
<td th:text="${salary.salary_status}"></td>--> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
<tfoot class="thead-dark"> |
||||
|
<tr> |
||||
|
<th>S.No</th> |
||||
|
<th>Employee Id</th> |
||||
|
<th>Employee Name</th> |
||||
|
<th>Employee Designation</th> |
||||
|
<th>Incharge Name</th> |
||||
|
<th>Incharge Designation</th> |
||||
|
<th>Incharge Phone No</th> |
||||
|
<th>Self Help Group</th> |
||||
|
<!--<th>Days Present</th> |
||||
|
<th>OD</th> |
||||
|
<th>Total Days for Salary</th> |
||||
|
<th>Total Days</th> |
||||
|
<th>Total Days Absent</th> |
||||
|
<th>Month</th> |
||||
|
<th>Year</th> |
||||
|
<th>Salary Amount</th> |
||||
|
<th>Salary Status</th>--> |
||||
|
</tr> |
||||
|
</tfoot> |
||||
|
</table> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div th:replace="~{fragments/modules/base/script :: script}"></div> |
||||
|
|
||||
|
<script th:inline="javascript"> |
||||
|
|
||||
|
function loadYear(selectedYear) { |
||||
|
$.ajax({ |
||||
|
url: '/gcc/api/nulm/getYear', |
||||
|
type: 'GET', |
||||
|
success: function (response) { |
||||
|
const yearDropdown = $('#year'); |
||||
|
yearDropdown.empty(); // Clear existing options |
||||
|
yearDropdown.append('<option value="">Select Year</option>'); |
||||
|
|
||||
|
response.forEach(function (year) { |
||||
|
const yearName = year.year; // Correct the attribute name if necessary |
||||
|
const isSelected = yearName === selectedYear ? 'selected' : ''; |
||||
|
yearDropdown.append(new Option(yearName, yearName, false, isSelected)); |
||||
|
}); |
||||
|
|
||||
|
// If no department selected, show "Select Zone" |
||||
|
if (!selectedYear) { |
||||
|
yearDropdown.val(''); |
||||
|
} |
||||
|
}, |
||||
|
error: function (xhr, status, error) { |
||||
|
console.error('Error fetching departments:', error); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
const selectedYear = /*[[${selectedYear}]]*/ ''; // Get this from Thymeleaf or other server-side context |
||||
|
loadYear(selectedYear); |
||||
|
|
||||
|
function loadMonth(selectedMonth) { |
||||
|
const year = document.getElementById('year').value; // Get the selected year |
||||
|
if (!year) { |
||||
|
$('#month').empty().append('<option value="">Select Month</option>'); // Clear month dropdown if no year selected |
||||
|
return; // Exit if no year is selected |
||||
|
} |
||||
|
|
||||
|
$.ajax({ |
||||
|
url: `/gcc/api/nulm/getMonth?year=${year}`, |
||||
|
type: 'GET', |
||||
|
success: function (response) { |
||||
|
const monthDropdown = $('#month'); |
||||
|
monthDropdown.empty(); // Clear existing options |
||||
|
monthDropdown.append('<option value="">Select Month</option>'); |
||||
|
|
||||
|
response.forEach(function (month) { |
||||
|
const monthName = month.month; |
||||
|
monthDropdown.append(new Option(monthName, monthName)); |
||||
|
}); |
||||
|
}, |
||||
|
error: function (xhr, status, error) { |
||||
|
console.error('Error fetching months:', error); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
// Load months when the year changes |
||||
|
document.getElementById('year').addEventListener('change', function() { |
||||
|
loadMonth(); // Call loadMonth when the year is selected |
||||
|
}); |
||||
|
|
||||
|
function fetchSalaryReport() { |
||||
|
const month = document.getElementById('month').value; |
||||
|
const year = document.getElementById('year').value; |
||||
|
const groupName=encodeURIComponent(document.getElementById('selfhelp').value); |
||||
|
|
||||
|
if (month && year) { |
||||
|
window.location.href = `/gcc/nulm/salary-nonInitiated-park?month=${month}&year=${year}&groupName=${groupName}`; |
||||
|
} else { |
||||
|
alert("Please select both month and year."); |
||||
|
} |
||||
|
} |
||||
|
$(document).ready(function () { |
||||
|
|
||||
|
function clearUrlParams() { |
||||
|
const currentUrl = window.location.href; |
||||
|
const urlWithoutParams = currentUrl.split('?')[0]; // Remove the query parameters |
||||
|
window.history.replaceState({}, document.title, urlWithoutParams); // Replace the current URL without params |
||||
|
} |
||||
|
|
||||
|
// Call this on page load to reset the URL |
||||
|
clearUrlParams(); |
||||
|
|
||||
|
// Initialize DataTable |
||||
|
var table = $('#salaryreporttable').DataTable({ |
||||
|
dom: 'Bftip', |
||||
|
columnDefs: [ |
||||
|
{targets: 'no-sort', orderable: false} |
||||
|
], |
||||
|
lengthMenu: [ |
||||
|
[50, 100, 200, 500, -1], |
||||
|
['50 rows', '100 rows', '200 rows', 'Show all'] |
||||
|
], |
||||
|
scrollY: '50vh', |
||||
|
fixedColumns: { |
||||
|
left: 1, |
||||
|
right: 1 |
||||
|
}, |
||||
|
buttons: [ |
||||
|
{ |
||||
|
extend: 'pageLength', |
||||
|
className: 'btn btn-warning' |
||||
|
}, |
||||
|
{ |
||||
|
title: 'Data export', |
||||
|
extend: 'copyHtml5', |
||||
|
text: 'Copy', |
||||
|
className: 'btn btn-secondary', |
||||
|
id: 'copyBtn' |
||||
|
}, |
||||
|
{ |
||||
|
extend: 'pdfHtml5', |
||||
|
text: 'PDF', |
||||
|
className: 'btn btn-secondary', |
||||
|
id: 'pdfBtn', |
||||
|
exportOptions: { |
||||
|
columns: [0, 1, 2, 3, 4, 5, 6, 7] |
||||
|
}, |
||||
|
orientation: 'potrait', // Change to landscape for more horizontal space |
||||
|
pageSize: 'A4', // You can change to A4 or A3 depending on your needs |
||||
|
customize: function (doc) { |
||||
|
// Custom column widths for better fit |
||||
|
doc.content[1].table.widths = ['5%', '10%', '15%', '15%', '15%', '15%', '15%', '15%']; |
||||
|
|
||||
|
// Optional: Adjust font size if needed |
||||
|
doc.styles.tableBodyEven.alignment = 'center'; |
||||
|
doc.styles.tableBodyOdd.alignment = 'center'; |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
extend: 'excelHtml5', |
||||
|
text: 'EXCEL', |
||||
|
className: 'btn btn-secondary', |
||||
|
id: 'excelBtn' |
||||
|
}, |
||||
|
{ |
||||
|
extend: 'csvHtml5', |
||||
|
text: 'CSV', |
||||
|
className: 'btn btn-secondary', |
||||
|
id: 'csvBtn' |
||||
|
} |
||||
|
], |
||||
|
fixedHeader: true, |
||||
|
autoWidth: true, |
||||
|
responsive: true, |
||||
|
searching: true, |
||||
|
select: false, |
||||
|
processing: false |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
}); |
||||
|
$(document).ready(function () { |
||||
|
$.ajax({ |
||||
|
url: '/gcc/api/nulm/selfHelpGroups', // Your API endpoint |
||||
|
type: 'GET', |
||||
|
success: function (data) { |
||||
|
// Clear existing options (if any) |
||||
|
$('#selfhelp').empty().append('<option value="">Select</option>'); |
||||
|
|
||||
|
// Check if data is an array and iterate through it |
||||
|
if (Array.isArray(data)) { |
||||
|
let options = ''; |
||||
|
data.forEach(function (group) { |
||||
|
// Access the correct properties |
||||
|
options += `<option value="${group.groupName}">${group.groupName}</option>`; |
||||
|
}); |
||||
|
$('#selfhelp').append(options); |
||||
|
} else { |
||||
|
console.error("Data is not an array:", data); |
||||
|
} |
||||
|
}, |
||||
|
error: function (xhr, status, error) { |
||||
|
console.error("Error fetching self-help groups:", error); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue