Initial commit: Setup Landing Page dan file pertemuan

pertemuan1/script.js

@@ -0,0 +1,577 @@
+// ==========================================
+// 1. INISIALISASI PETA & LAYER
+// ==========================================
+var map = L.map('map', { zoomControl: false }).setView([-0.0227, 109.3425], 14);
+
+// Zoom control di kanan bawah (tampilan modern)
+L.control.zoom({ position: 'bottomright' }).addTo(map);
+
+// OpenStreetMap Tile Layer
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+
+// Layer Groups
+var jalanLayer = L.layerGroup().addTo(map);
+var parsilLayer = L.layerGroup().addTo(map);
+var drawnItems = new L.FeatureGroup().addTo(map);
+
+// Layer Control (Checkbox di kanan atas)
+var overlayMaps = {
+    "🛣️ Jaringan Jalan": jalanLayer,
+    "🏘️ Parsil Bangunan": parsilLayer
+};
+L.control.layers(null, overlayMaps, { collapsed: true, position: 'bottomleft' }).addTo(map);
+
+// Global Variables
+var databasePencarian = [];
+var sidebarDrawMode = null; // 'polyline' | 'polygon'
+var sidebarKoordinat = "";
+var sidebarDrawHandler = null;
+
+// ==========================================
+// 2. FUNGSI LOAD DATA DARI DATABASE
+// ==========================================
+function loadJalan() {
+    jalanLayer.clearLayers();
+    
+    // Reset database pencarian khusus kategori Jalan
+    databasePencarian = databasePencarian.filter(item => item.kategori !== 'Jalan');
+
+    fetch('load.php?jenis=jalan')
+        .then(res => res.json())
+        .then(data => {
+            data.forEach(item => {
+                try {
+                    var geom = JSON.parse(item.koordinat);
+                    
+                    // Warna berdasarkan status jalan
+                    var warna = item.status === 'Jalan Nasional' ? '#ef4444' // Red
+                              : item.status === 'Jalan Provinsi' ? '#fbbf24' // Yellow/Amber
+                              : '#10b981'; // Green (Kabupaten)
+
+                    var viewHTML = `
+                        <div class="popup-container" id="popup-jalan-${item.id}">
+                            <div class="popup-header popup-header-jalan">
+                                <h4>${item.nama_jalan}</h4>
+                                <span class="popup-type-badge">🛣️ Jaringan Jalan</span>
+                            </div>
+                            <div class="popup-body">
+                                <div class="info-row">
+                                    <span class="info-label">Status Jalan</span>
+                                    <span class="info-value" style="color:${warna}; font-weight:600;">${item.status}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="info-label">Panjang Terukur</span>
+                                    <span class="info-value">${item.panjang} m</span>
+                                </div>
+                                <div class="btn-group">
+                                    <button class="btn btn-edit" onclick="formEditJalan('${item.id}', '${item.nama_jalan}', '${item.status}')">✏️ Edit</button>
+                                    <button class="btn btn-delete" onclick="deleteData('jalan', '${item.id}')">🗑️ Hapus</button>
+                                </div>
+                            </div>
+                        </div>`;
+
+                    var layerJalan = L.geoJSON(geom, { 
+                        style: { color: warna, weight: 5, opacity: 0.85 } 
+                    }).bindPopup(viewHTML).addTo(jalanLayer);
+
+                    layerJalan.on('click', function () { 
+                        map.fitBounds(layerJalan.getBounds(), { padding: [50, 50] }); 
+                    });
+
+                    databasePencarian.push({
+                        namaLower: item.nama_jalan.toLowerCase(),
+                        namaAsli: item.nama_jalan,
+                        kategori: 'Jalan',
+                        ikon: '🛣️',
+                        tipe: 'area',
+                        layer: layerJalan
+                    });
+                } catch (error) { 
+                    console.error("Error parse koordinat jalan ID: " + item.id, error); 
+                }
+            });
+        })
+        .catch(e => console.log('Belum ada data Jalan', e));
+}
+
+function loadParsil() {
+    parsilLayer.clearLayers();
+    
+    // Reset database pencarian khusus kategori Parsil
+    databasePencarian = databasePencarian.filter(item => item.kategori !== 'Parsil');
+
+    fetch('load.php?jenis=parsil')
+        .then(res => res.json())
+        .then(data => {
+            data.forEach(item => {
+                try {
+                    var geom = JSON.parse(item.koordinat);
+                    
+                    // Warna berdasarkan status sertifikat tanah
+                    var warna = item.status === 'SHM' ? '#10b981' // Green
+                              : item.status === 'HGB' ? '#3b82f6' // Blue
+                              : item.status === 'HGU' ? '#8b5cf6' // Purple
+                              : '#f59e0b'; // Orange (HP)
+
+                    var viewHTML = `
+                        <div class="popup-container" id="popup-parsil-${item.id}">
+                            <div class="popup-header popup-header-parsil">
+                                <h4>${item.nama_pemilik}</h4>
+                                <span class="popup-type-badge">🏘️ Parsil Bangunan</span>
+                            </div>
+                            <div class="popup-body">
+                                <div class="info-row">
+                                    <span class="info-label">Status Sertifikat</span>
+                                    <span class="info-value" style="color:${warna}; font-weight:600;">${item.status}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="info-label">Luas Terukur</span>
+                                    <span class="info-value">${item.luas} m²</span>
+                                </div>
+                                <div class="btn-group">
+                                    <button class="btn btn-edit" onclick="formEditParsil('${item.id}', '${item.nama_pemilik}', '${item.status}')">✏️ Edit</button>
+                                    <button class="btn btn-delete" onclick="deleteData('parsil', '${item.id}')">🗑️ Hapus</button>
+                                </div>
+                            </div>
+                        </div>`;
+
+                    var layerParsil = L.geoJSON(geom, { 
+                        style: { fillColor: warna, color: warna, weight: 2, fillOpacity: 0.45 } 
+                    }).bindPopup(viewHTML).addTo(parsilLayer);
+
+                    layerParsil.on('click', function () { 
+                        map.fitBounds(layerParsil.getBounds(), { padding: [50, 50] }); 
+                    });
+
+                    databasePencarian.push({
+                        namaLower: item.nama_pemilik.toLowerCase(),
+                        namaAsli: item.nama_pemilik,
+                        kategori: 'Parsil',
+                        ikon: '🏘️',
+                        tipe: 'area',
+                        layer: layerParsil
+                    });
+                } catch (error) { 
+                    console.error("Error parse koordinat parsil ID: " + item.id, error); 
+                }
+            });
+        })
+        .catch(e => console.log('Belum ada data Parsil', e));
+}
+
+// Load data awal
+loadJalan();
+loadParsil();
+
+// ==========================================
+// 3. EDIT & UPDATE DATA
+// ==========================================
+function formEditJalan(id, nama, status) {
+    setTimeout(function () {
+        var container = document.getElementById(`popup-jalan-${id}`);
+        if (!container) return;
+        container.innerHTML = `
+            <div class="popup-header popup-header-jalan" style="border-radius: 0;">
+                <h4 style="margin:0;">Edit Detail Jalan</h4>
+            </div>
+            <div class="popup-body">
+                <form onsubmit="updateData(event, 'jalan', '${id}')">
+                    <div class="sfield" style="margin-bottom:8px;">
+                        <span class="info-label">Nama Jalan</span>
+                        <input type="text" id="edit_nama" value="${nama}" required style="margin-bottom:0;">
+                    </div>
+                    <div class="sfield" style="margin-bottom:12px;">
+                        <span class="info-label">Status Jalan</span>
+                        <select id="edit_status" style="margin-bottom:0;">
+                            <option value="Jalan Nasional" ${status === 'Jalan Nasional' ? 'selected' : ''}>Jalan Nasional</option>
+                            <option value="Jalan Provinsi"  ${status === 'Jalan Provinsi' ? 'selected' : ''}>Jalan Provinsi</option>
+                            <option value="Jalan Kabupaten" ${status === 'Jalan Kabupaten' ? 'selected' : ''}>Jalan Kabupaten</option>
+                        </select>
+                    </div>
+                    <div class="btn-group">
+                        <button type="submit" class="btn btn-save">💾 Simpan</button>
+                        <button type="button" class="btn btn-delete" onclick="loadJalan();">Batal</button>
+                    </div>
+                </form>
+            </div>`;
+    }, 50);
+}
+
+function formEditParsil(id, nama, status) {
+    setTimeout(function () {
+        var container = document.getElementById(`popup-parsil-${id}`);
+        if (!container) return;
+        container.innerHTML = `
+            <div class="popup-header popup-header-parsil" style="border-radius: 0;">
+                <h4 style="margin:0;">Edit Detail Parsil</h4>
+            </div>
+            <div class="popup-body">
+                <form onsubmit="updateData(event, 'parsil', '${id}')">
+                    <div class="sfield" style="margin-bottom:8px;">
+                        <span class="info-label">Nama Pemilik</span>
+                        <input type="text" id="edit_nama" value="${nama}" required style="margin-bottom:0;">
+                    </div>
+                    <div class="sfield" style="margin-bottom:12px;">
+                        <span class="info-label">Status Sertifikat</span>
+                        <select id="edit_status" style="margin-bottom:0;">
+                            <option value="SHM" ${status === 'SHM' ? 'selected' : ''}>SHM (Hak Milik)</option>
+                            <option value="HGB" ${status === 'HGB' ? 'selected' : ''}>HGB (Guna Bangunan)</option>
+                            <option value="HGU" ${status === 'HGU' ? 'selected' : ''}>HGU (Guna Usaha)</option>
+                            <option value="HP"  ${status === 'HP' ? 'selected' : ''}>HP (Hak Pakai)</option>
+                        </select>
+                    </div>
+                    <div class="btn-group">
+                        <button type="submit" class="btn btn-save">💾 Simpan</button>
+                        <button type="button" class="btn btn-delete" onclick="loadParsil();">Batal</button>
+                    </div>
+                </form>
+            </div>`;
+    }, 50);
+}
+
+function updateData(e, tabel, id) {
+    e.preventDefault();
+    var formData = new FormData();
+    formData.append('tabel', tabel);
+    formData.append('id', id);
+
+    if (tabel === 'jalan') {
+        formData.append('nama_jalan', document.getElementById('edit_nama').value);
+        formData.append('status', document.getElementById('edit_status').value);
+    } else if (tabel === 'parsil') {
+        formData.append('nama_pemilik', document.getElementById('edit_nama').value);
+        formData.append('status', document.getElementById('edit_status').value);
+    }
+
+    fetch('update_data.php', { method: 'POST', body: formData })
+        .then(r => r.text())
+        .then(res => {
+            alert(res);
+            map.closePopup();
+            if (tabel === 'jalan') loadJalan();
+            if (tabel === 'parsil') loadParsil();
+        })
+        .catch(error => console.error("Error updating data:", error));
+}
+
+// ==========================================
+// 4. HAPUS DATA
+// ==========================================
+function deleteData(tabel, id) {
+    if (confirm('Apakah Anda yakin ingin menghapus data ini secara permanen?')) {
+        var formData = new FormData();
+        formData.append('id', id);
+        formData.append('tabel', tabel);
+        
+        fetch('delete_data.php', { method: 'POST', body: formData })
+            .then(r => r.text())
+            .then(res => {
+                alert(res);
+                map.closePopup();
+                if (tabel === 'jalan') loadJalan();
+                if (tabel === 'parsil') loadParsil();
+            })
+            .catch(error => console.error("Error deleting data:", error));
+    }
+}
+
+// ==========================================
+// 5. SISTEM PENCARIAN & AUTOCMPLETE
+// ==========================================
+function jalankanPencarian() {
+    var kataKunci = document.getElementById('search-input').value.toLowerCase();
+    var kategori = document.getElementById('search-category').value;
+    var wadahHasil = document.getElementById('search-results');
+
+    wadahHasil.innerHTML = '';
+
+    if (kataKunci.length < 2) {
+        wadahHasil.style.display = 'none';
+        return;
+    }
+
+    var hasil = databasePencarian.filter(function (item) {
+        var cocokNama = item.namaLower.includes(kataKunci);
+        var cocokKategori = (kategori === 'Semua') || (item.kategori === kategori);
+        return cocokNama && cocokKategori;
+    });
+
+    if (hasil.length > 0) {
+        wadahHasil.style.display = 'block';
+        wadahHasil.innerHTML = `<div class="results-header">${hasil.length} hasil ditemukan</div>`;
+
+        hasil.forEach(function (item) {
+            var badgeClass = item.kategori === 'Jalan' ? 'badge-Jalan' : 'badge-Parsil';
+            var bgColors = item.kategori === 'Jalan' ? 'rgba(245,158,11,0.1)' : 'rgba(163,116,255,0.1)';
+
+            var div = document.createElement('div');
+            div.className = 'result-item';
+            div.innerHTML = `
+                <div class="result-item-icon" style="background: ${bgColors};">
+                    ${item.ikon}
+                </div>
+                <div class="result-item-text">
+                    <div class="result-item-name">${item.namaAsli}</div>
+                    <div class="result-item-sub">Klik untuk zoom ke lokasi</div>
+                </div>
+                <span class="badge-kategori ${badgeClass}">${item.kategori}</span>`;
+
+            div.onclick = function () {
+                map.fitBounds(item.layer.getBounds(), { padding: [50, 50] });
+                item.layer.openPopup();
+                wadahHasil.style.display = 'none';
+                document.getElementById('search-input').value = item.namaAsli;
+                toggleClearBtn();
+            };
+            wadahHasil.appendChild(div);
+        });
+    } else {
+        wadahHasil.style.display = 'block';
+        wadahHasil.innerHTML = `
+            <div class="result-empty">
+                <div class="result-item" style="color:#ef4444; justify-content:center;">Data tidak ditemukan</div>
+            </div>`;
+    }
+}
+
+function toggleClearBtn() {
+    var input = document.getElementById('search-input');
+    var clearBtn = document.getElementById('search-clear');
+    clearBtn.style.display = input.value.length > 0 ? 'flex' : 'none';
+}
+
+function clearSearch() {
+    document.getElementById('search-input').value = '';
+    document.getElementById('search-results').style.display = 'none';
+    document.getElementById('search-clear').style.display = 'none';
+}
+
+// Tutup hasil saat klik di luar
+document.addEventListener('click', function (e) {
+    var wrapper = document.querySelector('.search-wrapper');
+    if (wrapper && !wrapper.contains(e.target)) {
+        document.getElementById('search-results').style.display = 'none';
+    }
+});
+
+// Shortcut Ctrl + K untuk fokus ke pencarian
+document.addEventListener('keydown', function (e) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        document.getElementById('search-input').focus();
+    }
+    if (e.key === 'Escape') {
+        clearSearch();
+        document.getElementById('search-input').blur();
+    }
+});
+
+// ==========================================
+// 6. LOGIKA INPUT SIDEBAR & PROGRAMMATIC DRAW
+// ==========================================
+
+// Buka/Tutup Sidebar
+document.getElementById('sidebar-toggle').addEventListener('click', function () {
+    var sidebar = document.getElementById('input-sidebar');
+    sidebar.classList.toggle('open');
+    this.classList.toggle('open');
+});
+
+document.getElementById('sidebar-close').addEventListener('click', function () {
+    document.getElementById('input-sidebar').classList.remove('open');
+    document.getElementById('sidebar-toggle').classList.remove('open');
+});
+
+// Ganti Tab
+function switchSidebarTab(tabName) {
+    document.querySelectorAll('.stab').forEach(function (t) { t.classList.remove('active'); });
+    document.querySelectorAll('.stab-content').forEach(function (c) { c.classList.remove('active'); });
+    document.querySelector('.stab[data-tab="' + tabName + '"]').classList.add('active');
+    document.getElementById('tab-' + tabName).classList.add('active');
+    
+    // Batalkan mode draw jika ganti tab
+    deactivatePickMode();
+}
+
+// Aktifkan mode gambar garis/poligon secara terprogram
+function activateDrawMode(type) {
+    deactivatePickMode();
+    sidebarDrawMode = type;
+    
+    if (type === 'polyline') {
+        sidebarDrawHandler = new L.Draw.Polyline(map, {
+            shapeOptions: { color: '#6366f1', weight: 4 }
+        });
+        document.getElementById('coords-jalan-val').textContent = 'Sedang menggambar...';
+        document.getElementById('btn-draw-jalan').classList.add('active-pick');
+    } else if (type === 'polygon') {
+        sidebarDrawHandler = new L.Draw.Polygon(map, {
+            shapeOptions: { color: '#6366f1', fillColor: '#6366f1', fillOpacity: 0.3 }
+        });
+        document.getElementById('coords-parsil-val').textContent = 'Sedang menggambar...';
+        document.getElementById('btn-draw-parsil').classList.add('active-pick');
+    }
+    
+    if (sidebarDrawHandler) sidebarDrawHandler.enable();
+    document.getElementById('pick-overlay').classList.add('active');
+    
+    var teks = { 
+        polyline: 'Klik titik-titik ruas jalan di peta. Klik dua kali titik terakhir untuk selesai.', 
+        polygon: 'Klik titik-titik batas lahan di peta. Klik dua kali titik terakhir untuk selesai.' 
+    };
+    document.getElementById('pick-overlay-text').textContent = teks[type];
+    map.getContainer().style.cursor = 'crosshair';
+}
+
+// Batalkan mode draw
+function deactivatePickMode() {
+    sidebarDrawMode = null;
+    document.getElementById('pick-overlay').classList.remove('active');
+    document.querySelectorAll('.btn-pick-location').forEach(function (b) { b.classList.remove('active-pick'); });
+    map.getContainer().style.cursor = '';
+    
+    if (sidebarDrawHandler) { 
+        try { sidebarDrawHandler.disable(); } catch (e) { } 
+        sidebarDrawHandler = null; 
+    }
+}
+
+// Menangkap event Leaflet Draw CREATED
+map.on(L.Draw.Event.CREATED, function (e) {
+    var type = e.layerType, layer = e.layer;
+    var geojson = layer.toGeoJSON();
+
+    drawnItems.clearLayers();
+    drawnItems.addLayer(layer);
+
+    if (sidebarDrawMode === 'polyline' && type === 'polyline') {
+        // turf.length menghitung dalam KM, ubah ke meter
+        var panjangMeter = (turf.length(geojson, { units: 'kilometers' }) * 1000).toFixed(2);
+        sidebarKoordinat = JSON.stringify(geojson.geometry);
+        
+        var el = document.getElementById('coords-jalan-val');
+        el.textContent = panjangMeter + ' m';
+        el.classList.add('has-coords');
+        
+        document.getElementById('sb_panjang_jalan').value = panjangMeter + ' m';
+        deactivatePickMode();
+    } else if (sidebarDrawMode === 'polygon' && type === 'polygon') {
+        // turf.area menghitung dalam meter persegi
+        var luasMeter = turf.area(geojson).toFixed(2);
+        sidebarKoordinat = JSON.stringify(geojson.geometry);
+        
+        var el = document.getElementById('coords-parsil-val');
+        el.textContent = luasMeter + ' m²';
+        el.classList.add('has-coords');
+        
+        document.getElementById('sb_luas_parsil').value = luasMeter + ' m²';
+        deactivatePickMode();
+    }
+});
+
+// ==========================================
+// 7. SIMPAN DATA DARI SIDEBAR
+// ==========================================
+function saveJalanSidebar() {
+    if (!sidebarKoordinat) { 
+        alert('Silakan gambar ruas jalan di peta terlebih dahulu!'); 
+        return; 
+    }
+    var nama = document.getElementById('sb_nama_jalan').value.trim();
+    if (!nama) { 
+        alert('Nama jalan wajib diisi!'); 
+        return; 
+    }
+    
+    var formData = new FormData();
+    formData.append('nama_jalan', nama);
+    formData.append('status', document.getElementById('sb_status_jalan').value);
+    formData.append('panjang', document.getElementById('sb_panjang_jalan').value);
+    formData.append('koordinat', sidebarKoordinat);
+
+    fetch('save_jalan.php', { method: 'POST', body: formData })
+        .then(r => r.text())
+        .then(res => {
+            alert(res);
+            document.getElementById('sb_nama_jalan').value = '';
+            document.getElementById('sb_panjang_jalan').value = '';
+            document.getElementById('coords-jalan-val').textContent = 'Belum digambar';
+            document.getElementById('coords-jalan-val').classList.remove('has-coords');
+            sidebarKoordinat = ''; 
+            drawnItems.clearLayers(); 
+            loadJalan();
+        })
+        .catch(e => console.error("Error saving jalan:", e));
+}
+
+function saveParsilSidebar() {
+    if (!sidebarKoordinat) { 
+        alert('Silakan gambar area parsil di peta terlebih dahulu!'); 
+        return; 
+    }
+    var nama = document.getElementById('sb_nama_parsil').value.trim();
+    if (!nama) { 
+        alert('Nama pemilik wajib diisi!'); 
+        return; 
+    }
+    
+    var formData = new FormData();
+    formData.append('nama_pemilik', nama);
+    formData.append('status', document.getElementById('sb_status_parsil').value);
+    formData.append('luas', document.getElementById('sb_luas_parsil').value);
+    formData.append('koordinat', sidebarKoordinat);
+
+    fetch('save_parsil.php', { method: 'POST', body: formData })
+        .then(r => r.text())
+        .then(res => {
+            alert(res);
+            document.getElementById('sb_nama_parsil').value = '';
+            document.getElementById('sb_luas_parsil').value = '';
+            document.getElementById('coords-parsil-val').textContent = 'Belum digambar';
+            document.getElementById('coords-parsil-val').classList.remove('has-coords');
+            sidebarKoordinat = ''; 
+            drawnItems.clearLayers(); 
+            loadParsil();
+        })
+        .catch(e => console.error("Error saving parsil:", e));
+}
+
+// ==========================================
+// 8. DROPDOWN KATEGORI DI HEADER
+// ==========================================
+document.addEventListener('DOMContentLoaded', function () {
+    var wrap = document.getElementById('custom-select-wrap');
+    var trigger = document.getElementById('custom-select-trigger');
+    var options = document.getElementById('custom-select-options');
+    var hiddenInput = document.getElementById('search-category');
+    var optionItems = document.querySelectorAll('.custom-option');
+
+    // Toggle dropdown
+    wrap.addEventListener('click', function (e) {
+        e.stopPropagation();
+        options.classList.toggle('show');
+    });
+
+    // Pilihan dropdown diklik
+    optionItems.forEach(function (item) {
+        item.addEventListener('click', function (e) {
+            e.stopPropagation();
+
+            optionItems.forEach(opt => opt.classList.remove('selected'));
+            this.classList.add('selected');
+
+            trigger.textContent = this.textContent;
+            hiddenInput.value = this.getAttribute('data-value');
+
+            options.classList.remove('show');
+            jalankanPencarian();
+        });
+    });
+
+    // Tutup dropdown jika klik di luar
+    document.addEventListener('click', function () {
+        options.classList.remove('show');
+    });
+});