| 1 |
(function () { |
| 2 |
Logs = { |
| 3 |
init: function () { |
| 4 |
this.content = document.getElementById('sequra-logs-content'); |
| 5 |
this.contentTitle = document.querySelector('.sequra-logs__title'); |
| 6 |
this.contentError = document.querySelector('.sequra-logs__error'); |
| 7 |
this.contentSuccess = document.querySelector('.sequra-logs__success'); |
| 8 |
this.reload = document.getElementById('sequra-logs-reload'); |
| 9 |
this.clear = document.getElementById('sequra-logs-clear'); |
| 10 |
this.dialog = document.querySelector('.sequra-modal'); |
| 11 |
|
| 12 |
this.bindEvents(); |
| 13 |
this.handleLoad(); |
| 14 |
}, |
| 15 |
bindEvents: function () { |
| 16 |
this.reload.addEventListener('click', this.handleLoad.bind(this)); |
| 17 |
this.clear.addEventListener('click', this.handleClearConfirmation.bind(this)); |
| 18 |
|
| 19 |
this.dialog.querySelector('.sequra-modal__ko').addEventListener('click', () => this.dialog.close()); |
| 20 |
this.dialog.querySelector('.sequra-modal__ok').addEventListener('click', this.handleClear.bind(this)); |
| 21 |
}, |
| 22 |
|
| 23 |
updateDom: function (args) { |
| 24 |
const isLoading = args?.isLoading || false; |
| 25 |
|
| 26 |
this.contentError.textContent = args?.error || ''; |
| 27 |
this.contentSuccess.textContent = args?.success || ''; |
| 28 |
|
| 29 |
if (isLoading) { |
| 30 |
this.contentTitle.textContent = 'Loading...'; |
| 31 |
this.content.classList.remove('active'); |
| 32 |
this.content.value = ''; |
| 33 |
return |
| 34 |
} |
| 35 |
|
| 36 |
this.contentTitle.textContent = 'Logs'; |
| 37 |
|
| 38 |
if ('undefined' !== typeof args.content) { |
| 39 |
this.content.value = args.content; |
| 40 |
} |
| 41 |
|
| 42 |
if (this.content.value) { |
| 43 |
this.content.classList.add('active'); |
| 44 |
} else { |
| 45 |
this.content.classList.remove('active'); |
| 46 |
} |
| 47 |
|
| 48 |
}, |
| 49 |
|
| 50 |
ajax: function (args) { |
| 51 |
return fetch(sequraLogs.url, { |
| 52 |
mode: 'same-origin', |
| 53 |
method: args?.method || 'GET', |
| 54 |
headers: { |
| 55 |
'Content-Type': 'application/json', |
| 56 |
'X-WP-Nonce': sequraLogs.nonce |
| 57 |
}, |
| 58 |
}) |
| 59 |
}, |
| 60 |
|
| 61 |
handleLoad: function () { |
| 62 |
this.updateDom({ isLoading: true }); |
| 63 |
this.ajax() |
| 64 |
.then(response => { |
| 65 |
if (!response.ok) { |
| 66 |
// decode the response body |
| 67 |
return response.json().then(text => { |
| 68 |
throw new Error(text?.message || response.statusText); |
| 69 |
}); |
| 70 |
} |
| 71 |
return response.text() |
| 72 |
}) |
| 73 |
.then(data => { |
| 74 |
this.updateDom({ success: '', content: data }) |
| 75 |
}) |
| 76 |
.catch(e => { |
| 77 |
this.updateDom({ error: e.message || 'Error loading logs' }) |
| 78 |
}) |
| 79 |
}, |
| 80 |
|
| 81 |
handleClearConfirmation: function () { |
| 82 |
this.dialog.showModal(); |
| 83 |
}, |
| 84 |
handleClear: function () { |
| 85 |
this.dialog.close() |
| 86 |
this.updateDom({ isLoading: true }); |
| 87 |
|
| 88 |
this.ajax({ method: 'DELETE' }) |
| 89 |
.then(response => { |
| 90 |
if (!response.ok) { |
| 91 |
throw new Error(response.statusText); |
| 92 |
} |
| 93 |
return response.json() |
| 94 |
}) |
| 95 |
.then(data => { |
| 96 |
this.updateDom({ success: data.message || 'Logs deleted', content: '' }) |
| 97 |
}) |
| 98 |
.catch(e => { |
| 99 |
this.updateDom({ error: e.message || 'Error clearing logs' }) |
| 100 |
}) |
| 101 |
}, |
| 102 |
}; |
| 103 |
|
| 104 |
Logs.init(); |
| 105 |
})(); |
