This portal only for GCC Officers. Based on there roles and Group ID they can view there module`s Like PGR, QR Public Asset Feedback, Makkalai Thedi Mayor,etc...
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

845 lines
29 KiB

<!DOCTYPE html>
<html lang="en" dir="">
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/modules/base/head :: head}"></head>
<body>
<style>
html {
-webkit-text-size-adjust: none;
/* Prevent font scaling in landscape */
width: 100%;
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
input[type="submit"] {
-webkit-appearance: none;
}
*,
*:after,
*:before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
font-family: 'Muli', sans-serif;
font-weight: 400;
width: 100%;
min-height: 100%;
color: #333333;
width: 100%;
height: 100%;
background: #ecf0f4;
}
a {
outline: none;
text-decoration: none;
color: #555;
}
a:hover,
a:focus {
outline: none;
text-decoration: none;
}
img {
border: 0;
}
input,
textarea,
select {
outline: none;
resize: none;
font-family: 'Muli', sans-serif;
}
a,
input,
button {
outline: none !important;
}
button::-moz-focus-inner {
border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-weight: 700;
color: #202342;
font-family: 'Muli', sans-serif;
}
img {
border: 0;
vertical-align: top;
max-width: 100%;
height: auto;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
p {
margin: 0 0 15px 0;
padding: 0;
}
.container-fluid {
max-width: 1900px;
}
/* Common Class */
.pd-5 {
padding: 5px;
}
.pd-10 {
padding: 10px;
}
.pd-20 {
padding: 20px;
}
.pd-30 {
padding: 30px;
}
.pb-10 {
padding-bottom: 10px;
}
.pb-20 {
padding-bottom: 20px;
}
.pb-30 {
padding-bottom: 30px;
}
.pt-10 {
padding-top: 10px;
}
.pt-20 {
padding-top: 20px;
}
.pt-30 {
padding-top: 30px;
}
.pr-10 {
padding-right: 10px;
}
.pr-20 {
padding-right: 20px;
}
.pr-30 {
padding-right: 30px;
}
.pl-10 {
padding-left: 10px;
}
.pl-20 {
padding-left: 20px;
}
.pl-30 {
padding-left: 30px;
}
.px-30 {
padding-left: 30px;
padding-right: 30px;
}
.px-20 {
padding-left: 20px;
padding-right: 20px;
}
.py-30 {
padding-top: 30px;
padding-bottom: 30px;
}
.py-20 {
padding-top: 20px;
padding-bottom: 20px;
}
.mb-30 {
margin-bottom: 30px;
}
.mb-50 {
margin-bottom: 50px;
}
.font-30 {
font-size: 30px;
line-height: 1.46em;
}
.font-24 {
font-size: 24px;
line-height: 1.5em;
}
.font-20 {
font-size: 20px;
line-height: 1.5em;
}
.font-18 {
font-size: 18px;
line-height: 1.6em;
}
.font-16 {
font-size: 16px;
line-height: 1.75em;
}
.font-14 {
font-size: 14px;
line-height: 1.85em;
}
.font-12 {
font-size: 12px;
line-height: 2em;
}
.weight-300 {
font-weight: 300;
}
.weight-400 {
font-weight: 400;
}
.weight-500 {
font-weight: 500;
}
.weight-600 {
font-weight: 600;
}
.weight-700 {
font-weight: 700;
}
.weight-800 {
font-weight: 800;
}
.text-blue {
color: #1b00ff;
}
.text-dark {
color: #000000;
}
.text-white {
color: #ffffff;
}
.height-100-p {
height: 100%;
}
.bg-white {
background: #ffffff;
}
.border-radius-10 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.border-radius-100 {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
.box-shadow {
-webkit-box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
-moz-box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
box-shadow: 0px 0px 28px rgba(0, 0, 0, .08);
}
.gradient-style1 {
background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%);
}
.gradient-style2 {
background-image: linear-gradient(135deg, #72EDF2 10%, #5151E5 100%);
}
.gradient-style3 {
background-image: radial-gradient(circle 732px at 96.2% 89.9%, rgba(70, 66, 159, 1) 0%, rgba(187, 43, 107, 1) 92%);
}
.gradient-style4 {
background-image: linear-gradient(135deg, #FF9D6C 10%, #BB4E75 100%);
}
/* widget style 1 */
.widget-style1 {
padding: 20px 10px;
}
.widget-style1 .circle-icon {
width: 60px;
}
.widget-style1 .circle-icon .icon {
width: 60px;
height: 60px;
background: #ecf0f4;
display: flex;
align-items: center;
justify-content: center;
}
.widget-style1 .widget-data {
width: calc(100% - 150px);
padding: 0 15px;
}
.widget-style1 .progress-data {
width: 90px;
}
.widget-style1 .progress-data .apexcharts-canvas {
margin: 0 auto;
}
.widget-style2 .widget-data {
padding: 20px;
}
.widget-style3 {
padding: 30px 20px;
}
.widget-style3 .widget-data {
width: calc(100% - 60px);
}
.widget-style3 .widget-icon {
width: 60px;
font-size: 45px;
line-height: 1;
}
.apexcharts-legend-marker {
margin-right: 6px !important;
}
</style>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<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">
<div class="row align-items-end">
<div class="col-4">
<div class="page-header-title">
<i class='fa fa-tachometer-alt' style='font-size:24px; color: #1aafd4'></i>
<div class="d-inline">
<h6>Pet Dashboard</h6>
<span>Pet Registration</span>
</div>
</div>
</div>
<div class="col-1">
<i class="fa fa-user" aria-hidden="true"><p id="UserCount"></p></i>
</div>
<!-- <div class="col-2">
<p class="block-title">Users</p>
</div> -->
<div class="col-2">
<select type="text" class="form-control text-center" name="zone" id="zone">
<option value="0">All Zone</option>
<option value="1" th:selected="${zone=='1'}">Zone 1</option>
<option value="2" th:selected="${zone=='2'}">Zone 2</option>
<option value="3" th:selected="${zone=='3'}">Zone 3</option>
<option value="4" th:selected="${zone=='4'}">Zone 4</option>
<option value="5" th:selected="${zone=='5'}">Zone 5</option>
<option value="6" th:selected="${zone=='6'}">Zone 6</option>
<option value="7" th:selected="${zone=='7'}">Zone 7</option>
<option value="8" th:selected="${zone=='8'}">Zone 8</option>
<option value="9" th:selected="${zone=='9'}">Zone 9</option>
<option value="10" th:selected="${zone=='10'}">Zone 10</option>
<option value="11" th:selected="${zone=='11'}">Zone 11</option>
<option value="12" th:selected="${zone=='12'}">Zone 12</option>
<option value="13" th:selected="${zone=='13'}">Zone 13</option>
<option value="14" th:selected="${zone=='14'}">Zone 14</option>
<option value="15" th:selected="${zone=='15'}">Zone 15</option>
</select>
</div>
<div class="col-2">
<button type="submit" class="btn btn-sm btn-primary" onclick="getByZone()"
id="submit">Submit</button>
</div>
<div class="col-lg-3">
<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">Pet Registration</li>
<li class="breadcrumb-item">Dashboard</li>
</ol>
</nav>
</div>
</div>
<br>
<br>
<div class="content">
<div class="block block-rounded">
</div>
<div class="block-content p-0">
<div class="row">
<div class="col-sm-6 col-lg-6 mb-50">
<div class="row">
<div class="col-sm-12 col-lg-6 mb-50">
<div
class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
<div class="d-flex flex-wrap align-items-center">
<div class="circle-icon">
<div class="icon border-radius-100 font-24 text-blue">
<i class="far fa-file" aria-hidden="true"></i>
</div>
</div>
<div class="widget-data">
<div class="weight-800 font-18" id="totalRegPets"></div>
<div class="weight-500">Reg Pets</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 mb-50">
<div
class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
<div class="d-flex flex-wrap align-items-center">
<div class="circle-icon">
<div class="icon border-radius-100 font-24 text-blue"><i
class='fas fa-calendar-minus'></i></div>
</div>
<div class="widget-data">
<div class="weight-800 font-18" id="totalInprogcount"></div>
<div class="weight-500">Review Pending</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-6 mb-50">
<div
class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
<div class="d-flex flex-wrap align-items-center">
<div class="circle-icon">
<div class="icon border-radius-100 font-24 text-blue">
<i class="fa fa-times-circle"></i>
</div>
</div>
<div class="widget-data">
<div class="weight-800 font-18" id="totalRejCount"></div>
<div class="weight-500">Rejected Pets</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6 mb-50">
<div
class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
<div class="d-flex flex-wrap align-items-center">
<div class="circle-icon">
<div class="icon border-radius-100 font-24 text-blue"><i
class="fa fa-paw" aria-hidden="true"></i>
</div>
</div>
<div class="widget-data">
<div class="weight-800 font-18" id="totalpets"></div>
<div class="weight-500">Total Pets</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-6 mb-50" id="licIssuedHide">
<div
class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
<div class="d-flex flex-wrap align-items-center">
<div class="circle-icon">
<div class="icon border-radius-100 font-24 text-blue"><i
class="fa fa-paper-plane" aria-hidden="true"></i>
</div>
</div>
<div class="widget-data">
<div class="weight-800 font-18" id="totallicCount"></div>
<div class="weight-500">Licensed issued</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6 mb-50">
<div
class="bg-white box-shadow border-radius-10 height-100-p widget-style1">
<div class="d-flex flex-wrap align-items-center">
<div class="circle-icon">
<div class="icon border-radius-100 font-24 text-blue"><i
class="fas fa-file-excel"
aria-hidden="true"></i></div>
</div>
<div class="widget-data">
<div class="weight-800 font-18" id="explicCount"></div>
<div class="weight-500">License expired</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="card">
<div class="card-body">
<div id="totalpetpiechart"></div>
<div class="weight-800 font-18" id="totalpet"></div>
<div class="weight-500">Total Pet Status count</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<div class="card">
<div class="card-body">
<div id="Dogpiechart"></div>
<!-- <div class="weight-800 font-18" th:text="${dogTotalCount}"></div> -->
<div class="weight-800 font-18" id="dogTotal"></div>
<div class="weight-500">Total Dog count</div>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card">
<div class="card-body">
<div id="Catpiechart"></div>
<!-- <div class="weight-800 font-18" th:text="${catTotalCount}" id="catTotal"></div> -->
<div class="weight-800 font-18" id="catTotal"></div>
<div class="weight-500">Total cat count</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END Page Content -->
</main>
<!-- END Main Container -->
<!-- Footer -->
</div>
</div>
</div>
</div>
</div>
</body>
<div th:replace="~{fragments/modules/base/app_module_menu_box :: div}"></div>
<script th:replace="~{fragments/modules/base/script :: script}"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script th:inline="javascript">
var x, y,userCount,licCount;
convert();
function convert() {
var m = /*[[${dash}]]*/ {};
console.log(m);
x = /*[[${dash.dog}]]*/ {};
y = /*[[${dash.cat}]]*/ {};
userCount = /*[[${dash.userCount}]]*/ {};
licCount= /*[[${dash.licCount}]]*/ {};
}
var totalexpired = x['4'] + y['4'];
var totalrejected = x['3'] + y['3'];
var totalLicensed = x['2'] + y['2'];
var totalPayment = x['1'] + y['1'];
var totalinprog = x['0'] + y['0'];
document.getElementById("totalpet").innerHTML = x['200'] + y['200'];
var catexpired = y['4'];
var catrejected = y['3'];
var catLicensed = y['2'];
var catPayment = y['1'];
var catinprog = y['0'];
var catTotal = y['200'];
document.getElementById("catTotal").innerHTML = catTotal;
var dogexpired = x['4'];
var dogrejected = x['3'];
var dogLicensed = x['2'];
var dogPayment = x['1'];
var doginprog = x['0'];
var dogTotal = x['200'];
document.getElementById("dogTotal").innerHTML = dogTotal;
document.getElementById("UserCount").innerHTML = userCount;
document.getElementById("totalRegPets").innerHTML = x['200'] + y['200'];
document.getElementById("totalInprogcount").innerHTML = totalinprog;
document.getElementById("totalRejCount").innerHTML = totalrejected;
document.getElementById("totalpets").innerHTML = totalLicensed;
document.getElementById("explicCount").innerHTML = totalexpired;
document.getElementById("totallicCount").innerHTML = licCount;
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart2);
// Draw the chart and set the chart values
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Total', 'Hours per Day'],
['InProgress', totalinprog],
['Payment', totalPayment],
['License Issued', totalLicensed],
['Rejected', totalrejected],
['Expired', totalexpired],
//['Total Pets', totalInCount]
]);
// Optional; add a title and set the width and height of the chart
var options = {
'title': 'OverAll pet Info', legend: 'bottom', 'height': 500,
colors: ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad'],
};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('totalpetpiechart'));
chart.draw(data, options);
}
//total Dog count piechart
//console.log("dogTotal:"+dogTotal);
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Dog Info', 'Hours per Day'],
['InProgress', doginprog],
['Payment', dogPayment],
['License Issued', dogLicensed],
['Rejected', dogrejected],
['Expired', dogexpired]
]);
// Optional; add a title and set the width and height of the chart
var options = {
'title': 'OverAll Dog Info', legend: 'bottom', 'height': 400,
colors: ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad'],
};
// Display the chart inside the <div> element with id="piechart"
var chart = new google.visualization.PieChart(document.getElementById('Dogpiechart'));
chart.draw(data, options);
}
//total cat piechart
// $('#catTotal').val(catTotal);
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart1);
// Draw the chart and set the chart values
function drawChart1() {
var data = google.visualization.arrayToDataTable([
['Cat Info', 'Hours per Day'],
['InProgress', catinprog],
['Payment', catPayment],
['License Issued', catLicensed],
['Rejected', catrejected],
['Expired', catexpired]
]);
var options = {
'title': 'OverAll Cat Info',
legend: 'bottom',
'height': 400,
colors: ['#f4ca47', '#0ebce0', '#aae00e', '#053a4c', '#0ee0ad'],
};
var chart = new google.visualization.PieChart(document.getElementById('Catpiechart'));
chart.draw(data, options);
}
// total cat count piechar end
function getByZone() {
var zone = $("#zone").val()
if (zone == "0") {
window.location.href = "/petregistration/";
return false;
}
else{
window.location.href = "/petregistration/?zone="+zone;
return false;
}
}
function getPieChartByZone(x) {
console.log(x);
totalexpired = x.cat[4] + x.dog[4];
totalrejected = x.cat[3] + x.dog[3];
totalLicensed = x.cat[2] + x.dog[2];
totalPayment = x.cat[1] + x.dog[1];
totalinprog = x.cat[0] + x.dog[0];
document.getElementById("totalpet").innerHTML = x.cat[200] + x.dog[200];
drawChart2();
catexpired = x.cat[4];
catrejected = x.cat[3];
catLicensed = x.cat[2];
catPayment = x.cat[1];
catinprog = x.cat[0];
catTotal = x.cat[200];
document.getElementById("catTotal").innerHTML = catTotal;
drawChart1();
dogexpired = x.dog[4];
dogrejected = x.dog[3];
dogLicensed = x.dog[2];
dogPayment = x.dog[1];
doginprog = x.dog[0];
dogTotal = x.dog[200];
document.getElementById("dogTotal").innerHTML = dogTotal;
drawChart();
var UserCount = x.userCount;
//var zone=
var totalRegPets = x.dog[200] + x.cat[200];
var totalInprogcount = x.dog[0] + x.cat[0];
var totalRejCount = x.dog[3] + x.cat[3];
var totalpets = x.dog[2] + x.cat[2];
//var totallicCount
var explicCount = x.dog[4] + x.cat[4];
document.getElementById("UserCount").innerHTML = UserCount;
document.getElementById("totalRegPets").innerHTML = totalRegPets;
document.getElementById("totalInprogcount").innerHTML = totalInprogcount;
document.getElementById("totalRejCount").innerHTML = totalRejCount;
document.getElementById("totalpets").innerHTML = totalpets;
document.getElementById("explicCount").innerHTML = explicCount;
}
function resetDate() {
window.location.href = "/admin/home";
}
function getZoneDashboard() {
var z = $('#zone').val();
if (z == 0) {
window.location.href = "gcc/pet/dashboard";
}
}
</script>
</html>