fix(surveyor): perbaikan tanda tangan, print out sederhana dan print hasil surveyor
This commit is contained in:
@@ -206,24 +206,21 @@
|
||||
<i class="ki-outline ki-abstract-33"></i> Camera
|
||||
</button>
|
||||
</div>
|
||||
@php
|
||||
$fotoTempat = $forminspeksi['foto_tempat'] ?? null;
|
||||
$fotoSrc = '';
|
||||
|
||||
@if ($forminspeksi)
|
||||
@php
|
||||
$fotoTempat = $forminspeksi['foto_tempat'] ?? null;
|
||||
@endphp
|
||||
if (is_array($fotoTempat)) {
|
||||
$fotoSrc = asset('storage/' . $fotoTempat[0]);
|
||||
} elseif (!empty($fotoTempat)) {
|
||||
$fotoSrc = asset('storage/' . $fotoTempat);
|
||||
}
|
||||
@endphp
|
||||
|
||||
<img id="foto_tempat-preview" src="{{ $fotoSrc ?: asset('images/default-placeholder.png') }}"
|
||||
alt="Foto Tempat" class="mt-2 max-w-full h-auto"
|
||||
style="max-width: 30rem; {{ $fotoSrc ? '' : 'display: none;' }}">
|
||||
|
||||
@if (is_array($fotoTempat) && count($fotoTempat) > 0)
|
||||
<img id="foto_tempat-preview"
|
||||
src="{{ isset($forminspeksi['foto_tempat']) ? asset('storage/' . (is_array($forminspeksi['foto_tempat']) ? $forminspeksi['foto_tempat'][0] : $forminspeksi['foto_tempat'])) : '' }}"
|
||||
alt="Foto Tempat" class="mt-2 max-w-full h-auto"
|
||||
style="{{ isset($forminspeksi['foto_tempat']) ? '' : 'display: none;' }}
|
||||
@else
|
||||
<img id="foto_tempat-preview"
|
||||
src="{{ asset('storage/' . (isset($forminspeksi['foto_tempat']) ? $forminspeksi['foto_tempat'] : '')) }}"
|
||||
alt="Foto Tempat" class="mt-2 max-w-full h-auto"
|
||||
style="{{ isset($forminspeksi['foto_tempat']) ? '' : 'display: none;' }} max-width: 30rem;">
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -60,6 +60,9 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="text-sm text-danger">* Harap Menyimpan tanda tangan terlebih dahulu</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2" style="margin-right: 20px; margin-top: 20px">
|
||||
@@ -67,8 +70,6 @@
|
||||
<i class="ki-filled ki-save-2"></i>
|
||||
<span id="saveButtonText">Save</span>
|
||||
</button>
|
||||
<a href="{{ route('surveyor.print_out_inspeksi', ['permohonan_id' => $permohonan->id, 'dokument_id' => request('dokument'), 'jenis_jaminan_id' => request('jenis_jaminan')]) }}"
|
||||
class="btn btn-info" id="saveButton">
|
||||
<a href="{{ route('surveyor.print_out_inspeksi', ['permohonan_id' => $permohonan->id, 'dokument_id' => request('dokument'), 'jenis_jaminan_id' => request('jenis_jaminan')]) }}"
|
||||
class="btn btn-info" id="saveButton">
|
||||
<i class="ki-filled ki-printer"></i>
|
||||
@@ -78,6 +79,13 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@php
|
||||
use Modules\Usermanagement\Models\User;
|
||||
$cabangUser = User::where('id', $permohonan->user->id)->first();
|
||||
|
||||
// print_r($cabangUser->sign);
|
||||
|
||||
@endphp
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@@ -85,54 +93,91 @@
|
||||
<script type="text/javascript">
|
||||
const datas = @json($forminspeksi ?? '');
|
||||
console.log(datas);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const signaturePads = {};
|
||||
const types = ['penilai', 'cabang', 'debitur', 'kjjp'];
|
||||
|
||||
// Inisialisasi semua signature pad
|
||||
types.forEach(type => {
|
||||
initSignaturePad(type);
|
||||
});
|
||||
types.forEach(type => initSignaturePad(type));
|
||||
|
||||
function initSignaturePad(type) {
|
||||
const canvas = document.getElementById(`signature-pad-${type}`);
|
||||
if (!canvas) return;
|
||||
|
||||
// Set ukuran canvas yang responsif
|
||||
canvas.width = canvas.offsetWidth;
|
||||
canvas.height = canvas.offsetHeight;
|
||||
setCanvasSize(canvas);
|
||||
|
||||
signaturePads[type] = new SignaturePad(canvas, {
|
||||
const signaturePad = new SignaturePad(canvas, {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0)',
|
||||
penColor: 'rgb(0, 0, 0)',
|
||||
minWidth: 0.5,
|
||||
maxWidth: 2.5
|
||||
});
|
||||
signaturePads[type] = signaturePad;
|
||||
|
||||
// Load existing signature
|
||||
loadSignature(type);
|
||||
// Load tanda tangan yang ada
|
||||
if (type === 'penilai' || type === 'cabang') {
|
||||
loadPenilaiAndCabangSignature(type, signaturePad);
|
||||
} else {
|
||||
loadSignature(type, signaturePad);
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
const saveBtn = document.getElementById(`save-${type}`);
|
||||
const clearBtn = document.getElementById(`clear-${type}`);
|
||||
const deleteBtn = document.getElementById(`delete-${type}`);
|
||||
|
||||
if (saveBtn) {
|
||||
saveBtn.addEventListener('click', () => saveSignature(type));
|
||||
}
|
||||
if (clearBtn) {
|
||||
clearBtn.addEventListener('click', () => clearSignature(type));
|
||||
}
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', () => deleteSignature(type));
|
||||
}
|
||||
addEventListeners(type, signaturePad);
|
||||
}
|
||||
|
||||
function saveSignature(type) {
|
||||
const signaturePad = signaturePads[type];
|
||||
function setCanvasSize(canvas) {
|
||||
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
||||
canvas.width = canvas.offsetWidth * ratio;
|
||||
canvas.height = canvas.offsetHeight * ratio;
|
||||
canvas.getContext('2d').scale(ratio, ratio);
|
||||
}
|
||||
|
||||
if (!signaturePad || signaturePad.isEmpty()) {
|
||||
function addEventListeners(type, signaturePad) {
|
||||
document.getElementById(`save-${type}`)?.addEventListener('click', () => saveSignature(type,
|
||||
signaturePad));
|
||||
document.getElementById(`clear-${type}`)?.addEventListener('click', () => clearSignature(
|
||||
signaturePad));
|
||||
document.getElementById(`delete-${type}`)?.addEventListener('click', () => deleteSignature(type,
|
||||
signaturePad));
|
||||
}
|
||||
|
||||
function loadPenilaiAndCabangSignature(type, signaturePad) {
|
||||
const nameInputElement = document.getElementById(`name-${type}`);
|
||||
|
||||
const params = new URLSearchParams({
|
||||
document_id: document.getElementById('dokument_id')?.value,
|
||||
permohonan_id: document.getElementById('permohonan_id')?.value
|
||||
});
|
||||
|
||||
fetch(`{{ url('/surveyor/signatures/${type}') }}?${params}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success && data.data?.signature) {
|
||||
drawSignature(signaturePad, data.data.signature);
|
||||
if (nameInputElement) {
|
||||
nameInputElement.value = data.data.name || '';
|
||||
}
|
||||
} else {
|
||||
const signUrl = type === 'penilai' ?
|
||||
`{{ asset('storage/signatures/' . Auth::user()->id . '/' . Auth::user()->sign) }}` :
|
||||
`{{ asset('storage/signatures/' . $cabangUser->id . '/' . $cabangUser->sign) }}`;
|
||||
|
||||
drawSignature(signaturePad, signUrl);
|
||||
|
||||
const defaultName = type === 'penilai' ?
|
||||
`{{ Auth::user()->name }}` :
|
||||
`{{ $cabangUser->name }}`;
|
||||
if (nameInputElement) {
|
||||
nameInputElement.value = defaultName;
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => console.error(`Error loading ${type} signature:`, error));
|
||||
}
|
||||
|
||||
|
||||
function saveSignature(type, signaturePad) {
|
||||
if (signaturePad.isEmpty() && type !== 'penilai' && type !== 'cabang') {
|
||||
Swal.fire({
|
||||
icon: 'warning',
|
||||
title: 'Peringatan',
|
||||
@@ -141,22 +186,26 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const signatureDataUrl = signaturePad.isEmpty()
|
||||
? (type === 'penilai'
|
||||
? `{{ asset('storage/signatures/' . Auth::user()->id . '/' . Auth::user()->sign) }}`
|
||||
: (type === 'cabang'
|
||||
? `{{ asset('storage/signatures/' . $cabangUser->id . '/' . $cabangUser->sign) }}`
|
||||
: ''))
|
||||
: signaturePad.toDataURL('image/png');
|
||||
|
||||
const data = {
|
||||
signature: signaturePad.toDataURL('image/png'),
|
||||
signature: signatureDataUrl,
|
||||
type: type,
|
||||
name: document.getElementById(`name-${type}`)?.value,
|
||||
document_id: document.getElementById('dokument_id')?.value,
|
||||
permohonan_id: document.getElementById('permohonan_id')?.value
|
||||
};
|
||||
console.log(data);
|
||||
|
||||
|
||||
// Tampilkan loading
|
||||
Swal.fire({
|
||||
title: 'Menyimpan...',
|
||||
allowOutsideClick: false,
|
||||
didOpen: () => {
|
||||
Swal.showLoading();
|
||||
}
|
||||
didOpen: () => Swal.showLoading()
|
||||
});
|
||||
|
||||
fetch(`{{ url('/surveyor/signatures') }}`, {
|
||||
@@ -177,7 +226,6 @@
|
||||
text: 'Tanda tangan berhasil disimpan!',
|
||||
timer: 1500
|
||||
});
|
||||
|
||||
} else {
|
||||
throw new Error(data.message || 'Terjadi kesalahan');
|
||||
}
|
||||
@@ -188,40 +236,41 @@
|
||||
title: 'Error',
|
||||
text: error.message || 'Terjadi kesalahan saat menyimpan tanda tangan'
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function loadSignature(type) {
|
||||
function loadSignature(type, signaturePad) {
|
||||
const nameInputElement = document.getElementById(`name-${type}`);
|
||||
const params = new URLSearchParams({
|
||||
document_id: document.getElementById('dokument_id')?.value,
|
||||
permohonan_id: document.getElementById('permohonan_id')?.value
|
||||
});
|
||||
|
||||
fetch(`{{ url('/surveyor/signatures/${type}?${params}') }}`)
|
||||
fetch(`{{ url('/surveyor/signatures/${type}') }}?${params}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success && data.data?.signature) {
|
||||
const canvas = document.getElementById(`signature-pad-${type}`);
|
||||
if (!canvas) return;
|
||||
|
||||
const signaturePad = signaturePads[type];
|
||||
const image = new Image();
|
||||
|
||||
image.onload = function() {
|
||||
const context = canvas.getContext('2d');
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
context.drawImage(image, 0, 0, canvas.width, canvas.height);
|
||||
};
|
||||
image.src = data.data.signature;
|
||||
drawSignature(signaturePad, data.data.signature);
|
||||
}
|
||||
if (nameInputElement) {
|
||||
nameInputElement.value = data.data?.name || '';
|
||||
}
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading signature:', error);
|
||||
});
|
||||
.catch(error => console.error('Error loading signature:', error));
|
||||
}
|
||||
|
||||
function deleteSignature(type) {
|
||||
function drawSignature(signaturePad, imageUrl) {
|
||||
const image = new Image();
|
||||
image.onload = function() {
|
||||
const ctx = signaturePad.canvas.getContext('2d');
|
||||
ctx.clearRect(0, 0, signaturePad.canvas.width, signaturePad.canvas.height);
|
||||
ctx.drawImage(image, 0, 0, signaturePad.canvas.width, signaturePad.canvas.height);
|
||||
};
|
||||
image.src = imageUrl;
|
||||
}
|
||||
|
||||
function deleteSignature(type, signaturePad) {
|
||||
Swal.fire({
|
||||
title: 'Konfirmasi',
|
||||
text: 'Apakah Anda yakin ingin menghapus tanda tangan ini?',
|
||||
@@ -248,7 +297,7 @@
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
clearSignature(type);
|
||||
clearSignature(signaturePad);
|
||||
Swal.fire({
|
||||
icon: 'success',
|
||||
title: 'Berhasil',
|
||||
@@ -266,26 +315,13 @@
|
||||
text: error.message ||
|
||||
'Terjadi kesalahan saat menghapus tanda tangan'
|
||||
});
|
||||
console.error('Error:', error);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function clearSignature(type) {
|
||||
const signaturePad = signaturePads[type];
|
||||
if (signaturePad) {
|
||||
signaturePad.clear();
|
||||
updateStatus(type, '');
|
||||
}
|
||||
}
|
||||
|
||||
function updateStatus(type, message, status = '') {
|
||||
const statusElement = document.getElementById(`status-${type}`);
|
||||
if (statusElement) {
|
||||
statusElement.textContent = message;
|
||||
statusElement.className = `status-message ${status}`;
|
||||
}
|
||||
function clearSignature(signaturePad) {
|
||||
signaturePad.clear();
|
||||
}
|
||||
|
||||
// Handle window resize untuk canvas responsif
|
||||
@@ -293,22 +329,18 @@
|
||||
types.forEach(type => {
|
||||
const canvas = document.getElementById(`signature-pad-${type}`);
|
||||
if (canvas) {
|
||||
const ratio = Math.max(window.devicePixelRatio || 1, 1);
|
||||
canvas.width = canvas.offsetWidth * ratio;
|
||||
canvas.height = canvas.offsetHeight * ratio;
|
||||
canvas.getContext('2d').scale(ratio, ratio);
|
||||
|
||||
// Reload signature jika ada
|
||||
loadSignature(type);
|
||||
setCanvasSize(canvas);
|
||||
const signaturePad = signaturePads[type];
|
||||
if (type === 'penilai' || type === 'cabang') {
|
||||
loadPenilaiAndCabangSignature(type, signaturePad);
|
||||
} else {
|
||||
loadSignature(type, signaturePad);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function submitData() {
|
||||
showLoadingSwal('Mengirim data ke server...');
|
||||
const form = document.querySelector('form');
|
||||
@@ -399,7 +431,5 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script></script>
|
||||
@include('lpj::surveyor.js.utils')
|
||||
@endpush
|
||||
|
||||
@@ -627,26 +627,43 @@
|
||||
</tr>
|
||||
</table>
|
||||
<table style="width: 100%; border-collapse: collapse; text-align: center;">
|
||||
|
||||
<tr>
|
||||
<!-- PENILAI -->
|
||||
@if (isset($forminspeksi['signature']['penilai']))
|
||||
@if (isset($forminspeksi['signature']['penilai']['image']) && !empty($forminspeksi['signature']['penilai']['image']))
|
||||
@php
|
||||
$imagePath = $forminspeksi['signature']['penilai']['image'];
|
||||
|
||||
$isBase64 = str_starts_with($imagePath, 'data:image');
|
||||
|
||||
if (!$isBase64) {
|
||||
$relativePath = str_replace(url('storage') . '/', '', $imagePath);
|
||||
$absolutePath = storage_path('app/public/' . $relativePath);
|
||||
} else {
|
||||
$absolutePath = $imagePath;
|
||||
}
|
||||
|
||||
@endphp
|
||||
<td style="width: 100px;">
|
||||
<img style="width: 100px;" src="{{ $forminspeksi['signature']['penilai']['image'] }}"
|
||||
alt="Penilai">
|
||||
<img style="width: 100px;" src="{{ $absolutePath }}" alt="">
|
||||
</td>
|
||||
@else
|
||||
<td style="width: 100px;">-</td>
|
||||
@endif
|
||||
|
||||
|
||||
@if (isset($forminspeksi['signature']['cabang']))
|
||||
@php
|
||||
$imagePath = $forminspeksi['signature']['cabang']['image'];
|
||||
|
||||
$isBase64 = str_starts_with($imagePath, 'data:image');
|
||||
|
||||
if (!$isBase64) {
|
||||
$relativePath = str_replace(url('storage') . '/', '', $imagePath);
|
||||
$absolutePath = storage_path('app/public/' . $relativePath);
|
||||
} else {
|
||||
$absolutePath = $imagePath;
|
||||
}
|
||||
|
||||
@endphp
|
||||
<td style="width: 100px;">
|
||||
<img style="width: 100px;" src="{{ $forminspeksi['signature']['cabang']['image'] }}"
|
||||
alt="Cabang">
|
||||
<img style="width: 100px;" src="{{ $absolutePath }}" alt="">
|
||||
</td>
|
||||
@else
|
||||
<td style="width: 100px;">-</td>
|
||||
@endif
|
||||
|
||||
|
||||
@@ -655,8 +672,6 @@
|
||||
<img style="width: 100px;" src="{{ $forminspeksi['signature']['debitur']['image'] }}"
|
||||
alt="Debitur/Perwakilan">
|
||||
</td>
|
||||
@else
|
||||
<td style="width: 100px;">-</td>
|
||||
@endif
|
||||
|
||||
<!-- K.J.P.P -->
|
||||
@@ -665,30 +680,41 @@
|
||||
<img style="width: 100px;" src="{{ $forminspeksi['signature']['kjjp']['image'] }}"
|
||||
alt="KJPP">
|
||||
</td>
|
||||
@else
|
||||
<td style="width: 100px;">-</td>
|
||||
@endif
|
||||
</tr>
|
||||
|
||||
|
||||
<tr>
|
||||
<td style="padding: 4px;">
|
||||
<span>{{ ucwords(strtolower('PENILAI')) }}</span>
|
||||
</td>
|
||||
<td style="padding: 4px;">
|
||||
<span>{{ ucwords(strtolower('CABANG')) }}</span>
|
||||
</td>
|
||||
<td style="padding: 4px;">
|
||||
<span>{{ ucwords(strtolower('DEBITUR/PERWAKILAN')) }}</span>
|
||||
</td>
|
||||
<td style="padding: 4px;">
|
||||
<span>{{ strtoupper('K.J.P.P') }}</span>
|
||||
</td>
|
||||
@if (isset($forminspeksi['signature']['penilai']['name']))
|
||||
<td style=" text-align: center">
|
||||
<span>{{ ucwords(strtolower($forminspeksi['signature']['penilai']['name'])) }}</span>
|
||||
<br />
|
||||
<span>{{ ucwords(strtolower('PENILAI')) }}</span>
|
||||
</td>
|
||||
@endif
|
||||
@if (isset($forminspeksi['signature']['cabang']['name']))
|
||||
<td style=" text-align: center">
|
||||
<span>{{ ucwords(strtolower($forminspeksi['signature']['cabang']['name'])) }}</span>
|
||||
<br />
|
||||
<span>{{ ucwords(strtolower('CABANG')) }}</span>
|
||||
</td>
|
||||
@endif
|
||||
@if (isset($forminspeksi['signature']['debitur']['name']))
|
||||
<td style=" text-align: center">
|
||||
<span>{{ ucwords(strtolower($forminspeksi['signature']['debitur']['name'])) }}</span>
|
||||
<br />
|
||||
<span>{{ ucwords(strtolower('DEBITUR/PERWAKILAN')) }}</span>
|
||||
</td>
|
||||
@endif
|
||||
@if (isset($forminspeksi['signature']['kjjp']['name']))
|
||||
<td style=" text-align: center">
|
||||
<span>{{ ucwords(strtolower($forminspeksi['signature']['kjjp']['name'])) }}</span>
|
||||
<br />
|
||||
<span>{{ strtoupper('K.J.P.P') }}</span>
|
||||
</td>
|
||||
@endif
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -699,12 +725,6 @@
|
||||
<footer id="footer">
|
||||
Cabang : {{ $permohonan->debiture->branch->name ?? '' }}
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const datas = @json($forminspeksi)
|
||||
|
||||
console.log(datas);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user