L4zyL4mb
414 lines
19 KiB
PHP
414 lines
19 KiB
PHP
<?php
|
|
require_once 'db_connect.php';
|
|
|
|
// AJAX: update koordinat saat marker di-drag
|
|
if (isset($_GET['update_coords']) && $_SERVER['REQUEST_METHOD']==='POST') {
|
|
header('Content-Type: application/json');
|
|
$id = intval($_POST['id']);
|
|
$lat = floatval($_POST['lat']);
|
|
$lng = floatval($_POST['lng']);
|
|
if($id > 0){
|
|
$pdo->prepare("UPDATE spbu SET latitude=:lat,longitude=:lng WHERE id=:id")
|
|
->execute([':lat'=>$lat,':lng'=>$lng,':id'=>$id]);
|
|
echo json_encode(['ok'=>true,'lat'=>$lat,'lng'=>$lng]);
|
|
} else {
|
|
echo json_encode(['ok'=>false]);
|
|
}
|
|
exit;
|
|
}
|
|
|
|
// AJAX: hapus dari show.php
|
|
if (isset($_GET['delete']) && $_SERVER['REQUEST_METHOD']==='POST') {
|
|
header('Content-Type: application/json');
|
|
$id = intval($_POST['id']);
|
|
$pdo->prepare("DELETE FROM spbu WHERE id=:id")->execute([':id'=>$id]);
|
|
echo json_encode(['ok'=>true]);
|
|
exit;
|
|
}
|
|
|
|
$spbu_list = $pdo->query("SELECT * FROM spbu ORDER BY nama")->fetchAll(PDO::FETCH_ASSOC);
|
|
$total = count($spbu_list);
|
|
$total_24 = count(array_filter($spbu_list, fn($s) => $s['status']==1));
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Peta SPBU — WebGIS Pontianak</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
|
:root{
|
|
--bg:#f5f4f0;--card:#fff;--border:#e8e5df;--border2:#d4d0c8;
|
|
--text:#1a1915;--muted:#7c7a72;--hint:#b0ada5;
|
|
--accent:#e85a1a;--accent-bg:#fdf0eb;--accent-dk:#c44a12;
|
|
--green:#1a7a45;--green-bg:#ebf7f0;
|
|
--red:#c0392b;--red-bg:#fdf0ef;
|
|
--r:10px;--r-sm:7px;
|
|
}
|
|
html,body{height:100%;font-family:'Plus Jakarta Sans',sans-serif;color:var(--text);font-size:14px}
|
|
body{display:flex;flex-direction:column;background:var(--bg)}
|
|
|
|
/* NAV */
|
|
.topnav{background:var(--card);border-bottom:1px solid var(--border);height:54px;padding:0 24px;display:flex;align-items:center;gap:6px;flex-shrink:0;z-index:9999;position:relative}
|
|
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;color:var(--text);text-decoration:none;margin-right:auto}
|
|
.brand-mark{width:30px;height:30px;background:var(--accent);border-radius:8px;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800}
|
|
.nav-a{padding:5px 13px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;transition:.12s}
|
|
.nav-a:hover{background:var(--bg);color:var(--text)}
|
|
.nav-a.on{background:var(--accent-bg);color:var(--accent);font-weight:600}
|
|
|
|
/* STATS BAR */
|
|
.statsbar{background:var(--card);border-bottom:1px solid var(--border);padding:0 24px;height:40px;display:flex;align-items:center;gap:18px;flex-shrink:0}
|
|
.stat{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
|
|
.stat strong{color:var(--text);font-weight:600}
|
|
.stat-dot{width:8px;height:8px;border-radius:50%}
|
|
|
|
/* MAIN */
|
|
.main{display:flex;flex:1;overflow:hidden}
|
|
|
|
/* SIDEBAR */
|
|
.sidebar{width:300px;flex-shrink:0;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
|
|
.sb-head{padding:14px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
|
|
.sb-head h2{font-size:13px;font-weight:600;margin-bottom:9px;color:var(--text)}
|
|
.search{width:100%;padding:7px 11px;border:1px solid var(--border2);border-radius:var(--r-sm);font-family:inherit;font-size:13px;color:var(--text);background:#fff;transition:.12s}
|
|
.search:focus{outline:none;border-color:var(--accent)}
|
|
.sb-list{flex:1;overflow-y:auto;padding:8px}
|
|
.sb-list::-webkit-scrollbar{width:3px}
|
|
.sb-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
|
|
.sb-item{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:6px;cursor:pointer;transition:.12s}
|
|
.sb-item:hover{border-color:var(--border2);background:#fafaf8}
|
|
.sb-item.active{border-color:var(--accent);background:var(--accent-bg)}
|
|
.sb-name{font-weight:600;font-size:13px;margin-bottom:2px}
|
|
.sb-no{font-size:12px;color:var(--muted)}
|
|
.sb-badge{display:inline-flex;align-items:center;gap:3px;margin-top:5px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
|
|
.sb-open{background:var(--green-bg);color:var(--green)}
|
|
.sb-closed{background:var(--bg);color:var(--hint);border:1px solid var(--border)}
|
|
.empty-sb{text-align:center;padding:32px 16px;color:var(--hint);font-size:13px}
|
|
|
|
/* MAP */
|
|
.mapwrap{flex:1;position:relative;overflow:hidden}
|
|
#map{width:100%;height:100%}
|
|
|
|
/* Rapikan tampilan Leaflet Layers Control */
|
|
.leaflet-control-layers{
|
|
border:1px solid var(--border) !important;
|
|
border-radius:var(--r-sm) !important;
|
|
box-shadow:0 2px 12px rgba(0,0,0,.09) !important;
|
|
font-family:'Plus Jakarta Sans',sans-serif !important;
|
|
font-size:13px !important;
|
|
}
|
|
.leaflet-control-layers-expanded{padding:10px 14px !important}
|
|
.leaflet-control-layers-separator{margin:6px 0 !important;border-color:var(--border) !important}
|
|
|
|
/* TOAST */
|
|
.toast{position:absolute;top:12px;left:50%;transform:translateX(-50%) translateY(-60px);z-index:1001;background:#1a1915;color:#fff;font-size:12px;font-weight:500;padding:8px 16px;border-radius:20px;transition:.25s;pointer-events:none;white-space:nowrap}
|
|
.toast.show{transform:translateX(-50%) translateY(0)}
|
|
|
|
/* ATTR PANEL */
|
|
#attr-panel{
|
|
position:absolute;bottom:0;left:0;right:0;
|
|
background:var(--card);border-top:2px solid var(--accent);
|
|
transform:translateY(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
|
|
z-index:1000;
|
|
}
|
|
#attr-panel.open{transform:translateY(0)}
|
|
.ap-head{padding:12px 18px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
|
.ap-title{font-size:13px;font-weight:700;color:var(--accent)}
|
|
.ap-actions{display:flex;gap:7px;align-items:center}
|
|
.ap-close{background:none;border:1px solid var(--border2);color:var(--muted);border-radius:5px;padding:3px 9px;font-size:12px;cursor:pointer;font-family:inherit;transition:.12s}
|
|
.ap-close:hover{border-color:var(--muted)}
|
|
.ap-del{background:none;border:1px solid #f0c4bf;color:var(--red);border-radius:5px;padding:3px 9px;font-size:12px;cursor:pointer;font-family:inherit;font-weight:600;transition:.12s}
|
|
.ap-del:hover{background:var(--red-bg)}
|
|
.ap-edit{background:none;border:1px solid #f0c5ae;color:var(--accent);border-radius:5px;padding:3px 9px;font-size:12px;cursor:pointer;font-family:inherit;font-weight:600;transition:.12s;text-decoration:none}
|
|
.ap-edit:hover{background:var(--accent-bg)}
|
|
.ap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:12px 18px 16px}
|
|
@media(max-width:600px){.ap-grid{grid-template-columns:repeat(2,1fr)}}
|
|
.ap-field{padding:6px 10px}
|
|
.ap-label{font-size:10px;font-weight:600;color:var(--hint);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
|
|
.ap-val{font-size:14px;font-weight:600;color:var(--text)}
|
|
.ap-val.green{color:var(--green)}
|
|
.ap-val.red{color:var(--red)}
|
|
.ap-val.mono{font-size:12px;font-family:'Courier New',monospace;font-weight:500;color:var(--muted)}
|
|
.drag-hint{font-size:11px;color:var(--hint);padding:0 18px 10px;display:flex;align-items:center;gap:4px}
|
|
|
|
@media(max-width:680px){
|
|
.sidebar{width:100%;max-height:200px;border-right:none;border-bottom:1px solid var(--border)}
|
|
.main{flex-direction:column}
|
|
.statsbar .stat:nth-child(n+3){display:none}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="topnav">
|
|
<a href="index.php" class="brand"><div class="brand-mark">S</div>WebGIS SPBU Pontianak</a>
|
|
<a href="insert.php" class="nav-a">Input Data</a>
|
|
<a href="index.php" class="nav-a on">Lihat Peta</a>
|
|
</nav>
|
|
|
|
<div class="statsbar">
|
|
<div class="stat"><div class="stat-dot" style="background:var(--accent)"></div>Total <strong><?= $total ?></strong> SPBU</div>
|
|
<div class="stat"><div class="stat-dot" style="background:var(--green)"></div>Buka 24 Jam: <strong><?= $total_24 ?></strong></div>
|
|
<div class="stat"><div class="stat-dot" style="background:var(--hint)"></div>Terbatas: <strong><?= $total - $total_24 ?></strong></div>
|
|
</div>
|
|
|
|
<div class="main">
|
|
|
|
<!-- SIDEBAR -->
|
|
<div class="sidebar">
|
|
<div class="sb-head">
|
|
<h2>Daftar SPBU</h2>
|
|
<input class="search" id="search" type="text" placeholder="Cari nama atau nomor...">
|
|
</div>
|
|
<div class="sb-list" id="sb-list">
|
|
<?php if(!$total): ?>
|
|
<div class="empty-sb">Belum ada data.<br><a href="insert.php" style="color:var(--accent)">Tambahkan →</a></div>
|
|
<?php else: foreach($spbu_list as $s): ?>
|
|
<div class="sb-item" data-id="<?= $s['id'] ?>">
|
|
<div class="sb-name"><?= htmlspecialchars($s['nama']) ?></div>
|
|
<div class="sb-no">No. <?= htmlspecialchars($s['no']) ?></div>
|
|
<span class="sb-badge <?= $s['status']?'sb-open':'sb-closed' ?>"><?= $s['status']?'● 24 Jam':'○ Terbatas' ?></span>
|
|
</div>
|
|
<?php endforeach; endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MAP -->
|
|
<div class="mapwrap">
|
|
<div id="map"></div>
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<div id="attr-panel">
|
|
<div class="ap-head">
|
|
<span class="ap-title">⛽ Informasi SPBU</span>
|
|
<div class="ap-actions">
|
|
<a href="#" class="ap-edit" id="ap-edit-btn">Edit</a>
|
|
<button class="ap-del" id="ap-del-btn">Hapus</button>
|
|
<button class="ap-close" onclick="closePanel()">✕ Tutup</button>
|
|
</div>
|
|
</div>
|
|
<div class="ap-grid">
|
|
<div class="ap-field"><div class="ap-label">Nama</div><div class="ap-val" id="ap-nama">—</div></div>
|
|
<div class="ap-field"><div class="ap-label">Nomor SPBU</div><div class="ap-val" id="ap-no">—</div></div>
|
|
<div class="ap-field"><div class="ap-label">Status</div><div class="ap-val" id="ap-status">—</div></div>
|
|
<div class="ap-field"><div class="ap-label">Koordinat</div><div class="ap-val mono" id="ap-coords">—</div></div>
|
|
</div>
|
|
<div class="drag-hint">⟳ Drag marker di peta untuk memperbarui lokasi secara langsung</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<script>
|
|
const DATA = <?= json_encode($spbu_list, JSON_UNESCAPED_UNICODE) ?>;
|
|
|
|
// ── Base Layers ──────────────────────────────────────────────────────────────
|
|
const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap', maxZoom: 19
|
|
});
|
|
const sat = L.tileLayer(
|
|
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
|
|
{ attribution: 'Esri', maxZoom: 19 }
|
|
);
|
|
|
|
// ── Layer Groups: pisah SPBU berdasarkan status ──────────────────────────────
|
|
// Setiap group berisi marker-marker sesuai jenisnya.
|
|
// Pengguna bisa toggle tampilan lewat checkbox di Layers Control.
|
|
const layer24Jam = L.layerGroup(); // SPBU Buka 24 Jam
|
|
const layerTerbatas = L.layerGroup(); // SPBU Jam Terbatas
|
|
|
|
// ── Inisialisasi Peta ────────────────────────────────────────────────────────
|
|
// Sertakan kedua overlay agar keduanya aktif (ter-centang) saat halaman dimuat
|
|
const map = L.map('map', {
|
|
center: [-0.0263, 109.3425],
|
|
zoom: 13,
|
|
layers: [osm, layer24Jam, layerTerbatas]
|
|
});
|
|
|
|
// ── Layers Control ───────────────────────────────────────────────────────────
|
|
// baseLayers → radio button, hanya bisa pilih satu base map
|
|
// overlays → checkbox, bisa pilih / sembunyikan per jenis SPBU
|
|
const baseLayers = {
|
|
'🗺️ Peta (OpenStreetMap)' : osm,
|
|
'🛰️ Satelit (Esri)' : sat
|
|
};
|
|
const overlays = {
|
|
'🟢 SPBU Buka 24 Jam' : layer24Jam,
|
|
'⚫ SPBU Jam Terbatas' : layerTerbatas
|
|
};
|
|
|
|
// collapsed:false → panel langsung terbuka tanpa harus hover
|
|
L.control.layers(baseLayers, overlays, { collapsed: false }).addTo(map);
|
|
|
|
// ── Icon Helper ──────────────────────────────────────────────────────────────
|
|
function mkIcon(color, big) {
|
|
const s = big ? 34 : 26;
|
|
return L.divIcon({
|
|
className: '',
|
|
html: `<div style="width:${s}px;height:${s}px;border-radius:50%;background:${color};
|
|
border:2.5px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.22);
|
|
display:grid;place-items:center;font-size:${big ? 16 : 12}px;transition:.15s;">⛽</div>`,
|
|
iconSize : [s, s],
|
|
iconAnchor : [s/2, s/2],
|
|
popupAnchor: [0, -s/2 - 2]
|
|
});
|
|
}
|
|
|
|
const markers = {};
|
|
let activeId = null;
|
|
|
|
// ── Buat Marker & Masukkan ke Layer Group yang Sesuai ────────────────────────
|
|
DATA.forEach(spbu => {
|
|
const is24 = spbu.status == 1;
|
|
const color = is24 ? '#1a7a45' : '#b0ada5';
|
|
|
|
// draggable:true → aktifkan fitur drag & drop lokasi
|
|
const m = L.marker([spbu.latitude, spbu.longitude], {
|
|
icon : mkIcon(color, false),
|
|
draggable: true
|
|
});
|
|
|
|
// Klik marker → tampilkan panel atribut
|
|
m.on('click', () => showAttr(spbu.id));
|
|
|
|
// ── Drag & Drop: simpan koordinat baru ke DB via AJAX ────────────────────
|
|
m.on('dragend', function(e) {
|
|
const pos = e.target.getLatLng();
|
|
const lat = pos.lat.toFixed(6);
|
|
const lng = pos.lng.toFixed(6);
|
|
|
|
const fd = new FormData();
|
|
fd.append('id', spbu.id);
|
|
fd.append('lat', lat);
|
|
fd.append('lng', lng);
|
|
|
|
fetch('show.php?update_coords=1', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.ok) {
|
|
// Sinkronkan data lokal agar panel atribut juga update
|
|
const d = DATA.find(x => x.id == spbu.id);
|
|
if (d) { d.latitude = lat; d.longitude = lng; }
|
|
if (activeId == spbu.id) {
|
|
document.getElementById('ap-coords').textContent = `${lat}, ${lng}`;
|
|
}
|
|
showToast('📍 Lokasi berhasil diperbarui!');
|
|
}
|
|
})
|
|
.catch(() => showToast('❌ Gagal memperbarui lokasi'));
|
|
});
|
|
|
|
// Masukkan ke layer group yang tepat
|
|
m.addTo(is24 ? layer24Jam : layerTerbatas);
|
|
|
|
markers[spbu.id] = { marker: m, data: spbu };
|
|
});
|
|
|
|
// ── Fit Bounds ───────────────────────────────────────────────────────────────
|
|
if (DATA.length > 0) {
|
|
const pts = DATA.map(s => [s.latitude, s.longitude]);
|
|
DATA.length === 1
|
|
? map.setView(pts[0], 15)
|
|
: map.fitBounds(pts, { padding: [40, 40] });
|
|
}
|
|
|
|
// ── Panel Atribut ─────────────────────────────────────────────────────────────
|
|
function showAttr(id) {
|
|
const obj = markers[id];
|
|
if (!obj) return;
|
|
const spbu = DATA.find(x => x.id == id) || obj.data;
|
|
|
|
// Reset icon marker yang sebelumnya aktif
|
|
if (activeId && activeId !== id && markers[activeId]) {
|
|
const prev = DATA.find(x => x.id == activeId) || markers[activeId].data;
|
|
markers[activeId].marker.setIcon(mkIcon(prev.status == 1 ? '#1a7a45' : '#b0ada5', false));
|
|
}
|
|
|
|
// Besarkan & warnai marker aktif
|
|
obj.marker.setIcon(mkIcon('#e85a1a', true));
|
|
activeId = id;
|
|
|
|
// Isi panel
|
|
document.getElementById('ap-nama').textContent = spbu.nama;
|
|
document.getElementById('ap-no').textContent = spbu.no;
|
|
const st = document.getElementById('ap-status');
|
|
if (spbu.status == 1) {
|
|
st.textContent = '● 24 Jam'; st.className = 'ap-val green';
|
|
} else {
|
|
st.textContent = '○ Terbatas'; st.className = 'ap-val red';
|
|
}
|
|
document.getElementById('ap-coords').textContent =
|
|
`${parseFloat(spbu.latitude).toFixed(6)}, ${parseFloat(spbu.longitude).toFixed(6)}`;
|
|
|
|
document.getElementById('ap-edit-btn').href = `insert.php?edit=${id}`;
|
|
document.getElementById('ap-del-btn').onclick = () => deleteSpbu(id, spbu.nama);
|
|
|
|
document.getElementById('attr-panel').classList.add('open');
|
|
map.setView([spbu.latitude, spbu.longitude], Math.max(map.getZoom(), 15), { animate: true });
|
|
|
|
// Highlight sidebar
|
|
document.querySelectorAll('.sb-item').forEach(el => el.classList.remove('active'));
|
|
const si = document.querySelector(`.sb-item[data-id="${id}"]`);
|
|
if (si) { si.classList.add('active'); si.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }
|
|
}
|
|
|
|
function closePanel() {
|
|
document.getElementById('attr-panel').classList.remove('open');
|
|
if (activeId && markers[activeId]) {
|
|
const prev = DATA.find(x => x.id == activeId) || markers[activeId].data;
|
|
markers[activeId].marker.setIcon(mkIcon(prev.status == 1 ? '#1a7a45' : '#b0ada5', false));
|
|
}
|
|
activeId = null;
|
|
document.querySelectorAll('.sb-item').forEach(el => el.classList.remove('active'));
|
|
}
|
|
|
|
// ── Hapus SPBU ────────────────────────────────────────────────────────────────
|
|
function deleteSpbu(id, nama) {
|
|
if (!confirm(`Hapus SPBU "${nama}"?`)) return;
|
|
const fd = new FormData();
|
|
fd.append('id', id);
|
|
fetch('show.php?delete=1', { method: 'POST', body: fd })
|
|
.then(r => r.json())
|
|
.then(res => {
|
|
if (res.ok) {
|
|
if (markers[id]) {
|
|
// Hapus dari layer group yang tepat, bukan langsung dari map
|
|
const spbu = DATA.find(x => x.id == id) || markers[id].data;
|
|
(spbu.status == 1 ? layer24Jam : layerTerbatas).removeLayer(markers[id].marker);
|
|
delete markers[id];
|
|
}
|
|
const si = document.querySelector(`.sb-item[data-id="${id}"]`);
|
|
if (si) si.remove();
|
|
closePanel();
|
|
showToast('✕ SPBU berhasil dihapus');
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── Sidebar: klik & search ────────────────────────────────────────────────────
|
|
document.querySelectorAll('.sb-item').forEach(el => {
|
|
el.addEventListener('click', () => showAttr(parseInt(el.dataset.id)));
|
|
});
|
|
|
|
document.getElementById('search').addEventListener('input', function() {
|
|
const q = this.value.toLowerCase();
|
|
document.querySelectorAll('.sb-item').forEach(el => {
|
|
const n = el.querySelector('.sb-name').textContent.toLowerCase();
|
|
const no = el.querySelector('.sb-no').textContent.toLowerCase();
|
|
el.style.display = (n.includes(q) || no.includes(q)) ? '' : 'none';
|
|
});
|
|
});
|
|
|
|
// ── Toast notifikasi ──────────────────────────────────────────────────────────
|
|
function showToast(msg) {
|
|
const t = document.getElementById('toast');
|
|
t.textContent = msg;
|
|
t.classList.add('show');
|
|
setTimeout(() => t.classList.remove('show'), 2500);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|