renja.js

window.onload = function () {
    opdSelect2('#opd');
    selectTahun();
}

function selectTahun() {
    fetch(`${base_url}admin_tahun/list`)
        .then(response => response.json())
        .then(data => {
            if (data.success == true) {
                var tahun = data.data;
                var tahunList = [
                    {
                        id: tahun.tahunSatu,
                        text: tahun.tahunSatu
                    },
                    {
                        id: tahun.tahunDua,
                        text: tahun.tahunDua
                    },
                    {
                        id: tahun.tahunTiga,
                        text: tahun.tahunTiga
                    },
                    {
                        id: tahun.tahunEmpat,
                        text: tahun.tahunEmpat
                    },
                    {
                        id: tahun.tahunLima,
                        text: tahun.tahunLima
                    }
                ];
                $('#tahun').select2({
                    data: tahunList
                });
            } else {
                cekLogin(data.data);
            }
        })
}

async function cari(id) {
    var opd = document.getElementById('opd');
    var opdSelected = opd.options[opd.selectedIndex];
    var tahun = document.getElementById('tahun');
    var tahunSelected = tahun.options[tahun.selectedIndex];

    if (opdSelected.value === 'placeholder') {
        opd.classList.add('is-invalid');
        afterSpiner(id, 'Cari', 'search');
        toastr.error('OPD belum dipilih', "Gagal");
        return;
    }
    if (tahunSelected.value === 'placeholder') {
        tahun.classList.add('is-invalid');
        afterSpiner(id, 'Cari', 'search');
        toastr.error('Tahun belum dipilih', "Gagal");
        return;
    }
    spiner(id, 'Mencari'),
        await renjaList(tahun.value, opd.value),
        afterSpiner(id, 'Cari', 'search')
}

const renjaList = async (tahun, opd) => {
    var table = document.getElementById('table-content');
    try {
        const res = await fetch(`${base_url}admin_evaluasi/renja/data/${tahun}/${opd}`);
        if (!res.ok) {
            throw new Error("Gagal mengambil data");
        }
        const data = await res.json();
        if (data.success === false) {
            belumAda(data.message);
            table.className = "";
            table.classList.add('card', 'd-none');
        } else {
            table.className = "";
            table.classList.add('card');
            dataAda(data.data);
        }

    } catch (error) {
        console.log(error);
        toastr.error(error, "Terjadi kesalahan");
    }
    // createTable(tahun, opd)
}

const belumAda = () => {
    var opd = document.getElementById('opd');
    var opdSelected = opd.options[opd.selectedIndex];
    var tahun = document.getElementById('tahun');
    var tahunSelected = tahun.options[tahun.selectedIndex];

    const content = document.getElementById('data-content');
    content.innerHTML = "";
    const div = document.createElement('div');
    div.classList.add('col-12', 'd-flex', 'justify-content-center', 'py-5', 'align-items-center');

    const span = document.createElement('span')
    span.className = "text-center fw-semibold text-danger";
    span.innerHTML = `${opdSelected.textContent} Belum melakukan input capaian untuk tahun ${tahunSelected.textContent} atau perencanaan belum dibuat`;
    div.appendChild(span);

    content.appendChild(div);
}

const dataAda = (data) => {
    var opd = document.getElementById('opd');
    var opdSelected = opd.options[opd.selectedIndex];
    var tahun = document.getElementById('tahun');
    var tahunSelected = tahun.options[tahun.selectedIndex];

    const content = document.getElementById('data-content');
    content.innerHTML = "";
    const div = document.createElement('div');
    div.classList.add('col-12', 'd-flex', 'justify-content-center', 'py-2', 'align-items-center');

    const span = document.createElement('span')
    span.className = "text-center fw-semibold fs-4";
    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>`;
    div.appendChild(span);
    content.appendChild(div);

    document.getElementById('tahun-target').innerHTML = tahunSelected.textContent;
    document.getElementById('tahun-target-fs').innerHTML = tahunSelected.textContent;
    document.getElementById('tahun-capaian-fs').innerHTML = tahunSelected.textContent;

    document.getElementById('title-fs').innerHTML = `${opdSelected.textContent} tahun ${tahunSelected.textContent}`;

    document.getElementById('btn-download-laporan').href = `${base_url}admin_evaluasi/renja_download/${tahun.value}/${opd.value}`

    createResult(data);
    detailTable(data);
}


function createResult(data) {
    data.forEach(function (tujuan, T) {
        if (T == 0) {
            document.getElementById('table-wrapper').innerHTML = "";
            // document.getElementById('detail-wrapper').innerHTML = "";
        }
        var namaT = `<span class="fw-bolder">Tujuan: </span>${enterKata(tujuan.namaTujuan, 3)}`
        parentTable(T + 1, namaT, tujuan.indikatorData.length + 1);

        // Indikator .............
        tujuan.indikatorData.forEach(indikator => {
            resultTable(indikator, tujuan.targetPaguIndikatif);
        });

        // Sararan ............
        tujuan.dataSasaran.forEach(function (sasaran, S) {
            var namaS = `<span class="fw-bolder">Sasaran: </span>${enterKata(sasaran.namaSasaran, 3)}`
            var kodeS = `${T + 1}.${S + 1}`;
            var lengthS = sasaran.indikatorData.length + 1;
            parentTable(kodeS, namaS, lengthS);

            // IndikatorSasran ................
            sasaran.indikatorData.forEach(indikatorS => {
                resultTable(indikatorS, sasaran.targetPaguIndikatif);
            });

            // Program .............
            sasaran.dataProgram.forEach(function (program, P) {
                var namaP = `<span class="fw-bolder">Program: </span>${enterKata(program.namaProgram, 3)}`
                var kodeP = `${kodeS}.${P + 1}`;
                var lengthP = program.indikatorData.length + 1;
                parentTable(kodeP, namaP, lengthP);

                // Indikator Program ...........................
                program.indikatorData.forEach(indikatorP => {
                    resultTable(indikatorP, program.targetPaguIndikatif)
                });

                // Kegiatan ........
                program.dataKegiatan.forEach(function (kegiatan, K) {
                    var namaK = `<span class="fw-bolder">Kegiatan: </span>${enterKata(kegiatan.namaKegiatan, 3)}`
                    var kodeK = `${kodeP}.${K + 1}`;
                    var lengthK = kegiatan.indikatorData.length + 1;
                    parentTable(kodeK, namaK, lengthK);

                    // Indikator kegiatan ...........
                    kegiatan.indikatorData.forEach(indikatorK => {
                        resultTable(indikatorK, kegiatan.targetPaguIndikatif);
                    })

                    // Sub Kegiatan .............
                    kegiatan.dataSubKegiatan.forEach(function (subKegiatan, Sk) {
                        var namaSk = `<span class="fw-bolder">Sub Kegiatan: </span>${enterKata(subKegiatan.namaSubKegiatan, 3)}`
                        var kodeSk = `${kodeK}.${Sk + 1}`;
                        var lengthSk = subKegiatan.indikatorData.length + 1;
                        parentTable(kodeSk, namaSk, lengthSk);
                        // tableFS(subKegiatan, kodeSk);

                        if (subKegiatan.indikatorData) {
                            // Indikator Sub Kegiatan ...........
                            subKegiatan.indikatorData.forEach(indikatorSk => {
                                var tw = subKegiatan.targetDanCapaian;
                                resultTable(indikatorSk, subKegiatan.targetPaguIndikatif, tw.TotalKinerja, tw.TotalRealisasi);
                            });
                        }
                    })
                });
            });
        });
    });
}

function parentTable(kodeData, namaData, length) {
    var table = document.getElementById('table-wrapper');
    // var detail = document.getElementById('detail-wrapper');

    var tableRow = document.createElement('tr');

    var kode = document.createElement('td');
    kode.setAttribute('rowspan', length);
    kode.className = "align-top text-start";
    kode.textContent = kodeData;
    tableRow.appendChild(kode);

    var nama = document.createElement('td');
    nama.setAttribute('rowspan', length);
    nama.className = "align-top text-start";
    nama.innerHTML = namaData;
    tableRow.appendChild(nama);

    table.appendChild(tableRow.cloneNode(true));
    // detail.appendChild(tableRow);

}

function resultTable(indikator, pagu, kinerja = null, rp = null) {
    var table = document.getElementById('table-wrapper');
    var rowIndikator = document.createElement('tr');

    var indikatorCell = document.createElement('td');
    indikatorCell.className = "align-top text-start";
    indikatorCell.innerHTML = indikator ? enterKata(indikator.NamaIndikator, 3) : '';
    rowIndikator.appendChild(indikatorCell);

    var targetCell = document.createElement('td');
    targetCell.className = "align-middle";
    targetCell.innerHTML = indikator ? indikator.target : '';
    rowIndikator.appendChild(targetCell);

    var satuanCell = document.createElement('td');
    satuanCell.className = "align-middle";
    satuanCell.innerHTML = indikator ? indikator.satuan : '';
    rowIndikator.appendChild(satuanCell);

    var paguCell = document.createElement('td');
    paguCell.className = "align-middle";
    paguCell.innerHTML = pagu == null ? '' : rpNone(pagu);
    rowIndikator.appendChild(paguCell);

    var kinerjaCell = document.createElement('td');
    kinerjaCell.className = "align-middle";
    kinerjaCell.innerHTML = kinerja == null ? '' : kinerja;
    rowIndikator.appendChild(kinerjaCell);

    var rpCell = document.createElement('td');
    rpCell.className = "align-middle";
    rpCell.innerHTML = rp == null ? '' : rp;
    rowIndikator.appendChild(rpCell);

    var realisasiCell = document.createElement('td');
    realisasiCell.id = indikator ? `real${indikator.idindikator}` : '';
    realisasiCell.className = "align-middle";
    realisasiCell.innerHTML = indikator ? indikator.realisasiOutcome : '';
    rowIndikator.appendChild(realisasiCell);

    var persentaseCell = document.createElement('td');
    persentaseCell.className = "align-middle";
    persentaseCell.innerHTML = indikator ? `${indikator.persenRealisasiOutcome}%` : '';
    rowIndikator.appendChild(persentaseCell);

    table.appendChild(rowIndikator);
}

function detailTable(data) {
    data.forEach(function (tujuan, T) {
        if (T == 0) {
            document.getElementById('detail-wrapper').innerHTML = "";
            // document.getElementById('detail-wrapper').innerHTML = "";
        }
        var namaT = `<span class="fw-bolder">Tujuan: </span>${enterKata(tujuan.namaTujuan, 3)}`
        detailParent(T + 1, namaT, tujuan.indikatorData.length + 1);

        // Indikator .............
        tujuan.indikatorData.forEach(indikator => {
            indikatorDetail(tujuan, indikator);
        });

        // Sararan ............
        tujuan.dataSasaran.forEach(function (sasaran, S) {
            var namaS = `<span class="fw-bolder">Sasaran: </span>${enterKata(sasaran.namaSasaran, 3)}`
            var kodeS = `${T + 1}.${S + 1}`;
            var lengthS = sasaran.indikatorData.length + 1;
            detailParent(kodeS, namaS, lengthS);

            // IndikatorSasran ................
            sasaran.indikatorData.forEach(indikatorS => {
                indikatorDetail(sasaran, indikatorS);
            });

            // Program .............
            sasaran.dataProgram.forEach(function (program, P) {
                var namaP = `<span class="fw-bolder">Program: </span>${enterKata(program.namaProgram, 3)}`
                var kodeP = `${kodeS}.${P + 1}`;
                var lengthP = program.indikatorData.length + 1;
                detailParent(kodeP, namaP, lengthP);

                // Indikator Program ...........................
                program.indikatorData.forEach(indikatorP => {
                    indikatorDetail(program, indikatorP)
                });

                // Kegiatan ........
                program.dataKegiatan.forEach(function (kegiatan, K) {
                    var namaK = `<span class="fw-bolder">Kegiatan: </span>${enterKata(kegiatan.namaKegiatan, 3)}`
                    var kodeK = `${kodeP}.${K + 1}`;
                    var lengthK = kegiatan.indikatorData.length + 1;
                    detailParent(kodeK, namaK, lengthK);

                    // Indikator kegiatan ...........
                    kegiatan.indikatorData.forEach(indikatorK => {
                        indikatorDetail(kegiatan, indikatorK);
                    })

                    // Sub Kegiatan .............
                    kegiatan.dataSubKegiatan.forEach(function (subKegiatan, Sk) {
                        var namaSk = `<span class="fw-bolder">Sub Kegiatan: </span>${enterKata(subKegiatan.namaSubKegiatan, 3)}`
                        var kodeSk = `${kodeK}.${Sk + 1}`;
                        var lengthSk = subKegiatan.indikatorData.length + 1;
                        detailParent(kodeSk, namaSk, lengthSk);
                        // tableFS(subKegiatan, kodeSk);

                        // Indikator Sub Kegiatan ...........
                        subKegiatan.indikatorData.forEach(indikatorSk => {
                            var tw = subKegiatan.targetDanCapaian;
                            indikatorDetail(subKegiatan, indikatorSk, tw);
                        })
                    })
                });
            });
        });
    });
}

function detailParent(kodeData, namaData, length) {
    var table = document.getElementById('detail-wrapper');
    // var detail = document.getElementById('detail-wrapper');

    var tableRow = document.createElement('tr');

    var kode = document.createElement('td');
    kode.setAttribute('rowspan', length);
    kode.className = "align-top text-start";
    kode.textContent = kodeData;
    tableRow.appendChild(kode);

    var nama = document.createElement('td');
    nama.setAttribute('rowspan', length);
    nama.className = "align-top text-start";
    nama.innerHTML = namaData;
    tableRow.appendChild(nama);

    table.appendChild(tableRow.cloneNode(true));
    // detail.appendChild(tableRow);

}

function indikatorDetail(parent, indikator, triwulan) {
    var table = document.getElementById('detail-wrapper');
    var rowIndikator = document.createElement('tr');

    var indikatorCell = document.createElement('td');
    indikatorCell.className = "align-top text-start";
    indikatorCell.innerHTML = indikator ? enterKata(indikator.NamaIndikator, 3) : '';
    rowIndikator.appendChild(indikatorCell);

    var targetCell = document.createElement('td');
    targetCell.className = "align-middle";
    targetCell.innerHTML = indikator ?indikator.target : '';
    rowIndikator.appendChild(targetCell);

    var satuanCell = document.createElement('td');
    satuanCell.className = "align-middle";
    satuanCell.innerHTML = indikator ?indikator.satuan:'';
    rowIndikator.appendChild(satuanCell);

    var paguCell = document.createElement('td');
    paguCell.className = "align-middle";
    paguCell.innerHTML = parent.targetPaguIndikatif == null ? '' : rpNone(parent.targetPaguIndikatif);
    rowIndikator.appendChild(paguCell);

    var bobotCell = document.createElement('td');
    bobotCell.className = "align-middle";
    bobotCell.innerHTML = (typeof triwulan !== 'undefined') ? 100 : '';
    rowIndikator.appendChild(bobotCell);

    if (typeof triwulan !== 'undefined') {
        let totalCapaianTriwulan = 0;

        for (let i = 1; i <= 4; i++) {
            triwulan.dataTriwulan[0].forEach(element => {
                if (element.triwulan === i) {
                    var targetTriwulanCell = document.createElement('td');
                    targetTriwulanCell.className = "align-middle";
                    targetTriwulanCell.innerHTML = element.target;
                    rowIndikator.appendChild(targetTriwulanCell);

                    var satuantargetTriwulanCell = document.createElement('td');
                    satuantargetTriwulanCell.className = "align-middle";
                    satuantargetTriwulanCell.innerHTML = indikator ? indikator.satuan : '';
                    rowIndikator.appendChild(satuantargetTriwulanCell);

                    var realisasiCell = document.createElement('td');
                    realisasiCell.className = "align-middle";
                    realisasiCell.innerHTML = element.realisasiKinerja;
                    rowIndikator.appendChild(realisasiCell);

                    var satuanrealisasiTriwulanCell = document.createElement('td');
                    satuanrealisasiTriwulanCell.className = "align-middle";
                    satuanrealisasiTriwulanCell.innerHTML = indikator ? indikator.satuan : '';
                    rowIndikator.appendChild(satuanrealisasiTriwulanCell);

                    var anggaranTriwulanCell = document.createElement('td');
                    anggaranTriwulanCell.className = "align-middle";
                    anggaranTriwulanCell.innerHTML = element.rp;
                    rowIndikator.appendChild(anggaranTriwulanCell)

                    var persenanggaranTriwulanCell = document.createElement('td');
                    persenanggaranTriwulanCell.className = "align-middle";
                    persenanggaranTriwulanCell.innerHTML = element.persenRealisasi;
                    rowIndikator.appendChild(persenanggaranTriwulanCell)

                    totalCapaianTriwulan += element.rp;
                }
            })
        }
        var capaianTw = document.createElement('td');
        capaianTw.className = 'align-middle'
        capaianTw.innerHTML = triwulan.TotalKinerja;
        rowIndikator.appendChild(capaianTw);

        var satuancapaianTw = document.createElement('td');
        satuancapaianTw.className = 'align-middle'
        satuancapaianTw.innerHTML = indikator ? indikator.satuan : '';
        rowIndikator.appendChild(satuancapaianTw);

        var rpCell = document.createElement('td');
        rpCell.className = 'align-middle';
        // rpCell.innerHTML = rpNone(parent.targetPaguIndikatif);
        rpCell.innerHTML = rpNone(totalCapaianTriwulan);
        rowIndikator.appendChild(rpCell);

        var persenrpCell = document.createElement('td');
        persenrpCell.className = 'align-middle';
        persenrpCell.innerHTML = triwulan.TotalRealisasi;
        rowIndikator.appendChild(persenrpCell);

        var satuanpersenrpCell = document.createElement('td');
        satuanpersenrpCell.className = 'align-middle';
        satuanpersenrpCell.innerHTML = '%';
        rowIndikator.appendChild(satuanpersenrpCell);


    } else {
        for (let i = 1; i <= 29; i++) {
            var triwulanCell = document.createElement('td');
            triwulanCell.className = "align-middle";
            triwulanCell.innerHTML = '';
            rowIndikator.appendChild(triwulanCell);
        }
    }

    var kinerjaOutcomeCell = document.createElement('td');
    kinerjaOutcomeCell.className = "align-middle";
    kinerjaOutcomeCell.innerHTML = indikator ? indikator.realisasiOutcome : '';
    rowIndikator.appendChild(kinerjaOutcomeCell);

    var satuanOutcomeCell = document.createElement('td');
    satuanOutcomeCell.className = "align-middle";
    satuanOutcomeCell.innerHTML = indikator ? indikator.satuan : '';
    rowIndikator.appendChild(satuanOutcomeCell);

    var persentaseCell = document.createElement('td');
    persentaseCell.className = "align-middle";
    persentaseCell.innerHTML =indikator ? `${indikator.persenRealisasiOutcome}%` : '';
    rowIndikator.appendChild(persentaseCell);

    var pendorongCell = document.createElement('td');
    pendorongCell.className = "align-middle";
    pendorongCell.innerHTML = indikator ? ((typeof indikator.faktorPendorong !== 'undefined') ? indikator.faktorPendorong : '') : '';
    rowIndikator.appendChild(pendorongCell);

    var penghambatCell = document.createElement('td');
    penghambatCell.className = "align-middle";
    penghambatCell.innerHTML = indikator ? ((typeof indikator.faktorPenghambat !== 'undefined') ? indikator.faktorPenghambat : '') : '';
    rowIndikator.appendChild(penghambatCell);

    var tindakLanjutCell = document.createElement('td');
    tindakLanjutCell.className = "align-middle";
    tindakLanjutCell.innerHTML = indikator ? ((typeof indikator.tindakLanjut !== 'undefined') ? indikator.tindakLanjut : '') : '';
    rowIndikator.appendChild(tindakLanjutCell);

    table.appendChild(rowIndikator);
}