You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
385 lines
13 KiB
385 lines
13 KiB
<!DOCTYPE html>
|
|
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<head th:replace="~{fragments/head-admin :: head}"></head>
|
|
|
|
<meta charset="ISO-8859-1">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<style>
|
|
.small-input {
|
|
width: 150px;
|
|
/* Adjust the width as needed */
|
|
}
|
|
|
|
.small-table th,
|
|
.small-table td {
|
|
font-size: 14px;
|
|
/* Adjust font size as needed */
|
|
}
|
|
|
|
/* Reduce padding for table cells */
|
|
.small-table td,
|
|
.small-table th {
|
|
padding: 5px;
|
|
/* Adjust padding as needed */
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
|
|
<!-- Page Container -->
|
|
<div id="page-container"
|
|
class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
|
|
<!-- Side Overlay aside (right)-->
|
|
<aside th:replace="~{fragments/aside-right :: aside}"></aside>
|
|
<!-- END Side Overlay (right)-->
|
|
<!-- Sidebar Nav-->
|
|
<nav th:replace="~{fragments/nav-admin :: nav}"></nav>
|
|
<!-- END Sidebar -->
|
|
<!-- Header -->
|
|
<header th:replace="~{fragments/header-admin :: header}"></header>
|
|
<!-- END Header -->
|
|
<!-- Main Container -->
|
|
<main id="main-container">
|
|
<!-- Page Content -->
|
|
<!-- Card Container -->
|
|
<div class="content">
|
|
<div class="block block-rounded">
|
|
<div class="block-header bg-primary text-white">
|
|
<h3 class="block-title">Reasons For Booking</h3>
|
|
</div>
|
|
<div class="block-content">
|
|
<h4>Booking Reasons Details<span>*</span></h4>
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="bookingReason">Booking Reason:</label>
|
|
<div class="input-group">
|
|
<select class="form-control" id="bookingReason" name="bookingReason">
|
|
|
|
</select>
|
|
<div class="input-group-append">
|
|
<button type="button" class="btn btn-primary" id="addReasonField">
|
|
<i class="fas fa-plus fa-fw fa-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div id="maxdaysContainer" style="display:none">
|
|
<label for="maxdays">Max Days:</label>
|
|
<input type="text" id="maxdays" class="form-control">
|
|
</div>
|
|
</div>
|
|
<!-- Plus icon wrapped inside a box -->
|
|
<div class="row" id="inputBox" style="display:none">
|
|
<div class="col-md-4">
|
|
<div class="form-group">
|
|
<label for="bookingReason">Add New Reason:</label>
|
|
<input type="text" class="form-control" id="newReason"
|
|
placeholder="New Reason" required>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4" id="maxDaysContainer">
|
|
<div class="form-group">
|
|
<label for="maxdays">Max Days:</label>
|
|
<input type="text" class="form-control" id="newmaxdays"
|
|
placeholder="Max Days" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div id="documentDetailsTable" style="width:100%;display:none">
|
|
<h4>Booking Reasons Document Details<span>*</span></h4>
|
|
<div class="row">
|
|
<div>
|
|
<div class="col-md-9">
|
|
<table class="table" <thead>
|
|
<tr>
|
|
<th>Field Show</th>
|
|
<th>Field Label</th>
|
|
<th>Document Show</th>
|
|
<th>Document Label</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="documentDetailsBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<button type="button" class="btn btn-success" id="addDocumentRow"><i
|
|
class="fas fa-plus"></i></button>
|
|
</div>
|
|
</div>
|
|
<div style="text-align:right">
|
|
<button type="button" id="resetbutton" class="btn btn-danger">Reset</button>
|
|
<button type="button" id="reasondoc" class="btn btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<div th:replace="~{fragments/resetpassword :: div}"></div>
|
|
<script th:replace="~{fragments/loginscript :: script}"></script>
|
|
<script>
|
|
|
|
|
|
var rowcount = 0;
|
|
$(document).ready(function () {
|
|
$('#addReasonField').click(function () {
|
|
// Show the input box when plus icon is clicked
|
|
$('#inputBox').show();
|
|
$('#documentDetailsTable').show();
|
|
});
|
|
|
|
$('#bookingReason').change(function () {
|
|
if ($(this).val() === "0") {
|
|
// Disable the plus icon button
|
|
$('#addReasonField').prop('disabled', false);
|
|
|
|
} else {
|
|
// Enable the plus icon button if no selection is made
|
|
$('#addReasonField').prop('disabled', true);
|
|
$('#inputBox').hide();
|
|
}
|
|
var selectedReasonId = $(this).val();
|
|
if (selectedReasonId) {
|
|
// Show the table
|
|
$('#documentDetailsTable').show();
|
|
// Clear existing table rows
|
|
$('#documentDetailsBody').empty();
|
|
// Populate table fields based on selected reason
|
|
populateTableFields(selectedReasonId);
|
|
}
|
|
});
|
|
// Add new row when plus button is clicked
|
|
$('#addDocumentRow').click(function () {
|
|
rowcount += 1;
|
|
var newRow = `
|
|
<tr class="new-row">
|
|
<td>
|
|
<input type="hidden" class="form-control" name="reasonDocId_${rowcount}" value="0">
|
|
<label class="radio-inline"><input type="radio" name="addTextField_${rowcount}" value="1" checked> Yes</label>
|
|
<label class="radio-inline"><input type="radio" name="addTextField_${rowcount}" value="0"> No</label>
|
|
</td>
|
|
<td><input type="text" class="form-control" name="fieldName_${rowcount}" placeholder="Field Label"></td>
|
|
<td>
|
|
<label class="radio-inline"><input type="radio" name="addDocumentField_${rowcount}" value="1" checked> Yes</label>
|
|
<label class="radio-inline"><input type="radio" name="addDocumentField_${rowcount}" value="0"> No</label>
|
|
</td>
|
|
<td><input type="text" class="form-control" name="docFieldName_${rowcount}" placeholder="Document Label"></td>
|
|
<td><button type="button" class="btn btn-danger deleteRow"><i class="fas fa-minus"></i></button></td>
|
|
</tr>`;
|
|
$('#documentDetailsBody').append(newRow);
|
|
});
|
|
|
|
$('#resetbutton').click(function () {
|
|
window.location.reload();
|
|
});
|
|
// Delete row when minus button is clicked
|
|
$(document).on('click', '.deleteRow', function () {
|
|
$(this).closest('tr').remove();
|
|
if (rowcount > 0) {
|
|
rowcount -= 1;
|
|
}
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
// AJAX request to fetch all reasons from the API
|
|
$.ajax({
|
|
url: '/communityhall/admin/api/getReasons', // Your API endpoint
|
|
type: 'GET',
|
|
success: function (reasons) {
|
|
// Clear existing options
|
|
$('#bookingReason').empty();
|
|
$('#bookingReason').append('<option value="0" selected>Select a reason</option>');
|
|
|
|
// Append options to the dropdown
|
|
reasons.forEach(function (reason) {
|
|
$('#bookingReason').append('<option value="' + reason.reasonId + '" data-maxdays="' + reason.maxdays + '">' + reason.reason + '</option>');
|
|
});
|
|
},
|
|
error: function (xhr, status, error) {
|
|
}
|
|
});
|
|
|
|
// Event listener for dropdown change
|
|
$('#bookingReason').on('change', function () {
|
|
var selectedOption = $(this).find('option:selected');
|
|
var maxdays = selectedOption.data('maxdays');
|
|
|
|
// Display maxdays in the text field
|
|
if (maxdays !== undefined) {
|
|
$('#maxdays').val(maxdays);
|
|
$('#maxdaysContainer').show();
|
|
} else {
|
|
$('#maxdays').val(''); // Clear the field if no valid reason is selected
|
|
$('#maxdaysContainer').hide();
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
function populateTableFields(selectedReasonId) {
|
|
// AJAX request to fetch table fields from the API
|
|
$.ajax({
|
|
url: '/communityhall/admin/api/getReasonDocumentDetails?reasonId=' + selectedReasonId,
|
|
type: 'GET',
|
|
success: function (documentDetails) {
|
|
// Log the documentDetails to debug
|
|
$('#documentDetailsBody').empty();
|
|
|
|
// Append rows for each document detail
|
|
rowcount = documentDetails.length;
|
|
|
|
documentDetails.forEach(function (detail, index) {
|
|
// Create the new row
|
|
var newRow = `
|
|
<tr>
|
|
<td>
|
|
<input type="hidden" class="form-control" name="reasonDocId_${index}" value="${detail.reasonDocId}">
|
|
<label class="radio-inline"><input type="radio" name="addTextField_${index}" value="1"> Yes</label>
|
|
<label class="radio-inline"><input type="radio" name="addTextField_${index}" value="0"> No</label>
|
|
</td>
|
|
<td><input type="text" class="form-control" name="fieldName_${index}" value="${detail.fieldName}"></td>
|
|
<td>
|
|
<label class="radio-inline"><input type="radio" name="addDocumentField_${index}" value="1"> Yes</label>
|
|
<label class="radio-inline"><input type="radio" name="addDocumentField_${index}" value="0"> No</label>
|
|
</td>
|
|
<td><input type="text" class="form-control" name="docFieldName_${index}" value="${detail.docFieldName}"></td>
|
|
</tr>`;
|
|
|
|
// Convert the newRow string into a jQuery object
|
|
var $row = $(newRow);
|
|
|
|
// Set the radio button values based on the detail object's properties
|
|
$row.find(`input[name="addTextField_${index}"][value="${detail.addTextField ? '1' : '0'}"]`).prop('checked', true);
|
|
$row.find(`input[name="addDocumentField_${index}"][value="${detail.addDocumentField ? '1' : '0'}"]`).prop('checked', true);
|
|
|
|
// Append the row to the table body
|
|
$('#documentDetailsBody').append($row);
|
|
});
|
|
},
|
|
error: function (xhr, status, error) {
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
$(document).ready(function () {
|
|
// Add an event listener for the "add reason doc" button
|
|
$('#reasondoc').click(function () {
|
|
saveReasonAndDocument();
|
|
});
|
|
});
|
|
|
|
function saveReasonAndDocument() {
|
|
var reason = $('#bookingReason').val();
|
|
var maxdays = $('#maxdays').val();
|
|
var newreason = $('#newReason').val().trim().replace(/\s+/g, ' '); // Trim and remove extra spaces
|
|
var newmaxdays = $('#newmaxdays').val();
|
|
var data = {
|
|
"updatedBy": "Test",
|
|
"reasonDocumentMasterList": []
|
|
};
|
|
|
|
// Validate the reason
|
|
if (reason !== "0") {
|
|
data.reasonId = reason;
|
|
data.maxdays = maxdays;
|
|
data.reason = $('#bookingReason option:selected').text().trim().replace(/\s+/g, ' '); // Trim and remove extra spaces
|
|
} else if (newreason === "" || newmaxdays === "") {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Validation Error',
|
|
text: 'New Reason and MaxDays should not be empty.'
|
|
});
|
|
return; // Prevent further execution
|
|
} else {
|
|
data.reason = newreason;
|
|
data.maxdays = newmaxdays;
|
|
}
|
|
|
|
// Validate the document details
|
|
var valid = true;
|
|
$('#documentDetailsBody tr').each(function () {
|
|
var reasonDocId = $(this).find('input[name^="reasonDocId_"]').val();
|
|
var addTextField = $(this).find('input[name^="addTextField_"]:checked').val();
|
|
var addDocumentField = $(this).find('input[name^="addDocumentField_"]:checked').val();
|
|
var fieldName = $(this).find('input[name^="fieldName_"]').val().trim().replace(/\s+/g, ' '); // Trim and remove extra spaces
|
|
var docFieldName = $(this).find('input[name^="docFieldName_"]').val().trim().replace(/\s+/g, ' '); // Trim and remove extra spaces
|
|
|
|
// Check if fieldName is empty
|
|
if (addTextField === '1' && fieldName === "") {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Validation Error',
|
|
text: 'Field Name should not be empty.'
|
|
});
|
|
valid = false;
|
|
return false; // Break the loop
|
|
}
|
|
|
|
// Check if docFieldName is empty and addDocumentField is selected
|
|
if (addDocumentField === '1' && docFieldName === "") {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Validation Error',
|
|
text: "Document Label should not be empty if 'Document Show' is Yes."
|
|
});
|
|
valid = false;
|
|
return false; // Break the loop
|
|
}
|
|
|
|
var reasonDoc = {
|
|
"fieldName": fieldName,
|
|
"addTextField": addTextField === '1',
|
|
"docFieldName": docFieldName,
|
|
"addDocumentField": addDocumentField === '1'
|
|
};
|
|
|
|
// Include reasonDocId if it's not zero (indicating an existing entry)
|
|
if (reasonDocId && reasonDocId !== "0") {
|
|
reasonDoc.reasonDocId = reasonDocId;
|
|
}
|
|
|
|
data.reasonDocumentMasterList.push(reasonDoc);
|
|
});
|
|
|
|
// If validation failed, stop further execution
|
|
if (!valid) {
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/communityhall/admin/api/saveReason',
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify(data),
|
|
success: function (response) {
|
|
window.location.reload(); // Reload the page on success
|
|
},
|
|
error: function (xhr, status, error) {
|
|
console.error('Error saving reason and document details:', error);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|