denavy/D1041231027-WebGIS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

delete folder backup

Browse Source
This commit is contained in:
dena27
2026-06-10 18:54:25 +07:00
parent c00b98b83f
commit a3b982e3fe
37 changed files with 2419 additions and 4546 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01/index.html
+210 -73
View File
@@ -10,6 +10,7 @@
<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>
@@ -18,7 +19,8 @@
</div>
<div id="app">
<!-- SIDEBAR -->
<!-- ═══════════ SIDEBAR ═══════════ -->
<aside id="sidebar">
<div class="sb-header">
<div class="sb-brand">
@@ -29,8 +31,10 @@
</div>
</div>
</div>
<div class="sb-scroll">
<!-- Mode Geometri -->
<!-- Tipe Geometri -->
<div class="sb-section">
<div class="sb-label">Tipe Geometri</div>
<div class="geom-selector">
@@ -90,10 +94,11 @@
<div class="sb-label">Daftar SPBU</div>
<div id="spbu-list"></div>
</div>
</div>
</aside>
<!-- MAIN PANEL -->
<!-- ═══════════ MAIN ═══════════ -->
<div id="main">
<div id="topbar">
<div class="coord-pill">
@@ -101,7 +106,6 @@
<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>
@@ -110,13 +114,54 @@
<div id="search-results"></div>
</div>
<!-- Layer toggle button -->
<div class="layer-wrap" id="lw">
<button class="layer-btn" id="ldbtn">🗺️ Layer <span class="chev">▼</span></button>
<button class="layer-btn" id="ldbtn">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L14.5 4.5L8 8L1.5 4.5L8 1Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
<path d="M1.5 8L8 11.5L14.5 8" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
<path d="M1.5 11.5L8 15L14.5 11.5" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
</svg>
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 class="lm-label">Tampilkan Layer</div>
<label class="lm-item">
<input type="checkbox" id="lm-point" checked>
<span class="lm-check"></span>
<span class="lm-icon">📍</span>
<span>SPBU</span>
</label>
<div class="lm-sub" id="lm-sub-spbu">
<label class="lm-sub-item">
<input type="checkbox" id="lm-spbu24" checked>
<span class="lm-check sm"></span>
<span class="lm-sub-dot dot-green"></span>
<span>Buka 24 Jam</span>
</label>
<label class="lm-sub-item">
<input type="checkbox" id="lm-spbuLtd" checked>
<span class="lm-check sm"></span>
<span class="lm-sub-dot dot-red"></span>
<span>Tidak 24 Jam</span>
</label>
</div>
<label class="lm-item">
<input type="checkbox" id="lm-jalan" checked>
<span class="lm-check"></span>
<span class="lm-icon">📏</span>
<span>Jalan</span>
</label>
<label class="lm-item">
<input type="checkbox" id="lm-parsil" checked>
<span class="lm-check"></span>
<span class="lm-icon">🗺️</span>
<span>Parsil</span>
</label>
</div>
</div>
</div>
@@ -145,129 +190,223 @@
</div>
</div>
<!-- ======================== MODALS ======================== -->
<!-- ═══════════ MODALS ═══════════ -->
<!-- Modal Tambah SPBU -->
<!-- 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 class="modal-head">
<div class="modal-head-icon">⛽</div>
<h2>Tambah SPBU</h2>
</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 class="modal-body">
<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 Operasional</label>
<select id="spbu-status">
<option value="full">Buka 24 Jam</option>
<option value="limited">Tidak 24 Jam</option>
</select>
</div>
<div class="form-group">
<label>Koordinat</label>
<div class="form-row">
<input id="spbu-lat" placeholder="Latitude" readonly>
<input id="spbu-lng" placeholder="Longitude" readonly>
</div>
</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>
<button class="btn-primary green" onclick="saveSpbu()">💾 Simpan SPBU</button>
</div>
</div>
</div>
<!-- Modal Tambah Jalan -->
<!-- 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 class="modal-head">
<div class="modal-head-icon">🛣️</div>
<h2>Tambah Jalan</h2>
</div>
<div class="modal-body">
<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>
<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>
<button class="btn-primary green" onclick="saveJalan()">💾 Simpan Jalan</button>
</div>
</div>
</div>
<!-- Modal Tambah Parsil -->
<!-- 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 class="modal-head">
<div class="modal-head-icon">🗺️</div>
<h2>Tambah Parsil</h2>
</div>
<div class="modal-body">
<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 — Hak Milik</option>
<option value="HGB">HGB — Hak Guna Bangunan</option>
<option value="HGU">HGU — Hak Guna Usaha</option>
<option value="HP">HP — Hak Pakai</option>
</select>
</div>
<div class="form-group">
<label>Luas (m²)</label>
<input id="p-luas" readonly>
</div>
</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>
<button class="btn-primary purple" onclick="saveParsil()">💾 Simpan Parsil</button>
</div>
</div>
</div>
<!-- Modal Edit SPBU -->
<!-- Edit SPBU -->
<div class="overlay" id="m-edit-spbu">
<div class="modal">
<div class="modal-head"><h2>Edit SPBU</h2></div>
<div class="modal-head">
<div class="modal-head-icon">✏️</div>
<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 class="modal-body">
<div class="form-group">
<label>Nama SPBU</label>
<input id="e-spbu-nama">
</div>
<div class="form-group">
<label>No WhatsApp</label>
<input id="e-spbu-wa">
</div>
<div class="form-group">
<label>Status Operasional</label>
<select id="e-spbu-status">
<option value="full">Buka 24 Jam</option>
<option value="limited">Tidak 24 Jam</option>
</select>
</div>
</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>
<button class="btn-primary green" onclick="updateSpbu()">✅ Update SPBU</button>
</div>
</div>
</div>
<!-- Modal Edit Jalan -->
<!-- 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 class="modal-head">
<div class="modal-head-icon">✏️</div>
<h2>Edit Jalan</h2>
</div>
<input type="hidden" id="e-jalan-id">
<div class="modal-body">
<div class="form-group">
<label>Nama Jalan</label>
<input id="e-j-nama">
</div>
<div class="form-group">
<label>Status Jalan</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>
<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>
<button class="btn-primary blue" onclick="updateJalan()">✅ Update Jalan</button>
</div>
</div>
</div>
<!-- Modal Edit Parsil -->
<!-- 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 class="modal-head">
<div class="modal-head-icon">✏️</div>
<h2>Edit Parsil</h2>
</div>
<input type="hidden" id="e-parsil-id">
<div class="modal-body">
<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 — Hak Milik</option>
<option value="HGB">HGB — Hak Guna Bangunan</option>
<option value="HGU">HGU — Hak Guna Usaha</option>
<option value="HP">HP — Hak Pakai</option>
</select>
</div>
<div class="form-group">
<label>Luas (m²)</label>
<input id="e-p-luas" readonly>
</div>
</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>
<button class="btn-primary purple" onclick="updateParsil()">✅ Update Parsil</button>
</div>
</div>
</div>
<!-- ======================== CUSTOM CONFIRM DIALOG ======================== -->
<!-- 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-head">
<div class="modal-head-icon" style="background:#dc2626;">⚠️</div>
<h2 id="confirm-title" style="color:var(--red);">Konfirmasi</h2>
</div>
<div class="confirm-body">
<p id="confirm-message" class="confirm-message">Apakah Anda yakin?</p>
</div>
<div class="modal-foot">
<button class="btn-ghost" id="confirm-cancel">Batal</button>
<button class="btn-primary red" id="confirm-ok">Ya, Hapus</button>
<button class="btn-ghost" id="confirm-cancel">Tidak, Batal</button>
<button class="btn-primary red" id="confirm-ok">🗑️ Ya, Hapus</button>
</div>
</div>
</div>
@@ -277,7 +416,5 @@
<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>