denah
This commit is contained in:
wardhatul1765
parent
bf0996430a
commit
1071e4e428
|
|
@ -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">
|
<div class="w-full lg:w-96 flex-shrink-0 flex flex-col gap-6 mx-auto relative">
|
||||||
|
|
||||||
<!-- MAP CONTAINER -->
|
<!-- MAP CONTAINER RESPONSIVE -->
|
||||||
<div class="map-container shadow-sm border-2 border-slate-300 select-none font-sans min-h-[300px]"
|
<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">
|
||||||
id="mapContainer">
|
|
||||||
<!-- Background Image Map -->
|
<!-- 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) -->
|
@if ($buku->lokasi_x && $buku->lokasi_y)
|
||||||
<div id="pinContainer"></div>
|
<!-- 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;">
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
|
||||||
@if (!$buku->lokasi_x || !$buku->lokasi_y)
|
<!-- 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 -->
|
<!-- Overlay Not Found -->
|
||||||
<div class="map-overlay-notfound">
|
<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 mb-2 animate-pulse"></i>
|
<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-base">Lokasi Rak Belum Dipetakan</h4>
|
<h4 class="font-bold text-red-600 text-sm sm:text-lg">Lokasi Rak Belum Dipetakan</h4>
|
||||||
<p class="text-xs text-gray-500 mt-1">Silakan hubungi petugas perpustakaan untuk bantuan.</p>
|
<p class="text-xs sm:text-sm text-gray-700 mt-1">Silakan hubungi petugas perpustakaan untuk bantuan.</p>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -419,69 +433,5 @@ class="text-sm font-semibold text-blue-600 hover:text-blue-800 flex items-center
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@push('scripts')
|
@push('scripts')
|
||||||
@php
|
<!-- Skrip lama pembuat pin JS sudah dihapus dan digantikan full Tailwind CSS di HTML -->
|
||||||
$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>
|
|
||||||
@endpush
|
@endpush
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue