diff --git a/01/index.html b/01/index.html index 3883f78..857c458 100644 --- a/01/index.html +++ b/01/index.html @@ -55,6 +55,7 @@ } }); + // Menentukan gaya warna jalan berdasarkan status function gaya_jalan(status) { if (status === 'Nasional') return { color: 'red', weight: 6 }; if (status === 'Provinsi') return { color: 'blue', weight: 4 }; @@ -63,8 +64,9 @@ let sedang_memproses = false; - // Menangani penggambaran objek + // Menangani event penggambaran objek spasial baru dari Leaflet-Geoman map.on('pm:create', function(e) { + // Mencegah klik ganda yang memicu pembuatan layer ganda bertumpuk if (sedang_memproses) { map.removeLayer(e.layer); return; } sedang_memproses = true; setTimeout(() => { sedang_memproses = false; }, 500); @@ -75,8 +77,10 @@ if (shape === 'Line') { const geojson_mentah = layer.toGeoJSON(); + // Melakukan escape karakter kutip agar string JSON aman disuntikkan ke atribut onclick HTML const geo_data = JSON.stringify(geojson_mentah.geometry).replace(/"/g, '"'); const panjang_meter = turf.length(geojson_mentah, {units: 'kilometers'}) * 1000; + popup_content = `

Tambah Jalan Baru

@@ -87,6 +91,7 @@ const geojson_mentah = layer.toGeoJSON(); const geo_data = JSON.stringify(geojson_mentah.geometry).replace(/"/g, '"'); const luas_meter_p = turf.area(geojson_mentah); + popup_content = `

Tambah Persil Baru

@@ -95,9 +100,6 @@ layer.setStyle({fillColor: 'yellow', fillOpacity: 0.5, color: 'black'}); } else if (shape === 'Marker') { - /* * Menarik titik presisi lintang dan bujur langsung dari objek Leaflet. - * Ini diperlukan karena tabel spbu_locations meminta kolom lat dan lng terpisah, bukan geojson. - */ const titik_kordinat = layer.getLatLng(); popup_content = `

Tambah SPBU Baru

@@ -113,7 +115,7 @@ setTimeout(() => { layer.openPopup(); }, 100); }); - // Menghapus data terpilih + // Menangani event penghapusan data spasial map.on('pm:remove', function(e) { const layer = e.layer; if (layer.db_id && layer.db_type) { @@ -124,6 +126,9 @@ body: JSON.stringify({ id: layer.db_id, type: layer.db_type }) }).then(r => r.json()).then(res => { if(res.status !== 'success') { alert('Gagal Hapus: ' + res.message); location.reload(); } + }).catch(err => { + alert('Kesalahan jaringan saat menghapus data.'); + console.error(err); }); } else { location.reload(); @@ -131,9 +136,11 @@ } }); - // Mengirim payload ke server PHP + // Mengumpulkan dan mengirimkan payload data baru ke server PHP window.simpan_baru = function(type, hitungan, geo, lat = null, lng = null) { let payload = { type: type }; + + // Membentuk struktur data (payload) berdasarkan tipe objek if (type === 'jalan') { payload.nama = document.getElementById('nama_jln').value; payload.status = document.getElementById('stat_jln').value; @@ -152,7 +159,18 @@ payload.lng = lng; } - fetch('simpan_feature.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }) + // Memvalidasi apakah kolom nama sudah diisi sebelum menghubungi server + if (!payload.nama || payload.nama.trim() === '') { + alert("Informasi nama/identitas wajib diisi!"); + return; + } + + // Mengeksekusi permintaan pengiriman data asinkronus ke API backend + fetch('simpan_feature.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload) + }) .then(r => r.json()).then(res => { if(res.status === 'success') { alert('Berhasil Disimpan!'); @@ -161,73 +179,53 @@ alert('Gagal: ' + res.message); console.error(res); } + }).catch(err => { + alert('Terjadi kesalahan jaringan atau server tidak merespons.'); + console.error('Catch Error:', err); }); }; - // Memperbarui atribut yang ada + // Memperbarui atribut data yang sudah ada window.update_data = function(type, id) { + let nama_baru = document.getElementById('edit_nama').value; + if (!nama_baru || nama_baru.trim() === '') { + alert("Nama tidak boleh kosong!"); + return; + } + let payload = { type: type, id: id, - nama: document.getElementById('edit_nama').value, + nama: nama_baru, status: document.getElementById('edit_status').value }; - fetch('edit_feature.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }) + fetch('edit_feature.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload) + }) .then(r => r.json()).then(res => { - if(res.status === 'success') { alert('Berhasil Diupdate!'); location.reload(); } else alert('Gagal Update: ' + res.message); + if(res.status === 'success') { + alert('Berhasil Diupdate!'); + location.reload(); + } else { + alert('Gagal Update: ' + res.message); + } + }).catch(err => { + alert('Gagal menghubungi server untuk pembaharuan.'); + console.error('Catch Error:', err); }); }; - - function show_jalan_form(layer, geojson_string) { - const form_html = ` -
-

Tambah Jalan Baru

-
-
-
-
- -
- `; - layer.bindPopup(form_html).openPopup(); - } - - /** - * Menampilkan formulir sembul untuk pengisian data bidang persil tanah baru - * @param {Object} layer - Objek layer Leaflet Draw - * @param {String} geojson_string - String representasi spasial GeoJSON - * @param {Number} area_size - Luas area hasil kalkulasi sistem - */ - function show_persil_form(layer, geojson_string, area_size) { - const form_html = ` -
-

Tambah Persil Baru

-
-
-
-
-

Luas: ${area_size.toFixed(2)} m²

- -
- `; - layer.bindPopup(form_html).openPopup(); - } - - // Merender data dari database + // Merender seluruh data spasial dari pangkalan data ke peta Leaflet function muat_data_feature() { - fetch('tampil_feature.php').then(response => response.json()).then(res => { + fetch('tampil_feature.php') + .then(response => response.json()) + .then(res => { if (res.status === "success") { - // Jalan + // Merender data garis jalan res.jalan.forEach(j => { const geojson_obj = JSON.parse(j.geojson); L.geoJSON(geojson_obj, { @@ -251,7 +249,7 @@ }).addTo(map); }); - // Persil + // Merender data poligon persil tanah res.persil.forEach(p => { const geojson_obj = JSON.parse(p.geojson); L.geoJSON(geojson_obj, { @@ -276,7 +274,7 @@ }).addTo(map); }); - // SPBU + // Merender titik lokasi SPBU ke dalam grup layer yang berbeda res.spbu.forEach(s => { const spbu_marker = L.marker([parseFloat(s.lat), parseFloat(s.lng)]); spbu_marker.db_id = s.id; @@ -305,12 +303,13 @@ layer_spbu_24.addTo(map); layer_spbu_non_24.addTo(map); } - else { - // TAMBAHKAN DUA BARIS INI: Menampilkan peringatan jika database gagal ditarik - alert("Gagal memuat data peta: " + res.message); - console.error("Kesalahan Sistem:", res.message); - } - }); + else { + alert("Gagal memuat data peta: " + res.message); + console.error("Kesalahan Sistem:", res.message); + } + }).catch(err => { + console.error('Kesalahan Jaringan: Gagal merender data peladen', err); + }); } muat_data_feature();