WebGIS-PovertyMapping/js/draw_spbu_point.js

/* ============================================================
   draw_spbu_point.js - WebGIS SPBU Point Only
   ============================================================ */

var map = L.map('map', { zoomControl: false }).setView([-0.0263, 109.3425], 13);
L.control.zoom({ position: 'bottomright' }).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
    maxZoom: 19
}).addTo(map);

var drawnItems = new L.FeatureGroup().addTo(map);
var layerGroup24 = L.featureGroup().addTo(map);
var layerGroupTidak = L.featureGroup().addTo(map);
var show24 = true;
var showTidak = true;

function toggleLayer(type) {
    if (type === '24jam') {
        show24 = !show24;
        show24 ? map.addLayer(layerGroup24) : map.removeLayer(layerGroup24);
        document.getElementById('btn24').classList.toggle('active', show24);
    } else if (type === 'tidak') {
        showTidak = !showTidak;
        showTidak ? map.addLayer(layerGroupTidak) : map.removeLayer(layerGroupTidak);
        document.getElementById('btnTidak').classList.toggle('active', showTidak);
    }
}

var drawControl = new L.Control.Draw({
    position: 'topleft',
    edit: { featureGroup: drawnItems },
    draw: {
        marker: true,
        polyline: false,
        polygon: false,
        rectangle: false,
        circle: false,
        circlemarker: false
    }
});
map.addControl(drawControl);

function makeIcon(status) {
    var c = status === '24 Jam' ? '#4ade80' : '#f87171';
    return L.divIcon({
        html: `<svg xmlns="http://www.w3.org/2000/svg" width="26" height="38" viewBox="0 0 26 38"><path d="M13 0C5.8 0 0 5.8 0 13c0 9.75 13 25 13 25S26 22.75 26 13C26 5.8 20.2 0 13 0z" fill="${c}" stroke="rgba(255,255,255,.25)" stroke-width="1.5"/><circle cx="13" cy="13" r="5" fill="rgba(0,0,0,.4)"/><circle cx="13" cy="13" r="3" fill="white"/></svg>`,
        iconSize: [26, 38],
        iconAnchor: [13, 38],
        popupAnchor: [0, -40],
        className: ''
    });
}

function statusBadge(status) {
    return status === '24 Jam'
        ? `<span class="ip-badge badge-green">24 Jam</span>`
        : `<span class="ip-badge badge-red">Tidak 24 Jam</span>`;
}

function buildInfoPopup(d) {
    return `<div class="ip">
        <div class="ip-head" style="background:linear-gradient(135deg,#1d4ed8,#3b82f6)">⛽ SPBU - ${d.nama}</div>
        <div class="ip-body">
            <div class="ip-row"><span class="ip-label">No. SPBU</span><span class="ip-val">${d.no_spbu}</span></div>
            <div class="ip-row"><span class="ip-label">Status</span><span class="ip-val">${statusBadge(d.status)}</span></div>
            <div class="ip-row"><span class="ip-label">Koordinat</span><span class="ip-val" style="font-size:10px">${parseFloat(d.latitude).toFixed(5)}, ${parseFloat(d.longitude).toFixed(5)}</span></div>
            <button class="ip-del" onclick="hapusData(${d.id},'point')">Hapus</button>
        </div>
    </div>`;
}

fetch('../php/show_spbu.php')
    .then(res => res.json())
    .then(data => {
        data.forEach(d => {
            var layer = L.marker([d.latitude, d.longitude], { icon: makeIcon(d.status) });
            layer._type = 'point';
            layer._db_id = d.id;
            layer.bindPopup(buildInfoPopup(d), { maxWidth: 260 });
            d.status === '24 Jam' ? layerGroup24.addLayer(layer) : layerGroupTidak.addLayer(layer);
        });
    })
    .catch(err => console.error('Gagal load data SPBU:', err));

function hapusData(id, type) {
    if (!confirm('Yakin ingin menghapus SPBU ini?')) return;
    fetch(`../php/delete.php?id=${id}&type=${type}`)
        .then(r => r.json())
        .then(r => {
            if (r.message && r.message.toLowerCase().includes('berhasil')) location.reload();
            else alert('Gagal: ' + (r.error || r.message));
        });
}

map.on(L.Draw.Event.CREATED, function(e) {
    if (e.layerType !== 'marker') return;
    var layer = e.layer;
    drawnItems.addLayer(layer);
    handlePoint(layer);
});

function handlePoint(layer) {
    var ll = layer.getLatLng();
    layer.bindPopup(`<div class="pf">
        <div class="pf-head pf-head-point">⛽ Tambah SPBU</div>
        <div class="pf-body">
            <label>Nama SPBU</label><input id="pNama" placeholder="contoh: SPBU Sungai Jawi">
            <label>No. SPBU</label><input id="pNo" placeholder="contoh: 64.761.xx">
            <label>Status Operasional</label>
            <select id="pStatus"><option value="24 Jam">24 Jam</option><option value="Tidak">Tidak 24 Jam</option></select>
            <div class="pf-info">📍 ${ll.lat.toFixed(6)}, ${ll.lng.toFixed(6)}</div>
            <button class="pf-btn" onclick="savePoint(${ll.lat},${ll.lng})">Simpan</button>
        </div>
    </div>`, { maxWidth: 280 }).openPopup();
}

function savePoint(lat, lng) {
    var nama = document.getElementById('pNama').value.trim();
    var no = document.getElementById('pNo').value.trim();
    var status = document.getElementById('pStatus').value;
    if (!nama || !no) {
        alert('Nama dan No. SPBU wajib diisi!');
        return;
    }
    fetch('../php/insert.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ nama, no, status, lat, lng })
    })
        .then(r => r.json())
        .then(r => {
            if (r.message && r.message.includes('berhasil')) location.reload();
            else alert('Gagal: ' + (r.error || r.message));
        });
}