391 lines
20 KiB
PHP
391 lines
20 KiB
PHP
<?php
|
|
session_start();
|
|
// Mengecek apakah user yang mengakses adalah admin
|
|
$isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sistem WebGIS Terpadu — Kota Pontianak</title>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ==============================
|
|
HEADER BAR
|
|
============================== -->
|
|
<div class="webgis-header">
|
|
<div class="header-brand">
|
|
<div class="brand-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="brand-name">WebGIS Terpadu</div>
|
|
<div class="brand-subtitle">Kota Pontianak</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-divider"></div>
|
|
|
|
<!-- SEARCH BAR -->
|
|
<div class="search-wrapper">
|
|
<div class="search-bar">
|
|
<!-- Category Selector -->
|
|
<!-- Category Selector Custom -->
|
|
<div class="search-category-wrap" id="custom-select-wrap">
|
|
<!-- Ikon Garis Tiga (Asli) -->
|
|
<span class="search-category-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h8" />
|
|
</svg>
|
|
</span>
|
|
|
|
<!-- Teks yang tampil -->
|
|
<div class="custom-select-trigger" id="custom-select-trigger">Semua Layer</div>
|
|
|
|
<input type="hidden" id="search-category" value="Semua">
|
|
|
|
<!-- Ikon Panah Bawah (Asli) -->
|
|
<span class="category-arrow">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</span>
|
|
|
|
<!-- Kotak Pilihan Dropdown yang Luas -->
|
|
<div class="custom-select-options" id="custom-select-options">
|
|
<div class="custom-option selected" data-value="Semua">Semua Layer</div>
|
|
<div class="custom-option" data-value="Rumah Ibadah">Rumah Ibadah</div>
|
|
<div class="custom-option" data-value="Penduduk Miskin">Penduduk Miskin</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Input -->
|
|
<div class="search-input-wrap">
|
|
<span class="search-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</span>
|
|
<input type="text" id="search-input" placeholder="Cari nama kepala keluarga atau rumah ibadah..."
|
|
onkeyup="jalankanPencarian()" oninput="toggleClearBtn()" autocomplete="off">
|
|
<button class="search-clear-btn" id="search-clear" onclick="clearSearch()" title="Hapus pencarian">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dropdown Results -->
|
|
<div class="search-results" id="search-results"></div>
|
|
</div>
|
|
|
|
<!-- HEADER RIGHT TOOLS -->
|
|
<div class="header-tools">
|
|
<?php if ($isAdmin): ?>
|
|
<div class="user-profile-menu">
|
|
<button class="profile-trigger" id="profile-trigger" onclick="toggleProfileMenu(event)">
|
|
<img src="<?php echo htmlspecialchars($_SESSION['avatar']); ?>" class="profile-avatar" alt="Avatar">
|
|
<span class="profile-username"><?php echo htmlspecialchars($_SESSION['username']); ?></span>
|
|
<svg class="profile-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<div class="profile-dropdown" id="profile-dropdown">
|
|
<div class="dropdown-user-info">
|
|
<div class="dropdown-username"><?php echo htmlspecialchars($_SESSION['username']); ?></div>
|
|
<div class="dropdown-role">Admin</div>
|
|
</div>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="logout.php" class="dropdown-item logout-link">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
<span>Logout</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<?php else: ?>
|
|
<a href="login.php" class="tool-btn auth-btn" title="Login Operator">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H7a3 3 0 01-3-3V7a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
|
|
</svg>
|
|
<span>Login</span>
|
|
</a>
|
|
<?php endif; ?>
|
|
|
|
<div style="width: 1px; height: 20px; background: rgba(255,255,255,0.1); margin: 0 4px;"></div>
|
|
|
|
<div class="tool-btn" title="Status Koneksi">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.141 0M1.394 9.393c5.857-5.857 15.355-5.857 21.213 0" />
|
|
</svg>
|
|
<div class="status-dot"></div>
|
|
</div>
|
|
<div class="tool-btn" title="Tentang Aplikasi">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==============================
|
|
SIDEBAR INPUT TERPUSAT
|
|
============================== -->
|
|
<!-- Toggle Button -->
|
|
<?php if ($isAdmin): ?>
|
|
<button class="sidebar-toggle" id="sidebar-toggle" title="Panel Input Data">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
<span>Input Data</span>
|
|
</button>
|
|
<?php endif; ?>
|
|
|
|
<!-- Sidebar Panel -->
|
|
<div class="input-sidebar" id="input-sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-title">
|
|
<div class="sidebar-title-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="sidebar-title-text">Input Data</div>
|
|
<div class="sidebar-title-sub">Tambah data ke peta</div>
|
|
</div>
|
|
</div>
|
|
<button class="sidebar-close" id="sidebar-close" title="Tutup">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Navigation -->
|
|
<div class="sidebar-tabs">
|
|
<button class="stab active" data-tab="ibadah" onclick="switchSidebarTab('ibadah')">
|
|
<span class="stab-icon">🕌</span>
|
|
<span>Ibadah</span>
|
|
</button>
|
|
<button class="stab" data-tab="penduduk" onclick="switchSidebarTab('penduduk')">
|
|
<span class="stab-icon">👥</span>
|
|
<span>Penduduk</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Scrollable Content -->
|
|
<div class="sidebar-body">
|
|
|
|
<!-- ===== TAB: RUMAH IBADAH ===== -->
|
|
<div class="stab-content active" id="tab-ibadah">
|
|
<div class="step-guide">
|
|
<div class="step-badge">Langkah 1</div>
|
|
<p>Klik tombol <strong>Tandai Lokasi</strong>, lalu klik titik di peta untuk menentukan posisi rumah
|
|
ibadah.</p>
|
|
</div>
|
|
<button class="btn-pick-location btn-amber" id="btn-pick-ibadah" onclick="activatePickMode('ibadah')">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Tandai Lokasi di Peta
|
|
</button>
|
|
<div class="coords-display" id="coords-ibadah">
|
|
<span class="coords-label">Koordinat:</span>
|
|
<span class="coords-value" id="coords-ibadah-val">Belum dipilih</span>
|
|
</div>
|
|
<div class="step-guide" style="margin-top:14px;">
|
|
<div class="step-badge">Langkah 2</div>
|
|
<p>Isi nama rumah ibadah di bawah ini.</p>
|
|
</div>
|
|
<div class="sfield">
|
|
<label class="sfield-label">Nama Rumah Ibadah <span class="required">*</span></label>
|
|
<input type="text" id="sb_nama_ibadah" class="sinput" placeholder="Contoh: Masjid Raya Mujahidin">
|
|
</div>
|
|
<button class="btn-save-sidebar btn-amber-solid" onclick="saveRumahIbadahSidebar()">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Simpan Rumah Ibadah
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ===== TAB: PENDUDUK MISKIN ===== -->
|
|
<div class="stab-content" id="tab-penduduk">
|
|
<div class="step-guide">
|
|
<div class="step-badge">Langkah 1</div>
|
|
<p>Klik tombol <strong>Tandai Lokasi</strong>, lalu klik titik di peta untuk menentukan posisi
|
|
tempat tinggal.</p>
|
|
</div>
|
|
<button class="btn-pick-location btn-red" id="btn-pick-penduduk" onclick="activatePickMode('penduduk')">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Tandai Lokasi di Peta
|
|
</button>
|
|
<div class="coords-display" id="coords-penduduk">
|
|
<span class="coords-label">Koordinat:</span>
|
|
<span class="coords-value" id="coords-penduduk-val">Belum dipilih</span>
|
|
</div>
|
|
<div class="step-guide" style="margin-top:14px;">
|
|
<div class="step-badge">Langkah 2</div>
|
|
<p>Isi alamat dan nama kepala keluarga di bawah ini.</p>
|
|
</div>
|
|
<div class="sfield">
|
|
<label class="sfield-label">Alamat Lengkap <span class="required">*</span></label>
|
|
<textarea id="sb_alamat_penduduk" class="sinput" rows="3"
|
|
placeholder="Contoh: Jl. Sungai Raya Dalam Gg. Ceria No. 12" style="resize:none;"></textarea>
|
|
</div>
|
|
<div class="sfield">
|
|
<label class="sfield-label">Nama Kepala Keluarga <span class="required">*</span></label>
|
|
<input type="text" id="sb_nama_penduduk" class="sinput" placeholder="Contoh: Siti Rahayu">
|
|
</div>
|
|
<div class="sfield">
|
|
<label class="sfield-label">Status Bantuan <span class="required">*</span></label>
|
|
<select id="sb_status_bantuan" class="sselect">
|
|
<option value="Belum Menerima">Belum Menerima Bantuan</option>
|
|
<option value="Sudah Menerima">Sudah Menerima Bantuan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button class="btn-save-sidebar btn-red-solid" onclick="savePendudukSidebar()">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Simpan Penduduk
|
|
</button>
|
|
</div>
|
|
|
|
</div><!-- end sidebar-body -->
|
|
</div><!-- end input-sidebar -->
|
|
|
|
<!-- ==============================
|
|
DASHBOARD STATISTIK (RIGHT SIDEBAR)
|
|
============================== -->
|
|
<div class="dashboard-sidebar" id="dashboard-sidebar">
|
|
<div class="dashboard-header">
|
|
<div class="dashboard-title">
|
|
<div class="dashboard-title-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M11 3.055A9.003 9.003 0 1020.945 13H11V3.055z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="dashboard-title-text">Dashboard Analisis</div>
|
|
<div class="dashboard-title-sub" id="dashboard-target-name">Rumah Ibadah</div>
|
|
</div>
|
|
</div>
|
|
<button class="dashboard-close" id="dashboard-close-btn" onclick="closeDashboard()" title="Tutup">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="dashboard-body">
|
|
<!-- Stats Summary Cards -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-num" id="stat-total-kk">0</div>
|
|
<div class="stat-label">Total KK Miskin</div>
|
|
</div>
|
|
<div class="stat-card stat-success">
|
|
<div class="stat-num" id="stat-sudah-bantuan">0</div>
|
|
<div class="stat-label">Sudah Menerima</div>
|
|
</div>
|
|
<div class="stat-card stat-danger">
|
|
<div class="stat-num" id="stat-belum-bantuan">0</div>
|
|
<div class="stat-label">Belum Menerima</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart Section -->
|
|
<div class="chart-section">
|
|
<div class="chart-title">Distribusi Penerima Bantuan</div>
|
|
<div class="chart-container" style="position: relative; height: 180px; width: 100%;">
|
|
<canvas id="povertyChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- List of Families inside Radius -->
|
|
<div class="families-section">
|
|
<div class="families-title">Daftar KK Miskin Terdekat</div>
|
|
<div class="families-list" id="dashboard-families-list">
|
|
<!-- Dynamic List Items -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Overlay saat mode pilih lokasi aktif -->
|
|
<div class="pick-mode-overlay" id="pick-overlay">
|
|
<div class="pick-mode-banner">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5" />
|
|
</svg>
|
|
<span id="pick-overlay-text">Klik lokasi di peta...</span>
|
|
<button onclick="deactivatePickMode()">Batal</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MAP (DENGAN OFFSET HEADER) -->
|
|
<div id="map" style="padding-top: 56px; height: 100vh; box-sizing: border-box;"></div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
// Variabel global untuk mendeteksi status admin di script.js
|
|
const IS_ADMIN = <?php echo $isAdmin ? 'true' : 'false'; ?>;
|
|
|
|
// Toggle dropdown menu profil pengguna
|
|
function toggleProfileMenu(e) {
|
|
e.stopPropagation();
|
|
var dropdown = document.getElementById('profile-dropdown');
|
|
if (dropdown) dropdown.classList.toggle('active');
|
|
}
|
|
|
|
// Tutup dropdown saat klik di luar area profil
|
|
document.addEventListener('click', function() {
|
|
var dropdown = document.getElementById('profile-dropdown');
|
|
if (dropdown) dropdown.classList.remove('active');
|
|
});
|
|
</script>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html>
|