From ed894bfaf0eccff4386ea9754a930be0cec83f65 Mon Sep 17 00:00:00 2001 From: raditarahman5-cloud Date: Wed, 10 Jun 2026 20:29:19 +0700 Subject: [PATCH] feat: Menambahkan fitur drag and drop marker ke database --- api/api.php | 32 ++++++++++++++++++++++++++------ infra/script.js | 39 ++++++++++++++++++++++++++++++++------- sosial/script.js | 39 ++++++++++++++++++++++++++++++++------- warga/script.js | 39 ++++++++++++++++++++++++++++++++------- 4 files changed, 122 insertions(+), 27 deletions(-) diff --git a/api/api.php b/api/api.php index 517038b..c7c3fac 100644 --- a/api/api.php +++ b/api/api.php @@ -133,14 +133,34 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') { $tipe = $_POST['tipe'] ?? ''; $koordinat = $conn->real_escape_string($_POST['koordinat'] ?? ''); - if ($id > 0 && $koordinat != '') { + if ($id > 0) { if ($tipe == 'jalan') { - $panjang = (float)($_POST['panjang_m'] ?? 0); - $sql = "UPDATE jalan SET koordinat='$koordinat', panjang_m=$panjang WHERE id=$id"; - executeQuery($conn, $sql); + if ($koordinat != '') { + $panjang = (float)($_POST['panjang_m'] ?? 0); + $sql = "UPDATE jalan SET koordinat='$koordinat', panjang_m=$panjang WHERE id=$id"; + executeQuery($conn, $sql); + } } elseif ($tipe == 'parsil') { - $sql = "UPDATE parsil SET koordinat='$koordinat' WHERE id=$id"; - executeQuery($conn, $sql); + if ($koordinat != '') { + $sql = "UPDATE parsil SET koordinat='$koordinat' WHERE id=$id"; + executeQuery($conn, $sql); + } + } else { + $lat = $conn->real_escape_string($_POST['lat'] ?? ''); + $lng = $conn->real_escape_string($_POST['lng'] ?? ''); + if ($lat != '' && $lng != '') { + $tabelMap = [ + 'warga' => 'warga', + 'masjid' => 'rumah_ibadah', + 'pelaporan' => 'pelaporan', + 'spbu' => 'spbu' + ]; + $tabel = $tabelMap[$tipe] ?? ''; + if ($tabel) { + $sql = "UPDATE $tabel SET latitude='$lat', longitude='$lng' WHERE id=$id"; + executeQuery($conn, $sql); + } + } } } } diff --git a/infra/script.js b/infra/script.js index f8a52dc..701a59c 100644 --- a/infra/script.js +++ b/infra/script.js @@ -407,7 +407,8 @@ function renderMap(data) { popupAnchor: [0, -40] }); - L.marker([m.latitude, m.longitude], { icon: masjidIcon }).addTo(layerMasjid).bindPopup(popup); + L.marker([m.latitude, m.longitude], { icon: masjidIcon, draggable: true }).addTo(layerMasjid).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); }); L.circle([m.latitude, m.longitude], { radius: currentRadius, color: '#2563eb', fillOpacity: 0.1, weight: 1 }).addTo(layerMasjidRadius); @@ -451,8 +452,9 @@ function renderMap(data) { }); L.marker([p.latitude, p.longitude], { - icon: pelaporanIcon - }).addTo(layerPelaporan).bindPopup(popup); + icon: pelaporanIcon, draggable: true + }).addTo(layerPelaporan).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); }); }); } @@ -469,8 +471,9 @@ function renderMap(data) { `; L.marker([s.latitude, s.longitude], { - icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }) - }).addTo(targetLayer).bindPopup(popup); + icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }), draggable: true + }).addTo(targetLayer).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); }); }); } @@ -542,8 +545,9 @@ function renderMap(data) { `; - L.marker(pos, { icon: houseIcon }) - .addTo(layerWarga).bindPopup(popup); + L.marker(pos, { icon: houseIcon, draggable: true }) + .addTo(layerWarga).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); }); }); } @@ -747,3 +751,24 @@ function editData(tipe, id) { // INIT loadData(); + +function updateMarkerCoord(id, tipe, latlng) { + var fd = new FormData(); + fd.append('action', 'update_koordinat'); + fd.append('id', id); + fd.append('tipe', tipe); + fd.append('lat', latlng.lat); + fd.append('lng', latlng.lng); + fetch('../api/api.php', { method: 'POST', body: fd }) + .then(() => { + Swal.fire({ + icon: 'success', + title: 'Tersimpan', + text: 'Posisi titik berhasil digeser!', + timer: 1500, + showConfirmButton: false, + toast: true, + position: 'top-end' + }); + }); +} diff --git a/sosial/script.js b/sosial/script.js index 57f0b58..803089c 100644 --- a/sosial/script.js +++ b/sosial/script.js @@ -418,7 +418,8 @@ function renderMap(data) { popupAnchor: [0, -40] }); - L.marker([m.latitude, m.longitude], { icon: masjidIcon }).addTo(layerMasjid).bindPopup(popup); + L.marker([m.latitude, m.longitude], { icon: masjidIcon, draggable: true }).addTo(layerMasjid).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); }); L.circle([m.latitude, m.longitude], { radius: currentRadius, color: '#2563eb', fillOpacity: 0.1, weight: 1 }).addTo(layerMasjidRadius); @@ -462,8 +463,9 @@ function renderMap(data) { }); L.marker([p.latitude, p.longitude], { - icon: pelaporanIcon - }).addTo(layerPelaporan).bindPopup(popup); + icon: pelaporanIcon, draggable: true + }).addTo(layerPelaporan).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); }); }); } @@ -480,8 +482,9 @@ function renderMap(data) { `; L.marker([s.latitude, s.longitude], { - icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }) - }).addTo(targetLayer).bindPopup(popup); + icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }), draggable: true + }).addTo(targetLayer).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); }); }); } @@ -559,8 +562,9 @@ function renderMap(data) { `; - L.marker(pos, { icon: houseIcon }) - .addTo(layerWarga).bindPopup(popup); + L.marker(pos, { icon: houseIcon, draggable: true }) + .addTo(layerWarga).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); }); }); } @@ -766,3 +770,24 @@ function editData(tipe, id) { // INIT loadData(); + +function updateMarkerCoord(id, tipe, latlng) { + var fd = new FormData(); + fd.append('action', 'update_koordinat'); + fd.append('id', id); + fd.append('tipe', tipe); + fd.append('lat', latlng.lat); + fd.append('lng', latlng.lng); + fetch('../api/api.php', { method: 'POST', body: fd }) + .then(() => { + Swal.fire({ + icon: 'success', + title: 'Tersimpan', + text: 'Posisi titik berhasil digeser!', + timer: 1500, + showConfirmButton: false, + toast: true, + position: 'top-end' + }); + }); +} diff --git a/warga/script.js b/warga/script.js index 3e5e71c..ff9b945 100644 --- a/warga/script.js +++ b/warga/script.js @@ -407,7 +407,8 @@ function renderMap(data) { popupAnchor: [0, -40] }); - L.marker([m.latitude, m.longitude], { icon: masjidIcon }).addTo(layerMasjid).bindPopup(popup); + L.marker([m.latitude, m.longitude], { icon: masjidIcon, draggable: true }).addTo(layerMasjid).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); }); L.circle([m.latitude, m.longitude], { radius: currentRadius, color: '#2563eb', fillOpacity: 0.1, weight: 1 }).addTo(layerMasjidRadius); @@ -451,8 +452,9 @@ function renderMap(data) { }); L.marker([p.latitude, p.longitude], { - icon: pelaporanIcon - }).addTo(layerPelaporan).bindPopup(popup); + icon: pelaporanIcon, draggable: true + }).addTo(layerPelaporan).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); }); }); } @@ -469,8 +471,9 @@ function renderMap(data) { `; L.marker([s.latitude, s.longitude], { - icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }) - }).addTo(targetLayer).bindPopup(popup); + icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }), draggable: true + }).addTo(targetLayer).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); }); }); } @@ -542,8 +545,9 @@ function renderMap(data) { `; - L.marker(pos, { icon: houseIcon }) - .addTo(layerWarga).bindPopup(popup); + L.marker(pos, { icon: houseIcon, draggable: true }) + .addTo(layerWarga).bindPopup(popup) + .on('dragend', function(e){ updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); }); }); } @@ -747,3 +751,24 @@ function editData(tipe, id) { // INIT loadData(); + +function updateMarkerCoord(id, tipe, latlng) { + var fd = new FormData(); + fd.append('action', 'update_koordinat'); + fd.append('id', id); + fd.append('tipe', tipe); + fd.append('lat', latlng.lat); + fd.append('lng', latlng.lng); + fetch('../api/api.php', { method: 'POST', body: fd }) + .then(() => { + Swal.fire({ + icon: 'success', + title: 'Tersimpan', + text: 'Posisi titik berhasil digeser!', + timer: 1500, + showConfirmButton: false, + toast: true, + position: 'top-end' + }); + }); +}