feat: implement full CRUD functionality for jalan, parsil, and spbu modules including database integration and map interaction features
This commit is contained in:
Syariffullah
+43
-168
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WebGIS Pemetaan Jaringan Jalan</title>
|
||||
<title>WebGIS Pemetaan Bidang Tanah (Parsil)</title>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
@@ -30,7 +30,7 @@
|
||||
<div class="search-icon">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
<input type="text" class="search-input" id="searchInput" placeholder="Cari SPBU, jalan, parsil, rumah ibadah...">
|
||||
<input type="text" class="search-input" id="searchInput" placeholder="Cari parsil...">
|
||||
<button class="search-clear" id="searchClear">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
@@ -51,22 +51,50 @@
|
||||
<i class="fas fa-chevron-right" id="sidebarToggleIcon"></i>
|
||||
</button>
|
||||
|
||||
<!-- Tombol Kembali ke Beranda -->
|
||||
<a href="/webgis/index.html" class="btn-back-home" title="Kembali ke Beranda">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
<span>Beranda</span>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.btn-back-home {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
right: 70px;
|
||||
z-index: 1100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
background: #ffffff;
|
||||
color: #4f46e5;
|
||||
border: 1.5px solid rgba(79, 70, 229, 0.25);
|
||||
border-radius: 10px;
|
||||
padding: 8px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-family: 'Inter', sans-serif;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 2px 12px rgba(79, 70, 229, 0.12);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn-back-home:hover {
|
||||
background: #4f46e5;
|
||||
color: #ffffff;
|
||||
border-color: #4f46e5;
|
||||
box-shadow: 0 4px 16px rgba(79, 70, 229, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.btn-back-home i { font-size: 12px; }
|
||||
</style>
|
||||
|
||||
<!-- Left Sidebar Menu -->
|
||||
<nav class="left-sidebar" id="leftSidebar" style="display:none;">
|
||||
<div class="sidebar-section-label">Umum</div>
|
||||
<button class="sidebar-btn" id="menuSpbu" data-panel="spbu" title="SPBU">
|
||||
<span class="sidebar-emoji">⛽</span>
|
||||
<span class="sidebar-label">SPBU</span>
|
||||
</button>
|
||||
<button class="sidebar-btn" id="menuJalan" data-panel="jalan" title="Jalan">
|
||||
<span class="sidebar-emoji">🛣️</span>
|
||||
<span class="sidebar-label">Jalan</span>
|
||||
</button>
|
||||
<div class="sidebar-section-label">Menu</div>
|
||||
<button class="sidebar-btn" id="menuParsil" data-panel="parsil" title="Parsil Tanah">
|
||||
<span class="sidebar-emoji">🗺️</span>
|
||||
<span class="sidebar-label">Parsil</span>
|
||||
</button>
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
@@ -83,45 +111,6 @@
|
||||
|
||||
<div class="layer-section-title">Infrastruktur & Lahan</div>
|
||||
|
||||
<!-- SPBU -->
|
||||
<div class="layer-group-item">
|
||||
<div class="layer-group-header">
|
||||
<label class="layer-option" style="margin:0; flex:1;">
|
||||
<input type="checkbox" id="layerSpbu" checked> SPBU
|
||||
</label>
|
||||
<span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subSpbu', this)"><i class="fas fa-chevron-down"></i></span>
|
||||
</div>
|
||||
<div id="subSpbu" class="sub-layer-list" style="display:none;">
|
||||
<label class="layer-option sub-option">
|
||||
<input type="checkbox" class="sub-spbu" value="1" checked onchange="applySubFilter('spbu')"> 24 Jam
|
||||
</label>
|
||||
<label class="layer-option sub-option">
|
||||
<input type="checkbox" class="sub-spbu" value="0" checked onchange="applySubFilter('spbu')"> Tidak 24 Jam
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Jalan -->
|
||||
<div class="layer-group-item">
|
||||
<div class="layer-group-header">
|
||||
<label class="layer-option" style="margin:0; flex:1;">
|
||||
<input type="checkbox" id="layerJalan" checked> Jalan
|
||||
</label>
|
||||
<span class="layer-toggle-icon collapsed" onclick="toggleSubLayer('subJalan', this)"><i class="fas fa-chevron-down"></i></span>
|
||||
</div>
|
||||
<div id="subJalan" class="sub-layer-list" style="display:none;">
|
||||
<label class="layer-option sub-option">
|
||||
<input type="checkbox" class="sub-jalan" value="Nasional" checked onchange="applySubFilter('jalan')"> Nasional
|
||||
</label>
|
||||
<label class="layer-option sub-option">
|
||||
<input type="checkbox" class="sub-jalan" value="Provinsi" checked onchange="applySubFilter('jalan')"> Provinsi
|
||||
</label>
|
||||
<label class="layer-option sub-option">
|
||||
<input type="checkbox" class="sub-jalan" value="Kabupaten" checked onchange="applySubFilter('jalan')"> Kabupaten
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Parsil -->
|
||||
<div class="layer-group-item">
|
||||
<div class="layer-group-header">
|
||||
@@ -215,55 +204,7 @@
|
||||
</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">
|
||||
@@ -294,68 +235,7 @@
|
||||
</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>
|
||||
@@ -372,17 +252,12 @@
|
||||
<!-- Main Map Initialization -->
|
||||
<script src="assets/js/map.js?v=<?= time() ?>"></script>
|
||||
<!-- Fitur & Komponen -->
|
||||
<script src="assets/js/features/spbu.js?v=<?= time() ?>"></script>
|
||||
<script src="assets/js/features/jalan.js?v=<?= time() ?>"></script>
|
||||
<script src="assets/js/features/parsil.js?v=<?= time() ?>"></script>
|
||||
<script src="assets/js/features/draw_control.js?v=<?= time() ?>"></script>
|
||||
<script src="assets/js/features/geolocation.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>
|
||||
<script src="assets/js/panel.js?v=<?= time() ?>"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user