Hyzer/webgis_Ikbal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ce26f9fac67ed395f8516e54024fef41ae618144
webgis_Ikbal/webgis-poverty-pontianak/index.php
T
envicy ce26f9fac6 Update
2026-06-11 22:29:16 +07:00

329 lines
16 KiB
PHP
Raw Blame History

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGIS Kemiskinan Pontianak</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<!-- FontAwesome -->
<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>
<!-- ====== LEFT SIDEBAR ====== -->
<nav class="left-sidebar" id="leftSidebar">
<!-- Brand -->
<div class="sidebar-brand">
<div class="sidebar-brand-icon">🗺️</div>
<div class="sidebar-brand-text">
<div class="sidebar-brand-title">WebGIS Kemiskinan</div>
<div class="sidebar-brand-sub">Kota Pontianak</div>
</div>
</div>
<!-- Nav -->
<div class="sidebar-nav">
<div class="sidebar-nav-label">Peta</div>
<button class="sidebar-btn" id="menuIbadah" data-panel="ibadah">
<span class="btn-icon">🕌</span>
<span class="btn-label">Rumah Ibadah</span>
</button>
<button class="sidebar-btn" id="menuMiskin" data-panel="miskin">
<span class="btn-icon">🏠</span>
<span class="btn-label">Penduduk Miskin</span>
</button>
<button class="sidebar-btn" id="menuLogBantuan" data-panel="log_bantuan">
<span class="btn-icon">📋</span>
<span class="btn-label">Log Bantuan</span>
</button>
<div class="sidebar-divider"></div>
<div class="sidebar-nav-label" id="adminNavLabel" style="display:none;">Admin</div>
<button class="sidebar-btn" id="menuUsers" style="display:none;">
<span class="btn-icon">👥</span>
<span class="btn-label">Pengguna</span>
</button>
</div>
</nav>
<!-- ====== TOP BAR ====== -->
<div class="top-bar" id="topBar">
<!-- Search -->
<div style="position:relative; flex:1; max-width:380px;">
<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>
<div id="searchResults" style="display:none; position:absolute; top:calc(100% + 6px); left:0; right:0;"></div>
</div>
<!-- Layer Toggle -->
<button class="top-btn" id="layerBtn" title="Layer Peta">
<i class="fas fa-layer-group"></i>
</button>
<!-- Auth -->
<div id="authWidget">
<button class="btn-login" id="authLoginBtn">
<i class="fas fa-sign-in-alt"></i> Login
</button>
</div>
</div>
<!-- ====== LAYER PANEL ====== -->
<div class="custom-layer-panel" id="layerPanel">
<div class="layer-panel-title"><i class="fas fa-layer-group" style="color:var(--primary)"></i> Layer Peta</div>
<div class="layer-section-title">Pemetaan Kemiskinan</div>
<label class="layer-option">
<input type="checkbox" id="layerRumahIbadah" checked> Rumah Ibadah
</label>
<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="geojson-section">
<div id="geoJsonFileList" style="display:none;">
<div id="geoJsonLayersContainer"></div>
<div style="margin-top:8px; padding-top:8px; border-top:1px dashed var(--border);">
<label style="font-size:11px; display:block; margin-bottom:4px; color:var(--text-secondary);">Import GeoJSON:</label>
<input type="file" id="fileGeoJson" accept=".geojson,.json" style="font-size:11px; max-width:100%;">
</div>
</div>
</div>
</div>
<!-- ====== 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>
<!-- ====== MAP ====== -->
<div id="map"></div>
<!-- ====== ZOOM CONTROLS ====== -->
<div class="zoom-controls">
<button class="zoom-btn" id="zoomInBtn" title="Zoom In"><i class="fas fa-plus"></i></button>
<button class="zoom-btn" id="zoomOutBtn" title="Zoom Out"><i class="fas fa-minus"></i></button>
</div>
<!-- ====== UNIFIED MODAL ====== -->
<div id="unifiedModal" class="unified-modal">
<div class="modal-content">
<div class="modal-header">
<h3 id="modalTitle">Form</h3>
<span class="modal-close" onclick="closeModal()">&times;</span>
</div>
<div class="modal-body" id="modalBody"></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:320px;">
<div class="modal-header">
<h3>Konfirmasi Hapus</h3>
</div>
<div class="modal-body">
<p id="confirmMessage" style="font-size:14px; color:var(--text-secondary);"></p>
</div>
<div class="modal-footer">
<button id="confirmYesBtn" class="btn-save" style="background:var(--danger);">Hapus</button>
<button class="btn-cancel" onclick="closeConfirmModal()">Batal</button>
</div>
</div>
</div>
<!-- ====== LOGIN MODAL ====== -->
<div id="loginModal" class="unified-modal">
<div class="modal-content" style="width:380px;">
<div class="modal-header">
<h3>Masuk ke Sistem</h3>
<span class="modal-close" id="closeLoginModal">&times;</span>
</div>
<div class="modal-body">
<div class="form-group">
<label>Username</label>
<input type="text" id="loginUsername" placeholder="Masukkan username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" id="loginPassword" placeholder="Masukkan password">
</div>
<div id="loginErrorMsg" style="display:none; color:var(--danger); font-size:12px; font-weight:600;"></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">&times;</span>
</div>
<div id="dashboardBody"></div>
</div>
</div>
<!-- ====== USER MANAGEMENT MODAL ====== -->
<div id="userManagementModal" class="unified-modal">
<div class="modal-content" id="userManagementModal" style="width:min(720px,95vw);">
<div class="modal-header">
<h3>Manajemen Pengguna</h3>
<span class="modal-close" id="closeUserManagementModal">&times;</span>
</div>
<div class="modal-body" style="gap:14px;">
<div style="background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:10px;">
<h4 id="userFormTitle" style="font-size:13px; font-weight:700; color:var(--text-primary);">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</label>
<input type="password" id="managePassword" placeholder="Kosongkan jika tidak diubah">
</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</label>
<select id="manageIbadahId"></select>
</div>
</div>
<div style="display:flex; gap:8px; justify-content:flex-end;">
<button id="btnCancelUserEdit" class="btn-cancel" style="display:none;">Batal</button>
<button id="btnSaveUser" class="btn-save">Simpan</button>
</div>
</div>
<div style="max-height:200px; overflow-y:auto; border:1px solid var(--border); border-radius:10px;">
<table style="width:100%; border-collapse:collapse; font-size:13px;">
<thead>
<tr style="background:var(--surface-2); border-bottom:1px solid var(--border); color:var(--text-secondary); position:sticky; top:0; z-index:10;">
<th style="padding:10px 14px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;">Username</th>
<th style="padding:10px 14px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;">Role</th>
<th style="padding:10px 14px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;">Rumah Ibadah</th>
<th style="padding:10px 14px; text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.4px;">Aksi</th>
</tr>
</thead>
<tbody id="userTableBody"></tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ====== TOAST ====== -->
<div id="toastContainer"></div>
<!-- ====== LOG BANTUAN MODAL ====== -->
<div id="logBantuanModal" class="unified-modal">
<div class="modal-content modal-log-bantuan">
<div class="modal-header">
<h3 id="logBantuanTitle">📋 Log Bantuan</h3>
<span class="modal-close" onclick="closeLogBantuanModal()">&times;</span>
</div>
<div class="modal-body" style="gap:0; padding:0; overflow:hidden; display:flex; flex-direction:column; height:100%;">
<!-- Form tambah log -->
<div id="logBantuanFormSection" class="log-form-section">
<div class="log-form-title"><i class="fas fa-plus-circle"></i> Tambah Log Baru</div>
<input type="hidden" id="logBantuanMiskinId">
<div class="log-form-grid">
<div class="form-group">
<label>Rumah Ibadah <span style="color:var(--danger)">*</span></label>
<select id="logIbadahId"><option value="">-- Pilih --</option></select>
</div>
<div class="form-group">
<label>Jenis Bantuan <span style="color:var(--danger)">*</span></label>
<input type="text" id="logTipeBantuan" placeholder="cth: Sembako, Uang Tunai…">
</div>
<div class="form-group">
<label>Tanggal <span style="color:var(--danger)">*</span></label>
<input type="date" id="logTanggal">
</div>
<div class="form-group" style="grid-column:1/-1;">
<label>Keterangan</label>
<input type="text" id="logKeterangan" placeholder="Catatan tambahan (opsional)">
</div>
</div>
<div style="display:flex; justify-content:flex-end;">
<button id="btnSaveLog" class="btn-save"><i class="fas fa-save"></i> Simpan Log</button>
</div>
</div>
<!-- Daftar log -->
<div class="log-list-section">
<div class="log-list-title"><i class="fas fa-history"></i> Riwayat Bantuan</div>
<div id="logBantuanList"></div>
</div>
</div>
</div>
</div>
<!-- ====== SCRIPTS ====== -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="assets/js/map.js?v=<?= time() ?>"></script>
<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>
<script src="assets/js/features/auth.js?v=<?= time() ?>"></script>
<script src="assets/js/features/dashboard.js?v=<?= time() ?>"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink