Advertisement
martinms

renja.js

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