PGR_Complaints/pgr/index.html

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}">

<script type="text/javascript"
	src="https://www.gstatic.com/charts/loader.js"></script>

<script
	src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>

<style>
.chart-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	box-sizing: border-box;
	/* Optionally set the height to fill the container */
}
</style>

<body>

	<div class="wrapper">

		<!-- header top menu Start -->

		<header th:replace="~{fragments/modules/base/header :: header}"></header>

		<!-- header top menu end -->

		<div class="page-wrap">

			<!--=============== Left Menu side Start ================-->

			<div th:replace="~{fragments/modules/base/menu :: menu}"></div>

			<!--=============== Left side End ================-->

			<div class="main-content">

				<div class="container-fluid">

					<div class="page-header mb-2">

						<div class="row align-items-end">

							<div class="col-lg-8">

								<div class="page-header-title">

									<i class="ik ik-bar-chart-2 bg-blue"></i>

									<div class="d-inline">

										<h5>PGR Report</h5>

										<span>Public Grievance Redressal Complaint Report</span>

									</div>

								</div>

							</div>

							<div class="col-lg-4">

								<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">Dashboard</li>

									</ol>

								</nav>

							</div>

						</div>

					</div>

					<h4 class="h4 text-right text-mute" style="font-size: 12px;">

						Auto refresh in <font id="refresh-countdown">00</font> seconds

					</h4>

					<br>

					<form class="" action="" onsubmit="getByZone()">

						<div class="row">

							<div class="col-md-4">

								<label for="fromDate" class="">From Date</label> <input
									type="date" class="form-control" id="fromDate" name="sFrDate"
									th:value="${sFrDate}" data-date-format="dd/mm/yy" required>

							</div>

							<div class="col-md-4">

								<label for="toDate" class="">To Date</label> <input type="date"
									class="form-control" id="toDate" name="sToDate"
									th:value="${sToDate}" data-date-format="dd/mm/yy" required>

							</div>



							<div class="col-md-4">

								<label for="DepartmentDropdown">Select AgeAnalysis
									Department for PieChart:</label> <select class="form-control"
									name="DEPT_NAME" id="zone">

									<option value='0' th:selected="${DEPT_NAME == 0}">----All
										----</option>

									<option th:each="complaintdepartment : ${complaintdept1}"
										th:value="${complaintdepartment.name}"
										th:text="${complaintdepartment.name}"
										th:selected="${DEPT_NAME == complaintdepartment.name}"></option>

								</select>

							</div>

							<div class="col-md-4">

								<label for="DepartmentDropdown">Select Department
									Department for BarChart:</label> <select class="form-control"
									name="DEPTID" id="zonewithreopenbar">

									<option value='0' th:selected="${DEPTID == 0}">----All
										----</option>

									<option th:each="complaintdepartment : ${complaintdept}"
										th:value="${complaintdepartment.id}"
										th:text="${complaintdepartment.name}"
										th:selected="${DEPTID == complaintdepartment.id}"></option>

								</select>

							</div>

							<div class="col-md-4"
								style="display: flex; justify-content: space-between; align-items: center; margin-top: 25px;">

								<button type="submit" style="height: auto; width: 90%;"
									class="btn btn-primary">Search</button>

							</div>

						</div>

					</form>

					<br>

					<div class="row"
						style="max-width: 100%; max-height: 100%; overflow: auto;">

						<div class="col-md-12">

							<div class="card sale-card"
								style="max-width: 150%; max-height: 150%; height: 100%; width: auto; overflow: auto;">

								<div class="card-block"
									style="max-width: 100%; max-height: 90%; height: 90%; width: auto; overflow: auto;">

									<svg id="chart-container" xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet"
										style="max-width: 100%; max-height: 100%;">

 <foreignObject width="100%" height="100%">

 <div id="totalpiechart" style="width: 50%; height: auto; float: left;"></div>

 <div id="reopenpiechart" style="width: 50%; height: auto; float: left;"></div>



 </foreignObject>

 </svg>

								</div>

								<div class="card-block"
									style="max-width: 100%; max-height: 100%; height: 100%; width: auto; overflow: auto;">

									<svg id="chart-container" xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet"
										style="max-width: 100%; max-height: 100%;">

 <foreignObject width="100%" height="100%">

 
 <div id="barchart" style="width: 50%; height: auto; float: left;"></div>

 
 </foreignObject>

 </svg>

								</div>

								<div class="card-block"
									style="max-width: 100%; max-height: 100%; height: 100%; width: auto; overflow: auto;">

									<svg id="chart-container" xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet"
										style="max-width: 100%; max-height: 100%;">

 <foreignObject width="100%" height="100%">



 <div id="reopenbarchart" style="width: 50%; height: auto; float: left;"></div>

 </foreignObject>

 </svg>

								</div>

							</div>

						</div>

					</div>

					<br>

				</div>

				<br>



			</div>
			<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
		</div>

	</div>



	<!-- Model Box -->



	<div class="modal" id="addEvent" tabindex="-1" role="dialog"
		aria-labelledby="addEventLabel" aria-hidden="true">




		<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>



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

		<script src="/assets/node_modules/amcharts3/amcharts/amcharts.js"></script>

		<script src="/assets/node_modules/amcharts3/amcharts/serial.js"></script>

		<script src="/assets/node_modules/amcharts3/amcharts/themes/light.js"></script>

		<script
			src="/assets/node_modules/fullcalendar/dist/fullcalendar.min.js"></script>

		<script
			src="/assets/node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>



		<script>



$(document).ready(function () {

 $.ajax({

 url: '/pgr/daskboard', // Change this URL to your endpoint

 type: 'GET',

 success: function (data) {

 var dropdown = $('#DepartmentDropdown')

 $.each(data, function (index, complaintdepartment) {

 dropdown.append($('<option></option>').attr('value', complaintdepartment.id).text(complaintdepartment.name));

 });

 },

 });

});



function getByZone(){

	alert("Wait for response..")

	let DEPT_NAME = document.getElementById("zone").value;

	let DEPTID = document.getElementById("zonewithreopenbar").value;

	window.location.href='/dashboard?zone='+DEPT_NAME +'&zonewithreopenbar='+DEPTID;

}




</script>



		<script type="text/javascript"
			src="https://www.gstatic.com/charts/loader.js"></script>

		<script type="text/javascript" th:inline="javascript">


 var daysDataTotal = [

 [(${ageanalysisdashboardList[0].DAYS_0_15_PEN})],

 [(${ageanalysisdashboardList[0].DAYS_16_30_PEN})],

 [(${ageanalysisdashboardList[0].DAYS_31_60_PEN})],

 [(${ageanalysisdashboardList[0].DAYS_61_90_PEN})],

 [(${ageanalysisdashboardList[0].DAYS_90_PEN})]

 ]; 

 



 var daysDataReopen = [

 [(${ageanalysisdashboardList[0].DAYS_0_15_REOPEN})],

 [(${ageanalysisdashboardList[0].DAYS_16_30_REOPEN})],

 [(${ageanalysisdashboardList[0].DAYS_31_60_REOPEN})],

 [(${ageanalysisdashboardList[0].DAYS_61_90_REOPEN})],

 [(${ageanalysisdashboardList[0].DAYS_90_REOPEN})]

 ]; 

 



 google.charts.load('current', {'packages': ['corechart']});

 google.charts.setOnLoadCallback(drawPieCharts); // Use a new callback for pie charts

 google.charts.setOnLoadCallback(drawBarCharts); // Use a new callback for bar charts

 function drawPieCharts() {

 console.log("Pie charts");

 var dataTotal = google.visualization.arrayToDataTable([

 ['Category', 'Count'],

 ['0-15 Days Pending', daysDataTotal[0]],

 ['16-30 Days Pending', daysDataTotal[1]],

 ['31-60 Days Pending', daysDataTotal[2]],

 ['61-90 Days Pending', daysDataTotal[3]],

 ['Above 90 Days Pending', daysDataTotal[4]],

 ]);



 var dataReopen = google.visualization.arrayToDataTable([

 ['Category', 'Count'],

 ['0-15 Days Reopen', daysDataReopen[0]],

 ['16-30 Days Reopen', daysDataReopen[1]],

 ['31-60 Days Reopen', daysDataReopen[2]],

 ['61-90 Days Reopen', daysDataReopen[3]],

 ['Above 90 Days Reopen', daysDataReopen[4]],

 ]);



 var optionspiepen = {

 'title': 'Overall Pending Complaint Info ',	

 'legend': 'bottom',

 'height': '500',

 'width': '500',

 'colors': ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad']

 

 };

 

 

 var optionspiere = {

 'title': 'Overall Reopen Complaint Info',

 'legend': 'bottom',

 'height': '500',

 'width': '500',

 'colors': ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad']

 

 };

 

 



 var piechartTotal = new google.visualization.PieChart(document.getElementById('totalpiechart'));

 var piechartReopen = new google.visualization.PieChart(document.getElementById('reopenpiechart'));



 piechartTotal.draw(dataTotal, optionspiepen);

 piechartReopen.draw(dataReopen, optionspiere);

 } 

 

 var zoneDatawithReopen = [

 [(${zonewisedashboardList[0].NonBURSTLT})],

 [(${zonewisedashboardList[0].REOFGAR})],

 [(${zonewisedashboardList[0].ROAD})],

 [(${zonewisedashboardList[0].MOSQUITE})],

 [(${zonewisedashboardList[0].WATER})],

 [(${zonewisedashboardList[0].REOFDEB})],

 [(${zonewisedashboardList[0].TREE})],

 [(${zonewisedashboardList[0].DOGS})],

 [(${zonewisedashboardList[0].ENCMTN})],

 [(${zonewisedashboardList[0].POT})],

 [(${zonewisedashboardList[0].PTAX})],

 /* [(${zonewisedashboardList[0].OTHERS})],

 [(${zonewisedashboardList[0].TOTAL})] */

 ];



 

 var zoneDatawithoutReopen = [

 [(${reopenzonewisedashboardList[0].NonBURSTLT})],

 [(${reopenzonewisedashboardList[0].REOFGAR})],

 [(${reopenzonewisedashboardList[0].ROAD})],

 [(${reopenzonewisedashboardList[0].MOSQUITE})],

 [(${reopenzonewisedashboardList[0].WATER})],

 [(${reopenzonewisedashboardList[0].REOFDEB})],

 [(${reopenzonewisedashboardList[0].TREE})],

 [(${reopenzonewisedashboardList[0].DOGS})],

 [(${reopenzonewisedashboardList[0].ENCMTN})],

 [(${reopenzonewisedashboardList[0].POT})],

 [(${reopenzonewisedashboardList[0].PTAX})],

 /* [(${reopenzonewisedashboardList[0].OTHERS})],

 [(${reopenzonewisedashboardList[0].TOTAL})] */

 ];



 function drawBarCharts() {

 console.log("Bar charts");


 var zonewithReopen = google.visualization.arrayToDataTable([

 ['Category', 'Count'],

 ['Street Light not burning', zoneDatawithReopen[0]],

 ['Removal of Garbage', zoneDatawithReopen[1]],

 ['Road Damaged', zoneDatawithReopen[2]],

 ['Mosquito Nuisance', zoneDatawithReopen[3]],

 ['Water Stagnation', zoneDatawithReopen[4]],

 ['Removal of Debries', zoneDatawithReopen[5]],

 ['Tree Fallen', zoneDatawithReopen[6]],

 ['Dog Menace', zoneDatawithReopen[7]],

 ['Encroachment', zoneDatawithReopen[8]],

 ['Potshole', zoneDatawithReopen[9]],

 ['Property Tax', zoneDatawithReopen[10]],

 /* ['Others', zoneDatawithReopen[11]],

 ['Total', zoneDatawithReopen[12]], */

 

 ]);

 

 var zonewithoutReopen = google.visualization.arrayToDataTable([

 ['Category', 'Count'],

 ['Street Light not burning', zoneDatawithoutReopen[0]],

 ['Removal of Garbage', zoneDatawithoutReopen[1]],

 ['Road Damaged', zoneDatawithoutReopen[2]],

 ['Mosquito Nuisance', zoneDatawithoutReopen[3]],

 ['Water Stagnation', zoneDatawithoutReopen[4]],

 ['Removal of Debries', zoneDatawithoutReopen[5]],

 ['Tree Fallen', zoneDatawithoutReopen[6]],

 ['Dog Menace', zoneDatawithoutReopen[7]],

 ['Encroachment', zoneDatawithoutReopen[8]],

 ['Potshole', zoneDatawithoutReopen[9]],

 ['Property Tax', zoneDatawithoutReopen[10]],

 /* ['Others', zoneDatawithoutReopen[11]],

 ['Total', zoneDatawithoutReopen[12]], */

 

 ]);

 

 var optionszonewithreopencolumn = {

 'title': 'Zonewise (With Reopen) ',	

 'legend': 'bottom',

 'height': '500',

 'width': '1100',

 "useLineColorForBulletBorder": true,

 'colors': ['Green', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen'],

 'responsive':true

 };



 var optionszonewithoutreopencolumn = {

 'title': 'Zonewise (Without Reopen) ',	

 'legend': 'bottom',

 'height': '500',

 'width': '1100',

 "useLineColorForBulletBorder": true,

 'colors': ['Red', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen'],

 'responsive':true

 };

 

 

 var barchartReopen = new google.visualization.ColumnChart(document.getElementById('reopenbarchart'));

 var barchartwithReopen = new google.visualization.ColumnChart(document.getElementById('barchart'));

 


 barchartReopen.draw(zonewithoutReopen, optionszonewithoutreopencolumn);

 barchartwithReopen.draw(zonewithReopen, optionszonewithreopencolumn);

 } 


</script>
</body>

</html>