perbaikan denah bisa banyak

This commit is contained in:
majid
2024-12-31 11:30:35 +07:00
parent 81be786844
commit 345fe30710
3 changed files with 280 additions and 171 deletions

View File

@@ -226,61 +226,73 @@ class SurveyorController extends Controller
public function storeDenah(Request $request)
{
try {
$maxSize = getMaxFileSize('Foto');
$validationRules = [
'luas' => 'required|numeric',
'permohonan_id' => 'required',
'dokument_id' => 'required'
];
$validator = $request->validate([
'foto_denah.*' => 'nullable|file|mimes:jpg,jpeg,png,bmp,gif,webp,pdf',
'nama_denah.*' => 'nullable|string|max:255',
'luas_denah.*' => 'nullable|numeric',
'permohonan_id' => 'required|exists:permohonan,id',
'dokument_id' => 'required'
]);
if ($validator) {
try {
if ($request->hasFile('foto_denah')) {
$maxSize = getMaxFileSize('Foto');
$validationRules['foto_denah'] = 'file|mimes:jpeg,jpg,png,pdf,svg|max:'. $maxSize;
}
$denahs = [];
$validatedData = $request->validate($validationRules);
$inspeksi = Inspeksi::where('permohonan_id', $request->permohonan_id)
->where('dokument_id', $request->dokument_id)
->first();
$formatJsonDenah = [
'luas' => $validatedData['luas'],
];
$existingDenah = $inspeksi ? json_decode($inspeksi->denah_form ?? '[]', true) : [];
$existingDenahs = $existingDenah['denahs'] ?? [];
if ($request->hasFile('foto_denah')) {
$formatJsonDenah['foto_denah'] = $this->uploadFile($request->file('foto_denah'), 'foto_denah');
}
if ($request->has('nama_denah')) {
foreach ($request->nama_denah as $index => $namaDenah) {
$denahItem = [
'nama_denah' => $namaDenah,
'luas_denah' => $request->luas_denah[$index] ?? null
];
if ($request->hasFile('foto_denah') && isset($request->file('foto_denah')[$index])) {
$file = $request->file('foto_denah')[$index];
$denahItem['foto_denah'] = $this->uploadFile($file, 'foto_denah');
} elseif (isset($existingDenahs[$index]['foto_denah'])) {
$denahItem['foto_denah'] = $existingDenahs[$index]['foto_denah'];
}
$inspeksi = Inspeksi::where('permohonan_id', $request->input('permohonan_id'))
->where('dokument_id', $request->input('dokument_id'))
->first();
$denahs[] = $denahItem;
}
}
if ($inspeksi) {
$existingDenah = json_decode($inspeksi->denah_form, true) ?? [];
if (empty($denahs) && !empty($existingDenahs)) {
$denahs = $existingDenahs;
}
$updatedDenah = array_merge($existingDenah, $formatJsonDenah);
$inspeksi->update([
'denah_form' => json_encode($updatedDenah)
$inspeksi = Inspeksi::firstOrNew([
'permohonan_id' => $request->permohonan_id,
'dokument_id' => $request->dokument_id
]);
} else {
Inspeksi::create([
'permohonan_id' => $request->input('permohonan_id'),
'dokument_id' => $request->input('dokument_id'),
'denah_form' => json_encode($formatJsonDenah)
]);
}
return response()->json([
'success' => true,
'message' => 'Data berhasil disimpan',
'data' => $formatJsonDenah
], 200);
} catch (Exception $e) {
return response()->json(['success' => false, 'message' => 'Data gagal disimpan: ' . $e->getMessage()], 500);
// Update denah_form
$updatedDenah = ['denahs' => $denahs];
$inspeksi->denah_form = json_encode($updatedDenah);
$inspeksi->save();
return response()->json([
'success' => true,
'message' => 'Data berhasil disimpan',
'data' => $updatedDenah
], 200);
} catch (\Exception $e) {
\Log::error('Denah Store Error: ' . $e->getMessage());
return response()->json([
'success' => false,
'message' => 'Gagal menyimpan data: ' . $e->getMessage()
], 500);
}
}
}
public function storeFoto(Request $request)
{
$validatedData = $this->validateFotoRequest($request);
@@ -291,7 +303,7 @@ class SurveyorController extends Controller
'foto_lingkungan',
];
$lainnya =[
$lainnya = [
'foto_rute_lainnya' => ['foto_rute_lainnya', 'name_rute_lainnya'],
'foto_lantai_lainnya' => ['foto_lantai_lainnya', 'name_lantai_lainnya']
];

View File

@@ -17,174 +17,290 @@
@include('lpj::assetsku.includenya')
<div class="w-full grid gap-5 lg:gap-7.5 mx-auto">
<div class="card border border-agi-100 min-w-full">
<div class="card border border-agi-100 min-w-full">
<div class="card-header bg-agi-50">
<h3 class="card-title">
Denah
</h3>
<div class="flex items-center gap-2">
<a href="{{ route('surveyor.show', ['id' => request('denah')]) }}?form=denah"
class="btn btn-xs btn-info">
<i class="ki-filled ki-exit-left"></i> Back
</a>
</div>
</div>
<div class="mx-8">
@include('lpj::component.detail-jaminan', ['status' => true])
<div class="card-header bg-agi-50">
<h3 class="card-title">Denah</h3>
<div class="flex items-center gap-2">
<a href="{{ route('surveyor.show', ['id' => request('denah')]) }}?form=denah" class="btn btn-xs btn-info">
<i class="ki-filled ki-exit-left"></i> Back
</a>
</div>
</div>
<div class="mx-8">
@include('lpj::component.detail-jaminan', ['status' => true])
</div>
</div>
<div class="card">
<div class="card-body">
<form id="formDenah" method="POST" class="grid gap-5" enctype="multipart/form-data">
@if (isset($debitur->id))
<input type="hidden" name="id" value="{{ $debitur->id }}">
@method('PUT')
@endif
<form id="formDenah" method="POST" enctype="multipart/form-data" class="w-full">
@csrf
<input type="hidden" value="{{ $permohonan->id }}" name="permohonan_id">
<input type="hidden" name="dokument_id" value="{{ request('dokument') }}">
<div class="mt-2">
<div class=" mx-auto overflow-hidden">
<div class="flex flex-wrap gap-4" style="margin-top: 20px">
<div class="flex w-full items-center justify-center gap-4">
<label class="form-label max-w-56">
<span class="form-label">Upload Denah (Foto/PDF)</span>
</label>
<div class="w-full grid gap-5">
<!-- Preview Container -->
<div id="preview-container">
<!-- Image preview -->
<img id="foto_denah-preview"
src="{{ isset($formDenah['foto_denah']) ? asset('storage/' . old('foto_denah', $formDenah['foto_denah'])) : '' }}"
alt="Gambar foto_denah"
style="{{ isset($formDenah['foto_denah']) && strpos($formDenah['foto_denah'], '.pdf') === false ? 'width: 30rem;' : 'display: none;' }}">
<!-- PDF preview -->
@if (isset($formDenah['foto_denah']) && strpos($formDenah['foto_denah'], '.pdf') !== false)
<div id="pdf-preview" class="pdf-preview">
<embed src="{{ asset('storage/' . $formDenah['foto_denah']) }}"
type="application/pdf" width="100%" height="500px">
<!-- Container untuk daftar denah -->
<!-- Container untuk daftar denah -->
<div id="denah-container">
@if (isset($formDenah['denahs']) && is_array($formDenah['denahs']) && count($formDenah['denahs']) > 0)
@foreach ($formDenah['denahs'] as $index => $denah)
<div class="denah-item grid gap-5 mb-5 border p-4 rounded">
<div class="flex flex-wrap gap-4">
<div class="flex w-full items-baseline flex-wrap lg:flex-nowrap gap-4">
<label class="form-label max-w-56">
<span class="form-label">Upload Denah (Foto/PDF)</span>
</label>
<div class="w-full grid gap-5">
<!-- Preview Container -->
<div class="preview-container-{{ $index }}">
@if (isset($denah['foto_denah']))
@php
$fileExtension = pathinfo(
$denah['foto_denah'],
PATHINFO_EXTENSION,
);
@endphp
@if (in_array($fileExtension, ['jpg', 'jpeg', 'png']))
<img src="{{ asset('storage/' . $denah['foto_denah']) }}"
style="max-width: 30rem;">
@elseif($fileExtension === 'pdf')
<embed src="{{ asset('storage/' . $denah['foto_denah']) }}"
type="application/pdf" width="100%" height="500px">
@endif
@endif
</div>
@endif
</div>
<div class="input-group w-full flex gap-2">
<input type="file"
name="foto_denah" class="file-input file-input-bordered w-full"
accept=".jpg,.jpeg,.png,.pdf" onchange="previewFile(this)">
<div class="input-group w-full flex gap-2">
<input type="file" name="foto_denah[]"
class="file-input file-input-bordered w-full"
data-index="{{ $index }}" accept=".jpg,.jpeg,.png,.pdf"
onchange="previewFile(this)">
</div>
</div>
</div>
</div>
<div class="flex flex-wrap lg:flex-nowrap w-full gap-4">
<div class="w-full">
<div class="flex flex-wrap gap-4">
<div class="flex w-full items-center justify-center gap-4">
<label class="form-label max-w-56">
<span class="form-label">Nama Denah</span>
</label>
<input type="text" name="nama_denah[]" class="input w-full"
value="{{ $denah['nama_denah'] ?? '' }}">
</div>
</div>
</div>
<div class="w-full">
<div class="flex flex-wrap gap-4">
<div class="flex w-full items-center justify-center gap-4">
<label class="form-label max-w-56">
<span class="form-label">Total Luas</span>
</label>
<input type="text" name="luas_denah[]"
class="input w-full number-format"
value="{{ $denah['luas_denah'] ?? '' }}"
onkeyup="formatNumber(this)">
</div>
</div>
</div>
@if ($index > 0)
<div class="flex items-center">
<button type="button" class="btn btn-danger remove-denah">
<i class="ki-filled ki-minus"></i>
</button>
</div>
@endif
</div>
</div>
@endforeach
@else
<!-- Tambahkan satu elemen default jika tidak ada data -->
<div class="denah-item grid gap-5 mb-5 border p-4 rounded">
<!-- Isi dengan elemen default seperti sebelumnya -->
<div class="flex flex-wrap gap-4">
<div class="flex w-full items-baseline flex-wrap lg:flex-nowrap gap-4">
<label class="form-label max-w-56">
<span class="form-label">Upload Denah (Foto/PDF)</span>
</label>
<div class="w-full grid gap-5">
<div class="preview-container-0">
<!-- Preview akan ditampilkan di sini -->
</div>
<div class="input-group w-full flex gap-2">
<input type="file" name="foto_denah[]"
class="file-input file-input-bordered w-full" data-index="0"
accept=".jpg,.jpeg,.png,.pdf" onchange="previewFile(this)">
</div>
</div>
</div>
</div>
<div class="flex flex-wrap lg:flex-nowrap w-full gap-4">
<div class="w-full">
<div class="flex flex-wrap gap-4">
<div class="flex w-full items-center justify-center gap-4">
<label class="form-label max-w-56">
<span class="form-label">Nama Denah</span>
</label>
<input type="text" name="nama_denah[]" class="input w-full">
</div>
</div>
</div>
<div class="w-full">
<div class="flex flex-wrap gap-4">
<div class="flex w-full items-center justify-center gap-4">
<label class="form-label max-w-56">
<span class="form-label">Total Luas</span>
</label>
<input type="text" name="luas_denah[]" class="input w-full number-format"
onkeyup="formatNumber(this)">
</div>
</div>
</div>
</div>
</div>
<em id="error-foto_denah" class="alert text-danger text-sm"></em>
</div>
@endif
</div>
<div class="mt-2">
<div class=""max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">
<div class="flex flex-wrap gap-4">
<div class="flex w-full items-center justify-center gap-4">
<label class="form-label max-w-56">
<span class="form-label">Masukkan total luas tanah</span>
</label>
<input type="text" name="luas" class="input w-full number-format"
value="{{ old('luas', isset($formDenah['luas']) ? $formDenah['luas'] : '') }}">
</div>
</div>
<em id="error-luas" class="alert text-danger text-sm"></em>
</div>
</div>
<div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
<button type="button" class="btn btn-success" id="saveButton" onclick="submitDenah()">
<span id="saveButtonText">Save</span>
</button>
<button class="btn btn-primary" type="button" id="tambahDenah">
Tambah Denah
</button>
</div>
</form>
</div>
</div>
</div>
<div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="bg-white p-4 rounded-lg">
<div class="loader"></div>
<p class="mt-2 text-center">Sedang memproses...</p>
</div>
</div>
@endsection
@push('scripts')
@include('lpj::surveyor.js.utils')
@include('lpj::surveyor.js.utils')
<script>
document.addEventListener('DOMContentLoaded', function() {
const datas = @json($denah);
let denahIndex = 1; // Mulai dari 1 karena sudah ada satu elemen default
document.addEventListener('DOMContentLoaded', function() {
// Format number input
document.querySelectorAll('.number-format').forEach(input => {
input.addEventListener('input', function() {
formatNumber(this);
});
});
});
// Tambah Denah
document.getElementById('tambahDenah').addEventListener('click', function() {
const denahContainer = document.getElementById('denah-container');
const newDenah = createDenahElement(denahIndex);
denahContainer.appendChild(newDenah);
denahIndex++;
});
// Event delegation untuk tombol hapus denah
document.getElementById('denah-container').addEventListener('click', function(e) {
if (e.target.closest('.remove-denah')) {
e.target.closest('.denah-item').remove();
}
});
});
function createDenahElement(index) {
const denahItem = document.createElement('div');
denahItem.className = 'denah-item grid gap-5 mb-5 border p-4 rounded';
denahItem.innerHTML = `
<div class="flex flex-wrap gap-4">
<div class="flex w-full items-baseline flex-wrap lg:flex-nowrap gap-4">
<label class="form-label max-w-56">
<span class="form-label">Upload Denah (Foto/PDF)</span>
</label>
<div class="w-full grid gap-5">
<div class="preview-container-${index}">
<!-- Preview akan ditampilkan di sini -->
</div>
<div class="input-group w-full flex gap-2">
<input type="file" name="foto_denah[]"
class="file-input file-input-bordered w-full"
data-index="${index}"
accept=".jpg,.jpeg,.png,.pdf"
onchange="previewFile(this)">
</div>
</div>
</div>
</div>
<div class="flex flex-wrap lg:flex-nowrap w-full gap-4">
<div class="w-full">
<div class="flex flex-wrap gap-4">
<div class="flex w-full items-center justify-center gap-4">
<label class="form-label max-w-56">
<span class="form-label">Nama Denah</span>
</label>
<input type="text" name="nama_denah[]" class="input w-full">
</div>
</div>
</div>
<div class="w-full">
<div class="flex flex-wrap gap-4">
<div class="flex w-full items-center justify-center gap-4">
<label class="form-label max-w-56">
<span class="form-label">Total Luas</span>
</label>
<input type="text" name="luas_denah[]"
class="input w-full number-format"
onkeyup="formatNumber(this)">
</div>
</div>
</div>
<div class="flex items-center">
<button type="button" class="btn btn-danger remove-denah">
<i class="ki-filled ki-minus"></i>
</button>
</div>
</div>
`;
return denahItem;
}
function previewFile(input) {
const previewContainer = document.getElementById('preview-container');
const imagePreview = document.getElementById('foto_denah-preview');
const index = input.getAttribute('data-index');
const previewContainer = document.querySelector(`.preview-container-${index}`);
const file = input.files[0];
// Hapus preview PDF yang ada (jika ada)
const existingPdfPreview = document.getElementById('pdf-preview');
if (existingPdfPreview) {
existingPdfPreview.remove();
}
// Hapus preview sebelumnya
previewContainer.innerHTML = '';
if (file) {
// Cek tipe file
if (file.type.startsWith('image/')) {
// Jika file adalah gambar
imagePreview.style.display = 'block';
const img = document.createElement('img');
img.style.maxWidth = '30rem';
const reader = new FileReader();
reader.onload = function(e) {
imagePreview.src = e.target.result;
imagePreview.style.width = '30rem';
img.src = e.target.result;
}
reader.readAsDataURL(file);
previewContainer.appendChild(img);
} else if (file.type === 'application/pdf') {
// Jika file adalah PDF
imagePreview.style.display = 'none';
// Buat preview PDF
const pdfPreview = document.createElement('div');
pdfPreview.id = 'pdf-preview';
pdfPreview.className = 'pdf-preview';
const pdfEmbed = document.createElement('embed');
pdfEmbed.src = URL.createObjectURL(file);
pdfEmbed.type = 'application/pdf';
pdfEmbed.width = '100%';
pdfEmbed.height = '500px';
pdfEmbed.className = 'pdf-preview';
pdfPreview.appendChild(pdfEmbed);
previewContainer.appendChild(pdfPreview);
previewContainer.appendChild(pdfEmbed);
}
} else {
// Jika tidak ada file yang dipilih
imagePreview.style.display = 'none';
imagePreview.src = '';
}
}
function submitDenah() {
showLoadingSwal('Mengirim data ke server...');
@@ -222,7 +338,6 @@
confirmButtonText: 'OK'
});
}
console.log(response);
},
error: function(xhr, status, error) {
let errors = xhr.responseJSON?.errors;
@@ -232,18 +347,10 @@
$(`#error-${key}`).text(value[0]);
});
}
console.error('Terjadi error:', error); // Menampilkan pesan error di konsol
console.log('Status:', status);
console.log('Response:', xhr.responseText);
console.log(errors);
hideLoadingSwal();
toastrErrorBuild(error);
},
});
}
</script>
@include('lpj::surveyor.js.utils')
@endpush

View File

@@ -63,17 +63,7 @@
function previewImage(input, previewId) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#' + previewId).attr('src', e.target.result).show();
}
reader.readAsDataURL(input.files[0]);
} else {
$('#' + previewId).hide();
}
}
function addClonableItem(containerId, itemClass) {
const container = document.getElementById(containerId);