195 lines
5.2 KiB
PHP
195 lines
5.2 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>GIS SPBU PRO FINAL</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
|
|
<style>
|
|
#map { height: 100vh; }
|
|
|
|
.btn {
|
|
padding: 4px 8px;
|
|
margin-top: 5px;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.edit { background: orange; color: white; }
|
|
.delete { background: red; color: white; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="map"></div>
|
|
|
|
<script>
|
|
const map = L.map('map').setView([-0.02, 109.34], 13);
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
let markers = [];
|
|
|
|
// ICON
|
|
const greenIcon = new L.Icon({
|
|
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
|
|
iconSize: [32, 32]
|
|
});
|
|
|
|
const redIcon = new L.Icon({
|
|
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
|
|
iconSize: [32, 32]
|
|
});
|
|
|
|
// ================= LOAD DATA =================
|
|
function loadData() {
|
|
markers.forEach(m => map.removeLayer(m));
|
|
markers = [];
|
|
|
|
fetch('ambil.php')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
data.forEach(d => {
|
|
|
|
let icon = d.status === 'yes' ? greenIcon : redIcon;
|
|
|
|
const marker = L.marker([d.latitude, d.longitude], {
|
|
icon: icon,
|
|
draggable: true
|
|
}).addTo(map);
|
|
|
|
// DRAG SIMPAN LOKASI (FIX)
|
|
marker.on('dragend', function(e){
|
|
const pos = e.target.getLatLng();
|
|
|
|
const dataSend = new URLSearchParams();
|
|
dataSend.append("id", d.id);
|
|
dataSend.append("lat", pos.lat);
|
|
dataSend.append("lng", pos.lng);
|
|
|
|
fetch('update_lokasi.php', {
|
|
method: 'POST',
|
|
body: dataSend
|
|
})
|
|
.then(res => res.text())
|
|
.then(res => {
|
|
console.log(res);
|
|
alert("Lokasi berhasil diupdate!");
|
|
});
|
|
});
|
|
|
|
marker.bindPopup(`
|
|
<b>${d.nama_spbu}</b><br>
|
|
WA: ${d.no_wa}<br>
|
|
24 Jam: <span style="color:${d.status === 'yes' ? 'green' : 'red'}">${d.status}</span><br>
|
|
|
|
<button class="btn edit" onclick="editData(${d.id}, '${d.nama_spbu}', '${d.no_wa}', '${d.status}')">Edit</button>
|
|
<button class="btn delete" onclick="hapusData(${d.id})">Hapus</button>
|
|
`);
|
|
|
|
markers.push(marker);
|
|
});
|
|
});
|
|
}
|
|
|
|
// ================= EDIT =================
|
|
function editData(id, nama, wa, status) {
|
|
const form = `
|
|
<form id="editForm">
|
|
Nama:<br>
|
|
<input type="text" name="nama" value="${nama}"><br>
|
|
WA:<br>
|
|
<input type="text" name="wa" value="${wa}"><br>
|
|
Status:<br>
|
|
<select name="status">
|
|
<option ${status=='yes'?'selected':''} value="yes">Yes</option>
|
|
<option ${status=='no'?'selected':''} value="no">No</option>
|
|
</select><br><br>
|
|
<button type="submit">Update</button>
|
|
</form>
|
|
`;
|
|
|
|
L.popup().setLatLng(map.getCenter()).setContent(form).openOn(map);
|
|
|
|
setTimeout(()=>{
|
|
document.getElementById('editForm').addEventListener('submit', function(e){
|
|
e.preventDefault();
|
|
|
|
const data = new FormData(this);
|
|
data.append('id', id);
|
|
|
|
fetch('edit.php', {
|
|
method:'POST',
|
|
body:data
|
|
}).then(()=>{
|
|
alert("Data diupdate!");
|
|
loadData();
|
|
});
|
|
});
|
|
},300);
|
|
}
|
|
|
|
// ================= HAPUS =================
|
|
function hapusData(id) {
|
|
if(confirm("Yakin hapus?")) {
|
|
fetch('hapus.php?id=' + id)
|
|
.then(()=>{
|
|
alert("Data dihapus!");
|
|
loadData();
|
|
});
|
|
}
|
|
}
|
|
|
|
// ================= TAMBAH =================
|
|
map.on('click', function(e) {
|
|
const lat = e.latlng.lat;
|
|
const lng = e.latlng.lng;
|
|
|
|
const form = `
|
|
<form id="formInput">
|
|
Nama SPBU:<br>
|
|
<input type="text" name="nama_spbu" required><br>
|
|
|
|
No WA:<br>
|
|
<input type="text" name="no_wa" required><br>
|
|
|
|
Status:<br>
|
|
<select name="status">
|
|
<option value="yes">Yes</option>
|
|
<option value="no">No</option>
|
|
</select><br><br>
|
|
|
|
<input type="hidden" name="latitude" value="${lat}">
|
|
<input type="hidden" name="longitude" value="${lng}">
|
|
|
|
<button type="submit">Simpan</button>
|
|
</form>
|
|
`;
|
|
|
|
L.popup().setLatLng(e.latlng).setContent(form).openOn(map);
|
|
|
|
setTimeout(()=>{
|
|
document.getElementById('formInput').addEventListener('submit', function(ev){
|
|
ev.preventDefault();
|
|
|
|
const data = new FormData(this);
|
|
|
|
fetch('simpan.php',{
|
|
method:'POST',
|
|
body:data
|
|
}).then(()=>{
|
|
alert("Tersimpan!");
|
|
loadData();
|
|
});
|
|
});
|
|
},300);
|
|
});
|
|
|
|
loadData();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |