Jefry
/
Saturday_Sharing_Front
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
2 Révisions
1 Branche
7.6 MiB
 
 
 
Aborescence: 72b479bab5
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '72b479bab5'
${ noResults }
Saturday_Sharing_Front/public/js/page/dashboard.js

905 lignes
34 KiB
Brut Annotations Historique 

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

  2. let list;

  3. let attachment;

  4. let removeMedia = [];

  5. 

  6. var rowPage = 9;

  7. 

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

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

  10.       headers: {

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

  12.       },

  13.   });

  14.   if(res.ok){

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

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

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

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

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

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

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

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

  23.               </a>

  24.           </li>

  25.       `);

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

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

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

  29.           `);

  30.       }

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

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

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

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

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

  36.               </a>

  37.           </li>

  38.       `);

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

  40.         var imgs = '-';

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

  42.           imgs = '';

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

  44.         }

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

  46.           <tr>

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

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

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

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

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

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

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

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

  55.           </tr>

  56.           `);

  57.       });

  58. 

  59.       //set callback pagination

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

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

  62.           e.preventDefault();

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

  64.       });

  65.   }

  66.   else{

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

  68.   }

  69. }

  70. 

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

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

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

  74.   if(id){

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

  76.       if(getToken.ok){

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

  78.       }

  79.       else{

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

  81.       }

  82.   }

  83.   else{

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

  85.   }

  86. })

  87. 

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

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

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

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

  92.     if (getToken.ok) {

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

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

  95.         headers: {

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

  97.         },

  98.       });

  99.       if (res.ok) {

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

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

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

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

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

  105.         });

  106.       }

  107.     } else {

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

  109.     }

  110.   } else {

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

  112.   }

  113. });

  114. 

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

  116.   e.preventDefault();

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

  118.     if (getRole.ok) {

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

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

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

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

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

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

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

  126.         showForm('Sharing');

  127.       // }

  128.       // else{

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

  130.       // }

  131.     }

  132.     else{

  133.       window.location = '/logout'

  134.     }

  135. });

  136. 

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

  138.   e.preventDefault();

  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', 'complete');

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

  144.   showForm('Sharing');

  145. });

  146. 

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

  148.   e.preventDefault();

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

  150.   loading(70, true);

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

  152.     if (getToken.ok) {

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

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

  155.         method: 'PUT',

  156.         headers: {

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

  158.         },

  159.       });

  160.       if (res.ok) {

  161.         location.reload();

  162.       } else {

  163.         loading(0, false);

  164.         try {

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

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

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

  168.           }

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

  170.         } catch (e) {

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

  172.         }

  173.       }

  174.     } else {

  175.       loading(0, false);

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

  177.     }

  178. });

  179. 

  180. 

  181. 

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

  183.   e.preventDefault();

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

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

  186.     loading(70, true);

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

  188.     if (getToken.ok) {

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

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

  191.         method: 'DELETE',

  192.         headers: {

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

  194.         },

  195.       });

  196.       if (res.ok) {

  197.         location.reload();

  198.       } else {

  199.         loading(0, false);

  200. 

  201.         try {

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

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

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

  205.           }

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

  207.         } catch (e) {

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

  209.         }

  210.       }

  211.     } else {

  212.       loading(0, false);

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

  214.     }

  215.   }

  216. });

  217. 

  218. function showForm(dialog) {

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

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

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

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

  223. }

  224. 

  225. function hideform() {

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

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

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

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

  230. }

  231. 

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

  233.   var files = e.target.files;

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

  235.     showAlert(

  236.       'error',

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

  238.     );

  239.     e.target.value = '';

  240.   }

  241. });

  242. 

  243. function removeUpload(e, listFile) {

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

  245.   

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

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

  248.   }

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

  250.   else {

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

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

  253.         listFile.items.remove(i);

  254.       }

  255.     }

  256.   }

  257.   li.remove();

  258. }

  259. 

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

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

  262.     hideform();

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  277.   }

  278. });

  279. 

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

  281.   removeMedia = [];

  282.   let materialData;

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

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

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

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

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

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

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

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

  291.   list = new DataTransfer();

  292.   attachment = new DataTransfer();

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

  294.     loading(0, true);

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

  296.     if (getToken.ok) {

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

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

  299.         method: 'GET',

  300.         headers: {

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

  302.         },

  303.       });

  304.       loading(100, true);

  305.       if (res.ok) {

  306.         loading(0, false);

  307.         try {

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

  309.           obj = obj.data.attributes;

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

  311.           materialData = obj;

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

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

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

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

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

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

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

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

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

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

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

  323.           }

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

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

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

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

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

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

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

  331.                     const res = await fetch(

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

  333.                       {

  334.                         headers: {

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

  336.                         },

  337.                       }

  338.                     );

  339.                     if (res.ok) {

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

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

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

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

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

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

  346.                       );

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

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

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

  350.                             item.id

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

  352.                         );

  353.                       });

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

  355.                     }

  356.                   }

  357.                 } else {

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

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

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

  361.                     );

  362.                   }

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

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

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

  366.                     );

  367.                   }

  368.                 }

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

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

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

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

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

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

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

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

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

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

  379.                           thumbnails.id

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

  381.                           thumbnails.attributes.name

  382.                         }

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

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

  385.                                                     </button>

  386.                                                 </li>`

  387.                       );

  388.                     });

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

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

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

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

  393.                           attachments.id

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

  395.                           attachments.attributes.name

  396.                         }

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

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

  399.                                                     </button>

  400.                                                 </li>`

  401.                       );

  402.                     });

  403.                   }

  404.                 } 

  405.             }

  406.             else {

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

  408.             }

  409.             

  410.           });

  411.         } catch (e) {

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

  413.           console.log(e);

  414.         }

  415.       } else {

  416.         loading(0, false);

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

  418.       }

  419.     } else {

  420.       loading(0, false);

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

  422.     }

  423.   }

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

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

  426. 

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

  428.     event.preventDefault();

  429.     clearAlert();

  430.     var el = this;

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

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

  433.       if (

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

  435.         ?($(event.target)

  436.           .serializeArray()

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

  438.         :($(event.target)

  439.         .serializeArray()

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

  441.       ) {

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

  443.       }

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

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

  446.       } else {

  447.         loading(10, true);

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

  449.         if (getToken.ok) {

  450.           const formData = new FormData();

  451.           var obj = {};

  452.           $(event.target)

  453.             .serializeArray()

  454.             .forEach(element => {

  455.               try {

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

  457.               } catch (e) {

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

  459.               }

  460.             });

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

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

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

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

  465.             }

  466.           }

  467. 

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

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

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

  471.           }

  472. 

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

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

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

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

  477.             }

  478.           }

  479. 

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

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

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

  483.           }

  484. 

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

  486.             obj.Video = [];

  487.             formData.append(

  488.               `files.Video`,

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

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

  491.             );

  492.           }

  493. 

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

  495.             obj.Thumbnail = [];

  496.             formData.append(

  497.               `files.Thumbnail`,

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

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

  500.             );

  501.           }

  502. 

  503.           const request = new XMLHttpRequest();

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

  505.             if (evt.lengthComputable) {

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

  507.               loading(percentComplete, true);

  508.             }

  509.           };

  510.           request.onreadystatechange = function() {

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

  512.               loading(0, false);

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

  514.                 location.reload();

  515.               } else {

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

  517.               }

  518.             }

  519.           };

  520. 

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

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

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

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

  525.           request.send(formData);

  526.         } else {

  527.           loading(0, false);

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

  529.         }

  530.       }

  531.     } else{

  532.       if (

  533.         $(event.target)

  534.           .serializeArray()

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

  536.     ) {

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

  538.     } else if (

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

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

  541.       attachment.files.length <= 0

  542.     ) {

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

  544.     } else {

  545.       loading(0, true);

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

  547.       if (getToken.ok) {

  548.         var obj = {};

  549.         $(event.target)

  550.           .serializeArray()

  551.           .forEach(element => {

  552.             try {

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

  554.             } catch (e) {

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

  556.             }

  557.           });

  558.         const formData = new FormData();

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

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

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

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

  563.         }

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

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

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

  567.         }

  568.         formData.append(

  569.           `files.Video`,

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

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

  572.         );

  573. 

  574.         formData.append(

  575.           `files.Thumbnail`,

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

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

  578.         );

  579.         

  580. 

  581.         const request = new XMLHttpRequest();

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

  583.           if (evt.lengthComputable) {

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

  585.             loading(percentComplete, true);

  586.           }

  587.         };

  588.         request.onreadystatechange = function() {

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

  590.             loading(0, false);

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

  592.               location.reload();

  593.             } else {

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

  595.             }

  596.           }

  597.         };

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

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

  600.         request.send(formData);

  601.       } else {

  602.         loading(0, false);

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

  604.       }

  605.     }

  606.     } 

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

  608.   });

  609. 

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

  611.     event.preventDefault();

  612.     clearAlert();

  613.     var el = this;

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

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

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

  617.       if (

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

  619.         ?($(event.target)

  620.           .serializeArray()

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

  622.         :($(event.target)

  623.         .serializeArray()

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

  625.       ) {

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

  627.       }

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

  629.         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) {

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

  631.       } else {

  632.         loading(10, true);

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

  634.         if (getToken.ok) {

  635.           const formData = new FormData();

  636.           var obj = {};

  637.           $(event.target)

  638.             .serializeArray()

  639.             .forEach(element => {

  640.               try {

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

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

  643.                 }

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

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

  646.                 }

  647.                 else{

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

  649.                 }

  650.               } catch (e) {

  651.                 obj[element.name] = `"${element.value}"`;

  652.               }

  653.             });

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

  655.             if(materialData.Images.data){

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

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

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

  659.               }

  660.             }

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

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

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

  664.             }

  665. 

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

  667.               obj.Video = [];

  668.               formData.append(

  669.                 `files.Video`,

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

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

  672.               );

  673.             }

  674.           }

  675.           else{

  676.             delete obj['ParticipantList'];

  677.           }

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

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

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

  681.           }

  682. 

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

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

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

  686.           }

  687.           

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

  689.             obj.Thumbnail = [];

  690.             formData.append(

  691.               `files.Thumbnail`,

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

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

  694.             );

  695.           }

  696.           const request = new XMLHttpRequest();

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

  698.             if (evt.lengthComputable) {

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

  700.               loading(percentComplete, true);

  701.             }

  702.           };

  703.           request.onreadystatechange = function() {

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

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

  706.               loading(0, false);

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

  708.                 location.reload();

  709.               } else {

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

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

  712.               }

  713.             }

  714.           };

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

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

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

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

  719.           request.send(formData);

  720.         } else {

  721.           loading(0, false);

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

  723.         }

  724.       }

  725.     } else {

  726.       if (

  727.         $(event.target)

  728.           .serializeArray()

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

  730.       ) {

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

  732.       } else {

  733.         loading(0, true);

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

  735.         if (getToken.ok) {

  736.           var obj = {};

  737.           $(event.target)

  738.             .serializeArray()

  739.             .forEach(element => {

  740.               try {

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

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

  743.                 }

  744.                 else{

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

  746.                 }

  747.               } catch (e) {

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

  749.               }

  750.             });

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

  752.           const formData = new FormData();

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

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

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

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

  757.           // }

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

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

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

  761.           }

  762.           

  763.           formData.append(

  764.             `files.Thumbnail`,

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

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

  767.           );

  768.         

  769.           const request = new XMLHttpRequest();

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

  771.             if (evt.lengthComputable) {

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

  773.               loading(percentComplete, true);

  774.             }

  775.           };

  776.           request.onreadystatechange = function() {

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

  778.               loading(0, false);

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

  780.                 location.reload();

  781.               } else {

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

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

  784.               }

  785.             }

  786.           };

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

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

  789.           request.send(formData);

  790.         } else {

  791.           loading(0, false);

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

  793.         }

  794.       }

  795.     }

  796.   });

  797. 

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

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

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

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

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

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

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

  805.           }

  806.               <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>

  807.           </li>`

  808.         );

  809.       }

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

  811.     }

  812.   });

  813. 

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

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

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

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

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

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

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

  821.           }

  822.                         <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>

  823.                     </li>`

  824.         );

  825.       }

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

  827.     }

  828.   });

  829. 

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

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

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

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

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

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

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

  837.           }

  838.                         <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>

  839.                     </li>`

  840.         );

  841.       }

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

  843.     }

  844.   });

  845. 

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

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

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

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

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

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

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

  853.           }

  854.               <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>

  855.           </li>`

  856.         );

  857.       }

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

  859.     }

  860.   });

  861. 

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

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

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

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

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

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

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

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

  870.   });

  871. });

  872. 

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

  874.   e.preventDefault();

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

  876. });

  877. 

  878. 

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

  880.   e.preventDefault();

  881.   showForm('Pintar');

  882. });

  883. 

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

  885.   e.preventDefault();

  886.   showForm('Sharing');

  887. });

  888. 

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

  890.   e.preventDefault();

  891.   window.html2canvas = html2canvas;

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

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

  894.   await doc.html(

  895.       source,

  896.       {

  897.         callback:function(pdf){

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

  899.         },

  900.         html2canvas: { scale: 0.75 },

  901.       }

  902.   );

  903. });