webgis-poverty-pontianak/assets/js/features/jalan.js

// --- Fitur Jalan ---

const jalanColors = {
    'Nasional': '#ff0000',  // Merah
    'Provinsi': '#0000ff',  // Biru
    'Kabupaten': '#00ff00'  // Hijau
};

function loadJalan() {
    jalanLayer.clearLayers();
    fetch('api/jalan/read.php')
        .then(res => res.json())
        .then(data => {
            if (data.status === 'success' && data.data) {
                data.data.forEach(item => {
                    addJalanToMap(item);
                });
            }
            if (window.refreshActivePanel) window.refreshActivePanel();
        });
}

function addJalanToMap(item) {
    // geom adalah GeoJSON {type: "LineString", coordinates: [[lng, lat], ...]}
    const latlngs = item.geom.coordinates.map(coord => [coord[1], coord[0]]);
    
    const polyline = L.polyline(latlngs, {
        color: jalanColors[item.status] || '#3388ff',
        weight: 5
    });

    polyline.jalanData = item;

    // Tampilkan label nama jalan sejajar dengan garis (diagonal)
    polyline.setText(item.nama, {
        center: true,
        offset: 0,
        attributes: {
            fill: '#000000',
            'font-weight': 'bold',
            'font-size': '14px',
            'dy': '7'
        }
    });

    // Hitung popupContent sekali saat jalan dibuat
    const d = item;
    const popupContent = `
        <div style="font-family: Arial, sans-serif; min-width: 150px;">
            <h4 style="margin:0 0 5px 0;">Jalan ${d.nama}</h4>
            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
            <p style="margin: 0 0 10px 0;"><b>Panjang:</b> ${d.panjang.toFixed(2)} m</p>
            <div style="display:flex; gap:5px;">
                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditJalanModal(${d.id})">Edit</button>
                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteJalan(${d.id})">Hapus</button>
            </div>
        </div>
    `;
    
    polyline.bindPopup(popupContent);

    jalanLayer.addLayer(polyline);
}

window.openEditJalanModal = function(id) {
    let d = null;
    jalanLayer.eachLayer(function(layer) {
        if (layer.jalanData && layer.jalanData.id == id) d = layer.jalanData;
    });
    if (!d) return;

    const bodyHTML = `
        <div class="form-group">
            <label>Nama Jalan</label>
            <input type="text" id="editJalanNama" value="${d.nama}">
        </div>
        <div class="form-group">
            <label>Status</label>
            <select id="editJalanStatus">
                <option value="Nasional" ${d.status === 'Nasional' ? 'selected' : ''}>Nasional</option>
                <option value="Provinsi" ${d.status === 'Provinsi' ? 'selected' : ''}>Provinsi</option>
                <option value="Kabupaten" ${d.status === 'Kabupaten' ? 'selected' : ''}>Kabupaten</option>
            </select>
        </div>
        <div class="form-group">
            <label>Panjang: ${d.panjang.toFixed(2)} m</label>
        </div>
    `;
    map.closePopup();
    openModal("Edit Jalan", bodyHTML, function() {
        window.saveEditJalan(d.id, 'editJalanNama', 'editJalanStatus');
    });
};

window.saveEditJalan = function(id, namaId, statusId) {
    const nama = document.getElementById(namaId).value;
    const status = document.getElementById(statusId).value;

    fetch('api/jalan/update.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id, nama, status })
    })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            map.closePopup();
            closeModal();
            loadJalan();
        } else {
            alert(data.message);
        }
    });
};

window.deleteJalan = function(id) {
    openConfirmModal("Yakin hapus jalan ini?", function() {
        fetch('api/jalan/delete.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id })
        })
        .then(res => res.json())
        .then(data => {
            if(data.status === 'success') {
                map.closePopup();
                loadJalan();
            } else {
                alert(data.message);
            }
        });
    });
};

window.saveNewJalan = function(geoJsonStr, panjang, namaId, statusId) {
    const nama = document.getElementById(namaId).value;
    if (!nama) {
        alert("Nama jalan harus diisi!");
        return false;
    }
    
    const status = document.getElementById(statusId).value;

    const geom = JSON.parse(geoJsonStr);

    fetch('api/jalan/create.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ nama, status, panjang, geom })
    })
    .then(res => res.json())
    .then(data => {
        if(data.status === 'success') {
            closeModal();
            loadJalan();
        } else {
            alert(data.message);
        }
    });
    return true;
};

// Initial Load
loadJalan();