From 49a8d0e0d43a953ce2770ce80a72a8e08c8b4039 Mon Sep 17 00:00:00 2001
From: Aleksander William <d1041231003@student.untan.ac.id>
Date: Tue, 9 Jun 2026 23:27:48 +0700
Subject: [PATCH] feat: menambah fungsionalitas status koneksi pada header

---
 WebGISPovertyMap/index.php |  2 +-
 WebGISPovertyMap/script.js | 28 +++++++++++++++++++++++++++-
 WebGISPovertyMap/style.css | 15 +++++++++++++++
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/WebGISPovertyMap/index.php b/WebGISPovertyMap/index.php
index 0560339..34d543e 100644
--- a/WebGISPovertyMap/index.php
+++ b/WebGISPovertyMap/index.php
@@ -137,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" />
diff --git a/WebGISPovertyMap/script.js b/WebGISPovertyMap/script.js
index 1bbca6c..a34a469 100644
--- a/WebGISPovertyMap/script.js
+++ b/WebGISPovertyMap/script.js
@@ -914,4 +914,30 @@ function showDashboard(ibadahName, totalKK, sudahBantuan, belumBantuan, families
 
 function closeDashboard() {
     document.getElementById('dashboard-sidebar').classList.remove('open');
-}
\ No newline at end of file
+}
+
+// ==========================================
+// 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();
\ No newline at end of file
diff --git a/WebGISPovertyMap/style.css b/WebGISPovertyMap/style.css
index 594fbaa..12b7891 100644
--- a/WebGISPovertyMap/style.css
+++ b/WebGISPovertyMap/style.css
@@ -505,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)
         ============================ */