daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(surveyor/penilai) : perbaikan edit foto, tanda tangan dan report laporan di penilai

Browse Source
This commit is contained in:
majid
2025-03-05 10:17:47 +07:00
parent f1f345707a
commit cc28ace415
7 changed files with 253 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/views/surveyor/components/foto.blade.php
View File

@@ -5,7 +5,7 @@
@endsection
@section('content')
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
{{-- <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" /> --}}
<style>
.dropzone {
border: 2px dashed #3498db;
@@ -265,7 +265,7 @@
@include('lpj::surveyor.js.fotojs')
@include('lpj::surveyor.js.utils')
@push('scripts')
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
{{-- <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script> --}}
<script>
let jsonDataContoh = @json($formFoto);
Dropzone.autoDiscover = false;
@@ -871,5 +871,7 @@
}
});
}
</script>
@endpush

252
resources/views/surveyor/components/inspeksi.blade.php
View File

@@ -80,12 +80,12 @@
</form>
</div>
@php
use Modules\Usermanagement\Models\User;
$cabangUser = User::where('id', $permohonan->user->id)->first();
use Modules\Usermanagement\Models\User;
$cabangUser = User::where('id', $permohonan->user->id)->first();
// print_r($cabangUser->sign);
// print_r($cabangUser->sign);
@endphp
@endphp
@endsection
@push('scripts')
@@ -95,42 +95,122 @@
console.log(datas);
document.addEventListener('DOMContentLoaded', function() {
const signaturePads = {};
const types = ['penilai', 'cabang', 'debitur', 'kjjp'];
const types = ['penilai', 'cabang', 'debitur', 'kjjp'];
// Inisialisasi semua signature pad
types.forEach(type => initSignaturePad(type));
// Initialize all signature pads
types.forEach(type => initSignaturePad(type));
function initSignaturePad(type) {
const canvas = document.getElementById(`signature-pad-${type}`);
if (!canvas) return;
function initSignaturePad(type) {
const canvas = document.getElementById(`signature-pad-${type}`);
if (!canvas) return;
setCanvasSize(canvas);
// Improved canvas sizing with strict boundary control
function resizeCanvas() {
const container = canvas.closest('.signature-pad-container');
const containerWidth = container.clientWidth;
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;
// Set canvas style dimensions
canvas.style.width = '100%';
canvas.style.height = `${containerWidth * 0.5}px`; // 2:1 aspect ratio
// Load tanda tangan yang ada
if (type === 'penilai' || type === 'cabang') {
loadPenilaiAndCabangSignature(type, signaturePad);
} else {
loadSignature(type, signaturePad);
// Set actual canvas dimensions with high DPI support
const ratio = window.devicePixelRatio || 1;
canvas.width = containerWidth * ratio;
canvas.height = (containerWidth * 0.5) * ratio;
// Scale canvas context
const ctx = canvas.getContext('2d');
ctx.scale(ratio, ratio);
// Clear and redraw existing signature if any
if (signaturePads[type] && !signaturePads[type].isEmpty()) {
const signaturePad = signaturePads[type];
const imageData = signaturePad.toData();
signaturePad.clear();
signaturePad.fromData(imageData);
}
}
// Create signature pad with boundary and scaling control
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'rgb(0, 0, 0)',
minWidth: 0.5,
maxWidth: 2.5,
throttle: 16,
dotSize: 2,
// Custom function to control signature drawing
onBegin: (event) => {
const ctx = canvas.getContext('2d');
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
// Ensure drawing stays within canvas
if (
event.clientX < rect.left ||
event.clientX > rect.right ||
event.clientY < rect.top ||
event.clientY > rect.bottom
) {
return false;
}
// Event listeners
addEventListeners(type, signaturePad);
}
});
signaturePads[type] = signaturePad;
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);
}
// Initial resize
resizeCanvas();
// Load existing signature
if (type === 'penilai' || type === 'cabang') {
loadPenilaiAndCabangSignature(type, signaturePad);
} else {
loadSignature(type, signaturePad);
}
// Add event listeners
addEventListeners(type, signaturePad);
// Add resize listener
window.addEventListener('resize', () => {
resizeCanvas();
});
}
function drawSignature(signaturePad, imageUrl) {
const image = new Image();
image.crossOrigin = 'Anonymous';
image.onload = function() {
const ctx = signaturePad.canvas.getContext('2d');
const canvasWidth = signaturePad.canvas.width;
const canvasHeight = signaturePad.canvas.height;
// Clear previous content
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
// Calculate scaling to fit within canvas while maintaining aspect ratio
const scale = Math.min(
canvasWidth / image.width,
canvasHeight / image.height
);
const scaledWidth = image.width * scale;
const scaledHeight = image.height * scale;
// Center the image
const x = (canvasWidth - scaledWidth) / 2;
const y = (canvasHeight - scaledHeight) / 2;
// Draw the scaled and centered image
ctx.drawImage(image, x, y, scaledWidth, scaledHeight);
};
image.onerror = function() {
console.error('Error loading signature image');
};
image.src = imageUrl;
}
function addEventListeners(type, signaturePad) {
document.getElementById(`save-${type}`)?.addEventListener('click', () => saveSignature(type,
@@ -141,6 +221,98 @@
signaturePad));
}
function saveSignature(type, signaturePad) {
// Prevent saving empty signature for debitur and kjjp
if (signaturePad.isEmpty() && type !== 'penilai' && type !== 'cabang') {
Swal.fire({
icon: 'warning',
title: 'Peringatan',
text: 'Harap memberikan tanda tangan terlebih dahulu.'
});
return;
}
// Use high-quality PNG with appropriate scaling
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', 1.0); // Use full quality
const data = {
signature: signatureDataUrl,
type: type,
name: document.getElementById(`name-${type}`)?.value,
document_id: document.getElementById('dokument_id')?.value,
permohonan_id: document.getElementById('permohonan_id')?.value
};
Swal.fire({
title: 'Menyimpan...',
allowOutsideClick: false,
didOpen: () => Swal.showLoading()
});
fetch(`{{ url('/surveyor/signatures') }}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': '{{ csrf_token() }}',
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
Swal.close();
if (data.success) {
Swal.fire({
icon: 'success',
title: 'Berhasil',
text: 'Tanda tangan berhasil disimpan!',
timer: 1500
});
} else {
throw new Error(data.message || 'Terjadi kesalahan');
}
})
.catch(error => {
Swal.fire({
icon: 'error',
title: 'Error',
text: error.message || 'Terjadi kesalahan saat menyimpan tanda tangan'
});
});
}
function drawSignature(signaturePad, imageUrl) {
const image = new Image();
image.crossOrigin = 'Anonymous'; // Handle cross-origin images
image.onload = function() {
const ctx = signaturePad.canvas.getContext('2d');
ctx.clearRect(0, 0, signaturePad.canvas.width, signaturePad.canvas.height);
// Calculate scaling to fit within canvas while maintaining aspect ratio
const scale = Math.min(
signaturePad.canvas.width / image.width,
signaturePad.canvas.height / image.height
);
const scaledWidth = image.width * scale;
const scaledHeight = image.height * scale;
const x = (signaturePad.canvas.width - scaledWidth) / 2;
const y = (signaturePad.canvas.height - scaledHeight) / 2;
ctx.drawImage(image, x, y, scaledWidth, scaledHeight);
};
image.onerror = function() {
console.error('Error loading signature image');
};
image.src = imageUrl;
}
function loadPenilaiAndCabangSignature(type, signaturePad) {
const nameInputElement = document.getElementById(`name-${type}`);
@@ -186,13 +358,13 @@
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 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: signatureDataUrl,
@@ -365,7 +537,7 @@
}).then((response) => {
if (response.isConfirmed) {
// window.location.href =
// '{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
// '{{ route('surveyor.show', ['id' => $permohonan->id]) }}';
}
});
} else {