continue update mobile view

This commit is contained in:
nishaMuhd
2023-10-22 11:30:11 +08:00
parent 2bca14b6b7
commit fa5854fc16
3 changed files with 115 additions and 12 deletions
+90 -12
View File
@@ -215,17 +215,17 @@
)
</script>
@endif
<!-- wide screen -->
<div class="table-responsive table-bordered table-hover">
<table class="table align-items-center table-flush border" id="selepas_tawarruq" style="text-align: center; width: 100%">
<thead class="thead-light bg-dark text-white text-center">
<tr>
<th>#</th>
<th>No Rujukan</th>
<th>Tempoh</th>
<th class="hide-xs">Tempoh</th>
<th>T Akhir</th>
<th>Keuntungan</th>
<th>Cawangan</th>
<th class="hide-xs">Cawangan</th>
{{-- <th>Status</th> --}}
</tr>
</thead>
@@ -233,17 +233,46 @@
<tr>
<td>1</td>
<td>1</td>
<td class="hide-xs">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td class="hide-xs">1</td>
{{-- <td>1</td> --}}
</tr>
</tbody>
</table>
<i class="text-success" style="font-size:12px;">"Swipe" ke kiri</i>
<i class="hide-xs text-success" style="font-size:12px;">"Swipe" ke kiri</i>
</div>
<!-- end of wide screen-->
<!--//if small screen -->
<!-- <div class="show-xs table-responsive table-bordered table-hover">
<table class="table" id="selepas_tawarruq" style="text-align: center">
<thead class="thead-light bg-dark text-white text-center">
<tr>
<div>#</div>
<div>No Rujukan</div>
<div>Tempoh</div>
<div>T Akhir</div>
<div>Keuntungan</div>
</tr>
</thead>
<tbody class="list">
<tr>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</tr>
</tbody>
</table>
</div> -->
<!-- end for small screen -->
<br>
</div>
</div>
@@ -256,6 +285,43 @@
<script>
var body = document.getElementsByTagName("HTML")[0];
var width = body.offsetWidth;
if (window.addEventListener) { // all browsers except IE before version 9
window.addEventListener ("resize", onResizeEvent, true);
} else {
if (window.attachEvent) { // IE before version 9
window.attachEvent("onresize", onResizeEvent);
}
}
function onResizeEvent() {
// bodyElement = document.getElementsByTagName("HTML")[0];
// newWidth = bodyElement.offsetWidth;
// if(newWidth != width){
// width = newWidth;
// console.log(width);
// console.log("t3");
var t1 = document.getElementsByClassName('hide-xs');
var style = getComputedStyle(t1[0]);
var visibility = style.getPropertyValue('visibility');
// document.getElementsByClassName('hide-xs')[5];
if(visibility != 'visible')
{
selepastawarruqtable.column(2).visible(false);
selepastawarruqtable.column(5).visible(false);
} else {
selepastawarruqtable.column(2).visible(true);
selepastawarruqtable.column(5).visible(true);
}
//console.log(visibility);
// }
}
var api_url = "{{ $api_url }}";
const formatter = new Intl.NumberFormat('en-US', {
@@ -290,12 +356,14 @@ var hargaemastable = $('#harga_emas').DataTable({
},
"pageLength": 10,
"scrollX": true
});
$( document ).ready(function() {
filterpembiayaanaktif();
});
function linktargetfunc(e){
var arraymarhun = $(e).data('marhun');
var norujukan = $(e).data('norujukan');
@@ -390,11 +458,12 @@ var hargaemastable = $('#harga_emas').DataTable({
}
async function filterpembiayaanaktif(){
$('#loadertable').removeClass('d-none');
$('#formtable').addClass('d-none');
document.getElementById('gadai').style.display = "block";
document.getElementById('lelong').style.display = "none";
$('#totalsag').text(0);
var empat = selepastawarruqtable.columns(3).header();
@@ -408,6 +477,7 @@ var hargaemastable = $('#harga_emas').DataTable({
selepastawarruqtable.column( 4 ).visible( true );
selepastawarruqtable.column( 5 ).visible( true );
// selepastawarruqtable.column( 6 ).visible( true );
let datapembaktif = [];
@@ -427,8 +497,6 @@ var hargaemastable = $('#harga_emas').DataTable({
});
selepastawarruqtable.clear().draw();
var counter = 1;
$.each(datapembaktif,function(index,ps){
@@ -529,7 +597,7 @@ var hargaemastable = $('#harga_emas').DataTable({
selepastawarruqtable.row.add([
`<input type="checkbox" onclick="tickfunc(this)" name="chkboxsag[]" value="${ps.norujukan}" id="sag-${counter}" data-norujukan="${ps.norujukan}" ${should_block} />`,
`<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${ps.nilaimarhun}" data-berat="${ps.berat}" data-upah12="${ps.bakiupah}" data-pjmnum="${ps.pinjaman}" data-bakipjm="${ps.bakipjm}" data-lelong="${ps.taglel}" data-marhun='${marh}' data-pinjaman="${ps.pinjaman}" data-norujukan="${ps.norujukan}" data-hargajualan="${ps.hargajualan}" data-kodcaw="${ps.kodcaw}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
`<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${ps.nilaimarhun}" data-berat="${ps.berat}" data-upah12="${ps.bakiupah}" data-pjmnum="${ps.pinjaman}" data-bakipjm="${ps.bakipjm}" data-lelong="${ps.taglel}" data-marhun='${marh}' data-pinjaman="${ps.pinjaman}" data-norujukan="${ps.norujukan}" data-hargajualan="${ps.hargajualan}" data-kodcaw="${ps.kodcaw}" data-tempoh="${ps.tempoh}" data-namacaw="${namacawangan}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
ps.tempoh,
t_matang,
formatter.format(ps.keuntungan),
@@ -539,6 +607,9 @@ var hargaemastable = $('#harga_emas').DataTable({
counter = counter + 1;
});
onResizeEvent();
}
function filterpembiayaan6bulan(){
@@ -691,7 +762,7 @@ var hargaemastable = $('#harga_emas').DataTable({
selepastawarruqtable.row.add([
`<input type="checkbox" onclick="tickfunc(this)" name="chkboxsag[]" value="${ps.norujukan}" id="sag-${counter}" data-norujukan="${ps.norujukan}" ${should_block} />`,
`<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${ps.nilaimarhun}" data-berat="${ps.berat}" data-upah12="${ps.bakiupah}" data-pjmnum="${ps.pinjaman}" data-bakipjm="${ps.bakipjm}" data-lelong="${ps.taglel}" data-marhun='${marh}' data-pinjaman="${ps.pinjaman}" data-norujukan="${ps.norujukan}" data-hargajualan="${ps.hargajualan}" data-kodcaw="${ps.kodcaw}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
`<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${ps.nilaimarhun}" data-berat="${ps.berat}" data-upah12="${ps.bakiupah}" data-pjmnum="${ps.pinjaman}" data-bakipjm="${ps.bakipjm}" data-lelong="${ps.taglel}" data-marhun='${marh}' data-pinjaman="${ps.pinjaman}" data-norujukan="${ps.norujukan}" data-hargajualan="${ps.hargajualan}" data-kodcaw="${ps.kodcaw}" data-tempoh="${ps.tempoh}" data-namacaw="${namacawangan}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${ps.norujukan}</span></a>`,
ps.tempoh,
t_matang,
formatter.format(ps.keuntungan),
@@ -701,6 +772,8 @@ var hargaemastable = $('#harga_emas').DataTable({
counter = counter + 1;
});
onResizeEvent();
}
function lelongan(e){
@@ -818,7 +891,7 @@ var hargaemastable = $('#harga_emas').DataTable({
selepastawarruqtable.row.add([
`<input type="checkbox" onclick="tickfunc(this)" name="chkboxsag[]" value="${lelong.norujukan}" data-fasa="${lelong.fasa}" id="sag-${counter}" data-norujukan="${lelong.norujukan}" ${should_block} />`,
`<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${lelong.nilaimarhun}" data-berat="${lelong.berat}" data-upah12="${lelong.bakiupah}" data-pjmnum="${lelong.pinjaman}" data-bakipjm="${lelong.bakipjm}" data-lelong="${lelong.taglel}" data-marhun='${marh}' data-pinjaman="${lelong.pinjaman}" data-norujukan="${lelong.norujukan}" data-hargajualan="${lelong.hargajualan}" data-kodcaw="${lelong.kodcaw}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${lelong.norujukan}</span></a>`,
`<a href="#" onclick="linktargetfunc(this)" class="linktarget" data-toggle="modal" data-nm="${lelong.nilaimarhun}" data-berat="${lelong.berat}" data-upah12="${lelong.bakiupah}" data-pjmnum="${lelong.pinjaman}" data-bakipjm="${lelong.bakipjm}" data-lelong="${lelong.taglel}" data-marhun='${marh}' data-pinjaman="${lelong.pinjaman}" data-norujukan="${lelong.norujukan}" data-hargajualan="${lelong.hargajualan}" data-kodcaw="${lelong.kodcaw}" data-namacaw="${namacawangan}" data-target="#marhunModal" style="color:#3490dc"><span class="name mb-0 text-sm">${lelong.norujukan}</span></a>`,
tarikhlelong = new Date(lelong.t_lelong).toLocaleDateString("en-GB"),
namacawangan,
'',
@@ -840,12 +913,17 @@ var hargaemastable = $('#harga_emas').DataTable({
let bakipjm = $(e).data('bakipjm');
let berat = $(e).data('berat');
let nm = $(e).data('nm');
let tempoh = $(e).data('tempoh');
let namacaw = $(e).data('namacaw');
$('#pembiayaan').text('RM' + formatter.format(pinjaman));
$('#bpembiayaan').text('RM' + formatter.format(bakipjm));
$('#nm').text('RM' + formatter.format(nm));
$('#berat').text(berat + 'g');
$('#koskeun').text('RM' + formatter.format(upah12));
$('#norujukan').text(norujukan);
$('#tempoh').text(tempoh);
$('#namacaw').text(namacaw);
$.ajax({
method: 'get',
@@ -32,6 +32,7 @@
<!-- CSS Files -->
<link href="{{ asset('css/material-kit-login.css') }}" rel="stylesheet">
<script src="{{ asset('argon') }}/vendor/jquery/dist/jquery.min.js"></script>
<link href="{{ asset('css/customportal.css') }}" rel="stylesheet">
</head>
+24
View File
@@ -1,3 +1,5 @@
<link href="{{ asset('css/customportal.css') }}" rel="stylesheet">
<div class="modal animate__animated animate__bounceInDown" id="marhunModal">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
@@ -12,6 +14,9 @@
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#rekod" role="tab" aria-controls="pills-rekod" aria-selected="false">Rekod Bayaran</a>
</li>
<li class="show-xs nav-item test">
<a class="show-xs nav-link" data-toggle="pill" href="#detail" role="tab" aria-controls="pills-detail" aria-selected="false">Detail SAG</a>
</li>
</ul>
<!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
</div>
@@ -113,6 +118,25 @@
<!-- <p style="font-size: 12px;"><i>*Dengan bayaran serendah jumlah keuntungan <span class="text-danger font-weight-bold">6 bulan</span>, anda layak mendapat lanjutan tempoh selama <span class="text-danger font-weight-bold">6 bulan</span> lagi.</i></p> -->
</div>
<div class="show-xs tab-pane fade " id="detail" role="tabpanel" aria-labelledby="detail-tab">
<div class="row show-xs">
<div class="col-6">
<div class="show-xs p-2 rounded bg-warning text-center text-dark mb-2"><div class="inner"><b>No Rujukan: <span id="norujukan"></span></b></div></div>
</div>
<div class="col-6">
<div class="show-xs p-2 rounded bg-warning text-center text-dark mb-2"><div class="inner"><b>Tempoh: <span id="tempoh"></span></b></div></div>
</div>
<div class="col-6">
<div class="show-xs p-2 rounded bg-warning text-center text-dark mb-2"><div class="inner"><b>Cawangan: <span id="namacaw"></span></b></div></div>
</div>
</div>
</div>
</div>
</div>