cindy
961 lines
42 KiB
JavaScript
961 lines
42 KiB
JavaScript
/* ============================================================
|
|
markers.js — Draggable markers + inside/outside radius colors
|
|
============================================================ */
|
|
'use strict';
|
|
|
|
// ====================================================================
|
|
// UTILITY FUNCTIONS
|
|
// ====================================================================
|
|
function escapeHtml(str) {
|
|
if (str === null || str === undefined) return '';
|
|
return String(str)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
function truncate(str, n = 28) {
|
|
if (!str) return '';
|
|
return str.length > n ? str.slice(0, n) + '…' : str;
|
|
}
|
|
|
|
function formatRp(n) {
|
|
if (!n) return 'Rp 0';
|
|
return 'Rp ' + Number(n).toLocaleString('id-ID');
|
|
}
|
|
|
|
function formatDate(str) {
|
|
if (!str) return '—';
|
|
return new Date(str).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' });
|
|
}
|
|
|
|
function educationLabel(edu) {
|
|
const labels = {
|
|
'tidak_sekolah': 'Tidak Sekolah',
|
|
'sd': 'SD',
|
|
'smp': 'SMP',
|
|
'sma': 'SMA',
|
|
'diploma': 'Diploma',
|
|
'sarjana': 'Sarjana',
|
|
'pascasarjana': 'Pascasarjana'
|
|
};
|
|
return labels[edu] || edu;
|
|
}
|
|
|
|
const radiusCircles = {};
|
|
let dragInProgress = false;
|
|
|
|
// ====================================================================
|
|
// CENTERS
|
|
// ====================================================================
|
|
function renderCenters() {
|
|
layerCenters.clearLayers();
|
|
Object.values(radiusCircles).forEach(c => { if (MAP.hasLayer(c)) MAP.removeLayer(c); });
|
|
|
|
const filtered = State.centers.filter(c => {
|
|
if (State.activeFilter === 'houses') return false;
|
|
if (State.searchQuery) {
|
|
const q = State.searchQuery.toLowerCase();
|
|
return c.name.toLowerCase().includes(q) || (c.address || '').toLowerCase().includes(q);
|
|
}
|
|
return true;
|
|
});
|
|
|
|
filtered.forEach(center => {
|
|
if (!center._marker) {
|
|
addCenterMarker(center);
|
|
} else {
|
|
layerCenters.addLayer(center._marker);
|
|
if (radiusCircles[center.id]) {
|
|
radiusCircles[center.id].addTo(MAP);
|
|
}
|
|
}
|
|
});
|
|
updateLayerCounts();
|
|
renderCenterList();
|
|
}
|
|
|
|
function addCenterMarker(center) {
|
|
const color = CENTER_COLORS[center.worship_type] || '#3a56d4';
|
|
const icon = CENTER_ICONS[center.worship_type] || 'fa-place-of-worship';
|
|
|
|
const circle = L.circle([center.latitude, center.longitude], {
|
|
radius: center.radius,
|
|
color: color,
|
|
fillColor: color,
|
|
fillOpacity: 0.07,
|
|
weight: 1.5,
|
|
dashArray: '4 3',
|
|
});
|
|
circle.addTo(MAP);
|
|
radiusCircles[center.id] = circle;
|
|
|
|
const marker = L.marker([center.latitude, center.longitude], {
|
|
icon: L.divIcon({
|
|
html: `<div class="custom-marker-center" style="background:${color};"><i class="fas ${icon}"></i></div>`,
|
|
iconSize: [32, 32],
|
|
iconAnchor: [16, 32],
|
|
popupAnchor: [0, -34],
|
|
className: '',
|
|
}),
|
|
title: center.name,
|
|
draggable: true,
|
|
});
|
|
|
|
marker.on('dragstart', function() { marker.closePopup(); marker.setZIndexOffset(1000); });
|
|
marker.on('drag', function(e) { if (radiusCircles[center.id]) radiusCircles[center.id].setLatLng(marker.getLatLng()); });
|
|
marker.on('dragend', async function(e) {
|
|
marker.setZIndexOffset(0);
|
|
const pos = marker.getLatLng();
|
|
center.latitude = pos.lat;
|
|
center.longitude = pos.lng;
|
|
if (radiusCircles[center.id]) radiusCircles[center.id].setLatLng(pos);
|
|
try {
|
|
const r = await ApiCenters.patch(center.id, { latitude: pos.lat, longitude: pos.lng });
|
|
if (r.ok && r.data?.success) {
|
|
showToast('Posisi tempat ibadah diperbarui.', 'success');
|
|
updateAllHouseColors();
|
|
recountCenterHouseholds();
|
|
loadStats();
|
|
renderCenterList();
|
|
renderHouseList();
|
|
updateLayerCounts();
|
|
} else showToast('Gagal menyimpan posisi.', 'error');
|
|
} catch (err) { showToast('Gagal menyimpan posisi.', 'error'); }
|
|
showCenterPopup(marker, center);
|
|
});
|
|
marker.on('click', () => showCenterPopup(marker, center));
|
|
layerCenters.addLayer(marker);
|
|
center._marker = marker;
|
|
}
|
|
|
|
function showCenterPopup(marker, center) {
|
|
const color = CENTER_COLORS[center.worship_type] || '#3a56d4';
|
|
const icon = CENTER_ICONS[center.worship_type] || 'fa-place-of-worship';
|
|
const label = CENTER_LABELS[center.worship_type] || center.worship_type;
|
|
|
|
// Hitung ulang jumlah rumah saat popup dibuka (memastikan data fresh)
|
|
let count = 0;
|
|
let nearbyHouses = [];
|
|
|
|
State.houses.forEach(house => {
|
|
if (house.is_active === false) return;
|
|
const distance = haversineMeters(
|
|
house.latitude, house.longitude,
|
|
center.latitude, center.longitude
|
|
);
|
|
if (distance <= center.radius) {
|
|
count++;
|
|
nearbyHouses.push({
|
|
id: house.id,
|
|
name: house.head_name,
|
|
distance: Math.round(distance)
|
|
});
|
|
}
|
|
});
|
|
|
|
// Update center household_count jika berbeda
|
|
if (center.household_count !== count) {
|
|
center.household_count = count;
|
|
renderCenterList(); // Refresh sidebar jika ada perubahan
|
|
}
|
|
|
|
// Buat HTML daftar rumah dalam radius
|
|
let housesListHtml = '';
|
|
if (nearbyHouses.length > 0) {
|
|
const displayHouses = nearbyHouses.slice(0, 5);
|
|
housesListHtml = `
|
|
<div class="popup-section" style="margin-top: 6px;">
|
|
<div class="popup-section-label"><i class="fas fa-home"></i> Rumah dalam Radius (${nearbyHouses.length})</div>
|
|
<div style="max-height: 150px; overflow-y: auto;">
|
|
${displayHouses.map(h => `
|
|
<div class="popup-row" style="font-size: 10.5px; cursor: pointer;" onclick="flyToAndOpenHouse(${h.id}, ${center.latitude}, ${center.longitude})">
|
|
<i class="fas fa-home" style="font-size: 8px;"></i>
|
|
<span><strong>${escapeHtml(h.name)}</strong> · ${h.distance}m</span>
|
|
</div>
|
|
`).join('')}
|
|
${nearbyHouses.length > 5 ? `<div class="popup-row" style="font-size: 9px; color: var(--text-muted);">+${nearbyHouses.length - 5} rumah lainnya</div>` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const popup = L.popup({ maxWidth: 320, closeButton: true })
|
|
.setLatLng(marker.getLatLng())
|
|
.setContent(`
|
|
<div class="popup-info">
|
|
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #edf0f6;">
|
|
<div style="width:34px;height:34px;border-radius:9px;background:${color};display:flex;align-items:center;justify-content:center;color:white;font-size:14px;flex-shrink:0;box-shadow:0 2px 8px ${color}44;">
|
|
<i class="fas ${icon}"></i>
|
|
</div>
|
|
<div>
|
|
<div class="popup-name" style="margin-bottom:0;">${escapeHtml(center.name)}</div>
|
|
<div style="font-size:10px;color:var(--text-muted);">${label} · <em style="font-size:9px;">seret untuk pindahkan</em></div>
|
|
</div>
|
|
</div>
|
|
<div class="popup-row"><i class="fas fa-map-marker-alt"></i><span>${truncate(center.address || '—', 42)}</span></div>
|
|
|
|
<!-- Jumlah Rumah dalam Radius (Live) -->
|
|
<div class="popup-section" style="background: ${count > 0 ? color + '10' : 'var(--surface-2)'}">
|
|
<div class="popup-section-label"><i class="fas fa-home"></i> Cakupan Layanan</div>
|
|
<div class="popup-row" style="margin-bottom: 0;">
|
|
<i class="fas fa-chart-simple"></i>
|
|
<span><strong style="font-size: 16px; color: ${color};">${count}</strong> rumah dalam radius ${center.radius}m</span>
|
|
</div>
|
|
</div>
|
|
|
|
${housesListHtml}
|
|
|
|
<div class="popup-section">
|
|
<div class="popup-section-label"><i class="fas fa-dot-circle"></i> Ubah Radius: <strong id="rcVal_${center.id}" style="color:${color};">${center.radius}m</strong></div>
|
|
<div style="display:flex;align-items:center;gap:8px;">
|
|
<input type="range" min="50" max="5000" step="10" value="${center.radius}"
|
|
oninput="liveUpdateRadius(${center.id}, this.value)"
|
|
onchange="saveRadius(${center.id}, this.value)"
|
|
style="flex:1;height:4px;-webkit-appearance:none;background:#e2e6ef;border-radius:2px;outline:none;border:none;padding:0;accent-color:${color};">
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;font-size:9px;color:#9ba4b5;margin-top:3px;">
|
|
<span>50m</span><span>2.5km</span><span>5km</span>
|
|
</div>
|
|
</div>
|
|
<div class="popup-actions">
|
|
<button class="btn btn-primary btn-sm" onclick="editCenter(${center.id})"><i class="fas fa-pen"></i> Edit</button>
|
|
<button class="btn btn-secondary btn-sm" onclick="showCoverageHouseholds(${center.id})"><i class="fas fa-eye"></i> Lihat Semua</button>
|
|
${window.canDelete ? `<button class="btn btn-danger btn-sm" onclick="deleteCenter(${center.id})" title="Hapus"><i class="fas fa-trash"></i></button>` : ''}
|
|
</div>
|
|
</div>`);
|
|
|
|
marker.unbindPopup();
|
|
marker.bindPopup(popup).openPopup();
|
|
}
|
|
|
|
// Fungsi helper untuk terbang ke rumah dan membuka popupnya
|
|
function flyToAndOpenHouse(houseId, centerLat, centerLng) {
|
|
const house = State.houses.find(h => h.id == houseId);
|
|
if (house) {
|
|
flyTo(house.latitude, house.longitude, 17);
|
|
setTimeout(() => {
|
|
if (house._marker) {
|
|
house._marker.openPopup();
|
|
}
|
|
}, 800);
|
|
}
|
|
}
|
|
window.flyToAndOpenHouse = flyToAndOpenHouse;
|
|
|
|
function liveUpdateRadius(centerId, value) {
|
|
const valSpan = document.getElementById('rcVal_' + centerId);
|
|
if (valSpan) valSpan.textContent = value + 'm';
|
|
|
|
if (radiusCircles[centerId]) {
|
|
radiusCircles[centerId].setRadius(parseInt(value));
|
|
}
|
|
|
|
// Live update: Hitung ulang jumlah rumah saat slider digeser
|
|
const center = State.centers.find(c => c.id == centerId);
|
|
if (center) {
|
|
let tempCount = 0;
|
|
State.houses.forEach(house => {
|
|
if (house.is_active === false) return;
|
|
const distance = haversineMeters(
|
|
house.latitude, house.longitude,
|
|
center.latitude, center.longitude
|
|
);
|
|
if (distance <= parseInt(value)) {
|
|
tempCount++;
|
|
}
|
|
});
|
|
|
|
// Update tampilan jumlah rumah di popup secara live
|
|
const popupContent = document.querySelector('.leaflet-popup-content');
|
|
if (popupContent && center._marker && center._marker.isPopupOpen()) {
|
|
const countElement = popupContent.querySelector('.popup-section:first-child .popup-row strong');
|
|
if (countElement) {
|
|
countElement.textContent = tempCount;
|
|
countElement.style.color = '#d63230';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
async function saveRadius(centerId, value) {
|
|
try {
|
|
const r = await ApiCenters.patch(centerId, { radius: parseInt(value) });
|
|
if (r.ok && r.data?.success) {
|
|
const center = State.centers.find(c => c.id == centerId);
|
|
if (center) {
|
|
center.radius = parseInt(value);
|
|
// Perbarui lingkaran di peta
|
|
if (radiusCircles[centerId]) {
|
|
radiusCircles[centerId].setRadius(parseInt(value));
|
|
}
|
|
}
|
|
showToast('Radius diperbarui.', 'success');
|
|
|
|
// Update semua data yang terpengaruh
|
|
updateAllHouseColors();
|
|
recountCenterHouseholds(); // Hitung ulang jumlah rumah per center
|
|
renderHouseList(); // Refresh daftar rumah
|
|
renderCenterList(); // Refresh daftar center dengan count baru
|
|
updateLayerCounts(); // Update badge layer
|
|
loadStats(); // Update statistik dashboard
|
|
|
|
// Refresh popup center jika terbuka
|
|
if (center._marker && center._marker.isPopupOpen()) {
|
|
showCenterPopup(center._marker, center);
|
|
}
|
|
} else showToast('Gagal menyimpan radius.', 'error');
|
|
} catch (err) {
|
|
showToast('Gagal menyimpan radius.', 'error');
|
|
}
|
|
}
|
|
|
|
async function showCoverageHouseholds(centerId) {
|
|
showLoading(true);
|
|
const r = await ApiCenters.coverage(centerId);
|
|
showLoading(false);
|
|
if (!r.ok) { showToast('Gagal memuat data.', 'error'); return; }
|
|
const { center, households, count } = r.data.data;
|
|
if (!households.length) { showToast(`Tidak ada rumah dalam radius ${center.radius}m.`, 'warning'); return; }
|
|
const tempLayer = L.layerGroup();
|
|
households.forEach(h => {
|
|
L.circleMarker([h.latitude, h.longitude], {
|
|
radius: 10,
|
|
color: '#3a56d4',
|
|
fillColor: '#3a56d4',
|
|
fillOpacity: 0.25,
|
|
weight: 2,
|
|
}).addTo(tempLayer).bindTooltip(h.head_name, { permanent: false });
|
|
});
|
|
tempLayer.addTo(MAP);
|
|
setTimeout(() => MAP.removeLayer(tempLayer), 10000);
|
|
flyTo(center.latitude, center.longitude, 15);
|
|
showToast(`${count} rumah dalam jangkauan ${center.name}.`, 'success');
|
|
}
|
|
|
|
// ====================================================================
|
|
// HOUSES
|
|
// ====================================================================
|
|
function renderHouses() {
|
|
layerHouses.clearLayers();
|
|
|
|
const filtered = State.houses.filter(h => {
|
|
if (State.activeFilter === 'centers') return false;
|
|
if (State.povertyFilter && h.poverty_status !== State.povertyFilter) return false;
|
|
if (State.aidFilter && h.aid_status !== State.aidFilter) return false;
|
|
if (State.conditionFilter && h.house_condition !== State.conditionFilter) return false;
|
|
if (State.searchQuery) {
|
|
const q = State.searchQuery.toLowerCase();
|
|
if (!h.head_name.toLowerCase().includes(q) &&
|
|
!(h.full_address || h.address || '').toLowerCase().includes(q) &&
|
|
!(h.head_nik || '').includes(q)) return false;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
filtered.forEach(h => {
|
|
if (!h._marker) {
|
|
addHouseMarker(h);
|
|
} else {
|
|
// Update color if radius status changed
|
|
const newColor = getHouseMarkerColor(h.latitude, h.longitude);
|
|
if (h._marker._houseColor !== newColor) {
|
|
h._marker._houseColor = newColor;
|
|
h._marker.setIcon(L.divIcon({
|
|
html: `<div class="custom-marker-house" style="background:${newColor};"><i class="fas fa-home"></i></div>`,
|
|
iconSize: [26, 26],
|
|
iconAnchor: [13, 26],
|
|
popupAnchor: [0, -28],
|
|
className: '',
|
|
}));
|
|
}
|
|
layerHouses.addLayer(h._marker);
|
|
}
|
|
});
|
|
updateLayerCounts();
|
|
renderHouseList(filtered);
|
|
}
|
|
|
|
function isHouseInsideAnyRadius(lat, lng) {
|
|
for (const center of State.centers) {
|
|
if (!center.is_active) continue;
|
|
const distance = haversineMeters(lat, lng, center.latitude, center.longitude);
|
|
if (distance <= center.radius) return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function haversineMeters(lat1, lng1, lat2, lng2) {
|
|
const R = 6371000;
|
|
const dLat = (lat2 - lat1) * Math.PI / 180;
|
|
const dLng = (lng2 - lng1) * Math.PI / 180;
|
|
const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
|
|
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
|
|
Math.sin(dLng / 2) * Math.sin(dLng / 2);
|
|
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
return R * c;
|
|
}
|
|
|
|
function recountCenterHouseholds() {
|
|
console.log('Recounting center households...');
|
|
|
|
State.centers.forEach(center => {
|
|
let count = 0;
|
|
let householdsInRadius = [];
|
|
|
|
State.houses.forEach(house => {
|
|
if (house.is_active === false) return;
|
|
|
|
const distance = haversineMeters(
|
|
house.latitude, house.longitude,
|
|
center.latitude, center.longitude
|
|
);
|
|
|
|
if (distance <= center.radius) {
|
|
count++;
|
|
householdsInRadius.push({
|
|
id: house.id,
|
|
name: house.head_name,
|
|
distance: Math.round(distance)
|
|
});
|
|
}
|
|
});
|
|
|
|
center.household_count = count;
|
|
center.households_in_radius = householdsInRadius.slice(0, 10); // Simpan 10 terdekat
|
|
});
|
|
}
|
|
|
|
function getHouseMarkerColor(lat, lng) {
|
|
return isHouseInsideAnyRadius(lat, lng) ? '#d63230' : '#0b9e73';
|
|
}
|
|
|
|
function updateAllHouseColors() {
|
|
State.houses.forEach(h => {
|
|
if (h._marker) {
|
|
const insideRadius = isHouseInsideAnyRadius(h.latitude, h.longitude);
|
|
const newColor = insideRadius ? '#d63230' : '#0b9e73';
|
|
if (h._marker._houseColor !== newColor) {
|
|
h._marker._houseColor = newColor;
|
|
h._marker.setIcon(L.divIcon({
|
|
html: `<div class="custom-marker-house" style="background:${newColor};"><i class="fas fa-home"></i></div>`,
|
|
iconSize: [26, 26],
|
|
iconAnchor: [13, 26],
|
|
popupAnchor: [0, -28],
|
|
className: '',
|
|
}));
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Fungsi untuk mendapatkan foto rumah (akan digunakan di popup)
|
|
function getHousePhotosHtml(houseData) {
|
|
if (!houseData.house_photos) return '';
|
|
let photosArr = [];
|
|
try { photosArr = JSON.parse(houseData.house_photos); } catch(e) { return ''; }
|
|
if (!photosArr.length) return '';
|
|
|
|
const thumbnails = photosArr.slice(0, 4).map(name =>
|
|
`<img src="uploads/houses/${encodeURIComponent(name)}"
|
|
style="width:60px;height:60px;object-fit:cover;border-radius:6px;border:1.5px solid #e2e6ef;cursor:zoom-in;"
|
|
onclick="event.stopPropagation(); PhotoUpload.lightbox('uploads/houses/${encodeURIComponent(name)}')"
|
|
title="Foto rumah">`
|
|
).join('');
|
|
|
|
return `
|
|
<div class="hp-section">
|
|
<div class="hp-section-header">
|
|
<i class="fas fa-camera"></i>
|
|
<span>Foto Rumah</span>
|
|
<span class="hp-count">${photosArr.length}</span>
|
|
</div>
|
|
<div class="popup-photo-strip" style="display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;">
|
|
${thumbnails}
|
|
${photosArr.length > 4 ? `<span style="font-size:10px;color:#9ba4b5;margin-left:4px;">+${photosArr.length - 4} foto</span>` : ''}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
// showHousePopup (redesigned popup)
|
|
async function showHousePopup(marker, h, forceRefresh = false) {
|
|
let houseData = h;
|
|
|
|
// Fetch fresh data if aid_history is missing or forceRefresh=true
|
|
if (forceRefresh || !houseData.aid_history || houseData.aid_history.length === undefined) {
|
|
try {
|
|
showLoading(true);
|
|
const r = await ApiHouses.show(houseData.id);
|
|
showLoading(false);
|
|
if (r.ok && r.data?.success) {
|
|
houseData = r.data.data;
|
|
const index = State.houses.findIndex(hh => hh.id === houseData.id);
|
|
if (index !== -1) {
|
|
State.houses[index] = houseData;
|
|
if (State.houses[index]._marker) {
|
|
State.houses[index]._marker._houseData = houseData;
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
showLoading(false);
|
|
console.error('Failed to load fresh household data:', err);
|
|
}
|
|
}
|
|
|
|
// ── Derived values ───────────────────────────────────────────────
|
|
const hasAid = (houseData.aid_history && houseData.aid_history.length > 0);
|
|
const aidStatusText = hasAid ? 'Penerima Bantuan' : 'Belum Ada Bantuan';
|
|
const aidStatusColor = hasAid ? '#0b9e73' : '#d97706';
|
|
|
|
let age = '—';
|
|
if (houseData.head_date_of_birth) {
|
|
const bd = new Date(houseData.head_date_of_birth), now = new Date();
|
|
let a = now.getFullYear() - bd.getFullYear();
|
|
if (now.getMonth() < bd.getMonth() || (now.getMonth() === bd.getMonth() && now.getDate() < bd.getDate())) a--;
|
|
age = a;
|
|
}
|
|
|
|
const povColor = POVERTY_COLORS[houseData.poverty_status] || '#9ba4b5';
|
|
const povLabel = POVERTY_LABELS[houseData.poverty_status] || houseData.poverty_status;
|
|
|
|
// Employment one-liner
|
|
let jobLine = '—';
|
|
if (houseData.head_employment_status === 'unemployed') {
|
|
jobLine = 'Tidak Bekerja';
|
|
} else if (houseData.head_employment_status === 'studying') {
|
|
jobLine = escapeHtml(houseData.head_institution_name || 'Pelajar/Mahasiswa');
|
|
} else if (houseData.head_employment_status === 'working') {
|
|
jobLine = escapeHtml(houseData.head_job_name || 'Bekerja');
|
|
if (houseData.head_monthly_income) jobLine += ` · ${formatRp(houseData.head_monthly_income)}/bln`;
|
|
}
|
|
|
|
const fullAddress = houseData.full_address || houseData.address || '—';
|
|
const conditionIcon = houseData.house_condition === 'layak'
|
|
? `<span style="color:#0b9e73;"><i class="fas fa-check-circle"></i> Layak</span>`
|
|
: houseData.house_condition === 'tidak_layak'
|
|
? `<span style="color:#d63230;"><i class="fas fa-times-circle"></i> Tidak Layak</span>`
|
|
: '—';
|
|
|
|
// ── Location pills (RT/RW · Kelurahan · Kecamatan) ───────────────
|
|
const locationPills = [
|
|
houseData.rt ? `RT ${escapeHtml(houseData.rt)}/${escapeHtml(houseData.rw || '?')}` : null,
|
|
houseData.kelurahan ? escapeHtml(houseData.kelurahan) : null,
|
|
houseData.kecamatan ? escapeHtml(houseData.kecamatan) : null,
|
|
].filter(Boolean);
|
|
|
|
const locationPillsHtml = locationPills.length
|
|
? `<div class="hp-pills">${locationPills.map(p => `<span class="hp-pill">${p}</span>`).join('')}</div>`
|
|
: '';
|
|
|
|
// ── Family members ────────────────────────────────────────────────
|
|
let membersHtml = '';
|
|
if (houseData.household_members && houseData.household_members.length) {
|
|
const members = houseData.household_members;
|
|
const shown = members.slice(0, 5);
|
|
const extra = members.length - shown.length;
|
|
membersHtml = `
|
|
<div class="hp-section">
|
|
<div class="hp-section-header">
|
|
<i class="fas fa-users"></i>
|
|
<span>Anggota Keluarga</span>
|
|
<span class="hp-count">${members.length}</span>
|
|
</div>
|
|
<div class="hp-members-list">
|
|
${shown.map(m => {
|
|
let statusLine = '';
|
|
if (m.employment_status === 'working') statusLine = escapeHtml(m.job_name || 'Bekerja');
|
|
else if (m.employment_status === 'studying') statusLine = escapeHtml(m.institution_name || 'Sekolah');
|
|
else if (m.employment_status === 'unemployed') statusLine = 'Tidak bekerja';
|
|
return `<div class="hp-member-row">
|
|
<div class="hp-member-avatar"><i class="fas fa-user"></i></div>
|
|
<div class="hp-member-info">
|
|
<div class="hp-member-name">${escapeHtml(m.name)}</div>
|
|
<div class="hp-member-meta">${escapeHtml(m.relationship || '—')}${statusLine ? ' · ' + statusLine : ''}</div>
|
|
</div>
|
|
</div>`;
|
|
}).join('')}
|
|
${extra > 0 ? `<div class="hp-member-more"><i class="fas fa-ellipsis-h"></i> +${extra} anggota lainnya</div>` : ''}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
// ── Aid history ───────────────────────────────────────────────────
|
|
let aidHistoryHtml = '';
|
|
if (hasAid) {
|
|
const latestAids = houseData.aid_history.slice(0, 5);
|
|
const extraAids = houseData.aid_history.length - latestAids.length;
|
|
aidHistoryHtml = `
|
|
<div class="hp-section">
|
|
<div class="hp-section-header">
|
|
<i class="fas fa-hand-holding-heart"></i>
|
|
<span>Riwayat Bantuan</span>
|
|
<span class="hp-count">${houseData.aid_history.length}</span>
|
|
</div>
|
|
<div class="hp-aid-list">
|
|
${latestAids.map(aid => `
|
|
<div class="hp-aid-row">
|
|
<div class="hp-aid-left">
|
|
<span class="hp-aid-type">${escapeHtml(aid.aid_type_label || (typeof AID_LABELS !== 'undefined' && AID_LABELS[aid.aid_type]) || aid.aid_type || 'Bantuan')}</span>
|
|
${aid.amount ? `<span class="hp-aid-amount">${formatRp(aid.amount)}</span>` : ''}
|
|
</div>
|
|
<div class="hp-aid-date">${formatDate(aid.aid_date)}</div>
|
|
${aid.description || aid.notes ? `<div class="hp-aid-note">${escapeHtml((aid.description || aid.notes || '').substring(0, 55))}${(aid.description || aid.notes || '').length > 55 ? '…' : ''}</div>` : ''}
|
|
</div>`).join('')}
|
|
${extraAids > 0 ? `<div class="hp-member-more"><i class="fas fa-ellipsis-h"></i> +${extraAids} bantuan lainnya</div>` : ''}
|
|
</div>
|
|
</div>`;
|
|
} else {
|
|
aidHistoryHtml = `
|
|
<div class="hp-section hp-aid-empty">
|
|
<div class="hp-section-header">
|
|
<i class="fas fa-hand-holding-heart"></i>
|
|
<span>Riwayat Bantuan</span>
|
|
</div>
|
|
<div class="hp-empty-hint"><i class="fas fa-inbox"></i> Belum ada riwayat bantuan</div>
|
|
</div>`;
|
|
}
|
|
|
|
// ── Assigned center ───────────────────────────────────────────────
|
|
const centerHtml = houseData.center_name
|
|
? `<div class="hp-center-row">
|
|
<i class="fas fa-place-of-worship"></i>
|
|
<span>${escapeHtml(houseData.center_name)}</span>
|
|
</div>`
|
|
: '';
|
|
|
|
// ── Coordinates ──────────────────────────────────────────────────
|
|
const lat = (houseData.latitude || marker.getLatLng().lat).toFixed(6);
|
|
const lng = (houseData.longitude || marker.getLatLng().lng).toFixed(6);
|
|
|
|
// ── Photos Html ──────────────────────────────────────────────────
|
|
const photosHtml = getHousePhotosHtml(houseData);
|
|
|
|
// ── Build popup ──────────────────────────────────────────────────
|
|
const popup = L.popup({ maxWidth: 360, minWidth: 300, closeButton: true, className: 'hp-leaflet-popup' })
|
|
.setLatLng(marker.getLatLng())
|
|
.setContent(`
|
|
<div class="hp-popup">
|
|
|
|
<!-- HEADER -->
|
|
<div class="hp-header">
|
|
<div class="hp-drag-hint" title="Seret marker untuk memindahkan">
|
|
<i class="fas fa-up-down-left-right"></i>
|
|
</div>
|
|
<div class="hp-avatar" style="background:${povColor}18;color:${povColor};">
|
|
<i class="fas fa-home"></i>
|
|
</div>
|
|
<div class="hp-header-info">
|
|
<div class="hp-head-name">${escapeHtml(houseData.head_name)}</div>
|
|
<div class="hp-nik">NIK: ${escapeHtml(houseData.head_nik || houseData.nik || '—')}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- STATUS STRIP -->
|
|
<div class="hp-status-strip">
|
|
<div class="hp-status-chip" style="background:${povColor}14;color:${povColor};border-color:${povColor}30;">
|
|
<span class="hp-chip-dot" style="background:${povColor};"></span>${povLabel}
|
|
</div>
|
|
<div class="hp-status-chip" style="background:${aidStatusColor}12;color:${aidStatusColor};border-color:${aidStatusColor}28;">
|
|
<i class="fas ${hasAid ? 'fa-check-circle' : 'fa-clock'}"></i>${aidStatusText}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SCROLLABLE BODY -->
|
|
<div class="hp-body">
|
|
|
|
<!-- Location -->
|
|
<div class="hp-section">
|
|
<div class="hp-section-header">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<span>Lokasi</span>
|
|
</div>
|
|
<div class="hp-address">${escapeHtml(fullAddress)}</div>
|
|
${locationPillsHtml}
|
|
${centerHtml}
|
|
<div class="hp-coords"><i class="fas fa-crosshairs"></i>${lat}, ${lng}</div>
|
|
</div>
|
|
|
|
<!-- Photos -->
|
|
${photosHtml}
|
|
|
|
<!-- Head of Household -->
|
|
<div class="hp-section">
|
|
<div class="hp-section-header">
|
|
<i class="fas fa-user"></i>
|
|
<span>Kepala Keluarga</span>
|
|
</div>
|
|
<div class="hp-kv-grid">
|
|
<div class="hp-kv-row">
|
|
<span class="hp-kv-label">Usia</span>
|
|
<span class="hp-kv-val">${age} tahun</span>
|
|
</div>
|
|
<div class="hp-kv-row">
|
|
<span class="hp-kv-label">Pendidikan</span>
|
|
<span class="hp-kv-val">${educationLabel(houseData.head_education) || '—'}</span>
|
|
</div>
|
|
<div class="hp-kv-row">
|
|
<span class="hp-kv-label">Pekerjaan</span>
|
|
<span class="hp-kv-val">${jobLine}</span>
|
|
</div>
|
|
<div class="hp-kv-row">
|
|
<span class="hp-kv-label">Kondisi Rumah</span>
|
|
<span class="hp-kv-val">${conditionIcon}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Family Members -->
|
|
${membersHtml}
|
|
|
|
<!-- Aid History -->
|
|
${aidHistoryHtml}
|
|
|
|
</div><!-- /.hp-body -->
|
|
|
|
<!-- ACTIONS -->
|
|
<div class="hp-actions">
|
|
<button class="hp-btn hp-btn-primary" onclick="editHouse(${houseData.id})">
|
|
<i class="fas fa-pen"></i> Edit
|
|
</button>
|
|
<button class="hp-btn hp-btn-success" onclick="openAidModalForHouse(${houseData.id})">
|
|
<i class="fas fa-gift"></i> Tambah Bantuan
|
|
</button>
|
|
${window.canDelete ? `<button class="hp-btn hp-btn-danger" onclick="deleteHouse(${houseData.id})" title="Hapus"><i class="fas fa-trash"></i></button>` : ''}
|
|
</div>
|
|
|
|
</div>`);
|
|
|
|
marker.unbindPopup();
|
|
marker.bindPopup(popup).openPopup();
|
|
}
|
|
|
|
// Update click handler untuk memuat data fresh
|
|
function addHouseMarker(h) {
|
|
const insideRadius = isHouseInsideAnyRadius(h.latitude, h.longitude);
|
|
const color = insideRadius ? '#d63230' : '#0b9e73';
|
|
|
|
const marker = L.marker([h.latitude, h.longitude], {
|
|
icon: L.divIcon({
|
|
html: `<div class="custom-marker-house" style="background:${color};"><i class="fas fa-home"></i></div>`,
|
|
iconSize: [26, 26],
|
|
iconAnchor: [13, 26],
|
|
popupAnchor: [0, -28],
|
|
className: '',
|
|
}),
|
|
title: h.head_name,
|
|
draggable: true,
|
|
});
|
|
|
|
marker._houseColor = color;
|
|
marker._houseData = h;
|
|
marker._originalId = h.id;
|
|
|
|
// Dragstart
|
|
marker.on('dragstart', function() {
|
|
dragInProgress = true;
|
|
marker.closePopup();
|
|
marker.setZIndexOffset(1000);
|
|
});
|
|
|
|
// Drag - update color live
|
|
marker.on('drag', function(e) {
|
|
const pos = marker.getLatLng();
|
|
const newColor = getHouseMarkerColor(pos.lat, pos.lng);
|
|
if (marker._houseColor !== newColor) {
|
|
marker._houseColor = newColor;
|
|
marker.setIcon(L.divIcon({
|
|
html: `<div class="custom-marker-house" style="background:${newColor};"><i class="fas fa-home"></i></div>`,
|
|
iconSize: [26, 26],
|
|
iconAnchor: [13, 26],
|
|
popupAnchor: [0, -28],
|
|
className: '',
|
|
}));
|
|
}
|
|
});
|
|
|
|
marker.on('dragend', async function(e) {
|
|
dragInProgress = false;
|
|
marker.setZIndexOffset(0);
|
|
|
|
const pos = marker.getLatLng();
|
|
const lat = pos.lat, lng = pos.lng;
|
|
|
|
// Update local data
|
|
h.latitude = lat;
|
|
h.longitude = lng;
|
|
|
|
// Update warna marker
|
|
const newColor = getHouseMarkerColor(lat, lng);
|
|
marker._houseColor = newColor;
|
|
marker.setIcon(L.divIcon({
|
|
html: `<div class="custom-marker-house" style="background:${newColor};"><i class="fas fa-home"></i></div>`,
|
|
iconSize: [26, 26],
|
|
iconAnchor: [13, 26],
|
|
popupAnchor: [0, -28],
|
|
className: '',
|
|
}));
|
|
|
|
// Reverse geocode untuk dapat alamat baru
|
|
let newAddress = h.full_address || h.address;
|
|
try {
|
|
newAddress = await reverseGeocode(lat, lng);
|
|
h.full_address = newAddress;
|
|
} catch (err) {}
|
|
|
|
// Save ke database via API
|
|
showLoading(true);
|
|
try {
|
|
const r = await ApiHouses.patch(h.id, {
|
|
latitude: lat,
|
|
longitude: lng,
|
|
full_address: newAddress
|
|
});
|
|
|
|
if (r.ok && r.data?.success) {
|
|
if (r.data.data?.managing_center_id) {
|
|
h.managing_center_id = r.data.data.managing_center_id;
|
|
const center = State.centers.find(c => c.id == r.data.data.managing_center_id);
|
|
if (center) h.center_name = center.name;
|
|
}
|
|
showToast('Posisi rumah berhasil diperbarui.', 'success');
|
|
|
|
// Urutan yang benar - update state dulu
|
|
|
|
// 1. Update data di State (Harus pertama)
|
|
const index = State.houses.findIndex(hi => hi.id === h.id);
|
|
if (index !== -1) {
|
|
State.houses[index] = h;
|
|
}
|
|
|
|
// 2. Hitung ulang jumlah rumah per center (membaca dari State.houses yang sudah diupdate)
|
|
recountCenterHouseholds();
|
|
|
|
// 3. Update warna semua marker rumah (yang mungkin berubah status radius)
|
|
updateAllHouseColors();
|
|
|
|
// 4. Update tampilan sidebar
|
|
renderCenterList();
|
|
renderHouseList();
|
|
updateLayerCounts();
|
|
|
|
// 5. Update statistik dashboard (ambil data fresh dari server)
|
|
await loadStats();
|
|
|
|
// 6. Refresh popup jika terbuka
|
|
if (marker.isPopupOpen()) {
|
|
await showHousePopup(marker, h, true);
|
|
}
|
|
} else {
|
|
showToast(r.data?.message || 'Gagal menyimpan posisi.', 'error');
|
|
// Kembalikan ke posisi lama jika gagal
|
|
marker.setLatLng([h.latitude, h.longitude]);
|
|
}
|
|
} catch (err) {
|
|
showToast('Gagal menyimpan posisi: ' + err.message, 'error');
|
|
marker.setLatLng([h.latitude, h.longitude]);
|
|
} finally {
|
|
showLoading(false);
|
|
}
|
|
|
|
// Tampilkan popup dengan data terbaru (jika belum terbuka)
|
|
if (!marker.isPopupOpen()) {
|
|
await showHousePopup(marker, h, true);
|
|
}
|
|
});
|
|
|
|
// Click handler dengan loading state
|
|
marker.on('click', async () => {
|
|
const loadingPopup = L.popup()
|
|
.setLatLng(marker.getLatLng())
|
|
.setContent('<div style="padding: 20px; text-align: center;"><i class="fas fa-circle-notch fa-spin"></i> Memuat data...</div>')
|
|
.openPopup();
|
|
|
|
try {
|
|
const r = await ApiHouses.show(h.id);
|
|
if (r.ok && r.data?.success) {
|
|
const freshData = r.data.data;
|
|
marker._houseData = freshData;
|
|
const index = State.houses.findIndex(hh => hh.id === freshData.id);
|
|
if (index !== -1) {
|
|
State.houses[index] = freshData;
|
|
State.houses[index]._marker = marker;
|
|
}
|
|
await showHousePopup(marker, freshData);
|
|
} else {
|
|
loadingPopup.setContent('<div style="padding: 20px; text-align: center; color: var(--danger);">Gagal memuat data</div>');
|
|
setTimeout(() => marker.closePopup(), 1500);
|
|
}
|
|
} catch (err) {
|
|
loadingPopup.setContent('<div style="padding: 20px; text-align: center; color: var(--danger);">Error memuat data</div>');
|
|
setTimeout(() => marker.closePopup(), 1500);
|
|
}
|
|
});
|
|
|
|
layerHouses.addLayer(marker);
|
|
h._marker = marker;
|
|
}
|
|
|
|
// ====================================================================
|
|
// SIDEBAR LISTS
|
|
// ====================================================================
|
|
function renderCenterList() {
|
|
const el = document.getElementById('centersList');
|
|
const cnt = document.getElementById('centerCount');
|
|
const show = State.activeFilter !== 'houses';
|
|
document.getElementById('centersListSection').style.display = show ? '' : 'none';
|
|
if (!show) return;
|
|
const filtered = State.centers.filter(c => {
|
|
if (!State.searchQuery) return true;
|
|
const q = State.searchQuery.toLowerCase();
|
|
return c.name.toLowerCase().includes(q) || (c.address || '').toLowerCase().includes(q);
|
|
});
|
|
cnt.textContent = filtered.length;
|
|
if (!filtered.length) { el.innerHTML = '<div class="empty-state"><i class="fas fa-place-of-worship"></i><p>Tidak ada data</p></div>'; return; }
|
|
el.innerHTML = filtered.slice(0, 50).map(c => {
|
|
const color = CENTER_COLORS[c.worship_type] || '#3a56d4';
|
|
const icon = CENTER_ICONS[c.worship_type] || 'fa-place-of-worship';
|
|
return `<div class="data-item" onclick="flyTo(${c.latitude},${c.longitude})">
|
|
<div class="data-item-icon center" style="background:${color}20;color:${color};"><i class="fas ${icon}"></i></div>
|
|
<div class="data-item-info"><div class="data-item-title">${truncate(c.name, 24)}</div><div class="data-item-subtitle">${CENTER_LABELS[c.worship_type] || ''} · ${c.household_count ?? 0} rumah</div></div>
|
|
<div class="data-item-actions">
|
|
<button class="btn-edit" title="Edit" onclick="event.stopPropagation();editCenter(${c.id})"><i class="fas fa-pen"></i></button>
|
|
${window.canDelete ? `<button class="btn-delete" title="Hapus" onclick="event.stopPropagation();deleteCenter(${c.id})"><i class="fas fa-trash"></i></button>` : ''}
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
function renderHouseList(filtered) {
|
|
const el = document.getElementById('housesList');
|
|
const cnt = document.getElementById('houseCount');
|
|
const show = State.activeFilter !== 'centers';
|
|
document.getElementById('housesListSection').style.display = show ? '' : 'none';
|
|
if (!show) return;
|
|
const list = filtered || State.houses;
|
|
cnt.textContent = list.length;
|
|
if (!list.length) { el.innerHTML = '<div class="empty-state"><i class="fas fa-home"></i><p>Tidak ada data</p></div>'; return; }
|
|
el.innerHTML = list.slice(0, 80).map(h => {
|
|
const insideRadius = isHouseInsideAnyRadius(h.latitude, h.longitude);
|
|
const color = insideRadius ? '#d63230' : '#0b9e73';
|
|
const status = insideRadius ? 'Dalam Radius' : 'Luar Radius';
|
|
return `<div class="data-item" onclick="flyTo(${h.latitude},${h.longitude})">
|
|
<div class="data-item-icon house" style="background:${color}18;color:${color};"><i class="fas fa-home"></i></div>
|
|
<div class="data-item-info"><div class="data-item-title">${truncate(h.head_name, 22)}</div><div class="data-item-subtitle" style="color:${color};">${status}</div></div>
|
|
<div class="data-item-actions">
|
|
<button class="btn-edit" title="Edit" onclick="event.stopPropagation();editHouse(${h.id})"><i class="fas fa-pen"></i></button>
|
|
${window.canDelete ? `<button class="btn-delete" title="Hapus" onclick="event.stopPropagation();deleteHouse(${h.id})"><i class="fas fa-trash"></i></button>` : ''}
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
if (list.length > 80) el.innerHTML += `<div class="empty-state" style="padding:10px;"><p style="color:var(--text-muted);">+${list.length - 80} lainnya — gunakan filter</p></div>`;
|
|
}
|
|
|
|
function updateLayerCounts() {
|
|
const cc = document.getElementById('layerCenterCount');
|
|
const hc = document.getElementById('layerHouseCount');
|
|
if (cc) cc.textContent = State.centers.length;
|
|
if (hc) hc.textContent = State.houses.length;
|
|
} |