Fix PHP variable errors and add API fetch handlers for roads and parcels

2026-06-14 20:46:52 +07:00
parent 61b1879377
commit 422c6cb496
2 changed files with 194 additions and 57 deletions
@@ -121,20 +121,59 @@
            HP:  '#1d4ed8'
        };

-        const existingData = [];  // Data diambil dari API
-        existingData.forEach(item => {
-            if (!Array.isArray(item.coords)) return;
-            const coords = item.coords.map(c => [c.lat, c.lng]);
-            const fillColor = statusColor[item.status_kepemilikan] || '#475569';
-            const poly = L.polygon(coords, {
-                color: fillColor,
-                fillColor: fillColor,
-                fillOpacity: 0.15,
-                weight: 2,
-                opacity: 0.9
-            }).addTo(polygonLayerGroup);
-            poly.bindPopup(`<strong>${escapeHtml(item.nama_pemilik)}</strong><br>${escapeHtml(item.status_kepemilikan)}<br>Luas: ${Number(item.luas_sqm).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})} m²`);
-        });
+        let existingData = [];
+
+        // Load data from API
+        function loadTanahDataFromAPI() {
+            fetch('api/get_parcels.php')
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success && Array.isArray(data.parcels)) {
+                        existingData = data.parcels;
+                        renderExistingParcels();
+                    }
+                })
+                .catch(error => console.error('Error loading parcels:', error));
+        }
+
+        function renderExistingParcels() {
+            // Clear existing layers
+            polygonLayerGroup.clearLayers();
+
+            // Render parcels on map
+            existingData.forEach(item => {
+                const coords = typeof item.coordinates === 'string' ? JSON.parse(item.coordinates) : item.coordinates;
+                if (!Array.isArray(coords)) return;
+                
+                const fillColor = statusColor[item.owner_status] || '#475569';
+                const poly = L.polygon(coords.map(c => [c.lat || c[0], c.lng || c[1]]), {
+                    color: fillColor,
+                    fillColor: fillColor,
+                    fillOpacity: 0.15,
+                    weight: 2,
+                    opacity: 0.9
+                }).addTo(polygonLayerGroup);
+                
+                poly.bindPopup(`<strong>${escapeHtml(item.owner_name || 'N/A')}</strong><br>${escapeHtml(item.owner_status)}<br>Luas: ${Number(item.area).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})} m²`);
+            });
+
+            // Update list display
+            const listContainer = document.getElementById('tanah-list');
+            if (existingData.length === 0) {
+                listContainer.innerHTML = '<div class="info-card">Belum ada data parsil yang tersimpan.</div>';
+            } else {
+                listContainer.innerHTML = existingData.map(item => `
+                    <div class="info-card">
+                        <strong>${escapeHtml(item.owner_name || 'N/A')} · ${escapeHtml(item.owner_status)}</strong>
+                        <div>Luas: ${Number(item.area).toLocaleString('id-ID', {minimumFractionDigits:2, maximumFractionDigits:2})} m²</div>
+                        <div style="margin-top: 10px;"><span class="status-pill status-${item.owner_status.toLowerCase()}">${escapeHtml(item.owner_status)}</span></div>
+                    </div>
+                `).join('');
+            }
+        }
+
+        // Load data on page load
+        loadTanahDataFromAPI();

        function escapeHtml(str) {
            return String(str)
@@ -257,10 +296,39 @@

        const form = document.getElementById('tanahForm');
        form.addEventListener('submit', event => {
+            event.preventDefault();
+            
            if (currentCoordinates.length < 4 || !document.getElementById('luas_sqm').value) {
-                event.preventDefault();
                alert('Buat polygon tertutup terlebih dahulu sebelum submit. Klik titik awal lagi untuk menutup polygon.');
+                return;
            }
+
+            const formData = {
+                owner_name: document.getElementById('nama_pemilik').value,
+                owner_status: document.getElementById('status_kepemilikan').value,
+                area: document.getElementById('luas_sqm').value,
+                coordinates: document.getElementById('koordinat_json').value
+            };
+
+            fetch('api/save_parcel.php', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: new URLSearchParams(formData)
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    alert('Data parsil berhasil disimpan!');
+                    currentCoordinates = [];
+                    redrawCurrentShape();
+                    updateForm();
+                    form.reset();
+                    loadTanahDataFromAPI();
+                } else {
+                    alert('Error: ' + (data.message || 'Gagal menyimpan data'));
+                }
+            })
+            .catch(error => alert('Error: ' + error));
        });
    </script>
 </body>