feat: implement core WebGIS mapping features, sidebar UI, and API endpoints for data management
This commit is contained in:
Syariffullah
@@ -46,18 +46,49 @@
|
||||
<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>
|
||||
|
||||
<!-- Action Menu Toggle Button -->
|
||||
<button class="custom-layer-btn" id="actionMenuBtn" style="top: 185px; left: 20px; right: auto;" title="Menu Tambah Data">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
<!-- Sidebar Toggle Button -->
|
||||
<button class="sidebar-toggle-btn" id="sidebarToggleBtn" title="Menu">
|
||||
<i class="fas fa-chevron-right" id="sidebarToggleIcon"></i>
|
||||
</button>
|
||||
|
||||
<!-- Action Menu (Kiri) -->
|
||||
<div class="action-menu" id="actionMenu" style="display: none; top: 240px; left: 20px;">
|
||||
<button id="btnMenuSpbu" onclick="window.activateAddMode('spbu')"><i class="fas fa-gas-pump"></i> Tambah SPBU</button>
|
||||
<button id="btnMenuIbadah" onclick="window.activateAddMode('rumah_ibadah')"><i class="fas fa-mosque"></i> Tambah Rumah Ibadah</button>
|
||||
<button id="btnMenuJalan" onclick="window.activateDraw('polyline')"><i class="fas fa-road"></i> Tambah Jalan</button>
|
||||
<button id="btnMenuParsil" onclick="window.activateDraw('polygon')"><i class="fas fa-draw-polygon"></i> Tambah Parsil Tanah</button>
|
||||
</div>
|
||||
<!-- Left Sidebar Menu -->
|
||||
<nav class="left-sidebar" id="leftSidebar" style="display:none;">
|
||||
<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>
|
||||
<button class="sidebar-btn" id="menuParsil" data-panel="parsil" title="Parsil Tanah">
|
||||
<span class="sidebar-emoji">🗺️</span>
|
||||
<span class="sidebar-label">Parsil</span>
|
||||
</button>
|
||||
<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>
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Right Data Panel (includes layer control) -->
|
||||
<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 -->
|
||||
|
||||
|
||||
|
||||
<!-- Custom Layer Control Button -->
|
||||
<button class="custom-layer-btn" id="layerBtn" title="Atur Layer">
|
||||
@@ -126,7 +157,7 @@
|
||||
<input type="checkbox" class="sub-parsil" value="HGU" checked onchange="applySubFilter('parsil')"> HGU
|
||||
</label>
|
||||
<label class="layer-option sub-option">
|
||||
<input type="checkbox" class="sub-parsil" value="HP" checked onchange="applySubFilter('parsil')"> HP
|
||||
<input type="checkbox" class="sub-parsil" value="HP" checked onchange="applySubFilter('parsil')"> HP
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -168,7 +199,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /custom-layer-panel -->
|
||||
|
||||
|
||||
<!-- Map Container -->
|
||||
<div id="map"></div>
|
||||
@@ -206,6 +238,56 @@
|
||||
</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>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
|
||||
@@ -225,7 +307,7 @@
|
||||
<script src="assets/js/features/geolocation.js"></script>
|
||||
<script src="assets/js/features/kemiskinan.js"></script>
|
||||
<script src="assets/js/features/geojson.js"></script>
|
||||
<!-- (Akan ditambahkan sesuai tahapan) -->
|
||||
<script src="assets/js/panel.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user