unknown
201 lines
11 KiB
HTML
201 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>Peta Bantuan Sosial - Dinsos Pontianak</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Poppins', sans-serif; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 flex flex-col min-h-screen">
|
|
|
|
<nav class="bg-white p-4 shadow-sm z-30 flex justify-between items-center px-8 sticky top-0">
|
|
<h1 class="text-xl font-bold text-gray-800">SIG Dinsos Pontianak</h1>
|
|
<a href="petugas_login.html" class="text-sm font-semibold text-emerald-600 hover:text-emerald-800 transition">Login Petugas</a>
|
|
</nav>
|
|
|
|
<main class="flex-grow flex flex-col gap-10 pb-12">
|
|
|
|
<section class="bg-emerald-600 text-white px-6 py-12 text-center rounded-b-[3rem] shadow-md">
|
|
<div class="max-w-3xl mx-auto">
|
|
<h2 class="text-3xl font-bold mb-4">Cek Status Bantuan Sosial Anda</h2>
|
|
<p class="text-emerald-100 mb-8 font-light">Sistem Informasi Geografis terintegrasi untuk transparansi validasi data kemiskinan masyarakat Kota Pontianak.</p>
|
|
|
|
<div class="bg-white p-2 rounded-2xl shadow-xl flex flex-col sm:flex-row gap-2 max-w-xl mx-auto border border-emerald-100">
|
|
<input type="text" id="nik_input" placeholder="Masukkan 16 digit NIK..." maxlength="16" class="w-full p-4 rounded-xl bg-transparent focus:outline-none text-gray-800">
|
|
<button onclick="cek_status_bantuan()" id="btn_cari" class="bg-emerald-600 text-white px-8 py-4 rounded-xl font-bold hover:bg-emerald-700 transition flex-shrink-0">Cari Data</button>
|
|
</div>
|
|
|
|
<div id="hasil_pencarian" class="mt-6 hidden p-4 rounded-xl border max-w-xl mx-auto text-left bg-white text-gray-800 shadow-lg transition-all">
|
|
<p id="pesan_hasil" class="text-sm font-semibold"></p>
|
|
</div>
|
|
|
|
<div class="mt-8 flex justify-center">
|
|
<a href="survei_lapangan.html" class="bg-emerald-50 text-emerald-700 hover:bg-emerald-100 border border-emerald-200 px-6 py-3 rounded-xl font-semibold transition-colors flex items-center gap-2 shadow-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
|
|
Mulai Survei Lapangan
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="px-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 text-center">
|
|
<h3 class="text-gray-500 text-sm font-semibold uppercase tracking-wider mb-2">Total Terverifikasi</h3>
|
|
<p id="stat_publik_terverifikasi" class="text-3xl font-bold text-emerald-600">0</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 text-center">
|
|
<h3 class="text-gray-500 text-sm font-semibold uppercase tracking-wider mb-2">Sedang Diproses</h3>
|
|
<p id="stat_publik_diproses" class="text-3xl font-bold text-yellow-500">0</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 text-center">
|
|
<h3 class="text-gray-500 text-sm font-semibold uppercase tracking-wider mb-2">Pembaruan Terakhir</h3>
|
|
<p id="stat_publik_waktu" class="text-lg font-bold text-gray-700 mt-2">Menghitung...</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="px-6">
|
|
<div class="h-[400px] w-full max-w-5xl mx-auto rounded-2xl overflow-hidden shadow-sm border border-gray-200 z-0 relative">
|
|
<div id="map_container" class="absolute inset-0"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="px-6 max-w-3xl mx-auto w-full">
|
|
<h3 class="text-xl font-bold text-gray-800 mb-6 text-center">Pertanyaan yang Sering Diajukan</h3>
|
|
<div class="space-y-4">
|
|
<div class="bg-white p-5 rounded-xl border border-gray-100 shadow-sm">
|
|
<h4 class="font-bold text-gray-800">Bagaimana jika NIK saya tidak ditemukan?</h4>
|
|
<p class="text-gray-600 text-sm mt-2">Pastikan Anda memasukkan 16 digit angka dengan benar. Jika masih tidak ditemukan, silakan laporkan ke RT/RW setempat untuk pendataan ulang.</p>
|
|
</div>
|
|
<div class="bg-white p-5 rounded-xl border border-gray-100 shadow-sm">
|
|
<h4 class="font-bold text-gray-800">Berapa lama proses verifikasi lapangan?</h4>
|
|
<p class="text-gray-600 text-sm mt-2">Proses verifikasi oleh petugas lapangan membutuhkan waktu maksimal 14 hari kerja sejak data masuk ke dalam sistem.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="bg-gray-900 text-gray-300 pt-10 pb-6 px-6 mt-auto">
|
|
<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8 border-b border-gray-700 pb-8 mb-6">
|
|
<div>
|
|
<h4 class="text-white text-lg font-bold mb-4">Pusat Bantuan & Pengaduan</h4>
|
|
<p class="text-sm mb-2">Email: pengaduan@dinsos.pontianak.go.id (Dummy)</p>
|
|
<p class="text-sm mb-2">Telepon: (0561) 123-4567 (Dummy)</p>
|
|
<p class="text-sm">Jam Operasional: Senin - Jumat (08.00 - 15.00 WIB)</p>
|
|
</div>
|
|
<div class="md:text-right">
|
|
<h4 class="text-white text-lg font-bold mb-4">Tautan Penting</h4>
|
|
<ul class="text-sm space-y-2">
|
|
<li><a href="#" class="hover:text-emerald-400 transition">Kebijakan Privasi</a></li>
|
|
<li><a href="#" class="hover:text-emerald-400 transition">Syarat & Ketentuan</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="text-center text-sm text-gray-500">
|
|
© 2026 Dinas Sosial Kota Pontianak (Dummy). All rights reserved.
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const leaflet_map = L.map('map_container').setView([-0.0227, 109.3425], 13);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors'
|
|
}).addTo(leaflet_map);
|
|
|
|
let map_marker = null;
|
|
|
|
// Fungsi baru untuk memuat statistik secara asinkron dari basis data
|
|
async function muat_statistik_publik() {
|
|
try {
|
|
const respons_http = await fetch('http://localhost:3000/api/survey/statistik');
|
|
if (!respons_http.ok) throw new Error('Gagal mengambil data statistik');
|
|
|
|
const data_agregat = await respons_http.json();
|
|
|
|
// Memasukkan hasil hitungan ke dalam DOM menggunakan textContent
|
|
document.getElementById('stat_publik_terverifikasi').textContent = data_agregat.terverifikasi || 0;
|
|
document.getElementById('stat_publik_diproses').textContent = data_agregat.diproses || 0;
|
|
|
|
/* Baris Kompleks: Menggunakan objek bawaan Date pada JavaScript untuk
|
|
mendapatkan waktu spesifik saat skrip ini berjalan di perangkat pengguna,
|
|
lalu memformatnya secara spesifik ke dalam zona waktu WIB (Asia/Jakarta)
|
|
agar seragam untuk seluruh pengunjung situs terlepas dari lokasi fisik perangkat mereka. */
|
|
const objek_waktu_sekarang = new Date();
|
|
const waktu_terformat_wib = objek_waktu_sekarang.toLocaleTimeString('id-ID', {
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
timeZone: 'Asia/Jakarta'
|
|
});
|
|
|
|
document.getElementById('stat_publik_waktu').textContent = `Hari ini, ${waktu_terformat_wib} WIB`;
|
|
|
|
} catch (error_sistem) {
|
|
console.error("Sinkronisasi statistik gagal:", error_sistem.message);
|
|
document.getElementById('stat_publik_waktu').textContent = 'Sistem Terhubung';
|
|
}
|
|
}
|
|
|
|
const cek_status_bantuan = async () => {
|
|
const input_nik_value = document.getElementById('nik_input').value;
|
|
const kotak_hasil = document.getElementById('hasil_pencarian');
|
|
const pesan_hasil = document.getElementById('pesan_hasil');
|
|
const tombol_cari = document.getElementById('btn_cari');
|
|
|
|
if (!/^\d{16}$/.test(input_nik_value)) {
|
|
return alert('Masukkan NIK yang valid (16 digit angka).');
|
|
}
|
|
|
|
tombol_cari.disabled = true;
|
|
tombol_cari.textContent = 'Mencari...';
|
|
|
|
try {
|
|
const http_response = await fetch(`http://localhost:3000/api/survey/cek-nik/${input_nik_value}`);
|
|
|
|
if (!http_response.ok) {
|
|
throw new Error('Data tidak ditemukan');
|
|
}
|
|
|
|
const json_data = await http_response.json();
|
|
|
|
kotak_hasil.classList.remove('hidden', 'bg-red-50', 'bg-emerald-50', 'border-red-200', 'border-emerald-200');
|
|
kotak_hasil.classList.add('bg-emerald-50', 'border-emerald-200');
|
|
pesan_hasil.className = 'text-emerald-700';
|
|
pesan_hasil.textContent = `Data ditemukan: ${json_data.nama_kk} | Status: ${json_data.status_validasi}`;
|
|
|
|
if (json_data.lat && json_data.lng) {
|
|
if (map_marker) {
|
|
leaflet_map.removeLayer(map_marker);
|
|
}
|
|
|
|
const koordinat_warga = [parseFloat(json_data.lat), parseFloat(json_data.lng)];
|
|
leaflet_map.setView(koordinat_warga, 16);
|
|
map_marker = L.marker(koordinat_warga).addTo(leaflet_map)
|
|
.bindPopup(`<b>${json_data.nama_kk}</b><br>Status: ${json_data.status_validasi}`)
|
|
.openPopup();
|
|
}
|
|
|
|
} catch (error_object) {
|
|
kotak_hasil.classList.remove('hidden', 'bg-red-50', 'bg-emerald-50', 'border-red-200', 'border-emerald-200');
|
|
kotak_hasil.classList.add('bg-red-50', 'border-red-200');
|
|
pesan_hasil.className = 'text-red-700';
|
|
pesan_hasil.textContent = 'Mohon maaf, NIK tidak terdaftar atau terjadi kesalahan sistem.';
|
|
} finally {
|
|
tombol_cari.disabled = false;
|
|
tombol_cari.textContent = 'Cari Data';
|
|
}
|
|
};
|
|
|
|
// Mengeksekusi penarikan data statistik tepat saat halaman selesai dimuat
|
|
muat_statistik_publik();
|
|
|
|
</script>
|
|
</body>
|
|
</html> |