Fix galeri marhun request vue to jquery
This commit is contained in:
Amir
@@ -0,0 +1,265 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<link rel="stylesheet" href="{{ asset('css/viewer.min.css') }}">
|
||||
<style>
|
||||
.image-style {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 245px;
|
||||
height: 137.812px;
|
||||
border-start-start-radius: 7px;
|
||||
border-start-end-radius: 7px;
|
||||
}
|
||||
|
||||
.marhun-div-style {
|
||||
max-width: 225px;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.icon-image {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.false-style {
|
||||
background: #fdf3f3;
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, auto));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.item-main {
|
||||
border: 1px solid #00000026;
|
||||
margin: 10px;
|
||||
border-start-start-radius: 8px;
|
||||
border-start-end-radius: 8px;
|
||||
}
|
||||
|
||||
.spinner-style {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5rem 0;
|
||||
}
|
||||
</style>
|
||||
<div class="container-fluid">
|
||||
<div class="row ">
|
||||
<div class="col mx-auto p-4">
|
||||
<div class="card">
|
||||
<div class="card-header header-style">
|
||||
<div class="header-style-title">
|
||||
Galeri Marhun
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<label>Pilih Batch Lelong</label>
|
||||
<select class="custom-select" id="batchLelong">
|
||||
<option value="null" selected>Batch Lelong</option>
|
||||
@foreach ($lelong_all as $lelong)
|
||||
<option value="{{ $lelong->id }}">{{ $lelong->id }}, {{ $lelong->tarikh_lelong }}
|
||||
(fasa {{ $lelong->fasa }})
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div id="divCawangan" style="display: none" class="mt-3">
|
||||
<label>Pilih Cawangan</label>
|
||||
<div class="d-flex">
|
||||
<select class="custom-select" id="cawanganLelong">
|
||||
</select>
|
||||
<button class="btn btn-primary d-flex text-nowrap" onclick="reloadListLelongBid()">Kemaskini
|
||||
Data
|
||||
Cawangan <span class="material-symbols-rounded">refresh</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spinner-style" id="divSpinner" style="display: none">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<h6 id="divJumlahSurat" style="display: none">Jumlah Surat: <span id="text-jumlah-surat"></span>
|
||||
</h6>
|
||||
<h4 class="text-danger blink" id="divBelumSemak" style="display: none">Belum Semak: <span
|
||||
id="text-belum-semak"></span></h4>
|
||||
</div>
|
||||
<div id="divGambar" style="display: none">
|
||||
<div class="row justify-content-center" id="divComponentGambar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var cawId = '<?php echo $caw_id; ?>';
|
||||
|
||||
$('#batchLelong').on('change', function() {
|
||||
var valBatch = $("#batchLelong").val();
|
||||
console.log("1st function: " + valBatch);
|
||||
if (valBatch != "null") {
|
||||
$("#divGambar").attr("style", "display:block");
|
||||
// $('#cawanganLelong').find('option')
|
||||
// .remove()
|
||||
// .end()
|
||||
// .append('<option selected value="null">Pilih Cawangan</option>');
|
||||
// $.ajax({
|
||||
// url: '{{ route('pengurusangambar.listcawangan') }}',
|
||||
// method: 'GET',
|
||||
// data: {
|
||||
// "lelong_id": valBatch,
|
||||
// },
|
||||
// }).done(function(response) {
|
||||
// for (var data of response) {
|
||||
// $('#cawanganLelong').append($('<option>', {
|
||||
// value: data.caw_id,
|
||||
// text: data.caw_name
|
||||
// }));
|
||||
// }
|
||||
// }).fail(function(error) {
|
||||
// alert(error);
|
||||
// });
|
||||
reloadListLelongBid();
|
||||
} else {
|
||||
// $("#divCawangan").attr("style", "display:none")
|
||||
$("#divGambar").attr("style", "display:none")
|
||||
$("#divJumlahSurat").attr("style", "display:none")
|
||||
$("#divBelumSemak").attr("style", "display:none")
|
||||
}
|
||||
// $("#divGambar").attr("style", "display:none")
|
||||
// $("#divJumlahSurat").attr("style", "display:none")
|
||||
// $("#divBelumSemak").attr("style", "display:none")
|
||||
});
|
||||
|
||||
$('#cawanganLelong').on('change', function() {
|
||||
var valCawangan = $("#cawanganLelong").val();
|
||||
var valBatchLelong = $("#batchLelong").val();
|
||||
console.log("2nd function: caw_id -> " + valCawangan);
|
||||
if (valCawangan != "null") {
|
||||
reloadListLelongBid();
|
||||
$("#divGambar").attr("style", "display:block")
|
||||
} else {
|
||||
$("#divGambar").attr("style", "display:none")
|
||||
$("#divJumlahSurat").attr("style", "display:none")
|
||||
$("#divBelumSemak").attr("style", "display:none")
|
||||
}
|
||||
});
|
||||
|
||||
function reloadListLelongBid() {
|
||||
$("#divJumlahSurat").attr("style", "display:none")
|
||||
$("#divBelumSemak").attr("style", "display:none")
|
||||
var dataCawangan = cawId;
|
||||
var dataBatchLelong = $("#batchLelong").val();
|
||||
if (dataCawangan == 'null') {
|
||||
$.alert({
|
||||
title: 'Gagal',
|
||||
content: 'Sila pilih cawangan terlebih dahulu.',
|
||||
backgroundDismiss: true,
|
||||
type: 'red',
|
||||
buttons: {
|
||||
Kembali: {
|
||||
keys: ['enter']
|
||||
},
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
$("#divSpinner").attr("style", "display:flex")
|
||||
$("#divComponentGambar").empty();
|
||||
console.log('reloadcawangan:' + dataCawangan);
|
||||
console.log('reloadbatchlelong:' + dataBatchLelong);
|
||||
$.ajax({
|
||||
url: '{{ route('pengurusangambar.listlelongbid') }}',
|
||||
method: 'GET',
|
||||
data: {
|
||||
"lelong_id": dataBatchLelong,
|
||||
"caw_id": dataCawangan,
|
||||
},
|
||||
}).done(function(response) {
|
||||
$("#text-jumlah-surat").text(response.jumlah_surat);
|
||||
$("#divJumlahSurat").attr("style", "display:block")
|
||||
if (response.belum_semak != 0) {
|
||||
$("#text-belum-semak").text(response.belum_semak);
|
||||
$("#divBelumSemak").attr("style", "display:block")
|
||||
} else {
|
||||
$("#divBelumSemak").attr("style", "display:none")
|
||||
}
|
||||
console.log(response);
|
||||
for (var dataLelBid of response.lelong_bid) {
|
||||
const gambarComponent = document.createElement('div');
|
||||
if (dataLelBid.file_marhun_main != null) {
|
||||
if (dataLelBid.file_marhun_main.gambar == 0) {
|
||||
gambarComponent.innerHTML = `
|
||||
<div class="text-primary bg-light image-style">
|
||||
<span class="material-symbols-rounded icon-image">
|
||||
cycle
|
||||
</span>
|
||||
<div>No Image in Storage</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
gambarComponent.innerHTML = `
|
||||
<div style='cursor:pointer'>
|
||||
<img id='image` + dataLelBid.id + `' src='data:image/png;base64,` + dataLelBid
|
||||
.file_marhun_main.gambar + `' class="image-style" alt="gambar-marhun">
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
}
|
||||
} else {
|
||||
gambarComponent.innerHTML = `
|
||||
<div class="text-danger false-style image-style">
|
||||
<span class="material-symbols-rounded icon-image">
|
||||
cancel
|
||||
</span>
|
||||
<div>Gambar Belum Di Muat Naik</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (dataLelBid.status_semak == 0) {
|
||||
var statusSem = 'unchecked';
|
||||
} else {
|
||||
var statusSem = '';
|
||||
}
|
||||
|
||||
const marhunComponent = document.createElement('div');
|
||||
|
||||
marhunComponent.innerHTML = `
|
||||
<div class="item-wrapper">
|
||||
<div class="item-main">
|
||||
<div class="text-center ` + statusSem + `">
|
||||
` + gambarComponent.innerHTML + `
|
||||
<div class="my-2">` + dataLelBid.norujukan + `</div>
|
||||
<div class="marhun-div-style">` + dataLelBid.marhun + `</div>
|
||||
<div class="my-2">` + dataLelBid.berat + `g</div>
|
||||
<div class="my-2"><strong>N. Marhun: </strong>RM` + dataLelBid.nilaimarhun + `</div>
|
||||
<div class="my-2"><strong>H. Asas: </strong>RM` + dataLelBid.hargaasas + `</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
$('#divComponentGambar').append(marhunComponent);
|
||||
|
||||
if (dataLelBid.file_marhun_main != null && dataLelBid.file_marhun_main.gambar != 0) {
|
||||
const viewer = new Viewer(document.getElementById('image' + dataLelBid.id), {
|
||||
inline: false,
|
||||
title: false,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
$("#divSpinner").attr("style", "display:none")
|
||||
}).fail(function(error) {
|
||||
alert(error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,259 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<link rel="stylesheet" href="{{ asset('css/viewer.min.css') }}">
|
||||
<style>
|
||||
.image-style {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 245px;
|
||||
height: 137.812px;
|
||||
border-start-start-radius: 7px;
|
||||
border-start-end-radius: 7px;
|
||||
}
|
||||
|
||||
.marhun-div-style {
|
||||
max-width: 225px;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.icon-image {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.false-style {
|
||||
background: #fdf3f3;
|
||||
}
|
||||
|
||||
.item-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, auto));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.item-main {
|
||||
border: 1px solid #00000026;
|
||||
margin: 10px;
|
||||
border-start-start-radius: 8px;
|
||||
border-start-end-radius: 8px;
|
||||
}
|
||||
|
||||
.spinner-style {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5rem 0;
|
||||
}
|
||||
</style>
|
||||
<div class="container-fluid">
|
||||
<div class="row ">
|
||||
<div class="col mx-auto p-4">
|
||||
<div class="card">
|
||||
<div class="card-header header-style">
|
||||
<div class="header-style-title">
|
||||
Galeri Marhun
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<label>Pilih Batch Lelong</label>
|
||||
<select class="custom-select" id="batchLelong">
|
||||
<option value="null" selected>Batch Lelong</option>
|
||||
@foreach ($lelong_all as $lelong)
|
||||
<option value="{{ $lelong->id }}">{{ $lelong->id }}, {{ $lelong->tarikh_lelong }}
|
||||
(fasa {{ $lelong->fasa }})
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div id="divCawangan" style="display: none" class="mt-3">
|
||||
<label>Pilih Cawangan</label>
|
||||
<div class="d-flex">
|
||||
<select class="custom-select" id="cawanganLelong">
|
||||
</select>
|
||||
<button class="btn btn-primary d-flex text-nowrap" onclick="reloadListLelongBid()">Kemaskini
|
||||
Data
|
||||
Cawangan <span class="material-symbols-rounded">refresh</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spinner-style" id="divSpinner" style="display: none">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<h6 id="divJumlahSurat" style="display: none">Jumlah Surat: <span id="text-jumlah-surat"></span>
|
||||
</h6>
|
||||
<h4 class="text-danger blink" id="divBelumSemak" style="display: none">Belum Semak: <span
|
||||
id="text-belum-semak"></span></h4>
|
||||
</div>
|
||||
<div id="divGambar" style="display: none">
|
||||
<div class="row justify-content-center" id="divComponentGambar">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$('#batchLelong').on('change', function() {
|
||||
var valBatch = $("#batchLelong").val();
|
||||
console.log("1st function: " + valBatch);
|
||||
if (valBatch != "null") {
|
||||
$("#divCawangan").attr("style", "display:block")
|
||||
$('#cawanganLelong').find('option')
|
||||
.remove()
|
||||
.end()
|
||||
.append('<option selected value="null">Pilih Cawangan</option>');
|
||||
$.ajax({
|
||||
url: '{{ route('pengurusangambar.listcawangan') }}',
|
||||
method: 'GET',
|
||||
data: {
|
||||
"lelong_id": valBatch,
|
||||
},
|
||||
}).done(function(response) {
|
||||
for (var data of response) {
|
||||
$('#cawanganLelong').append($('<option>', {
|
||||
value: data.caw_id,
|
||||
text: data.caw_name
|
||||
}));
|
||||
}
|
||||
}).fail(function(error) {
|
||||
alert(error);
|
||||
});
|
||||
} else {
|
||||
$("#divCawangan").attr("style", "display:none")
|
||||
}
|
||||
$("#divGambar").attr("style", "display:none")
|
||||
$("#divJumlahSurat").attr("style", "display:none")
|
||||
$("#divBelumSemak").attr("style", "display:none")
|
||||
});
|
||||
|
||||
$('#cawanganLelong').on('change', function() {
|
||||
var valCawangan = $("#cawanganLelong").val();
|
||||
var valBatchLelong = $("#batchLelong").val();
|
||||
console.log("2nd function: caw_id -> " + valCawangan);
|
||||
if (valCawangan != "null") {
|
||||
reloadListLelongBid();
|
||||
$("#divGambar").attr("style", "display:block")
|
||||
} else {
|
||||
$("#divGambar").attr("style", "display:none")
|
||||
$("#divJumlahSurat").attr("style", "display:none")
|
||||
$("#divBelumSemak").attr("style", "display:none")
|
||||
}
|
||||
});
|
||||
|
||||
function reloadListLelongBid() {
|
||||
$("#divJumlahSurat").attr("style", "display:none")
|
||||
$("#divBelumSemak").attr("style", "display:none")
|
||||
var dataCawangan = $("#cawanganLelong").val();
|
||||
var dataBatchLelong = $("#batchLelong").val();
|
||||
if (dataCawangan == 'null') {
|
||||
$.alert({
|
||||
title: 'Gagal',
|
||||
content: 'Sila pilih cawangan terlebih dahulu.',
|
||||
backgroundDismiss: true,
|
||||
type: 'red',
|
||||
buttons: {
|
||||
Kembali: {
|
||||
keys: ['enter']
|
||||
},
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
$("#divSpinner").attr("style", "display:flex")
|
||||
$("#divComponentGambar").empty();
|
||||
console.log('reloadcawangan:' + dataCawangan);
|
||||
console.log('reloadbatchlelong:' + dataBatchLelong);
|
||||
$.ajax({
|
||||
url: '{{ route('pengurusangambar.listlelongbid') }}',
|
||||
method: 'GET',
|
||||
data: {
|
||||
"lelong_id": dataBatchLelong,
|
||||
"caw_id": dataCawangan,
|
||||
},
|
||||
}).done(function(response) {
|
||||
$("#text-jumlah-surat").text(response.jumlah_surat);
|
||||
$("#divJumlahSurat").attr("style", "display:block")
|
||||
if (response.belum_semak != 0) {
|
||||
$("#text-belum-semak").text(response.belum_semak);
|
||||
$("#divBelumSemak").attr("style", "display:block")
|
||||
} else {
|
||||
$("#divBelumSemak").attr("style", "display:none")
|
||||
}
|
||||
console.log(response);
|
||||
for (var dataLelBid of response.lelong_bid) {
|
||||
const gambarComponent = document.createElement('div');
|
||||
if (dataLelBid.file_marhun_main != null) {
|
||||
if (dataLelBid.file_marhun_main.gambar == 0) {
|
||||
gambarComponent.innerHTML = `
|
||||
<div class="text-primary bg-light image-style">
|
||||
<span class="material-symbols-rounded icon-image">
|
||||
cycle
|
||||
</span>
|
||||
<div>No Image in Storage</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
gambarComponent.innerHTML = `
|
||||
<div style='cursor:pointer'>
|
||||
<img id='image` + dataLelBid.id + `' src='data:image/png;base64,` + dataLelBid
|
||||
.file_marhun_main.gambar + `' class="image-style" alt="gambar-marhun">
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
}
|
||||
} else {
|
||||
gambarComponent.innerHTML = `
|
||||
<div class="text-danger false-style image-style">
|
||||
<span class="material-symbols-rounded icon-image">
|
||||
cancel
|
||||
</span>
|
||||
<div>Gambar Belum Di Muat Naik</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (dataLelBid.status_semak == 0) {
|
||||
var statusSem = 'unchecked';
|
||||
} else {
|
||||
var statusSem = '';
|
||||
}
|
||||
|
||||
const marhunComponent = document.createElement('div');
|
||||
|
||||
marhunComponent.innerHTML = `
|
||||
<div class="item-wrapper">
|
||||
<div class="item-main">
|
||||
<div class="text-center ` + statusSem + `">
|
||||
` + gambarComponent.innerHTML + `
|
||||
<div class="my-2">` + dataLelBid.norujukan + `</div>
|
||||
<div class="marhun-div-style">` + dataLelBid.marhun + `</div>
|
||||
<div class="my-2">` + dataLelBid.berat + `g</div>
|
||||
<div class="my-2"><strong>N. Marhun: </strong>RM` + dataLelBid.nilaimarhun + `</div>
|
||||
<div class="my-2"><strong>H. Asas: </strong>RM` + dataLelBid.hargaasas + `</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
$('#divComponentGambar').append(marhunComponent);
|
||||
|
||||
if (dataLelBid.file_marhun_main != null && dataLelBid.file_marhun_main.gambar != 0) {
|
||||
const viewer = new Viewer(document.getElementById('image' + dataLelBid.id), {
|
||||
inline: false,
|
||||
title: false,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
$("#divSpinner").attr("style", "display:none")
|
||||
}).fail(function(error) {
|
||||
alert(error);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user