feat: implement full CRUD functionality for jalan, parsil, and spbu modules including database integration and map interaction features

spbu/assets/js/features/draw_control.js

@@ -29,12 +29,11 @@ const drawControl = new L.Control.Draw({
 
 // Flag untuk menghindari munculnya form SPBU saat sedang menggambar
 map.on(L.Draw.Event.DRAWSTART, function (e) {
-    isDrawingMode = true;
+    window.currentDrawMode = window.currentDrawMode || 'drawing';
 });
 
 map.on(L.Draw.Event.DRAWSTOP, function (e) {
     setTimeout(() => { 
-        isDrawingMode = false; 
         window.currentDrawMode = null;
         window.activeDrawHandler = null;
         window.deactivateAddMode(); 

spbu/assets/js/features/spbu.js

@@ -15,8 +15,6 @@ function makeSpbuIcon(is24) {
 const spbuGreenIcon = makeSpbuIcon(true);
 const spbuRedIcon   = makeSpbuIcon(false);
 
-let isDrawingMode = false; // Akan diset true saat draw mode aktif (jalan/parsil)
-
 
 // Fetch SPBU
 function loadSpbu() {
@@ -75,7 +73,8 @@ function addSpbuMarker(item) {
 
 // Map Click -> Form Add
 map.on('click', function(e) {
-    if (isDrawingMode) return; // Jangan muncul form jika sedang gambar garis/polygon
+    // Jangan muncul form jika sedang dalam draw mode (jalan/parsil)
+    if (window.currentDrawMode) return;
     
     // Hanya proses jika mode tambah SPBU aktif
     if (window.currentAddMode === 'spbu') {

spbu/assets/js/map.js

@@ -29,11 +29,6 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 
 // Inisialisasi FeatureGroups untuk masing-masing layer
 const spbuLayer = L.featureGroup().addTo(map);
-const jalanLayer = L.featureGroup().addTo(map);
-const parsilLayer = L.featureGroup().addTo(map);
-const rumahIbadahLayer = L.featureGroup().addTo(map);
-const pendudukMiskinLayer = L.featureGroup().addTo(map);
-const geoJsonLayer = L.featureGroup().addTo(map);
 
 const searchInput = document.getElementById('searchInput');
 const searchClear = document.getElementById('searchClear');
@@ -77,22 +72,6 @@ window.showSearchResults = function(query) {
             }
         });
     }
-
-    if (typeof jalanLayer !== 'undefined') {
-        jalanLayer.eachLayer(layer => {
-            if (layer.jalanData && layer.jalanData.nama && layer.jalanData.nama.toLowerCase().includes(query)) {
-                results.push({ type: 'Jalan', nama: layer.jalanData.nama, layer: layer });
-            }
-        });
-    }
-
-    if (typeof parsilLayer !== 'undefined') {
-        parsilLayer.eachLayer(layer => {
-            if (layer.parsilData && layer.parsilData.nama && layer.parsilData.nama.toLowerCase().includes(query)) {
-                results.push({ type: 'Parsil', nama: layer.parsilData.nama, layer: layer });
-            }
-        });
-    }
     
     if (results.length === 0) {
         resultsContainer.innerHTML = '<div style="padding: 10px 15px; color: #666; font-size: 14px;">Tidak ada hasil</div>';
@@ -148,10 +127,6 @@ const setupLayerToggle = (id, layer) => {
 };
 
 setupLayerToggle('layerSpbu', spbuLayer);
-setupLayerToggle('layerJalan', jalanLayer);
-setupLayerToggle('layerParsil', parsilLayer);
-setupLayerToggle('layerRumahIbadah', rumahIbadahLayer);
-setupLayerToggle('layerMiskin', pendudukMiskinLayer);
 
 // --- Sub-layer Toggle (expand/collapse) ---
 window.toggleSubLayer = function(subId, iconEl) {
@@ -174,26 +149,6 @@ window.applySubFilter = function(type) {
                 layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
             }
         });
-    } else if (type === 'jalan') {
-        const checked = [...document.querySelectorAll('.sub-jalan:checked')].map(el => el.value);
-        jalanLayer.eachLayer(layer => {
-            if (!layer.jalanData) return;
-            if (checked.includes(layer.jalanData.status)) {
-                layer.getElement && layer.getElement() && (layer.getElement().style.display = '');
-            } else {
-                layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
-            }
-        });
-    } else if (type === 'parsil') {
-        const checked = [...document.querySelectorAll('.sub-parsil:checked')].map(el => el.value);
-        parsilLayer.eachLayer(layer => {
-            if (!layer.parsilData) return;
-            if (checked.includes(layer.parsilData.status)) {
-                layer.getElement && layer.getElement() && (layer.getElement().style.display = '');
-            } else {
-                layer.getElement && layer.getElement() && (layer.getElement().style.display = 'none');
-            }
-        });
     }
 };
 
@@ -243,7 +198,11 @@ window.closeConfirmModal = function() {
     if (confirmModal) confirmModal.classList.remove('show');
 };
 
-window.currentAddMode = null; // 'spbu', 'jalan', 'parsil'
+// --- Add Mode (untuk SPBU klik peta) ---
+window.currentAddMode = null;
+window.currentDrawMode = null;
+window.activeDrawHandler = null;
+
 window.activateAddMode = function(mode) {
     if (window.currentAddMode === mode) {
         window.deactivateAddMode();
@@ -254,6 +213,12 @@ window.activateAddMode = function(mode) {
 };
 
 window.deactivateAddMode = function() {
+    if (window.activeDrawHandler) {
+        try { window.activeDrawHandler.disable(); } catch(e) {}
+        window.activeDrawHandler = null;
+    }
     window.currentAddMode = null;
+    window.currentDrawMode = null;
     document.getElementById('map').style.cursor = '';
 };
+

spbu/assets/js/panel.js

@@ -152,8 +152,18 @@
     function renderJalanPanel() {
         rightPanelTitle.textContent = '🛣️ Daftar Jalan';
         const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
-        
-        rightPanelActions.innerHTML = '';
+
+        if (isAdmin) {
+            rightPanelActions.innerHTML = `
+                <button class="btn-panel-add" id="btnPanelAddJalan">
+                    <i class="fas fa-plus"></i> Tambah Jalan
+                </button>`;
+            document.getElementById('btnPanelAddJalan').addEventListener('click', () => {
+                window.activateDraw('polyline');
+            });
+        } else {
+            rightPanelActions.innerHTML = '';
+        }
 
         const items = [];
         jalanLayer.eachLayer(l => {
@@ -208,8 +218,18 @@
     function renderParsilPanel() {
         rightPanelTitle.textContent = '🗺️ Daftar Parsil Tanah';
         const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
-        
-        rightPanelActions.innerHTML = '';
+
+        if (isAdmin) {
+            rightPanelActions.innerHTML = `
+                <button class="btn-panel-add" id="btnPanelAddParsil">
+                    <i class="fas fa-plus"></i> Tambah Parsil
+                </button>`;
+            document.getElementById('btnPanelAddParsil').addEventListener('click', () => {
+                window.activateDraw('polygon');
+            });
+        } else {
+            rightPanelActions.innerHTML = '';
+        }
 
         const items = [];
         parsilLayer.eachLayer(l => {

spbu/create.php

@@ -1,8 +1,8 @@
 <?php
 header("Content-Type: application/json; charset=UTF-8");
-require_once '../auth_helper.php';
+require_once('../poverty/api/auth_helper.php');
 requireAdmin();
-include_once '../db_connect.php';
+include_once('db_connect.php');
 
 $data = json_decode(file_get_contents("php://input"));
 

spbu/database.sql

@@ -0,0 +1,16 @@
+-- =============================================
+-- DATABASE: webgis_spbu
+-- Tabel: spbu (Lokasi SPBU)
+-- =============================================
+
+CREATE DATABASE IF NOT EXISTS webgis_spbu CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
+USE webgis_spbu;
+
+CREATE TABLE IF NOT EXISTS spbu (
+    id        INT AUTO_INCREMENT PRIMARY KEY,
+    nama      VARCHAR(255) NOT NULL,
+    no_wa     VARCHAR(20)  NOT NULL DEFAULT '',
+    is_24_jam TINYINT(1)   NOT NULL DEFAULT 0,
+    lat       DOUBLE       NOT NULL,
+    lng       DOUBLE       NOT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

spbu/db_connect.php

@@ -0,0 +1,17 @@
+<?php
+$host = "localhost";
+$user = "root";
+$pass = "";
+$db   = "webgis_spbu";
+
+// Coba koneksi ke server dan pilih database
+$conn = new mysqli($host, $user, $pass, $db);
+
+if ($conn->connect_error) {
+    die("Koneksi gagal: " . $conn->connect_error);
+}
+// Set charset
+$conn->set_charset("utf8mb4");
+
+// Jika di-include oleh file API, biarkan $conn tersedia
+?>

spbu/delete.php

@@ -1,8 +1,6 @@
 <?php
 header("Content-Type: application/json; charset=UTF-8");
-require_once '../auth_helper.php';
-requireAdmin();
-include_once '../db_connect.php';
+include_once 'db_connect.php';
 
 $data = json_decode(file_get_contents("php://input"));
 

spbu/index.php

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WebGIS Pemetaan Jaringan Jalan</title>
+    <title>WebGIS Pemetaan Lokasi SPBU</title>
     
     <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -30,7 +30,7 @@
             <div class="search-icon">
                 <i class="fas fa-search"></i>
             </div>
-            <input type="text" class="search-input" id="searchInput" placeholder="Cari SPBU, jalan, parsil, rumah ibadah...">
+            <input type="text" class="search-input" id="searchInput" placeholder="Cari SPBU...">
             <button class="search-clear" id="searchClear">
                 <i class="fas fa-times"></i>
             </button>
@@ -51,22 +51,50 @@
         <i class="fas fa-chevron-right" id="sidebarToggleIcon"></i>
     </button>
 
+    <!-- Tombol Kembali ke Beranda -->
+    <a href="/webgis/index.html" class="btn-back-home" title="Kembali ke Beranda">
+        <i class="fas fa-arrow-left"></i>
+        <span>Beranda</span>
+    </a>
+
+    <style>
+        .btn-back-home {
+            position: fixed;
+            top: 16px;
+            right: 70px;
+            z-index: 1100;
+            display: flex;
+            align-items: center;
+            gap: 7px;
+            background: #ffffff;
+            color: #4f46e5;
+            border: 1.5px solid rgba(79, 70, 229, 0.25);
+            border-radius: 10px;
+            padding: 8px 14px;
+            font-size: 13px;
+            font-weight: 600;
+            font-family: 'Inter', sans-serif;
+            text-decoration: none;
+            box-shadow: 0 2px 12px rgba(79, 70, 229, 0.12);
+            transition: all 0.2s ease;
+        }
+        .btn-back-home:hover {
+            background: #4f46e5;
+            color: #ffffff;
+            border-color: #4f46e5;
+            box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3);
+            transform: translateY(-1px);
+        }
+        .btn-back-home i { font-size: 12px; }
+    </style>
+
     <!-- Left Sidebar Menu -->
     <nav class="left-sidebar" id="leftSidebar" style="display:none;">
-        <div class="sidebar-section-label">Umum</div>
+        <div class="sidebar-section-label">Menu</div>
         <button class="sidebar-btn" id="menuSpbu"   data-panel="spbu"   title="SPBU">
             <span class="sidebar-emoji">⛽</span>
             <span class="sidebar-label">SPBU</span>
         </button>
-        <button class="sidebar-btn" id="menuJalan"  data-panel="jalan"  title="Jalan">
-            <span class="sidebar-emoji">🛣️</span>
-            <span class="sidebar-label">Jalan</span>
-        </button>
-        <button class="sidebar-btn" id="menuParsil" data-panel="parsil" title="Parsil Tanah">
-            <span class="sidebar-emoji">🗺️</span>
-            <span class="sidebar-label">Parsil</span>
-        </button>
-        
     </nav>
 
 
@@ -101,51 +129,6 @@
                 </div>
             </div>
     
-            <!-- Jalan -->
-            <div class="layer-group-item">
-                <div class="layer-group-header">
-                    <label class="layer-option" style="margin:0; flex:1;">
-                        <input type="checkbox" id="layerJalan" checked> Jalan
-                    </label>
-                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subJalan', this)"><i class="fas fa-chevron-down"></i></span>
-                </div>
-                <div id="subJalan" class="sub-layer-list" style="display:none;">
-                    <label class="layer-option sub-option">
-                        <input type="checkbox" class="sub-jalan" value="Nasional" checked onchange="applySubFilter('jalan')"> Nasional
-                    </label>
-                    <label class="layer-option sub-option">
-                        <input type="checkbox" class="sub-jalan" value="Provinsi" checked onchange="applySubFilter('jalan')"> Provinsi
-                    </label>
-                    <label class="layer-option sub-option">
-                        <input type="checkbox" class="sub-jalan" value="Kabupaten" checked onchange="applySubFilter('jalan')"> Kabupaten
-                    </label>
-                </div>
-            </div>
-    
-            <!-- Parsil -->
-            <div class="layer-group-item">
-                <div class="layer-group-header">
-                    <label class="layer-option" style="margin:0; flex:1;">
-                        <input type="checkbox" id="layerParsil" checked> Parsil Tanah
-                    </label>
-                    <span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subParsil', this)"><i class="fas fa-chevron-down"></i></span>
-                </div>
-                <div id="subParsil" class="sub-layer-list" style="display:none;">
-                    <label class="layer-option sub-option">
-                        <input type="checkbox" class="sub-parsil" value="SHM" checked onchange="applySubFilter('parsil')"> SHM
-                    </label>
-                    <label class="layer-option sub-option">
-                        <input type="checkbox" class="sub-parsil" value="HGB" checked onchange="applySubFilter('parsil')"> HGB
-                    </label>
-                    <label class="layer-option sub-option">
-                        <input type="checkbox" class="sub-parsil" value="HGU" checked onchange="applySubFilter('parsil')"> HGU
-                    </label>
-                    <label class="layer-option sub-option">
-                        <input type="checkbox" class="sub-parsil" value="HP"  checked onchange="applySubFilter('parsil')"> HP
-                    </label>
-                </div>
-            </div>
-    
 
     
             <!-- GeoJSON Eksternal -->
@@ -215,55 +198,7 @@
         </div>
     </div>
 
-    <!-- Log Bantuan Modal -->
-    <div id="logBantuanModal" class="unified-modal">
-        <div class="modal-content" style="width:500px; max-height:85vh; overflow:hidden; display:flex; flex-direction:column;">
-            <div class="modal-header">
-                <h3 id="logBantuanTitle">Log Bantuan</h3>
-                <span class="modal-close" onclick="closeLogBantuanModal()">&times;</span>
-            </div>
-            <div class="modal-body" style="flex:1; overflow-y:auto; gap:0; padding:0;">
-                <!-- Riwayat -->
-                <div style="padding:15px; border-bottom:1px solid #eee;">
-                    <h4 style="font-size:13px; font-weight:600; color:#555; margin-bottom:10px;">Riwayat Bantuan</h4>
-                    <div id="logBantuanList" style="max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;">
-                        <div class="panel-empty" style="padding:20px;">Belum ada riwayat</div>
-                    </div>
-                </div>
-                <!-- Form Tambah -->
-                <div style="padding:15px;">
-                    <h4 style="font-size:13px; font-weight:600; color:#555; margin-bottom:10px;">Tambah Log Bantuan</h4>
-                    <div class="form-group">
-                        <label>Rumah Ibadah</label>
-                        <select id="logIbadahId"></select>
-                    </div>
-                    <div class="form-group">
-                        <label>Tipe Bantuan</label>
-                        <select id="logTipeBantuan">
-                            <option value="Sembako">Sembako</option>
-                            <option value="Uang Tunai">Uang Tunai</option>
-                            <option value="Pakaian">Pakaian</option>
-                            <option value="Pendidikan">Pendidikan</option>
-                            <option value="Kesehatan">Kesehatan</option>
-                            <option value="Lainnya">Lainnya</option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label>Tanggal</label>
-                        <input type="date" id="logTanggal">
-                    </div>
-                    <div class="form-group">
-                        <label>Keterangan (opsional)</label>
-                        <textarea id="logKeterangan" rows="2" placeholder="Catatan tambahan..."></textarea>
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn-save" id="logSaveBtn">Simpan Log</button>
-                <button class="btn-cancel" onclick="closeLogBantuanModal()">Tutup</button>
-            </div>
-        </div>
-    </div>
+
 
     <!-- Floating Profile / Auth Control -->
     <div id="authWidget" class="auth-widget">
@@ -294,68 +229,7 @@
         </div>
     </div>
 
-    <!-- User Management Modal -->
-    <div id="userManagementModal" class="unified-modal">
-        <div class="modal-content" style="width: 700px; max-width: 95%;">
-            <div class="modal-header">
-                <h3>Manajemen Pengguna (Admin)</h3>
-                <span class="modal-close" id="closeUserManagementModal">&times;</span>
-            </div>
-            <div class="modal-body" style="gap: 15px;">
-                <!-- Form Tambah/Edit User -->
-                <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px;">
-                    <h4 id="userFormTitle" style="font-size: 13px; font-weight:700; color:#334155; margin-bottom: 2px;">Tambah User Baru</h4>
-                    <input type="hidden" id="manageUserId" value="">
-                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
-                        <div class="form-group">
-                            <label>Username</label>
-                            <input type="text" id="manageUsername" placeholder="Username">
-                        </div>
-                        <div class="form-group">
-                            <label>Password (Kosongkan jika tidak diubah)</label>
-                            <input type="password" id="managePassword" placeholder="Password">
-                        </div>
-                    </div>
-                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
-                        <div class="form-group">
-                            <label>Role</label>
-                            <select id="manageRole">
-                                <option value="pengelola" selected>Pengelola Rumah Ibadah</option>
-                                <option value="admin">Admin</option>
-                            </select>
-                        </div>
-                        <div class="form-group" id="manageIbadahGroup">
-                            <label>Rumah Ibadah yang Dikelola</label>
-                            <select id="manageIbadahId">
-                                <!-- Dikonstruksi dinamis dari data rumah ibadah -->
-                            </select>
-                        </div>
-                    </div>
-                    <div style="display: flex; gap: 8px; justify-content: flex-end; margin-top: 5px;">
-                        <button id="btnCancelUserEdit" class="btn-cancel" style="padding: 6px 12px; display:none;">Batal</button>
-                        <button id="btnSaveUser" class="btn-save" style="padding: 6px 16px;">Simpan User</button>
-                    </div>
-                </div>
-                
-                <!-- Tabel Daftar User -->
-                <div style="max-height: 200px; overflow-y: auto; border: 1px solid #cbd5e1; border-radius: 8px;">
-                    <table style="width: 100%; border-collapse: collapse; font-size: 13px; text-align: left;">
-                        <thead>
-                           <tr style="background: #f1f5f9; border-bottom: 1px solid #cbd5e1; color:#475569; position: sticky; top: 0; z-index: 10;">
-                               <th style="padding: 10px 12px;">Username</th>
-                               <th style="padding: 10px 12px;">Role</th>
-                               <th style="padding: 10px 12px;">Rumah Ibadah</th>
-                               <th style="padding: 10px 12px; text-align: center;">Aksi</th>
-                           </tr>
-                        </thead>
-                        <tbody id="userTableBody">
-                            <!-- Diisi dinamis -->
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </div>
+
 
     <!-- Toast Notification Container -->
     <div id="toastContainer"></div>
@@ -373,16 +247,10 @@
     <script src="assets/js/map.js?v=<?= time() ?>"></script>
     <!-- Fitur & Komponen -->
     <script src="assets/js/features/spbu.js?v=<?= time() ?>"></script>
-    <script src="assets/js/features/jalan.js?v=<?= time() ?>"></script>
-    <script src="assets/js/features/parsil.js?v=<?= time() ?>"></script>
-    <script src="assets/js/features/draw_control.js?v=<?= time() ?>"></script>
     <script src="assets/js/features/geolocation.js?v=<?= time() ?>"></script>
-
     <script src="assets/js/features/geojson.js?v=<?= time() ?>"></script>
-    <script src="assets/js/panel.js?v=<?= time() ?>"></script>
-    
-    <!-- Core Auth Feature -->
     <script src="assets/js/features/auth.js?v=<?= time() ?>"></script>
+    <script src="assets/js/panel.js?v=<?= time() ?>"></script>
     
 </body>
 </html>

spbu/read.php

@@ -1,6 +1,6 @@
 <?php
 header("Content-Type: application/json; charset=UTF-8");
-include_once '../db_connect.php';
+include_once 'db_connect.php';
 
 $query = "SELECT * FROM spbu";
 $result = $conn->query($query);

spbu/update.php

@@ -1,8 +1,6 @@
 <?php
 header("Content-Type: application/json; charset=UTF-8");
-require_once '../auth_helper.php';
-requireAdmin();
-include_once '../db_connect.php';
+include_once 'db_connect.php';
 
 $data = json_decode(file_get_contents("php://input"));