From a3b982e3fe9644c39d6cfbf2edfb023f97c76af1 Mon Sep 17 00:00:00 2001 From: dena27 Date: Wed, 10 Jun 2026 18:54:25 +0700 Subject: [PATCH] delete folder backup --- 01/css/style.css | 860 ++++++---- 01/index.html | 283 +++- 01/js/main.js | 1070 ++++++------ {04 => 03}/add_dokumentasi.php | 0 {04 => 03}/api/anggota_keluarga.php | 0 {04 => 03}/api/auth.php | 0 03/api/db.php | 15 - 03/api/jalan.php | 98 -- {04 => 03}/api/kebutuhan.php | 0 {04 => 03}/api/kemandirian.php | 0 {04 => 03}/api/kontribusi.php | 0 {04 => 03}/api/laporan.php | 0 {04 => 03}/api/middleware.php | 0 {04 => 03}/api/migrate_laporan.php | 0 03/api/parsil.php | 126 -- {04 => 03}/api/redistribusi.php | 0 {04 => 03}/api/rumah_ibadah.php | 0 {04 => 03}/api/rumah_warga.php | 0 03/api/spbu.php | 141 -- {04 => 03}/api/statistik.php | 0 {04 => 03}/api/verifikasi.php | 0 {04 => 03}/assets/css/fitur_baru.css | 0 {04 => 03}/assets/css/style.css | 0 {04 => 03}/assets/js/app.js | 0 {04 => 03}/assets/js/fitur_baru.js | 0 {04 => 03}/config/db.php | 0 03/css/style.css | 645 ------- 03/database.sql | 37 - {04 => 03}/database/bansos_gis.sql | 0 {04 => 03}/database/laporan_migration.sql | 0 {04 => 03}/database/migrations.sql | 0 03/index.html | 1490 +++++++++++++---- 03/js/main.js | 923 ---------- .../uploads/dokumentasi/dok_2_1779757288.jpg | Bin .../uploads/dokumentasi/dok_2_1779759076.png | Bin 04/index.html | 1226 -------------- index.html | 51 +- 37 files changed, 2419 insertions(+), 4546 deletions(-) rename {04 => 03}/add_dokumentasi.php (100%) rename {04 => 03}/api/anggota_keluarga.php (100%) rename {04 => 03}/api/auth.php (100%) delete mode 100644 03/api/db.php delete mode 100644 03/api/jalan.php rename {04 => 03}/api/kebutuhan.php (100%) rename {04 => 03}/api/kemandirian.php (100%) rename {04 => 03}/api/kontribusi.php (100%) rename {04 => 03}/api/laporan.php (100%) rename {04 => 03}/api/middleware.php (100%) rename {04 => 03}/api/migrate_laporan.php (100%) delete mode 100644 03/api/parsil.php rename {04 => 03}/api/redistribusi.php (100%) rename {04 => 03}/api/rumah_ibadah.php (100%) rename {04 => 03}/api/rumah_warga.php (100%) delete mode 100644 03/api/spbu.php rename {04 => 03}/api/statistik.php (100%) rename {04 => 03}/api/verifikasi.php (100%) rename {04 => 03}/assets/css/fitur_baru.css (100%) rename {04 => 03}/assets/css/style.css (100%) rename {04 => 03}/assets/js/app.js (100%) rename {04 => 03}/assets/js/fitur_baru.js (100%) rename {04 => 03}/config/db.php (100%) delete mode 100644 03/css/style.css delete mode 100644 03/database.sql rename {04 => 03}/database/bansos_gis.sql (100%) rename {04 => 03}/database/laporan_migration.sql (100%) rename {04 => 03}/database/migrations.sql (100%) delete mode 100644 03/js/main.js rename {04 => 03}/uploads/dokumentasi/dok_2_1779757288.jpg (100%) rename {04 => 03}/uploads/dokumentasi/dok_2_1779759076.png (100%) delete mode 100644 04/index.html diff --git a/01/css/style.css b/01/css/style.css index 6ebafe2..a45942f 100644 --- a/01/css/style.css +++ b/01/css/style.css @@ -1,3 +1,8 @@ +/* ============================================================ + WEBGIS SPBU — style.css (versi lengkap & diperbaiki) + ============================================================ */ + +/* ── CSS VARIABLES ── */ :root { --bg: #f0f4f8; --sf: #ffffff; @@ -16,15 +21,15 @@ --spbu-ltd-bg: rgba(248,113,113,.10); --spbu-ltd-ring: rgba(248,113,113,.25); - --jalan-nas: #f97316; - --jalan-nas-bg: rgba(249,115,22,.10); - --jalan-nas-ring: rgba(249,115,22,.28); - --jalan-prov: #3b82f6; - --jalan-prov-bg: rgba(59,130,246,.10); + --jalan-nas: #f97316; + --jalan-nas-bg: rgba(249,115,22,.10); + --jalan-nas-ring: rgba(249,115,22,.28); + --jalan-prov: #3b82f6; + --jalan-prov-bg: rgba(59,130,246,.10); --jalan-prov-ring: rgba(59,130,246,.28); - --jalan-kab: #10b981; - --jalan-kab-bg: rgba(16,185,129,.10); - --jalan-kab-ring: rgba(16,185,129,.28); + --jalan-kab: #10b981; + --jalan-kab-bg: rgba(16,185,129,.10); + --jalan-kab-ring: rgba(16,185,129,.28); --shm-stroke: #d97706; --shm-fill: #fef3c7; --shm-bg: rgba(217,119,6,.10); --shm-ring: rgba(217,119,6,.28); --hgb-stroke: #8b5cf6; --hgb-fill: #ede9fe; --hgb-bg: rgba(139,92,246,.10); --hgb-ring: rgba(139,92,246,.28); @@ -33,33 +38,34 @@ --green: #16a34a; --greenb: rgba(22,163,74,.10); - --greenr: rgba(22,163,74,.25); + --greenr: rgba(22,163,74,.28); --red: #dc2626; --redb: rgba(220,38,38,.10); - --redr: rgba(220,38,38,.25); + --redr: rgba(220,38,38,.28); --blue: #2563eb; --blueb: rgba(37,99,235,.10); - --bluer: rgba(37,99,235,.25); + --bluer: rgba(37,99,235,.28); --amber: #d97706; --amberb: rgba(217,119,6,.10); - --amberr: rgba(217,119,6,.25); + --amberr: rgba(217,119,6,.28); --purple: #7c3aed; --purpleb: rgba(124,58,237,.10); - --purpler: rgba(124,58,237,.25); + --purpler: rgba(124,58,237,.28); --indigo: #4f46e5; --indigob: rgba(79,70,229,.10); - --indigor: rgba(79,70,229,.25); + --indigor: rgba(79,70,229,.28); - --sh-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); - --sh: 0 4px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06); - --sh-lg: 0 12px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08); + --sh-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05); + --sh: 0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05); + --sh-lg: 0 12px 40px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,0,.07); - --sidebar: 275px; - --topbar: 52px; - --radius: 10px; + --sidebar: 275px; + --topbar: 52px; + --radius: 10px; --radius-lg: 14px; } +/* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overflow: hidden; @@ -70,392 +76,570 @@ html, body { #app { display: flex; height: 100vh; } /* ── LOADING ── */ -#loading { position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; } -.ld-inner { display:flex; flex-direction:column; align-items:center; gap:14px; } -.ld-inner p { font-size:13px; color:var(--txd); } -.spin { width:32px; height:32px; border:3px solid var(--bd); border-top-color:var(--green); border-radius:50%; animation:rot .7s linear infinite; } -@keyframes rot { to { transform:rotate(360deg); } } +#loading { + position: fixed; inset: 0; z-index: 9999; + background: var(--bg); + display: flex; align-items: center; justify-content: center; +} +.ld-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; } +.ld-inner p { font-size: 13px; color: var(--txd); } +.spin { + width: 32px; height: 32px; + border: 3px solid var(--bd); border-top-color: var(--green); + border-radius: 50%; animation: rot .7s linear infinite; +} +@keyframes rot { to { transform: rotate(360deg); } } /* ── SIDEBAR ── */ -#sidebar { width:var(--sidebar); min-width:var(--sidebar); background:var(--sf); border-right:1px solid var(--bd); display:flex; flex-direction:column; box-shadow:var(--sh-sm); z-index:900; } -.sb-header { padding:14px 16px; border-bottom:1px solid var(--bd); } -.sb-brand { display:flex; align-items:center; gap:10px; } -.sb-icon { width:36px; height:36px; border-radius:9px; flex-shrink:0; background:var(--greenb); border:1px solid var(--greenr); display:flex; align-items:center; justify-content:center; color:var(--green); font-size:18px; } -.sb-title { font-size:14px; font-weight:800; } -.sb-sub { font-size:10px; color:var(--txd); margin-top:1px; } -.sb-scroll { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:14px; } -.sb-scroll::-webkit-scrollbar { width:4px; } -.sb-scroll::-webkit-scrollbar-thumb { background:var(--bd); border-radius:4px; } -.sb-section { display:flex; flex-direction:column; gap:6px; } -.sb-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--txd); } +#sidebar { + width: var(--sidebar); min-width: var(--sidebar); + background: var(--sf); border-right: 1px solid var(--bd); + display: flex; flex-direction: column; + box-shadow: var(--sh-sm); z-index: 900; +} +.sb-header { padding: 14px 16px; border-bottom: 1px solid var(--bd); } +.sb-brand { display: flex; align-items: center; gap: 10px; } +.sb-icon { + width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; + background: var(--greenb); border: 1px solid var(--greenr); + display: flex; align-items: center; justify-content: center; + color: var(--green); font-size: 18px; +} +.sb-title { font-size: 14px; font-weight: 800; color: var(--tx); } +.sb-sub { font-size: 10px; color: var(--txd); margin-top: 1px; } -/* ── LEGEND CARD ── */ -.legend-card { background:var(--sf2); border:1px solid var(--bd); border-radius:var(--radius); padding:10px 12px; display:flex; flex-direction:column; gap:7px; } -.leg-row { display:flex; align-items:center; gap:9px; font-size:12px; color:var(--txs); font-weight:500; } -.leg-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; border:2px solid rgba(0,0,0,.08); } -.leg-dot.spbu-24 { background:var(--spbu-24-fill); box-shadow:0 0 0 3px var(--spbu-24-bg); } -.leg-dot.spbu-ltd { background:var(--spbu-ltd-fill); box-shadow:0 0 0 3px var(--spbu-ltd-bg); } -.leg-line { width:24px; height:4px; border-radius:3px; flex-shrink:0; } -.leg-line.jalan-nas { background:var(--jalan-nas); } -.leg-line.jalan-prov { background:var(--jalan-prov); } -.leg-line.jalan-kab { background:var(--jalan-kab); } -.leg-poly { width:18px; height:13px; border-radius:3px; flex-shrink:0; border:2px solid; } -.leg-poly.parsil-shm { background:var(--shm-fill); border-color:var(--shm-stroke); } -.leg-poly.parsil-hgb { background:var(--hgb-fill); border-color:var(--hgb-stroke); } -.leg-poly.parsil-hgu { background:var(--hgu-fill); border-color:var(--hgu-stroke); } -.leg-poly.parsil-hp { background:var(--hp-fill); border-color:var(--hp-stroke); } +.sb-scroll { + flex: 1; overflow-y: auto; padding: 12px; + display: flex; flex-direction: column; gap: 14px; +} +.sb-scroll::-webkit-scrollbar { width: 4px; } +.sb-scroll::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 4px; } + +.sb-section { display: flex; flex-direction: column; gap: 6px; } +.sb-label { + font-size: 10px; font-weight: 700; + text-transform: uppercase; letter-spacing: .8px; + color: var(--green); /* ← hijau tema */ +} + +/* ── LEGEND ── */ +.legend-card { + background: var(--sf2); border: 1px solid var(--bd); + border-radius: var(--radius); padding: 10px 12px; + display: flex; flex-direction: column; gap: 7px; +} +.leg-row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--txs); font-weight: 500; } +.leg-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(0,0,0,.08); } +.leg-dot.spbu-24 { background: var(--spbu-24-fill); box-shadow: 0 0 0 3px var(--spbu-24-bg); } +.leg-dot.spbu-ltd { background: var(--spbu-ltd-fill); box-shadow: 0 0 0 3px var(--spbu-ltd-bg); } +.leg-line { width: 24px; height: 4px; border-radius: 3px; flex-shrink: 0; } +.leg-line.jalan-nas { background: var(--jalan-nas); } +.leg-line.jalan-prov { background: var(--jalan-prov); } +.leg-line.jalan-kab { background: var(--jalan-kab); } +.leg-poly { width: 18px; height: 13px; border-radius: 3px; flex-shrink: 0; border: 2px solid; } +.leg-poly.parsil-shm { background: var(--shm-fill); border-color: var(--shm-stroke); } +.leg-poly.parsil-hgb { background: var(--hgb-fill); border-color: var(--hgb-stroke); } +.leg-poly.parsil-hgu { background: var(--hgu-fill); border-color: var(--hgu-stroke); } +.leg-poly.parsil-hp { background: var(--hp-fill); border-color: var(--hp-stroke); } /* ── STATS ── */ -.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; } -.stat-item { background:var(--sf2); border:1px solid var(--bd); border-radius:var(--radius); padding:10px; text-align:center; } -.stat-item.green { background:var(--greenb); border-color:var(--greenr); } -.stat-item.blue { background:var(--blueb); border-color:var(--bluer); } -.stat-item.purple { background:var(--purpleb);border-color:var(--purpler); } -.stat-num { font-size:22px; font-weight:800; font-family:'Fira Code',monospace; color:var(--tx); } -.stat-item.green .stat-num { color:var(--green); } -.stat-item.blue .stat-num { color:var(--blue); } -.stat-item.purple .stat-num { color:var(--purple); } -.stat-lbl { font-size:10px; color:var(--txd); margin-top:2px; } +.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } +.stat-item { + background: var(--sf2); border: 1px solid var(--bd); + border-radius: var(--radius); padding: 10px; text-align: center; +} +.stat-item.green { background: var(--greenb); border-color: var(--greenr); } +.stat-item.blue { background: var(--blueb); border-color: var(--bluer); } +.stat-item.purple { background: var(--purpleb); border-color: var(--purpler); } +.stat-num { font-size: 22px; font-weight: 800; font-family: 'Fira Code', monospace; color: var(--tx); } +.stat-item.green .stat-num { color: var(--green); } +.stat-item.blue .stat-num { color: var(--blue); } +.stat-item.purple .stat-num { color: var(--purple); } +.stat-lbl { font-size: 10px; color: var(--txd); margin-top: 2px; } /* ── SPBU LIST ── */ -.spbu-item { background:var(--sf); border:1px solid var(--bd); border-radius:var(--radius); padding:9px 11px; cursor:pointer; transition:border-color .18s, background .18s; margin-bottom:5px; display:flex; flex-direction:column; gap:6px; } -.spbu-item:hover { border-color:var(--green); background:var(--greenb); } -.si-top { display:flex; align-items:center; justify-content:space-between; gap:6px; } -.si-name { font-size:13px; font-weight:700; display:flex; align-items:center; gap:7px; } -.si-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } -.si-dot.dot-green { background:var(--spbu-24-fill); box-shadow:0 0 0 2px var(--spbu-24-bg); } -.si-dot.dot-red { background:var(--spbu-ltd-fill); box-shadow:0 0 0 2px var(--spbu-ltd-bg); } -.si-actions { display:flex; gap:4px; flex-shrink:0; } -.empty { text-align:center; padding:24px 0; font-size:12px; color:var(--txd); } +.spbu-item { + background: var(--sf); border: 1px solid var(--bd); + border-radius: var(--radius); padding: 9px 11px; + cursor: pointer; margin-bottom: 5px; + display: flex; flex-direction: column; gap: 6px; + transition: border-color .18s, background .18s; +} +.spbu-item:hover { border-color: var(--green); background: var(--greenb); } +.si-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } +.si-name { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; } +.si-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } +.si-dot.dot-green { background: var(--spbu-24-fill); box-shadow: 0 0 0 2px var(--spbu-24-bg); } +.si-dot.dot-red { background: var(--spbu-ltd-fill); box-shadow: 0 0 0 2px var(--spbu-ltd-bg); } +.si-actions { display: flex; gap: 4px; flex-shrink: 0; } +.empty { text-align: center; padding: 24px 0; font-size: 12px; color: var(--txd); } -/* ── ICON BUTTONS ── */ -.ib { width:34px; height:34px; border-radius:8px; background:var(--sf2); border:1px solid var(--bd); color:var(--txs); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .18s; flex-shrink:0; font-size:13px; } -.ib.edt { background:linear-gradient(180deg,#fff8f0,#fff1e6); border-color:rgba(217,119,6,.12); color:var(--amber); } -.ib.del { background:linear-gradient(180deg,#fff7f7,#fff0f0); border-color:rgba(220,38,38,.08); color:var(--red); } -.ib:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(10,20,40,.06); } +/* icon buttons — SERAGAM HIJAU */ +.ib { + width: 30px; height: 30px; border-radius: 8px; + background: var(--greenb); border: 1px solid var(--greenr); + color: var(--green); /* ← hijau tema */ + cursor: pointer; + display: flex; align-items: center; justify-content: center; + transition: all .18s; flex-shrink: 0; font-size: 13px; +} +.ib.del { + background: var(--redb); border-color: var(--redr); color: var(--red); +} +.ib:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(22,163,74,.15); } +.ib.del:hover { box-shadow: 0 4px 12px rgba(220,38,38,.15); } /* ── BADGE ── */ -.badge { display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; border:1px solid; } -.badge.bg { background:var(--spbu-24-bg); border-color:var(--spbu-24-ring); color:#15803d; } -.badge.br { background:var(--spbu-ltd-bg); border-color:var(--spbu-ltd-ring); color:#dc2626; } -.badge.bb-orange { background:var(--jalan-nas-bg); border-color:var(--jalan-nas-ring); color:#c2410c; } -.badge.bb-blue { background:var(--jalan-prov-bg); border-color:var(--jalan-prov-ring); color:#1d4ed8; } -.badge.bb-green { background:var(--jalan-kab-bg); border-color:var(--jalan-kab-ring); color:#065f46; } -.badge.bp-shm { background:var(--shm-bg); border-color:var(--shm-ring); color:var(--shm-stroke); } -.badge.bp-hgb { background:var(--hgb-bg); border-color:var(--hgb-ring); color:var(--hgb-stroke); } -.badge.bp-hgu { background:var(--hgu-bg); border-color:var(--hgu-ring); color:var(--hgu-stroke); } -.badge.bp-hp { background:var(--hp-bg); border-color:var(--hp-ring); color:var(--hp-stroke); } +.badge { + display: inline-flex; align-items: center; + font-size: 10px; font-weight: 700; + padding: 2px 8px; border-radius: 20px; border: 1px solid; +} +.badge.bg { background: var(--spbu-24-bg); border-color: var(--spbu-24-ring); color: #15803d; } +.badge.br { background: var(--spbu-ltd-bg); border-color: var(--spbu-ltd-ring); color: #dc2626; } +.badge.bb-orange { background: var(--jalan-nas-bg); border-color: var(--jalan-nas-ring); color: #c2410c; } +.badge.bb-blue { background: var(--jalan-prov-bg); border-color: var(--jalan-prov-ring); color: #1d4ed8; } +.badge.bb-green { background: var(--jalan-kab-bg); border-color: var(--jalan-kab-ring); color: #065f46; } +.badge.bp-shm { background: var(--shm-bg); border-color: var(--shm-ring); color: var(--shm-stroke); } +.badge.bp-hgb { background: var(--hgb-bg); border-color: var(--hgb-ring); color: var(--hgb-stroke); } +.badge.bp-hgu { background: var(--hgu-bg); border-color: var(--hgu-ring); color: var(--hgu-stroke); } +.badge.bp-hp { background: var(--hp-bg); border-color: var(--hp-ring); color: var(--hp-stroke); } /* ── GEOM SELECTOR ── */ -.geom-selector { display:flex; gap:3px; background:var(--sf2); border:1px solid var(--bd); border-radius:9px; padding:3px; } -.geom-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:5px; padding:6px 8px; border-radius:7px; border:none; background:transparent; color:var(--txs); font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:600; cursor:pointer; transition:all .18s; white-space:nowrap; } -.geom-btn:hover { background:var(--sf); color:var(--tx); } -.geom-btn.active { background:var(--green); color:#fff; box-shadow:0 2px 8px rgba(22,163,74,.3); } -.geom-hint { font-size:10px; color:var(--txd); text-align:left; margin-top:4px; min-height:14px; padding-left:2px; transition:color .18s; display:flex; align-items:center; gap:5px; } -.geom-hint .gh-dot { width:6px; height:6px; border-radius:50%; background:var(--bdh); flex-shrink:0; transition:background .18s; } -.geom-hint.on { color:var(--green); font-weight:600; } -.geom-hint.on .gh-dot { background:var(--green); box-shadow:0 0 0 2px rgba(22,163,74,.2); } +.geom-selector { + display: flex; gap: 3px; + background: var(--sf2); border: 1px solid var(--bd); + border-radius: 9px; padding: 3px; +} +.geom-btn { + flex: 1; display: flex; align-items: center; justify-content: center; + gap: 5px; padding: 6px 8px; border-radius: 7px; + border: none; background: transparent; color: var(--txs); + font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 600; + cursor: pointer; transition: all .18s; white-space: nowrap; +} +.geom-btn:hover { background: var(--sf); color: var(--tx); } +.geom-btn.active { background: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,.3); } +.geom-hint { + font-size: 10px; color: var(--txd); text-align: left; + margin-top: 4px; min-height: 14px; padding-left: 2px; + transition: color .18s; display: flex; align-items: center; gap: 5px; +} +.geom-hint .gh-dot { + width: 6px; height: 6px; border-radius: 50%; + background: var(--bdh); flex-shrink: 0; transition: background .18s; +} +.geom-hint.on { color: var(--green); font-weight: 600; } +.geom-hint.on .gh-dot { background: var(--green); box-shadow: 0 0 0 2px rgba(22,163,74,.2); } /* ── MAIN ── */ -#main { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; } -#topbar { height:var(--topbar); min-height:var(--topbar); background:var(--sf); border-bottom:1px solid var(--bd); display:flex; align-items:center; padding:0 12px; gap:8px; box-shadow:var(--sh-sm); overflow:visible; position:relative; z-index:850; } -.coord-pill { flex:0 0 auto; font-family:'Fira Code',monospace; font-size:11px; color:var(--txd); background:var(--sf2); border:1px solid var(--bd); border-radius:7px; padding:4px 10px; display:flex; align-items:center; gap:5px; white-space:nowrap; } -.pill-sep { color:var(--bdh); } +#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; } + +/* ── TOPBAR ── */ +#topbar { + height: var(--topbar); min-height: var(--topbar); + background: var(--sf); border-bottom: 1px solid var(--bd); + display: flex; align-items: center; padding: 0 12px; gap: 8px; + box-shadow: var(--sh-sm); overflow: visible; + position: relative; z-index: 850; +} + +/* koordinat pill */ +.coord-pill { + flex: 0 0 auto; font-family: 'Fira Code', monospace; + font-size: 11px; color: var(--txd); + background: var(--sf2); border: 1px solid var(--bd); + border-radius: 7px; padding: 4px 10px; + display: flex; align-items: center; gap: 5px; white-space: nowrap; +} +.coord-pill > span:first-child { color: var(--green); } /* ← ikon hijau */ +.pill-sep { color: var(--bdh); } /* ── SEARCH ── */ -#search-wrap { - flex: 1; - position: relative; - max-width: 340px; - z-index: 1300; -} - +#search-wrap { flex: 1; position: relative; max-width: 340px; z-index: 1300; } .search-box { - display: flex; - align-items: center; - gap: 7px; - background: var(--sf2); - border: 1.5px solid var(--bd); - border-radius: 9px; - padding: 0 10px; - height: 34px; + display: flex; align-items: center; gap: 7px; + background: var(--sf2); border: 1.5px solid var(--bd); + border-radius: 9px; padding: 0 10px; height: 34px; transition: border-color .18s, box-shadow .18s; } - .search-box:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.08); } - -.search-icon { font-size: 13px; flex-shrink: 0; opacity: .6; } - -#search-input { - flex: 1; - border: none; - background: transparent; - outline: none; - font-family: 'Plus Jakarta Sans', sans-serif; - font-size: 13px; - color: var(--tx); +.search-icon { + font-size: 13px; flex-shrink: 0; + color: var(--green); /* ← hijau tema */ +} +#search-input { + flex: 1; border: none; background: transparent; outline: none; + font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: var(--tx); } - #search-input::placeholder { color: var(--txd); } - #search-results { - position: absolute; - top: calc(100% + 6px); - left: 0; - right: 0; - background: var(--sf); - border: 1px solid var(--bd); - border-radius: 11px; - box-shadow: var(--sh-lg); - overflow: hidden; - opacity: 0; - pointer-events: none; + position: absolute; top: calc(100% + 6px); left: 0; right: 0; + background: var(--sf); border: 1px solid var(--bd); + border-radius: 11px; box-shadow: var(--sh-lg); + overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .18s, transform .18s; - max-height: 320px; - overflow-y: auto; + max-height: 320px; overflow-y: auto; } - -#search-results.open { - opacity: 1; - pointer-events: all; - transform: translateY(0); -} - +#search-results.open { opacity: 1; pointer-events: all; transform: translateY(0); } .sr-item { - display: flex; - align-items: center; - gap: 10px; - padding: 9px 12px; - cursor: pointer; - transition: background .14s; - border-bottom: 1px solid var(--sf3); + display: flex; align-items: center; gap: 10px; + padding: 9px 12px; cursor: pointer; + transition: background .14s; border-bottom: 1px solid var(--sf3); } - .sr-item:last-child { border-bottom: none; } - .sr-item:hover { background: var(--sf2); } - .sr-icon { - width: 30px; - height: 30px; - border-radius: 8px; - background: var(--sf2); - border: 1px solid var(--bd); - display: flex; - align-items: center; - justify-content: center; - font-size: 14px; - flex-shrink: 0; + width: 30px; height: 30px; border-radius: 8px; + background: var(--greenb); border: 1px solid var(--greenr); /* ← hijau tema */ + display: flex; align-items: center; justify-content: center; + font-size: 14px; flex-shrink: 0; } - -.sr-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } +.sr-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sr-label { font-size: 13px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.sr-sub { font-size: 10px; color: var(--txd); font-weight: 500; } +.sr-sub { font-size: 10px; color: var(--txd); font-weight: 500; } .sr-empty { padding: 16px 12px; font-size: 12px; color: var(--txd); text-align: center; } /* ── LAYER DROPDOWN ── */ -.layer-wrap { position:relative; flex-shrink:0; z-index:1100; } -.layer-btn { height:34px; padding:0 12px; border-radius:8px; background:var(--sf2); border:1px solid var(--bd); color:var(--txs); font-size:12px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .18s; white-space:nowrap; } -.layer-btn:hover { border-color:var(--bdh); color:var(--tx); } -.layer-menu { position:absolute; top:calc(100% + 6px); right:0; background:var(--sf); border:1px solid var(--bd); border-radius:11px; padding:6px; min-width:200px; box-shadow:var(--sh-lg); z-index:1200; opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .18s, transform .18s; } -.layer-menu.open { opacity:1; pointer-events:all; transform:translateY(0); } -.lm-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--txd); padding:4px 8px 6px; } -.lm-item { width:100%; display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:7px; border:none; background:transparent; color:var(--txs); font-size:12px; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:all .15s; text-align:left; } -.lm-item:hover { background:var(--sf2); color:var(--tx); } -.lm-item.active { color:var(--tx); font-weight:600; } +.layer-wrap { position: absolute; top: 10px; right: 10px; flex-shrink: 0; z-index: 1100; } +.layer-btn { + height: 34px; padding: 0 12px; border-radius: 8px; + background: var(--sf); border: 1px solid var(--bd); + color: var(--txs); font-size: 12px; font-weight: 600; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; display: flex; align-items: center; gap: 6px; + transition: all .18s; white-space: nowrap; box-shadow: var(--sh-sm); +} +.layer-btn:hover { border-color: var(--bdh); color: var(--tx); } +.layer-btn svg { color: var(--green); flex-shrink: 0; } /* ← ikon SVG hijau */ +.layer-btn .chev { color: var(--green); font-size: 10px; } /* ← chevron hijau */ + +.layer-menu { + position: absolute; top: calc(100% + 6px); right: 0; + background: var(--sf); border: 1px solid var(--bd); + border-radius: 13px; padding: 8px 6px; min-width: 210px; + box-shadow: var(--sh-lg); z-index: 1200; + opacity: 0; pointer-events: none; + transform: translateY(6px); + transition: opacity .18s, transform .18s; +} +.layer-menu.open { opacity: 1; pointer-events: all; transform: translateY(0); } + +.lm-label { + font-size: 10px; font-weight: 700; text-transform: uppercase; + letter-spacing: .8px; color: var(--green); /* ← hijau tema */ + padding: 4px 10px 8px; +} + +/* Item utama layer */ +.lm-item { + width: 100%; display: flex; align-items: center; gap: 8px; + padding: 7px 10px; border-radius: 8px; cursor: pointer; + transition: background .14s; font-size: 13px; + font-weight: 600; color: var(--tx); user-select: none; +} +.lm-item:hover { background: var(--sf2); } +.lm-item input[type="checkbox"] { display: none; } +.lm-icon { font-size: 14px; } + +/* Custom checkbox */ +.lm-check { + width: 16px; height: 16px; border-radius: 5px; + border: 1.5px solid var(--bdh); background: var(--sf2); flex-shrink: 0; + display: flex; align-items: center; justify-content: center; + transition: all .16s; position: relative; +} +.lm-check.sm { width: 14px; height: 14px; border-radius: 4px; } +.lm-item input:checked ~ .lm-check, +.lm-sub-item input:checked ~ .lm-check { + background: var(--green); border-color: var(--green); +} +.lm-item input:checked ~ .lm-check::after, +.lm-sub-item input:checked ~ .lm-check::after { + content: ''; display: block; + width: 4px; height: 7px; + border: 2px solid #fff; border-top: none; border-left: none; + transform: rotate(45deg) translate(-1px, -1px); +} + +/* Sub-option SPBU */ +.lm-sub { + margin: 2px 0 4px 10px; padding: 4px 0 4px 10px; + border-left: 2px solid var(--greenr); /* ← hijau tema */ + display: flex; flex-direction: column; gap: 2px; + max-height: 100px; overflow: hidden; + transition: max-height .2s ease, opacity .2s ease; opacity: 1; +} +.lm-sub.hidden { max-height: 0; opacity: 0; pointer-events: none; } +.lm-sub-item { + display: flex; align-items: center; gap: 8px; + padding: 5px 8px; border-radius: 7px; cursor: pointer; + font-size: 12px; font-weight: 500; color: var(--txs); + user-select: none; transition: background .14s; +} +.lm-sub-item:hover { background: var(--sf2); } +.lm-sub-item input[type="checkbox"] { display: none; } +.lm-sub-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } +.lm-sub-dot.dot-green { background: var(--spbu-24-fill); box-shadow: 0 0 0 2px var(--spbu-24-bg); } +.lm-sub-dot.dot-red { background: var(--spbu-ltd-fill); box-shadow: 0 0 0 2px var(--spbu-ltd-bg); } /* ── MAP ── */ -#map-wrap { flex:1; position:relative; overflow:hidden; } -#map { width:100%; height:100%; } -.leaflet-container.crosshair-cursor { cursor:crosshair !important; } +#map-wrap { flex: 1; position: relative; overflow: hidden; } +#map { width: 100%; height: 100%; } +.leaflet-container.crosshair-cursor { cursor: crosshair !important; } /* ── DRAW TOOLBAR ── */ -#draw-toolbar, #geom-edit-toolbar { - position:absolute; bottom:28px; left:50%; transform:translateX(-50%) translateY(12px); - z-index:1000; display:flex; align-items:center; gap:5px; - background:var(--sf); border:1px solid var(--bd); border-radius:14px; - padding:8px 14px; box-shadow:var(--sh-lg); - pointer-events:all; opacity:0; visibility:hidden; - transition:opacity .22s, transform .22s, visibility .22s; +#draw-toolbar, +#geom-edit-toolbar { + position: absolute; bottom: 28px; left: 50%; + transform: translateX(-50%) translateY(12px); + z-index: 1000; display: flex; align-items: center; gap: 5px; + background: var(--sf); border: 1px solid var(--bd); + border-radius: 14px; padding: 8px 14px; + box-shadow: var(--sh-lg); pointer-events: all; + opacity: 0; visibility: hidden; + transition: opacity .22s, transform .22s, visibility .22s; } -#draw-toolbar.visible, #geom-edit-toolbar.visible { - opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); +#draw-toolbar.visible, +#geom-edit-toolbar.visible { + opacity: 1; visibility: visible; + transform: translateX(-50%) translateY(0); } - -/* geom-edit toolbar sits a bit higher so they don't overlap */ #geom-edit-toolbar { bottom: 28px; } #draw-toolbar.visible ~ #geom-edit-toolbar.visible { bottom: 90px; } -.dt-hint { font-size:12px; font-weight:600; color:var(--txs); padding:0 4px; white-space:nowrap; } -.dt-counter { font-family:'Fira Code',monospace; font-size:12px; font-weight:600; color:var(--blue); background:var(--blueb); border:1px solid var(--bluer); border-radius:7px; padding:4px 10px; white-space:nowrap; } -.geom-edit-counter { color:var(--indigo); background:var(--indigob); border-color:var(--indigor); min-width:120px; } -.dt-btn { display:flex; align-items:center; gap:5px; padding:7px 13px; border-radius:9px; border:1.5px solid var(--bd); background:var(--sf2); color:var(--txs); font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:600; cursor:pointer; transition:all .18s; white-space:nowrap; flex-shrink:0; } -.dt-btn:hover { border-color:var(--bdh); background:var(--sf); color:var(--tx); } -.dt-btn:disabled { opacity:.4; cursor:not-allowed; } -.dt-btn.undo:hover { background:var(--amberb); border-color:var(--amberr); color:var(--amber); } -.dt-btn.redo:hover { background:var(--blueb); border-color:var(--bluer); color:var(--blue); } -.dt-btn.cancel { background:var(--redb); border-color:var(--redr); color:var(--red); } -.dt-btn.cancel:hover { background:var(--red); color:#fff; border-color:var(--red); } -.dt-btn.finish { background:var(--greenb); border-color:var(--greenr); color:var(--green); } -.dt-btn.finish:hover { background:var(--green); color:#fff; border-color:var(--green); } +.dt-hint { font-size: 12px; font-weight: 600; color: var(--green); padding: 0 4px; white-space: nowrap; } /* ← hijau */ +.dt-counter { + font-family: 'Fira Code', monospace; font-size: 12px; font-weight: 600; + color: var(--green); background: var(--greenb); /* ← hijau */ + border: 1px solid var(--greenr); border-radius: 7px; + padding: 4px 10px; white-space: nowrap; +} +.geom-edit-counter { + color: var(--indigo); background: var(--indigob); + border-color: var(--indigor); min-width: 120px; +} +.dt-btn { + display: flex; align-items: center; gap: 5px; + padding: 7px 13px; border-radius: 9px; + border: 1.5px solid var(--greenr); /* ← hijau */ + background: var(--greenb); color: var(--green); /* ← hijau */ + font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600; + cursor: pointer; transition: all .18s; white-space: nowrap; flex-shrink: 0; +} +.dt-btn:hover { background: var(--sf); border-color: var(--bdh); color: var(--tx); } +.dt-btn:disabled { opacity: .4; cursor: not-allowed; } +.dt-btn.undo:hover { background: var(--amberb); border-color: var(--amberr); color: var(--amber); } +.dt-btn.redo:hover { background: var(--blueb); border-color: var(--bluer); color: var(--blue); } +.dt-btn.cancel { + background: var(--redb); border-color: var(--redr); color: var(--red); +} +.dt-btn.cancel:hover { background: var(--red); color: #fff; border-color: var(--red); } +.dt-btn.finish { + background: var(--green); border-color: var(--green); color: #fff; +} +.dt-btn.finish:hover { opacity: .88; } -/* ── POPUP ── */ -.leaflet-popup-content-wrapper { background:var(--sf) !important; border:1px solid var(--bd) !important; border-radius:14px !important; box-shadow:var(--sh-lg) !important; padding:0 !important; overflow:hidden !important; color:var(--tx) !important; } -.leaflet-popup-content { margin:0 !important; width:auto !important; } -.leaflet-popup-tip-container { display:none; } -.leaflet-popup-close-button { top:10px !important; right:12px !important; width:26px !important; height:26px !important; font-size:14px !important; line-height:26px !important; color:var(--txd) !important; background:var(--sf2) !important; border-radius:8px !important; border:1px solid var(--bd) !important; } +/* ── POPUP / PCARD ── */ +.leaflet-popup-content-wrapper { + background: var(--sf) !important; border: 1px solid var(--bd) !important; + border-radius: 16px !important; box-shadow: var(--sh-lg) !important; + padding: 0 !important; overflow: hidden !important; color: var(--tx) !important; +} +.leaflet-popup-content { margin: 0 !important; width: auto !important; } +.leaflet-popup-tip-container { display: none; } +.leaflet-popup-close-button { + top: 10px !important; right: 12px !important; + width: 26px !important; height: 26px !important; + font-size: 14px !important; line-height: 26px !important; + color: var(--txd) !important; background: var(--sf2) !important; + border-radius: 8px !important; border: 1px solid var(--bd) !important; +} -/* ── POPUP DETAIL CARD ── */ -.pcard-detail { min-width:280px; max-width:360px; font-family:'Plus Jakarta Sans',sans-serif; } -.pcd-title { font-size:16px; font-weight:800; color:var(--tx); padding:12px 16px 4px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--bd); margin-bottom:8px; } -.pcd-title[data-type="spbu"]::before { content:"⛽"; font-size:18px; } -.pcd-title[data-type="jalan"]::before { content:"🛣️"; font-size:18px; } -.pcd-title[data-type="parsil"]::before { content:"🗺️"; font-size:18px; } -.pcd-rows { display:flex; flex-direction:column; gap:10px; padding:0 16px 12px; } -.pcd-row { display:flex; align-items:center; justify-content:space-between; background:var(--sf2); padding:8px 12px; border-radius:12px; border:1px solid var(--bd); transition:all .2s; } -.pcd-row:hover { background:var(--sf); border-color:var(--bdh); } -.pcd-label { font-size:12px; font-weight:600; color:var(--txd); display:flex; align-items:center; gap:6px; } -.pcd-val { font-size:13px; font-weight:700; color:var(--tx); text-align:right; word-break:break-word; max-width:180px; } -.pcd-actions { display:flex; gap:7px; padding:8px 16px 16px; border-top:1px solid var(--bd); margin-top:4px; flex-wrap:wrap; } +/* Popup card */ +.pcard-detail { min-width: 300px; max-width: 360px; font-family: 'Plus Jakarta Sans', sans-serif; } -/* ── POPUP BUTTONS ── */ +/* Header popup */ +.pcd-header { + display: flex; align-items: center; gap: 10px; + padding: 14px 16px 12px; + border-bottom: 1px solid var(--bd); +} +.pcd-header-icon { + width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; + background: var(--greenb); border: 1px solid var(--greenr); + display: flex; align-items: center; justify-content: center; font-size: 18px; +} +.pcd-header-icon.jalan { background: var(--jalan-prov-bg); border-color: var(--jalan-prov-ring); } +.pcd-header-icon.parsil { background: var(--shm-bg); border-color: var(--shm-ring); } +.pcd-header-text { flex: 1; min-width: 0; } +.pcd-title { + font-size: 15px; font-weight: 800; color: var(--tx); + white-space: nowrap; overflow: hidden; text-overflow: ellipsis; +} +.pcd-subtitle { font-size: 11px; color: var(--txd); margin-top: 2px; } + +/* Rows popup */ +.pcd-rows { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; } +.pcd-row { + display: flex; align-items: center; justify-content: space-between; gap: 12px; + background: var(--sf2); padding: 8px 12px; + border-radius: 10px; border: 1px solid var(--bd); +} +.pcd-label { font-size: 11px; font-weight: 600; color: var(--txd); display: flex; align-items: center; gap: 5px; white-space: nowrap; } +.pcd-val { font-size: 13px; font-weight: 700; color: var(--tx); text-align: right; word-break: break-word; max-width: 180px; } + +/* Actions popup */ +.pcd-actions { + display: flex; gap: 6px; padding: 10px 16px 14px; + border-top: 1px solid var(--bd); +} .pbtn { - flex: 1; - min-width: 80px; - display: flex; - align-items: center; - justify-content: center; - gap: 5px; - padding: 8px 10px; - border-radius: 10px; - font-size: 12px; - font-weight: 700; - cursor: pointer; - transition: all .2s; - border: none; - font-family: 'Plus Jakarta Sans', sans-serif; + flex: 1; display: flex; align-items: center; justify-content: center; + gap: 5px; padding: 8px 10px; border-radius: 10px; + font-size: 12px; font-weight: 700; cursor: pointer; + transition: all .18s; border: 1.5px solid; font-family: 'Plus Jakarta Sans', sans-serif; } - +/* Edit → hijau tema */ .pbtn-edit { - background: linear-gradient(135deg, #fffbeb, #fff3e0); - color: #d97706; - border: 1.5px solid #fde68a; + background: var(--greenb); color: var(--green); border-color: var(--greenr); } -.pbtn-edit:hover { - background: linear-gradient(135deg, #fef3c7, #ffedd5); - transform: translateY(-1px); - box-shadow: 0 4px 10px rgba(217,119,6,.15); -} - +.pbtn-edit:hover { background: var(--green); color: #fff; border-color: var(--green); transform: translateY(-1px); } +/* Move → indigo */ .pbtn-move { - background: linear-gradient(135deg, #eef2ff, #e0e7ff); - color: #4f46e5; - border: 1.5px solid #c7d2fe; + background: var(--indigob); color: var(--indigo); border-color: var(--indigor); } -.pbtn-move:hover { - background: linear-gradient(135deg, #e0e7ff, #c7d2fe); - transform: translateY(-1px); - box-shadow: 0 4px 10px rgba(79,70,229,.15); -} - +.pbtn-move:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); transform: translateY(-1px); } +/* Delete → merah */ .pbtn-del { - background: linear-gradient(135deg, #fef2f2, #fee2e2); - color: #dc2626; - border: 1.5px solid #fecaca; + background: var(--redb); color: var(--red); border-color: var(--redr); } -.pbtn-del:hover { - background: linear-gradient(135deg, #fee2e2, #fecaca); - transform: translateY(-1px); - box-shadow: 0 4px 10px rgba(220,38,38,.15); +.pbtn-del:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-1px); } + +/* ── MODAL ── */ +.overlay { + position: fixed; inset: 0; z-index: 2000; + background: rgba(15,20,35,.45); backdrop-filter: blur(6px); + display: flex; align-items: center; justify-content: center; + opacity: 0; pointer-events: none; transition: opacity .22s; +} +.overlay.open { opacity: 1; pointer-events: all; } + +.modal { + background: var(--sf); border: 1px solid var(--bd); + border-radius: var(--radius-lg); width: 440px; max-width: 96vw; + box-shadow: var(--sh-lg); overflow: hidden; + transform: translateY(14px) scale(.98); transition: transform .22s; +} +.overlay.open .modal { transform: translateY(0) scale(1); } + +/* Modal header strip */ +.modal-head { + display: flex; align-items: center; gap: 12px; + padding: 16px 20px 14px; + border-bottom: 1px solid var(--bd); + background: var(--greenb); /* ← hijau strip */ +} +.modal-head-icon { + width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; + background: var(--green); color: #fff; + display: flex; align-items: center; justify-content: center; font-size: 16px; +} +.modal-head h2 { font-size: 15px; font-weight: 800; color: var(--green); } /* ← hijau */ + +/* Modal body */ +.modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } + +/* Form group */ +.form-group { display: flex; flex-direction: column; gap: 5px; } +.form-group label { + font-size: 11px; font-weight: 700; text-transform: uppercase; + letter-spacing: .5px; color: var(--green); /* ← hijau */ +} +.form-group input, +.form-group select { + width: 100%; padding: 10px 12px; + background: var(--sf2); border: 1.5px solid var(--bd); + border-radius: 10px; color: var(--tx); + font-size: 13px; font-family: 'Plus Jakarta Sans', sans-serif; + outline: none; transition: border-color .18s, box-shadow .18s; + appearance: none; +} +.form-group input:focus, +.form-group select:focus { + border-color: var(--green); + box-shadow: 0 0 0 3px rgba(22,163,74,.08); +} +.form-group input::placeholder { color: var(--txd); } +.form-group input[readonly] { background: var(--sf3); color: var(--txd); cursor: default; } +.form-group select { + cursor: pointer; + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; + padding-right: 32px; } -/* ── OVERLAY / MODAL ── */ -.overlay { position:fixed; inset:0; z-index:2000; background:rgba(15,20,35,.45); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .22s; } -.overlay.open { opacity:1; pointer-events:all; } -.modal { background:var(--sf); border:1px solid var(--bd); border-radius:var(--radius-lg); padding:22px; width:460px; max-width:96vw; box-shadow:var(--sh-lg); transform:translateY(14px) scale(.98); transition:transform .22s; } -.overlay.open .modal { transform:translateY(0) scale(1); } -.modal-head { display:flex; align-items:center; gap:11px; margin-bottom:16px; } -.modal-head h2 { font-size:15px; font-weight:800; } -.form-group { margin-bottom:12px; } -.form-group label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--txd); margin-bottom:5px; } -.form-group input, .form-group select { width:100%; padding:10px 12px; background:var(--sf2); border:1.5px solid var(--bd); border-radius:10px; color:var(--tx); font-size:14px; font-family:'Plus Jakarta Sans',sans-serif; outline:none; transition:border-color .18s, box-shadow .18s; appearance:none; } -.form-group input:focus, .form-group select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.08); } -.form-group input::placeholder { color:var(--txd); } -.form-group select { cursor:pointer; background-image:url('data:image/svg+xml;utf8,'); background-repeat:no-repeat; background-position:right 10px center; background-size:16px; padding-right:32px; } -.modal-foot { display:flex; gap:8px; margin-top:16px; } -.btn-ghost { flex:1; padding:10px; border-radius:8px; border:1.5px solid var(--bd); background:transparent; color:var(--txs); font-size:13px; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:all .18s; } -.btn-ghost:hover { border-color:var(--bdh); color:var(--tx); background:var(--sf2); } -.btn-primary { flex:1.4; padding:10px; border-radius:8px; border:none; color:#fff; font-size:13px; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif; cursor:pointer; transition:opacity .18s, transform .12s; display:flex; align-items:center; justify-content:center; gap:6px; } -.btn-primary:hover { opacity:.9; transform:translateY(-1px); } -.btn-primary.green { background:linear-gradient(135deg,#22c55e,#16a34a); } -.btn-primary.blue { background:linear-gradient(135deg,#3b82f6,#2563eb); } -.btn-primary.purple { background:linear-gradient(135deg,#a78bfa,#7c3aed); } -.btn-primary.red { background:linear-gradient(135deg,#f87171,#dc2626); } +/* Form grid (2 kolom) */ +.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } -/* ── CUSTOM CONFIRM DIALOG ── */ -.confirm-modal { - width: 380px; - max-width: 94vw; - text-align: center; - padding: 28px 24px 22px; +/* Modal footer */ +.modal-foot { + display: flex; gap: 8px; + padding: 12px 20px 16px; + border-top: 1px solid var(--bd); + background: var(--sf2); } - -.confirm-icon { - font-size: 38px; - margin-bottom: 10px; - line-height: 1; +.btn-ghost { + flex: 1; padding: 10px; border-radius: 9px; + border: 1.5px solid var(--bd); background: transparent; + color: var(--txs); font-size: 13px; font-weight: 600; + font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; transition: all .18s; } - -.confirm-title { - font-size: 16px; - font-weight: 800; - color: var(--tx); - margin-bottom: 6px; +.btn-ghost:hover { border-color: var(--bdh); color: var(--tx); background: var(--sf); } +.btn-primary { + flex: 1.4; padding: 10px; border-radius: 9px; border: none; color: #fff; + font-size: 13px; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; + cursor: pointer; transition: opacity .18s, transform .12s; + display: flex; align-items: center; justify-content: center; gap: 6px; } +.btn-primary:hover { opacity: .9; transform: translateY(-1px); } +.btn-primary.green { background: linear-gradient(135deg, #22c55e, #16a34a); } +.btn-primary.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); } +.btn-primary.purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); } +.btn-primary.red { background: linear-gradient(135deg, #f87171, #dc2626); } -.confirm-message { - font-size: 13px; - color: var(--txs); - margin-bottom: 0; - line-height: 1.5; -} - -.confirm-modal .modal-foot { - margin-top: 20px; - justify-content: center; -} - -.confirm-modal .btn-ghost { flex: 0 0 auto; min-width: 90px; } -.confirm-modal .btn-primary { flex: 0 0 auto; min-width: 120px; } - -/* ── MAP LABELS ── */ -.label-tooltip, .label-tooltip-line, .label-tooltip-polygon { - background: rgba(255,255,255,.95); - border: 1px solid var(--bd); - border-radius: 6px; - padding: 5px 9px; - font-size: 12px; - font-weight: 600; - color: var(--tx); - box-shadow: var(--sh-sm); - white-space: nowrap; - pointer-events: none; -} +/* ── CONFIRM MODAL ── */ +.confirm-modal { width: 360px; max-width: 94vw; } +.confirm-body { padding: 28px 24px 8px; text-align: center; } +.confirm-icon { font-size: 36px; margin-bottom: 10px; line-height: 1; } +.confirm-title { font-size: 16px; font-weight: 800; color: var(--tx); margin-bottom: 6px; } +.confirm-message { font-size: 13px; color: var(--txs); line-height: 1.5; } /* ── TOAST ── */ -#toasts { position:fixed; bottom:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:6px; } -.toast { background:var(--sf); border:1px solid var(--bd); border-radius:9px; padding:9px 14px; font-size:12px; font-weight:600; display:flex; align-items:center; gap:8px; min-width:220px; box-shadow:var(--sh); animation:tslide .22s ease; } -.toast.ok { border-color:var(--greenr); color:var(--green); } -.toast.er { border-color:var(--redr); color:var(--red); } -@keyframes tslide { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } +#toasts { + position: fixed; bottom: 18px; right: 18px; z-index: 9999; + display: flex; flex-direction: column; gap: 6px; +} +.toast { + background: var(--sf); border: 1px solid var(--bd); + border-radius: 9px; padding: 9px 14px; + font-size: 12px; font-weight: 600; + display: flex; align-items: center; gap: 8px; + min-width: 220px; box-shadow: var(--sh); + animation: tslide .22s ease; +} +.toast.ok { border-color: var(--greenr); color: var(--green); } +.toast.er { border-color: var(--redr); color: var(--red); } +@keyframes tslide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── RESPONSIVE ── */ -@media (max-width:640px) { - .modal { width:92vw; padding:16px; } - .pcard-detail { min-width:200px; max-width:260px; } - #search-wrap { max-width:160px; } +@media (max-width: 640px) { + .modal { width: 92vw; } + .pcard-detail { min-width: 200px; max-width: 260px; } + #search-wrap { max-width: 160px; } } \ No newline at end of file diff --git a/01/index.html b/01/index.html index d548963..aec1d46 100644 --- a/01/index.html +++ b/01/index.html @@ -10,6 +10,7 @@ +
@@ -18,7 +19,8 @@
- + +
+
- + +
Tipe Geometri
@@ -90,10 +94,11 @@
Daftar SPBU
+
- +
@@ -101,7 +106,6 @@ —|—
-
🔍 @@ -110,13 +114,54 @@
+
- +
-
Tampilkan
- - - +
Tampilkan Layer
+ + + +
+ + +
+ + + +
@@ -145,129 +190,223 @@
- + - +
-

Tambah SPBU

-
-
-
- - +
+
⛽
+

Tambah SPBU

-
- -
- - +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
- +
- +
-

Tambah Jalan

-
-
- - +
+
🛣️
+

Tambah Jalan

+
+
+
+ + +
+
+ + +
+
+ + +
-
- +
- +
-

Tambah Parsil

-
-
- - +
+
🗺️
+

Tambah Parsil

+
+
+
+ + +
+
+ + +
+
+ + +
-
- +
- +
-

Edit SPBU

+
+
✏️
+

Edit SPBU

+
-
-
-
- - +
+
+ + +
+
+ + +
+
+ + +
- +
- +
-

Edit Jalan

- -
-
- - +
+
✏️
+

Edit Jalan

+
+ +
+
+ + +
+
+ + +
+
+ + +
-
- +
- +
-

Edit Parsil

- -
-
- - +
+
✏️
+

Edit Parsil

+
+ +
+
+ + +
+
+ + +
+
+ + +
-
- +
- +
-
⚠️
-

Konfirmasi

-

Apakah Anda yakin?

+
+
⚠️
+

Konfirmasi

+
+
+

Apakah Anda yakin?

+
- - + +
@@ -277,7 +416,5 @@ - - \ No newline at end of file diff --git a/01/js/main.js b/01/js/main.js index 838842c..17eca16 100644 --- a/01/js/main.js +++ b/01/js/main.js @@ -2,8 +2,8 @@ // KONFIGURASI API // =============================== const API = { - spbu: 'api/spbu.php', - jalan: 'api/jalan.php', + spbu: 'api/spbu.php', + jalan: 'api/jalan.php', parsil: 'api/parsil.php' }; @@ -13,7 +13,7 @@ const API = { const COLORS = { spbu24: { fill: '#22c55e', stroke: '#15803d', glow: 'rgba(34,197,94,.35)' }, spbuLtd: { fill: '#f87171', stroke: '#dc2626', glow: 'rgba(248,113,113,.35)' }, - jalanNasional: '#f97316', + jalanNasional: '#f97316', jalanProvinsi: '#3b82f6', jalanKabupaten: '#10b981', SHM: { stroke: '#d97706', fill: '#fef3c7' }, @@ -26,11 +26,12 @@ const COLORS = { // STATE GLOBAL // =============================== let map; -let layers = { spbu: null, jalan: null, parsil: null }; +let layers = { jalan: null, parsil: null }; +let spbu24Group, spbuLtdGroup; -let currentGeom = null; -let drawPoints = []; -let tempLayer = null; +let currentGeom = null; +let drawPoints = []; +let tempLayer = null; let savedDrawPoints = []; let allSpbu = [], allJalan = [], allParsil = []; @@ -40,38 +41,33 @@ let vertexMarkers = []; let undoStack = []; let redoStack = []; -// Edit-in-place state -let editingFeature = null; // { type:'jalan'|'parsil', id, layer, geomLayer, vertexMarkers } +let editingFeature = null; // =============================== -// CUSTOM CONFIRM DIALOG +// CONFIRM DIALOG // =============================== function showConfirm(message, title = 'Konfirmasi') { return new Promise(resolve => { - const overlay = document.getElementById('confirm-overlay'); - document.getElementById('confirm-title').textContent = title; - document.getElementById('confirm-message').textContent = message; + const overlay = document.getElementById('confirm-overlay'); + const titleEl = document.getElementById('confirm-title'); + const msgEl = document.getElementById('confirm-message'); + if (titleEl) titleEl.textContent = title; + if (msgEl) msgEl.textContent = message; overlay.classList.add('open'); - - const btnOk = document.getElementById('confirm-ok'); + const btnOk = document.getElementById('confirm-ok'); const btnCancel = document.getElementById('confirm-cancel'); - function cleanup() { overlay.classList.remove('open'); btnOk.removeEventListener('click', onOk); btnCancel.removeEventListener('click', onCancel); } - function onOk() { cleanup(); resolve(true); } + function onOk() { cleanup(); resolve(true); } function onCancel() { cleanup(); resolve(false); } - btnOk.addEventListener('click', onOk); btnCancel.addEventListener('click', onCancel); }); } -// =============================== -// TOAST NOTIFICATION -// =============================== function showToast(msg, type = 'ok') { const container = document.getElementById('toasts'); const toast = document.createElement('div'); @@ -82,33 +78,25 @@ function showToast(msg, type = 'ok') { } // =============================== -// BUAT ICON SVG MARKER SPBU +// ICON SPBU // =============================== function makeSpbuIcon(is24) { const c = is24 ? COLORS.spbu24 : COLORS.spbuLtd; - const svg = ` - - - - - - - - - - - ⛽ - `; - - return L.divIcon({ - html: svg, - className: '', - iconSize: [32, 40], - iconAnchor: [16, 38], - popupAnchor: [0, -38] - }); + const id = is24 ? 'g' : 'r'; + const svg = ` + + + + + + + + + + ⛽ + `; + return L.divIcon({ html: svg, className: '', iconSize: [32, 40], iconAnchor: [16, 38], popupAnchor: [0, -38] }); } // =============================== @@ -116,18 +104,162 @@ function makeSpbuIcon(is24) { // =============================== function initMap() { map = L.map('map').setView([-0.0263, 109.3425], 14); - L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap', - maxZoom: 19 + attribution: '© OpenStreetMap', maxZoom: 19 }).addTo(map); map.on('click', onMapClick); - map.on('mousemove', e => { document.getElementById('cur-lat').innerText = e.latlng.lat.toFixed(5); document.getElementById('cur-lng').innerText = e.latlng.lng.toFixed(5); }); + + spbu24Group = L.layerGroup().addTo(map); + spbuLtdGroup = L.layerGroup().addTo(map); +} + +// =============================== +// BUILD POPUP — SPBU +// =============================== +function buildSpbuPopup(s) { + const nama = s.namaspbu || '—'; + const is24 = s.statusbuka === 'full'; + const coord = (s.lat && s.lng) ? `${Number(s.lat).toFixed(6)}, ${Number(s.lng).toFixed(6)}` : '—'; + const wa = s.nomorwa || ''; + const badgeCls = is24 ? 'bg' : 'br'; + const statusLabel = is24 ? 'Buka 24 Jam' : 'Tidak 24 Jam'; + + return ` +
+
+
⛽
+
+
${nama}
+
SPBU
+
+
+
+
+ 📍 Koordinat + ${coord} +
+
+ ⏰ Status + ${statusLabel} +
+ ${wa ? `
+ 📱 WhatsApp + ${wa} +
` : ''} +
+
+ + +
+
`; +} + +// =============================== +// BUILD POPUP — JALAN +// =============================== +function buildJalanPopup(p) { + const nama = p.nama || '—'; + const status = p.status || 'kabupaten'; + const panjang = p.panjang_meter ? Number(p.panjang_meter).toFixed(2) + ' m' : '—'; + let statusLabel = 'Kabupaten', badgeClass = 'bb-green'; + if (status === 'nasional') { statusLabel = 'Nasional'; badgeClass = 'bb-orange'; } + if (status === 'provinsi') { statusLabel = 'Provinsi'; badgeClass = 'bb-blue'; } + + return ` +
+
+
🛣️
+
+
${nama}
+
Jalan
+
+
+
+
+ 🛣️ Status + ${statusLabel} +
+
+ 📏 Panjang + ${panjang} +
+
+
+ + + +
+
`; +} + +// =============================== +// BUILD POPUP — PARSIL +// =============================== +function buildParsilPopup(props) { + const nama = props.nama || '—'; + const status = props.status_kepemilikan || 'SHM'; + const luas = props.luas_m2 ? Number(props.luas_m2).toFixed(2) + ' m²' : '—'; + const badgeMap = { SHM: 'bp-shm', HGB: 'bp-hgb', HGU: 'bp-hgu', HP: 'bp-hp' }; + const badgeClass = badgeMap[status] || 'bp-shm'; + + return ` +
+
+
🗺️
+
+
${nama}
+
Parsil Tanah
+
+
+
+
+ 📋 Kepemilikan + ${status} +
+
+ 📐 Luas + ${luas} +
+
+
+ + + +
+
`; +} + +// =============================== +// RENDER SPBU +// =============================== +function renderSpbuLayer() { + spbu24Group.clearLayers(); + spbuLtdGroup.clearLayers(); + + allSpbu.forEach(s => { + const is24 = s.statusbuka === 'full'; + const icon = makeSpbuIcon(is24); + const marker = L.marker([s.lat, s.lng], { icon, draggable: true, title: s.namaspbu }); + marker.bindPopup(buildSpbuPopup(s)); + marker.on('click', () => { if (!currentGeom) marker.openPopup(); }); + marker.on('dragstart', () => { isDraggingMarker = true; marker.setOpacity(0.65); }); + marker.on('dragend', async () => { + isDraggingMarker = false; + marker.setOpacity(1); + const newPos = marker.getLatLng(); + await updateSpbuCoordinates(s.id, newPos.lat, newPos.lng); + s.lat = newPos.lat; s.lng = newPos.lng; + marker.setPopupContent(buildSpbuPopup(s)); + showToast('Koordinat SPBU diperbarui'); + }); + if (is24) spbu24Group.addLayer(marker); + else spbuLtdGroup.addLayer(marker); + }); } // =============================== @@ -136,20 +268,17 @@ function initMap() { async function loadAllData() { try { const [spbuRes, jalanRes, parsilRes] = await Promise.all([ - fetch(API.spbu + '?action=list').then(r => r.json()), - fetch(API.jalan + '?action=list').then(r => r.json()), + fetch(API.spbu + '?action=list').then(r => r.json()), + fetch(API.jalan + '?action=list').then(r => r.json()), fetch(API.parsil + '?action=list').then(r => r.json()) ]); - allSpbu = spbuRes.data || []; allJalan = jalanRes.data || []; allParsil = parsilRes.data || []; - renderSpbuLayer(); renderJalanLayer(); renderParsilLayer(); renderSpbuList(); - } catch (e) { console.error(e); } finally { @@ -158,229 +287,13 @@ async function loadAllData() { } // =============================== -// RENDER SPBU (POINT) — tanpa tooltip bubble -// =============================== -function renderSpbuLayer() { - if (layers.spbu) map.removeLayer(layers.spbu); - layers.spbu = L.layerGroup(); - - allSpbu.forEach(s => { - const is24 = s.statusbuka === 'full'; - const icon = makeSpbuIcon(is24); - - // ❌ Tidak ada .bindTooltip — bubble nama dihapus - const marker = L.marker([s.lat, s.lng], { icon, draggable: true, title: s.namaspbu }); - - marker.bindPopup(buildSpbuPopup(s)); - - marker.on('click', () => { - if (currentGeom) return; - marker.openPopup(); - }); - - marker.on('dragstart', () => { - isDraggingMarker = true; - marker.setOpacity(0.65); - }); - - marker.on('dragend', async () => { - isDraggingMarker = false; - marker.setOpacity(1); - const newPos = marker.getLatLng(); - await updateSpbuCoordinates(s.id, newPos.lat, newPos.lng); - s.lat = newPos.lat; - s.lng = newPos.lng; - marker.setPopupContent(buildSpbuPopup(s)); - showToast('Koordinat SPBU diperbarui'); - }); - - layers.spbu.addLayer(marker); - }); - - layers.spbu.addTo(map); -} - -function buildSpbuPopup(s) { - const nama = s.namaspbu || '—'; - const is24 = s.statusbuka === 'full'; - const status = is24 ? 'Buka 24 Jam' : 'Tidak 24 Jam'; - const wa = s.nomorwa || '—'; - const coord = (s.lat && s.lng) ? `${Number(s.lat).toFixed(6)}, ${Number(s.lng).toFixed(6)}` : '—'; - const badgeCls = is24 ? 'bg' : 'br'; - - return ` -
-
${nama}
-
-
- 📍 Koordinat - ${coord} -
-
- ⏰ Status - ${status} -
- ${wa !== '—' ? `
📱 WhatsApp${wa}
` : ''} -
-
- - -
-
`; -} - -// =============================== -// EDIT / DELETE SPBU -// =============================== -function editSpbu(id) { - const s = allSpbu.find(x => x.id == id); - if (!s) return showToast('Data SPBU tidak ditemukan', 'er'); - document.getElementById('e-spbu-id').value = s.id; - document.getElementById('e-spbu-nama').value = s.namaspbu || ''; - document.getElementById('e-spbu-wa').value = s.nomorwa || ''; - document.getElementById('e-spbu-status').value = s.statusbuka || 'limited'; - openModal('m-edit-spbu'); -} - -async function hapusSpbu(id) { - const ok = await showConfirm('Hapus SPBU ini? Tindakan tidak dapat dibatalkan.', 'Hapus SPBU'); - if (!ok) return; - try { - const res = await fetch(API.spbu, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({action:'delete',id}) }); - const j = await res.json(); - if (j.status==='success') { loadAllData(); showToast('SPBU berhasil dihapus'); } - else showToast(j.message||'Gagal hapus', 'er'); - } catch(e) { showToast('Gagal: '+e.message, 'er'); } -} - -async function updateSpbu() { - const id = parseInt(document.getElementById('e-spbu-id').value||0); - const namaspbu = document.getElementById('e-spbu-nama').value; - const nomorwa = document.getElementById('e-spbu-wa').value; - const statusbuka= document.getElementById('e-spbu-status').value; - try { - const res = await fetch(API.spbu, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({action:'update',id,namaspbu,nomorwa,statusbuka}) }); - const j = await res.json(); - if (j.status==='success') { closeModal('m-edit-spbu'); loadAllData(); showToast('SPBU diperbarui'); } - else showToast(j.message||'Gagal update', 'er'); - } catch(e) { showToast('Gagal: '+e.message, 'er'); } -} - -async function updateSpbuCoordinates(id, lat, lng) { - const spbu = allSpbu.find(x => x.id == id); - if (!spbu) return; - await fetch(API.spbu, { - method: 'POST', headers: {'Content-Type':'application/json'}, - body: JSON.stringify({ action:'update', id, namaspbu:spbu.namaspbu, nomorwa:spbu.nomorwa, statusbuka:spbu.statusbuka, koordinat:{type:'Point', coordinates:[lng,lat]} }) - }); -} - -// =============================== -// RENDER LIST & STATS -// =============================== -function renderSpbuList() { - const el = document.getElementById('spbu-list'); - if (!el) return; - - document.getElementById('cnt-total').innerText = allSpbu.length; - document.getElementById('cnt-24').innerText = allSpbu.filter(s=>s.statusbuka==='full').length; - document.getElementById('cnt-jalan').innerText = allJalan.length; - document.getElementById('cnt-parsil').innerText = allParsil.length; - - if (!allSpbu.length) { el.innerHTML = '
Belum ada SPBU tercatat.
'; return; } - - el.innerHTML = allSpbu.map(s => { - const lat = parseFloat(s.lat)||0, lng = parseFloat(s.lng)||0; - const dot = s.statusbuka==='full' ? 'dot-green' : 'dot-red'; - return ` -
-
-
${s.namaspbu||'—'}
-
- - -
-
-
`; - }).join(''); -} - -function flyTo(lat, lng) { - if (map) map.setView([lat, lng], 16); -} - -// =============================== -// SEARCH -// =============================== -function setupSearch() { - const input = document.getElementById('search-input'); - const results = document.getElementById('search-results'); - if (!input || !results) return; - - input.addEventListener('input', () => { - const q = input.value.trim().toLowerCase(); - results.innerHTML = ''; - if (!q) { results.classList.remove('open'); return; } - - const hits = []; - - allSpbu.forEach(s => { - if ((s.namaspbu||'').toLowerCase().includes(q)) { - hits.push({ label: s.namaspbu, sub: 'SPBU · Point', icon: '⛽', action: () => { flyTo(s.lat, s.lng); input.value=''; results.classList.remove('open'); } }); - } - }); - allJalan.forEach(j => { - if ((j.nama||'').toLowerCase().includes(q)) { - hits.push({ label: j.nama, sub: `Jalan ${j.status||''}`, icon: '🛣️', action: () => { - try { const geom = JSON.parse(j.geom); const coords = geom.coordinates; const mid = coords[Math.floor(coords.length/2)]; map.setView([mid[1],mid[0]],16); } catch(e){} - input.value=''; results.classList.remove('open'); - }}); - } - }); - allParsil.forEach(p => { - if ((p.nama||'').toLowerCase().includes(q)) { - hits.push({ label: p.nama, sub: `Parsil · ${p.status_kepemilikan||'SHM'}`, icon: '🗺️', action: () => { - try { const geom = JSON.parse(p.geom); const coords = geom.coordinates[0]; const cx = coords.reduce((a,c)=>a+c[0],0)/coords.length; const cy = coords.reduce((a,c)=>a+c[1],0)/coords.length; map.setView([cy,cx],17); } catch(e){} - input.value=''; results.classList.remove('open'); - }}); - } - }); - - if (!hits.length) { - results.innerHTML = '
Tidak ada hasil
'; - } else { - results.innerHTML = hits.slice(0,8).map((h,i) => ` -
- ${h.icon} -
-
${h.label}
-
${h.sub}
-
-
`).join(''); - results.querySelectorAll('.sr-item').forEach((el,i) => { - el.addEventListener('click', () => hits[i].action()); - }); - } - results.classList.add('open'); - }); - - document.addEventListener('click', e => { - if (!e.target.closest('#search-wrap')) results.classList.remove('open'); - }); -} - -// =============================== -// RENDER JALAN (LINE) +// RENDER JALAN // =============================== function renderJalanLayer() { if (layers.jalan) map.removeLayer(layers.jalan); - const geojson = allJalan.map(j => ({ - type: 'Feature', - geometry: JSON.parse(j.geom), - properties: j + type: 'Feature', geometry: JSON.parse(j.geom), properties: j })); - layers.jalan = L.geoJSON(geojson, { style: f => { const s = f.properties.status; @@ -391,46 +304,129 @@ function renderJalanLayer() { }, onEachFeature: (f, layer) => { layer.bindPopup(buildJalanPopup(f.properties)); - layer.on('click', e => { - if (currentGeom) return; - L.DomEvent.stopPropagation(e); - layer.openPopup(); - }); + layer.on('click', e => { if (!currentGeom) { L.DomEvent.stopPropagation(e); layer.openPopup(); } }); } }).addTo(map); } -function buildJalanPopup(p) { - const nama = p.nama || '—'; - const status = p.status || 'kabupaten'; - let statusLabel='Kabupaten', badgeClass='bb-green'; - if (status==='nasional') { statusLabel='Nasional'; badgeClass='bb-orange'; } - else if (status==='provinsi') { statusLabel='Provinsi'; badgeClass='bb-blue'; } - const panjang = p.panjang_meter ? Number(p.panjang_meter).toFixed(2)+' m' : '—'; - - return ` -
-
${nama}
-
-
- 🛣️ Status - ${statusLabel} -
-
- 📏 Panjang - ${panjang} -
-
-
- - - -
-
`; +// =============================== +// RENDER PARSIL +// =============================== +function renderParsilLayer() { + if (layers.parsil) map.removeLayer(layers.parsil); + const geojson = allParsil.map(p => ({ + type: 'Feature', geometry: JSON.parse(p.geom), properties: p + })); + layers.parsil = L.geoJSON(geojson, { + style: f => { + const c = COLORS[f.properties.status_kepemilikan] || COLORS.SHM; + return { color: c.stroke, fillColor: c.fill, weight: 2.5, fillOpacity: 0.45 }; + }, + onEachFeature: (f, layer) => { + layer.bindPopup(buildParsilPopup(f.properties)); + layer.on('click', e => { if (!currentGeom) { L.DomEvent.stopPropagation(e); layer.openPopup(); } }); + } + }).addTo(map); } +// =============================== +// LIST SPBU & STATS +// =============================== +function renderSpbuList() { + const el = document.getElementById('spbu-list'); + if (!el) return; + document.getElementById('cnt-total').innerText = allSpbu.length; + document.getElementById('cnt-24').innerText = allSpbu.filter(s => s.statusbuka === 'full').length; + document.getElementById('cnt-jalan').innerText = allJalan.length; + document.getElementById('cnt-parsil').innerText = allParsil.length; + + if (!allSpbu.length) { + el.innerHTML = '
Belum ada SPBU tercatat.
'; + return; + } + el.innerHTML = allSpbu.map(s => { + const lat = parseFloat(s.lat) || 0; + const lng = parseFloat(s.lng) || 0; + const dot = s.statusbuka === 'full' ? 'dot-green' : 'dot-red'; + return ` +
+
+
+ + ${s.namaspbu || '—'} +
+
+ + +
+
+
`; + }).join(''); +} + +function flyTo(lat, lng) { if (map) map.setView([lat, lng], 16); } + +// =============================== +// EDIT / HAPUS SPBU +// =============================== +function editSpbu(id) { + const s = allSpbu.find(x => x.id == id); + if (!s) return showToast('Data SPBU tidak ditemukan', 'er'); + document.getElementById('e-spbu-id').value = s.id; + document.getElementById('e-spbu-nama').value = s.namaspbu || ''; + document.getElementById('e-spbu-wa').value = s.nomorwa || ''; + document.getElementById('e-spbu-status').value = s.statusbuka || 'limited'; + openModal('m-edit-spbu'); +} + +async function hapusSpbu(id) { + const ok = await showConfirm('Hapus SPBU ini? Tindakan tidak dapat dibatalkan.', 'Hapus SPBU'); + if (!ok) return; + try { + const res = await fetch(API.spbu, { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ action: 'delete', id }) + }); + const j = await res.json(); + if (j.status === 'success') { loadAllData(); showToast('SPBU berhasil dihapus'); } + else showToast(j.message || 'Gagal hapus', 'er'); + } catch (e) { showToast('Gagal: ' + e.message, 'er'); } +} + +async function updateSpbu() { + const id = parseInt(document.getElementById('e-spbu-id').value || 0); + const namaspbu = document.getElementById('e-spbu-nama').value; + const nomorwa = document.getElementById('e-spbu-wa').value; + const statusbuka = document.getElementById('e-spbu-status').value; + try { + const res = await fetch(API.spbu, { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ action: 'update', id, namaspbu, nomorwa, statusbuka }) + }); + const j = await res.json(); + if (j.status === 'success') { closeModal('m-edit-spbu'); loadAllData(); showToast('SPBU diperbarui'); } + else showToast(j.message || 'Gagal update', 'er'); + } catch (e) { showToast('Gagal: ' + e.message, 'er'); } +} + +async function updateSpbuCoordinates(id, lat, lng) { + const spbu = allSpbu.find(x => x.id == id); + if (!spbu) return; + await fetch(API.spbu, { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'update', id, + namaspbu: spbu.namaspbu, nomorwa: spbu.nomorwa, statusbuka: spbu.statusbuka, + koordinat: { type: 'Point', coordinates: [lng, lat] } + }) + }); +} + +// =============================== +// EDIT / HAPUS JALAN +// =============================== function editJalan(id) { - const j = allJalan.find(x=>x.id==id); + const j = allJalan.find(x => x.id == id); if (!j) return showToast('Data jalan tidak ditemukan', 'er'); document.getElementById('e-jalan-id').value = j.id; document.getElementById('e-j-nama').value = j.nama || ''; @@ -443,124 +439,67 @@ async function hapusJalan(id) { const ok = await showConfirm('Hapus jalan ini? Tindakan tidak dapat dibatalkan.', 'Hapus Jalan'); if (!ok) return; try { - const res = await fetch(API.jalan, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({action:'delete',id}) }); + const res = await fetch(API.jalan, { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ action: 'delete', id }) + }); const j = await res.json(); - if (j.status==='success') { loadAllData(); showToast('Jalan berhasil dihapus'); } - else showToast(j.message||'Gagal hapus', 'er'); - } catch(e) { showToast('Gagal: '+e.message, 'er'); } + if (j.status === 'success') { loadAllData(); showToast('Jalan berhasil dihapus'); } + else showToast(j.message || 'Gagal hapus', 'er'); + } catch (e) { showToast('Gagal: ' + e.message, 'er'); } } async function updateJalan() { - const id = parseInt(document.getElementById('e-jalan-id').value||0); - const nama = document.getElementById('e-j-nama').value; - const status = document.getElementById('e-j-status').value; - const panjang_meter= parseFloat(document.getElementById('e-j-panjang').value); + const id = parseInt(document.getElementById('e-jalan-id').value || 0); + const nama = document.getElementById('e-j-nama').value; + const status = document.getElementById('e-j-status').value; + const panjang_meter = parseFloat(document.getElementById('e-j-panjang').value); try { - const res = await fetch(API.jalan, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({action:'update',id,nama,status,panjang_meter}) }); + const res = await fetch(API.jalan, { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ action: 'update', id, nama, status, panjang_meter }) + }); const j = await res.json(); - if (j.status==='success') { closeModal('m-edit-jalan'); loadAllData(); showToast('Jalan diperbarui'); } - else showToast(j.message||'Gagal update', 'er'); - } catch(e) { showToast('Gagal: '+e.message, 'er'); } + if (j.status === 'success') { closeModal('m-edit-jalan'); loadAllData(); showToast('Jalan diperbarui'); } + else showToast(j.message || 'Gagal update', 'er'); + } catch (e) { showToast('Gagal: ' + e.message, 'er'); } } // =============================== -// EDIT GEOMETRI JALAN (drag vertex) +// EDIT GEOMETRI JALAN // =============================== function startEditGeomJalan(id) { map.closePopup(); - stopEditGeom(); // clear any existing - + stopEditGeom(); const j = allJalan.find(x => x.id == id); if (!j) return; - const geom = JSON.parse(j.geom); - let coords = geom.coordinates.map(c => [c[1], c[0]]); // [lat,lng] - - // Highlight line + const geom = JSON.parse(j.geom); + let coords = geom.coordinates.map(c => [c[1], c[0]]); const geomLayer = L.polyline(coords, { color: '#f97316', weight: 4, dashArray: '8,5', opacity: 1 }).addTo(map); - - const vms = []; + const vms = []; const updatePolyline = () => { const pts = vms.map(vm => vm.getLatLng()); geomLayer.setLatLngs(pts); - // Update panjang preview const turfCoords = pts.map(p => [p.lng, p.lat]); if (turfCoords.length >= 2) { const panjang = turf.length(turf.lineString(turfCoords), { units: 'meters' }); document.getElementById('geom-edit-info').textContent = `Panjang: ${panjang.toFixed(2)} m`; } }; - - coords.forEach((c, i) => { - const vm = L.marker(c, { - draggable: true, - icon: vertexIcon() - }).addTo(map); + coords.forEach(c => { + const vm = L.marker(c, { draggable: true, icon: vertexIcon() }).addTo(map); vm.on('drag', updatePolyline); vms.push(vm); }); - editingFeature = { type: 'jalan', id, geomLayer, vms }; showEditGeomToolbar('Drag titik untuk edit geometri jalan'); } // =============================== -// RENDER PARSIL (POLYGON) +// EDIT / HAPUS PARSIL // =============================== -function renderParsilLayer() { - if (layers.parsil) map.removeLayer(layers.parsil); - - const geojson = allParsil.map(p => ({ - type: 'Feature', - geometry: JSON.parse(p.geom), - properties: p - })); - - layers.parsil = L.geoJSON(geojson, { - style: f => { - const c = COLORS[f.properties.status_kepemilikan] || COLORS.SHM; - return { color: c.stroke, fillColor: c.fill, weight: 2.5, fillOpacity: 0.45 }; - }, - onEachFeature: (f, layer) => { - layer.bindPopup(buildParsilPopup(f.properties)); - layer.on('click', e => { - if (currentGeom) return; - L.DomEvent.stopPropagation(e); - layer.openPopup(); - }); - } - }).addTo(map); -} - -function buildParsilPopup(props) { - const nama = props.nama || '—'; - const status = props.status_kepemilikan || 'SHM'; - const luas = props.luas_m2 ? Number(props.luas_m2).toFixed(2)+' m²' : '—'; - const badgeMap = { SHM:'bp-shm', HGB:'bp-hgb', HGU:'bp-hgu', HP:'bp-hp' }; - const badgeClass = badgeMap[status] || 'bp-shm'; - - return ` -
-
${nama}
-
-
- 📋 Kepemilikan - ${status} -
-
- 📐 Luas - ${luas} -
-
-
- - - -
-
`; -} - function editParsil(id) { - const p = allParsil.find(x=>x.id==id); + const p = allParsil.find(x => x.id == id); if (!p) return showToast('Data parsil tidak ditemukan', 'er'); document.getElementById('e-parsil-id').value = p.id; document.getElementById('e-p-nama').value = p.nama || ''; @@ -573,45 +512,44 @@ async function hapusParsil(id) { const ok = await showConfirm('Hapus parsil ini? Tindakan tidak dapat dibatalkan.', 'Hapus Parsil'); if (!ok) return; try { - const res = await fetch(API.parsil, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({action:'delete',id}) }); + const res = await fetch(API.parsil, { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ action: 'delete', id }) + }); const j = await res.json(); - if (j.status==='success') { loadAllData(); showToast('Parsil berhasil dihapus'); } - else showToast(j.message||'Gagal hapus', 'er'); - } catch(e) { showToast('Gagal: '+e.message, 'er'); } + if (j.status === 'success') { loadAllData(); showToast('Parsil berhasil dihapus'); } + else showToast(j.message || 'Gagal hapus', 'er'); + } catch (e) { showToast('Gagal: ' + e.message, 'er'); } } async function updateParsil() { - const id = parseInt(document.getElementById('e-parsil-id').value||0); - const nama = document.getElementById('e-p-nama').value; - const status_kepemilikan= document.getElementById('e-p-status').value; - const luas_m2 = parseFloat(document.getElementById('e-p-luas').value); + const id = parseInt(document.getElementById('e-parsil-id').value || 0); + const nama = document.getElementById('e-p-nama').value; + const status_kepemilikan = document.getElementById('e-p-status').value; + const luas_m2 = parseFloat(document.getElementById('e-p-luas').value); try { - const res = await fetch(API.parsil, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({action:'update',id,nama,status_kepemilikan,luas_m2}) }); + const res = await fetch(API.parsil, { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ action: 'update', id, nama, status_kepemilikan, luas_m2 }) + }); const j = await res.json(); - if (j.status==='success') { closeModal('m-edit-parsil'); loadAllData(); showToast('Parsil diperbarui'); } - else showToast(j.message||'Gagal update', 'er'); - } catch(e) { showToast('Gagal: '+e.message, 'er'); } + if (j.status === 'success') { closeModal('m-edit-parsil'); loadAllData(); showToast('Parsil diperbarui'); } + else showToast(j.message || 'Gagal update', 'er'); + } catch (e) { showToast('Gagal: ' + e.message, 'er'); } } // =============================== -// EDIT GEOMETRI PARSIL (drag vertex) +// EDIT GEOMETRI PARSIL // =============================== function startEditGeomParsil(id) { map.closePopup(); stopEditGeom(); - const p = allParsil.find(x => x.id == id); if (!p) return; - const geom = JSON.parse(p.geom); - // outer ring, drop closing duplicate - let coords = geom.coordinates[0].slice(0, -1).map(c => [c[1], c[0]]); - - const geomLayer = L.polygon(coords, { - color: '#8b5cf6', fillColor: '#ede9fe', weight: 2.5, - dashArray: '8,5', fillOpacity: 0.3 - }).addTo(map); - - const vms = []; + const geom = JSON.parse(p.geom); + let coords = geom.coordinates[0].slice(0, -1).map(c => [c[1], c[0]]); + const geomLayer = L.polygon(coords, { color: '#8b5cf6', fillColor: '#ede9fe', weight: 2.5, dashArray: '8,5', fillOpacity: 0.3 }).addTo(map); + const vms = []; const updatePolygon = () => { const pts = vms.map(vm => vm.getLatLng()); geomLayer.setLatLngs(pts); @@ -622,32 +560,22 @@ function startEditGeomParsil(id) { document.getElementById('geom-edit-info').textContent = `Luas: ${luas.toFixed(2)} m²`; } }; - coords.forEach(c => { const vm = L.marker(c, { draggable: true, icon: vertexIcon() }).addTo(map); vm.on('drag', updatePolygon); vms.push(vm); }); - editingFeature = { type: 'parsil', id, geomLayer, vms }; showEditGeomToolbar('Drag titik untuk edit geometri parsil'); } -// =============================== -// VERTEX ICON -// =============================== function vertexIcon() { return L.divIcon({ - html: `
`, - className: '', - iconSize: [14, 14], - iconAnchor: [7, 7] + html: `
`, + className: '', iconSize: [14, 14], iconAnchor: [7, 7] }); } -// =============================== -// GEOM EDIT TOOLBAR -// =============================== function showEditGeomToolbar(hint) { const tb = document.getElementById('geom-edit-toolbar'); document.getElementById('geom-edit-hint').textContent = hint; @@ -658,7 +586,7 @@ function showEditGeomToolbar(hint) { function stopEditGeom() { if (!editingFeature) return; if (editingFeature.geomLayer) map.removeLayer(editingFeature.geomLayer); - editingFeature.vms.forEach(vm => { try { map.removeLayer(vm); } catch(e){} }); + editingFeature.vms.forEach(vm => { try { map.removeLayer(vm); } catch (e) {} }); editingFeature = null; document.getElementById('geom-edit-toolbar').classList.remove('visible'); } @@ -667,115 +595,75 @@ async function saveEditGeom() { if (!editingFeature) return; const { type, id, vms } = editingFeature; const pts = vms.map(vm => vm.getLatLng()); - try { if (type === 'jalan') { - const coords = pts.map(p => [p.lng, p.lat]); + const coords = pts.map(p => [p.lng, p.lat]); const panjang = turf.length(turf.lineString(coords), { units: 'meters' }); const j = allJalan.find(x => x.id == id); const res = await fetch(API.jalan, { - method: 'POST', headers: {'Content-Type':'application/json'}, - body: JSON.stringify({ - action: 'update', id, - nama: j.nama, status: j.status, - panjang_meter: panjang, - geom: { type: 'LineString', coordinates: coords } - }) + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ action: 'update', id, nama: j.nama, status: j.status, panjang_meter: panjang, geom: { type: 'LineString', coordinates: coords } }) }); const data = await res.json(); if (data.status === 'success') { showToast('Geometri jalan diperbarui'); stopEditGeom(); loadAllData(); } else showToast(data.message || 'Gagal simpan', 'er'); - } else if (type === 'parsil') { const coords = pts.map(p => [p.lng, p.lat]); coords.push(coords[0]); const luas = turf.area(turf.polygon([coords])); const p = allParsil.find(x => x.id == id); const res = await fetch(API.parsil, { - method: 'POST', headers: {'Content-Type':'application/json'}, - body: JSON.stringify({ - action: 'update', id, - nama: p.nama, status_kepemilikan: p.status_kepemilikan, - luas_m2: luas, - geom: { type: 'Polygon', coordinates: [coords] } - }) + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ action: 'update', id, nama: p.nama, status_kepemilikan: p.status_kepemilikan, luas_m2: luas, geom: { type: 'Polygon', coordinates: [coords] } }) }); const data = await res.json(); if (data.status === 'success') { showToast('Geometri parsil diperbarui'); stopEditGeom(); loadAllData(); } else showToast(data.message || 'Gagal simpan', 'er'); } - } catch(e) { showToast('Gagal: '+e.message, 'er'); } + } catch (e) { showToast('Gagal: ' + e.message, 'er'); } } // =============================== -// HANDLE MAP CLICK (DRAW) +// DRAWING // =============================== function onMapClick(e) { if (isDraggingMarker) return; if (!currentGeom) return; - if (currentGeom === 'point') { document.getElementById('spbu-lat').value = e.latlng.lat; document.getElementById('spbu-lng').value = e.latlng.lng; openModal('m-add-spbu'); return; } - drawPoints.push({ lat: e.latlng.lat, lng: e.latlng.lng }); undoStack.push({ lat: e.latlng.lat, lng: e.latlng.lng }); redoStack = []; drawTemp(); } -// =============================== -// GAMBAR SEMENTARA -// =============================== function drawTemp() { if (tempLayer) { map.removeLayer(tempLayer); tempLayer = null; } - vertexMarkers.forEach(m => { try { map.removeLayer(m); } catch(e){} }); + vertexMarkers.forEach(m => { try { map.removeLayer(m); } catch (e) {} }); vertexMarkers = []; - - if (drawPoints.length === 0) { updateCounter(); return; } - + if (!drawPoints.length) { updateCounter(); return; } const latlngs = drawPoints.map(p => [p.lat, p.lng]); - - if (currentGeom === 'polyline' && drawPoints.length >= 2) { - tempLayer = L.polyline(latlngs, { color: COLORS.jalanProvinsi, weight: 3, dashArray:'7,5', opacity:.85 }).addTo(map); - } - if (currentGeom === 'polygon' && drawPoints.length >= 3) { - tempLayer = L.polygon(latlngs, { color: COLORS.SHM.stroke, weight: 2.5, dashArray:'7,5', fillColor: COLORS.SHM.fill, fillOpacity:.25 }).addTo(map); - } - + if (currentGeom === 'polyline' && drawPoints.length >= 2) + tempLayer = L.polyline(latlngs, { color: COLORS.jalanProvinsi, weight: 3, dashArray: '7,5', opacity: .85 }).addTo(map); + if (currentGeom === 'polygon' && drawPoints.length >= 3) + tempLayer = L.polygon(latlngs, { color: COLORS.SHM.stroke, weight: 2.5, dashArray: '7,5', fillColor: COLORS.SHM.fill, fillOpacity: .25 }).addTo(map); drawPoints.forEach(p => { const vm = L.circleMarker([p.lat, p.lng], { - radius: 6, color:'#fff', weight: 2.5, - fillColor: currentGeom==='polygon' ? COLORS.SHM.stroke : COLORS.jalanProvinsi, - fillOpacity: 1 + radius: 6, color: '#fff', weight: 2.5, + fillColor: currentGeom === 'polygon' ? COLORS.SHM.stroke : COLORS.jalanProvinsi, fillOpacity: 1 }).addTo(map); vertexMarkers.push(vm); }); - updateCounter(); } -// =============================== -// UNDO / REDO -// =============================== -function undoDraw() { - if (!drawPoints.length) return; - redoStack.push(drawPoints.pop()); - drawTemp(); -} +function undoDraw() { if (!drawPoints.length) return; redoStack.push(drawPoints.pop()); drawTemp(); } +function redoDraw() { if (!redoStack.length) return; drawPoints.push(redoStack.pop()); drawTemp(); } -function redoDraw() { - if (!redoStack.length) return; - drawPoints.push(redoStack.pop()); - drawTemp(); -} - -// =============================== -// SELESAI DRAW -// =============================== function finishDrawing() { if (currentGeom === 'polyline') { if (drawPoints.length < 2) { showToast('Minimal 2 titik untuk membuat jalan!', 'er'); return; } @@ -788,8 +676,8 @@ function finishDrawing() { function finishJalanDrawing() { savedDrawPoints = drawPoints.map(p => ({ lat: p.lat, lng: p.lng })); - const coords = savedDrawPoints.map(p => [p.lng, p.lat]); - const panjang = turf.length(turf.lineString(coords), { units:'meters' }); + const coords = savedDrawPoints.map(p => [p.lng, p.lat]); + const panjang = turf.length(turf.lineString(coords), { units: 'meters' }); document.getElementById('j-nama').value = ''; document.getElementById('j-status').value = 'kabupaten'; document.getElementById('j-panjang').value = panjang.toFixed(2); @@ -798,7 +686,7 @@ function finishJalanDrawing() { function finishParsilDrawing() { savedDrawPoints = drawPoints.map(p => ({ lat: p.lat, lng: p.lng })); - const coords = savedDrawPoints.map(p => [p.lng, p.lat]); + const coords = savedDrawPoints.map(p => [p.lng, p.lat]); coords.push(coords[0]); const luas = turf.area(turf.polygon([coords])); document.getElementById('p-nama').value = ''; @@ -807,74 +695,74 @@ function finishParsilDrawing() { openModal('m-add-parsil'); } -// =============================== -// SAVE SPBU -// =============================== async function saveSpbu() { const lat = parseFloat(document.getElementById('spbu-lat').value); const lng = parseFloat(document.getElementById('spbu-lng').value); const namaspbu = document.getElementById('spbu-nama').value.trim(); - if (!namaspbu) { showToast('Nama SPBU wajib diisi!', 'er'); return; } - if (isNaN(lat)||isNaN(lng)) { showToast('Koordinat tidak valid!', 'er'); return; } - + if (!namaspbu) { showToast('Nama SPBU wajib diisi!', 'er'); return; } + if (isNaN(lat) || isNaN(lng)) { showToast('Koordinat tidak valid!', 'er'); return; } try { - const res = await fetch(API.spbu, { method:'POST', headers:{'Content-Type':'application/json'}, - body: JSON.stringify({ action:'create', namaspbu, nomorwa:document.getElementById('spbu-wa').value, - statusbuka:document.getElementById('spbu-status').value, koordinat:{type:'Point',coordinates:[lng,lat]} }) }); + const res = await fetch(API.spbu, { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'create', namaspbu, + nomorwa: document.getElementById('spbu-wa').value, + statusbuka: document.getElementById('spbu-status').value, + koordinat: { type: 'Point', coordinates: [lng, lat] } + }) + }); const data = await res.json(); - if (data.status!=='success') { showToast(data.message||'Gagal simpan', 'er'); return; } + if (data.status !== 'success') { showToast(data.message || 'Gagal simpan', 'er'); return; } closeModal('m-add-spbu'); deactivateGeom(); loadAllData(); showToast('SPBU berhasil ditambahkan'); - } catch(e) { showToast('Error: '+e.message, 'er'); } + } catch (e) { showToast('Error: ' + e.message, 'er'); } } -// =============================== -// SAVE JALAN -// =============================== async function saveJalan() { const nama = document.getElementById('j-nama').value.trim(); if (!nama) { showToast('Nama jalan wajib diisi!', 'er'); return; } if (savedDrawPoints.length < 2) { showToast('Data koordinat hilang, silakan gambar ulang.', 'er'); return; } - try { - const res = await fetch(API.jalan, { method:'POST', headers:{'Content-Type':'application/json'}, - body: JSON.stringify({ action:'create', nama, status:document.getElementById('j-status').value, - panjang_meter:parseFloat(document.getElementById('j-panjang').value), - geom:{ type:'LineString', coordinates:savedDrawPoints.map(p=>[p.lng,p.lat]) } }) }); + const res = await fetch(API.jalan, { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'create', nama, + status: document.getElementById('j-status').value, + panjang_meter: parseFloat(document.getElementById('j-panjang').value), + geom: { type: 'LineString', coordinates: savedDrawPoints.map(p => [p.lng, p.lat]) } + }) + }); const data = await res.json(); - if (data.status!=='success') { showToast(data.message||'Gagal simpan', 'er'); return; } + if (data.status !== 'success') { showToast(data.message || 'Gagal simpan', 'er'); return; } closeModal('m-add-jalan'); deactivateGeom(); cancelDraw(); loadAllData(); showToast('Jalan berhasil ditambahkan'); - } catch(e) { showToast('Error: '+e.message, 'er'); } + } catch (e) { showToast('Error: ' + e.message, 'er'); } } -// =============================== -// SAVE PARSIL -// =============================== async function saveParsil() { const nama = document.getElementById('p-nama').value.trim(); if (!nama) { showToast('Nama parsil wajib diisi!', 'er'); return; } if (savedDrawPoints.length < 3) { showToast('Data koordinat hilang, silakan gambar ulang.', 'er'); return; } - const coords = savedDrawPoints.map(p => [p.lng, p.lat]); coords.push(coords[0]); - try { - const res = await fetch(API.parsil, { method:'POST', headers:{'Content-Type':'application/json'}, - body: JSON.stringify({ action:'create', nama, status_kepemilikan:document.getElementById('p-status').value, - luas_m2:parseFloat(document.getElementById('p-luas').value), - geom:{ type:'Polygon', coordinates:[coords] } }) }); + const res = await fetch(API.parsil, { + method: 'POST', headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + action: 'create', nama, + status_kepemilikan: document.getElementById('p-status').value, + luas_m2: parseFloat(document.getElementById('p-luas').value), + geom: { type: 'Polygon', coordinates: [coords] } + }) + }); const data = await res.json(); - if (data.status!=='success') { showToast(data.message||'Gagal simpan', 'er'); return; } + if (data.status !== 'success') { showToast(data.message || 'Gagal simpan', 'er'); return; } closeModal('m-add-parsil'); deactivateGeom(); cancelDraw(); loadAllData(); showToast('Parsil berhasil ditambahkan'); - } catch(e) { showToast('Error: '+e.message, 'er'); } + } catch (e) { showToast('Error: ' + e.message, 'er'); } } -// =============================== -// CONTROL DRAW -// =============================== function cancelDraw() { drawPoints = []; undoStack = []; redoStack = []; savedDrawPoints = []; - if (tempLayer) { try { map.removeLayer(tempLayer); } catch(e){} tempLayer = null; } - vertexMarkers.forEach(m => { try { map.removeLayer(m); } catch(e){} }); + if (tempLayer) { try { map.removeLayer(tempLayer); } catch (e) {} tempLayer = null; } + vertexMarkers.forEach(m => { try { map.removeLayer(m); } catch (e) {} }); vertexMarkers = []; updateCounter(); document.getElementById('draw-toolbar').classList.remove('visible'); @@ -888,20 +776,73 @@ function deactivateGeom() { document.getElementById('draw-toolbar').classList.remove('visible'); } -// =============================== -// MODAL -// =============================== function openModal(id) { document.getElementById(id).classList.add('open'); } function closeModal(id) { document.getElementById(id).classList.remove('open'); } -// =============================== -// COUNTER -// =============================== function updateCounter() { const n = drawPoints.length; - document.getElementById('dt-counter').innerText = n + ' titik'; - document.getElementById('btn-undo').disabled = n === 0; - document.getElementById('btn-redo').disabled = redoStack.length === 0; + document.getElementById('dt-counter').innerText = n + ' titik'; + document.getElementById('btn-undo').disabled = n === 0; + document.getElementById('btn-redo').disabled = redoStack.length === 0; +} + +// =============================== +// SEARCH +// =============================== +function setupSearch() { + const input = document.getElementById('search-input'); + const results = document.getElementById('search-results'); + if (!input || !results) return; + + input.addEventListener('input', () => { + const q = input.value.trim().toLowerCase(); + results.innerHTML = ''; + if (!q) { results.classList.remove('open'); return; } + + const hits = []; + allSpbu.forEach(s => { + if ((s.namaspbu || '').toLowerCase().includes(q)) + hits.push({ label: s.namaspbu, sub: 'SPBU · Point', icon: '⛽', + action: () => { flyTo(s.lat, s.lng); input.value = ''; results.classList.remove('open'); } }); + }); + allJalan.forEach(j => { + if ((j.nama || '').toLowerCase().includes(q)) + hits.push({ label: j.nama, sub: `Jalan ${j.status || ''}`, icon: '🛣️', + action: () => { + try { const geom = JSON.parse(j.geom); const mid = geom.coordinates[Math.floor(geom.coordinates.length/2)]; map.setView([mid[1], mid[0]], 16); } catch (e) {} + input.value = ''; results.classList.remove('open'); + } }); + }); + allParsil.forEach(p => { + if ((p.nama || '').toLowerCase().includes(q)) + hits.push({ label: p.nama, sub: `Parsil · ${p.status_kepemilikan || 'SHM'}`, icon: '🗺️', + action: () => { + try { const geom = JSON.parse(p.geom); const coords = geom.coordinates[0]; const cx = coords.reduce((a,c)=>a+c[0],0)/coords.length; const cy = coords.reduce((a,c)=>a+c[1],0)/coords.length; map.setView([cy,cx],17); } catch (e) {} + input.value = ''; results.classList.remove('open'); + } }); + }); + + if (!hits.length) { + results.innerHTML = '
Tidak ada hasil
'; + } else { + results.innerHTML = hits.slice(0, 8).map((h, i) => + `
+ ${h.icon} +
+
${h.label}
+
${h.sub}
+
+
` + ).join(''); + results.querySelectorAll('.sr-item').forEach((el, i) => { + el.addEventListener('click', () => hits[i].action()); + }); + } + results.classList.add('open'); + }); + document.addEventListener('click', e => { + if (!e.target.closest('#search-wrap')) results.classList.remove('open'); + }); } // =============================== @@ -912,15 +853,14 @@ document.addEventListener('DOMContentLoaded', () => { loadAllData(); setupSearch(); - document.getElementById('btn-finish').onclick = finishDrawing; - document.getElementById('btn-undo').onclick = undoDraw; - document.getElementById('btn-redo').onclick = redoDraw; + document.getElementById('btn-finish').onclick = finishDrawing; + document.getElementById('btn-undo').onclick = undoDraw; + document.getElementById('btn-redo').onclick = redoDraw; document.getElementById('btn-cancel-draw').onclick = () => { cancelDraw(); deactivateGeom(); }; - - // Geom edit toolbar buttons document.getElementById('btn-geom-save').onclick = saveEditGeom; document.getElementById('btn-geom-cancel').onclick = stopEditGeom; + // Geom buttons document.querySelectorAll('.geom-btn').forEach(btn => { btn.addEventListener('click', () => { const geom = btn.dataset.geom; @@ -930,37 +870,53 @@ document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.geom-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); document.getElementById('map').classList.add('crosshair-cursor'); - const toolbar = document.getElementById('draw-toolbar'); - toolbar.classList.toggle('visible', geom==='polyline'||geom==='polygon'); + document.getElementById('draw-toolbar').classList.toggle('visible', geom === 'polyline' || geom === 'polygon'); const hint = document.getElementById('geom-hint'); const hintText = document.getElementById('geom-hint-text'); hint.classList.add('on'); - if (geom==='point') hintText.innerText = 'Klik peta untuk tambah SPBU'; - if (geom==='polyline') hintText.innerText = 'Klik peta untuk menambah titik jalan, klik Selesai jika sudah'; - if (geom==='polygon') hintText.innerText = 'Klik peta untuk menambah titik parsil, klik Selesai jika sudah'; + if (geom === 'point') hintText.innerText = 'Klik peta untuk tambah SPBU'; + if (geom === 'polyline') hintText.innerText = 'Klik peta untuk menambah titik jalan, klik Selesai jika sudah'; + if (geom === 'polygon') hintText.innerText = 'Klik peta untuk menambah titik parsil, klik Selesai jika sudah'; }); }); - // Layer toggle + // Layer toggle custom const ldbtn = document.getElementById('ldbtn'); const layerMenu = document.getElementById('layer-menu'); if (ldbtn && layerMenu) { - ldbtn.addEventListener('click', e => { e.stopPropagation(); layerMenu.classList.toggle('open'); }); - document.addEventListener('click', () => layerMenu.classList.remove('open')); + ldbtn.addEventListener('click', e => { + e.stopPropagation(); + layerMenu.classList.toggle('open'); + const chev = ldbtn.querySelector('.chev'); + if (chev) chev.textContent = layerMenu.classList.contains('open') ? '▲' : '▼'; + }); + document.addEventListener('click', () => { + layerMenu.classList.remove('open'); + const chev = ldbtn.querySelector('.chev'); + if (chev) chev.textContent = '▼'; + }); - document.getElementById('lm-point').addEventListener('click', function() { - this.classList.toggle('active'); - if (this.classList.contains('active')) { if (layers.spbu) layers.spbu.addTo(map); } - else { if (layers.spbu) map.removeLayer(layers.spbu); } + const cbPoint = document.getElementById('lm-point'); + const cbSpbu24 = document.getElementById('lm-spbu24'); + const cbSpbuLtd = document.getElementById('lm-spbuLtd'); + const subSpbu = document.getElementById('lm-sub-spbu'); + + function syncSpbuLayers() { + const spbuOn = cbPoint.checked; + subSpbu.classList.toggle('hidden', !spbuOn); + if (spbuOn && cbSpbu24.checked) spbu24Group.addTo(map); else map.removeLayer(spbu24Group); + if (spbuOn && cbSpbuLtd.checked) spbuLtdGroup.addTo(map); else map.removeLayer(spbuLtdGroup); + } + cbPoint.addEventListener('change', syncSpbuLayers); + cbSpbu24.addEventListener('change', syncSpbuLayers); + cbSpbuLtd.addEventListener('change', syncSpbuLayers); + + document.getElementById('lm-jalan').addEventListener('change', function () { + if (this.checked) { if (layers.jalan) layers.jalan.addTo(map); } + else { if (layers.jalan) map.removeLayer(layers.jalan); } }); - document.getElementById('lm-jalan').addEventListener('click', function() { - this.classList.toggle('active'); - if (this.classList.contains('active')) { if (layers.jalan) layers.jalan.addTo(map); } - else { if (layers.jalan) map.removeLayer(layers.jalan); } - }); - document.getElementById('lm-parsil').addEventListener('click', function() { - this.classList.toggle('active'); - if (this.classList.contains('active')) { if (layers.parsil) layers.parsil.addTo(map); } + document.getElementById('lm-parsil').addEventListener('change', function () { + if (this.checked) { if (layers.parsil) layers.parsil.addTo(map); } else { if (layers.parsil) map.removeLayer(layers.parsil); } }); } diff --git a/04/add_dokumentasi.php b/03/add_dokumentasi.php similarity index 100% rename from 04/add_dokumentasi.php rename to 03/add_dokumentasi.php diff --git a/04/api/anggota_keluarga.php b/03/api/anggota_keluarga.php similarity index 100% rename from 04/api/anggota_keluarga.php rename to 03/api/anggota_keluarga.php diff --git a/04/api/auth.php b/03/api/auth.php similarity index 100% rename from 04/api/auth.php rename to 03/api/auth.php diff --git a/03/api/db.php b/03/api/db.php deleted file mode 100644 index b687965..0000000 --- a/03/api/db.php +++ /dev/null @@ -1,15 +0,0 @@ -setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); - $db->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC); -} catch (PDOException $e) { - http_response_code(500); - echo json_encode(['status' => 'error', 'message' => 'Koneksi database gagal: ' . $e->getMessage()]); - exit; -} \ No newline at end of file diff --git a/03/api/jalan.php b/03/api/jalan.php deleted file mode 100644 index 66a6a0f..0000000 --- a/03/api/jalan.php +++ /dev/null @@ -1,98 +0,0 @@ -query("SELECT * FROM jalan ORDER BY createdat DESC")->fetchAll(); - echo json_encode(['status' => 'success', 'data' => $rows]); - break; - - case 'create': - $input = json_decode(file_get_contents('php://input'), true); - $nama = trim($input['nama'] ?? ''); - $status = $input['status'] ?? 'kabupaten'; - $panjang = isset($input['panjang_meter']) ? (float)$input['panjang_meter'] : null; - $geom = $input['geom'] ?? null; - - if (!$nama) { - echo json_encode(['status' => 'error', 'message' => 'Nama jalan wajib diisi.']); - break; - } - if (!in_array($status, ['nasional','provinsi','kabupaten'])) $status = 'kabupaten'; - - // Validasi dan konversi geometri LineString - $geojson = null; - if (is_array($geom)) { - if (isset($geom['type']) && $geom['type'] === 'LineString' && isset($geom['coordinates'])) { - $geojson = json_encode($geom); - } elseif (isset($geom[0]) && is_array($geom[0])) { - // array of points [[lng,lat],...] - $geojson = json_encode([ - 'type' => 'LineString', - 'coordinates' => $geom - ]); - } - } elseif (is_string($geom)) { - $decoded = json_decode($geom, true); - if ($decoded && isset($decoded['type']) && $decoded['type'] === 'LineString') { - $geojson = $geom; - } else { - echo json_encode(['status'=>'error','message'=>'Format geometri tidak valid.']); - break; - } - } - - if (!$geojson) { - echo json_encode(['status' => 'error', 'message' => 'Geometri tidak valid. Harus berupa GeoJSON LineString atau array koordinat.']); - break; - } - - $stmt = $db->prepare("INSERT INTO jalan (nama, status, panjang_meter, geom) VALUES (?, ?, ?, ?)"); - $stmt->execute([$nama, $status, $panjang, $geojson]); - echo json_encode(['status'=>'success','message'=>'Data jalan berhasil disimpan!','id'=>$db->lastInsertId()]); - break; - - case 'update': - $input = json_decode(file_get_contents('php://input'), true); - $id = (int)($input['id'] ?? 0); - $nama = trim($input['nama'] ?? ''); - $status = $input['status'] ?? 'kabupaten'; - - if (!$id) { echo json_encode(['status'=>'error','message'=>'ID tidak valid.']); break; } - if (!$nama) { echo json_encode(['status'=>'error','message'=>'Nama jalan wajib diisi.']); break; } - if (!in_array($status, ['nasional','provinsi','kabupaten'])) $status = 'kabupaten'; - - $stmt = $db->prepare("UPDATE jalan SET nama=?, status=?, updatedat=NOW() WHERE id=?"); - $stmt->execute([$nama, $status, $id]); - echo json_encode(['status'=>'success','message'=>'Data jalan berhasil diperbarui.']); - break; - - case 'delete': - $input = json_decode(file_get_contents('php://input'), true); - $id = (int)($input['id'] ?? 0); - if (!$id) { echo json_encode(['status'=>'error','message'=>'ID tidak valid.']); break; } - $stmt = $db->prepare("DELETE FROM jalan WHERE id=?"); - $stmt->execute([$id]); - echo json_encode(['status'=>'success','message'=>'Data jalan berhasil dihapus.']); - break; - - default: - echo json_encode(['status'=>'error','message'=>'Aksi tidak dikenali.']); - } -} catch (PDOException $e) { - echo json_encode(['status'=>'error','message'=>'Database error: '.$e->getMessage()]); -} \ No newline at end of file diff --git a/04/api/kebutuhan.php b/03/api/kebutuhan.php similarity index 100% rename from 04/api/kebutuhan.php rename to 03/api/kebutuhan.php diff --git a/04/api/kemandirian.php b/03/api/kemandirian.php similarity index 100% rename from 04/api/kemandirian.php rename to 03/api/kemandirian.php diff --git a/04/api/kontribusi.php b/03/api/kontribusi.php similarity index 100% rename from 04/api/kontribusi.php rename to 03/api/kontribusi.php diff --git a/04/api/laporan.php b/03/api/laporan.php similarity index 100% rename from 04/api/laporan.php rename to 03/api/laporan.php diff --git a/04/api/middleware.php b/03/api/middleware.php similarity index 100% rename from 04/api/middleware.php rename to 03/api/middleware.php diff --git a/04/api/migrate_laporan.php b/03/api/migrate_laporan.php similarity index 100% rename from 04/api/migrate_laporan.php rename to 03/api/migrate_laporan.php diff --git a/03/api/parsil.php b/03/api/parsil.php deleted file mode 100644 index 317b8a1..0000000 --- a/03/api/parsil.php +++ /dev/null @@ -1,126 +0,0 @@ -query("SELECT * FROM parsil ORDER BY createdat DESC")->fetchAll(); - echo json_encode(['status' => 'success', 'data' => $rows]); - break; - - case 'create': - $input = json_decode(file_get_contents('php://input'), true); - $nama = trim($input['nama'] ?? ''); - $status = $input['status_kepemilikan'] ?? 'SHM'; - $luas = isset($input['luas_m2']) ? (float)$input['luas_m2'] : null; - $geom = $input['geom'] ?? null; - - if (!$nama) { - echo json_encode(['status' => 'error', 'message' => 'Nama parsil wajib diisi.']); - break; - } - $validStatus = ['SHM','HGB','HGU','HP']; - if (!in_array($status, $validStatus)) $status = 'SHM'; - - // Validasi dan konversi geometri Polygon - $geojson = null; - if (is_array($geom)) { - if (isset($geom['type']) && $geom['type'] === 'Polygon' && isset($geom['coordinates'])) { - $geojson = json_encode($geom); - } elseif (isset($geom[0]) && is_array($geom[0])) { - // array of rings [[lng,lat],...] - $geojson = json_encode([ - 'type' => 'Polygon', - 'coordinates' => $geom - ]); - } - } elseif (is_string($geom)) { - $decoded = json_decode($geom, true); - if ($decoded && isset($decoded['type']) && $decoded['type'] === 'Polygon') { - $geojson = $geom; - } else { - echo json_encode(['status'=>'error','message'=>'Format geometri tidak valid.']); - break; - } - } - - if (!$geojson) { - echo json_encode(['status' => 'error', 'message' => 'Geometri tidak valid. Harus berupa GeoJSON Polygon atau array koordinat.']); - break; - } - - $stmt = $db->prepare("INSERT INTO parsil (nama, status_kepemilikan, luas_m2, geom) VALUES (?, ?, ?, ?)"); - $stmt->execute([$nama, $status, $luas, $geojson]); - echo json_encode(['status'=>'success','message'=>'Data parsil berhasil disimpan!','id'=>$db->lastInsertId()]); - break; - - case 'update': - $input = json_decode(file_get_contents('php://input'), true); - $id = (int)($input['id'] ?? 0); - $nama = trim($input['nama'] ?? ''); - $status = $input['status_kepemilikan'] ?? 'SHM'; - $geom = $input['geom'] ?? null; - $luas = isset($input['luas_m2']) ? (float)$input['luas_m2'] : null; - - if (!$id) { echo json_encode(['status'=>'error','message'=>'ID tidak valid.']); break; } - if (!$nama) { echo json_encode(['status'=>'error','message'=>'Nama parsil wajib diisi.']); break; } - $validStatus = ['SHM','HGB','HGU','HP']; - if (!in_array($status, $validStatus)) $status = 'SHM'; - - // If geometry provided, validate/convert to GeoJSON string - $geojson = null; - if ($geom) { - if (is_array($geom)) { - if (isset($geom['type']) && $geom['type'] === 'Polygon' && isset($geom['coordinates'])) { - $geojson = json_encode($geom); - } elseif (isset($geom[0]) && is_array($geom[0])) { - $geojson = json_encode(['type'=>'Polygon','coordinates'=>$geom]); - } - } elseif (is_string($geom)) { - $decoded = json_decode($geom, true); - if ($decoded && isset($decoded['type']) && $decoded['type'] === 'Polygon') $geojson = $geom; - } - if (!$geojson) { echo json_encode(['status'=>'error','message'=>'Format geometri tidak valid untuk update.']); break; } - } - - // Build update query dynamically - $fields = ['nama = ?', 'status_kepemilikan = ?', 'updatedat = NOW()']; - $params = [$nama, $status]; - if ($luas !== null) { $fields[] = 'luas_m2 = ?'; $params[] = $luas; } - if ($geojson !== null) { $fields[] = 'geom = ?'; $params[] = $geojson; } - $params[] = $id; - - $sql = "UPDATE parsil SET " . implode(', ', $fields) . " WHERE id=?"; - $stmt = $db->prepare($sql); - $stmt->execute($params); - echo json_encode(['status'=>'success','message'=>'Data parsil berhasil diperbarui.']); - break; - - case 'delete': - $input = json_decode(file_get_contents('php://input'), true); - $id = (int)($input['id'] ?? 0); - if (!$id) { echo json_encode(['status'=>'error','message'=>'ID tidak valid.']); break; } - $stmt = $db->prepare("DELETE FROM parsil WHERE id=?"); - $stmt->execute([$id]); - echo json_encode(['status'=>'success','message'=>'Data parsil berhasil dihapus.']); - break; - - default: - echo json_encode(['status'=>'error','message'=>'Aksi tidak dikenali.']); - } -} catch (PDOException $e) { - echo json_encode(['status'=>'error','message'=>'Database error: '.$e->getMessage()]); -} \ No newline at end of file diff --git a/04/api/redistribusi.php b/03/api/redistribusi.php similarity index 100% rename from 04/api/redistribusi.php rename to 03/api/redistribusi.php diff --git a/04/api/rumah_ibadah.php b/03/api/rumah_ibadah.php similarity index 100% rename from 04/api/rumah_ibadah.php rename to 03/api/rumah_ibadah.php diff --git a/04/api/rumah_warga.php b/03/api/rumah_warga.php similarity index 100% rename from 04/api/rumah_warga.php rename to 03/api/rumah_warga.php diff --git a/03/api/spbu.php b/03/api/spbu.php deleted file mode 100644 index ea64d62..0000000 --- a/03/api/spbu.php +++ /dev/null @@ -1,141 +0,0 @@ -query("SELECT id, namaspbu, nomorwa, statusbuka, - JSON_EXTRACT(koordinat, '$.coordinates[1]') as lat, - JSON_EXTRACT(koordinat, '$.coordinates[0]') as lng, - koordinat - FROM spbu ORDER BY createdat DESC")->fetchAll(); - foreach ($rows as &$r) { - $r['lat'] = (float)$r['lat']; - $r['lng'] = (float)$r['lng']; - } - echo json_encode(['status' => 'success', 'data' => $rows]); - break; - - case 'create': - $input = json_decode(file_get_contents('php://input'), true); - $namaspbu = trim($input['namaspbu'] ?? ''); - $nomorwa = trim($input['nomorwa'] ?? ''); - $statusbuka = $input['statusbuka'] ?? 'limited'; - $koordinat = $input['koordinat'] ?? null; - - if (!$namaspbu) { - echo json_encode(['status'=>'error','message'=>'Nama SPBU wajib diisi.']); - break; - } - if (!in_array($statusbuka, ['full','limited'])) $statusbuka = 'limited'; - - // Validasi dan konversi geometri - $geojson = null; - if (is_array($koordinat)) { - // Cek apakah sudah dalam format GeoJSON Point - if (isset($koordinat['type']) && $koordinat['type'] === 'Point' && isset($koordinat['coordinates'])) { - $geojson = json_encode($koordinat); - } - // Mungkin hanya array [lng, lat] - elseif (isset($koordinat[0]) && isset($koordinat[1])) { - $geojson = json_encode([ - 'type' => 'Point', - 'coordinates' => [(float)$koordinat[0], (float)$koordinat[1]] - ]); - } - // Mungkin objek dengan lat,lng - elseif (isset($koordinat['lat']) && isset($koordinat['lng'])) { - $geojson = json_encode([ - 'type' => 'Point', - 'coordinates' => [(float)$koordinat['lng'], (float)$koordinat['lat']] - ]); - } - } elseif (is_string($koordinat)) { - // Coba parse JSON - $decoded = json_decode($koordinat, true); - if ($decoded && isset($decoded['type']) && $decoded['type'] === 'Point') { - $geojson = $koordinat; - } else { - echo json_encode(['status'=>'error','message'=>'Format koordinat tidak valid.']); - break; - } - } - - if (!$geojson) { - echo json_encode(['status'=>'error','message'=>'Geometri tidak valid. Harus berupa GeoJSON Point atau koordinat [lng, lat].']); - break; - } - - $stmt = $db->prepare("INSERT INTO spbu (namaspbu, nomorwa, statusbuka, koordinat) VALUES (?, ?, ?, ?)"); - $stmt->execute([$namaspbu, $nomorwa, $statusbuka, $geojson]); - echo json_encode(['status'=>'success','message'=>'Data berhasil disimpan!','id'=>$db->lastInsertId()]); - break; - - case 'update': - $input = json_decode(file_get_contents('php://input'), true); - $id = (int)($input['id'] ?? 0); - $namaspbu = trim($input['namaspbu'] ?? ''); - $nomorwa = trim($input['nomorwa'] ?? ''); - $statusbuka = $input['statusbuka'] ?? 'limited'; - $koordinat = $input['koordinat'] ?? null; - - if (!$id) { - echo json_encode(['status'=>'error','message'=>'ID tidak valid.']); - break; - } - - // =============================== - // JIKA ADA KOORDINAT → UPDATE KOORDINAT - // =============================== - if ($koordinat) { - $geojson = json_encode($koordinat); - - $stmt = $db->prepare("UPDATE spbu SET koordinat=?, updatedat=NOW() WHERE id=?"); - $stmt->execute([$geojson, $id]); - - echo json_encode(['status'=>'success','message'=>'Koordinat berhasil diperbarui!']); - break; - } - - // =============================== - // UPDATE DATA BIASA - // =============================== - if (!$namaspbu) { - echo json_encode(['status'=>'error','message'=>'Nama SPBU wajib diisi.']); - break; - } - - $stmt = $db->prepare("UPDATE spbu SET namaspbu=?, nomorwa=?, statusbuka=?, updatedat=NOW() WHERE id=?"); - $stmt->execute([$namaspbu, $nomorwa, $statusbuka, $id]); - - echo json_encode(['status'=>'success','message'=>'Data berhasil diperbarui!']); - break; - - case 'delete': - $input = json_decode(file_get_contents('php://input'), true); - $id = (int)($input['id'] ?? 0); - if (!$id) { echo json_encode(['status'=>'error','message'=>'ID tidak valid.']); break; } - $stmt = $db->prepare("DELETE FROM spbu WHERE id=?"); - $stmt->execute([$id]); - echo json_encode(['status'=>'success','message'=>'Data berhasil dihapus.']); - break; - - default: - echo json_encode(['status'=>'error','message'=>'Aksi tidak dikenali.']); - } -} catch (PDOException $e) { - echo json_encode(['status'=>'error','message'=>'Database error: '.$e->getMessage()]); -} \ No newline at end of file diff --git a/04/api/statistik.php b/03/api/statistik.php similarity index 100% rename from 04/api/statistik.php rename to 03/api/statistik.php diff --git a/04/api/verifikasi.php b/03/api/verifikasi.php similarity index 100% rename from 04/api/verifikasi.php rename to 03/api/verifikasi.php diff --git a/04/assets/css/fitur_baru.css b/03/assets/css/fitur_baru.css similarity index 100% rename from 04/assets/css/fitur_baru.css rename to 03/assets/css/fitur_baru.css diff --git a/04/assets/css/style.css b/03/assets/css/style.css similarity index 100% rename from 04/assets/css/style.css rename to 03/assets/css/style.css diff --git a/04/assets/js/app.js b/03/assets/js/app.js similarity index 100% rename from 04/assets/js/app.js rename to 03/assets/js/app.js diff --git a/04/assets/js/fitur_baru.js b/03/assets/js/fitur_baru.js similarity index 100% rename from 04/assets/js/fitur_baru.js rename to 03/assets/js/fitur_baru.js diff --git a/04/config/db.php b/03/config/db.php similarity index 100% rename from 04/config/db.php rename to 03/config/db.php diff --git a/03/css/style.css b/03/css/style.css deleted file mode 100644 index a45942f..0000000 --- a/03/css/style.css +++ /dev/null @@ -1,645 +0,0 @@ -/* ============================================================ - WEBGIS SPBU — style.css (versi lengkap & diperbaiki) - ============================================================ */ - -/* ── CSS VARIABLES ── */ -:root { - --bg: #f0f4f8; - --sf: #ffffff; - --sf2: #f7f9fc; - --sf3: #eef2f7; - --bd: #dde3ec; - --bdh: #b0bac8; - --tx: #1a2030; - --txs: #4a5568; - --txd: #8a96a8; - - --spbu-24-fill: #22c55e; - --spbu-24-bg: rgba(34,197,94,.10); - --spbu-24-ring: rgba(34,197,94,.25); - --spbu-ltd-fill: #f87171; - --spbu-ltd-bg: rgba(248,113,113,.10); - --spbu-ltd-ring: rgba(248,113,113,.25); - - --jalan-nas: #f97316; - --jalan-nas-bg: rgba(249,115,22,.10); - --jalan-nas-ring: rgba(249,115,22,.28); - --jalan-prov: #3b82f6; - --jalan-prov-bg: rgba(59,130,246,.10); - --jalan-prov-ring: rgba(59,130,246,.28); - --jalan-kab: #10b981; - --jalan-kab-bg: rgba(16,185,129,.10); - --jalan-kab-ring: rgba(16,185,129,.28); - - --shm-stroke: #d97706; --shm-fill: #fef3c7; --shm-bg: rgba(217,119,6,.10); --shm-ring: rgba(217,119,6,.28); - --hgb-stroke: #8b5cf6; --hgb-fill: #ede9fe; --hgb-bg: rgba(139,92,246,.10); --hgb-ring: rgba(139,92,246,.28); - --hgu-stroke: #0891b2; --hgu-fill: #cffafe; --hgu-bg: rgba(8,145,178,.10); --hgu-ring: rgba(8,145,178,.28); - --hp-stroke: #ec4899; --hp-fill: #fce7f3; --hp-bg: rgba(236,72,153,.10); --hp-ring: rgba(236,72,153,.28); - - --green: #16a34a; - --greenb: rgba(22,163,74,.10); - --greenr: rgba(22,163,74,.28); - --red: #dc2626; - --redb: rgba(220,38,38,.10); - --redr: rgba(220,38,38,.28); - --blue: #2563eb; - --blueb: rgba(37,99,235,.10); - --bluer: rgba(37,99,235,.28); - --amber: #d97706; - --amberb: rgba(217,119,6,.10); - --amberr: rgba(217,119,6,.28); - --purple: #7c3aed; - --purpleb: rgba(124,58,237,.10); - --purpler: rgba(124,58,237,.28); - --indigo: #4f46e5; - --indigob: rgba(79,70,229,.10); - --indigor: rgba(79,70,229,.28); - - --sh-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05); - --sh: 0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05); - --sh-lg: 0 12px 40px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,0,.07); - - --sidebar: 275px; - --topbar: 52px; - --radius: 10px; - --radius-lg: 14px; -} - -/* ── RESET ── */ -*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } -html, body { - height: 100%; overflow: hidden; - font-family: 'Plus Jakarta Sans', sans-serif; - font-size: 14px; background: var(--bg); color: var(--tx); - -webkit-font-smoothing: antialiased; -} -#app { display: flex; height: 100vh; } - -/* ── LOADING ── */ -#loading { - position: fixed; inset: 0; z-index: 9999; - background: var(--bg); - display: flex; align-items: center; justify-content: center; -} -.ld-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; } -.ld-inner p { font-size: 13px; color: var(--txd); } -.spin { - width: 32px; height: 32px; - border: 3px solid var(--bd); border-top-color: var(--green); - border-radius: 50%; animation: rot .7s linear infinite; -} -@keyframes rot { to { transform: rotate(360deg); } } - -/* ── SIDEBAR ── */ -#sidebar { - width: var(--sidebar); min-width: var(--sidebar); - background: var(--sf); border-right: 1px solid var(--bd); - display: flex; flex-direction: column; - box-shadow: var(--sh-sm); z-index: 900; -} -.sb-header { padding: 14px 16px; border-bottom: 1px solid var(--bd); } -.sb-brand { display: flex; align-items: center; gap: 10px; } -.sb-icon { - width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; - background: var(--greenb); border: 1px solid var(--greenr); - display: flex; align-items: center; justify-content: center; - color: var(--green); font-size: 18px; -} -.sb-title { font-size: 14px; font-weight: 800; color: var(--tx); } -.sb-sub { font-size: 10px; color: var(--txd); margin-top: 1px; } - -.sb-scroll { - flex: 1; overflow-y: auto; padding: 12px; - display: flex; flex-direction: column; gap: 14px; -} -.sb-scroll::-webkit-scrollbar { width: 4px; } -.sb-scroll::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 4px; } - -.sb-section { display: flex; flex-direction: column; gap: 6px; } -.sb-label { - font-size: 10px; font-weight: 700; - text-transform: uppercase; letter-spacing: .8px; - color: var(--green); /* ← hijau tema */ -} - -/* ── LEGEND ── */ -.legend-card { - background: var(--sf2); border: 1px solid var(--bd); - border-radius: var(--radius); padding: 10px 12px; - display: flex; flex-direction: column; gap: 7px; -} -.leg-row { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--txs); font-weight: 500; } -.leg-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(0,0,0,.08); } -.leg-dot.spbu-24 { background: var(--spbu-24-fill); box-shadow: 0 0 0 3px var(--spbu-24-bg); } -.leg-dot.spbu-ltd { background: var(--spbu-ltd-fill); box-shadow: 0 0 0 3px var(--spbu-ltd-bg); } -.leg-line { width: 24px; height: 4px; border-radius: 3px; flex-shrink: 0; } -.leg-line.jalan-nas { background: var(--jalan-nas); } -.leg-line.jalan-prov { background: var(--jalan-prov); } -.leg-line.jalan-kab { background: var(--jalan-kab); } -.leg-poly { width: 18px; height: 13px; border-radius: 3px; flex-shrink: 0; border: 2px solid; } -.leg-poly.parsil-shm { background: var(--shm-fill); border-color: var(--shm-stroke); } -.leg-poly.parsil-hgb { background: var(--hgb-fill); border-color: var(--hgb-stroke); } -.leg-poly.parsil-hgu { background: var(--hgu-fill); border-color: var(--hgu-stroke); } -.leg-poly.parsil-hp { background: var(--hp-fill); border-color: var(--hp-stroke); } - -/* ── STATS ── */ -.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } -.stat-item { - background: var(--sf2); border: 1px solid var(--bd); - border-radius: var(--radius); padding: 10px; text-align: center; -} -.stat-item.green { background: var(--greenb); border-color: var(--greenr); } -.stat-item.blue { background: var(--blueb); border-color: var(--bluer); } -.stat-item.purple { background: var(--purpleb); border-color: var(--purpler); } -.stat-num { font-size: 22px; font-weight: 800; font-family: 'Fira Code', monospace; color: var(--tx); } -.stat-item.green .stat-num { color: var(--green); } -.stat-item.blue .stat-num { color: var(--blue); } -.stat-item.purple .stat-num { color: var(--purple); } -.stat-lbl { font-size: 10px; color: var(--txd); margin-top: 2px; } - -/* ── SPBU LIST ── */ -.spbu-item { - background: var(--sf); border: 1px solid var(--bd); - border-radius: var(--radius); padding: 9px 11px; - cursor: pointer; margin-bottom: 5px; - display: flex; flex-direction: column; gap: 6px; - transition: border-color .18s, background .18s; -} -.spbu-item:hover { border-color: var(--green); background: var(--greenb); } -.si-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } -.si-name { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; } -.si-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } -.si-dot.dot-green { background: var(--spbu-24-fill); box-shadow: 0 0 0 2px var(--spbu-24-bg); } -.si-dot.dot-red { background: var(--spbu-ltd-fill); box-shadow: 0 0 0 2px var(--spbu-ltd-bg); } -.si-actions { display: flex; gap: 4px; flex-shrink: 0; } -.empty { text-align: center; padding: 24px 0; font-size: 12px; color: var(--txd); } - -/* icon buttons — SERAGAM HIJAU */ -.ib { - width: 30px; height: 30px; border-radius: 8px; - background: var(--greenb); border: 1px solid var(--greenr); - color: var(--green); /* ← hijau tema */ - cursor: pointer; - display: flex; align-items: center; justify-content: center; - transition: all .18s; flex-shrink: 0; font-size: 13px; -} -.ib.del { - background: var(--redb); border-color: var(--redr); color: var(--red); -} -.ib:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(22,163,74,.15); } -.ib.del:hover { box-shadow: 0 4px 12px rgba(220,38,38,.15); } - -/* ── BADGE ── */ -.badge { - display: inline-flex; align-items: center; - font-size: 10px; font-weight: 700; - padding: 2px 8px; border-radius: 20px; border: 1px solid; -} -.badge.bg { background: var(--spbu-24-bg); border-color: var(--spbu-24-ring); color: #15803d; } -.badge.br { background: var(--spbu-ltd-bg); border-color: var(--spbu-ltd-ring); color: #dc2626; } -.badge.bb-orange { background: var(--jalan-nas-bg); border-color: var(--jalan-nas-ring); color: #c2410c; } -.badge.bb-blue { background: var(--jalan-prov-bg); border-color: var(--jalan-prov-ring); color: #1d4ed8; } -.badge.bb-green { background: var(--jalan-kab-bg); border-color: var(--jalan-kab-ring); color: #065f46; } -.badge.bp-shm { background: var(--shm-bg); border-color: var(--shm-ring); color: var(--shm-stroke); } -.badge.bp-hgb { background: var(--hgb-bg); border-color: var(--hgb-ring); color: var(--hgb-stroke); } -.badge.bp-hgu { background: var(--hgu-bg); border-color: var(--hgu-ring); color: var(--hgu-stroke); } -.badge.bp-hp { background: var(--hp-bg); border-color: var(--hp-ring); color: var(--hp-stroke); } - -/* ── GEOM SELECTOR ── */ -.geom-selector { - display: flex; gap: 3px; - background: var(--sf2); border: 1px solid var(--bd); - border-radius: 9px; padding: 3px; -} -.geom-btn { - flex: 1; display: flex; align-items: center; justify-content: center; - gap: 5px; padding: 6px 8px; border-radius: 7px; - border: none; background: transparent; color: var(--txs); - font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; font-weight: 600; - cursor: pointer; transition: all .18s; white-space: nowrap; -} -.geom-btn:hover { background: var(--sf); color: var(--tx); } -.geom-btn.active { background: var(--green); color: #fff; box-shadow: 0 2px 8px rgba(22,163,74,.3); } -.geom-hint { - font-size: 10px; color: var(--txd); text-align: left; - margin-top: 4px; min-height: 14px; padding-left: 2px; - transition: color .18s; display: flex; align-items: center; gap: 5px; -} -.geom-hint .gh-dot { - width: 6px; height: 6px; border-radius: 50%; - background: var(--bdh); flex-shrink: 0; transition: background .18s; -} -.geom-hint.on { color: var(--green); font-weight: 600; } -.geom-hint.on .gh-dot { background: var(--green); box-shadow: 0 0 0 2px rgba(22,163,74,.2); } - -/* ── MAIN ── */ -#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; } - -/* ── TOPBAR ── */ -#topbar { - height: var(--topbar); min-height: var(--topbar); - background: var(--sf); border-bottom: 1px solid var(--bd); - display: flex; align-items: center; padding: 0 12px; gap: 8px; - box-shadow: var(--sh-sm); overflow: visible; - position: relative; z-index: 850; -} - -/* koordinat pill */ -.coord-pill { - flex: 0 0 auto; font-family: 'Fira Code', monospace; - font-size: 11px; color: var(--txd); - background: var(--sf2); border: 1px solid var(--bd); - border-radius: 7px; padding: 4px 10px; - display: flex; align-items: center; gap: 5px; white-space: nowrap; -} -.coord-pill > span:first-child { color: var(--green); } /* ← ikon hijau */ -.pill-sep { color: var(--bdh); } - -/* ── SEARCH ── */ -#search-wrap { flex: 1; position: relative; max-width: 340px; z-index: 1300; } -.search-box { - display: flex; align-items: center; gap: 7px; - background: var(--sf2); border: 1.5px solid var(--bd); - border-radius: 9px; padding: 0 10px; height: 34px; - transition: border-color .18s, box-shadow .18s; -} -.search-box:focus-within { - border-color: var(--green); - box-shadow: 0 0 0 3px rgba(22,163,74,.08); -} -.search-icon { - font-size: 13px; flex-shrink: 0; - color: var(--green); /* ← hijau tema */ -} -#search-input { - flex: 1; border: none; background: transparent; outline: none; - font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13px; color: var(--tx); -} -#search-input::placeholder { color: var(--txd); } -#search-results { - position: absolute; top: calc(100% + 6px); left: 0; right: 0; - background: var(--sf); border: 1px solid var(--bd); - border-radius: 11px; box-shadow: var(--sh-lg); - overflow: hidden; opacity: 0; pointer-events: none; - transform: translateY(6px); - transition: opacity .18s, transform .18s; - max-height: 320px; overflow-y: auto; -} -#search-results.open { opacity: 1; pointer-events: all; transform: translateY(0); } -.sr-item { - display: flex; align-items: center; gap: 10px; - padding: 9px 12px; cursor: pointer; - transition: background .14s; border-bottom: 1px solid var(--sf3); -} -.sr-item:last-child { border-bottom: none; } -.sr-item:hover { background: var(--sf2); } -.sr-icon { - width: 30px; height: 30px; border-radius: 8px; - background: var(--greenb); border: 1px solid var(--greenr); /* ← hijau tema */ - display: flex; align-items: center; justify-content: center; - font-size: 14px; flex-shrink: 0; -} -.sr-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } -.sr-label { font-size: 13px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.sr-sub { font-size: 10px; color: var(--txd); font-weight: 500; } -.sr-empty { padding: 16px 12px; font-size: 12px; color: var(--txd); text-align: center; } - -/* ── LAYER DROPDOWN ── */ -.layer-wrap { position: absolute; top: 10px; right: 10px; flex-shrink: 0; z-index: 1100; } -.layer-btn { - height: 34px; padding: 0 12px; border-radius: 8px; - background: var(--sf); border: 1px solid var(--bd); - color: var(--txs); font-size: 12px; font-weight: 600; - font-family: 'Plus Jakarta Sans', sans-serif; - cursor: pointer; display: flex; align-items: center; gap: 6px; - transition: all .18s; white-space: nowrap; box-shadow: var(--sh-sm); -} -.layer-btn:hover { border-color: var(--bdh); color: var(--tx); } -.layer-btn svg { color: var(--green); flex-shrink: 0; } /* ← ikon SVG hijau */ -.layer-btn .chev { color: var(--green); font-size: 10px; } /* ← chevron hijau */ - -.layer-menu { - position: absolute; top: calc(100% + 6px); right: 0; - background: var(--sf); border: 1px solid var(--bd); - border-radius: 13px; padding: 8px 6px; min-width: 210px; - box-shadow: var(--sh-lg); z-index: 1200; - opacity: 0; pointer-events: none; - transform: translateY(6px); - transition: opacity .18s, transform .18s; -} -.layer-menu.open { opacity: 1; pointer-events: all; transform: translateY(0); } - -.lm-label { - font-size: 10px; font-weight: 700; text-transform: uppercase; - letter-spacing: .8px; color: var(--green); /* ← hijau tema */ - padding: 4px 10px 8px; -} - -/* Item utama layer */ -.lm-item { - width: 100%; display: flex; align-items: center; gap: 8px; - padding: 7px 10px; border-radius: 8px; cursor: pointer; - transition: background .14s; font-size: 13px; - font-weight: 600; color: var(--tx); user-select: none; -} -.lm-item:hover { background: var(--sf2); } -.lm-item input[type="checkbox"] { display: none; } -.lm-icon { font-size: 14px; } - -/* Custom checkbox */ -.lm-check { - width: 16px; height: 16px; border-radius: 5px; - border: 1.5px solid var(--bdh); background: var(--sf2); flex-shrink: 0; - display: flex; align-items: center; justify-content: center; - transition: all .16s; position: relative; -} -.lm-check.sm { width: 14px; height: 14px; border-radius: 4px; } -.lm-item input:checked ~ .lm-check, -.lm-sub-item input:checked ~ .lm-check { - background: var(--green); border-color: var(--green); -} -.lm-item input:checked ~ .lm-check::after, -.lm-sub-item input:checked ~ .lm-check::after { - content: ''; display: block; - width: 4px; height: 7px; - border: 2px solid #fff; border-top: none; border-left: none; - transform: rotate(45deg) translate(-1px, -1px); -} - -/* Sub-option SPBU */ -.lm-sub { - margin: 2px 0 4px 10px; padding: 4px 0 4px 10px; - border-left: 2px solid var(--greenr); /* ← hijau tema */ - display: flex; flex-direction: column; gap: 2px; - max-height: 100px; overflow: hidden; - transition: max-height .2s ease, opacity .2s ease; opacity: 1; -} -.lm-sub.hidden { max-height: 0; opacity: 0; pointer-events: none; } -.lm-sub-item { - display: flex; align-items: center; gap: 8px; - padding: 5px 8px; border-radius: 7px; cursor: pointer; - font-size: 12px; font-weight: 500; color: var(--txs); - user-select: none; transition: background .14s; -} -.lm-sub-item:hover { background: var(--sf2); } -.lm-sub-item input[type="checkbox"] { display: none; } -.lm-sub-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } -.lm-sub-dot.dot-green { background: var(--spbu-24-fill); box-shadow: 0 0 0 2px var(--spbu-24-bg); } -.lm-sub-dot.dot-red { background: var(--spbu-ltd-fill); box-shadow: 0 0 0 2px var(--spbu-ltd-bg); } - -/* ── MAP ── */ -#map-wrap { flex: 1; position: relative; overflow: hidden; } -#map { width: 100%; height: 100%; } -.leaflet-container.crosshair-cursor { cursor: crosshair !important; } - -/* ── DRAW TOOLBAR ── */ -#draw-toolbar, -#geom-edit-toolbar { - position: absolute; bottom: 28px; left: 50%; - transform: translateX(-50%) translateY(12px); - z-index: 1000; display: flex; align-items: center; gap: 5px; - background: var(--sf); border: 1px solid var(--bd); - border-radius: 14px; padding: 8px 14px; - box-shadow: var(--sh-lg); pointer-events: all; - opacity: 0; visibility: hidden; - transition: opacity .22s, transform .22s, visibility .22s; -} -#draw-toolbar.visible, -#geom-edit-toolbar.visible { - opacity: 1; visibility: visible; - transform: translateX(-50%) translateY(0); -} -#geom-edit-toolbar { bottom: 28px; } -#draw-toolbar.visible ~ #geom-edit-toolbar.visible { bottom: 90px; } - -.dt-hint { font-size: 12px; font-weight: 600; color: var(--green); padding: 0 4px; white-space: nowrap; } /* ← hijau */ -.dt-counter { - font-family: 'Fira Code', monospace; font-size: 12px; font-weight: 600; - color: var(--green); background: var(--greenb); /* ← hijau */ - border: 1px solid var(--greenr); border-radius: 7px; - padding: 4px 10px; white-space: nowrap; -} -.geom-edit-counter { - color: var(--indigo); background: var(--indigob); - border-color: var(--indigor); min-width: 120px; -} -.dt-btn { - display: flex; align-items: center; gap: 5px; - padding: 7px 13px; border-radius: 9px; - border: 1.5px solid var(--greenr); /* ← hijau */ - background: var(--greenb); color: var(--green); /* ← hijau */ - font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600; - cursor: pointer; transition: all .18s; white-space: nowrap; flex-shrink: 0; -} -.dt-btn:hover { background: var(--sf); border-color: var(--bdh); color: var(--tx); } -.dt-btn:disabled { opacity: .4; cursor: not-allowed; } -.dt-btn.undo:hover { background: var(--amberb); border-color: var(--amberr); color: var(--amber); } -.dt-btn.redo:hover { background: var(--blueb); border-color: var(--bluer); color: var(--blue); } -.dt-btn.cancel { - background: var(--redb); border-color: var(--redr); color: var(--red); -} -.dt-btn.cancel:hover { background: var(--red); color: #fff; border-color: var(--red); } -.dt-btn.finish { - background: var(--green); border-color: var(--green); color: #fff; -} -.dt-btn.finish:hover { opacity: .88; } - -/* ── POPUP / PCARD ── */ -.leaflet-popup-content-wrapper { - background: var(--sf) !important; border: 1px solid var(--bd) !important; - border-radius: 16px !important; box-shadow: var(--sh-lg) !important; - padding: 0 !important; overflow: hidden !important; color: var(--tx) !important; -} -.leaflet-popup-content { margin: 0 !important; width: auto !important; } -.leaflet-popup-tip-container { display: none; } -.leaflet-popup-close-button { - top: 10px !important; right: 12px !important; - width: 26px !important; height: 26px !important; - font-size: 14px !important; line-height: 26px !important; - color: var(--txd) !important; background: var(--sf2) !important; - border-radius: 8px !important; border: 1px solid var(--bd) !important; -} - -/* Popup card */ -.pcard-detail { min-width: 300px; max-width: 360px; font-family: 'Plus Jakarta Sans', sans-serif; } - -/* Header popup */ -.pcd-header { - display: flex; align-items: center; gap: 10px; - padding: 14px 16px 12px; - border-bottom: 1px solid var(--bd); -} -.pcd-header-icon { - width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; - background: var(--greenb); border: 1px solid var(--greenr); - display: flex; align-items: center; justify-content: center; font-size: 18px; -} -.pcd-header-icon.jalan { background: var(--jalan-prov-bg); border-color: var(--jalan-prov-ring); } -.pcd-header-icon.parsil { background: var(--shm-bg); border-color: var(--shm-ring); } -.pcd-header-text { flex: 1; min-width: 0; } -.pcd-title { - font-size: 15px; font-weight: 800; color: var(--tx); - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -} -.pcd-subtitle { font-size: 11px; color: var(--txd); margin-top: 2px; } - -/* Rows popup */ -.pcd-rows { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; } -.pcd-row { - display: flex; align-items: center; justify-content: space-between; gap: 12px; - background: var(--sf2); padding: 8px 12px; - border-radius: 10px; border: 1px solid var(--bd); -} -.pcd-label { font-size: 11px; font-weight: 600; color: var(--txd); display: flex; align-items: center; gap: 5px; white-space: nowrap; } -.pcd-val { font-size: 13px; font-weight: 700; color: var(--tx); text-align: right; word-break: break-word; max-width: 180px; } - -/* Actions popup */ -.pcd-actions { - display: flex; gap: 6px; padding: 10px 16px 14px; - border-top: 1px solid var(--bd); -} -.pbtn { - flex: 1; display: flex; align-items: center; justify-content: center; - gap: 5px; padding: 8px 10px; border-radius: 10px; - font-size: 12px; font-weight: 700; cursor: pointer; - transition: all .18s; border: 1.5px solid; font-family: 'Plus Jakarta Sans', sans-serif; -} -/* Edit → hijau tema */ -.pbtn-edit { - background: var(--greenb); color: var(--green); border-color: var(--greenr); -} -.pbtn-edit:hover { background: var(--green); color: #fff; border-color: var(--green); transform: translateY(-1px); } -/* Move → indigo */ -.pbtn-move { - background: var(--indigob); color: var(--indigo); border-color: var(--indigor); -} -.pbtn-move:hover { background: var(--indigo); color: #fff; border-color: var(--indigo); transform: translateY(-1px); } -/* Delete → merah */ -.pbtn-del { - background: var(--redb); color: var(--red); border-color: var(--redr); -} -.pbtn-del:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-1px); } - -/* ── MODAL ── */ -.overlay { - position: fixed; inset: 0; z-index: 2000; - background: rgba(15,20,35,.45); backdrop-filter: blur(6px); - display: flex; align-items: center; justify-content: center; - opacity: 0; pointer-events: none; transition: opacity .22s; -} -.overlay.open { opacity: 1; pointer-events: all; } - -.modal { - background: var(--sf); border: 1px solid var(--bd); - border-radius: var(--radius-lg); width: 440px; max-width: 96vw; - box-shadow: var(--sh-lg); overflow: hidden; - transform: translateY(14px) scale(.98); transition: transform .22s; -} -.overlay.open .modal { transform: translateY(0) scale(1); } - -/* Modal header strip */ -.modal-head { - display: flex; align-items: center; gap: 12px; - padding: 16px 20px 14px; - border-bottom: 1px solid var(--bd); - background: var(--greenb); /* ← hijau strip */ -} -.modal-head-icon { - width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; - background: var(--green); color: #fff; - display: flex; align-items: center; justify-content: center; font-size: 16px; -} -.modal-head h2 { font-size: 15px; font-weight: 800; color: var(--green); } /* ← hijau */ - -/* Modal body */ -.modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; } - -/* Form group */ -.form-group { display: flex; flex-direction: column; gap: 5px; } -.form-group label { - font-size: 11px; font-weight: 700; text-transform: uppercase; - letter-spacing: .5px; color: var(--green); /* ← hijau */ -} -.form-group input, -.form-group select { - width: 100%; padding: 10px 12px; - background: var(--sf2); border: 1.5px solid var(--bd); - border-radius: 10px; color: var(--tx); - font-size: 13px; font-family: 'Plus Jakarta Sans', sans-serif; - outline: none; transition: border-color .18s, box-shadow .18s; - appearance: none; -} -.form-group input:focus, -.form-group select:focus { - border-color: var(--green); - box-shadow: 0 0 0 3px rgba(22,163,74,.08); -} -.form-group input::placeholder { color: var(--txd); } -.form-group input[readonly] { background: var(--sf3); color: var(--txd); cursor: default; } -.form-group select { - cursor: pointer; - background-image: url('data:image/svg+xml;utf8,'); - background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; - padding-right: 32px; -} - -/* Form grid (2 kolom) */ -.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } - -/* Modal footer */ -.modal-foot { - display: flex; gap: 8px; - padding: 12px 20px 16px; - border-top: 1px solid var(--bd); - background: var(--sf2); -} -.btn-ghost { - flex: 1; padding: 10px; border-radius: 9px; - border: 1.5px solid var(--bd); background: transparent; - color: var(--txs); font-size: 13px; font-weight: 600; - font-family: 'Plus Jakarta Sans', sans-serif; - cursor: pointer; transition: all .18s; -} -.btn-ghost:hover { border-color: var(--bdh); color: var(--tx); background: var(--sf); } -.btn-primary { - flex: 1.4; padding: 10px; border-radius: 9px; border: none; color: #fff; - font-size: 13px; font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif; - cursor: pointer; transition: opacity .18s, transform .12s; - display: flex; align-items: center; justify-content: center; gap: 6px; -} -.btn-primary:hover { opacity: .9; transform: translateY(-1px); } -.btn-primary.green { background: linear-gradient(135deg, #22c55e, #16a34a); } -.btn-primary.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); } -.btn-primary.purple { background: linear-gradient(135deg, #a78bfa, #7c3aed); } -.btn-primary.red { background: linear-gradient(135deg, #f87171, #dc2626); } - -/* ── CONFIRM MODAL ── */ -.confirm-modal { width: 360px; max-width: 94vw; } -.confirm-body { padding: 28px 24px 8px; text-align: center; } -.confirm-icon { font-size: 36px; margin-bottom: 10px; line-height: 1; } -.confirm-title { font-size: 16px; font-weight: 800; color: var(--tx); margin-bottom: 6px; } -.confirm-message { font-size: 13px; color: var(--txs); line-height: 1.5; } - -/* ── TOAST ── */ -#toasts { - position: fixed; bottom: 18px; right: 18px; z-index: 9999; - display: flex; flex-direction: column; gap: 6px; -} -.toast { - background: var(--sf); border: 1px solid var(--bd); - border-radius: 9px; padding: 9px 14px; - font-size: 12px; font-weight: 600; - display: flex; align-items: center; gap: 8px; - min-width: 220px; box-shadow: var(--sh); - animation: tslide .22s ease; -} -.toast.ok { border-color: var(--greenr); color: var(--green); } -.toast.er { border-color: var(--redr); color: var(--red); } -@keyframes tslide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } - -/* ── RESPONSIVE ── */ -@media (max-width: 640px) { - .modal { width: 92vw; } - .pcard-detail { min-width: 200px; max-width: 260px; } - #search-wrap { max-width: 160px; } -} \ No newline at end of file diff --git a/03/database.sql b/03/database.sql deleted file mode 100644 index 4d9321a..0000000 --- a/03/database.sql +++ /dev/null @@ -1,37 +0,0 @@ --- Tabel SPBU (Point) -CREATE TABLE `spbu` ( - `id` int(11) NOT NULL AUTO_INCREMENT, - `namaspbu` varchar(150) NOT NULL, - `nomorwa` varchar(20) DEFAULT NULL, - `statusbuka` enum('full','limited') DEFAULT 'limited', - `koordinat` JSON DEFAULT NULL COMMENT 'GeoJSON Point', - `lat` decimal(10,8) GENERATED ALWAYS AS (JSON_EXTRACT(`koordinat`, '$.coordinates[1]')) STORED, - `lng` decimal(11,8) GENERATED ALWAYS AS (JSON_EXTRACT(`koordinat`, '$.coordinates[0]')) STORED, - `createdat` timestamp NOT NULL DEFAULT current_timestamp(), - `updatedat` timestamp NULL DEFAULT NULL ON UPDATE current_timestamp(), - PRIMARY KEY (`id`) -) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; - --- Tabel Jalan (Polyline) -CREATE TABLE `jalan` ( - `id` int(11) NOT NULL AUTO_INCREMENT, - `nama` varchar(150) NOT NULL, - `status` enum('nasional','provinsi','kabupaten') NOT NULL DEFAULT 'kabupaten', - `panjang_meter` decimal(12,2) DEFAULT NULL, - `geom` JSON NOT NULL COMMENT 'GeoJSON LineString', - `createdat` timestamp NOT NULL DEFAULT current_timestamp(), - `updatedat` timestamp NULL DEFAULT NULL ON UPDATE current_timestamp(), - PRIMARY KEY (`id`) -) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; - --- Tabel Parsil Tanah (Polygon) -CREATE TABLE `parsil` ( - `id` int(11) NOT NULL AUTO_INCREMENT, - `nama` varchar(150) NOT NULL, - `status_kepemilikan` enum('SHM','HGB','HGU','HP') NOT NULL DEFAULT 'SHM', - `luas_m2` decimal(14,2) DEFAULT NULL, - `geom` JSON NOT NULL COMMENT 'GeoJSON Polygon', - `createdat` timestamp NOT NULL DEFAULT current_timestamp(), - `updatedat` timestamp NULL DEFAULT NULL ON UPDATE current_timestamp(), - PRIMARY KEY (`id`) -) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci; \ No newline at end of file diff --git a/04/database/bansos_gis.sql b/03/database/bansos_gis.sql similarity index 100% rename from 04/database/bansos_gis.sql rename to 03/database/bansos_gis.sql diff --git a/04/database/laporan_migration.sql b/03/database/laporan_migration.sql similarity index 100% rename from 04/database/laporan_migration.sql rename to 03/database/laporan_migration.sql diff --git a/04/database/migrations.sql b/03/database/migrations.sql similarity index 100% rename from 04/database/migrations.sql rename to 03/database/migrations.sql diff --git a/03/index.html b/03/index.html index aec1d46..e9c4f42 100644 --- a/03/index.html +++ b/03/index.html @@ -1,420 +1,1226 @@ + - WebGIS SPBU, Jalan & Parsil + WebGIS Bansos — Pemetaan Rumah Ibadah & Rumah Warga - - + + + + -
-
-
-

Memuat WebGIS…

-
-
+
-
+ + + + +
+ + + +
- -
-
ℹ️ Klik peta untuk menggambar
- 0 titik - - - - + +
+
+
Detail
+ +
+
- -
-
📐 Drag titik untuk edit geometri
- - - + +
+ Radius: + 500 m + · + Terdampak: + 0 rumah + + + + + +
+ + +
+ + +
+
-
- + +
- -
-
-
-
⛽
-

Tambah SPBU

-
-
-
- - + + - -
-
-
-
🛣️
-

Tambah Jalan

-
-
-
- - + +