WardhaMIF
/
MIF_E31230887
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

denah

This commit is contained in:
wardhatul1765 2026-05-17 16:53:32 +07:00
parent bf0996430a
commit 1071e4e428
1 changed files with 26 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
resources/views/visitor/katalog/show.blade.php
View File

@ -279,21 +279,35 @@ class="text-blue-600 font-bold text-sm">{{ $buku->kategori->nama_kategori ?? $lo
<div class="w-full lg:w-96 flex-shrink-0 flex flex-col gap-6 mx-auto relative">
<!-- MAP CONTAINER -->
<div class="map-container shadow-sm border-2 border-slate-300 select-none font-sans min-h-[300px]"
id="mapContainer">
<!-- MAP CONTAINER RESPONSIVE -->
<div class="relative inline-block w-full max-w-4xl shadow-sm border-2 border-slate-300 select-none font-sans overflow-hidden rounded-lg">
<!-- Background Image Map -->
<img src="{{ asset('img/img 2.png') }}?v={{ time() }}" alt="Denah Perpustakaan" id="mapImage">
<img src="{{ asset('img/img 2.png') }}?v={{ time() }}" alt="Denah Perpustakaan" class="w-full h-auto block">
<!-- Pin Container (JavaScript akan merender pin di sini) -->
<div id="pinContainer"></div>
@if ($buku->lokasi_x && $buku->lokasi_y)
<!-- Pin Marker (Render via Blade) -->
<div class="absolute -translate-x-1/2 -translate-y-full flex flex-col items-center"
style="top: {{ $buku->lokasi_y }}%; left: {{ $buku->lokasi_x }}%; margin-top: 4px;">
@if (!$buku->lokasi_x || !$buku->lokasi_y)
<!-- Tooltip / Label -->
<div class="bg-blue-700 text-white text-[10px] sm:text-xs font-bold px-2 py-1 rounded shadow-md mb-1 whitespace-nowrap">
{{ $lokasi['rak'] }} — {{ $lokasi['area'] }}
</div>
<!-- Ikon Pin Merah -->
<div class="relative flex flex-col items-center animate-bounce">
<i class="fas fa-map-marker-alt text-red-600 text-3xl sm:text-4xl drop-shadow-md"></i>
</div>
<!-- Bayangan (Shadow) tepat di bawah ujung pin -->
<div class="w-2 h-1 bg-black/40 rounded-full blur-[1px]"></div>
</div>
@else
<!-- Overlay Not Found -->
<div class="map-overlay-notfound">
<i class="fas fa-exclamation-triangle text-red-500 text-3xl mb-2 animate-pulse"></i>
<h4 class="font-bold text-red-600 text-sm sm:text-base">Lokasi Rak Belum Dipetakan</h4>
<p class="text-xs text-gray-500 mt-1">Silakan hubungi petugas perpustakaan untuk bantuan.</p>
<div class="absolute inset-0 flex flex-col items-center justify-center bg-white/70 backdrop-blur-sm z-10 text-center p-4">
<i class="fas fa-exclamation-triangle text-red-500 text-3xl sm:text-4xl mb-2 animate-pulse"></i>
<h4 class="font-bold text-red-600 text-sm sm:text-lg">Lokasi Rak Belum Dipetakan</h4>
<p class="text-xs sm:text-sm text-gray-700 mt-1">Silakan hubungi petugas perpustakaan untuk bantuan.</p>
</div>
@endif
</div>
@ -419,69 +433,5 @@ class="text-sm font-semibold text-blue-600 hover:text-blue-800 flex items-center
@endsection
@push('scripts')
@php
$pinDataJson = [
'x' => $buku->lokasi_x,
'y' => $buku->lokasi_y,
'label' => $lokasi['rak'] . ' — ' . $lokasi['area'],
];
@endphp
<script>
document.addEventListener('DOMContentLoaded', function() {
// Data koordinat dari Laravel
const pinData = @json($pinDataJson);
const container = document.getElementById('pinContainer');
if (!container || !pinData.x || !pinData.y) return;
/**
* Membuat elemen pin pointer dan menambahkannya ke container.
* @param {number} x - Posisi X dalam persentase (0-100)
* @param {number} y - Posisi Y dalam persentase (0-100)
* @param {string} label - Label teks untuk pin
* @param {boolean} isActive - Apakah pin ini aktif (bounce + label visible)
*/
function renderPin(x, y, label, isActive) {
// Wrapper pin
const pin = document.createElement('div');
pin.className = 'map-pin' + (isActive ? ' active' : '');
pin.style.left = x + '%';
pin.style.top = y + '%';
// Ikon pin (circle + tail)
const icon = document.createElement('div');
icon.className = 'map-pin__icon';
const circle = document.createElement('div');
circle.className = 'map-pin__circle';
circle.innerHTML = '<i class="fas fa-map-marker-alt"></i>';
const tail = document.createElement('div');
tail.className = 'map-pin__tail';
icon.appendChild(circle);
icon.appendChild(tail);
pin.appendChild(icon);
// Pulse effect
const pulse = document.createElement('div');
pulse.className = 'map-pin__pulse';
pin.appendChild(pulse);
// Label tooltip
if (label) {
const labelEl = document.createElement('span');
labelEl.className = 'map-pin__label';
labelEl.textContent = label;
pin.appendChild(labelEl);
}
container.appendChild(pin);
return pin;
}
// Render pin utama buku ini
renderPin(pinData.x, pinData.y, pinData.label, true);
});
</script>
<!-- Skrip lama pembuat pin JS sudah dihapus dan digantikan full Tailwind CSS di HTML -->
@endpush