Advertisement
martinms

renja.js

May 19th, 2024
600
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 20.77 KB | None | 0 0
  1. window.onload = function () {
  2.     opdSelect2('#opd');
  3.     selectTahun();
  4. }
  5.  
  6. function selectTahun() {
  7.     fetch(`${base_url}admin_tahun/list`)
  8.         .then(response => response.json())
  9.         .then(data => {
  10.             if (data.success == true) {
  11.                 var tahun = data.data;
  12.                 var tahunList = [
  13.                     {
  14.                         id: tahun.tahunSatu,
  15.                         text: tahun.tahunSatu
  16.                     },
  17.                     {
  18.                         id: tahun.tahunDua,
  19.                         text: tahun.tahunDua
  20.                     },
  21.                     {
  22.                         id: tahun.tahunTiga,
  23.                         text: tahun.tahunTiga
  24.                     },
  25.                     {
  26.                         id: tahun.tahunEmpat,
  27.                         text: tahun.tahunEmpat
  28.                     },
  29.                     {
  30.                         id: tahun.tahunLima,
  31.                         text: tahun.tahunLima
  32.                     }
  33.                 ];
  34.                 $('#tahun').select2({
  35.                     data: tahunList
  36.                 });
  37.             } else {
  38.                 cekLogin(data.data);
  39.             }
  40.         })
  41. }
  42.  
  43. async function cari(id) {
  44.     var opd = document.getElementById('opd');
  45.     var opdSelected = opd.options[opd.selectedIndex];
  46.     var tahun = document.getElementById('tahun');
  47.     var tahunSelected = tahun.options[tahun.selectedIndex];
  48.  
  49.     if (opdSelected.value === 'placeholder') {
  50.         opd.classList.add('is-invalid');
  51.         afterSpiner(id, 'Cari', 'search');
  52.         toastr.error('OPD belum dipilih', "Gagal");
  53.         return;
  54.     }
  55.     if (tahunSelected.value === 'placeholder') {
  56.         tahun.classList.add('is-invalid');
  57.         afterSpiner(id, 'Cari', 'search');
  58.         toastr.error('Tahun belum dipilih', "Gagal");
  59.         return;
  60.     }
  61.     spiner(id, 'Mencari'),
  62.         await renjaList(tahun.value, opd.value),
  63.         afterSpiner(id, 'Cari', 'search')
  64. }
  65.  
  66. const renjaList = async (tahun, opd) => {
  67.     var table = document.getElementById('table-content');
  68.     try {
  69.         const res = await fetch(`${base_url}admin_evaluasi/renja/data/${tahun}/${opd}`);
  70.         if (!res.ok) {
  71.             throw new Error("Gagal mengambil data");
  72.         }
  73.         const data = await res.json();
  74.         if (data.success === false) {
  75.             belumAda(data.message);
  76.             table.className = "";
  77.             table.classList.add('card', 'd-none');
  78.         } else {
  79.             table.className = "";
  80.             table.classList.add('card');
  81.             dataAda(data.data);
  82.         }
  83.  
  84.     } catch (error) {
  85.         toastr.error(error, "Gagal");
  86.     }
  87.     // createTable(tahun, opd)
  88. }
  89.  
  90. const belumAda = () => {
  91.     var opd = document.getElementById('opd');
  92.     var opdSelected = opd.options[opd.selectedIndex];
  93.     var tahun = document.getElementById('tahun');
  94.     var tahunSelected = tahun.options[tahun.selectedIndex];
  95.  
  96.     const content = document.getElementById('data-content');
  97.     content.innerHTML = "";
  98.     const div = document.createElement('div');
  99.     div.classList.add('col-12', 'd-flex', 'justify-content-center', 'py-5', 'align-items-center');
  100.  
  101.     const span = document.createElement('span')
  102.     span.className = "text-center fw-semibold text-danger";
  103.     span.innerHTML = `${opdSelected.textContent} Belum melakukan input capaian untuk tahun ${tahunSelected.textContent} atau perencanaan belum dibuat`;
  104.     div.appendChild(span);
  105.  
  106.     content.appendChild(div);
  107. }
  108.  
  109. const dataAda = (data) => {
  110.     var opd = document.getElementById('opd');
  111.     var opdSelected = opd.options[opd.selectedIndex];
  112.     var tahun = document.getElementById('tahun');
  113.     var tahunSelected = tahun.options[tahun.selectedIndex];
  114.  
  115.     const content = document.getElementById('data-content');
  116.     content.innerHTML = "";
  117.     const div = document.createElement('div');
  118.     div.classList.add('col-12', 'd-flex', 'justify-content-center', 'py-2', 'align-items-center');
  119.  
  120.     const span = document.createElement('span')
  121.     span.className = "text-center fw-semibold fs-4";
  122.     span.innerHTML = `Tabel Hasil Evaluasi Renja ${opdSelected.textContent} tahun ${tahunSelected.textContent} <br/> <span class="text-warning fs-2">"untuk melihat secara detail silahkan klik tombol Detail"</span>`;
  123.     div.appendChild(span);
  124.     content.appendChild(div);
  125.  
  126.     document.getElementById('tahun-target').innerHTML = tahunSelected.textContent;
  127.     document.getElementById('tahun-target-fs').innerHTML = tahunSelected.textContent;
  128.     document.getElementById('tahun-capaian-fs').innerHTML = tahunSelected.textContent;
  129.  
  130.     document.getElementById('title-fs').innerHTML = `${opdSelected.textContent} tahun ${tahunSelected.textContent}`;
  131.  
  132.     document.getElementById('btn-download-laporan').href = `${base_url}admin_evaluasi/renja_download/${tahun.value}/${opd.value}`
  133.  
  134.     createResult(data);
  135.     detailTable(data);
  136. }
  137.  
  138.  
  139. function createResult(data) {
  140.     data.forEach(function (tujuan, T) {
  141.         if (T == 0) {
  142.             document.getElementById('table-wrapper').innerHTML = "";
  143.             // document.getElementById('detail-wrapper').innerHTML = "";
  144.         }
  145.         var namaT = `<span class="fw-bolder">Tujuan: </span>${enterKata(tujuan.namaTujuan, 3)}`
  146.         parentTable(T + 1, namaT, tujuan.indikatorData.length + 1);
  147.  
  148.         // Indikator .............
  149.         tujuan.indikatorData.forEach(indikator => {
  150.             resultTable(indikator, tujuan.targetPaguIndikatif);
  151.         });
  152.  
  153.         // Sararan ............
  154.         tujuan.dataSasaran.forEach(function (sasaran, S) {
  155.             var namaS = `<span class="fw-bolder">Sasaran: </span>${enterKata(sasaran.namaSasaran, 3)}`
  156.             var kodeS = `${T + 1}.${S + 1}`;
  157.             var lengthS = sasaran.indikatorData.length + 1;
  158.             parentTable(kodeS, namaS, lengthS);
  159.  
  160.             // IndikatorSasran ................
  161.             sasaran.indikatorData.forEach(indikatorS => {
  162.                 resultTable(indikatorS, sasaran.targetPaguIndikatif);
  163.             });
  164.  
  165.             // Program .............
  166.             sasaran.dataProgram.forEach(function (program, P) {
  167.                 var namaP = `<span class="fw-bolder">Program: </span>${enterKata(program.namaProgram, 3)}`
  168.                 var kodeP = `${kodeS}.${P + 1}`;
  169.                 var lengthP = program.indikatorData.length + 1;
  170.                 parentTable(kodeP, namaP, lengthP);
  171.  
  172.                 // Indikator Program ...........................
  173.                 program.indikatorData.forEach(indikatorP => {
  174.                     resultTable(indikatorP, program.targetPaguIndikatif)
  175.                 });
  176.  
  177.                 // Kegiatan ........
  178.                 program.dataKegiatan.forEach(function (kegiatan, K) {
  179.                     var namaK = `<span class="fw-bolder">Kegiatan: </span>${enterKata(kegiatan.namaKegiatan, 3)}`
  180.                     var kodeK = `${kodeP}.${K + 1}`;
  181.                     var lengthK = kegiatan.indikatorData.length + 1;
  182.                     parentTable(kodeK, namaK, lengthK);
  183.  
  184.                     // Indikator kegiatan ...........
  185.                     kegiatan.indikatorData.forEach(indikatorK => {
  186.                         resultTable(indikatorK, kegiatan.targetPaguIndikatif);
  187.                     })
  188.  
  189.                     // Sub Kegiatan .............
  190.                     kegiatan.dataSubKegiatan.forEach(function (subKegiatan, Sk) {
  191.                         var namaSk = `<span class="fw-bolder">Sub Kegiatan: </span>${enterKata(subKegiatan.namaSubKegiatan, 3)}`
  192.                         var kodeSk = `${kodeK}.${Sk + 1}`;
  193.                         var lengthSk = subKegiatan.indikatorData.length + 1;
  194.                         parentTable(kodeSk, namaSk, lengthSk);
  195.                         // tableFS(subKegiatan, kodeSk);
  196.  
  197.                         // Indikator Sub Kegiatan ...........
  198.                         subKegiatan.indikatorData.forEach(indikatorSk => {
  199.                             var tw = subKegiatan.targetDanCapaian;
  200.                             resultTable(indikatorSk, subKegiatan.targetPaguIndikatif, tw.TotalKinerja, tw.TotalRealisasi);
  201.                         })
  202.                     })
  203.                 });
  204.             });
  205.         });
  206.     });
  207. }
  208.  
  209. function parentTable(kodeData, namaData, length) {
  210.     var table = document.getElementById('table-wrapper');
  211.     // var detail = document.getElementById('detail-wrapper');
  212.  
  213.     var tableRow = document.createElement('tr');
  214.  
  215.     var kode = document.createElement('td');
  216.     kode.setAttribute('rowspan', length);
  217.     kode.className = "align-top text-start";
  218.     kode.textContent = kodeData;
  219.     tableRow.appendChild(kode);
  220.  
  221.     var nama = document.createElement('td');
  222.     nama.setAttribute('rowspan', length);
  223.     nama.className = "align-top text-start";
  224.     nama.innerHTML = namaData;
  225.     tableRow.appendChild(nama);
  226.  
  227.     table.appendChild(tableRow.cloneNode(true));
  228.     // detail.appendChild(tableRow);
  229.  
  230. }
  231.  
  232. function resultTable(indikator, pagu, kinerja = null, rp = null) {
  233.     var table = document.getElementById('table-wrapper');
  234.     var rowIndikator = document.createElement('tr');
  235.  
  236.     var indikatorCell = document.createElement('td');
  237.     indikatorCell.className = "align-top text-start";
  238.     indikatorCell.innerHTML = enterKata(indikator.NamaIndikator, 3);
  239.     rowIndikator.appendChild(indikatorCell);
  240.  
  241.     var targetCell = document.createElement('td');
  242.     targetCell.className = "align-middle";
  243.     targetCell.innerHTML = indikator.target;
  244.     rowIndikator.appendChild(targetCell);
  245.  
  246.     var satuanCell = document.createElement('td');
  247.     satuanCell.className = "align-middle";
  248.     satuanCell.innerHTML = indikator.satuan;
  249.     rowIndikator.appendChild(satuanCell);
  250.  
  251.     var paguCell = document.createElement('td');
  252.     paguCell.className = "align-middle";
  253.     paguCell.innerHTML = pagu == null ? '' : rpNone(pagu);
  254.     rowIndikator.appendChild(paguCell);
  255.  
  256.     var kinerjaCell = document.createElement('td');
  257.     kinerjaCell.className = "align-middle";
  258.     kinerjaCell.innerHTML = kinerja == null ? '' : kinerja;
  259.     rowIndikator.appendChild(kinerjaCell);
  260.  
  261.     var rpCell = document.createElement('td');
  262.     rpCell.className = "align-middle";
  263.     rpCell.innerHTML = rp == null ? '' : rp;
  264.     rowIndikator.appendChild(rpCell);
  265.  
  266.     var realisasiCell = document.createElement('td');
  267.     realisasiCell.id = `real${indikator.idindikator}`;
  268.     realisasiCell.className = "align-middle";
  269.     realisasiCell.innerHTML = indikator.realisasiOutcome;
  270.     rowIndikator.appendChild(realisasiCell);
  271.  
  272.     var persentaseCell = document.createElement('td');
  273.     persentaseCell.className = "align-middle";
  274.     persentaseCell.innerHTML = `${indikator.persenRealisasiOutcome}%`;
  275.     rowIndikator.appendChild(persentaseCell);
  276.  
  277.     table.appendChild(rowIndikator);
  278. }
  279.  
  280. function detailTable(data) {
  281.     data.forEach(function (tujuan, T) {
  282.         if (T == 0) {
  283.             document.getElementById('detail-wrapper').innerHTML = "";
  284.             // document.getElementById('detail-wrapper').innerHTML = "";
  285.         }
  286.         var namaT = `<span class="fw-bolder">Tujuan: </span>${enterKata(tujuan.namaTujuan, 3)}`
  287.         detailParent(T + 1, namaT, tujuan.indikatorData.length + 1);
  288.  
  289.         // Indikator .............
  290.         tujuan.indikatorData.forEach(indikator => {
  291.             indikatorDetail(tujuan, indikator);
  292.         });
  293.  
  294.         // Sararan ............
  295.         tujuan.dataSasaran.forEach(function (sasaran, S) {
  296.             var namaS = `<span class="fw-bolder">Sasaran: </span>${enterKata(sasaran.namaSasaran, 3)}`
  297.             var kodeS = `${T + 1}.${S + 1}`;
  298.             var lengthS = sasaran.indikatorData.length + 1;
  299.             detailParent(kodeS, namaS, lengthS);
  300.  
  301.             // IndikatorSasran ................
  302.             sasaran.indikatorData.forEach(indikatorS => {
  303.                 indikatorDetail(sasaran, indikatorS);
  304.             });
  305.  
  306.             // Program .............
  307.             sasaran.dataProgram.forEach(function (program, P) {
  308.                 var namaP = `<span class="fw-bolder">Program: </span>${enterKata(program.namaProgram, 3)}`
  309.                 var kodeP = `${kodeS}.${P + 1}`;
  310.                 var lengthP = program.indikatorData.length + 1;
  311.                 detailParent(kodeP, namaP, lengthP);
  312.  
  313.                 // Indikator Program ...........................
  314.                 program.indikatorData.forEach(indikatorP => {
  315.                     indikatorDetail(program, indikatorP)
  316.                 });
  317.  
  318.                 // Kegiatan ........
  319.                 program.dataKegiatan.forEach(function (kegiatan, K) {
  320.                     var namaK = `<span class="fw-bolder">Kegiatan: </span>${enterKata(kegiatan.namaKegiatan, 3)}`
  321.                     var kodeK = `${kodeP}.${K + 1}`;
  322.                     var lengthK = kegiatan.indikatorData.length + 1;
  323.                     detailParent(kodeK, namaK, lengthK);
  324.  
  325.                     // Indikator kegiatan ...........
  326.                     kegiatan.indikatorData.forEach(indikatorK => {
  327.                         indikatorDetail(kegiatan, indikatorK);
  328.                     })
  329.  
  330.                     // Sub Kegiatan .............
  331.                     kegiatan.dataSubKegiatan.forEach(function (subKegiatan, Sk) {
  332.                         var namaSk = `<span class="fw-bolder">Sub Kegiatan: </span>${enterKata(subKegiatan.namaSubKegiatan, 3)}`
  333.                         var kodeSk = `${kodeK}.${Sk + 1}`;
  334.                         var lengthSk = subKegiatan.indikatorData.length + 1;
  335.                         detailParent(kodeSk, namaSk, lengthSk);
  336.                         // tableFS(subKegiatan, kodeSk);
  337.  
  338.                         // Indikator Sub Kegiatan ...........
  339.                         subKegiatan.indikatorData.forEach(indikatorSk => {
  340.                             var tw = subKegiatan.targetDanCapaian;
  341.                             indikatorDetail(subKegiatan, indikatorSk, tw);
  342.                         })
  343.                     })
  344.                 });
  345.             });
  346.         });
  347.     });
  348. }
  349.  
  350. function detailParent(kodeData, namaData, length) {
  351.     var table = document.getElementById('detail-wrapper');
  352.     // var detail = document.getElementById('detail-wrapper');
  353.  
  354.     var tableRow = document.createElement('tr');
  355.  
  356.     var kode = document.createElement('td');
  357.     kode.setAttribute('rowspan', length);
  358.     kode.className = "align-top text-start";
  359.     kode.textContent = kodeData;
  360.     tableRow.appendChild(kode);
  361.  
  362.     var nama = document.createElement('td');
  363.     nama.setAttribute('rowspan', length);
  364.     nama.className = "align-top text-start";
  365.     nama.innerHTML = namaData;
  366.     tableRow.appendChild(nama);
  367.  
  368.     table.appendChild(tableRow.cloneNode(true));
  369.     // detail.appendChild(tableRow);
  370.  
  371. }
  372.  
  373. function indikatorDetail(parent, indikator, triwulan) {
  374.     var table = document.getElementById('detail-wrapper');
  375.     var rowIndikator = document.createElement('tr');
  376.  
  377.     var indikatorCell = document.createElement('td');
  378.     indikatorCell.className = "align-top text-start";
  379.     indikatorCell.innerHTML = enterKata(indikator.NamaIndikator, 3);
  380.     rowIndikator.appendChild(indikatorCell);
  381.  
  382.     var targetCell = document.createElement('td');
  383.     targetCell.className = "align-middle";
  384.     targetCell.innerHTML = indikator.target;
  385.     rowIndikator.appendChild(targetCell);
  386.  
  387.     var satuanCell = document.createElement('td');
  388.     satuanCell.className = "align-middle";
  389.     satuanCell.innerHTML = indikator.satuan;
  390.     rowIndikator.appendChild(satuanCell);
  391.  
  392.     var paguCell = document.createElement('td');
  393.     paguCell.className = "align-middle";
  394.     paguCell.innerHTML = parent.targetPaguIndikatif == null ? '' : rpNone(parent.targetPaguIndikatif);
  395.     rowIndikator.appendChild(paguCell);
  396.  
  397.     var bobotCell = document.createElement('td');
  398.     bobotCell.className = "align-middle";
  399.     bobotCell.innerHTML = (typeof triwulan !== 'undefined') ? 100 : '';
  400.     rowIndikator.appendChild(bobotCell);
  401.  
  402.     if (typeof triwulan !== 'undefined') {
  403.         let totalCapaianTriwulan = 0;
  404.  
  405.         for (let i = 1; i <= 4; i++) {
  406.             triwulan.dataTriwulan[0].forEach(element => {
  407.                 if (element.triwulan === i) {
  408.                     var targetTriwulanCell = document.createElement('td');
  409.                     targetTriwulanCell.className = "align-middle";
  410.                     targetTriwulanCell.innerHTML = element.target;
  411.                     rowIndikator.appendChild(targetTriwulanCell);
  412.  
  413.                     var satuantargetTriwulanCell = document.createElement('td');
  414.                     satuantargetTriwulanCell.className = "align-middle";
  415.                     satuantargetTriwulanCell.innerHTML = indikator.satuan;
  416.                     rowIndikator.appendChild(satuantargetTriwulanCell);
  417.  
  418.                     var realisasiCell = document.createElement('td');
  419.                     realisasiCell.className = "align-middle";
  420.                     realisasiCell.innerHTML = element.realisasiKinerja;
  421.                     rowIndikator.appendChild(realisasiCell);
  422.  
  423.                     var satuanrealisasiTriwulanCell = document.createElement('td');
  424.                     satuanrealisasiTriwulanCell.className = "align-middle";
  425.                     satuanrealisasiTriwulanCell.innerHTML = indikator.satuan;
  426.                     rowIndikator.appendChild(satuanrealisasiTriwulanCell);
  427.  
  428.                     var anggaranTriwulanCell = document.createElement('td');
  429.                     anggaranTriwulanCell.className = "align-middle";
  430.                     anggaranTriwulanCell.innerHTML = element.rp;
  431.                     rowIndikator.appendChild(anggaranTriwulanCell)
  432.  
  433.                     var persenanggaranTriwulanCell = document.createElement('td');
  434.                     persenanggaranTriwulanCell.className = "align-middle";
  435.                     persenanggaranTriwulanCell.innerHTML = element.persenRealisasi;
  436.                     rowIndikator.appendChild(persenanggaranTriwulanCell)
  437.  
  438.                     totalCapaianTriwulan += element.rp;
  439.                 }
  440.             })
  441.         }
  442.         var capaianTw = document.createElement('td');
  443.         capaianTw.className = 'align-middle'
  444.         capaianTw.innerHTML = triwulan.TotalKinerja;
  445.         rowIndikator.appendChild(capaianTw);
  446.  
  447.         var satuancapaianTw = document.createElement('td');
  448.         satuancapaianTw.className = 'align-middle'
  449.         satuancapaianTw.innerHTML = indikator.satuan;
  450.         rowIndikator.appendChild(satuancapaianTw);
  451.  
  452.         var rpCell = document.createElement('td');
  453.         rpCell.className = 'align-middle';
  454.         // rpCell.innerHTML = rpNone(parent.targetPaguIndikatif);
  455.         rpCell.innerHTML = rpNone(totalCapaianTriwulan);
  456.         rowIndikator.appendChild(rpCell);
  457.  
  458.         var persenrpCell = document.createElement('td');
  459.         persenrpCell.className = 'align-middle';
  460.         persenrpCell.innerHTML = triwulan.TotalRealisasi;
  461.         rowIndikator.appendChild(persenrpCell);
  462.  
  463.         var satuanpersenrpCell = document.createElement('td');
  464.         satuanpersenrpCell.className = 'align-middle';
  465.         satuanpersenrpCell.innerHTML = '%';
  466.         rowIndikator.appendChild(satuanpersenrpCell);
  467.  
  468.  
  469.     } else {
  470.         for (let i = 1; i <= 29; i++) {
  471.             var triwulanCell = document.createElement('td');
  472.             triwulanCell.className = "align-middle";
  473.             triwulanCell.innerHTML = '';
  474.             rowIndikator.appendChild(triwulanCell);
  475.         }
  476.     }
  477.  
  478.     var kinerjaOutcomeCell = document.createElement('td');
  479.     kinerjaOutcomeCell.className = "align-middle";
  480.     kinerjaOutcomeCell.innerHTML = indikator.realisasiOutcome;
  481.     rowIndikator.appendChild(kinerjaOutcomeCell);
  482.  
  483.     var satuanOutcomeCell = document.createElement('td');
  484.     satuanOutcomeCell.className = "align-middle";
  485.     satuanOutcomeCell.innerHTML = indikator.satuan;
  486.     rowIndikator.appendChild(satuanOutcomeCell);
  487.  
  488.     var persentaseCell = document.createElement('td');
  489.     persentaseCell.className = "align-middle";
  490.     persentaseCell.innerHTML = `${indikator.persenRealisasiOutcome}%`;
  491.     rowIndikator.appendChild(persentaseCell);
  492.  
  493.     var pendorongCell = document.createElement('td');
  494.     pendorongCell.className = "align-middle";
  495.     pendorongCell.innerHTML = (typeof indikator.faktorPendorong !== 'undefined') ? indikator.faktorPendorong : '';
  496.     rowIndikator.appendChild(pendorongCell);
  497.  
  498.     var penghambatCell = document.createElement('td');
  499.     penghambatCell.className = "align-middle";
  500.     penghambatCell.innerHTML = (typeof indikator.faktorPenghambat !== 'undefined') ? indikator.faktorPenghambat : '';
  501.     rowIndikator.appendChild(penghambatCell);
  502.  
  503.     var tindakLanjutCell = document.createElement('td');
  504.     tindakLanjutCell.className = "align-middle";
  505.     tindakLanjutCell.innerHTML = (typeof indikator.tindakLanjut !== 'undefined') ? indikator.tindakLanjut : '';
  506.     rowIndikator.appendChild(tindakLanjutCell);
  507.  
  508.     table.appendChild(rowIndikator);
  509. }
  510.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement