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

5
app/Http/Controllers/PenilaiController.php
View File

@@ -255,7 +255,6 @@ class PenilaiController extends Controller
}
public function storePaparan(Request $request, $id)
{
try {
@@ -281,8 +280,8 @@ class PenilaiController extends Controller
$penilai = Penilai::updateOrCreate(
[
'permohonan_id' => $request->permohonan_id,
'dokument_id' => $request->documentId,
'inspeksi_id' => $request->inspeksiId,
'dokument_id' => $request->dokument_id,
'inspeksi_id' => $request->inspeksi_id,
]
);

3
app/Http/Controllers/SurveyorController.php
View File

@@ -3626,9 +3626,6 @@ class SurveyorController extends Controller
// Generate PDF
$pdf = PDF::loadView($templateView, compact('permohonan', 'basicData', 'forminspeksi', 'alamat'));
$pdf = view($templateView, compact('permohonan', 'basicData', 'forminspeksi', 'alamat'));
$pdf->setPaper('A4', 'portrait');
// Tentukan nama file PDF
$namaDebiture = $permohonan->debiture->name . '-' . $permohonan->nomor_registrasi;
$fileName = 'inspeksi-' . $namaDebiture . '-data.pdf';

27
resources/views/component/signature-pad.blade.php
View File

@@ -1,9 +1,34 @@
<style>
.signature-pad-container canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain;
overflow: hidden;
}
.signature-pad-container {
position: relative;
display: flex;
flex-direction: column;
align-items: stretch;
}
.signature-pad {
width: 100%;
height: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
</style>
<div class="signature-pad-container mx-auto border p-4 max-w-md sm:max-w-lg lg:max-w-xl">
<h3 class="signature-title text-lg sm:text-xl font-semibold mb-2">{{ ucfirst($type) }}</h3>
<div class="w-full aspect-w-2 aspect-h-1">
<canvas
id="signature-pad-{{ $type }}"
class="signature-pad w-full h-48 sm:h-56 bg-white border rounded"
class="signature-pad w-full h-full bg-white border rounded"
></canvas>
</div>
<input
type="text"
class="input w-full border p-2 mt-2 rounded"

4
resources/views/penilai/edit.blade.php
View File

@@ -12,13 +12,15 @@
Upload File Paparan
</div>
<div class="flex items-center gap-2">
<a href="{{ route('pembayaran.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
<a href="{{ route('penilai.index') }}" class="btn btn-xs btn-info"><i class="ki-filled ki-exit-left"></i> Back</a>
</div>
</div>
<div class="card-body">
<form action="{{ route('penilai.storePaparan',['id'=> $permohonan->id]) }}" method="POST" class="grid gap-5" enctype="multipart/form-data">
@csrf
<input type="hidden" name="permohonan_id" value="{{ $permohonan->id }}">
<input type="hidden" name="dokument_id" value="{{ request('document_id') }}">
<input type="hidden" name="inspeksi_id" value="{{ request('inspeksi_id') }}">
<div class="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">

6
resources/views/penilai/show.blade.php
View File

@@ -226,7 +226,7 @@
Kertas Kerja
</a>
@endif
<a class="btn btn-primary" onclick="paparan({{ $permohonan->id }})">
<a class="btn btn-primary" onclick="paparan({{ $permohonan->id }}, {{ $dokumen->id }}, {{ $inspeksiId }}, {{ $dokumen->jenis_jaminan_id }})">
Paparan
</a>
@@ -595,7 +595,7 @@
}
function paparan(permohonanId) {
function paparan(permohonanId, documentId, inspeksiId, jaminanId) {
Swal.fire({
title: 'Apakah Kamu yakin ingin melakukan paparan',
icon: 'warning',
@@ -605,7 +605,7 @@
confirmButtonText: 'Yes'
}).then((result) => {
if (result.isConfirmed) {
window.location.href = `/penilai/${permohonanId}/edit`;
window.location.href = `/penilai/${permohonanId}/edit?document_id=${documentId}&inspeksi_id=${inspeksiId}&jaminanId=${jaminanId}`;
}
});
}

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

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

@@ -97,39 +97,119 @@
const signaturePads = {};
const types = ['penilai', 'cabang', 'debitur', 'kjjp'];
// Inisialisasi semua signature pad
// Initialize all signature pads
types.forEach(type => initSignaturePad(type));
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;
// Set canvas style dimensions
canvas.style.width = '100%';
canvas.style.height = `${containerWidth * 0.5}px`; // 2:1 aspect ratio
// 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
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;
}
}
});
signaturePads[type] = signaturePad;
// Load tanda tangan yang ada
// Initial resize
resizeCanvas();
// Load existing signature
if (type === 'penilai' || type === 'cabang') {
loadPenilaiAndCabangSignature(type, signaturePad);
} else {
loadSignature(type, signaturePad);
}
// Event listeners
// Add event listeners
addEventListeners(type, signaturePad);
// Add resize listener
window.addEventListener('resize', () => {
resizeCanvas();
});
}
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);
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) {
@@ -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,