Jefry
/
Saturday_Sharing_Front
1
0
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
9 コミット
1 ブランチ
7.6 MiB
 
 
 
ツリー: b492fb2d12
ブランチ タグ
${ item.name }
ブランチ ${ searchTerm } を作成
'b492fb2d12' から
${ noResults }
Saturday_Sharing_Front/public/js/page/dashboard.js

945 行
36 KiB
Raw Blame 履歴 

  1. /* eslint-disable no-undef */

  2. 

  3. let list;

  4. let attachment;

  5. let removeMedia = [];

  6. 

  7. if($('#modal-form .modalCompanySelect').length>0){

  8.   var selectCompanyList = new drop({

  9.     selector:  '#modal-form .modalCompanySelect'

  10.   });

  11. }

  12. 

  13. 

  14. var defaultSelectDivisi = $('#modal-form .modalDivisionSelect').clone();

  15. if($('#modal-form .modalDivisionSelect').length>0){

  16.   var selectDivisiList = new drop({

  17.     selector:  '#modal-form .modalDivisionSelect'

  18.   });

  19. }

  20. 

  21. 

  22. 

  23. 

  24. var rowPage = 9;

  25. 

  26. async function paginationSummary(pageSize,page,id,token){

  27.   var res = await fetch(`/api/materials?filters[pintar_summary][id][$eq]=${id}&pagination[page]=${page}&pagination[pageSize]=${pageSize}&populate=*`,{

  28.       headers: {

  29.           'Authorization': `Bearer ${token}`

  30.       },

  31.   });

  32.   if(res.ok){

  33.       var obj = await res.json();

  34.       $("#summaryTable tbody").empty();

  35.       $("#summaryPagination").empty();

  36.       $("#summaryPagination").append(`

  37.           <li class="page-item ${obj.meta.pagination.page==1?'disabled':''}">

  38.               <a value="${obj.meta.pagination.page-1}" class="page-link" href="#" tabindex="-1">

  39.               <i class="fas fa-angle-left"></i>

  40.               <span class="sr-only">Previous</span>

  41.               </a>

  42.           </li>

  43.       `);

  44.       for(var i =1; i <= obj.meta.pagination.pageCount;i++){

  45.           $("#summaryPagination").append(`

  46.               <li class="page-item ${obj.meta.pagination.page==i?"active":''}"><a value="${i}" class="page-link" href="#">${i}</a></li>

  47.           `);

  48.       }

  49.       $("#summaryPagination").append(`

  50.           <li class="page-item ${obj.meta.pagination.page==obj.meta.pagination.pageCount?'disabled':''}">

  51.               <a value="${obj.meta.pagination.page+1}" class="page-link" href="#">

  52.               <i class="fas fa-angle-right"></i>

  53.               <span class="sr-only">Next</span>

  54.               </a>

  55.           </li>

  56.       `);

  57.       obj.data.forEach((i,indx)=>{

  58.         var imgs = '-';

  59.         if(i.attributes.Images.data){

  60.           imgs = '';

  61.           i.attributes.Images.data.forEach(img=>imgs+=`<img style="padding:5px;width:100px;" src="${img.attributes.url}"/><br/>`);

  62.         }

  63.           $("#summaryTable tbody").append(`

  64.           <tr>

  65.           <th scope="row">${((obj.meta.pagination.page-1)*pageSize)+indx+1}</th>

  66.           <td>${i.attributes.company.data.attributes.Name}</td>

  67.           <td>${i.attributes.division.data.attributes.Name}</td>

  68.           <td>${i.attributes.Presented?moment(i.attributes.Presented,'MM/DD/YYYY').format('DD-MMM-YYYY'):'-'}</td>

  69.           <td>${imgs}</td>

  70.           <td>${(i.attributes.Video.data)?"<a href='"+i.attributes.Video.data.attributes.url+"' target='_blank'>video</a>":'-'}</td>

  71.           <td>${i.attributes.Name??'-'}</td>

  72.           <td>${(i.attributes.participants.data)?i.attributes.participants.data.length:''}</td>

  73.           </tr>

  74.           `);

  75.       });

  76. 

  77.       //set callback pagination

  78.       $('#summaryPagination .page-link').off('click');

  79.       $("#summaryPagination .page-link").click(async(e)=>{

  80.           e.preventDefault();

  81.           paginationSummary(pageSize,$(e.target.closest('a')).attr('value'),id,token);

  82.       });

  83.   }

  84.   else{

  85.       showAlert('error','Gagal menarik data. Harap login ulang!');

  86.   }

  87. }

  88. 

  89. $('#modal-summary').on('shown.bs.modal', async function(event) {

  90.   $("#summaryMaterial").text($(event.relatedTarget).attr('material'));

  91.   var id = $(event.relatedTarget).attr('summary');

  92.   if(id){

  93.       var getToken = await fetch(`/session/key?s=jwt`);

  94.       if(getToken.ok){

  95.         paginationSummary(rowPage,1,id,await getToken.text());

  96.       }

  97.       else{

  98.           showAlert('error','Gagal menarik data divisi. Harap login ulang!');

  99.       }

  100.   }

  101.   else{

  102.       showAlert("error","Terjadi kesalahan saat menarik data!");

  103.   }

  104. })

  105. 

  106. $('#companySelect').change(async e => {

  107.   if (e.target.value && e.target.value != '') {

  108.     $('#divisionSelect').removeAttr('disabled');

  109.     const getToken = await fetch(`/session/key?s=jwt`);

  110.     if (getToken.ok) {

  111.       const token = await getToken.text();

  112.       const res = await fetch(`/api/divisions${(e.target.value=='All')?'':"?filters[companies][id][$in]="+e.target.value}`, {

  113.         headers: {

  114.           Authorization: `Bearer ${token}`,

  115.         },

  116.       });

  117.       if (res.ok) {

  118.         const obj = await res.json();

  119.         $('#divisionSelect').empty();

  120.         $('#divisionSelect').append('<option  value="All">Semua</option>');

  121.         obj.data.forEach(i => {

  122.           $('#divisionSelect').append(`<option  value="${i.id}">${i.attributes.Name}</option>`);

  123.         });

  124.       }

  125.     } else {

  126.       showAlert('error', 'Gagal menarik data divisi. Harap login ulang!');

  127.     }

  128.   } else {

  129.     $('#divisionSelect').attr('disabled', 'disabled');

  130.   }

  131. });

  132. 

  133. $('.editMaterial').click(async e => {

  134.   e.preventDefault();

  135.   const getRole = await fetch(`/session/key?s=role`);

  136.     if (getRole.ok) {

  137.       var role = JSON.parse(await getRole.text());

  138.       // if(role.name == 'Editor'||role.name == 'Admin'){

  139.         const id = $(e.target.closest('a')).attr('value');

  140.         $("input.categoryField").val($(e.target.closest('a')).attr('category'));

  141.         $('#selMaterial').val(id);

  142.         $('#modal-form').attr('operation', 'edit');

  143.         $('#modal-form').modal('show');

  144.         showForm('Sharing');

  145.       // }

  146.       // else{

  147.       //   showAlert('error', "Tidak diperbolehkan untuk mengubah data. Minta ijin dari admin terlebih dahulu");

  148.       // }

  149.     }

  150.     else{

  151.       window.location = '/logout'

  152.     }

  153. });

  154. 

  155. $('.completeMaterial').click(async e => {

  156.   e.preventDefault();

  157.   const id = $(e.target.closest('a')).attr('value');

  158.   $("input.categoryField").val($(e.target.closest('a')).attr('category'));

  159.   $('#selMaterial').val(id);

  160.   $('#modal-form').attr('operation', 'complete');

  161.   $('#modal-form').modal('show');

  162.   showForm('Sharing');

  163. });

  164. 

  165. $('.resetMaterial').click(async e => {

  166.   e.preventDefault();

  167.   const id = $(e.target.closest('a')).attr('value');

  168.   loading(70, true);

  169.     const getToken = await fetch(`/session/key?s=jwt`);

  170.     if (getToken.ok) {

  171.       const token = await getToken.text();

  172.       const res = await fetch(`/api/resetMaterial/${id}`, {

  173.         method: 'PUT',

  174.         headers: {

  175.           Authorization: `Bearer ${token}`,

  176.         },

  177.       });

  178.       if (res.ok) {

  179.         location.reload();

  180.       } else {

  181.         loading(0, false);

  182.         try {

  183.           const obj = await res.json();

  184.           if(obj.error.message.includes('Forbidden')){

  185.             showAlert('error', "Tidak diperbolehkan untuk mengubah data. Minta ijin dari admin terlebih dahulu");

  186.           }

  187.           else showAlert('error', obj.error.message);

  188.         } catch (e) {

  189.           showAlert('error', 'Tidak dapat mereset materi. Terjadi kesalahan!');

  190.         }

  191.       }

  192.     } else {

  193.       loading(0, false);

  194.       showAlert('error', 'Gagal menarik data divisi. Harap login ulang!');

  195.     }

  196. });

  197. 

  198. 

  199. 

  200. $('.removeMaterial').click(async e => {

  201.   e.preventDefault();

  202.   const id = $(e.target.closest('a')).attr('value');

  203.   if (confirm('delete this material?')) {

  204.     loading(70, true);

  205.     const getToken = await fetch(`/session/key?s=jwt`);

  206.     if (getToken.ok) {

  207.       const token = await getToken.text();

  208.       const res = await fetch(`/api/materials/${id}`, {

  209.         method: 'DELETE',

  210.         headers: {

  211.           Authorization: `Bearer ${token}`,

  212.         },

  213.       });

  214.       if (res.ok) {

  215.         location.reload();

  216.       } else {

  217.         loading(0, false);

  218. 

  219.         try {

  220.           const obj = await res.json();

  221.           if(obj.error.message.includes('Forbidden')){

  222.             showAlert('error', "Tidak diperbolehkan untuk mengubah data. Minta ijin dari admin terlebih dahulu");

  223.           }

  224.           else showAlert('error', obj.error.message);

  225.         } catch (e) {

  226.           showAlert('error', 'Tidak dapat menghapus materi. Terjadi kesalahan!');

  227.         }

  228.       }

  229.     } else {

  230.       loading(0, false);

  231.       showAlert('error', 'Gagal menarik data divisi. Harap login ulang!');

  232.     }

  233.   }

  234. });

  235. 

  236. function showForm(dialog) {

  237.   $("#pickForm input[name='Category']").val(dialog);

  238.   $("#pickForm span.categoryTitle").text(dialog);

  239.   $('#pickForm').removeClass('hide');

  240.   $('#pickCategory').addClass('hide');

  241. }

  242. 

  243. function hideform() {

  244.   $("#pickForm input[name='Category']").val('');

  245.   $("#pickForm span.categoryTitle").text('');

  246.   $('#pickForm').addClass('hide');

  247.   $('#pickCategory').removeClass('hide');

  248. }

  249. 

  250. $('input[type=file]').change(function(e) {

  251.   var files = e.target.files;

  252.   if (files && [...files].filter(i=>i.size>104857600).length >0) {

  253.     showAlert(

  254.       'error',

  255.       'File yang dipilih terlalu besar Max(100 MB)! Compress atau potong file yang ingin di upload!'

  256.     );

  257.     e.target.value = '';

  258.   }

  259. });

  260. 

  261. function removeUpload(e, listFile) {

  262.   let li = $(e.target).parent();

  263.   

  264.   while  (li[0].localName != 'li') {

  265.     li = $(li).parent();

  266.   }

  267.   if (li.attr('status') == 'uploaded') removeMedia.push(li.val());

  268.   else {

  269.     for (let i = 0; i < listFile.items.length; i++) {

  270.       if (listFile.files[i].name.replace(/["']/g, '') == li.attr('name')) {

  271.         listFile.items.remove(i);

  272.       }

  273.     }

  274.   }

  275.   li.remove();

  276. }

  277. 

  278. $('#modal-form').on('hide.bs.modal', function(e) {

  279.   if($(e.target).hasClass('modal')){

  280.     hideform();

  281.     $('#modal-form').attr('operation', '');

  282.     $('#uploadedAttachment').empty();

  283.     $('#uploadedFile').empty();

  284.     $('#modal-form input[name=Title]').removeAttr('disabled');

  285.     $(`#modal-form input[name=Start_Date]`).removeAttr('disabled');

  286.     $(`#modal-form input[name=End_Date]`).removeAttr('disabled');

  287.     $('#modal-form textarea[name=Description]').removeAttr('disabled');

  288.     $('#modal-form input#formAttachment').closest('.form-group').show();

  289.     $(`#modal-form input#thumbnail`).closest('.form-group').show();

  290.     $('#modal-form select[name=company]').closest('.form-group').show();

  291.     $('#modal-form select[name=division]').closest('.form-group').show();

  292.     $('#modal-form select[name=division]').empty();

  293.     $("#thumbnailSelected").remove();

  294.     $("#videoSelected").remove();

  295.     $(`#modal-form .completeData`).addClass('hide');

  296.     

  297.     selectCompanyList.preselected = [];

  298.     selectCompanyList.preselect();

  299.     selectCompanyList.render();

  300.     selectCompanyList.load();

  301.     selectCompanyList.renderOptions();

  302. 

  303.     selectDivisiList.preselected = [];

  304.     selectDivisiList.preselect();

  305.     selectDivisiList.render();

  306.     selectDivisiList.load();

  307.     selectDivisiList.renderOptions();

  308.   }

  309. });

  310. 

  311. $('#modal-form').on('shown.bs.modal', async function() {

  312.   removeMedia = [];

  313.   let materialData;

  314.   $("#modal-form input[type!='hidden']").val('');

  315.   $('#modal-form select').val('');

  316.   $('#modal-form select[name=division]').attr('disabled','disabled');

  317.   $('#modal-form input.modalDivisiAll').attr('disabled','disabled');

  318.   $('#modal-form input[type=checkbox]').prop('checked',false);

  319.   $("#modal-form .modalCompanySelect").parent('.drop').show();

  320.   $("#modal-form .modalDivisionSelect").parent('.drop').show();

  321.   $('#modal-form textarea').html('');

  322.   $('#modal-form textarea').val('');

  323.   const container = document.getElementById('participantCounter');

  324.   if(container)container.innerHTML = '';

  325.   $("#modal-form input[name='ParticipantList']").val('');

  326.   list = new DataTransfer();

  327.   attachment = new DataTransfer();

  328.   if ($('#modal-form').attr('operation') == 'edit' || $('#modal-form').attr('operation') == 'complete') {

  329.     loading(0, true);

  330.     const getToken = await fetch(`/session/key?s=jwt`);

  331.     if (getToken.ok) {

  332.       const token = await getToken.text();

  333.       const res = await fetch(`/api/materials/${$('#selMaterial').val()}?populate=*`, {

  334.         method: 'GET',

  335.         headers: {

  336.           Authorization: `Bearer ${token}`,

  337.         },

  338.       });

  339.       loading(100, true);

  340.       if (res.ok) {

  341.         loading(0, false);

  342.         try {

  343.           let obj = await res.json();

  344.           obj = obj.data.attributes;

  345.           if(obj.Presented) obj.Presented = moment(obj.Presented,'DD MMM YYYY').format('YYYY-MM-DD');

  346.           materialData = obj;

  347.           var form = $("#formCreateAdmin").length>0?'formCreateAdmin':'formCreate';

  348.           $(`#${form} select[name=company]`).closest('.form-group').hide();

  349.           $(`#${form} select[name=division]`).closest('.form-group').hide();

  350.           if(obj.Presented || $('#modal-form').attr('operation') == 'complete')$(`#${form} .completeData`).removeClass('hide');

  351.           if($('#modal-form').attr('operation') =='complete'){

  352.             $(`#${form} input[name=Title]`).attr('disabled','');

  353.             $(`#${form} input[name=Start_Date]`).attr('disabled','');

  354.             $(`#${form} input[name=End_Date]`).attr('disabled','');

  355.             $(`#${form} textarea[name=Description]`).attr('disabled','');

  356.             $(`#${form} input#formAttachment`).closest('.form-group').hide();

  357.             $(`#${form} input#thumbnail`).closest('.form-group').hide();

  358.           }

  359.           $(`#${form} input[name="Category"]`).val(obj.Category);

  360.           Object.keys(obj).forEach(async i => {

  361.             if(obj[i]&&obj[i].data){

  362.                 if (typeof obj[i] === 'object' && !(obj[i].data instanceof Array)) {

  363.                 if (!obj[i].data.attributes.mime) {

  364.                   $(`#${form} [name='${i}']`).val(obj[i].data.id);

  365.                   if (i == 'company') {

  366.                     const res = await fetch(

  367.                       `/api/divisions?filters[companies][id][$in]=${obj[i].data.id}`,

  368.                       {

  369.                         headers: {

  370.                           Authorization: `Bearer ${token}`,

  371.                         },

  372.                       }

  373.                     );

  374.                     if (res.ok) {

  375.                       const resp = await res.json();

  376.                       $(`#${form} .modalDivisionSelect`).empty();

  377.                       $(`#${form} .modalDivisionSelect`).append(

  378.                         $(`#${form} .categoryField`).val()=='Pintar'

  379.                         ?'<option value="All">Semua</option>'

  380.                         :'<option value="">Pilih divisi dari list</option>'

  381.                       );

  382.                       resp.data.forEach(item => {

  383.                         $(`#${form} .modalDivisionSelect`).append(

  384.                           `<option ${item.id == (obj.division.data?obj.division.data.id:'') ? 'selected' : ''} value="${

  385.                             item.id

  386.                           }">${item.attributes.Name}</option>`

  387.                         );

  388.                       });

  389.                       $(`#${form} .modalDivisionSelect`).removeAttr('disabled');

  390.                     }

  391.                   }

  392.                 } else {

  393.                   if(i == 'Video'){

  394.                     $(`#${form} input#videoFile`).after(

  395.                       `<small id="videoSelected" style="line-height: 4em;">current video : ${obj[i].data.attributes.name}</small>`

  396.                     );

  397.                   }

  398.                   else if(i == 'Thumbnail'){

  399.                     $(`#${form} input#thumbnail`).after(

  400.                       `<small id="thumbnailSelected" style="line-height: 4em;">current Thumbnail : ${obj[i].data.attributes.name}</small>`

  401.                     );

  402.                   }

  403.                 }

  404.                 } else if (obj[i].data instanceof Array) {

  405.                   if (i == 'participants') {

  406.                     const aoa = obj[i].data.map(o => o.attributes);

  407.                     const container = document.getElementById('participantCounter');

  408.                     if(container)container.innerHTML = `${aoa.length} Participant(s)`;

  409.                     $(`#${form} input[name='ParticipantList']`).val(JSON.stringify(aoa));

  410.                   } else if (i == 'Images') {

  411.                     obj[i].data.forEach(async thumbnails => {

  412.                       $(`#${form} #uploadedFile`).append(

  413.                         `<li status='uploaded' value='${

  414.                           thumbnails.id

  415.                         }' name='${thumbnails.attributes.name.replace(/["']/g, '')}'>${

  416.                           thumbnails.attributes.name

  417.                         }

  418.                                                     <button type="button" class="btn-close btn-icon removeUpload" onclick="removeUpload(event,list)" aria-label="Close">

  419.                                                       <span class="btn-inner--icon"><i class="ni ni-fat-remove"></i></span>

  420.                                                     </button>

  421.                                                 </li>`

  422.                       );

  423.                     });

  424.                   } else if (i == 'Attachments') {

  425.                     obj[i].data.forEach(async attachments => {

  426.                       $(`#${form} #uploadedAttachment`).append(

  427.                         `<li status='uploaded' value='${

  428.                           attachments.id

  429.                         }' name="${attachments.attributes.name.replace(/["']/g, '')}">${

  430.                           attachments.attributes.name

  431.                         }

  432.                                                     <button type="button" class="btn-close btn-icon removeUpload" onclick="removeUpload(event,attachment)" aria-label="Close">

  433.                                                       <span class="btn-inner--icon"><i class="ni ni-fat-remove"></i></span>

  434.                                                     </button>

  435.                                                 </li>`

  436.                       );

  437.                     });

  438.                   }

  439.                 } 

  440.             }

  441.             else {

  442.               if($(`#${form} [name='${i}']`).length>0)$(`#modal-form [name='${i}']`).val(obj[i]);

  443.             }

  444.             

  445.           });

  446.         } catch (e) {

  447.           $('#loading').hide();

  448.           console.log(e);

  449.         }

  450.       } else {

  451.         loading(0, false);

  452.         showAlert('error', 'Tidak dapat mencari data materi. Terjadi kesalahan!');

  453.       }

  454.     } else {

  455.       loading(0, false);

  456.       showAlert('error', 'Terjadi kesalahan! Harap coba login kembail atau hubungi admin!');

  457.     }

  458.   }

  459.   $('#formCreate').off('submit');

  460.   $('#formCreateAdmin').off('submit');

  461. 

  462.   $('#formCreate').submit(async event => {

  463.     event.preventDefault();

  464.     clearAlert();

  465.     var el = this;

  466.     $(el).find(':input[type=submit]').prop('disabled', true);

  467.     if ($('#modal-form').attr('operation') == 'edit'|| $('#modal-form').attr('operation') == 'complete') {

  468.       if (

  469.         (materialData.Presented || $('#modal-form').attr('operation') == 'complete')

  470.         ?($(event.target)

  471.           .serializeArray()

  472.           .filter(item => item.value == '').length > 0)

  473.         :($(event.target)

  474.         .serializeArray()

  475.         .filter(item => item.value == '' && !($("#modal-form .completeData input").map((idx,i)=>$(i).attr("name")).toArray().includes(item.name))).length > 0)

  476.       ) {

  477.         showAlert('error', 'Cek kembali data yang belum diisi!');

  478.       }

  479.       else if ($('ul#uploadedFile li').length < 3 || $('ul#uploadedAttachment li').length <= 0) {

  480.         showAlert('error', 'File yang dibutuhkan tidak lengkap!');

  481.       } else {

  482.         loading(10, true);

  483.         var getToken = await fetch(`/session/key?s=jwt`);

  484.         if (getToken.ok) {

  485.           const formData = new FormData();

  486.           var obj = {};

  487.           $(event.target)

  488.             .serializeArray()

  489.             .forEach(element => {

  490.               try {

  491.                 obj[element.name] = JSON.parse(element.value);

  492.               } catch (e) {

  493.                 obj[element.name] = element.value;

  494.               }

  495.             });

  496.           if(materialData && materialData.Images.data){

  497.             const Images = materialData.Images.data.map(item => item.id);

  498.             if(removeMedia && removeMedia.length>0 && removeMedia.some(r=> Images.includes(r))){

  499.               obj.Images = Images.filter(item => !removeMedia.includes(item));

  500.             }

  501.           }

  502. 

  503.           for (let i = 0; i < list.files.length; i++) {

  504.             const file = list.files[i];

  505.             formData.append(`files.Images`, file, file.name);

  506.           }

  507. 

  508.           if(materialData && materialData.Attachments){

  509.             const Attachments = materialData.Attachments.data.map(item => item.id);

  510.             if(removeMedia && removeMedia.length>0 && removeMedia.some(r=> Attachments.includes(r))){

  511.               obj.Attachments = Attachments.filter(item => !removeMedia.includes(item));

  512.             }

  513.           }

  514. 

  515.           for (let i = 0; i < attachment.files.length; i++) {

  516.             const file = attachment.files[i];

  517.             formData.append(`files.Attachments`, file, file.name);

  518.           }

  519. 

  520.           if ($('#videoFile').prop('files').length > 0) {

  521.             obj.Video = [];

  522.             formData.append(

  523.               `files.Video`,

  524.               $('#videoFile').prop('files')[0],

  525.               $('#videoFile').prop('files')[0].name

  526.             );

  527.           }

  528. 

  529.           if($('#thumbnail').prop('files').length>0){

  530.             obj.Thumbnail = [];

  531.             formData.append(

  532.               `files.Thumbnail`,

  533.               $('#thumbnail').prop('files')[0],

  534.               $('#thumbnail').prop('files')[0].name

  535.             );

  536.           }

  537. 

  538.           const request = new XMLHttpRequest();

  539.           request.upload.onprogress = function(evt) {

  540.             if (evt.lengthComputable) {

  541.               const percentComplete = parseInt((evt.loaded / evt.total) * 100);

  542.               loading(percentComplete, true);

  543.             }

  544.           };

  545.           request.onreadystatechange = function() {

  546.             if (request.readyState == 4) {

  547.               loading(0, false);

  548.               if (request.status == 200) {

  549.                 location.reload();

  550.               } else {

  551.                 showAlert('error', 'Terjadi kesalahan! Harap coba login kembali / hubungi admin!');

  552.               }

  553.             }

  554.           };

  555. 

  556.           formData.append('data', JSON.stringify(obj));

  557.           if($('#modal-form').attr('operation')=='edit') request.open('PUT', `/api/materials/${$('#selMaterial').val()}`);

  558.           else request.open('PUT', `/api/saveMaterial/${$('#selMaterial').val()}`);

  559.           request.setRequestHeader('Authorization', `Bearer ${await getToken.text()}`);

  560.           request.send(formData);

  561.         } else {

  562.           loading(0, false);

  563.           showAlert('error', 'Terjadi kesalahan. Harap login kembali!');

  564.         }

  565.       }

  566.     } else{

  567.       if (

  568.         $(event.target)

  569.           .serializeArray()

  570.           .filter(item => item.value == '').length > 0

  571.     ) {

  572.       showAlert('error', `Cek kembali data (${$(event.target)

  573.         .serializeArray()

  574.         .filter(item => item.value == '').map(i=>i.name).join(',')})  yang belum diisi!`);

  575.     } else if (

  576.       $('input#videoFile').prop('files').length <= 0 ||

  577.       $('input#thumbnail').prop('files').length <= 0||

  578.       list.files.length <= 0 ||

  579.       attachment.files.length <= 0

  580.     ) {

  581.       showAlert('error', 'File yang dibutuhkan tidak lengkap!');

  582.     } else {

  583.       loading(0, true);

  584.       var getToken = await fetch(`/session/key?s=jwt`);

  585.       if (getToken.ok) {

  586.         var obj = {};

  587.         $(event.target)

  588.           .serializeArray()

  589.           .forEach(element => {

  590.             try {

  591.               obj[element.name] = JSON.parse(element.value);

  592.             } catch (e) {

  593.               obj[element.name] = element.value;

  594.             }

  595.           });

  596.         const formData = new FormData();

  597.         formData.append('data', JSON.stringify(obj));

  598.         for (let i = 0; i < list.files.length; i++) {

  599.           const file = list.files[i];

  600.           formData.append(`files.Images`, file, file.name);

  601.         }

  602.         for (let i = 0; i < attachment.files.length; i++) {

  603.           const file = attachment.files[i];

  604.           formData.append(`files.Attachments`, file, file.name);

  605.         }

  606.         formData.append(

  607.           `files.Video`,

  608.           $('#videoFile').prop('files')[0],

  609.           $('#videoFile').prop('files')[0].name

  610.         );

  611. 

  612.         formData.append(

  613.           `files.Thumbnail`,

  614.           $('#thumbnail').prop('files')[0],

  615.           $('#thumbnail').prop('files')[0].name

  616.         );

  617.         

  618. 

  619.         const request = new XMLHttpRequest();

  620.         request.upload.onprogress = function(evt) {

  621.           if (evt.lengthComputable) {

  622.             const percentComplete = parseInt((evt.loaded / evt.total) * 100);

  623.             loading(percentComplete, true);

  624.           }

  625.         };

  626.         request.onreadystatechange = function() {

  627.           if (request.readyState == 4) {

  628.             loading(0, false);

  629.             if (request.status == 200) {

  630.               location.reload();

  631.             } else {

  632.               showAlert('error', 'Terjadi kesalahan! Harap coba login kembali / hubungi admin!');

  633.             }

  634.           }

  635.         };

  636.         request.open('POST', '/api/materials');

  637.         request.setRequestHeader('Authorization', `Bearer ${await getToken.text()}`);

  638.         request.send(formData);

  639.       } else {

  640.         loading(0, false);

  641.         showAlert('error', 'Terjadi kesalahan. Harap login kembali!');

  642.       }

  643.     }

  644.     } 

  645.     setTimeout(function(){$(el).find(':input[type=submit]').prop('disabled', false);},3000);

  646.   });

  647. 

  648.   $('#formCreateAdmin').submit(async event => {

  649.     event.preventDefault();

  650.     clearAlert();

  651.     var el = this;

  652.     $(el).find(':input[type=submit]').prop('disabled', true);

  653.     setTimeout(function(){$(el).find(':input[type=submit]').prop('disabled', false);},3000);

  654.     if ($('#modal-form').attr('operation') == 'edit'|| $('#modal-form').attr('operation') == 'complete') {

  655.       if (

  656.         (materialData.Presented || $('#modal-form').attr('operation') == 'complete')

  657.         ?($(event.target)

  658.           .serializeArray()

  659.           .filter(item => item.value == '').length > 0)

  660.         :($(event.target)

  661.         .serializeArray()

  662.         .filter(item => item.value == '' && !($("#modal-form .completeData input").map((idx,i)=>$(i).attr("name")).toArray().includes(item.name))).length > 0)

  663.       ) {

  664.         showAlert('error', 'Cek kembali data yang belum diisi!');

  665.       }

  666.       // else if ($('ul#uploadedFile li').length <= 0 || $('ul#uploadedAttachment li').length <= 0) {

  667.         else if(((materialData.Presented || $('#modal-form').attr('operation') == 'complete')?$("#modal-form input[type=file][multiple=multiple]"):$("#modal-form input[type=file][multiple=multiple]").not(".completeData input[type=file][multiple=multiple]")).filter((i,k)=> $(k).parent().next().children('li').length<=0).length>0) {

  668.           showAlert('error', 'File yang dibutuhkan tidak lengkap!');

  669.       } else {

  670.         loading(10, true);

  671.         var getToken = await fetch(`/session/key?s=jwt`);

  672.         if (getToken.ok) {

  673.           const formData = new FormData();

  674.           var obj = {};

  675.           $(event.target)

  676.             .serializeArray()

  677.             .forEach(element => {

  678.               try {

  679.                 if(element.value[0]=='{'){

  680.                   obj[element.name] = JSON.parse(element.value);

  681.                 }

  682.                 else if(element.value.includes('/')){

  683.                   obj[element.name] = moment(element.value,'MM/DD/YYYY').format('YYYY-MM-DD');

  684.                 }

  685.                 else{

  686.                   obj[element.name] = (obj[element.name]?obj[element.name]+',':'')+element.value;

  687.                 }

  688.               } catch (e) {

  689.                 obj[element.name] = (obj[element.name]?obj[element.name]+',':'')+`"${element.value}"`;

  690.               }

  691.             });

  692.           if(!$(`#modal-form .completeData`).hasClass('hide')){

  693.             if(materialData.Images.data){

  694.               const Images = materialData.Images.data.map(item => item.id);

  695.               if(removeMedia && removeMedia.length>0 && removeMedia.some(r=> Images.includes(r))){

  696.                 obj.Images = Images.filter(item => !removeMedia.includes(item));

  697.               }

  698.             }

  699.             for (let i = 0; i < list.files.length; i++) {

  700.               const file = list.files[i];

  701.               formData.append(`files.Images`, file, file.name);

  702.             }

  703. 

  704.             if($('#videoFile').prop('files').length>0){

  705.               obj.Video = [];

  706.               formData.append(

  707.                 `files.Video`,

  708.                 $('#videoFile').prop('files')[0],

  709.                 $('#videoFile').prop('files')[0].name

  710.               );

  711.             }

  712.           }

  713.           else{

  714.             delete obj['ParticipantList'];

  715.           }

  716.           const Attachments = materialData.Attachments.data.map(item => item.id);

  717.           if(removeMedia && removeMedia.length>0 && removeMedia.some(r=> Attachments.includes(r))){

  718.             obj.Attachments = Attachments.filter(item => !removeMedia.includes(item));

  719.           }

  720. 

  721.           for (let i = 0; i < attachment.files.length; i++) {

  722.             const file = attachment.files[i];

  723.             formData.append(`files.Attachments`, file, file.name);

  724.           }

  725.           

  726.           if($('#thumbnail').prop('files').length>0){

  727.             obj.Thumbnail = [];

  728.             formData.append(

  729.               `files.Thumbnail`,

  730.               $('#thumbnail').prop('files')[0],

  731.               $('#thumbnail').prop('files')[0].name

  732.             );

  733.           }

  734.           const request = new XMLHttpRequest();

  735.           request.upload.onprogress = function(evt) {

  736.             if (evt.lengthComputable) {

  737.               const percentComplete = parseInt((evt.loaded / evt.total) * 100);

  738.               loading(percentComplete, true);

  739.             }

  740.           };

  741.           request.onreadystatechange = function() {

  742.             // console.log(this.responseText,request.readyState,request.status);

  743.             if (request.readyState == 4) {

  744.               loading(0, false);

  745.               if (request.status == 200) {

  746.                 location.reload();

  747.               } else {

  748.                 console.log(this.responseURL,this.responseText);

  749.                 showAlert('error', 'Terjadi kesalahan! Harap coba login kembali / hubungi admin!');

  750.               }

  751.             }

  752.           };

  753.           formData.append('data', JSON.stringify(obj));

  754.           if($('#modal-form').attr('operation')=='edit') request.open('PUT', `/api/materials/${$('#selMaterial').val()}`);

  755.           else request.open('PUT', `/api/saveMaterial/${$('#selMaterial').val()}`);

  756.           request.setRequestHeader('Authorization', `Bearer ${await getToken.text()}`);

  757.           request.send(formData);

  758.         } else {

  759.           loading(0, false);

  760.           showAlert('error', 'Terjadi kesalahan. Harap login kembali!');

  761.         }

  762.       }

  763.     } else {

  764.       if (

  765.         $(event.target)

  766.           .serializeArray()

  767.           .filter(item => item.value == '' && !($("#modal-form .completeData input").map((idx,i)=>$(i).attr("name")).toArray().includes(item.name))).length > 0

  768.       ) {

  769.         showAlert('error', 'Cek kembali data yang belum diisi!');

  770.       } else {

  771.         loading(0, true);

  772.         var getToken = await fetch(`/session/key?s=jwt`);

  773.         if (getToken.ok) {

  774.           var obj = {};

  775.           $(event.target)

  776.             .serializeArray()

  777.             .forEach(element => {

  778.               try {

  779.                 

  780.                 if(element.value[0]=='{'){

  781.                   obj[element.name] = JSON.parse(element.value);

  782.                 }

  783.                 else{

  784.                   obj[element.name] = (obj[element.name]?obj[element.name]+',':'')+element.value;

  785.                 }

  786.               } catch (e) {

  787.                 obj[element.name] = (obj[element.name]?obj[element.name]+',':'')+element.value;

  788.               }

  789.             });

  790.           // console.log(JSON.stringify(obj));

  791.           const formData = new FormData();

  792.           formData.append('data', JSON.stringify(obj));

  793.           // for (let i = 0; i < list.files.length; i++) {

  794.           //   const file = list.files[i];

  795.           //   formData.append(`files.Images`, file, file.name);

  796.           // }

  797.           for (let i = 0; i < attachment.files.length; i++) {

  798.             const file = attachment.files[i];

  799.             formData.append(`files.Attachments`, file, file.name);

  800.           }

  801.           

  802.           formData.append(

  803.             `files.Thumbnail`,

  804.             $('#thumbnail').prop('files')[0],

  805.             $('#thumbnail').prop('files')[0].name

  806.           );

  807.         

  808.           const request = new XMLHttpRequest();

  809.           request.upload.onprogress = function(evt) {

  810.             if (evt.lengthComputable) {

  811.               const percentComplete = parseInt((evt.loaded / evt.total) * 100);

  812.               loading(percentComplete, true);

  813.             }

  814.           };

  815.           request.onreadystatechange = function() {

  816.             if (request.readyState == 4) {

  817.               loading(0, false);

  818.               if (request.status == 200) {

  819.                 location.reload();

  820.               } else {

  821.                 console.log(this.responseURL,this.responseText);

  822.                 showAlert('error', 'Terjadi kesalahan! Harap coba login kembali / hubungi admin!');

  823.               }

  824.             }

  825.           };

  826.           request.open('POST', '/api/materials');

  827.           request.setRequestHeader('Authorization', `Bearer ${await getToken.text()}`);

  828.           request.send(formData);

  829.         } else {

  830.           loading(0, false);

  831.           showAlert('error', 'Terjadi kesalahan. Harap login kembali!');

  832.         }

  833.       }

  834.     }

  835.   });

  836. 

  837.   $('#formFile').change(event => {

  838.     if (event.target.files.length > 0) {

  839.       for (let i = 0; i < event.target.files.length; i++) {

  840.         list.items.add(event.target.files[i]);

  841.         $('#uploadedFile').append(

  842.           `<li name='${event.target.files[i].name.replace(/["']/g, '')}'>${

  843.             event.target.files[i].name

  844.           }

  845.               <button type="button" class="btn btn-secondary btn-sm btn-close btn-icon removeUpload" onclick="removeUpload(event,list)" aria-label="Close"><i class="ni ni-fat-remove"></i></button>

  846.           </li>`

  847.         );

  848.       }

  849.       $(event.target).val('');

  850.     }

  851.   });

  852. 

  853.   $('#formAttachment').change(event => {

  854.     if (event.target.files.length > 0) {

  855.       for (let i = 0; i < event.target.files.length; i++) {

  856.         attachment.items.add(event.target.files[i]);

  857.         $('#uploadedAttachment').append(

  858.           `<li name='${event.target.files[i].name.replace(/["']/g, '')}'>${

  859.             event.target.files[i].name

  860.           }

  861.                         <button type="button" class="btn btn-secondary btn-sm btn-close removeUpload" onclick="removeUpload(event,attachment)" aria-label="Close"><i class="ni ni-fat-remove"></i></button>

  862.                     </li>`

  863.         );

  864.       }

  865.       $(event.target).val('');

  866.     }

  867.   });

  868. 

  869.   $('#formAttachmentPintar').change(event => {

  870.     if (event.target.files.length > 0) {

  871.       for (let i = 0; i < event.target.files.length; i++) {

  872.         attachment.items.add(event.target.files[i]);

  873.         $('#uploadedAttachmentPintar').append(

  874.           `<li name='${event.target.files[i].name.replace(/["']/g, '')}'>${

  875.             event.target.files[i].name

  876.           }

  877.                         <button type="button" class="btn btn-secondary btn-sm btn-close removeUpload" onclick="removeUpload(event,attachment)" aria-label="Close"><i class="ni ni-fat-remove"></i></button>

  878.                     </li>`

  879.         );

  880.       }

  881.       $(event.target).val('');

  882.     }

  883.   });

  884. 

  885.   $('#formFilePintar').change(event => {

  886.     if (event.target.files.length > 0) {

  887.       for (let i = 0; i < event.target.files.length; i++) {

  888.         list.items.add(event.target.files[i]);

  889.         $('#uploadedFilePintar').append(

  890.           `<li name='${event.target.files[i].name.replace(/["']/g, '')}'>${

  891.             event.target.files[i].name

  892.           }

  893.               <button type="button" class="btn btn-secondary btn-sm btn-close removeUpload" onclick="removeUpload(event,list)" aria-label="Close"><i class="ni ni-fat-remove"></i></button>

  894.           </li>`

  895.         );

  896.       }

  897.       $(event.target).val('');

  898.     }

  899.   });

  900. 

  901.   $('#join-form').change(async event => {

  902.     const file = event.target.files[0];

  903.     const data = await file.arrayBuffer();

  904.     const workbook = XLSX.read(data);

  905.     var aoa = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], { header: 0 });

  906.     aoa = aoa.filter((i)=>i["Status"]=='Hadir');

  907.     const container = document.getElementById('participantCounter');

  908.     container.innerHTML = `${aoa.length} Participant(s)`;

  909.     $("input[name='ParticipantList']").val(JSON.stringify(aoa));

  910.   });

  911. });

  912. 

  913. $('#btnDisabled').click(e => {

  914.   e.preventDefault();

  915.   showAlert('error',"Hanya Admin yang dapat membuat Materi Sabtu Pintar!");

  916. });

  917. 

  918. 

  919. $('#btnPintar').click(e => {

  920.   e.preventDefault();

  921.   showForm('Pintar');

  922. });

  923. 

  924. $('#btnSharing').click(e => {

  925.   e.preventDefault();

  926.   showForm('Sharing');

  927. });

  928. 

  929. $('.exportSummary').click(async e => {

  930.   e.preventDefault();

  931.   window.html2canvas = html2canvas;

  932.   var doc = new jspdf.jsPDF('p', 'pt');          

  933.   var source = window.document.getElementById("summaryTable");

  934.   await doc.html(

  935.       source,

  936.       {

  937.         callback:function(pdf){

  938.           pdf.save(`${$('#summaryMaterial').text()}.pdf`);

  939.         },

  940.         html2canvas: { scale: 0.75 },

  941.       }

  942.   );

  943. });