KoPKB/erahn-click
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add loader when opening marhun modals

Browse Source
This commit is contained in:
Afiq Hamzah
2024-10-07 14:32:56 +08:00
parent 9e67c72bf7
commit 5a40e9f0e2
1 changed files with 92 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/modal/marhun.blade.php
+92 -43
View File
@@ -1,5 +1,7 @@
<link href="{{ asset('css/customportal.css') }}" rel="stylesheet">
<div id="marhunLoader" class="loader" style="display: none;"></div>
<div class="modal animate__animated animate__bounceInDown" id="marhunModal">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
@@ -167,61 +169,108 @@
</div>
</div>
@push('additional_styles')
<style>
.loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.loader::after {
content: "";
width: 50px;
height: 50px;
border: 10px solid #dddddd;
border-top-color: #009578;
border-radius: 50%;
animation: loading 1s ease infinite;
}
@keyframes loading {
from {
transform: rotate(0turn)
}
to {
transform: rotate(1turn)
}
}
</style>
@endpush
@push('additional_js_scripts')
<script>
const showMarhunDetailModal = async function(event) {
event.preventDefault();
document.getElementById('marhunLoader').style.display = 'flex';
const norujukan = event.target.innerHTML;
const data = await fetch('/api/pembiayaan-modal-data/' + norujukan).then(x => x.json());
const formatter = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2
});
$('#pembiayaan').text('RM' + formatter.format(data.gadaianDetails.pinjaman));
$('#bpembiayaan').text('RM' + formatter.format(data.gadaianDetails.bakipjm));
$('#nm').text('RM' + formatter.format(data.gadaianDetails.nilaimarhun));
$('#berat').text(data.gadaianDetails.berat + 'g');
$('#koskeun').text('RM' + formatter.format(data.gadaianDetails.bakiupah));
$('#norujukan').text(data.gadaianDetails.norujukan);
$('#tempoh').text(data.gadaianDetails.tempoh);
$('#namacaw').text(data.gadaianDetails.cawangan_name);
$('#pemb').text('RM ' + data.gadaianDetails.pinjaman);
$('#bpemb').text('RM ' + data.gadaianDetails.bakipjm);
$('#statuslelong').text(data.gadaianDetails.taglel === 1 ? 'Akan Dilelong' : '-');
$('#norujukan_modal').val(data.gadaianDetails.norujukan);
$('#pinjaman_modal').val(data.gadaianDetails.pinjaman);
$('#marhunModal').modal('show');
try {
$('#tablehistorybayaran').DataTable().clear().destroy();
let table_bayaran_history = $('#tablehistorybayaran').DataTable();
const data = await fetch('/api/pembiayaan-modal-data/' + norujukan).then(x => x.json());
$('#biasa').DataTable().clear().destroy();
let table_marhun = $('#biasa').DataTable();
const formatter = new Intl.NumberFormat('en-US', {
minimumFractionDigits: 2
});
data.bayaranHistoryDetails.forEach((x, index) => {
table_bayaran_history.row.add([
index + 1,
x.created_at,
`RM ${x.duit_masuk} <a target='_blank' href="${x.resit_ansuran_link}" class='btn btn-info btn-sm'><span class='fas fa-print'></span></a>`,
]).draw(false)
});
$('#pembiayaan').text('RM' + formatter.format(data.gadaianDetails.pinjaman));
$('#bpembiayaan').text('RM' + formatter.format(data.gadaianDetails.bakipjm));
$('#nm').text('RM' + formatter.format(data.gadaianDetails.nilaimarhun));
$('#berat').text(data.gadaianDetails.berat + 'g');
$('#koskeun').text('RM' + formatter.format(data.gadaianDetails.bakiupah));
$('#norujukan').text(data.gadaianDetails.norujukan);
$('#tempoh').text(data.gadaianDetails.tempoh);
$('#namacaw').text(data.gadaianDetails.cawangan_name);
$('#pemb').text('RM ' + data.gadaianDetails.pinjaman);
$('#bpemb').text('RM ' + data.gadaianDetails.bakipjm);
$('#statuslelong').text(data.gadaianDetails.taglel === 1 ? 'Akan Dilelong' : '-');
$('#norujukan_modal').val(data.gadaianDetails.norujukan);
$('#pinjaman_modal').val(data.gadaianDetails.pinjaman);
$('#marhunModal').modal('show');
data.marhunDetails.forEach((x, index) => {
table_marhun.row.add([
index + 1,
x.marhun,
x.berat,
x.karat,
`RM ${formatter.format(x.n_marhun)}`,
x.nota
]).draw(false)
});
$('#tablehistorybayaran').DataTable().clear().destroy();
let table_bayaran_history = $('#tablehistorybayaran').DataTable();
$('#biasa').DataTable().clear().destroy();
let table_marhun = $('#biasa').DataTable();
data.bayaranHistoryDetails.forEach((x, index) => {
table_bayaran_history.row.add([
index + 1,
x.created_at,
`RM ${x.duit_masuk} <a target='_blank' href="${x.resit_ansuran_link}" class='btn btn-info btn-sm'><span class='fas fa-print'></span></a>`,
]).draw(false)
});
data.marhunDetails.forEach((x, index) => {
table_marhun.row.add([
index + 1,
x.marhun,
x.berat,
x.karat,
`RM ${formatter.format(x.n_marhun)}`,
x.nota
]).draw(false)
});
document.getElementById('marhunLoader').style.display = 'none';
} catch (error) {
console.error('Error fetching data:', error);
// Hide loader in case of error
document.getElementById('marhunLoader').style.display = 'none';
}
};
document.addEventListener('DOMContentLoaded', function() {