feat: menambah fungsionalitas status koneksi pada header

WebGISPovertyMap/index.php

@@ -74,6 +74,7 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
                     <div class="custom-select-options" id="custom-select-options">
                         <div class="custom-option selected" data-value="Semua">Semua Layer</div>
                         <div class="custom-option" data-value="Rumah Ibadah">Rumah Ibadah</div>
+                        <div class="custom-option" data-value="Penduduk Miskin">Penduduk Miskin</div>
                     </div>
                 </div>
 
@@ -85,7 +86,7 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
                                 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                         </svg>
                     </span>
-                    <input type="text" id="search-input" placeholder="Cari nama lokasi atau rumah ibadah..."
+                    <input type="text" id="search-input" placeholder="Cari nama kepala keluarga atau rumah ibadah..."
                         onkeyup="jalankanPencarian()" oninput="toggleClearBtn()" autocomplete="off">
                     <button class="search-clear-btn" id="search-clear" onclick="clearSearch()" title="Hapus pencarian">
                         <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
@@ -136,7 +137,7 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
 
             <div style="width: 1px; height: 20px; background: rgba(255,255,255,0.1); margin: 0 4px;"></div>
 
-            <div class="tool-btn" title="Status Koneksi">
+            <div class="tool-btn" id="connection-status" title="Status Koneksi">
                 <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                     <path stroke-linecap="round" stroke-linejoin="round"
                         d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />

WebGISPovertyMap/script.js

@@ -97,6 +97,7 @@ var databasePendudukMiskin = [];
 
 function loadRumahIbadah() {
     rumahIbadahLayer.clearLayers();
+    databasePencarian = []; // Reset database pencarian untuk mencegah duplikat
 
     fetch('load.php?jenis=rumah_ibadah')
         .then(res => res.json())
@@ -168,6 +169,17 @@ function loadRumahIbadah() {
                             .bindPopup(htmlIsi);
 
                         pendudukMiskinCluster.addLayer(marker);
+
+                        var namaKK = penduduk.nama_kk || 'Tanpa Nama';
+                        databasePencarian.push({
+                            namaLower: namaKK.toLowerCase(),
+                            namaAsli: namaKK,
+                            kategori: 'Penduduk Miskin',
+                            bantuan: statusBantuan,
+                            ikon: '👥',
+                            tipe: 'titik',
+                            layer: marker
+                        });
                     });
 
                     dataRumahIbadah.forEach(ibadah => {
@@ -492,10 +504,11 @@ var databasePencarian = [];
 
 var ikonKategori = {
     'Rumah Ibadah': '🕌',
+    'Penduduk Miskin': '👥'
 };
 
 var warnaBadge = {
-    'Rumah Ibadah': 'badge-Rumah-Ibadah',
+    'Rumah Ibadah': 'badge-Rumah-Ibadah'
 };
 
 function jalankanPencarian() {
@@ -522,11 +535,28 @@ function jalankanPencarian() {
 
         hasil.forEach(function (item) {
             var badgeClass = warnaBadge[item.kategori] || 'badge-default';
-            var ikon = ikonKategori[item.kategori] || '📍';
+            var kategoriText = item.kategori;
+            var ikon = item.ikon || '📍';
             var bgColors = {
-                'Rumah Ibadah': 'rgba(59,130,246,0.12)'
+                'Rumah Ibadah': 'rgba(59,130,246,0.12)',
+                'Penduduk Miskin': item.bantuan === 'Sudah Menerima' ? 'rgba(16,185,129,0.12)' : 'rgba(239,68,68,0.12)'
             };
 
+            if (item.kategori === 'Penduduk Miskin') {
+                if (item.bantuan === 'Sudah Menerima') {
+                    badgeClass = 'badge-penduduk-sudah';
+                    kategoriText = 'Sudah Menerima';
+                } else {
+                    badgeClass = 'badge-penduduk-belum';
+                    kategoriText = 'Belum Menerima';
+                }
+            }
+
+            var subText = 'Klik untuk zoom ke lokasi';
+            if (item.kategori === 'Penduduk Miskin') {
+                subText = 'Penduduk Miskin • ' + subText;
+            }
+
             var div = document.createElement('div');
             div.className = 'result-item';
             div.innerHTML = `
@@ -535,17 +565,24 @@ function jalankanPencarian() {
                         </div>
                         <div class="result-item-text">
                             <div class="result-item-name">${item.namaAsli}</div>
-                            <div class="result-item-sub">Klik untuk zoom ke lokasi</div>
+                            <div class="result-item-sub">${subText}</div>
                         </div>
-                        <span class="badge-kategori ${badgeClass}">${item.kategori}</span>`;
+                        <span class="badge-kategori ${badgeClass}">${kategoriText}</span>`;
 
             div.onclick = function () {
                 if (item.tipe === 'titik') {
-                    map.flyTo(item.layer.getLatLng(), 17, { animate: true, duration: 1.5 });
+                    if (item.kategori === 'Penduduk Miskin') {
+                        // For markers in markerClusterGroup, use zoomToShowLayer to expand clusters
+                        pendudukMiskinCluster.zoomToShowLayer(item.layer, function () {
+                            item.layer.openPopup();
+                        });
+                    } else {
+                        map.flyTo(item.layer.getLatLng(), 17, { animate: true, duration: 1.5 });
+                        item.layer.openPopup();
+                    }
                 } else {
                     map.fitBounds(item.layer.getBounds());
                 }
-                item.layer.openPopup();
                 wadahHasil.style.display = 'none';
                 document.getElementById('search-input').value = item.namaAsli;
                 toggleClearBtn();
@@ -877,4 +914,30 @@ function showDashboard(ibadahName, totalKK, sudahBantuan, belumBantuan, families
 
 function closeDashboard() {
     document.getElementById('dashboard-sidebar').classList.remove('open');
-}
+}
+
+// ==========================================
+// 16. SISTEM MONITORING KONEKSI DINAMIS
+// ==========================================
+function updateConnectionStatus() {
+    var statusEl = document.getElementById('connection-status');
+    if (!statusEl) return;
+
+    if (navigator.onLine) {
+        statusEl.classList.remove('offline');
+        statusEl.classList.add('online');
+        statusEl.setAttribute('title', 'Koneksi Stabil');
+    } else {
+        statusEl.classList.remove('online');
+        statusEl.classList.add('offline');
+        statusEl.setAttribute('title', 'Koneksi Terputus - Peta mungkin tidak dimuat sempurna');
+    }
+}
+
+// Event listeners untuk mendeteksi perubahan status koneksi
+window.addEventListener('online', updateConnectionStatus);
+window.addEventListener('offline', updateConnectionStatus);
+
+// Jalankan saat pertama kali dimuat
+document.addEventListener('DOMContentLoaded', updateConnectionStatus);
+updateConnectionStatus();

WebGISPovertyMap/style.css

@@ -430,6 +430,16 @@ body {
     color: #60a5fa;
 }
 
+.badge-penduduk-sudah {
+    background: rgba(16, 185, 129, 0.15);
+    color: #34d399;
+}
+
+.badge-penduduk-belum {
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171;
+}
+
 .badge-default {
     background: rgba(148, 163, 184, 0.15);
     color: #94a3b8;
@@ -495,6 +505,21 @@ body {
     border: 1px solid #0f172a;
 }
 
+#connection-status.online {
+    color: #10b981;
+    border-color: rgba(16, 185, 129, 0.25);
+}
+#connection-status.online .status-dot {
+    background: #10b981;
+}
+#connection-status.offline {
+    color: #ef4444;
+    border-color: rgba(239, 68, 68, 0.25);
+}
+#connection-status.offline .status-dot {
+    background: #ef4444;
+}
+
 /* ============================
            POPUP STYLES (MODERN CARD)
         ============================ */