API tools faq
paste
martinms

periode.js

martinms
May 15th, 2024
156
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 19.20 KB | None | 0 0
raw download clone embed print report
  1. window.onload = function () {
  2.     var card = `<div class="card card-body" id="table-wrapper">
  3.                     <div class="col-12 d-flex justify-content-center">
  4.                    
  5.                         <div class="spinner-border text-center" role="status">
  6.                             <span class="visually-hidden">Loading...</span>
  7.                         </div>
  8.                     </div>
  9.                 </div>`;
  10.     Promise.all([
  11.         document.getElementById('card-wrapper').innerHTML = card
  12.     ])
  13.         .then(() => {
  14.             periodeList();
  15.         })
  16. }
  17.  
  18. async function periodeList() {
  19.     await fetch(`${base_url}admin_periode/list/jadwal`)
  20.         .then(response => response.json())
  21.         .then(data => {
  22.             var periodes = JSON.parse(data);
  23.             if (periodes.success === true) {
  24.                 if (Object.keys(periodes.data[0]).length !== 0) {
  25.                     Promise.all([
  26.                         tableHead(),
  27.                     ])
  28.                     var tbody = document.getElementById('tbody-list');
  29.                     tbody.innerHTML = '';
  30.                     var newRow = [];
  31.                     var periode = periodes.data;
  32.                     periode.forEach(function (period) {
  33.                         Object.keys(period).forEach(tahun => {
  34.                             newRow.push(`<tr>
  35.                             <td rowspan="${period[tahun].length + 1}" class="align-top">
  36.                             <span class="usr-location" data-location="">
  37.                             ${tahun}
  38.                             </span>
  39.                             </td>
  40.                             </tr>`);
  41.                             period[tahun].forEach(jadwals => {
  42.                                 newRow.push(buatTable(jadwals));
  43.                             })
  44.                         });
  45.                     })
  46.                     buatCountDown();
  47.                     tbody.innerHTML = newRow.join('');
  48.                 } else {
  49.                     document.getElementById('card-wrapper').innerHTML = `
  50.                                                                     <div class="card card-body" id="table-wrapper">
  51.                                                                         <div class="col-12 d-flex justify-content-center">
  52.                                                                         <span class="text-center fw-bolder">"Belum Ada Jadwal"</span>
  53.                                                                         </div>
  54.                                                                     </div>
  55.                                                                         `;
  56.                 }
  57.             } else {
  58.                 cekLogin(periodes.data);
  59.             }
  60.         })
  61.         .catch(error => console.error('Error fetching data:', error));
  62. }
  63.  
  64. function tableHead() {
  65.     var table = `<div class="table-responsive">
  66.                     <table class="table align-middle text-nowrap">
  67.                         <thead class="header-item">
  68.                             <th>Tahun</th>
  69.                             <th>Kegiatan</th>
  70.                             <th>OPD</th>
  71.                             <th class="text-center">Periode Berakhir</th>
  72.                             <th class="text-center">Status</th>
  73.                             <th class="text-center">Aksi</th>
  74.                         </thead>
  75.                         <tbody id="tbody-list">
  76.                             <tr>
  77.                                 <td colspan="5" class="text-center">
  78.                                     <div class="card card-body blink bg-light rounded">
  79.                                         <div class="col-12 d-flex justify-content-center">
  80.                                             <div class="spinner-border text-center" role="status">
  81.                                                 <span class="visually-hidden">Loading...</span>
  82.                                             </div>
  83.                                         </div>
  84.                                     </div>
  85.                                 </td>
  86.                             </tr>
  87.                         </tbody>
  88.                     </table>
  89.                 </div>`;
  90.     document.getElementById('table-wrapper').innerHTML = table;
  91. }
  92. function buatTable(jadwal) {
  93.     var uraian = [];
  94.     uraian.push(`<tr>
  95.                     <td>
  96.                         <div class="d-flex align-items-center">
  97.                             <i class="ti ti-calendar text-info fw-bolder fs-12"></i>
  98.                             <div class="ms-3">
  99.                                 <div class="user-meta-info">
  100.                                     <h6 class="user-name mb-2 fw-bolder">
  101.                                         ${jadwal.namaPeriode}
  102.                                     </h6>
  103.                                     <span class="user-work fs-3">
  104.                                         ${jadwal.waktuMulai} - ${jadwal.waktuAkhir}
  105.                                     </span></br>
  106.  
  107.                                 </div>
  108.                             </div>
  109.                         </div>
  110.                     </td>
  111.                     <td class="text-center fw-bolder">
  112.                         ${jadwal.opdList.length}
  113.                         <a href="javascript:void(0)" id="lihatOpd${jadwal.idPeriode}" class="ms-3" onclick='listOpd(${jadwal.idPeriode}, this.id)'>
  114.                             <i class="ti ti-eye text-primary"></i>
  115.                         </a>
  116.                     </td>
  117.                     <td class="text-center">
  118.                         <div class="user-work fs-3" id="countDown${jadwal.idPeriode}">
  119.                             ${jadwal.waktuAkhir}
  120.                         </div>
  121.                     </td>
  122.                     <td class="text-center">
  123.                         <span class="usr-ph-no" data-phone="">`);
  124.     if (jadwal.status == 1) {
  125.         uraian.push('<strong class="text-success">Aktif</strong>');
  126.  
  127.     } else if (jadwal.status == 0) {
  128.         uraian.push('<strong class="text-danger">Berakhir</strong>');
  129.     } else {
  130.         uraian.push('<strong class="text-dark">Non Aktif</strong>');
  131.     }
  132.  
  133.     uraian.push(`</span>
  134.                     </td>
  135.                     <td class="text-center">
  136.                         <div class="action-btn">
  137.                             <button type="button"
  138.                                 class="btn mb-1 me-2 btn-warning btn-circle btn-sm d-inline-flex align-items-center justify-content-center"
  139.                                 id="btn-edit-${jadwal.idPeriode}"
  140.                                 onclick="editData('${jadwal.idPeriode}'), spiner(this.id)">
  141.                                 <i class="fs-5 ti ti-edit"></i>
  142.                             </button>
  143.                             <button type="button"
  144.                                 class="btn mb-1 btn-danger btn-circle btn-sm d-inline-flex align-items-center justify-content-center"
  145.                                 data-bs-toggle="modal" data-bs-target="#deleteModal"
  146.                                 onclick="deleteData('${jadwal.idPeriode}','${jadwal.namaPeriode}', '${jadwal.tahunPeriode}')">
  147.                                 <i class="fs-5 ti ti-trash"></i>
  148.                             </button>
  149.                         </div>
  150.                     </td>
  151.                 </tr>`);
  152.     return uraian.join('');
  153.  
  154. }
  155.  
  156. async function listOpd(id, btn) {
  157.     spiner(btn);
  158.     await fetch(`${base_url}admin_periode/list/opd/${id}`)
  159.         .then(response => response.json())
  160.         .then(data => {
  161.             document.getElementById('detail-nama-periode').innerHTML = `${data.nama} (${data.tahun})`
  162.             document.getElementById('detail-jumlah-opd').innerHTML = `Jumlah OPD: ${data.jumlah}`
  163.             var opdList = [];
  164.             data.opd.forEach(Element => {
  165.                 opdList.push(`<p class="list-group-item list-group-item-action">
  166.                     <i class="ti col-2 ti-home fw-bolder fs-5 me-2"></i>
  167.                     <span class="col-9">${Element}</span>
  168.                 </p>`);
  169.             })
  170.             document.getElementById('detail-list-nama-opd').innerHTML = opdList.join('');
  171.             $('#lihat-opd').modal('show');
  172.         })
  173.         .catch(error => console.error('Error fetching data:', error));
  174.     afterSpiner(btn, '', 'eye');
  175. }
  176.  
  177. function buatCountDown() {
  178.     $.ajax({
  179.         url: `${base_url}admin_periode/listJadwal`,
  180.         type: "GET"
  181.     }).done(function (response) {
  182.         var data = JSON.parse(response);
  183.         data.forEach((yearData) => {
  184.             for (const year in yearData) {
  185.                 const periods = yearData[year];
  186.                 periods.forEach((period) => {
  187.                     const idPeriode = period.idPeriode;
  188.                     const waktuAkhir = period.waktuAkhir;
  189.                     const date = formatJadwal(waktuAkhir);
  190.                     document.getElementById(`countDown${idPeriode}`).innerHTML = '-- -- -- --'
  191.                     countDown(`countDown${idPeriode}`, date);
  192.                 });
  193.             }
  194.         });
  195.     })
  196. }
  197.  
  198. $('#date-range-edit').each(function () {
  199.     $(this).datepicker({
  200.         format: "yyyy-mm-dd",
  201.         startDate: new Date(),
  202.         autoclose: true,
  203.     });
  204.     $(this).datepicker('clearDates');
  205. });
  206.  
  207. $('#date-range-add').each(function () {
  208.     $(this).datepicker({
  209.         format: "yyyy-mm-dd",
  210.         startDate: new Date(),
  211.         autoclose: true,
  212.     });
  213.     $(this).datepicker('clearDates');
  214. });
  215.  
  216.  
  217. $('#edit-tahun').datepicker({
  218.     format: "yyyy",
  219.     startView: 2,
  220.     minViewMode: 2,
  221.     autoclose: true,
  222.     startDate: "2019"
  223. });
  224.  
  225.  
  226.  
  227. $(document).ready(function () {
  228.     // opdSelect2('#edit-opd', '#editModal', 'semua');
  229.     opdSelect2('#opd', '#addModal', 'semua');
  230.  
  231.     // Tangani perubahan pada elemen select
  232.     $('#opd').on('change', function (e) {
  233.         var selectedValues = $(this).val();
  234.  
  235.         // Jika "Select All" dipilih, pilih semua opsi
  236.         if (selectedValues && selectedValues.includes('-1')) {
  237.             $('#opd').find('option').prop('selected', true);
  238.             $('#opd').trigger('change');
  239.         }
  240.     });
  241. });
  242.  
  243. async function addForm(id) {
  244.     spiner(id, ' Mengambil Form');
  245.     $('#form-add')[0].reset();
  246.     $('#opd').val(null).trigger('change');
  247.     Promise.all([
  248.         await createSelect('tahun')
  249.     ])
  250.         .then(() => {
  251.             $('#addModal').modal('show');
  252.             afterSpiner(id, 'Buat Jadwal', 'calendar-plus fs-5 me-1');
  253.         })
  254.  
  255.  
  256. }
  257.  
  258. async function createSelect(tahun) {
  259.     await fetch(`${base_url}admin_tahun/list`)
  260.         .then(response => response.json())
  261.         .then(data => {
  262.             var selectTahun = document.getElementById(tahun);
  263.             while (selectTahun.firstChild) {
  264.                 selectTahun.removeChild(selectTahun.firstChild);
  265.             }
  266.             var pilihTahun = document.createElement('option');
  267.             pilihTahun.text = "Pilih tahun ...";
  268.             pilihTahun.value = "placeholder";
  269.             pilihTahun.selected = true;
  270.             pilihTahun.disabled = true;
  271.             selectTahun.appendChild(pilihTahun);
  272.            
  273.             var tahunSatu = document.createElement("option");
  274.             tahunSatu.value = data.data.tahunSatu;
  275.             tahunSatu.text = data.data.tahunSatu;
  276.             selectTahun.appendChild(tahunSatu);
  277.  
  278.             var tahunDua = document.createElement("option");
  279.             tahunDua.value = data.data.tahunDua;
  280.             tahunDua.text = data.data.tahunDua;
  281.             selectTahun.appendChild(tahunDua);
  282.  
  283.             var tahunTiga = document.createElement("option");
  284.             tahunTiga.value = data.data.tahunTiga;
  285.             tahunTiga.text = data.data.tahunTiga;
  286.             selectTahun.appendChild(tahunTiga);
  287.  
  288.             var tahunEmpat = document.createElement("option");
  289.             tahunEmpat.value = data.data.tahunEmpat;
  290.             tahunEmpat.text = data.data.tahunEmpat;
  291.             selectTahun.appendChild(tahunEmpat);
  292.  
  293.             var tahunLima = document.createElement("option");
  294.             tahunLima.value = data.data.tahunLima;
  295.             tahunLima.text = data.data.tahunLima;
  296.             selectTahun.appendChild(tahunLima);
  297.  
  298.             var tahunEnam = document.createElement("option");
  299.             tahunEnam.value = data.data.tahunLima + 1;
  300.             tahunEnam.text = data.data.tahunLima + 1;
  301.             selectTahun.appendChild(tahunEnam);
  302.         })
  303.         .catch(error => console.error('Error fetching data:', error));
  304. }
  305.  
  306.  
  307. $(document).ready(function () {
  308.     $("#submit-add").click(function () {
  309.         spiner(this.id, 'Menyimpan')
  310.         // Membuat struktur array opd
  311.         var opd = [];
  312.         var selectOpd = document.getElementById("opd");
  313.         var opdId = [];
  314.  
  315.         for (var i = 0; i < selectOpd.options.length; i++) {
  316.             var option = selectOpd.options[i];
  317.  
  318.             if (option.selected) {
  319.                 opdId.push({ "opdId": option.value });
  320.             }
  321.         }
  322.         opd = opdId
  323.  
  324.         $('#tahun, #nama, #mulai, #akhir').each(function () {
  325.             var value = $(this).val().trim();
  326.             $(this).addClass(value === '' ? 'is-invalid' : 'is-valid');
  327.         });
  328.  
  329.         // Melakukan request untuk submit
  330.         $.ajax({
  331.             url: `${base_url}admin_periode/create`,
  332.             type: 'POST',
  333.             data: {
  334.                 tahun: $("#tahun").val(),
  335.                 nama: $("#nama").val(),
  336.                 mulai: $("#mulai").val(),
  337.                 akhir: $("#akhir").val(),
  338.                 opd: opd
  339.             }
  340.         }).done(function (response) {
  341.             console.log(response);
  342.             var data = JSON.parse(response);
  343.             if (data.success == 1) {
  344.                 periodeList();
  345.                 // Form validation
  346.  
  347.                 $('#addModal').modal('hide');
  348.                 // Reset Form
  349.                 $('.form-control').removeClass('is-invalid is-valid');
  350.                 document.getElementById("form-add").reset();
  351.                 for (var i = 0; i < selectOpd.options.length; i++) {
  352.                     selectOpd.options[i].selected = false;
  353.                 }
  354.                 toastr.success(data.message, "Berhasil");
  355.             } else {
  356.                 toastr.error("Periksa kembali form anda", "Gagal menambahkan");
  357.             }
  358.         })
  359.         afterSpiner(this.id, 'Simpan', 'send');
  360.     })
  361. })
  362.  
  363. async function editData(id) {
  364.     $('#form-edit')[0].reset();
  365.     $('#edit-opd').val(null).trigger('change');
  366.  
  367.     Promise.all([
  368.         await createSelect('edit-tahun', 'edit-opd')
  369.     ]);
  370.  
  371.     $.ajax({
  372.         url: `${base_url}admin_periode/list/edit/${id}`,
  373.         type: "GET"
  374.     }).done(function (response) {
  375.         var parse = JSON.parse(response);
  376.         var data = parse.data[0];
  377.  
  378.         document.getElementById('edit-id').value = data.idPeriode;
  379.         document.getElementById('edit-tahun').value = data.tahunPeriode;
  380.         document.getElementById('edit-nama').value = data.namaPeriode;
  381.         document.getElementById('edit-mulai').value = data.waktuMulai;
  382.         document.getElementById('edit-akhir').value = data.waktuAkhir;
  383.  
  384.         var listOpd = data.opdList;
  385.         // opdEditSelect2(listOpd, '#edit-opd');
  386.         opdSelect(listOpd, '#edit-opd', '#editModal', 'semua');
  387.         var selectStatus = document.getElementById('edit-status');
  388.         var status = selectStatus.querySelector('option[value="' + data.status + '"]');
  389.  
  390.         if (status) {
  391.             status.selected = true;
  392.         }
  393.  
  394.         $('#editModal').modal('show');
  395.         afterSpiner(`btn-edit-${id}`, '', 'edit fs-5');
  396.     })
  397. }
  398.  
  399. $(document).ready(function () {
  400.     $("#submit-edit").click(function () {
  401.         spiner(this.id, 'Menyimpan');
  402.         Promise.all([
  403.             $('.form-control').removeClass('is-invalid is-valid'),
  404.  
  405.             $('#edit-tahun, #edit-nama, #edit-mulai, #edit-akhir').each(function () {
  406.                 var value = $(this).val().trim();
  407.                 $(this).addClass(value === '' ? 'is-invalid' : 'is-valid');
  408.                 if (value === '') {
  409.                     submit.classList.toggle('d-none');
  410.                     load.classList.toggle('d-none');
  411.                     process.exit();
  412.                 }
  413.             })
  414.         ])
  415.             .then(() => {
  416.                 var opd = [];
  417.                 var selectOpd = document.getElementById("edit-opd");
  418.                 var opdId = [];
  419.  
  420.                 for (var i = 0; i < selectOpd.options.length; i++) {
  421.                     var option = selectOpd.options[i];
  422.  
  423.                     if (option.selected) {
  424.                         opdId.push({ "opdId": option.value });
  425.                     }
  426.                 }
  427.                 opd = opdId
  428.  
  429.                 $.ajax({
  430.                     url: `${base_url}admin_periode/update`,
  431.                     type: 'POST',
  432.                     data: {
  433.                         id: $("#edit-id").val(),
  434.                         tahun: $("#edit-tahun").val(),
  435.                         nama: $("#edit-nama").val(),
  436.                         mulai: $("#edit-mulai").val(),
  437.                         akhir: $("#edit-akhir").val(),
  438.                         status: $("#edit-status").val(),
  439.                         opd: opd
  440.                     }
  441.                 }).done(function (response) {
  442.                     var data = JSON.parse(response);
  443.                     if (data.success == 1) {
  444.                         periodeList();
  445.                         afterSpiner('submit-edit', 'Simpan', 'send');
  446.                         $('#edit-tahun, #edit-nama, #edit-mulai, #edit-akhir').each(function () {
  447.                             $(this).removeClass('is-invalid');
  448.                             $(this).removeClass('is-valid');
  449.                         })
  450.                         $('#editModal').modal('hide');
  451.                         toastr.success(data.message);
  452.                     } else {
  453.                         afterSpiner('submit-edit', 'Simpan', 'send');
  454.                         toastr.error(data.message);
  455.                     }
  456.                 })
  457.             })
  458.             .then(() => {
  459.                 afterSpiner('submit-edit', 'Simpan', 'send');
  460.             })
  461.     })
  462. })
  463.  
  464.  
  465. function deleteData(id, nama, tahun) {
  466.     document.getElementById('namaDelete').innerHTML = nama;
  467.     document.getElementById('tahunDelete').innerHTML = tahun;
  468.     document.getElementById('idDelete').value = id;
  469. }
  470.  
  471. $(document).ready(function () {
  472.     $('#buttonDelete').click(function () {
  473.         spiner('buttonDelete', 'Menghapus');
  474.         var id = document.getElementById('idDelete').value;
  475.         $.ajax({
  476.             url: `${base_url}admin_periode/delete/${id}`,
  477.             type: "GET"
  478.         }).done(function (response) {
  479.             var data = JSON.parse(response);
  480.             if (data.success == 1) {
  481.                 periodeList();
  482.                 $('#deleteModal').modal('hide');
  483.                 toastr.success(data.message);
  484.                 afterSpiner('buttonDelete', 'Hapus', 'trash');
  485.             } else {
  486.                 periodeList();
  487.                 $('#deleteModal').modal('hide');
  488.                 toastr.error(data.message);
  489.                 afterSpiner('buttonDelete', 'Hapus', 'trash');
  490.             }
  491.         });
  492.     });
  493. })
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!