initialize

2026-06-11 13:11:51 +07:00
commit 48f20aabed
52 changed files with 11765 additions and 0 deletions
@@ -0,0 +1,172 @@
+// --- 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 isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
+    let actionButtons = '';
+    if (isAdmin) {
+        actionButtons = `
+            <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>
+        `;
+    }
+    
+    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>
+            ${actionButtons}
+        </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();