capaian.js

window.onload = function () {
    content();
}
$(document).ready(pptkrenjaNav());

async function tableList(data) {
    var session = await getSession();
    var periode = session.periode;
    if (data.success === true) {
        var tbody = document.getElementById('table-wrapper');
        tbody.innerHTML = '';
        var capaians = data.data
        capaians.forEach(capaian => {
            const subsRows = document.createElement('tr');

            const kodeCol = document.createElement('td');
            kodeCol.scope = 'col';
            kodeCol.className = 'text-start text-nowrap align-top';
            kodeCol.rowSpan = capaian.dataUraian.length + 1;
            kodeCol.innerHTML = capaian.kode;
            subsRows.appendChild(kodeCol);

            const subsCol = document.createElement('td');
            subsCol.scope = 'col';
            subsCol.className = 'text-start text-nowrap align-top';
            subsCol.rowSpan = capaian.dataUraian.length + 1;
            subsCol.innerHTML = enterKata(capaian.namaSubKegiatan, 4);
            subsRows.appendChild(subsCol);
            tbody.appendChild(subsRows.cloneNode(true));

            capaian.dataUraian.forEach(uraian => {
                const uraianRows = document.createElement('tr');

                var namaCell = document.createElement('td');
                namaCell.className = "text-start align-top";
                // namaCell.innerHTML = enterKata(uraian.namaUraian, 4);
                namaCell.textContent = uraian.namaUraian;
                uraianRows.appendChild(namaCell);

                var volumeCell = document.createElement('td');
                volumeCell.className = "align-middle";
                volumeCell.textContent = uraian.targetTotalVolume;
                uraianRows.appendChild(volumeCell);

                var satuanCell = document.createElement('td');
                satuanCell.className = "align-middle";
                satuanCell.textContent = uraian.satuan;
                uraianRows.appendChild(satuanCell);

                for (let i = 1; i <= 4; i++) {
                    uraian.dataTriwulan.forEach(triwulan => {
                        if (triwulan.triwulan === i) {

                            var targetCell = document.createElement('td');
                            targetCell.className = 'align-middle';
                            targetCell.textContent = triwulan.targetTriwulanVolume;
                            uraianRows.appendChild(targetCell);

                            var capaianCell = document.createElement('td');
                            capaianCell.id = `trtw${i}${uraian.idUraian}`;
                            if (periode.status === 1) {
                                capaianCell.setAttribute('onclick', `getInput(${uraian.idUraian})`)
                                capaianCell.className = 'align-middle bg-light';
                            } else {
                                capaianCell.setAttribute('onclick', `toastr.warning('input tidak bisa dilakukan untuk saat ini.', 'Perhatian!!')`);
                                capaianCell.className = 'align-middle';
                            }
                            capaianCell.textContent = triwulan.capaianTriwulanVolume;
                            uraianRows.appendChild(capaianCell);

                            var persenCell = document.createElement('td');
                            persenCell.className = 'align-middle';
                            persenCell.textContent = triwulan.capaianTriwulanPersen === null ? 0 : bulatinKoma(triwulan.capaianTriwulanPersen);
                            uraianRows.appendChild(persenCell);
                        }
                    });
                }
                uraianRows.insertAdjacentHTML('beforeend', `<td class="align-middle">${uraian.capaianTotalPersentw1untiltw4 === null ? 0 : uraian.capaianTotalPersentw1untiltw4}</td>`);
                tbody.appendChild(uraianRows);
            })

            const result = document.createElement('tr');
            const titleResult = document.createElement('td');
            titleResult.scope = 'col';
            titleResult.className = 'text-center fw-bolder';
            titleResult.colSpan = '4';
            titleResult.textContent = 'Rata-rata capaian kinerja (%)';
            result.appendChild(titleResult);
            tbody.appendChild(result);

            const tw1Result = document.createElement('td');
            tw1Result.scope = 'col';
            tw1Result.className = 'text-center fw-bolder';
            tw1Result.colSpan = '3';
            var isiCapianPersen = capaian.capaianPersenSub[0].triwulanSatu
            tw1Result.textContent = bulatinKoma(isiCapianPersen);
            result.appendChild(tw1Result);

            const tw2Result = document.createElement('td');
            tw2Result.scope = 'col';
            tw2Result.className = 'text-center fw-bolder';
            tw2Result.colSpan = '3';
            tw2Result.textContent = bulatinKoma(capaian.capaianPersenSub[1].triwulanDua);
            result.appendChild(tw2Result);

            const tw3Result = document.createElement('td');
            tw3Result.scope = 'col';
            tw3Result.className = 'text-center fw-bolder';
            tw3Result.colSpan = '3';
            tw3Result.textContent = bulatinKoma(capaian.capaianPersenSub[2].triwulanTiga);
            result.appendChild(tw3Result);

            const tw4Result = document.createElement('td');
            tw4Result.scope = 'col';
            tw4Result.className = 'text-center fw-bolder';
            tw4Result.colSpan = '3';
            tw4Result.textContent = bulatinKoma(capaian.capaianPersenSub[3].triwulanEmplat);

            result.appendChild(tw4Result);
            const twTResult = document.createElement('td');
            twTResult.scope = 'col';
            twTResult.className = 'text-center fw-bolder';
            twTResult.colSpan = '3';
            twTResult.textContent = bulatinKoma(capaian.capaianPersenSub[4].totalAkhir);
            result.appendChild(twTResult);

            tbody.appendChild(result);
        })
    } else {
        const card = document.createElement('div');
        card.className = 'card text-center';
        card.innerHTML = `<p class=""text-center">Gagal memuat Data</p>`;
        document.getElementById('content-wrapper').innerHTML = '';
    }
}

function instrumenKosong() {
    const card = document.createElement('div');
    card.className = 'card text-center';
    const cardBody = document.createElement('div');
    cardBody.className = 'card-body';
    cardBody.innerHTML = `<p class='text-center py-5 fw-bolder'>Data belum tersedia, silahkan hubungi admin untuk informasi lebih lengkap</p>`
    card.appendChild(cardBody);

    document.getElementById('content-wrapper').innerHTML = '';
    document.getElementById('content-wrapper').appendChild(card);
}

function getInput(id) {
    for (let i = 1; i <= 4; i++) {
        var tr = document.getElementById(`trtw${i}${id}`);
        var input = document.createElement('input');
        input.className = 'form-control text-center';
        input.value = tr.textContent;
        input.type = "text";
        input.id = `tw${i}${id}`;
        input.setAttribute('onchange', `simpan(${id})`);

        tr.removeAttribute('onclick');
        tr.innerHTML = '';
        tr.appendChild(input);
    }
}

async function content() {
    var session = await getSession();
    const data = await getData(`opdpptk_renja/capaian/list`);
    if (!data.success) {
        cekLogin(data.data);
    }
    if (data.data.length == 0) {
        instrumenKosong();
        return;
    }
    const card = document.createElement('div');
    card.className = 'card text-center';

    const cardHeader = document.createElement('div');
    cardHeader.className = 'card-header bg-dark-subtle';
    const cardTitle = document.createElement('h4');
    cardTitle.className = 'fw-bolder text-white';
    cardTitle.textContent = 'Capaian Kinerja';
    cardHeader.appendChild(cardTitle);

    const cardBody = document.createElement('div');
    cardBody.className = 'card-body';
    if (session.periode.status === 1) {
        cardBody.innerHTML += `<div class="alert mb-3 alert-secondary bg-warning-subtle text-start text-dark border-0 fade show" role="alert">
                                    <table>
                                        <tr>
                                            <td rowspan='3' class="align-top">
                                                <span class="fw-bolder col-3 me-2">Petunjuk pengisian</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="ms-2">
                                                - Untuk melakukan input Capaian silahkan klik sel yang berwarna <span class="badge text-bg-light">cerah</span>
                                            </td>
                                        </tr>
                                    </table>
                                </div>`;
    }

    const tableResponsive = document.createElement('div');
    tableResponsive.className = 'table-responsive';

    const table = document.createElement('table');
    table.id = 'table-content';
    table.className = 'table table-bordered mb-0';

    const tableHeader = document.createElement('thead');
    const headerRows = [
        '<tr><th scope="col" rowspan="3" class="align-middle">Kode</th><th scope="col" rowspan="3" class="align-middle">Sub Kegiatan</th><th scope="col" rowspan="3" class="align-middle">Uraian</th><th scope="col" colspan="19" class="bg-primary-subtle text-dark">Kinerja Triwulan</th></tr>',
        '<tr><th rowspan="2" class="align-middle">Target</th><th rowspan="2" class="align-middle">Satuan</th><th colspan="3">Triwulan I</th><th colspan="3">Triwulan II</th><th colspan="3">Triwulan III</th><th colspan="3">Triwulan IV</th><th rowspan="2" class="text-nowrap">Total Capaian (%)</th></tr>',
        '<tr>'
    ];

    for (let i = 0; i < 4; i++) {
        headerRows.push('<th>Target</th><th class="text-nowrap">&nbsp;&nbsp; Capaian &nbsp;&nbsp;</th><th>(%)</th>');
    }

    headerRows.push('</tr>');

    tableHeader.innerHTML = headerRows.join('');

    const tableBody = document.createElement('tbody');
    tableBody.id = 'table-wrapper';

    const tbodyRows = [
        `<tr><td class="text-center" colspan="21">
            <div class="spinner-border text-center" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </td></tr>`
    ]
    tableBody.innerHTML = tbodyRows.join('');
    table.appendChild(tableHeader);
    table.appendChild(tableBody);
    tableResponsive.appendChild(table);
    cardBody.appendChild(tableResponsive);
    card.appendChild(cardHeader);
    card.appendChild(cardBody);
    document.getElementById('content-wrapper').innerHTML = '';
    document.getElementById('content-wrapper').appendChild(card);
    tableList(data);
}

async function simpan(id) {
    for (i = 1; i <= 4; i++) {
        var twVal = document.getElementById(`tw${i}${id}`);
        if (twVal.value == "") {
            twVal.focus();
            return;
        }
    }
    var body = {
        id: id,
        triwulan1: $(`#tw1${id}`).val(),
        triwulan2: $(`#tw2${id}`).val(),
        triwulan3: $(`#tw3${id}`).val(),
        triwulan4: $(`#tw4${id}`).val(),
    }

    for (let j = 1; j <= 4; j++) {
        document.getElementById(`trtw${j}${id}`).innerHTML = LoadingCircle;
    }
    $.ajax({
        url: `${base_url}opdpptk_renja/capaian/update`,
        type: "POST",
        data: body
    }).done(response => {
        var data = JSON.parse(response);
        if (data.success == true) {
            content();
            pptkrenjaNav();
            toastr.success('Capaian berhasil diperbarui', 'Berhasil');
        } else {
            cekLogin(data.data);
            toastr.error('Capaian gagal diperbarui', 'Gagal');
        }
    })

}