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 => {