electionDashboard/target/classes/templates/metro/report.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/head-public :: head}"></head>

<meta charset="ISO-8859-1">
<title>Metro Water</title>
<style>
	.input-group-append {
  cursor: pointer;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<!-- <div class="loader" id="loader"></div> -->

<body> 
	
 <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 :: nav}"></nav>
		<!-- END Sidebar --> 

		<!-- Header -->
		<header th:replace="~{fragments/header :: header}"></header>
		<!-- END Header -->
        <!-- Main Container -->
        <main id="main-container">
	        <!-- Hero -->
	        <div class="">
	          <div class="content content-full">
	            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
	              <h3 class="flex-grow-1 fs-5 fw-semibold my-2 my-sm-3">Welcome</h3>
	              <nav class="flex-shrink-0 my-2 my-sm-0 ms-sm-3" aria-label="breadcrumb">
	                <ol class="breadcrumb">
	                  <li class="breadcrumb-item active" aria-current="page">Home
	                </ol>
	              </nav>
	            </div>
	          </div>
	        </div>
	        <!-- END Hero -->
			<div class="content">
	 			<div class="block block-rounded">
	 	            <div class="block-header block-header-default">
	 	              <h3 class="block-title">Metro Water Dept Report</h3>
	 	              <div class="block-options">
	 	              </div>
	 	            </div>
	 	            

								  <form class="" action="/api/download1" onsubmit="getReport()">
									<div class="row">

									<div class="col">
										<label for="fromDate" class="">From Date</label>
											<input type="date" class="form-control" id="fromDate" name="fromdate" data-date-format="dd/mm/yy" required/>
									</div>
									
									<div class="col">
										<label for="toDate" class="">To Date</label>
										<input type="date" class="form-control" id="toDate" name="todate"  data-date-format="dd/mm/yy" required/>
									</div>

									<div class="col">
										<label for="type" class="">Type</label>
										<select class="form-select" id="type" name="type" aria-label="Default select example" required>
											<option selected></option>
											<option value="new" selected>New</option>
											<option value="modify">Modify</option>
											<option value="deActive">De Active </option>
											<option value="deActiveWithRemark">De Active With Remark</option>
											<option value="nameTransfer">Name Transfer </option>
											<option value="entries">Metro Water Entries  </option>
										</select>
									</div>

									  <div class="col">
									  <br>
									  <button type="submit" class="btn btn-sm btn-primary btn-lg float-right">Export</button>
									</div>
									</div>
								  </form>

							  <div class="card col-6" id="msg" >
								<div class="card-body">
									<p>please wait Excel is generating</p>
								</div>




				</div>
 	            </div>
            </div>
      	</main>
  	</div>

	<script th:replace="~{fragments/script :: script}"></script>

	<script>
	const fromDateInput = document.getElementById('fromDate');
    const toDateInput = document.getElementById('toDate');

    // Listen for changes to the "from" date
    fromDateInput.addEventListener('change', function () {
      // Get the selected "from" date
      const fromDate = new Date(this.value);

      // Enable the "to" date input
      toDateInput.disabled = false;

      // Set the minimum allowed "to" date to the selected "from" date
      toDateInput.min = this.value;

      // You can also set a default "to" date (e.g., one day after "from" date)
      const toDate = new Date(fromDate);
      toDate.setDate(fromDate.getDate() + 1);
      toDateInput.valueAsDate = toDate;
    });
        // Listen for changes to the "to" date
    toDateInput.addEventListener('change', function () {
      // Get the selected "to" date
      const toDate = new Date(this.value);

      // Get today's date
      const today = new Date();

      // If the selected "to" date is greater than today's date, reset it to today's date
      if (toDate > today) {
        toDateInput.valueAsDate = today;
      }
    });

	function getReport(){
		var x = document.getElementById("msg");
		if (x.style.display === "none") {
			x.style.display = "block";
		}

		return false;
	}

	document.onreadystatechange = function() {
    if (document.readyState !== "complete") {
        document.querySelector("body").style.visibility = "hidden";
        document.querySelector("#msg").style.visibility = "visible";
    } else {
        document.querySelector("#msg").style.display = "none";
        document.querySelector("body").style.visibility = "visible";
    }
	};
	</script>
</body>
</html>