yoganandhank
/
PGR_Complaints
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Updated index file 

Updated index file
master
yoganandhank 3 years ago
parent
6ca6cd8d4f
commit
2d1dc787f0
1 changed files with 484 additions and 280 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 356
      pgr/index.html

356
pgr/index.html
View File

@ -1,15 +1,13 @@
<!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>
@ -22,51 +20,80 @@
/* Optionally set the height to fill the container */
}
</style>
<body>
<link rel="stylesheet"
href="/assets/node_modules/fullcalendar/dist/fullcalendar.min.css">
<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>
<!--............. This is form for select departments to show bar and pie chart ............ -->
<form class="" action="" onsubmit="getByZone()">
<div class="row">
@ -89,49 +116,56 @@
<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 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 ZoneWise
<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 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="width: 90%; height: auto;"
class="btn btn-sm btn-primary">Submit</button>
<button type="submit" style="height: auto; width: 90%;"
class="btn btn-primary">Search</button>
</div>
</div>
</form>
<br>
<!-- ..................Styles and design for bar and PieChart............. -->
<div class="row"
style="max-width: 100%; max-height: 100%; overflow: auto;">
@ -149,11 +183,11 @@
<foreignObject width="100%" height="100%">
<div id="totalpiechart"
style="width: 50%; height: auto; float: left;"></div>
<div id="totalpiechart" style="width: 50%; height: auto; float: left;"></div>
<div id="reopenpiechart" style="width: 50%; height: auto; float: left;"></div>
<div id="reopenpiechart"
style="width: 50%; height: auto; float: left;"></div>
</foreignObject>
@ -162,7 +196,7 @@
</div>
<div class="card-block"
style="max-width: 100%; max-height: 100%; height: 90%; width: auto; overflow: auto;">
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"
@ -171,8 +205,9 @@
<foreignObject width="100%" height="100%">
<div id="barchart"
style="width: 50%; height: auto; float: left;"></div>
<div id="barchart" style="width: 50%; height: auto; float: left;"></div>
</foreignObject>
</svg>
@ -187,8 +222,10 @@
style="max-width: 100%; max-height: 100%;">
<foreignObject width="100%" height="100%">
<div id="reopenbarchart"
style="width: 50%; height: auto; float: left;"></div>
<div id="reopenbarchart" style="width: 50%; height: auto; float: left;"></div>
</foreignObject>
@ -202,278 +239,445 @@
</div>
<!--.................... end ............. -->
<br>
<!-- First Tile End -->
</div>
<br>
</div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
</div>
<footer th:replace="~{fragments/modules/base/footer :: footer}"></footer>
</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>
//alert('Select departments to load data....');
$(document).ready(function () {
$.ajax({
url: '/pgr/dashboard', // Change this URL to your endpoint
url: '/pgr/daskboard', // Change this URL to your endpoint
type: 'GET',
success: function (data) {
var dropdown = $('#DepartmentDropdown');
var dropdown = $('#DepartmentDropdown')
$.each(data, function (index, complaintdepartment) {
dropdown.append($('<option></option>').attr('value', complaintdepartment.id).text(complaintdepartment.name));
});
},
//error: function () {
// alert('Select departments to load data....');
// }
});
});
function getByZone(){
alert("Wait for response to load data...")
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">
/*------------- Pie and bar chart-------------- */
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})]
];
/* var daysDataTotal = [];
var daysDataReopen = [];
if (ageanalysisdashboardList.length > 0) {
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})]
];
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})]
];
} else {
alert("No data available in the ageanalysis department.");
} */
/* if (ageanalysisdashboardList.length === 0) {
alert("No data available for this department. Please choose a different department.");
} */
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);
}
<!-- Bar chart -->
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})]
/* [(${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})]
/* [(${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]],
/* ['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]],
/* ['Others', zoneDatawithoutReopen[11]],
['Total', zoneDatawithoutReopen[12]], */
]);
var optionszonewithreopencolumn = {
'title': 'Zonewise (With Reopen) Complaints ',
'title': 'Zonewise (With Reopen) ',
'legend': 'bottom',
'height': '500',
'width': '1100',
"useLineColorForBulletBorder": true,
'colors': ['Green', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen','Violet', 'Gold'],
'colors': ['Green', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen'],
'responsive':true
};
var optionszonewithoutreopencolumn = {
'title': 'Zonewise (Without Reopen) Complaints ',
'title': 'Zonewise (Without Reopen) ',
'legend': 'bottom',
'height': '500',
'width': '1100',
"useLineColorForBulletBorder": true,
'colors': ['Red', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen','Violet', 'Gold'],
'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);
barchartwithReopen.draw(zonewithReopen, optionszonewithreopencolumn);
}
</script>
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save