first

2026-05-12 10:16:16 +07:00
parent bae0569701
commit c2efc4414f
37 changed files with 2222 additions and 18 deletions
@@ -0,0 +1,44 @@
+<!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>