add file

2026-06-10 19:26:40 +07:00
parent 02c8394972
commit 7e2d324c2e
49 changed files with 6334 additions and 0 deletions
@@ -0,0 +1,197 @@
+<!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>