225 lines
10 KiB
PHP
225 lines
10 KiB
PHP
<?php
|
|
// Start session for standard PHP structure (if needed in future)
|
|
session_start();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebGIS Pertemuan 2 — Pemetaan Stasiun SPBU</title>
|
|
|
|
<!-- Leaflet & Leaflet.draw CDN -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
|
|
|
|
<!-- Premium Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<!-- Custom CSS Styles -->
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ==============================
|
|
HEADER BAR
|
|
============================== -->
|
|
<div class="webgis-header">
|
|
<div class="header-brand">
|
|
<div class="brand-icon">
|
|
<!-- Map icon SVG -->
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="brand-name">WebGIS SPBU</div>
|
|
<div class="brand-subtitle">Pertemuan 2</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-divider"></div>
|
|
|
|
<!-- SEARCH BAR -->
|
|
<div class="search-wrapper">
|
|
<div class="search-bar">
|
|
<!-- Category Dropdown -->
|
|
<div class="search-category-wrap" id="custom-select-wrap">
|
|
<span class="search-category-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 10h16M4 14h8" />
|
|
</svg>
|
|
</span>
|
|
<div class="custom-select-trigger" id="custom-select-trigger">Semua Layer</div>
|
|
<input type="hidden" id="search-category" value="Semua">
|
|
<span class="category-arrow">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</span>
|
|
|
|
<div class="custom-select-options" id="custom-select-options">
|
|
<div class="custom-option selected" data-value="Semua">Semua Layer</div>
|
|
<div class="custom-option" data-value="SPBU">Stasiun SPBU</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Pencarian -->
|
|
<div class="search-input-wrap">
|
|
<span class="search-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
</span>
|
|
<input type="text" id="search-input" placeholder="Cari nama stasiun SPBU..."
|
|
onkeyup="jalankanPencarian()" oninput="toggleClearBtn()" autocomplete="off">
|
|
<button class="search-clear-btn" id="search-clear" onclick="clearSearch()" title="Hapus pencarian">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dropdown Hasil Pencarian -->
|
|
<div class="search-results" id="search-results"></div>
|
|
</div>
|
|
|
|
<!-- HEADER RIGHT TOOLS -->
|
|
<div class="header-tools">
|
|
<div class="tool-badge">Peta Aktif</div>
|
|
<div class="tool-btn" title="Status Database">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
|
|
</svg>
|
|
<div class="status-dot"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==============================
|
|
SIDEBAR INPUT DATA
|
|
============================== -->
|
|
<!-- Toggle Button -->
|
|
<button class="sidebar-toggle" id="sidebar-toggle" title="Panel Input Data">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
<span>Input Titik</span>
|
|
</button>
|
|
|
|
<!-- Sidebar Panel -->
|
|
<div class="input-sidebar" id="input-sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="sidebar-title">
|
|
<div class="sidebar-title-icon">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="sidebar-title-text">Panel Input Data</div>
|
|
<div class="sidebar-title-sub">Tambah penanda SPBU</div>
|
|
</div>
|
|
</div>
|
|
<button class="sidebar-close" id="sidebar-close" title="Tutup">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Navigation -->
|
|
<div class="sidebar-tabs">
|
|
<div class="stab active">
|
|
<span class="stab-icon">⛽</span>
|
|
<span>SPBU (Marker)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scrollable Content -->
|
|
<div class="sidebar-body">
|
|
|
|
<!-- ===== TAB: SPBU ===== -->
|
|
<div class="stab-content active">
|
|
<div class="step-guide">
|
|
<div class="step-badge">Langkah 1</div>
|
|
<p>Klik tombol <strong>Tandai Lokasi SPBU</strong> di bawah, lalu klik di peta pada posisi SPBU yang diinginkan.</p>
|
|
</div>
|
|
|
|
<button class="btn-pick-location" id="btn-pick-spbu" onclick="activatePickMode()">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Tandai Lokasi SPBU
|
|
</button>
|
|
|
|
<div class="coords-display" id="coords-spbu">
|
|
<span class="coords-label">Koordinat:</span>
|
|
<span class="coords-value" id="coords-spbu-val">Belum dipilih</span>
|
|
</div>
|
|
|
|
<div class="step-guide">
|
|
<div class="step-badge">Langkah 2</div>
|
|
<p>Lengkapi atribut data SPBU di bawah ini.</p>
|
|
</div>
|
|
|
|
<div class="sfield">
|
|
<label class="sfield-label">Nama SPBU <span class="required">*</span></label>
|
|
<input type="text" id="sb_nama_spbu" class="sinput" placeholder="Contoh: SPBU Ahmad Yani">
|
|
</div>
|
|
|
|
<div class="sfield">
|
|
<label class="sfield-label">Nomor Telepon</label>
|
|
<input type="text" id="sb_nohp_spbu" class="sinput" placeholder="Contoh: 0561-xxxxxx">
|
|
</div>
|
|
|
|
<div class="sfield">
|
|
<label class="sfield-label">Status Operasional</label>
|
|
<select id="sb_kategori_spbu" class="sselect">
|
|
<option value="Ya">Buka 24 Jam</option>
|
|
<option value="Tidak">Reguler (Jam Kerja)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button class="btn-save-sidebar" onclick="saveSPBUSidebar()">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
Simpan Data SPBU
|
|
</button>
|
|
</div>
|
|
|
|
</div><!-- end sidebar-body -->
|
|
</div><!-- end input-sidebar -->
|
|
|
|
<!-- Banner Info Mode Memilih Lokasi -->
|
|
<div class="pick-mode-overlay" id="pick-overlay">
|
|
<div class="pick-mode-banner">
|
|
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5" />
|
|
</svg>
|
|
<span id="pick-overlay-text">Klik lokasi di peta...</span>
|
|
<button onclick="deactivatePickMode()">Batal</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Container Peta -->
|
|
<div id="map" style="padding-top: 60px; height: 100vh; box-sizing: border-box;"></div>
|
|
|
|
<!-- Scripts Leaflet, Leaflet.draw, Turf, dan script.js -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@6/turf.min.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html>
|