Skip to content

aa.gusti / eis

Go to a project
Commit 65070991 by Ari Agung Prasetiyo Committed by Ari Agung Prasetiyo
Options

pbb pt

1 parent f62aa1f5
Inline Side-by-side
Showing 1 changed file with 450 additions and 0 deletions
eispajak/views/templates/pbb.pt 0 → 100644
<html metal:use-macro="load: eis-base.pt" tal:define="url request.route_url('eis-pcpd-act', act=module);">
<metal:css fill-slot="css_files">
<link rel="stylesheet" href="${home}/eis/static/css/odometer-theme-plaza.css">
<link href="${home}/eis/static/css/pcpd.css" rel="stylesheet">
</metal:css>
<style metal:fill-slot="styles">
</style>
<div metal:fill-slot="content">
<div class="row ">
<div class="col-md-12">
<div class="panel panel-default text-center main-panel uppercase">
<div class="panel-body">
<h1 class="title-panel"><b>${title}</b></h1>
<div class="padding-top-sm">
<h5 id="time">Rab, 4 Jun 2025 - 14:11:05</h5>
</div>
<h4 class="odoometer-head">
<b>Rp.<h4 class="odometer bold" id="today"></h4></b>
</h4>
<h5 class="padding-top-sm"><b><span id="trx"></span> Transaksi</b></h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default text-center">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-money-transfer.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">
Total Realisasi s.d Hari Ini
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container">
<h2 class="primary">
<b>Rp. <h2 class="odometer sub-odometer bold primary" id="ytd">0</h2></b>
</h2>
<h3 class="primary bold"><span id="trxYtd">1067</span> Transaksi</h3>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-pie-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Jumlah Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center">
<canvas id="chartPie"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<select class="form-control rounded" id="rangeType">
<option value="1">Harian</option>
<option value="2">Mingguan</option>
<option value="3">Bulanan</option>
</select>
</div>
<hr>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-gantt-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Realiasi (Rp)
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartRealisasi"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6 hide">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-chart.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Realiasi Kumulatif (Rp)
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartKumulatif" width="200" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 hide">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Transaksi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartRealisasiCnt"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-6 hide">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-line-chart-icon.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Tren Transaksi Kumulatif
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<div class="chart-container text-center" style="position: relative;">
<canvas id="chartKumulatifCnt" width="200" height="200"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<img src="${home}/eis/static/42x42-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Realisasi
<i class="fa fa-info-circle pull-right icon-color"></i>
</h5>
</div>
<div class="panel-body">
<table class="table table-bordered table-sm" id="table1">
<thead>
<tr>
<th class="align-middle text-center">Kode</th>
<th class="align-middle text-center">Uraian</th>
<th class="text-center">Ketetapan</th>
<th class="text-center">Realisasi</th>
<th class="text-center">Sisa</th>
<th class="text-center">%</th>
</tr>
<!-- <tr>
<th rowspan="2" class="align-middle text-center">SPPT</th>
<th rowspan="2" class="align-middle text-center">Jumlah</th>
<th colspan="2" class="align-middle text-center">Lalu</th>
<th colspan="2" class="align-middle text-center">Kini</th>
<th colspan="2" class="align-middle text-center">Jumlah</th>
<th rowspan="2" class="align-middle text-center">%</th>
<th rowspan="2" class="align-middle text-center">SPPT</th>
<th rowspan="2" class="align-middle text-center">Jumlah</th>
<th rowspan="2" class="align-middle text-center">%</th>
</tr>
<tr>
<th class="align-middle text-center">SPPT</th>
<th class="align-middle text-center">Jumlah</th>
<th class="align-middle text-center">SPPT</th>
<th class="align-middle text-center">Jumlah</th>
<th class="align-middle text-center">SPPT</th>
<th class="align-middle text-center">Jumlah</th>
</tr> -->
</thead>
<tbody>
<tr class="odd">
<td class="">32.08-010</td>
<td class="">CIPATUJAH</td>
<td class="right">63.185</td>
<td class="right">1.183.837.314</td>
<td class="right">42.681</td>
<td class="right">789.492.550</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<hr>
</div>
</div>
<metal:js fill-slot="js_files">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> -->
<script src="${home}/eis/static/js/chart.js"></script>
<script src="${home}/eis/static/js/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="${home}/eis/static/js/odometer.js"></script>
</metal:js>
<script metal:fill-slot="scripts">
var pieChart;
var amtTrendChart;
var trxTrendChart;
var amtKumulatifChart;
var trxKumulatifChart;
var newData;
$(document).ready(function () {
var ctx = document.getElementById('chartPie').getContext('2d');
var canvas = document.getElementById('chartPie');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 4.2;
const pie_data = {
labels: [
'Pajak',
'Retribusi',
],
datasets: [{
data: [300, 100],
backgroundColor: [
'#16a75c', //'rgb(255, 99, 132)',
'#ffb900', // 'rgb(54, 162, 235)'
],
hoverOffset: 4
}]
};
pieChart = new Chart(ctx,
{
type: 'pie',
data: pie_data,
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom'
}
}
}
}
);
var ctx = document.getElementById('chartRealisasi').getContext('2d');
var canvas = document.getElementById('chartRealisasi');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 4.2;
var realisasi_data = {
labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
datasets: [{
label: 'Tren Realiasi',
data: [100, 50, 300, 250, 100, 150, 2000],
borderColor: '#16a75c',// 'rgb(75, 192, 192)',
backgroundColor: '#16a75c8a',
fill: true,
tension: 0.5
}]
};
amtTrendChart = new Chart(ctx, {
type: 'line',
data: realisasi_data,
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: {
display: false,
drawBorder: false,
}
}
}
}
});
var transaksi_data = {
labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
datasets: [{
label: 'Tren Transaksi',
data: [100, 50, 300, 250, 100, 150, 2000],
borderColor: '#16a75c',// 'rgb(75, 192, 192)',
backgroundColor: '#16a75c8a',
fill: true,
tension: 0.5
}]
};
var ctx = document.getElementById('chartRealisasiCnt').getContext('2d');
var canvas = document.getElementById('chartRealisasiCnt');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
trxTrendChart = new Chart(ctx, {
type: 'line',
data: transaksi_data,
options: {
responsive: true,
maintainAspectRatio: false,
}
});
var ctx = document.getElementById('chartKumulatif').getContext('2d');
var canvas = document.getElementById('chartKumulatif');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
var kumulatif_data = {
labels: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'H7',],
datasets: [{
label: 'Tren Kumulatif',
data: [100, 150, 400, 650, 900, 950, 1100],
borderColor: '#ffb900', //'rgb(75, 192, 192)',
backgroundColor: '#debd68ad',
fill: true,
tension: 0.5
}]
};
amtKumulatifChart = new Chart(ctx, {
type: 'line',
data: kumulatif_data,
options: {
responsive: true,
maintainAspectRatio: false,
}
});
var ctx = document.getElementById('chartKumulatifCnt').getContext('2d');
var canvas = document.getElementById('chartKumulatifCnt');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 3.38;
trxKumulatifChart = new Chart(ctx, {
type: 'line',
data: kumulatif_data,
options: {
responsive: true,
maintainAspectRatio: false,
}
});
$("#rangeType").change(function () {
trendChart();
});
$().datarefresh();
});
function addData(chart, data) {
labels = [];
aData = [];
backgroundColor = [];
data.forEach(element => {
labels.push(element[0]);
aData.push(element[1]);
if (element.length > 2)
backgroundColor.push(element[2]);
});
chart.data.labels.length = 0;
chart.data.datasets[0].data.length = 0;
if (backgroundColor.length != 0) {
chart.data.datasets[0].data.backgroundColor = 0;
chart.data.datasets[0].backgroundColor = backgroundColor;
}
chart.data.labels = labels;
chart.data.datasets[0].data = aData;
chart.update();
}
trendChart = function () {
if (rangeType.value == 1) {
amtTrendChartData = newData.daily;
trxTrendChartData = newData.dailyTrx;
amtKumulatifChartData = newData.dailyAcc;
trxKumulatifChartData = newData.dailyAccTrx;
}
else if (rangeType.value == 2) {
amtTrendChartData = newData.weekly;
trxTrendChartData = newData.weeklyTrx;
amtKumulatifChartData = newData.weeklyAcc;
trxKumulatifChartData = newData.weeklyAccTrx;
}
else {
amtTrendChartData = newData.monthly;
trxTrendChartData = newData.monthlyTrx;
amtKumulatifChartData = newData.monthlyAcc;
trxKumulatifChartData = newData.monthlyAccTrx;
}
addData(amtTrendChart, amtTrendChartData);
addData(trxTrendChart, trxTrendChartData);
addData(amtKumulatifChart, amtKumulatifChartData);
addData(trxKumulatifChart, trxKumulatifChartData);
}
const formatter = new Intl.DateTimeFormat('id-ID', { dateStyle: 'full', timeStyle: 'medium' });
var today_el = document.getElementById('today');
odtoday = new Odometer({
el: today_el,
value: 0,
format: '(.ddd)',
});
var ytd_el = document.getElementById('ytd');
odytd = new Odometer({
el: ytd_el,
value: 0,
format: '(.ddd)',
});
$.fn.datarefresh = function () {
console.log("data_refresh");
console.log("${url}");
$.get("${url}", {}, function (data, status) {
if (status === "success") {
newData = data;
date = new Date(newData.time);
odtoday.update(newData.today);
trx.innerHTML = parseInt(newData.trx).toLocaleString("id-ID");
odytd.update(newData.ytd);
trxYtd.innerHTML = parseInt(newData.trxYtd).toLocaleString("id-ID");
time.innerHTML = formatter.format(date);//newData.time;
time.style.fontWeight = 'bold';
// removeData(pieChart);
addData(pieChart, newData.pie);
trendChart();
} else {
console.log("Request failed.");
}
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
}).fail(function() {
setTimeout(function () {
console.log("timeout");
$().datarefresh();
}, 300000);
});
// $().get_realisasi();
// $().get_harian();
// $().get_tabel();
// $().get_series();
}
</script>
</html>
\ No newline at end of file \ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!