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