197 lines
4.6 KiB
PHP
197 lines
4.6 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Peta SPBU</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
<style>
|
|
#map { height: 100vh; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
|
|
// ================= MAP =================
|
|
var map = L.map('map').setView([-0.055353822919599796, 109.3495577035227], 15);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map);
|
|
|
|
// ================= ICON =================
|
|
var iconHijau = L.icon({
|
|
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
|
|
iconSize: [32,32]
|
|
});
|
|
|
|
var iconMerah = L.icon({
|
|
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
|
|
iconSize: [32,32]
|
|
});
|
|
|
|
// ================= LOAD DATA =================
|
|
function loadData(){
|
|
|
|
$.getJSON("ambil.php", function(data){
|
|
|
|
data.forEach(function(d){
|
|
|
|
var icon = (d.status === "yes") ? iconHijau : iconMerah;
|
|
|
|
var marker = L.marker([d.lat, d.lng], {
|
|
icon: icon,
|
|
draggable: true
|
|
}).addTo(map);
|
|
|
|
// simpan id di marker
|
|
marker.spbu_id = d.id;
|
|
|
|
// popup edit + hapus
|
|
var popup = `
|
|
<form onsubmit="updateData(event, ${d.id})">
|
|
<b>Edit SPBU</b><br><br>
|
|
|
|
Nama:<br>
|
|
<input type="text" name="nama_spbu" value="${d.nama_spbu}" required><br><br>
|
|
|
|
WA:<br>
|
|
<input type="text" name="no_wa" value="${d.no_wa}" required><br><br>
|
|
|
|
Status:<br>
|
|
<select name="status">
|
|
<option value="yes" ${d.status=="yes"?"selected":""}>Yes</option>
|
|
<option value="no" ${d.status=="no"?"selected":""}>No</option>
|
|
</select><br><br>
|
|
|
|
<button type="submit">Update</button>
|
|
<button type="button" onclick="hapusData(${d.id})">Hapus</button>
|
|
</form>
|
|
`;
|
|
|
|
marker.bindPopup(popup);
|
|
|
|
// drag update koordinat
|
|
marker.on('dragend', function(){
|
|
var pos = marker.getLatLng();
|
|
|
|
$.post("update.php", {
|
|
id: d.id,
|
|
lat: pos.lat,
|
|
lng: pos.lng
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
loadData();
|
|
|
|
// ================= TAMBAH DATA =================
|
|
map.on('click', function(e){
|
|
|
|
var form = `
|
|
<form id="formSPBU">
|
|
<b>Tambah SPBU</b><br><br>
|
|
|
|
Nama:<br>
|
|
<input type="text" name="nama_spbu" required><br><br>
|
|
|
|
WA:<br>
|
|
<input type="text" name="no_wa" required><br><br>
|
|
|
|
Status:<br>
|
|
<select name="status">
|
|
<option value="yes">Yes</option>
|
|
<option value="no">No</option>
|
|
</select><br><br>
|
|
|
|
<input type="hidden" name="lat" value="${e.latlng.lat}">
|
|
<input type="hidden" name="lng" value="${e.latlng.lng}">
|
|
|
|
<button type="submit">Simpan</button>
|
|
</form>
|
|
`;
|
|
|
|
L.popup().setLatLng(e.latlng).setContent(form).openOn(map);
|
|
});
|
|
|
|
// ================= SIMPAN =================
|
|
$(document).on('submit','#formSPBU', function(e){
|
|
e.preventDefault();
|
|
|
|
var formData = $(this).serialize();
|
|
|
|
$.post("simpan.php", formData, function(res){
|
|
|
|
if(res.trim() === "success"){
|
|
|
|
alert("✅ Data berhasil disimpan");
|
|
|
|
map.closePopup();
|
|
|
|
location.reload(); // biar muncul dengan id
|
|
|
|
} else {
|
|
alert("❌ ERROR: " + res);
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
// ================= UPDATE DATA =================
|
|
function updateData(e, id){
|
|
e.preventDefault();
|
|
|
|
var form = e.target;
|
|
var data = $(form).serialize() + "&id=" + id;
|
|
|
|
$.post("edit.php", data, function(res){
|
|
|
|
if(res.trim() === "success"){
|
|
alert("✅ Data diupdate");
|
|
location.reload();
|
|
}else{
|
|
alert("❌ " + res);
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
// ================= HAPUS =================
|
|
function hapusData(id){
|
|
|
|
if(confirm("Yakin hapus data ini?")){
|
|
|
|
$.post("hapus.php", {id:id}, function(res){
|
|
|
|
if(res.trim() === "success"){
|
|
|
|
// hapus marker langsung dari map
|
|
map.eachLayer(function(layer){
|
|
if(layer.spbu_id == id){
|
|
map.removeLayer(layer);
|
|
}
|
|
});
|
|
|
|
alert("✅ Data dihapus");
|
|
|
|
} else {
|
|
alert("❌ Gagal: " + res);
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |