Skip to content

aa.gusti / eis

Go to a project
Commit c1897c1f by aa.gustiana@gmail.com
Options

Add LRA target and realization tables with data refresh functionality

1 parent 1268dc27
Inline Side-by-side
Showing 1 changed file with 221 additions and 0 deletions
eispajak/views/templates/pcpd_retribusi.pt
......@@ -222,6 +222,95 @@
</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-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Target dan Realisasi Pendapatan Lain-lain Rekap
<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="tableLraRekap">
<thead>
<tr>
<th class="align-middle text-center">Kode</th>
<th class="align-middle text-center">Jenis</th>
<th class="text-center">Target</th>
<th class="text-center">Realisasi</th>
<th class="text-center">Selisih</th>
<th class="text-center">%</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class=""></td>
<td class=""></td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" class="text-right">Jumlah</td>
<td><span id="lra_rekap_target"></span></td>
<td><span id="lra_rekap_realisasi"></span></td>
<td><span id="lra_rekap_sisa"></span></td>
<td><span id="lra_rekap_persen"></span></td>
</tfoot>
</table>
</div>
</div>
</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-statistics.png" class="icon-rounded" alt="" align="left">
<h5 class="text-left bold">Target dan Realisasi Pendapatan Lain-lain
<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="tableLra">
<thead>
<tr>
<th class="align-middle text-center">Kode</th>
<th class="align-middle text-center">Jenis</th>
<th class="text-center">Target</th>
<th class="text-center">Realisasi</th>
<th class="text-center">Selisih</th>
<th class="text-center">%</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class=""></td>
<td class=""></td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
<td class="right">0</td>
</tr>
</tbody>
<tfoot>
<td colspan="2" class="text-right">Jumlah</td>
<td><span id="lra_target"></span></td>
<td><span id="lra_realisasi"></span></td>
<td><span id="lra_sisa"></span></td>
<td><span id="lra_persen"></span></td>
</tfoot>
</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> -->
......@@ -522,6 +611,8 @@
]
}
);
var jenisRefresh = function () {
tableJenis.clear();
var jenisUrl = "${url}".replace("/webr/", "/rjenis/");
......@@ -567,6 +658,134 @@
});
}
var tableLra = $('#tableLra').DataTable(
{
"destroy": true,
"paging": false,
"searching": false,
"info": false,
"autoWidth": false,
"scrollX": true,
"order": [[0, 'asc']],
"columnDefs": [
{ className: 'text-center', width: "50px", targets: [0] },
{ className: 'text-left', targets: [1] },
{ className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
{ className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
]
}
);
var lraRefresh = function () {
tableLra.clear();
var lraUrl = "${url}".replace("/webr/", "/lra/");
$.get(lraUrl, {}, function (data, status) {
if (status === "success") {
console.log(data);
var lra_target = 0;
var lra_realisasi = 0;
var lra_sisa = 0;
var lra_persen = 0;
data.forEach(function (row) {
console.log(row);
tableLra.row.add([
row.kode,
row.nama,
row.target,
row.realisasi,
row.sisa,
row.persen.toFixed(2)
]);
lra_target += row.target;
lra_realisasi += row.realisasi;
lra_sisa += row.sisa;
lra_persen += row.persen;
;
$('#lra_target').html(lra_target.toLocaleString("id-ID"));
$('#lra_realisasi').html(lra_realisasi.toLocaleString("id-ID"));
$('#lra_sisa').html(lra_sisa.toLocaleString("id-ID"));
if (lra_target > 0)
$('#lra_persen').html((lra_realisasi / lra_target * 100).toFixed(2));
else
$('#lra_persen').html("0.00");
tableLra.draw();
});
} else {
console.log("Request failed.");
tableLra.draw();
}
}).fail(function () {
console.log("Request failed.");
tableLra.draw();
});
}
var tableLraRekap = $('#tableLraRekap').DataTable(
{
"destroy": true,
"paging": false,
"searching": false,
"info": false,
"autoWidth": false,
"scrollX": true,
"order": [[0, 'asc']],
"columnDefs": [
{ className: 'text-center', width: "50px", targets: [0] },
{ className: 'text-left', targets: [1] },
{ className: 'text-right', width: "100px", targets: [2, 3, 4], render: $.fn.dataTable.render.number('.', ',', 0, '') },
{ className: 'text-right', width: "100px", targets: [5], render: $.fn.dataTable.render.number('.', ',', 2, '') },
]
}
);
var lraRekapRefresh = function () {
tableLraRekap.clear();
var lraRUrl = "${url}".replace("/webr/", "/lrar/");
$.get(lraRUrl, {}, function (data, status) {
if (status === "success") {
console.log(data);
var lra_rekap_target = 0;
var lra_rekap_realisasi = 0;
var lra_rekap_sisa = 0;
var lra_rekap_persen = 0;
data.forEach(function (row) {
console.log(row);
tableLraRekap.row.add([
row.kode,
row.nama,
row.target,
row.realisasi,
row.sisa,
row.persen.toFixed(2)
]);
lra_rekap_target += row.target;
lra_rekap_realisasi += row.realisasi;
lra_rekap_sisa += row.sisa;
lra_rekap_persen += row.persen;
;
$('#lra_rekap_target').html(lra_rekap_target.toLocaleString("id-ID"));
$('#lra_rekap_realisasi').html(lra_rekap_realisasi.toLocaleString("id-ID"));
$('#lra_rekap_sisa').html(lra_rekap_sisa.toLocaleString("id-ID"));
if (lra_rekap_target > 0)
$('#lra_rekap_persen').html((lra_rekap_realisasi / lra_rekap_target * 100).toFixed(2));
else
$('#lra_rekap_persen').html("0.00");
tableLraRekap.draw();
});
} else {
console.log("Request failed.");
tableLra.draw();
}
}).fail(function () {
console.log("Request failed.");
tableLra.draw();
});
}
$.fn.datarefresh = function () {
console.log("data_refresh");
console.log("${url}");
......@@ -586,6 +805,8 @@
trendChart();
dinasRefresh();
jenisRefresh();
lraRefresh();
lraRekapRefresh();
} else {
console.log("Request failed.");
}
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!