Browse Source

Updated index file

Updated index file
master
yoganandhank 3 years ago
parent
commit
2d1dc787f0
  1. 752
      pgr/index.html

752
pgr/index.html

@ -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,56 +20,85 @@
/* 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">
<div class="col-md-4">
<div class="col-md-4">
<label for="fromDate" class="">From Date</label> <input
type="date" class="form-control" id="fromDate" name="sFrDate"
@ -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 "
<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;">
@ -147,35 +181,36 @@
viewBox="0 0 1000 500" preserveAspectRatio="xMidYMid meet"
style="max-width: 100%; max-height: 100%;">
<foreignObject width="100%" height="100%">
<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>
</svg>
</foreignObject>
</svg>
</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"
style="max-width: 100%; max-height: 100%;">
<foreignObject width="100%" height="100%">
<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>
</foreignObject>
</svg>
</svg>
</div>
@ -186,13 +221,15 @@
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 width="100%" height="100%">
</foreignObject>
</svg>
<div id="reopenbarchart" style="width: 50%; height: auto; float: left;"></div>
</foreignObject>
</svg>
</div>
@ -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 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>
<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>
<script>
//alert('Select departments to load data....');
$(document).ready(function () {
$.ajax({
url: '/pgr/dashboard', // 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));
});
$.ajax({
url: '/pgr/daskboard', // Change this URL to your endpoint
type: 'GET',
success: function (data) {
var dropdown = $('#DepartmentDropdown')
},
$.each(data, function (index, complaintdepartment) {
//error: function () {
// alert('Select departments to load data....');
// }
});
dropdown.append($('<option></option>').attr('value', complaintdepartment.id).text(complaintdepartment.name));
});
},
});
});
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;
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})]
];
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) Complaints ',
'legend': 'bottom',
'height': '500',
'width': '1100',
"useLineColorForBulletBorder": true,
'colors': ['Green', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen','Violet', 'Gold'],
'responsive':true
};
var optionszonewithoutreopencolumn = {
'title': 'Zonewise (Without Reopen) Complaints ',
'legend': 'bottom',
'height': '500',
'width': '1100',
"useLineColorForBulletBorder": true,
'colors': ['Red', 'Blue', 'Yellow', 'Brown', 'Pink', 'Orange', 'Purple', 'Grey', 'SkyBlue', 'LightGreen','Violet', 'Gold'],
'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>
<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>
Loading…
Cancel
Save