KoPKB/lelong
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix galeri marhun request vue to jquery

Browse Source
This commit is contained in:
Amir
2023-10-29 13:22:19 +08:00
parent d72361c2b3
commit 67dd589b0e
5 changed files with 609 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/MarhunController.php
+67 -3
View File
@@ -32,6 +32,7 @@ use Illuminate\Support\Facades\Request as FacadesRequest;
use App\Models\TempPengesahan;
use DateTime;
use App\Models\LogUser;
use Illuminate\Support\Facades\Storage;
class MarhunController extends Controller
{
@@ -2598,14 +2599,77 @@ class MarhunController extends Controller
public function pengurusanGambarMarhun()
{
return view('pengurusangambar.index');
$lelong_all = Lelong::select('id', 'tarikh_lelong', 'fasa')->get();
foreach($lelong_all as $index => $lelong)
{
$date_convert = strtotime($lelong->tarikh_lelong);
$lelong_all[$index]['tarikh_lelong'] = date("d-m-Y", $date_convert);
}
return view('pengurusangambar.operasi', compact('lelong_all'));
}
public function galeriMarhun()
{
$user = Auth::user();
$kodcaw = Cawangan::select('id')->where('caw_code', $user->kodcaw)->first();
return view('pengurusangambar.galerimarhun', compact('kodcaw'));
$cawangan = Cawangan::with('lelong')->where('caw_code', $user->kodcaw)->first();
$caw_id = $cawangan->id;
$lelong_all = $cawangan->lelong;
foreach($lelong_all as $index => $lelong)
{
$date_convert = strtotime($lelong->tarikh_lelong);
$lelong_all[$index]['tarikh_lelong'] = date("d-m-Y", $date_convert);
$lelong_all[$index]['new_id'] = str_pad($lelong->id, 3, "0", STR_PAD_LEFT);
}
return view('pengurusangambar.cawangan', compact('caw_id', 'lelong_all'));
}
public function listCawangan(Request $request)
{
$cawangan_all = CawanganLelong::join('cawangan', 'cawangan_lelong.caw_id', '=', 'cawangan.id')
->where('lelong_id', $request->lelong_id)
->select('cawangan_lelong.caw_id', 'cawangan.caw_name')->get();
return response()->json($cawangan_all);
}
public function listLelongBid(Request $request)
{
$lelong_bid_all = LelongBid::with('fileMarhunMain')
->where('caw_id', $request->caw_id)
->where('lelong_id', $request->lelong_id)
->select(['id','norujukan', 'marhun', 'nilaimarhun', 'status_semak', 'berat', 'hargaasas'])
->get();
foreach ($lelong_bid_all as $index => $lelong_bid) {
$lelong_bid_all[$index]['nilaimarhun'] = number_format($lelong_bid->nilaimarhun, 2, '.', ',');
$lelong_bid_all[$index]['hargaasas'] = number_format($lelong_bid->hargaasas, 2, '.', ',');
if ($lelong_bid->fileMarhunMain != null) {
$directory = "/{$lelong_bid->norujukan}/overall_photo/";
$imageExtension = $lelong_bid->fileMarhunMain->file_type;
$marhunImageFileName = "overall.{$imageExtension}";
if (Storage::disk('marhun')->exists("{$directory}${marhunImageFileName}")) {
$marhun_photo = Storage::disk('marhun')->get("{$directory}${marhunImageFileName}");
$lelong_bid_all[$index]['fileMarhunMain']['gambar'] = base64_encode($marhun_photo);
} else {
$lelong_bid_all[$index]['fileMarhunMain']['gambar'] = 0;
}
}
}
$belum_semak = $lelong_bid_all->where('status_semak', 0)->count();
return response()->json([
"jumlah_surat" => $lelong_bid_all->count(),
"belum_semak" => $belum_semak,
"lelong_bid" => $lelong_bid_all,
]);
}
}
public/css/style.css
Vendored
+16
View File
@@ -368,4 +368,20 @@ a.article:hover {
.user-info {
/* display: flex; */
}
.blink {
animation: blinker 0.6s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
.unchecked {
border: 2px solid red !important;
border-start-start-radius: 7px;
border-start-end-radius: 7px;
}
resources/views/pengurusangambar/cawangan.blade.php
+265
View File
@@ -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
resources/views/pengurusangambar/operasi.blade.php
+259
View File
@@ -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
routes/web.php
+2
View File
@@ -666,6 +666,8 @@ Route::group(['middleware' => ['permission:backdate'],'prefix'=>'backdate'], fun
Route::group(['middleware' => ['permission:pengurusangambar'], 'prefix' => 'pengurusangambar'], function () {
Route::get('/marhun', ['as' => 'pengurusangambar.marhun', 'uses' => 'MarhunController@pengurusanGambarMarhun']);
Route::get('/galerimarhun', ['as' => 'pengurusangambar.galerimarhun', 'uses' => 'MarhunController@galeriMarhun']);
Route::get('/listCawangan', ['as' => 'pengurusangambar.listcawangan', 'uses' => 'MarhunController@listCawangan']);
Route::get('/listLelongBid', ['as' => 'pengurusangambar.listlelongbid', 'uses' => 'MarhunController@listLelongBid']);
});
Route::group(['middleware' => ['permission:pengurusanuploaddownload'], 'prefix' => 'pengurusanuploaddownload'], function () {
Route::get('/testupload', ['as' => 'pengurusanuploaddownload.testupload', 'uses' => 'DatabaseController@pengurusanMaxUploadSize']);