ARO_Login_page/src/main/webapp/getAbstractReport.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="initial-scale=1">
<title>Welcome to Greater Chennai Corporation</title>
<link rel="stylesheet" href="styles.css" />
<style>
body {
	background-image: url("bg.jpg");
	height: 500px; 
	background-position: center; 
	background-repeat: no-repeat; 
	background-size: cover;
}
</style>
</head>
<body>
	<form action="data.jsp" class="form" method="post">
		<h2 class="heading">Property Tax Appointment Report</h2>
		<center>
			<div class="inputcontainer">
				<label class="label" for="zone"> Zone </label> &nbsp;				
			  <select class="blockinput" name="zone" id="zone"> 
              <option value="0">Select Zone</option>
              <option value="01">01</option>
              <option value="02">02</option>
              <option value="03">03</option>
              <option value="04">04</option>
              <option value="05">05</option>
              <option value="06">06</option>
              <option value="07">07</option>
              <option value="08">08</option>
              <option value="09">09</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
            </select> &nbsp;
				&nbsp; &nbsp; &nbsp;
            <button type="button" class="button" id="button" onclick="getAppointmentsByZone()">Search</button>
			</div>
		</center>
		<div class="container12" style="margin-bottom: 0px;">
			<div class="propertyid">DIVISION</div>
			<div class="name">COMPLETED</div>
			<div class="address">PENDING</div>

		</div>
		<span id="data"></span>
	</form>
	<script
		src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		function getAppointmentsByZone(){
			$('#data').html('');
			$('#button').text('Searching');
			$('#button').attr('disabled', true);
			$.post('getAbstractReport.jsp',{
				'zone': $('#zone').val()
			},function(response){
				if(response[0].error == "1"){
					$('#data').html('<center>NO APPOINTMENTS FOUND</center>');
				}
				$('#button').text('Search');
				$('#button').attr('disabled', false);
				var data = [];					
					$(response).each(function(){
						console.log(this);
						if(typeof this.app_property_id == 'undefined') return;
						var property_id = (this.app_property_id).split("-");
						var key = property_id[0]+'-'+property_id[1];
						//console.log('key: '+key);
						//console.log(data);
						if(typeof data[key] == 'undefined'){
							//console.log('key1: ' + key);
							data[key] = [];
							data[key]['count'] = 1;
							
							if(this.pending == 'Y'){
								data[key]['pending'] = 1;
								data[key]['completed'] = 0;
							} else{
								data[key]['completed'] = 1;
								data[key]['pending'] = 0;
							}
							
							$('#data').append(`<center><div class="container12" style="margin-top: 0px;margin-bottom: 0px;">	
									<div class="request" style="background-color:#fff">`+property_id[1]+`</div>
									<div class="division" style="background-color:#fff" id="`+key+`_completed">`+data[key]['completed']+`</div>
									<div class="division" style="background-color:#fff" id="`+key+`_pending">`+data[key]['pending']+`</div>
								</div></center>`);
						}else{
							data[key]['count']++;
							
							//console.log('key: ' + key);
							if(this.pending == 'Y'){
								data[key]['pending']++;
								$('#'+key+'_pending').html(data[key]['pending']);
							} else {
								data[key]['completed']++;
								$('#'+key+'_completed').text(data[key]['completed']);
							}
						}
						
						if(this.count > 0){
							$('#data').append(`<center><div class="container11" style="margin-top: 0px;margin-bottom: 0px;">	
												<div class="division" style="background-color:#fff">`+this.division+`</div>
												<div class="request" style="background-color:#fff">`+this.count+`</div>
											</div></center>`);								
						}
					});				
			});
		}		
	</script>
	 
</body>
</html>