fix(surveyor): perbaikan tanda tangan, print out sederhana dan print hasil surveyor

This commit is contained in:
majid
2025-02-10 23:15:42 +07:00
parent 50367edca4
commit 4ef7c01e29
8 changed files with 1467 additions and 1349 deletions

View File

@@ -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