fitur kelola bantuan melalui rumah ibadah

2026-04-20 11:54:58 +07:00
parent 6408b0447a
commit bae0569701
13 changed files with 2487 additions and 33 deletions
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Test GIS Features</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { font-family: system-ui, sans-serif; background: #f1f5f9; padding: 20px; }
+        .container { max-width: 1200px; margin: 0 auto; }
+        .test-section { background: white; margin-bottom: 20px; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
+        h2 { color: #1e293b; margin-bottom: 15px; border-bottom: 2px solid #3b82f6; padding-bottom: 10px; }
+        .test-item { margin: 15px 0; padding: 15px; background: #f8fafc; border-left: 4px solid #3b82f6; border-radius: 4px; }
+        .status { font-weight: bold; padding: 5px 10px; border-radius: 4px; display: inline-block; margin-top: 10px; }
+        .success { background: #dcfce7; color: #166534; }
+        .error { background: #fee2e2; color: #991b1b; }
+        .info { background: #dbeafe; color: #1e40af; }
+        button { background: #3b82f6; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; margin: 5px; }
+        button:hover { background: #2563eb; }
+        .response { background: #1e293b; color: #10b981; padding: 15px; border-radius: 4px; font-family: monospace; font-size: 12px; margin-top: 10px; max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; }
+        input { padding: 8px; margin: 5px; border: 1px solid #cbd5e1; border-radius: 4px; width: 100%; max-width: 400px; }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <h1 style="margin-bottom: 30px; color: #1e293b;">🔍 GIS Features Debug & Test</h1>
+
+    <!-- Test 1: Database -->
+    <div class="test-section">
+        <h2>📊 Test 1: Database Connection</h2>
+        <div class="test-item">
+            <button onclick="testDatabase()">Test Database Connection</button>
+            <div id="dbResult"></div>
+        </div>
+    </div>
+
+    <!-- Test 2: PHP Endpoints -->
+    <div class="test-section">
+        <h2>🔗 Test 2: Fetch PHP Endpoints</h2>
+        
+        <div class="test-item">
+            <h4>Load Rumah Ibadah Data</h4>
+            <button onclick="testLoadRumahIbadah()">GET /get_rumah_ibadah.php</button>
+            <div id="rumahIbadahResult"></div>
+        </div>
+
+        <div class="test-item">
+            <h4>Load Penduduk Miskin Data</h4>
+            <button onclick="testLoadPendudukMiskin()">GET /get_penduduk_miskin.php</button>
+            <div id="pendudukMiskinResult"></div>
+        </div>
+
+        <div class="test-item">
+            <h4>Load Jalan Rusak Data</h4>
+            <button onclick="testLoadJalanRusak()">GET /get_jalan_rusak.php</button>
+            <div id="jalanRusakResult"></div>
+        </div>
+    </div>
+
+    <!-- Test 3: Save Operations -->
+    <div class="test-section">
+        <h2>💾 Test 3: Save Operations</h2>
+        
+        <div class="test-item">
+            <h4>Test Save Rumah Ibadah</h4>
+            <input type="text" id="namaRumah" placeholder="Nama Rumah Ibadah" value="Test Masjid">
+            <input type="text" id="alamatRumah" placeholder="Alamat" value="Jl. Test No. 1">
+            <input type="text" id="picRumah" placeholder="Nama PIC" value="Test PIC">
+            <input type="number" id="latRumah" placeholder="Latitude" value="-0.012345" step="0.000001">
+            <input type="number" id="lngRumah" placeholder="Longitude" value="109.345678" step="0.000001">
+            <input type="number" id="radiusRumah" placeholder="Radius (m)" value="1000">
+            <button onclick="testSaveRumahIbadah()">Save Test Rumah Ibadah</button>
+            <div id="saveRumahResult"></div>
+        </div>
+    </div>
+
+    <!-- Test 4: DOM Elements -->
+    <div class="test-section">
+        <h2>🎨 Test 4: DOM Elements Check</h2>
+        
+        <div class="test-item">
+            <button onclick="testDOMElements()">Check HTML Elements</button>
+            <div id="domResult"></div>
+        </div>
+    </div>
+
+    <!-- Test 5: Console Monitoring -->
+    <div class="test-section">
+        <h2>📝 Test 5: Event Listener Test</h2>
+        
+        <div class="test-item">
+            <h4>Click Buttons and Check Console</h4>
+            <p>Tombol di bawah akan log ke console jika event listener berfungsi:</p>
+            <button id="testBtnRumahIbadah" onclick="console.log('✓ Rumah Ibadah button clicked')">Test: Rumah Ibadah</button>
+            <button id="testBtnPendudukMiskin" onclick="console.log('✓ Penduduk Miskin button clicked')">Test: Penduduk Miskin</button>
+            <button id="testBtnChoropleth" onclick="console.log('✓ Choropleth button clicked')">Test: Choropleth</button>
+            <p style="margin-top: 10px; color: #666; font-size: 12px;">✓ F12 → Console untuk lihat hasil</p>
+        </div>
+    </div>
+
+    <!-- Summary -->
+    <div class="test-section" style="background: #f0fdf4; border: 2px solid #22c55e;">
+        <h2 style="border-bottom-color: #22c55e;">✅ Summary</h2>
+        <div id="summary">Jalankan semua test di atas untuk diagnosis lengkap.</div>
+    </div>
+
+</div>
+
+<script>
+let testResults = {};
+
+function setResult(id, title, status, message, response = '') {
+    const resultDiv = document.getElementById(id);
+    let html = `<div class="status ${status}">${status.toUpperCase()}</div>`;
+    html += `<div style="margin-top: 10px;"><strong>${title}</strong></div>`;
+    html += `<div style="margin-top: 5px; color: #666;">${message}</div>`;
+    if (response) {
+        html += `<div class="response">${response}</div>`;
+    }
+    resultDiv.innerHTML = html;
+    
+    testResults[id] = status;
+    updateSummary();
+}
+
+function updateSummary() {
+    const summary = document.getElementById('summary');
+    const results = Object.values(testResults);
+    const successCount = results.filter(r => r === 'success').length;
+    const errorCount = results.filter(r => r === 'error').length;
+    
+    let html = `<p><strong>Results:</strong> ✅ ${successCount} passed | ❌ ${errorCount} failed | Total: ${results.length}</p>`;
+    
+    if (errorCount > 0) {
+        html += `<p style="color: #991b1b; margin-top: 10px;">⚠️ Ada ${errorCount} test yang gagal. Cek detail di atas.</p>`;
+    } else if (successCount === results.length && results.length > 0) {
+        html += `<p style="color: #166534; margin-top: 10px;">✅ Semua test berhasil! Fitur seharusnya berfungsi.</p>`;
+    }
+    
+    summary.innerHTML = html;
+}
+
+async function testDatabase() {
+    try {
+        const response = await fetch('create_tables.php', { method: 'GET' });
+        const text = await response.text();
+        
+        if (text.includes('success')) {
+            setResult('dbResult', 'Database & Tables', 'success', 'Database connection OK & tables exist', text.substring(0, 500));
+        } else {
+            setResult('dbResult', 'Database & Tables', 'error', 'Response tidak mengindikasikan success', text.substring(0, 500));
+        }
+    } catch (error) {
+        setResult('dbResult', 'Database & Tables', 'error', error.message);
+    }
+}
+
+async function testLoadRumahIbadah() {
+    try {
+        const response = await fetch('get_rumah_ibadah.php');
+        const text = await response.text();
+        const data = JSON.parse(text);
+        
+        setResult('rumahIbadahResult', 'Load Rumah Ibadah', 'success', 
+            `Loaded ${data.length} records`, JSON.stringify(data, null, 2).substring(0, 1000));
+    } catch (error) {
+        setResult('rumahIbadahResult', 'Load Rumah Ibadah', 'error', error.message);
+    }
+}
+
+async function testLoadPendudukMiskin() {
+    try {
+        const response = await fetch('get_penduduk_miskin.php');
+        const text = await response.text();
+        const data = JSON.parse(text);
+        
+        setResult('pendudukMiskinResult', 'Load Penduduk Miskin', 'success', 
+            `Loaded ${data.length} records`, JSON.stringify(data, null, 2).substring(0, 1000));
+    } catch (error) {
+        setResult('pendudukMiskinResult', 'Load Penduduk Miskin', 'error', error.message);
+    }
+}
+
+async function testLoadJalanRusak() {
+    try {
+        const response = await fetch('get_jalan_rusak.php');
+        const text = await response.text();
+        const data = JSON.parse(text);
+        
+        setResult('jalanRusakResult', 'Load Jalan Rusak', 'success', 
+            `Loaded ${data.length} records`, JSON.stringify(data, null, 2).substring(0, 1000));
+    } catch (error) {
+        setResult('jalanRusakResult', 'Load Jalan Rusak', 'error', error.message);
+    }
+}
+
+async function testSaveRumahIbadah() {
+    try {
+        const formData = new FormData();
+        formData.append('nama', document.getElementById('namaRumah').value);
+        formData.append('alamat', document.getElementById('alamatRumah').value);
+        formData.append('pic', document.getElementById('picRumah').value);
+        formData.append('latitude', document.getElementById('latRumah').value);
+        formData.append('longitude', document.getElementById('lngRumah').value);
+        formData.append('radius_m', document.getElementById('radiusRumah').value);
+        
+        const response = await fetch('save_rumah_ibadah.php', {
+            method: 'POST',
+            body: formData
+        });
+        const text = await response.text();
+        const data = JSON.parse(text);
+        
+        if (data.status === 'success') {
+            setResult('saveRumahResult', 'Save Rumah Ibadah', 'success', 
+                `Data berhasil disimpan. ID: ${data.id}`, JSON.stringify(data, null, 2));
+        } else {
+            setResult('saveRumahResult', 'Save Rumah Ibadah', 'error', 
+                data.message, JSON.stringify(data, null, 2));
+        }
+    } catch (error) {
+        setResult('saveRumahResult', 'Save Rumah Ibadah', 'error', error.message);
+    }
+}
+
+async function testDOMElements() {
+    const elements = [
+        'modeRumahIbadahBtn',
+        'modePendudukMiskinBtn',
+        'modeChoroplethBtn',
+        'rumahIbadahModal',
+        'pendudukMiskinModal',
+        'choroplethPanel',
+        'map',
+        'registryDrawer'
+    ];
+
+    let html = '<div style="margin: 10px 0;"><strong>Checking HTML Elements in index.html:</strong></div>';
+
+    try {
+        const response = await fetch('index.html', { cache: 'no-store' });
+        if (!response.ok) {
+            throw new Error(`Gagal memuat index.html (HTTP ${response.status})`);
+        }
+
+        const source = await response.text();
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(source, 'text/html');
+
+        let allFound = true;
+
+        elements.forEach(id => {
+            const elem = doc.getElementById(id);
+            const status = elem ? '✅' : '❌';
+            const color = elem ? '#166534' : '#991b1b';
+            html += `<div style="color: ${color}; margin: 5px 0;">${status} #${id}</div>`;
+            if (!elem) allFound = false;
+        });
+
+        if (allFound) {
+            setResult('domResult', 'DOM Elements', 'success', 'Semua elements ditemukan di index.html.', html);
+        } else {
+            setResult('domResult', 'DOM Elements', 'error', 'Ada elements yang tidak ditemukan di index.html.', html);
+        }
+    } catch (error) {
+        setResult('domResult', 'DOM Elements', 'error', `Gagal validasi DOM index.html: ${error.message}`);
+    }
+}
+
+// Auto check on load
+window.addEventListener('load', () => {
+    console.log('✅ Test page loaded');
+});
+</script>
+
+</body>
+</html>