dena27
283 lines
12 KiB
HTML
283 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>WebGIS SPBU, Jalan & Parsil</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap">
|
||
</head>
|
||
<body>
|
||
<div id="loading">
|
||
<div class="ld-inner">
|
||
<div class="spin"></div>
|
||
<p>Memuat WebGIS…</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="app">
|
||
<!-- SIDEBAR -->
|
||
<aside id="sidebar">
|
||
<div class="sb-header">
|
||
<div class="sb-brand">
|
||
<div class="sb-icon">⛽</div>
|
||
<div>
|
||
<div class="sb-title">WebGIS SPBU</div>
|
||
<div class="sb-sub">Jalan & Parsil Tanah</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sb-scroll">
|
||
<!-- Mode Geometri -->
|
||
<div class="sb-section">
|
||
<div class="sb-label">Tipe Geometri</div>
|
||
<div class="geom-selector">
|
||
<button class="geom-btn" data-geom="point">📍 Point</button>
|
||
<button class="geom-btn" data-geom="polyline">📏 Line</button>
|
||
<button class="geom-btn" data-geom="polygon">🗺️ Polygon</button>
|
||
</div>
|
||
<div class="geom-hint" id="geom-hint">
|
||
<span class="gh-dot"></span>
|
||
<span id="geom-hint-text">Klik tipe untuk mulai menggambar</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Legenda SPBU -->
|
||
<div class="sb-section">
|
||
<div class="sb-label">Legenda SPBU</div>
|
||
<div class="legend-card">
|
||
<div class="leg-row"><span class="leg-dot spbu-24"></span> Buka 24 Jam</div>
|
||
<div class="leg-row"><span class="leg-dot spbu-ltd"></span> Tidak 24 Jam</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Legenda Jalan -->
|
||
<div class="sb-section">
|
||
<div class="sb-label">Legenda Jalan</div>
|
||
<div class="legend-card">
|
||
<div class="leg-row"><span class="leg-line jalan-nas"></span> Jalan Nasional</div>
|
||
<div class="leg-row"><span class="leg-line jalan-prov"></span> Jalan Provinsi</div>
|
||
<div class="leg-row"><span class="leg-line jalan-kab"></span> Jalan Kabupaten</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Legenda Parsil -->
|
||
<div class="sb-section">
|
||
<div class="sb-label">Legenda Parsil Tanah</div>
|
||
<div class="legend-card">
|
||
<div class="leg-row"><span class="leg-poly parsil-shm"></span> SHM — Hak Milik</div>
|
||
<div class="leg-row"><span class="leg-poly parsil-hgb"></span> HGB — Hak Guna Bangunan</div>
|
||
<div class="leg-row"><span class="leg-poly parsil-hgu"></span> HGU — Hak Guna Usaha</div>
|
||
<div class="leg-row"><span class="leg-poly parsil-hp"></span> HP — Hak Pakai</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Statistik -->
|
||
<div class="sb-section">
|
||
<div class="sb-label">Statistik</div>
|
||
<div class="stat-grid">
|
||
<div class="stat-item"><div class="stat-num" id="cnt-total">—</div><div class="stat-lbl">Total SPBU</div></div>
|
||
<div class="stat-item green"><div class="stat-num" id="cnt-24">—</div><div class="stat-lbl">Buka 24 Jam</div></div>
|
||
<div class="stat-item blue"><div class="stat-num" id="cnt-jalan">—</div><div class="stat-lbl">Jalan</div></div>
|
||
<div class="stat-item purple"><div class="stat-num" id="cnt-parsil">—</div><div class="stat-lbl">Parsil</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Daftar SPBU -->
|
||
<div class="sb-section">
|
||
<div class="sb-label">Daftar SPBU</div>
|
||
<div id="spbu-list"></div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- MAIN PANEL -->
|
||
<div id="main">
|
||
<div id="topbar">
|
||
<div class="coord-pill">
|
||
<span>📍</span>
|
||
<span id="cur-lat">—</span><span class="pill-sep">|</span><span id="cur-lng">—</span>
|
||
</div>
|
||
|
||
<!-- SEARCH -->
|
||
<div id="search-wrap">
|
||
<div class="search-box">
|
||
<span class="search-icon">🔍</span>
|
||
<input id="search-input" type="text" placeholder="Cari SPBU, Jalan, Parsil…" autocomplete="off">
|
||
</div>
|
||
<div id="search-results"></div>
|
||
</div>
|
||
|
||
<div class="layer-wrap" id="lw">
|
||
<button class="layer-btn" id="ldbtn">🗺️ Layer <span class="chev">▼</span></button>
|
||
<div class="layer-menu" id="layer-menu">
|
||
<div class="lm-label">Tampilkan</div>
|
||
<button class="lm-item active" id="lm-point">📍 SPBU</button>
|
||
<button class="lm-item active" id="lm-jalan">📏 Jalan</button>
|
||
<button class="lm-item active" id="lm-parsil">🗺️ Parsil</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="map-wrap">
|
||
<div id="map"></div>
|
||
|
||
<!-- Draw toolbar -->
|
||
<div id="draw-toolbar">
|
||
<div class="dt-hint">ℹ️ <span id="dt-hint-text">Klik peta untuk menggambar</span></div>
|
||
<span class="dt-counter" id="dt-counter">0 titik</span>
|
||
<button class="dt-btn undo" id="btn-undo" disabled>↩️ Undo</button>
|
||
<button class="dt-btn redo" id="btn-redo" disabled>↪️ Redo</button>
|
||
<button class="dt-btn cancel" id="btn-cancel-draw">❌ Batal</button>
|
||
<button class="dt-btn finish" id="btn-finish">✅ Selesai</button>
|
||
</div>
|
||
|
||
<!-- Geom Edit toolbar -->
|
||
<div id="geom-edit-toolbar">
|
||
<div class="dt-hint">📐 <span id="geom-edit-hint">Drag titik untuk edit geometri</span></div>
|
||
<span class="dt-counter geom-edit-counter" id="geom-edit-info"></span>
|
||
<button class="dt-btn cancel" id="btn-geom-cancel">❌ Batal</button>
|
||
<button class="dt-btn finish" id="btn-geom-save">💾 Simpan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ======================== MODALS ======================== -->
|
||
|
||
<!-- Modal Tambah SPBU -->
|
||
<div class="overlay" id="m-add-spbu">
|
||
<div class="modal">
|
||
<div class="modal-head"><h2>Tambah SPBU</h2></div>
|
||
<div class="form-group"><label>Nama SPBU</label><input id="spbu-nama" placeholder="Contoh: SPBU MJ 1234"></div>
|
||
<div class="form-group"><label>No WhatsApp</label><input id="spbu-wa" placeholder="Contoh: 62812345678"></div>
|
||
<div class="form-group">
|
||
<label>Status</label>
|
||
<select id="spbu-status"><option value="full">24 Jam</option><option value="limited">Tidak 24 Jam</option></select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Koordinat</label>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
|
||
<input id="spbu-lat" placeholder="Latitude" readonly>
|
||
<input id="spbu-lng" placeholder="Longitude" readonly>
|
||
</div>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="btn-ghost" onclick="closeModal('m-add-spbu')">Batal</button>
|
||
<button class="btn-primary green" onclick="saveSpbu()">Simpan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal Tambah Jalan -->
|
||
<div class="overlay" id="m-add-jalan">
|
||
<div class="modal">
|
||
<div class="modal-head"><h2>Tambah Jalan</h2></div>
|
||
<div class="form-group"><label>Nama Jalan</label><input id="j-nama" placeholder="Contoh: Jalan Ahmad Yani"></div>
|
||
<div class="form-group">
|
||
<label>Status Jalan</label>
|
||
<select id="j-status"><option value="nasional">Nasional</option><option value="provinsi">Provinsi</option><option value="kabupaten">Kabupaten</option></select>
|
||
</div>
|
||
<div class="form-group"><label>Panjang (meter)</label><input id="j-panjang" readonly></div>
|
||
<div class="modal-foot">
|
||
<button class="btn-ghost" onclick="closeModal('m-add-jalan')">Batal</button>
|
||
<button class="btn-primary green" onclick="saveJalan()">Simpan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal Tambah Parsil -->
|
||
<div class="overlay" id="m-add-parsil">
|
||
<div class="modal">
|
||
<div class="modal-head"><h2>Tambah Parsil</h2></div>
|
||
<div class="form-group"><label>Nama Parsil</label><input id="p-nama" placeholder="Contoh: Tanah A"></div>
|
||
<div class="form-group">
|
||
<label>Status Kepemilikan</label>
|
||
<select id="p-status"><option value="SHM">SHM</option><option value="HGB">HGB</option><option value="HGU">HGU</option><option value="HP">HP</option></select>
|
||
</div>
|
||
<div class="form-group"><label>Luas (m²)</label><input id="p-luas" readonly></div>
|
||
<div class="modal-foot">
|
||
<button class="btn-ghost" onclick="closeModal('m-add-parsil')">Batal</button>
|
||
<button class="btn-primary purple" onclick="saveParsil()">Simpan</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal Edit SPBU -->
|
||
<div class="overlay" id="m-edit-spbu">
|
||
<div class="modal">
|
||
<div class="modal-head"><h2>Edit SPBU</h2></div>
|
||
<input type="hidden" id="e-spbu-id">
|
||
<div class="form-group"><label>Nama SPBU</label><input id="e-spbu-nama"></div>
|
||
<div class="form-group"><label>No WA</label><input id="e-spbu-wa"></div>
|
||
<div class="form-group">
|
||
<label>Status</label>
|
||
<select id="e-spbu-status"><option value="full">24 Jam</option><option value="limited">Tidak 24 Jam</option></select>
|
||
</div>
|
||
<div class="modal-foot">
|
||
<button class="btn-ghost" onclick="closeModal('m-edit-spbu')">Batal</button>
|
||
<button class="btn-primary green" onclick="updateSpbu()">Update</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal Edit Jalan -->
|
||
<div class="overlay" id="m-edit-jalan">
|
||
<div class="modal">
|
||
<div class="modal-head"><h2>Edit Jalan</h2></div>
|
||
<input type="hidden" id="e-jalan-id">
|
||
<div class="form-group"><label>Nama Jalan</label><input id="e-j-nama"></div>
|
||
<div class="form-group">
|
||
<label>Status</label>
|
||
<select id="e-j-status"><option value="nasional">Nasional</option><option value="provinsi">Provinsi</option><option value="kabupaten">Kabupaten</option></select>
|
||
</div>
|
||
<div class="form-group"><label>Panjang (meter)</label><input id="e-j-panjang" readonly></div>
|
||
<div class="modal-foot">
|
||
<button class="btn-ghost" onclick="closeModal('m-edit-jalan')">Batal</button>
|
||
<button class="btn-primary blue" onclick="updateJalan()">Update</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal Edit Parsil -->
|
||
<div class="overlay" id="m-edit-parsil">
|
||
<div class="modal">
|
||
<div class="modal-head"><h2>Edit Parsil</h2></div>
|
||
<input type="hidden" id="e-parsil-id">
|
||
<div class="form-group"><label>Nama Parsil</label><input id="e-p-nama"></div>
|
||
<div class="form-group">
|
||
<label>Status Kepemilikan</label>
|
||
<select id="e-p-status"><option value="SHM">SHM</option><option value="HGB">HGB</option><option value="HGU">HGU</option><option value="HP">HP</option></select>
|
||
</div>
|
||
<div class="form-group"><label>Luas (m²)</label><input id="e-p-luas" readonly></div>
|
||
<div class="modal-foot">
|
||
<button class="btn-ghost" onclick="closeModal('m-edit-parsil')">Batal</button>
|
||
<button class="btn-primary purple" onclick="updateParsil()">Update</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ======================== CUSTOM CONFIRM DIALOG ======================== -->
|
||
<div class="overlay" id="confirm-overlay">
|
||
<div class="modal confirm-modal">
|
||
<div class="confirm-icon">⚠️</div>
|
||
<h2 id="confirm-title" class="confirm-title">Konfirmasi</h2>
|
||
<p id="confirm-message" class="confirm-message">Apakah Anda yakin?</p>
|
||
<div class="modal-foot">
|
||
<button class="btn-ghost" id="confirm-cancel">Batal</button>
|
||
<button class="btn-primary red" id="confirm-ok">Ya, Hapus</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="toasts"></div>
|
||
|
||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
|
||
<script src="js/main.js"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
||
</body>
|
||
</html> |