perbaikan denah bisa banyak
This commit is contained in:
majid
@@ -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
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user