| 1 |
import lpModalOverlay from '../../../../utils/lp-modal-overlay'; |
| 2 |
import handleAjax from '../../../../utils/handle-ajax-api'; |
| 3 |
|
| 4 |
const cleanDatabases = () => { |
| 5 |
const elCleanDatabases = document.querySelector( '#lp-tool-clean-database' ); |
| 6 |
|
| 7 |
if ( ! elCleanDatabases ) { |
| 8 |
return; |
| 9 |
} |
| 10 |
|
| 11 |
const elBtnCleanDatabases = elCleanDatabases.querySelector( '.lp-btn-clean-db' ); |
| 12 |
elBtnCleanDatabases.addEventListener( 'click', function( e ) { |
| 13 |
e.preventDefault(); |
| 14 |
const elToolsSelect = document.querySelector( '#tools-select__id' ); |
| 15 |
const ElToolSelectLi = elToolsSelect.querySelectorAll( 'ul li input' ); |
| 16 |
const checkedOne = Array.prototype.slice.call( ElToolSelectLi ).some( ( x ) => x.checked ); |
| 17 |
const prepareMessage = elCleanDatabases.querySelector( '.tools-prepare__message' ); |
| 18 |
if ( checkedOne == false ) { |
| 19 |
prepareMessage.style.display = 'block'; |
| 20 |
prepareMessage.textContent = 'You must choose at least one table to take this action'; |
| 21 |
return; |
| 22 |
} |
| 23 |
prepareMessage.style.display = 'none'; |
| 24 |
|
| 25 |
const elLoading = elCleanDatabases.querySelector( '.wrapper-lp-loading' ); |
| 26 |
if ( ! lpModalOverlay.init() ) { |
| 27 |
return; |
| 28 |
} |
| 29 |
|
| 30 |
lpModalOverlay.elLPOverlay.show(); |
| 31 |
lpModalOverlay.setContentModal( elLoading.innerHTML ); |
| 32 |
lpModalOverlay.setTitleModal( elCleanDatabases.querySelector( 'h2' ).textContent ); |
| 33 |
lpModalOverlay.elBtnYes[ 0 ].style.display = 'inline-block'; |
| 34 |
lpModalOverlay.elBtnYes[ 0 ].textContent = 'Run'; |
| 35 |
lpModalOverlay.elBtnNo[ 0 ].textContent = 'Close'; |
| 36 |
const listTables = new Array(); |
| 37 |
const ElToolSelectLiCheked = elToolsSelect.querySelectorAll( 'ul li input:checked' ); |
| 38 |
ElToolSelectLiCheked.forEach( ( e ) => { |
| 39 |
listTables.push( e.value ); |
| 40 |
} ); |
| 41 |
const tables = listTables[ 0 ]; |
| 42 |
const item = elLoading.querySelector( '.progressbar__item' ); |
| 43 |
|
| 44 |
const itemtotal = item.getAttribute( 'data-total' ); |
| 45 |
const modal = document.querySelector( '.lp-modal-body .main-content' ); |
| 46 |
const notice = modal.querySelector( '.lp-tool__message' ); |
| 47 |
if ( itemtotal <= 0 ) { |
| 48 |
lpModalOverlay.elBtnYes[ 0 ].style.display = 'none'; |
| 49 |
notice.textContent = ( 'There is no data that need to be repaired in the chosen tables' ); |
| 50 |
notice.style.display = 'block'; |
| 51 |
return; |
| 52 |
} |
| 53 |
lpModalOverlay.callBackYes = () => { |
| 54 |
// warn user before doing |
| 55 |
const r = confirm( 'The modified data is impossible to be restored. Please backup your website before doing this.' ); |
| 56 |
if ( r == false ) { |
| 57 |
return; |
| 58 |
} |
| 59 |
const modal = document.querySelector( '.lp-modal-body .main-content' ); |
| 60 |
const notice = modal.querySelector( '.lp-tool__message' ); |
| 61 |
notice.textContent = 'This action is in processing. Don\'t close this page'; |
| 62 |
notice.style.display = 'block'; |
| 63 |
const url = '/lp/v1/admin/tools/clean-tables'; |
| 64 |
const params = { tables, itemtotal }; |
| 65 |
|
| 66 |
lpModalOverlay.elBtnNo[ 0 ].style.display = 'none'; |
| 67 |
lpModalOverlay.elBtnYes[ 0 ].style.display = 'none'; |
| 68 |
|
| 69 |
const functions = { |
| 70 |
success: ( res ) => { |
| 71 |
const { status, message, data: { processed, percent } } = res; |
| 72 |
const modalItem = modal.querySelector( '.progressbar__item' ); |
| 73 |
const progressBarRows = modalItem.querySelector( '.progressbar__rows' ); |
| 74 |
const progressPercent = modalItem.querySelector( '.progressbar__percent' ); |
| 75 |
const progressValue = modalItem.querySelector( '.progressbar__value' ); |
| 76 |
|
| 77 |
console.log( status ); |
| 78 |
if ( 'success' === status ) { |
| 79 |
setTimeout( () => { |
| 80 |
handleAjax( url, params, functions ); |
| 81 |
}, 2000 ); |
| 82 |
// update processed quantity |
| 83 |
progressBarRows.textContent = processed + ' / ' + itemtotal; |
| 84 |
// update percent |
| 85 |
progressPercent.textContent = '( ' + percent + '%' + ' )'; |
| 86 |
// update percent width |
| 87 |
progressValue.style.width = percent + '%'; |
| 88 |
} else if ( 'finished' === status ) { |
| 89 |
// Re-update indexs |
| 90 |
progressBarRows.textContent = itemtotal + ' / ' + itemtotal; |
| 91 |
progressPercent.textContent = '( 100% )'; |
| 92 |
// Update complete nofication |
| 93 |
const modal = document.querySelector( '.lp-modal-body .main-content' ); |
| 94 |
const notice = modal.querySelector( '.lp-tool__message' ); |
| 95 |
notice.textContent = 'Process has been completed. Press click the finish button to close this popup'; |
| 96 |
notice.style.color = 'white'; |
| 97 |
notice.style.background = 'green'; |
| 98 |
progressValue.style.width = '100%'; |
| 99 |
// Show finish button |
| 100 |
lpModalOverlay.elBtnNo[ 0 ].style.display = 'inline-block'; |
| 101 |
lpModalOverlay.elBtnNo[ 0 ].textContent = 'Finish'; |
| 102 |
lpModalOverlay.elBtnNo[ 0 ].addEventListener( 'click', function() { |
| 103 |
location.reload(); |
| 104 |
} ); |
| 105 |
} else { |
| 106 |
console.log( message ); |
| 107 |
} |
| 108 |
}, |
| 109 |
error: ( err ) => { |
| 110 |
console.log( err ); |
| 111 |
}, |
| 112 |
completed: () => { |
| 113 |
|
| 114 |
}, |
| 115 |
}; |
| 116 |
handleAjax( url, params, functions ); |
| 117 |
}; |
| 118 |
} ); |
| 119 |
}; |
| 120 |
export default cleanDatabases; |
| 121 |
|
