perbaikan laporan
This commit is contained in:
majid
@@ -1,132 +1,109 @@
|
||||
@extends('layouts.main')
|
||||
|
||||
@section('content')
|
||||
<div class="card w-full bg-white rounded-lg shadow-md h-100vh">
|
||||
<div class="card-header flex justify-between items-center">
|
||||
<h3 class="card-title uppercase">
|
||||
Laporan
|
||||
</h3>
|
||||
<a href="{{ url()->previous() }}" class="btn btn-xs btn-info flex items-center">
|
||||
<i class="ki-filled ki-exit-left"></i> Back
|
||||
<div class="card w-full bg-white rounded-lg shadow-md h-100vh">
|
||||
<div class="card-header flex justify-between items-center">
|
||||
<h3 class="card-title uppercase">Laporan</h3>
|
||||
<a href="{{ url()->previous() }}" class="btn btn-xs btn-info flex items-center">
|
||||
<i class="ki-filled ki-exit-left"></i> Back
|
||||
</a>
|
||||
</div>
|
||||
@php
|
||||
$inspeksiId = null;
|
||||
$documentId = null;
|
||||
$jenisJaminanId = null;
|
||||
|
||||
foreach ($permohonan->debiture->documents as $item) {
|
||||
if (!empty($item->inspeksi)) {
|
||||
$inspeksiId = $item->inspeksi[0]->id;
|
||||
}
|
||||
$documentId = $item->id;
|
||||
$jenisJaminanId = $item->jenis_jaminan_id;
|
||||
}
|
||||
@endphp
|
||||
<div class="card-body relative flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
|
||||
<!-- Loading Spinner -->
|
||||
<div id="loading" class="absolute inset-0 flex items-center justify-center bg-opacity-50">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
|
||||
<div id="pdf-container" class="mt-4" style="width: 100%; height: 800px; border: 1px solid #ccc; margin: 10px;"></div>
|
||||
|
||||
<div class="card-footer flex justify-end">
|
||||
<a href="{{ route('penilai.print-out') }}?permohonanId={{ $permohonan->id }}&documentId={{ $documentId }}&inspeksiId={{ $inspeksiId }}&jaminanId={{ $jenisJaminanId }}&statusLpj=0" class="btn btn-primary">
|
||||
<i class="ki-filled ki-printer"></i> Print
|
||||
</a>
|
||||
</div>
|
||||
@php
|
||||
$inspeksiId = null;
|
||||
$documentId = null;
|
||||
$jenisJaminanId = null;
|
||||
|
||||
foreach ($permohonan->debiture->documents as $item) {
|
||||
if (!empty($item->inspeksi)) {
|
||||
$inspeksiId = $item->inspeksi[0]->id; // Asumsi mengambil inspeksi pertama
|
||||
}
|
||||
$documentId = $item->id;
|
||||
$jenisJaminanId = $item->jenis_jaminan_id;
|
||||
}
|
||||
@endphp
|
||||
<div class="card-body relative flex flex-col h-[calc(100vh-4rem)] overflow-hidden">
|
||||
<!-- Loading Spinner -->
|
||||
<div id="loading" class="absolute inset-0 flex items-center justify-center bg-gray-100 bg-opacity-50">
|
||||
<div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
|
||||
<p class="text-gray-600 mt-2">Loading...</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between mt-4">
|
||||
<button id="zoomIn" class="btn btn-outline btn-primary">
|
||||
<i class="ki-filled ki-plus"></i>
|
||||
</button>
|
||||
<button id="zoomOut" class="btn btn-outline btn-warning">
|
||||
<i class="ki-filled ki-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="iframe-container" style="width: 100%; border: 1px solid #ccc; height: 800px; overflow: hidden; margin: 10px;">
|
||||
<iframe id="reportIframe" width="100%" height="100%" style="border: none; transform-origin: top left;">
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
<div class="card-footer flex justify-end">
|
||||
<a href="{{ route('penilai.print-out') }}?permohonanId={{ $permohonan->id }}&documentId={{ $documentId }}&inspeksiId={{ $inspeksiId }}&jaminanId={{ $jenisJaminanId }}&statusLpj=0" class="btn btn-primary">
|
||||
<i class="ki-filled ki-printer"></i> Print
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.3.0/pdfobject.min.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const iframe = document.getElementById('reportIframe');
|
||||
const loading = document.getElementById('loading');
|
||||
const zoomInButton = document.getElementById('zoomIn');
|
||||
const zoomOutButton = document.getElementById('zoomOut');
|
||||
const loading = document.getElementById('loading');
|
||||
const pdfContainer = document.getElementById('pdf-container');
|
||||
|
||||
// Initial zoom level
|
||||
let zoomLevel = 1;
|
||||
const url = `{{ route('penilai.print-out') }}?permohonanId={{ $permohonan->id }}&documentId={{ $documentId }}&jaminanId={{ $jenisJaminanId }}&statusLpj=true`;
|
||||
const pdfUrl = `{{ route('penilai.print-out') }}?permohonanId={{ $permohonan->id }}&documentId={{ $documentId }}&jaminanId={{ $jenisJaminanId }}&statusLpj=true`;
|
||||
|
||||
// Display the loading spinner
|
||||
loading.style.display = 'flex';
|
||||
// Display the loading spinner
|
||||
loading.style.display = 'flex';
|
||||
|
||||
// Load the content into the iframe
|
||||
fetch(url)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok ' + response.statusText);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(html => {
|
||||
// Load the content into the iframe
|
||||
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||||
iframeDoc.open();
|
||||
iframeDoc.write(html);
|
||||
iframeDoc.close();
|
||||
loading.style.display = 'none';
|
||||
iframe.style.display = 'block';
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Problem with fetch operation:', error);
|
||||
loading.innerHTML = `<p class="text-red-500">Failed to load the report. Please try again later.</p>`;
|
||||
});
|
||||
|
||||
// Zoom in function
|
||||
zoomInButton.addEventListener('click', function () {
|
||||
zoomLevel += 0.1; // Increase zoom level
|
||||
iframe.style.transform = `scale(${zoomLevel})`;
|
||||
iframe.style.transformOrigin = 'top left';
|
||||
iframe.style.width = `${100 / zoomLevel}%`;
|
||||
iframe.style.height = `${800 / zoomLevel}px`;
|
||||
});
|
||||
|
||||
// Zoom out function
|
||||
zoomOutButton.addEventListener('click', function () {
|
||||
zoomLevel = Math.max(0.5, zoomLevel - 0.1);
|
||||
iframe.style.transform = `scale(${zoomLevel})`;
|
||||
iframe.style.transformOrigin = 'top left';
|
||||
iframe.style.width = `${100 / zoomLevel}%`;
|
||||
iframe.style.height = `${800 / zoomLevel}px`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
// Fetch the PDF URL to ensure it loads properly
|
||||
fetch(pdfUrl)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch the PDF file.');
|
||||
}
|
||||
return response.blob();
|
||||
})
|
||||
.then(blob => {
|
||||
const url = URL.createObjectURL(blob);
|
||||
// Embed PDF using PDFObject
|
||||
PDFObject.embed(url, pdfContainer, {
|
||||
height: "100%",
|
||||
fallbackLink: `<p class="text-red-500">It appears you don't have a PDF plugin for this browser. You can <a href="${url}">click here to download the PDF file.</a></p>`
|
||||
});
|
||||
loading.style.display = 'none';
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
loading.innerHTML = `<p class="text-red-500">Failed to load the report. Please try again later.</p>`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Loader styles */
|
||||
.loader {
|
||||
border-color: #f3f3f3;
|
||||
border-top-color: #3498db;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Full height for iframe */
|
||||
.card-body {
|
||||
position: relative;
|
||||
}
|
||||
.loader {
|
||||
width: 100px;
|
||||
display: grid;
|
||||
background: radial-gradient(farthest-side, #35C1D0 98%, #0000) center/30px 100%
|
||||
no-repeat;
|
||||
--mask:
|
||||
radial-gradient(12px at left 15px top 50%, #0000 95%, #000),
|
||||
radial-gradient(12px at center, #0000 95%, #000),
|
||||
radial-gradient(12px at right 15px top 50%, #0000 95%, #000);
|
||||
-webkit-mask: var(--mask);
|
||||
mask: var(--mask);
|
||||
-webkit-mask-composite: source-in;
|
||||
mask-composite: intersect;
|
||||
animation: l2 1s infinite alternate;
|
||||
}
|
||||
.loader:before,
|
||||
.loader:after {
|
||||
content: "";
|
||||
grid-area: 1/1;
|
||||
height: 30px;
|
||||
aspect-ratio: 1;
|
||||
background: #35C1D0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.loader:after {
|
||||
margin-left: auto;
|
||||
}
|
||||
@keyframes l2 {
|
||||
to {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user