Merge branch 'staging' of https://git.putrakuningan.com/daengdeni/lpj into tender
This commit is contained in:
@@ -166,6 +166,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
|
||||
<div class="bg-white p-4 rounded-lg max-w-3xl max-h-[100vh] overflow-auto">
|
||||
<img id="modalImage" src="" alt="Zoomed Image" class="max-w-full h-auto">
|
||||
<button id="closeModal" class="mt-4 px-4 py-2 bg-red-300 text-gray-800 rounded hover:bg-red-400" onclick="closeImageModal()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@@ -183,6 +190,26 @@
|
||||
});
|
||||
}
|
||||
|
||||
function openImageModal(src) {
|
||||
const modal = document.getElementById('imageModal');
|
||||
const modalImage = document.getElementById('modalImage');
|
||||
modalImage.src = src;
|
||||
modal.classList.remove('hidden');
|
||||
modal.classList.add('flex');
|
||||
}
|
||||
|
||||
function closeImageModal() {
|
||||
const modal = document.getElementById('imageModal');
|
||||
modal.classList.remove('flex');
|
||||
modal.classList.add('hidden');
|
||||
}
|
||||
|
||||
function changeMainPhoto(thumbnail, index) {
|
||||
const mainPhoto = thumbnail.closest('.photo-gallery').querySelector('.main-photo img');
|
||||
mainPhoto.src = thumbnail.src;
|
||||
mainPhoto.alt = thumbnail.alt;
|
||||
}
|
||||
|
||||
function updateMapMarkers(data) {
|
||||
// Clear existing markers
|
||||
markers.forEach(marker => marker.setMap(null));
|
||||
@@ -218,16 +245,134 @@
|
||||
|
||||
// Create info window content
|
||||
const contentString = `
|
||||
<div>
|
||||
<h3>${item.jenis_aset}</h3>
|
||||
<p>Tanggal: ${item.tanggal}</p>
|
||||
<p>Tahun: ${item.tahun}</p>
|
||||
<p>Luas Tanah: ${item.luas_tanah} m²</p>
|
||||
<p>Luas Bangunan: ${item.luas_bangunan} m²</p>
|
||||
<p>Harga: ${window.formatRupiah(item.harga)}</p>
|
||||
<p>Nilai Pasar: ${window.formatRupiah(item.nilai_pasar)}</p>
|
||||
</div>
|
||||
`;
|
||||
<div id='content' style='width: 550px; max-width: 100%;'>
|
||||
<div id='siteNotice'></div>
|
||||
<h2 class='card-title mb-5'>
|
||||
${item.jenis_aset}
|
||||
</h2>
|
||||
<div class="grid gap-3">
|
||||
<div class='flex items-center justify-between flex-wrap gap-1.5'>
|
||||
<div class='flex items-center gap-1.5'>
|
||||
<span class='text-sm font-normal text-gray-900'>
|
||||
Tanggal Penilaian
|
||||
</span>
|
||||
</div>
|
||||
<div class='flex items-center text-sm font-medium text-gray-800 gap-6'>
|
||||
<span class='lg:text-right'>
|
||||
${window.formatTanggalIndonesia(item.tanggal)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-300 border-dashed"></div>
|
||||
<div class='flex items-center justify-between flex-wrap gap-1.5'>
|
||||
<div class='flex items-center gap-1.5'>
|
||||
<span class='text-sm font-normal text-gray-900'>
|
||||
Tahun
|
||||
</span>
|
||||
</div>
|
||||
<div class='flex items-center text-sm font-medium text-gray-800 gap-6'>
|
||||
<span class='lg:text-right'>
|
||||
${item.tahun}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-300 border-dashed"></div>
|
||||
<div class='flex items-center justify-between flex-wrap gap-1.5'>
|
||||
<div class='flex items-center gap-1.5'>
|
||||
<span class='text-sm font-normal text-gray-900'>
|
||||
Luas Tanah
|
||||
</span>
|
||||
</div>
|
||||
<div class='flex items-center text-sm font-medium text-gray-800 gap-6'>
|
||||
<span class='lg:text-right'>
|
||||
${item.luas_tanah} m²
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-300 border-dashed"></div>
|
||||
<div class='flex items-center justify-between flex-wrap gap-1.5'>
|
||||
<div class='flex items-center gap-1.5'>
|
||||
<span class='text-sm font-normal text-gray-900'>
|
||||
Luas Bangunan
|
||||
</span>
|
||||
</div>
|
||||
<div class='flex items-center text-sm font-medium text-gray-800 gap-6'>
|
||||
<span class='lg:text-right'>
|
||||
${item.luas_bangunan} m²
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-300 border-dashed"></div>
|
||||
<div class='flex items-center justify-between flex-wrap gap-1.5'>
|
||||
<div class='flex items-center gap-1.5'>
|
||||
<span class='text-sm font-normal text-gray-900'>
|
||||
Harga
|
||||
</span>
|
||||
</div>
|
||||
<div class='flex items-center text-sm font-medium text-gray-800 gap-6'>
|
||||
<span class='lg:text-right'>
|
||||
${window.formatRupiah(item.harga)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-300 border-dashed"></div>
|
||||
<div class='flex items-center justify-between flex-wrap gap-1.5'>
|
||||
<div class='flex items-center gap-1.5'>
|
||||
<span class='text-sm font-normal text-gray-900'>
|
||||
Nilai Pasar
|
||||
</span>
|
||||
</div>
|
||||
<div class='flex items-center text-sm font-medium text-gray-800 gap-6'>
|
||||
<span class='lg:text-right'>
|
||||
${window.formatRupiah(item.nilai_pasar)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-300 border-dashed"></div>
|
||||
<div class='flex items-start justify-between flex-wrap gap-1.5'>
|
||||
<div class='flex items-start gap-1.5'>
|
||||
<span class='text-sm font-normal text-gray-900'>
|
||||
Location
|
||||
</span>
|
||||
</div>
|
||||
<div class='flex items-center text-sm font-medium text-gray-800 gap-6'>
|
||||
<span class='text-right whitespace-normal break-words'>
|
||||
${item.address.split(' ').reduce((acc, word, index, array) => {
|
||||
if (index > 0 && index % 7 === 0) {
|
||||
acc += '<br>';
|
||||
}
|
||||
acc += word + (index < array.length - 1 ? ' ' : '');
|
||||
return acc;
|
||||
}, '')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
${item.photos && item.photos.length > 0 ? `
|
||||
<div class="photo-gallery mb-5">
|
||||
<div class="main-photo mb-2">
|
||||
<img src="storage/${item.photos[0]}" alt="${item.jenis_aset}"
|
||||
style="width: 100%; height: auto; object-fit: cover; cursor: pointer;"
|
||||
onclick="openImageModal(this.src)">
|
||||
</div>
|
||||
<div class="thumbnail-container flex gap-2 overflow-x-auto">
|
||||
${item.photos.map((photo, index) => `
|
||||
<img src="storage/${photo}" alt="${item.jenis_aset} ${index + 1}"
|
||||
class="thumbnail cursor-pointer"
|
||||
style="width: 60px; height: 60px; object-fit: cover;"
|
||||
onclick="changeMainPhoto(this, ${index})">
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="border-t border-gray-300 border-dashed"></div>
|
||||
<div class='flex justify-end mt-3'>
|
||||
<button onclick="getDirections(${lat}, ${lng})" class='btn btn-sm btn-primary'>
|
||||
Get Directions
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Create info window
|
||||
const infoWindow = new google.maps.InfoWindow({
|
||||
@@ -259,6 +404,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function getDirections(lat, lng) {
|
||||
console.log('Getting directions to:', lat, lng);
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
const origin = position.coords.latitude + ',' + position.coords.longitude;
|
||||
const destination = lat + ',' + lng;
|
||||
const url = `https://www.google.com/maps/dir/?api=1&origin=${origin}&destination=${destination}`;
|
||||
window.open(url, '_blank');
|
||||
},
|
||||
() => {
|
||||
alert('Unable to get your current location. Please enable location services.');
|
||||
}
|
||||
);
|
||||
} else {
|
||||
alert('Geolocation is not supported by your browser.');
|
||||
}
|
||||
}
|
||||
|
||||
function initializeDataTable() {
|
||||
const element = document.querySelector('#bank-data-table');
|
||||
const searchInput = document.getElementById('search');
|
||||
@@ -349,6 +514,7 @@
|
||||
// Reload the table to apply the new filters
|
||||
dataTable.reload();
|
||||
});
|
||||
|
||||
function initializeEverything() {
|
||||
initMap();
|
||||
initializeDataTable();
|
||||
|
||||
Reference in New Issue
Block a user