2026-02-03 16:17:23 +07:00

114 lines
4.6 KiB
PHP

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ $title ?? '-' }} || Directory RSAB Harkit</title>
<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="{{ ver('/assets/css/styles.min.css') }}" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.24.1/dist/bootstrap-table.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/5.4.149/pdf_viewer.min.css" integrity="sha512-qbvpAGzPFbd9HG4VorZWXYAkAnbwKIxiLinTA1RW8KGJEZqYK04yjvd+Felx2HOeKPDKVLetAqg8RIJqHewaIg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="{{ ver('/assets/libs/jquery/dist/jquery.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.24.1/dist/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/js/all.min.js" integrity="sha512-6BTOlkauINO65nLhXhthZMtepgJSghyimIalb+crKRPhvhmsCdnIuGcVbR5/aQY2A+260iC1OPy1oCdB6pSSwQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<style>
.modal,
.modal-content,
.modal-body,
.message-body {
color-scheme: light;
scrollbar-color: auto;
scrollbar-width: auto;
}
</style>
</head>
<body>
<!-- Body Wrapper -->
<div class="page-wrapper" id="main-wrapper" data-layout="vertical" data-navbarbg="skin6" data-sidebartype="full"
data-sidebar-position="fixed" data-header-position="fixed">
<!-- Sidebar Start -->
@include('layout.partials.sidenav')
<!-- Sidebar End -->
<!-- Main wrapper -->
<div class="body-wrapper">
<!-- Header Start -->
@include('layout.partials.topnav')
<!-- Header End -->
<div class="body-wrapper-inner">
<div class="container-fluid">
@yield('body_main')
<!-- Row 1 -->
@include('layout.partials.footer')
</div>
</div>
</div>
</div>
<script src="{{ ver('/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ ver('/assets/js/sidebarmenu.js') }}"></script>
<script src="{{ ver('/assets/js/app.min.js') }}"></script>
<script type="module">
import * as pdfjsLib from "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/5.4.149/pdf.min.mjs";
pdfjsLib.GlobalWorkerOptions.workerSrc =
"https://cdnjs.cloudflare.com/ajax/libs/pdf.js/5.4.149/pdf.worker.min.mjs";
async function renderPdf(url) {
const pagesEl = document.getElementById("pdfPages");
pagesEl.innerHTML = "Loading...";
const loadingTask = pdfjsLib.getDocument({
url,
withCredentials: true, // penting kalau butuh cookie auth
});
const pdf = await loadingTask.promise;
pagesEl.innerHTML = "";
const scale = 1.2;
for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
const page = await pdf.getPage(pageNum);
const viewport = page.getViewport({ scale });
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.display = "block";
canvas.style.margin = "0 auto 12px auto";
canvas.style.background = "#fff";
canvas.style.boxShadow = "0 1px 4px rgba(0,0,0,.15)";
pagesEl.appendChild(canvas);
await page.render({
canvasContext: context,
viewport
}).promise;
}
}
// contoh pemakaian sesuai kode kamu:
window.openPreview = (idDirectory) => {
const url = `/file-preview/${idDirectory}`; // endpoint Laravel yang return PDF inline
renderPdf(url);
};
</script>
</body>
</html>