add file

2026-06-10 18:07:01 +07:00
parent c4295c5395
commit 5257946cfa
69 changed files with 10741 additions and 0 deletions
@@ -0,0 +1,195 @@
+<!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>