communityhallv22/target/classes/templates/admin/notification.html

<!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">
				<div class="content">
					<div class="block block-rounded">
						<div class="block-header block-header-default">
							<h3 class="block-title"> Notification</h3>
							<div class="block-options">
								<button type="button" class="btn-block-option" id="addButton" onclick="adddnewnotification()"><i
										class="far fa-plus-square"></i> Add New Notification</button>
							</div>
						</div>

						<!-- Page Content -->
						<div class="content">
							<div class="block block-rounded">
								<div class="block-content p-0">
									<div class="p-sm-4 p-0">
										<div class="table-responsive">
											<table id="discountrangetable"
												class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
												<thead class="thead-light">
													<tr class="table-bordered">
														<th class="text-center no-sort">S.No</th>
														<th class="text-center text-wrap" width="20%">Notification Message</th>
														<th class="text-center">Created date</th>
														<th class="text-center">created BY</th>
														<th class="text-center">Action</th>
													</tr>
												</thead>
												<tbody>
													<tr th:each="newnotifications, rowStat : ${newnotifications}">

														<td class="text-center" th:text="${rowStat.index + 1}"></td>
														<td class="text-center" th:text="${newnotifications.notification_description}"></td>
														<td class="text-center" th:text="${newnotifications.cdate}"></td>
														<td class="text-center" th:text="${newnotifications.createdBY}"></td>
														<td class="text-center">
															<a href="javascript:void(0);"
																th:onclick="return callDelete( [[${newnotifications.id}]] );"
																data-bs-toggle="tooltip" data-bs-animation="true"
																data-bs-placement="top" title="Delete"><i
																	class="far fa-trash-can"
																	style="font-size: 18px;"></i></a>
															</a>
														</td>
													</tr>

												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- new Discount -->
						<div class="modal fade" id="saveModal" tabindex="-1" role="dialog"
							aria-labelledby="saveModalLabel" aria-hidden="true">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="saveModalLabel">Save New Notification</h5>
										<button type="button" class="btn-block-option" data-bs-dismiss="modal">
											<i class="fa fa-fw fa-times"></i>
										</button>

									</div>
									<div class="modal-body">
										<form id="saveForm">
											<div class="form-group">
												<label for="userType">Notification Message</label>
												<textarea class="form-control " name="notification" id="notification" required style="height: 9px;"></textarea>
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-secondary"
											data-bs-dismiss="modal">Close</button>
										<button type="button" class="btn btn-primary" id="savenotification">Save</button>
									</div>
								</div>
							</div>
						</div>


						<!-- Edit Form -->
						<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
							aria-labelledby="editModalLabel" aria-hidden="true">
							<div class="modal-dialog" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title" id="editModalLabel">Edit Discount Range</h5>
										<button type="button" class="btn-block-option" data-bs-dismiss="modal">
											<i class="fa fa-fw fa-times"></i>
										</button>

									</div>
									<div class="modal-body">
										<form id="editForm">
											<input type="hidden" id="editId">
											<div class="form-group">
												<label for="editUsertype">User Type</label>
												<input type="text" class="form-control" id="editUsertype" readonly>
											</div>
											<div class="form-group">
												<label for="editDiscountRange">Discount Range in Percentage</label>
												<input type="text" class="form-control" id="editDiscountRange"
													placeholder="Discount Range in %" required>
											</div>
											<div class="form-group">
												<label for="editCDate">Creation Date</label>
												<input type="date" class="form-control" id="editCDate" readonly>
											</div>
											<div class="form-group">
												<label for="editUpdatedBy">Updated By</label>
												<input type="text" class="form-control" id="editUpdatedBy" readonly>
											</div>
										</form>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-secondary"
											data-bs-dismiss="modal">Close</button>
										<button type="button" class="btn btn-primary" id="saveChanges">Save
											changes</button>
									</div>
								</div>
							</div>
						</div>
			</main>
			<div th:replace="~{fragments/resetpassword :: div}"></div>
			<footer th:replace="~{fragments/footer2 :: footer}"></footer>
			<script th:replace="~{fragments/loginscript :: script}"></script>
			<script>

				$(document).ready(
					function () {
						var buttons = [{
							extend: 'pageLength',
							className: 'btn btn-primary'
						}, {
							title: 'Data export',
							extend: 'copyHtml5',
							text: 'Copy',
							className: 'btn btn-primary',
							id: 'copyBtn'
						}, {
							extend: 'excelHtml5',
							text: 'Excel',
							className: 'btn btn-primary',
							id: 'excelBtn'
						}, {
							extend: 'csvHtml5',
							text: 'CSV',
							className: 'btn btn-primary',
							id: 'csvBtn'
						}, {
							extend: 'pdfHtml5',
							text: 'PDF',
							className: 'btn btn-primary',
							id: 'pdfBtn'
						},

						];
						$('#discountrangetable').DataTable(
							{
								dom: 'Bftip',
								columnDefs: [{
									targets: 'no-sort',
									orderable: false
								}],
								lengthMenu: [
									[50, 100, 200, 500, -1],
									['50 rows', '100 rows', '200 rows',
										'500 rows', 'Show all']],
								scrollY: '50vh',
								fixedColumns: {
									left: 1,
									right: 1
								},
								buttons: [buttons],
								responsive: true,
								searching: true, // Enable search
								select: false,
								processing: false,
							});

						// Link the search input to DataTable
						$('#searchInput').on('keyup', function () {
							dataTable.search(this.value).draw();
						});

					});
				function openEditModal(id) {
					$.ajax({
						type: "GET",
						url: '/communityhall/admin/api/getDiscountDetails',
						data: {
							'id': id
						},
						success: function (response) {
							$('#editId').val(response.id);
							$('#editUsertype').val(response.usertype);
							$('#editDiscountRange').val(response.discountRange);
							$('#editCDate').val(response.cDate);
							$('#editUpdatedBy').val(response.updtedBy);
							$('#editModal').modal('show');
						}
					});
				}

				function adddnewnotification() {
					$('#saveModal').modal('show');
				}
				$('#savenotification').click(function () {
					var notification = $('#notification').val();
					if (notification=='') {
				Swal.fire(
					'Error!',
					'Please Enter the Notification.',
					'error'
				);
				return false;
			}
					$.ajax({
						type: "POST",
						url: "/communityhall/admin/api/savenotification",
						data: {
							notification: notification
						},
						success: function (response) {
							if (response === 'success') {
								Swal.fire(
									'Saved!',
									'Details saved successfully.',
									'success'
								).then(() => {
									location.reload();
								});
							}
						},
						error: function (xhr, status, error) {
							Swal.fire(
								'Error!',
								'Failed to update the discount range.',
								'error'
							);
						}
					});
				});


				$('#saveChanges').click(function () {
					var id = $('#editId').val();
					var discountRange = $('#editDiscountRange').val();

					// Log the data to the console for debugging

					$.ajax({
						type: "PUT",
						url: "/communityhall/admin/api/updateById/" + id,
						data: {
							'id': id,
							'discountRange': discountRange,
						},
						success: function (data) {
							Swal.fire(
								'Updated!',
								'Discount range ' + id + ' has been updated.',
								'success'
							).then(() => {
								location.reload();
							});
						},
						error: function (xhr, status, error) {
							console.error('Error occurred during the PUT request:', xhr.responseText);
							Swal.fire(
								'Error!',
								'Failed to update the discount range ' + id + ': ' + xhr.responseText,
								'error'
							);
						}
					});
				});

				function callDelete(id) {
					Swal.fire({
						title: 'Are you sure you want to delete this?',
						text: "You won't be able to revert this!",
						icon: 'warning',
						showCancelButton: true,
						confirmButtonColor: '#3085d6',
						cancelButtonColor: '#d33',
						confirmButtonText: 'Yes, delete it!'
					}).then(function (result) {
						if (result.isConfirmed) {
							$.ajax({
								type: "POST",
								url: "/communityhall/admin/api/deletenotificationById/" + id,
								success: function (data) {
									Swal.fire(
										'Deleted!',
										'Entry ' + id + ' has been deleted.',
										'success'
									).then(() => {
										location.reload();
									});
								},
								error: function (xhr, status, error) {
									Swal.fire(
										'Error!',
										'Failed to delete entry ' + id + ': ' + xhr.responseText,
										'error'
									);
								}
							});
						}
					});
				}
				document.addEventListener('DOMContentLoaded', function () {
				    function clearModalFields(modalId) {
				        const modal = document.getElementById(modalId);
				        if (modal) {
				            // Clear text inputs and select elements
				            modal.querySelectorAll('input[type="text"], input[type="date"], select').forEach(input => {
				                if (input.tagName === 'SELECT') {
				                    input.selectedIndex = 0; // Reset to default option
				                } else {
				                    input.value = ''; // Clear text inputs
				                }
				            });
				        }
				    }
				
				    // Clear fields when the saveModal is hidden
				    document.getElementById('saveModal').addEventListener('hidden.bs.modal', function () {
				        clearModalFields('saveModal');
				    });
				});
			</script>

	</body>

</html>