Syariffullah
409 lines
19 KiB
PHP
409 lines
19 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGIS Pemetaan Kemiskinan</title>
|
|
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- FontAwesome (Icons) -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
|
|
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- UI Container over map -->
|
|
<div class="ui-container">
|
|
<!-- Search Bar -->
|
|
<div class="search-bar">
|
|
<div class="search-icon">
|
|
<i class="fas fa-search"></i>
|
|
</div>
|
|
<input type="text" class="search-input" id="searchInput" placeholder="Cari rumah ibadah...">
|
|
<button class="search-clear" id="searchClear">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<!-- Search Results -->
|
|
<div id="searchResults" style="display: none; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); max-height: 200px; overflow-y: auto;">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Custom Zoom Control -->
|
|
<div class="custom-zoom-control" style="position: absolute; top: 20px; left: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 5px;">
|
|
<button class="custom-layer-btn" id="zoomInBtn" style="position: relative; top: 0; left: 0; right: auto;" title="Zoom In"><i class="fas fa-plus"></i></button>
|
|
<button class="custom-layer-btn" id="zoomOutBtn" style="position: relative; top: 0; left: 0; right: auto;" title="Zoom Out"><i class="fas fa-minus"></i></button>
|
|
</div>
|
|
|
|
<!-- Sidebar Toggle Button -->
|
|
<button class="sidebar-toggle-btn" id="sidebarToggleBtn" title="Menu">
|
|
<i class="fas fa-chevron-right" id="sidebarToggleIcon"></i>
|
|
</button>
|
|
|
|
<!-- Left Sidebar Menu -->
|
|
<nav class="left-sidebar" id="leftSidebar" style="display:none;">
|
|
|
|
<button class="sidebar-btn" id="menuIbadah" data-panel="ibadah" title="Rumah Ibadah">
|
|
<span class="sidebar-emoji">🕌</span>
|
|
<span class="sidebar-label">Ibadah</span>
|
|
</button>
|
|
<button class="sidebar-btn" id="menuMiskin" data-panel="miskin" title="Penduduk Miskin">
|
|
<span class="sidebar-emoji">🏠</span>
|
|
<span class="sidebar-label">Miskin</span>
|
|
</button>
|
|
<button class="sidebar-btn" id="menuDashboard" style="display:none;" title="Dashboard">
|
|
<span class="sidebar-emoji">📊</span>
|
|
<span class="sidebar-label">Dashboard</span>
|
|
</button>
|
|
|
|
<div class="sidebar-divider" id="sidebarAdminDivider" style="display:none;"></div>
|
|
<button class="sidebar-btn" id="menuUsers" style="display:none;" title="Manajemen Pengguna">
|
|
<span class="sidebar-emoji">👥</span>
|
|
<span class="sidebar-label">User</span>
|
|
</button>
|
|
</nav>
|
|
|
|
|
|
|
|
<!-- Custom Layer Control Button -->
|
|
<button class="custom-layer-btn" id="layerBtn" title="Atur Layer">
|
|
<i class="fas fa-layer-group fa-lg"></i>
|
|
</button>
|
|
|
|
<div>
|
|
<!-- Custom Layer Control Panel -->
|
|
<div class="custom-layer-panel" id="layerPanel">
|
|
<h3>Daftar Layer</h3>
|
|
|
|
|
|
|
|
<div class="layer-section-title">Pemetaan Kemiskinan</div>
|
|
|
|
<!-- Rumah Ibadah -->
|
|
<label class="layer-option">
|
|
<input type="checkbox" id="layerRumahIbadah" checked> Rumah Ibadah
|
|
</label>
|
|
|
|
<!-- Penduduk Miskin -->
|
|
<div class="layer-group-item">
|
|
<div class="layer-group-header">
|
|
<label class="layer-option" style="margin:0; flex:1;">
|
|
<input type="checkbox" id="layerMiskin" checked> Penduduk Miskin
|
|
</label>
|
|
<span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subMiskin', this)"><i class="fas fa-chevron-down"></i></span>
|
|
</div>
|
|
<div id="subMiskin" class="sub-layer-list" style="display:none;">
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-miskin" value="Makan" checked onchange="applySubFilter('miskin')"> Bantuan Makan
|
|
</label>
|
|
<label class="layer-option sub-option">
|
|
<input type="checkbox" class="sub-miskin" value="Pemberdayaan" checked onchange="applySubFilter('miskin')"> Pemberdayaan
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GeoJSON Eksternal -->
|
|
<div class="layer-group" style="margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px;">
|
|
<div class="layer-group-header" onclick="window.toggleGeoJsonMenu()" style="cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:14px; margin-bottom:8px; font-weight: 500;">
|
|
<span><i class="fas fa-folder"></i> GeoJSON Eksternal</span>
|
|
<i id="geoJsonToggleIcon" class="fas fa-plus"></i>
|
|
</div>
|
|
<div id="geoJsonFileList" style="display:none; padding-left:15px; margin-bottom:10px;">
|
|
<div id="geoJsonLayersContainer"></div>
|
|
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd;">
|
|
<label style="font-size: 12px; display:block; margin-bottom: 5px;">Import GeoJSON Baru:</label>
|
|
<input type="file" id="fileGeoJson" accept=".geojson,.json" style="font-size: 12px; max-width: 100%;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div><!-- /custom-layer-panel -->
|
|
|
|
<!-- Right Data Panel -->
|
|
<div class="right-panel" id="rightPanel">
|
|
<div class="right-panel-header">
|
|
<h3 id="rightPanelTitle">Data</h3>
|
|
<button class="right-panel-close" id="rightPanelClose"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
<div class="right-panel-actions" id="rightPanelActions"></div>
|
|
<div class="right-panel-body" id="rightPanelBody">
|
|
<div class="panel-empty">Pilih menu di kiri untuk menampilkan data</div>
|
|
</div>
|
|
</div><!-- /right-panel -->
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Map Container -->
|
|
<div id="map"></div>
|
|
|
|
<!-- Unified Modal -->
|
|
<div id="unifiedModal" class="unified-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modalTitle">Judul Form</h3>
|
|
<span class="modal-close" onclick="closeModal()">×</span>
|
|
</div>
|
|
<div class="modal-body" id="modalBody">
|
|
<!-- Konten dinamis -->
|
|
</div>
|
|
<div class="modal-footer" id="modalFooter">
|
|
<button id="modalSaveBtn" class="btn-save">Simpan</button>
|
|
<button class="btn-cancel" onclick="closeModal()">Batal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirm Modal -->
|
|
<div id="confirmModal" class="unified-modal">
|
|
<div class="modal-content" style="width: 300px;">
|
|
<div class="modal-header">
|
|
<h3>Konfirmasi</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirmMessage"></p>
|
|
</div>
|
|
<div class="modal-footer" style="display: flex; gap: 10px; justify-content: flex-end;">
|
|
<button id="confirmYesBtn" class="btn-save" style="background-color: #dc3545;">Ya, Hapus</button>
|
|
<button class="btn-cancel" onclick="closeConfirmModal()">Batal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Log Bantuan Modal -->
|
|
<div id="logBantuanModal" class="unified-modal">
|
|
<div class="modal-content" style="width:500px; max-height:85vh; overflow:hidden; display:flex; flex-direction:column;">
|
|
<div class="modal-header">
|
|
<h3 id="logBantuanTitle">Log Bantuan</h3>
|
|
<span class="modal-close" onclick="closeLogBantuanModal()">×</span>
|
|
</div>
|
|
<div class="modal-body" style="flex:1; overflow-y:auto; gap:0; padding:0;">
|
|
<!-- Riwayat -->
|
|
<div style="padding:15px; border-bottom:1px solid #eee;">
|
|
<h4 style="font-size:13px; font-weight:600; color:#555; margin-bottom:10px;">Riwayat Bantuan</h4>
|
|
<div id="logBantuanList" style="max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;">
|
|
<div class="panel-empty" style="padding:20px;">Belum ada riwayat</div>
|
|
</div>
|
|
</div>
|
|
<!-- Form Tambah -->
|
|
<div style="padding:15px;">
|
|
<h4 style="font-size:13px; font-weight:600; color:#555; margin-bottom:10px;">Tambah Log Bantuan</h4>
|
|
<div class="form-group">
|
|
<label>Rumah Ibadah</label>
|
|
<select id="logIbadahId"></select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tipe Bantuan</label>
|
|
<select id="logTipeBantuan">
|
|
<option value="Sembako">Sembako</option>
|
|
<option value="Uang Tunai">Uang Tunai</option>
|
|
<option value="Pakaian">Pakaian</option>
|
|
<option value="Pendidikan">Pendidikan</option>
|
|
<option value="Kesehatan">Kesehatan</option>
|
|
<option value="Lainnya">Lainnya</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Tanggal</label>
|
|
<input type="date" id="logTanggal">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Keterangan (opsional)</label>
|
|
<textarea id="logKeterangan" rows="2" placeholder="Catatan tambahan..."></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-save" id="logSaveBtn">Simpan Log</button>
|
|
<button class="btn-cancel" onclick="closeLogBantuanModal()">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Floating Profile / Auth Control -->
|
|
<div id="authWidget" class="auth-widget">
|
|
<button class="btn-login" id="authLoginBtn"><i class="fas fa-sign-in-alt"></i> Login</button>
|
|
</div>
|
|
|
|
<!-- Login Modal -->
|
|
<div id="loginModal" class="unified-modal">
|
|
<div class="modal-content" style="width: 360px;">
|
|
<div class="modal-header">
|
|
<h3>Login Ke Sistem</h3>
|
|
<span class="modal-close" id="closeLoginModal">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="loginUsername">Username</label>
|
|
<input type="text" id="loginUsername" placeholder="Masukkan username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="loginPassword">Password</label>
|
|
<input type="password" id="loginPassword" placeholder="Masukkan password">
|
|
</div>
|
|
<div id="loginErrorMsg" style="display:none; color:#ef4444; font-size:12px; font-weight:500;"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="loginSubmitBtn" class="btn-save" style="width: 100%;">Masuk</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard Modal -->
|
|
<div id="dashboardModal" class="unified-modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>📊 Dashboard Informasi</h3>
|
|
<span class="modal-close" id="closeDashboardModal">×</span>
|
|
</div>
|
|
<div id="dashboardBody"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Management Modal -->
|
|
<div id="userManagementModal" class="unified-modal">
|
|
<div class="modal-content" style="width: 700px; max-width: 95%;">
|
|
<div class="modal-header">
|
|
<h3>Manajemen Pengguna (Admin)</h3>
|
|
<span class="modal-close" id="closeUserManagementModal">×</span>
|
|
</div>
|
|
<div class="modal-body" style="gap: 15px;">
|
|
<!-- Form Tambah/Edit User -->
|
|
<div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 10px;">
|
|
<h4 id="userFormTitle" style="font-size: 13px; font-weight:700; color:#334155; margin-bottom: 2px;">Tambah User Baru</h4>
|
|
<input type="hidden" id="manageUserId" value="">
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
|
<div class="form-group">
|
|
<label>Username</label>
|
|
<input type="text" id="manageUsername" placeholder="Username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password (Kosongkan jika tidak diubah)</label>
|
|
<input type="password" id="managePassword" placeholder="Password">
|
|
</div>
|
|
</div>
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
|
|
<div class="form-group">
|
|
<label>Role</label>
|
|
<select id="manageRole">
|
|
<option value="pengelola" selected>Pengelola Rumah Ibadah</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="manageIbadahGroup">
|
|
<label>Rumah Ibadah yang Dikelola</label>
|
|
<select id="manageIbadahId">
|
|
<!-- Dikonstruksi dinamis dari data rumah ibadah -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; gap: 8px; justify-content: flex-end; margin-top: 5px;">
|
|
<button id="btnCancelUserEdit" class="btn-cancel" style="padding: 6px 12px; display:none;">Batal</button>
|
|
<button id="btnSaveUser" class="btn-save" style="padding: 6px 16px;">Simpan User</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabel Daftar User -->
|
|
<div style="max-height: 200px; overflow-y: auto; border: 1px solid #cbd5e1; border-radius: 8px;">
|
|
<table style="width: 100%; border-collapse: collapse; font-size: 13px; text-align: left;">
|
|
<thead>
|
|
<tr style="background: #f1f5f9; border-bottom: 1px solid #cbd5e1; color:#475569; position: sticky; top: 0; z-index: 10;">
|
|
<th style="padding: 10px 12px;">Username</th>
|
|
<th style="padding: 10px 12px;">Role</th>
|
|
<th style="padding: 10px 12px;">Rumah Ibadah</th>
|
|
<th style="padding: 10px 12px; text-align: center;">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="userTableBody">
|
|
<!-- Diisi dinamis -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Notification Container -->
|
|
<div id="toastContainer"></div>
|
|
|
|
<!-- Disclaimer Banner -->
|
|
<div id="disclaimerBanner" style="
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 2000;
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
|
color: #f1f5f9;
|
|
border: 1px solid #f59e0b;
|
|
border-left: 4px solid #f59e0b;
|
|
border-radius: 10px;
|
|
padding: 12px 16px;
|
|
max-width: 520px;
|
|
width: calc(100% - 40px);
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
font-family: 'Inter', sans-serif;
|
|
animation: slideUpBanner 0.4s ease;
|
|
">
|
|
<span style="font-size: 20px; flex-shrink:0; margin-top:1px;">⚠️</span>
|
|
<div style="flex:1;">
|
|
<div style="font-size: 13px; font-weight: 700; color: #fbbf24; margin-bottom: 4px; letter-spacing: 0.3px;">DISCLAIMER — DATA DUMMY</div>
|
|
<div style="font-size: 12px; line-height: 1.6; color: #cbd5e1;">
|
|
Seluruh data pada aplikasi ini termasuk <strong style="color:#fde68a;">nama kepala keluarga, foto rumah, dan foto Kartu Keluarga (KK)</strong> merupakan <strong style="color:#fde68a;">data fiktif / dummy</strong> yang hanya digunakan untuk keperluan demonstrasi dan pengujian sistem. Bukan data nyata.
|
|
</div>
|
|
</div>
|
|
<button onclick="document.getElementById('disclaimerBanner').style.display='none'" style="
|
|
background: transparent;
|
|
border: 1px solid #475569;
|
|
color: #94a3b8;
|
|
border-radius: 6px;
|
|
padding: 3px 8px;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
transition: all 0.2s;
|
|
" onmouseover="this.style.borderColor='#f59e0b';this.style.color='#f59e0b'" onmouseout="this.style.borderColor='#475569';this.style.color='#94a3b8'">Tutup</button>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes slideUpBanner {
|
|
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
|
|
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
|
}
|
|
</style>
|
|
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
|
|
|
|
<!-- Main Map Initialization -->
|
|
<script src="assets/js/map.js?v=<?= time() ?>"></script>
|
|
<!-- Fitur & Komponen -->
|
|
<script src="assets/js/features/geolocation.js?v=<?= time() ?>"></script>
|
|
<script src="assets/js/features/kemiskinan.js?v=<?= time() ?>"></script>
|
|
<script src="assets/js/features/geojson.js?v=<?= time() ?>"></script>
|
|
<script src="assets/js/panel.js?v=<?= time() ?>"></script>
|
|
|
|
<!-- Core Auth Feature -->
|
|
<script src="assets/js/features/auth.js?v=<?= time() ?>"></script>
|
|
|
|
<!-- Dashboard Feature -->
|
|
<script src="assets/js/features/dashboard.js?v=<?= time() ?>"></script>
|
|
|
|
</body>
|
|
</html>
|