45 lines
1.8 KiB
HTML
45 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Uji CRUD SPBU — Open/Close</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<style>html,body,#map{height:100%;margin:0}</style>
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script>
|
|
const map = L.map('map').setView([-0.03, 109.34], 12);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{attribution:''}).addTo(map);
|
|
|
|
// contoh data SPBU (id, nama, coords, status)
|
|
const spbu = [
|
|
{id:1,name:'SPBU 1',lat:-0.03,lng:109.34,status:'open'},
|
|
{id:2,name:'SPBU 2',lat:-0.04,lng:109.36,status:'closed'}
|
|
];
|
|
|
|
function iconFor(status){
|
|
return L.divIcon({className:'spbu-icon',html:`<div style="background:${status==='open'?'green':'red'};width:14px;height:14px;border-radius:7px;border:2px solid #fff"></div>`});
|
|
}
|
|
|
|
spbu.forEach(s=>{
|
|
const m = L.marker([s.lat,s.lng],{icon:iconFor(s.status)}).addTo(map)
|
|
.bindPopup(`<b>${s.name}</b><br>Status: <span id=st-${s.id}>${s.status}</span><br><button onclick="toggle(${s.id})">Toggle</button>`);
|
|
window['marker_'+s.id]=m;
|
|
});
|
|
|
|
window.toggle = async function(id){
|
|
const s = spbu.find(x=>x.id===id);
|
|
s.status = s.status==='open'?'closed':'open';
|
|
await fetch('api.php',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'update_status',id, status:s.status})});
|
|
const m = window['marker_'+id];
|
|
m.setIcon(iconFor(s.status));
|
|
const el = document.getElementById('st-'+id);
|
|
if(el) el.textContent = s.status;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|