Farha
279 lines
11 KiB
HTML
279 lines
11 KiB
HTML
<!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>
|