pertama dan terakhir
This commit is contained in:
Tazyeuu
@@ -0,0 +1,364 @@
|
||||
/* =========================================================
|
||||
ADMIN LAYOUT STYLES — sidebar, topbar, main content
|
||||
========================================================= */
|
||||
|
||||
body.admin-page {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: var(--bg-base);
|
||||
}
|
||||
|
||||
/* ══════════════════════════════
|
||||
SIDEBAR
|
||||
══════════════════════════════ */
|
||||
.sidebar {
|
||||
width: var(--sidebar-w);
|
||||
flex-shrink: 0;
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--sidebar-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0; left: 0;
|
||||
z-index: 100;
|
||||
overflow-y: auto;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
padding: 24px 20px;
|
||||
border-bottom: 1px solid var(--sidebar-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 40px; height: 40px;
|
||||
background: var(--primary);
|
||||
border-radius: 10px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.1rem;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.brand-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.brand-name {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.brand-sub {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
padding: 16px 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-section-title {
|
||||
padding: 16px 20px 8px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 20px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
border-radius: 0;
|
||||
transition: var(--transition);
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: #F3F4F6;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: #EFF6FF;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.nav-item.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; top: 0; bottom: 0;
|
||||
width: 4px;
|
||||
background: var(--primary);
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.nav-item .nav-icon {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
font-size: 0.95rem;
|
||||
flex-shrink: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.nav-item .nav-badge {
|
||||
margin-left: auto;
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
border-top: 1px solid var(--sidebar-border);
|
||||
padding: 16px;
|
||||
flex-shrink: 0;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
border-radius: var(--radius-md);
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--sidebar-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 36px; height: 36px;
|
||||
border-radius: 50%;
|
||||
background: #E0E7FF;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-dark);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-details { flex: 1; overflow: hidden; }
|
||||
.user-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.user-role { font-size: 0.75rem; color: var(--text-muted); text-transform: capitalize; }
|
||||
|
||||
.user-logout {
|
||||
background: none; border: none; color: var(--text-muted);
|
||||
cursor: pointer; font-size: 1.1rem; padding: 6px;
|
||||
transition: all 0.2s;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.user-logout:hover { color: var(--danger); background: #FEF2F2; }
|
||||
|
||||
/* ══════════════════════════════
|
||||
MAIN CONTENT AREA
|
||||
══════════════════════════════ */
|
||||
.admin-main {
|
||||
margin-left: var(--sidebar-w);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ── Topbar ── */
|
||||
.topbar {
|
||||
height: 64px;
|
||||
background: var(--bg-surface);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 32px;
|
||||
gap: 16px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.topbar-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.topbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.topbar-time {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px;
|
||||
background: #F9FAFB;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* ── Content ── */
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
padding: 32px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════
|
||||
DASHBOARD STATS CARDS
|
||||
══════════════════════════════ */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-hover); }
|
||||
|
||||
.stat-icon {
|
||||
width: 48px; height: 48px;
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1.3rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-body { flex: 1; min-width: 0; }
|
||||
.stat-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
|
||||
.stat-value { font-size: 1.9rem; font-weight: 800; color: var(--text-primary); line-height: 1; letter-spacing: -0.02em; }
|
||||
.stat-change { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; font-weight: 500; }
|
||||
|
||||
/* Card color variants (Flat UI style) */
|
||||
.stat-card.primary .stat-icon { background: #EFF6FF; color: #2563EB; }
|
||||
.stat-card.success .stat-icon { background: #ECFDF5; color: #059669; }
|
||||
.stat-card.danger .stat-icon { background: #FEF2F2; color: #DC2626; }
|
||||
.stat-card.warning .stat-icon { background: #FFFBEB; color: #D97706; }
|
||||
.stat-card.info .stat-icon { background: #F0F9FF; color: #0284C7; }
|
||||
.stat-card.violet .stat-icon { background: #F5F3FF; color: #7C3AED; }
|
||||
|
||||
/* ══════════════════════════════
|
||||
DATA TABLE PAGE LAYOUT
|
||||
══════════════════════════════ */
|
||||
.page-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-toolbar .search-box {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
max-width: 360px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-box .search-icon {
|
||||
position: absolute;
|
||||
left: 14px; top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
padding: 10px 14px 10px 38px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: var(--transition);
|
||||
font-family: 'Inter', sans-serif;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
|
||||
.search-box input::placeholder { color: #9CA3AF; }
|
||||
|
||||
/* ══════════════════════════════
|
||||
MAP PAGE IN ADMIN
|
||||
══════════════════════════════ */
|
||||
.admin-map-page .admin-content {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.admin-map-page .topbar {
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
#admin-map {
|
||||
flex: 1;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.map-sidebar-floating {
|
||||
position: absolute;
|
||||
top: 16px; left: 16px;
|
||||
z-index: 400;
|
||||
width: 280px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* ══════════════════════════════
|
||||
RESPONSIVE
|
||||
══════════════════════════════ */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar { transform: translateX(-100%); }
|
||||
.sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
|
||||
.admin-main { margin-left: 0; }
|
||||
.stats-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@@ -0,0 +1,215 @@
|
||||
/* =========================================================
|
||||
AUTH PAGE STYLES — login.php
|
||||
========================================================= */
|
||||
|
||||
body.auth-page {
|
||||
background: #F9FAFB;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ── Center Panel (Form) ── */
|
||||
.auth-center {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
margin: 40px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
|
||||
border: 1px solid #E5E7EB;
|
||||
}
|
||||
|
||||
.auth-form-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.auth-form-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.auth-form-subtitle {
|
||||
color: #6B7280;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
/* Role selector */
|
||||
.role-selector {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.role-card {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.role-card input[type="radio"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0; height: 0;
|
||||
}
|
||||
|
||||
.role-card-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 12px;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #E5E7EB;
|
||||
background: #FFFFFF;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.role-card input:checked + .role-card-label {
|
||||
border-color: #2563EB;
|
||||
background: #EFF6FF;
|
||||
}
|
||||
|
||||
.role-card-label:hover {
|
||||
border-color: #D1D5DB;
|
||||
background: #F9FAFB;
|
||||
}
|
||||
|
||||
.role-card input:checked + .role-card-label:hover {
|
||||
border-color: #2563EB;
|
||||
}
|
||||
|
||||
.role-card-icon {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.role-card-name {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.role-card input:checked + .role-card-label .role-card-name {
|
||||
color: #1D4ED8;
|
||||
}
|
||||
|
||||
.role-card-desc {
|
||||
font-size: 0.75rem;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
/* Login form */
|
||||
.auth-form .form-group { margin-bottom: 20px; }
|
||||
|
||||
.auth-form .input-with-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.auth-form .input-with-icon .input-icon {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #9CA3AF;
|
||||
font-size: 1rem;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.auth-form .input-with-icon .form-control {
|
||||
padding-left: 44px;
|
||||
height: 46px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.auth-form .btn-login {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
font-size: 1rem;
|
||||
justify-content: center;
|
||||
background: #2563EB;
|
||||
color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
margin-top: 12px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
|
||||
}
|
||||
|
||||
.auth-form .btn-login:hover {
|
||||
background: #1D4ED8;
|
||||
box-shadow: 0 6px 8px -1px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
background: #FEF2F2;
|
||||
border: 1px solid #FECACA;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
color: #B91C1C;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.auth-hint {
|
||||
margin-top: 36px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
}
|
||||
|
||||
.auth-hint-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: #6B7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.auth-hint-creds {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.auth-hint-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #F9FAFB;
|
||||
border: 1px solid #E5E7EB;
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.auth-hint-role {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.auth-hint-pass {
|
||||
font-family: monospace;
|
||||
color: #4B5563;
|
||||
background: #E5E7EB;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 900px) {
|
||||
.auth-center { width: 100%; border-left: none; }
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
/* =========================================================
|
||||
WEBGIS PROJECT FINAL — Design System (main.css)
|
||||
========================================================= */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
:root {
|
||||
/* Colors - Clean Light Theme */
|
||||
--primary: #2563EB; /* Professional Blue */
|
||||
--primary-light: #3B82F6;
|
||||
--primary-dark: #1D4ED8;
|
||||
--accent: #10B981;
|
||||
--danger: #EF4444;
|
||||
--warning: #F59E0B;
|
||||
--info: #0EA5E9;
|
||||
|
||||
/* Backgrounds */
|
||||
--bg-base: #F9FAFB; /* Very light gray */
|
||||
--bg-surface: #FFFFFF; /* Pure white */
|
||||
--bg-elevated: #FFFFFF;
|
||||
--bg-card: #FFFFFF;
|
||||
|
||||
/* Borders */
|
||||
--border-light: #E5E7EB;
|
||||
--border-hover: #D1D5DB;
|
||||
|
||||
/* Text */
|
||||
--text-primary: #111827; /* Near black */
|
||||
--text-secondary: #4B5563; /* Dark gray */
|
||||
--text-muted: #6B7280; /* Medium gray */
|
||||
|
||||
/* Sidebar */
|
||||
--sidebar-w: 260px;
|
||||
--sidebar-bg: #FFFFFF;
|
||||
--sidebar-border: #E5E7EB;
|
||||
|
||||
/* Misc */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
--transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: var(--bg-base);
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: var(--primary); text-decoration: none; transition: var(--transition); }
|
||||
a:hover { color: var(--primary-dark); }
|
||||
|
||||
/* ── Scrollbar ── */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
|
||||
|
||||
/* ── Buttons ── */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 8px 16px; border-radius: var(--radius-md); border: 1px solid transparent;
|
||||
font-size: 0.85rem; font-weight: 500; font-family: 'Inter', sans-serif;
|
||||
cursor: pointer; transition: var(--transition); white-space: nowrap;
|
||||
outline: none;
|
||||
}
|
||||
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
|
||||
.btn-primary:hover { background: var(--primary-dark); }
|
||||
.btn-success { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
|
||||
.btn-success:hover { filter: brightness(0.95); }
|
||||
.btn-danger { background: var(--danger); color: #fff; }
|
||||
.btn-danger:hover { filter: brightness(0.95); }
|
||||
.btn-ghost { background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); }
|
||||
.btn-ghost:hover { background: #F3F4F6; color: var(--text-primary); border-color: var(--border-hover); }
|
||||
.btn-sm { padding: 6px 12px; font-size: 0.78rem; }
|
||||
.btn-icon { padding: 8px; border-radius: var(--radius-sm); }
|
||||
|
||||
/* ── Cards ── */
|
||||
.card {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 24px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* ── Form Elements ── */
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
|
||||
.form-control {
|
||||
width: 100%; padding: 10px 14px; border-radius: var(--radius-md);
|
||||
background: #FFFFFF; border: 1px solid var(--border-light);
|
||||
color: var(--text-primary); font-size: 0.9rem; font-family: 'Inter', sans-serif;
|
||||
outline: none; transition: var(--transition); box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
|
||||
.form-control::placeholder { color: #9CA3AF; }
|
||||
select.form-control {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 12px center;
|
||||
padding-right: 36px;
|
||||
}
|
||||
textarea.form-control { resize: vertical; min-height: 80px; }
|
||||
|
||||
/* ── Badges ── */
|
||||
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-xl); font-size: 0.75rem; font-weight: 600; }
|
||||
.badge-primary { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
|
||||
.badge-success { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
|
||||
.badge-danger { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }
|
||||
.badge-warning { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }
|
||||
.badge-info { background: #F0F9FF; color: #0369A1; border: 1px solid #BAE6FD; }
|
||||
|
||||
/* ── Tables ── */
|
||||
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-light); background: var(--bg-surface); box-shadow: var(--shadow-sm); }
|
||||
.data-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
|
||||
.data-table thead th { background: #F9FAFB; padding: 14px 16px; text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; border-bottom: 1px solid var(--border-light); }
|
||||
.data-table tbody tr { border-bottom: 1px solid var(--border-light); transition: background 0.15s; }
|
||||
.data-table tbody tr:last-child { border-bottom: none; }
|
||||
.data-table tbody tr:hover { background: #F3F4F6; }
|
||||
.data-table td { padding: 14px 16px; color: var(--text-primary); vertical-align: middle; }
|
||||
.data-table .actions { display: flex; gap: 6px; }
|
||||
|
||||
/* ── Modal ── */
|
||||
.modal-overlay {
|
||||
display: none; position: fixed; inset: 0; z-index: 9999;
|
||||
background: rgba(17, 24, 39, 0.4); backdrop-filter: blur(2px);
|
||||
align-items: center; justify-content: center;
|
||||
}
|
||||
.modal-overlay.active { display: flex; }
|
||||
.modal {
|
||||
background: var(--bg-surface); border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg); padding: 32px;
|
||||
width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto;
|
||||
box-shadow: var(--shadow-lg);
|
||||
animation: modalIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
|
||||
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
|
||||
.modal-title { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
|
||||
.modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.4rem; padding: 4px; border-radius: var(--radius-sm); transition: all 0.15s; }
|
||||
.modal-close:hover { background: #F3F4F6; color: var(--text-primary); }
|
||||
.modal-footer { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border-light); }
|
||||
|
||||
/* ── Toast ── */
|
||||
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; }
|
||||
.toast { padding: 14px 20px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 500; color: #fff; box-shadow: var(--shadow-md); animation: toastIn 0.3s ease; transition: opacity 0.3s; }
|
||||
.toast.success { background: #10B981; }
|
||||
.toast.error { background: #EF4444; }
|
||||
.toast.info { background: #3B82F6; }
|
||||
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
|
||||
|
||||
/* SPBU realtime snackbar */
|
||||
.spbu-snackbar {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
z-index: 99998;
|
||||
display: grid;
|
||||
grid-template-columns: 38px minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: min(360px, calc(100vw - 32px));
|
||||
padding: 13px 14px;
|
||||
color: var(--text-primary);
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #A7F3D0;
|
||||
border-left: 4px solid var(--accent);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-lg);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(18px);
|
||||
transition: opacity 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
.spbu-snackbar.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.spbu-snackbar-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #047857;
|
||||
background: #ECFDF5;
|
||||
border: 1px solid #A7F3D0;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.spbu-snackbar-title {
|
||||
font-size: 0.84rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.spbu-snackbar-meta {
|
||||
margin-top: 3px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.72rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.spbu-snackbar-count {
|
||||
min-width: 44px;
|
||||
padding: 5px 8px;
|
||||
color: #047857;
|
||||
background: #ECFDF5;
|
||||
border: 1px solid #A7F3D0;
|
||||
border-radius: var(--radius-md);
|
||||
text-align: center;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* ── Page header ── */
|
||||
.page-header { margin-bottom: 28px; }
|
||||
.page-header h1 { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
|
||||
.page-header p { color: var(--text-secondary); margin-top: 6px; font-size: 0.9rem; }
|
||||
.page-header .breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; }
|
||||
.page-header .breadcrumb .sep { color: #D1D5DB; }
|
||||
|
||||
/* ── Utilities ── */
|
||||
.text-muted { color: var(--text-muted); }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-success { color: var(--accent); }
|
||||
.text-danger { color: var(--danger); }
|
||||
.text-warning { color: var(--warning); }
|
||||
.flex { display: flex; }
|
||||
.flex-center { display: flex; align-items: center; justify-content: center; }
|
||||
.gap-2 { gap: 8px; }
|
||||
.gap-3 { gap: 12px; }
|
||||
.mt-1 { margin-top: 8px; }
|
||||
.mt-2 { margin-top: 16px; }
|
||||
.mb-1 { margin-bottom: 8px; }
|
||||
.mb-2 { margin-bottom: 16px; }
|
||||
.w-full { width: 100%; }
|
||||
@@ -0,0 +1,765 @@
|
||||
/* =========================================================
|
||||
MAP STYLES - interactive map panels and Leaflet overrides
|
||||
========================================================= */
|
||||
|
||||
.map-page {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: var(--bg-base);
|
||||
}
|
||||
|
||||
.map-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100vh - 64px);
|
||||
background: #E5E7EB;
|
||||
}
|
||||
|
||||
#admin-map,
|
||||
#user-map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #E5E7EB;
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: #E5E7EB;
|
||||
}
|
||||
|
||||
.leaflet-control-attribution {
|
||||
background: rgba(255, 255, 255, 0.92) !important;
|
||||
color: var(--text-muted) !important;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 3px 8px;
|
||||
font-size: 0.68rem;
|
||||
}
|
||||
|
||||
.leaflet-control-attribution a {
|
||||
color: var(--primary-dark) !important;
|
||||
}
|
||||
|
||||
.leaflet-bar {
|
||||
border: 1px solid var(--border-light) !important;
|
||||
border-radius: var(--radius-md) !important;
|
||||
box-shadow: var(--shadow-md) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom a,
|
||||
.leaflet-draw-toolbar a {
|
||||
width: 34px !important;
|
||||
height: 34px !important;
|
||||
line-height: 34px !important;
|
||||
background: #FFFFFF !important;
|
||||
color: var(--text-primary) !important;
|
||||
border: 0 !important;
|
||||
border-bottom: 1px solid var(--border-light) !important;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom a:last-child,
|
||||
.leaflet-draw-toolbar a:last-child {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-control-zoom a:hover,
|
||||
.leaflet-draw-toolbar a:hover {
|
||||
background: #F3F4F6 !important;
|
||||
color: var(--primary-dark) !important;
|
||||
}
|
||||
|
||||
/* Layer panel */
|
||||
.map-sidebar {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
z-index: 500;
|
||||
width: 316px;
|
||||
max-height: calc(100vh - 112px);
|
||||
overflow-y: auto;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 16px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.map-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-bottom: 14px;
|
||||
margin-bottom: 14px;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.map-panel-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--radius-md);
|
||||
background: #EFF6FF;
|
||||
color: var(--primary-dark);
|
||||
border: 1px solid #BFDBFE;
|
||||
}
|
||||
|
||||
.map-panel-header h3 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.98rem;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.map-panel-header p {
|
||||
margin: 3px 0 0;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.76rem;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.layer-section {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.layer-section:last-of-type {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.layer-section-title {
|
||||
margin: 0 0 8px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.layer-item {
|
||||
display: grid;
|
||||
grid-template-columns: 18px 30px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 48px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.layer-item + .layer-item {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.layer-item:hover {
|
||||
background: #F9FAFB;
|
||||
border-color: var(--border-light);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.layer-item input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
accent-color: var(--primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layer-color {
|
||||
--layer-color: var(--primary);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
flex-shrink: 0;
|
||||
color: #FFFFFF;
|
||||
background: var(--layer-color);
|
||||
border: 1px solid color-mix(in srgb, var(--layer-color) 72%, #000 28%);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
.layer-color i {
|
||||
font-size: 0.76rem;
|
||||
}
|
||||
|
||||
.layer-point {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.layer-line {
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
align-self: center;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.layer-area {
|
||||
border-radius: 6px;
|
||||
background: color-mix(in srgb, var(--layer-color) 22%, #FFFFFF 78%);
|
||||
border-color: var(--layer-color);
|
||||
}
|
||||
|
||||
.layer-hatch {
|
||||
background:
|
||||
repeating-linear-gradient(45deg, color-mix(in srgb, var(--layer-color) 78%, #FFFFFF 22%) 0 4px, transparent 4px 8px),
|
||||
color-mix(in srgb, var(--layer-color) 12%, #FFFFFF 88%);
|
||||
}
|
||||
|
||||
.layer-gradient {
|
||||
border-radius: 6px;
|
||||
background: linear-gradient(90deg, #10B981 0%, #F59E0B 50%, #EF4444 100%);
|
||||
border-color: #D1D5DB;
|
||||
}
|
||||
|
||||
.layer-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.layer-name {
|
||||
color: var(--text-primary);
|
||||
font-size: 0.86rem;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.layer-meta {
|
||||
margin-top: 2px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.7rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.map-quickstats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.qs-item {
|
||||
min-width: 0;
|
||||
padding: 9px 6px;
|
||||
text-align: center;
|
||||
background: #F9FAFB;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.qs-value {
|
||||
font-size: 1.08rem;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.qs-label {
|
||||
margin-top: 3px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.62rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.map-analysis {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
z-index: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
max-width: calc(100% - 380px);
|
||||
padding: 8px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateX(-50%);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.map-analysis button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
min-height: 34px;
|
||||
padding: 7px 12px;
|
||||
color: var(--text-secondary);
|
||||
background: #FFFFFF;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.map-analysis button:hover {
|
||||
background: #F3F4F6;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-hover);
|
||||
}
|
||||
|
||||
.map-analysis button.active {
|
||||
color: #FFFFFF;
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.map-analysis .map-tool-accent {
|
||||
color: #047857;
|
||||
background: #ECFDF5;
|
||||
border-color: #A7F3D0;
|
||||
}
|
||||
|
||||
.map-analysis .map-tool-accent:hover {
|
||||
color: #065F46;
|
||||
background: #D1FAE5;
|
||||
border-color: #6EE7B7;
|
||||
}
|
||||
|
||||
/* Nearest SPBU panel */
|
||||
.spbu-panel {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 500;
|
||||
width: 310px;
|
||||
padding: 16px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.spbu-panel-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.94rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.spbu-result {
|
||||
margin-top: 10px;
|
||||
padding: 12px;
|
||||
background: #F9FAFB;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.spbu-result-name {
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.spbu-result-meta {
|
||||
margin-top: 4px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.spbu-result-distance {
|
||||
margin-top: 8px;
|
||||
color: var(--primary-dark);
|
||||
font-size: 1.35rem;
|
||||
line-height: 1;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* Markers */
|
||||
.marker-pin {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #FFFFFF;
|
||||
background: var(--primary);
|
||||
border: 2px solid #FFFFFF;
|
||||
border-radius: 50% 50% 50% 0;
|
||||
box-shadow: 0 6px 12px rgba(17, 24, 39, 0.28);
|
||||
font-size: 0.9rem;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.marker-pin > * {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.div-icon-wrap {
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Popups */
|
||||
.leaflet-popup-content-wrapper {
|
||||
color: var(--text-primary) !important;
|
||||
background: #FFFFFF !important;
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg) !important;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.leaflet-popup-tip {
|
||||
background: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 16px !important;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
margin-bottom: 6px;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.98rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.popup-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 5px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.popup-row strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.popup-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.popup-actions .btn {
|
||||
padding: 5px 10px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Legend */
|
||||
.map-legend {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
z-index: 500;
|
||||
min-width: 230px;
|
||||
padding: 14px;
|
||||
color: var(--text-secondary);
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.map-legend-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.legend-grid {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: grid;
|
||||
grid-template-columns: 24px minmax(0, 1fr);
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 22px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.76rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.legend-symbol {
|
||||
--legend-color: var(--primary);
|
||||
justify-self: center;
|
||||
background: var(--legend-color);
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 2px solid #FFFFFF;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 1px color-mix(in srgb, var(--legend-color) 70%, #000 30%);
|
||||
}
|
||||
|
||||
.legend-line {
|
||||
width: 22px;
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.legend-area {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--legend-color);
|
||||
border-radius: 4px;
|
||||
background: color-mix(in srgb, var(--legend-color) 18%, #FFFFFF 82%);
|
||||
}
|
||||
|
||||
.legend-hatch {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--legend-color);
|
||||
border-radius: 4px;
|
||||
background:
|
||||
repeating-linear-gradient(45deg, color-mix(in srgb, var(--legend-color) 76%, #FFFFFF 24%) 0 3px, transparent 3px 6px),
|
||||
color-mix(in srgb, var(--legend-color) 12%, #FFFFFF 88%);
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.map-modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(17, 24, 39, 0.45);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.map-modal.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.map-modal-content {
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
padding: 28px 32px;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
animation: modalIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes modalIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading and toast */
|
||||
.map-loading {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
color: var(--text-primary);
|
||||
background: rgba(249, 250, 251, 0.72);
|
||||
backdrop-filter: blur(3px);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 3px solid rgba(37, 99, 235, 0.16);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
max-width: 320px;
|
||||
padding: 12px 20px;
|
||||
color: #FFFFFF;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 600;
|
||||
animation: toastIn 0.3s ease;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.toast.success { background: #10B981; }
|
||||
.toast.error { background: #EF4444; }
|
||||
.toast.info { background: #3B82F6; }
|
||||
|
||||
@keyframes toastIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.read-only-badge {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 8px 13px;
|
||||
color: #047857;
|
||||
background: #ECFDF5;
|
||||
border: 1px solid #A7F3D0;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1180px) {
|
||||
.map-analysis {
|
||||
left: auto;
|
||||
right: 16px;
|
||||
max-width: calc(100% - 364px);
|
||||
overflow-x: auto;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.map-sidebar {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.map-analysis {
|
||||
top: auto;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
max-width: none;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.map-legend {
|
||||
right: 16px;
|
||||
bottom: 78px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.map-wrap {
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.map-sidebar {
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
width: calc(100% - 16px);
|
||||
max-height: 46vh;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.map-panel-header {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.layer-item {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.map-quickstats {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.map-analysis {
|
||||
right: 8px;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
padding: 6px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.map-analysis button {
|
||||
min-height: 32px;
|
||||
padding: 6px 10px;
|
||||
font-size: 0.74rem;
|
||||
}
|
||||
|
||||
.spbu-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.map-legend {
|
||||
right: 8px;
|
||||
bottom: 66px;
|
||||
min-width: 210px;
|
||||
max-width: calc(100% - 16px);
|
||||
}
|
||||
|
||||
.read-only-badge {
|
||||
top: auto;
|
||||
right: 8px;
|
||||
bottom: 66px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,491 @@
|
||||
/* =========================================================
|
||||
admin-map.js — Full WebGIS Map (admin mode: edit & draw)
|
||||
========================================================= */
|
||||
|
||||
const API = APP_BASE + '/api';
|
||||
const STAT_API = APP_BASE + '/api/statistik.php';
|
||||
|
||||
const state = {
|
||||
map: null,
|
||||
layers: {
|
||||
spbu: null, jalan: null, kavling: null,
|
||||
kawasan: null, rumah: null, warga: null,
|
||||
choropleth: null, blankSpot: null, spbuRoute: null
|
||||
},
|
||||
activeDraw: null, // 'spbu' | 'jalan' | 'kavling' | 'kawasan' | 'rumah' | 'warga'
|
||||
drawHandlers: {},
|
||||
pendingGeometry: null
|
||||
};
|
||||
|
||||
const COLORS = {
|
||||
spbu: '#F59E0B',
|
||||
spbu24: '#10B981',
|
||||
jalan: '#3B82F6',
|
||||
kavling: '#8B5CF6',
|
||||
kawasan: '#EF4444',
|
||||
rumah: '#A855F7',
|
||||
warga: '#EF4444',
|
||||
blankSpot: '#F97316'
|
||||
};
|
||||
|
||||
/* ── Icon factory ── */
|
||||
function makeIcon(emoji, bgColor, size = 34) {
|
||||
return L.divIcon({
|
||||
className: 'div-icon-wrap',
|
||||
html: `<div class="marker-pin" style="background:${bgColor};width:${size}px;height:${size}px;"><span>${emoji}</span></div>`,
|
||||
iconSize: [size, size],
|
||||
iconAnchor: [size / 2, size],
|
||||
popupAnchor: [0, -size]
|
||||
});
|
||||
}
|
||||
|
||||
const ICONS = {
|
||||
spbu24: makeIcon('⛽', COLORS.spbu24),
|
||||
spbu: makeIcon('⛽', COLORS.spbu),
|
||||
rumah: makeIcon('🕌', COLORS.rumah),
|
||||
warga: makeIcon('👤', COLORS.warga),
|
||||
blankSpot: makeIcon('⚠️', COLORS.blankSpot, 36)
|
||||
};
|
||||
|
||||
/* ── Toast ── */
|
||||
function toast(msg, type = 'success') {
|
||||
const c = document.getElementById('toastContainer');
|
||||
const t = document.createElement('div');
|
||||
t.className = `toast ${type}`;
|
||||
t.innerHTML = `<i class="fas fa-${type === 'success' ? 'check-circle' : (type === 'error' ? 'exclamation-circle' : 'info-circle')}" style="margin-right:8px;"></i>${msg}`;
|
||||
c.appendChild(t);
|
||||
setTimeout(() => { t.style.opacity = '0'; setTimeout(() => t.remove(), 400); }, 3000);
|
||||
}
|
||||
|
||||
/* ── Initialize map ── */
|
||||
function initMap() {
|
||||
state.map = L.map('admin-map', { zoomControl: false })
|
||||
.setView([-0.0583, 109.3448], 13);
|
||||
|
||||
L.control.zoom({ position: 'bottomright' }).addTo(state.map);
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
||||
attribution: '© OpenStreetMap, © CARTO',
|
||||
subdomains: 'abcd',
|
||||
maxZoom: 20
|
||||
}).addTo(state.map);
|
||||
}
|
||||
|
||||
/* ── Fetch GeoJSON ── */
|
||||
async function fetchLayer(path) {
|
||||
const r = await fetch(`${API}/${path}`);
|
||||
const j = await r.json();
|
||||
return j.status === 'success' ? j.data : { type: 'FeatureCollection', features: [] };
|
||||
}
|
||||
|
||||
function formatKm(value) {
|
||||
return Number(value || 0).toLocaleString('id-ID', {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
}
|
||||
|
||||
/* ── Render: SPBU (Point) ── */
|
||||
function renderSpbu(data) {
|
||||
if (state.layers.spbu) state.map.removeLayer(state.layers.spbu);
|
||||
state.layers.spbu = L.geoJSON(data, {
|
||||
pointToLayer: (f, ll) => L.marker(ll, { icon: f.properties.buka_24_jam ? ICONS.spbu24 : ICONS.spbu }),
|
||||
onEachFeature: (f, l) => bindPopup(l, 'spbu', f.properties)
|
||||
});
|
||||
if (document.getElementById('ly-spbu')?.checked) state.layers.spbu.addTo(state.map);
|
||||
}
|
||||
|
||||
/* ── Render: Jalan (LineString) ── */
|
||||
function renderJalan(data) {
|
||||
if (state.layers.jalan) state.map.removeLayer(state.layers.jalan);
|
||||
state.layers.jalan = L.geoJSON(data, {
|
||||
style: { color: COLORS.jalan, weight: 5, opacity: 0.85 },
|
||||
onEachFeature: (f, l) => bindPopup(l, 'jalan', f.properties)
|
||||
});
|
||||
if (document.getElementById('ly-jalan')?.checked) state.layers.jalan.addTo(state.map);
|
||||
}
|
||||
|
||||
/* ── Render: Kavling (Polygon) ── */
|
||||
function renderKavling(data) {
|
||||
if (state.layers.kavling) state.map.removeLayer(state.layers.kavling);
|
||||
state.layers.kavling = L.geoJSON(data, {
|
||||
style: { color: COLORS.kavling, fillColor: COLORS.kavling, fillOpacity: 0.3, weight: 2 },
|
||||
onEachFeature: (f, l) => bindPopup(l, 'kavling', f.properties)
|
||||
});
|
||||
if (document.getElementById('ly-kavling')?.checked) state.layers.kavling.addTo(state.map);
|
||||
}
|
||||
|
||||
/* ── Render: Kawasan Kumuh (Polygon) ── */
|
||||
function renderKawasan(data) {
|
||||
if (state.layers.kawasan) state.map.removeLayer(state.layers.kawasan);
|
||||
state.layers.kawasan = L.geoJSON(data, {
|
||||
style: { color: COLORS.kawasan, fillColor: COLORS.kawasan, fillOpacity: 0.25, weight: 2, dashArray: '6 4' },
|
||||
onEachFeature: (f, l) => bindPopup(l, 'kawasan', f.properties)
|
||||
});
|
||||
if (document.getElementById('ly-kawasan')?.checked) state.layers.kawasan.addTo(state.map);
|
||||
}
|
||||
|
||||
/* ── Render: Rumah Ibadah (Point) ── */
|
||||
function renderRumah(data) {
|
||||
if (state.layers.rumah) state.map.removeLayer(state.layers.rumah);
|
||||
state.layers.rumah = L.featureGroup();
|
||||
(data.features || []).forEach((f) => {
|
||||
if (!f.geometry || f.geometry.type !== 'Point') return;
|
||||
const props = f.properties || {};
|
||||
const ll = L.latLng(f.geometry.coordinates[1], f.geometry.coordinates[0]);
|
||||
const circle = L.circle(ll, {
|
||||
radius: Number(props.radius_bantuan_meter || 1000),
|
||||
color: COLORS.rumah,
|
||||
fillColor: COLORS.rumah,
|
||||
fillOpacity: 0.08,
|
||||
opacity: 0.55,
|
||||
weight: 2
|
||||
});
|
||||
const marker = L.marker(ll, { icon: ICONS.rumah });
|
||||
bindPopup(circle, 'rumah', props);
|
||||
bindPopup(marker, 'rumah', props);
|
||||
state.layers.rumah.addLayer(circle);
|
||||
state.layers.rumah.addLayer(marker);
|
||||
});
|
||||
if (document.getElementById('ly-rumah')?.checked) state.layers.rumah.addTo(state.map);
|
||||
}
|
||||
|
||||
/* ── Render: Warga Miskin (Point) ── */
|
||||
function renderWarga(data) {
|
||||
if (state.layers.warga) state.map.removeLayer(state.layers.warga);
|
||||
state.layers.warga = L.geoJSON(data, {
|
||||
pointToLayer: (f, ll) => L.marker(ll, { icon: ICONS.warga }),
|
||||
onEachFeature: (f, l) => bindPopup(l, 'warga', f.properties)
|
||||
});
|
||||
if (document.getElementById('ly-warga')?.checked) state.layers.warga.addTo(state.map);
|
||||
}
|
||||
|
||||
/* ── Render: Choropleth (kawasan + count warga) ── */
|
||||
function renderChoropleth(data) {
|
||||
if (state.layers.choropleth) state.map.removeLayer(state.layers.choropleth);
|
||||
state.layers.choropleth = L.geoJSON(data, {
|
||||
style: (f) => {
|
||||
const c = f.properties.jumlah_warga;
|
||||
let color = '#10B981';
|
||||
if (c > 0) color = '#F59E0B';
|
||||
if (c > 3) color = '#EF4444';
|
||||
return { color, fillColor: color, fillOpacity: 0.35, weight: 3 };
|
||||
},
|
||||
onEachFeature: (f, l) => {
|
||||
const c = f.properties.jumlah_warga;
|
||||
l.bindPopup(`<div class="popup-title">${f.properties.nama_kawasan}</div>
|
||||
<div class="popup-row">Jumlah Warga: <strong>${c}</strong></div>
|
||||
<div class="popup-row">Total Tanggungan: <strong>${f.properties.total_tanggungan}</strong></div>`);
|
||||
}
|
||||
});
|
||||
if (document.getElementById('ly-choropleth')?.checked) state.layers.choropleth.addTo(state.map);
|
||||
}
|
||||
|
||||
/* ── Render: Blank Spot (warga yang jauh dari rumah ibadah) ── */
|
||||
function renderBlankSpot(data) {
|
||||
if (state.layers.blankSpot) state.map.removeLayer(state.layers.blankSpot);
|
||||
state.layers.blankSpot = L.geoJSON(data, {
|
||||
pointToLayer: (f, ll) => L.marker(ll, { icon: ICONS.blankSpot }),
|
||||
onEachFeature: (f, l) => {
|
||||
l.bindPopup(`<div class="popup-title">⚠️ ${f.properties.nama_kk}</div>
|
||||
<div class="popup-row">Jarak ke RI terdekat: <strong>${formatKm(f.properties.jarak_km)} km</strong></div>
|
||||
<div class="popup-row">Radius bantuan: <strong>${formatKm(f.properties.radius_km)} km</strong></div>
|
||||
<div class="popup-row">Di luar radius: <strong>${formatKm(f.properties.selisih_km)} km</strong></div>
|
||||
<div class="popup-row">Rumah ibadah terdekat: <strong>${f.properties.rumah_ibadah_terdekat || '-'}</strong></div>
|
||||
<div class="popup-row" style="color:#F97316">Blank spot di luar radius bantuan</div>`);
|
||||
}
|
||||
});
|
||||
if (document.getElementById('ly-blankspot')?.checked) state.layers.blankSpot.addTo(state.map);
|
||||
}
|
||||
|
||||
/* ── Popup binding helper ── */
|
||||
function bindPopup(layer, type, props) {
|
||||
let html = `<div class="popup-title">${props.nama || props.nama_pemilik || props.nama_kk || props.nama_kawasan || 'Tanpa Nama'}</div>`;
|
||||
if (type === 'spbu') {
|
||||
html += `<div class="popup-row">24 Jam: <strong style="color:${props.buka_24_jam ? '#10B981' : '#EF4444'}">${props.buka_24_jam ? 'Ya' : 'Tidak'}</strong></div>`;
|
||||
if (props.deskripsi) html += `<div class="popup-row">${props.deskripsi}</div>`;
|
||||
} else if (type === 'jalan') {
|
||||
html += `<div class="popup-row">Jenis: <strong>${props.jenis_jalan || '-'}</strong></div>`;
|
||||
} else if (type === 'kavling') {
|
||||
html += `<div class="popup-row">Status: <strong>${props.status_kepemilikan || '-'}</strong></div>`;
|
||||
html += `<div class="popup-row">Luas: <strong>${props.luas ? props.luas + ' m²' : '-'}</strong></div>`;
|
||||
} else if (type === 'rumah') {
|
||||
html += `<div class="popup-row">Agama: <strong>${props.agama || '-'}</strong></div>`;
|
||||
html += `<div class="popup-row">Radius Bantuan: <strong>${formatKm(props.radius_bantuan_km)} km</strong></div>`;
|
||||
} else if (type === 'warga') {
|
||||
html += `<div class="popup-row">Penghasilan: <strong>Rp ${Number(props.penghasilan || 0).toLocaleString('id-ID')}</strong></div>`;
|
||||
html += `<div class="popup-row">Tanggungan: <strong>${props.jumlah_tanggungan || 0} org</strong></div>`;
|
||||
}
|
||||
html += `<div class="popup-actions">
|
||||
<button class="btn btn-danger btn-sm" onclick="deleteFeature('${type}', ${props.id})"><i class="fas fa-trash"></i> Hapus</button>
|
||||
<button class="btn btn-ghost btn-sm" onclick="window.location.href=APP_BASE + '/admin/data_${type === 'kavling' ? 'kavling' : (type === 'kawasan' ? 'kawasan' : (type === 'rumah' ? 'rumah' : (type === 'warga' ? 'warga' : type)))}.php'"><i class="fas fa-edit"></i> Kelola</button>
|
||||
</div>`;
|
||||
layer.bindPopup(html);
|
||||
}
|
||||
|
||||
/* ── Delete from map ── */
|
||||
window.deleteFeature = async function (type, id) {
|
||||
if (!confirm('Yakin hapus data ini?')) return;
|
||||
const ep = { spbu: 'spbu.php', jalan: 'jalan.php', kavling: 'kavling.php', kawasan: 'kawasan_kumuh.php', rumah: 'rumah_ibadah.php', warga: 'warga_miskin.php' }[type];
|
||||
if (!ep) return;
|
||||
const r = await fetch(`${API}/${ep}?id=${id}`, { method: 'DELETE' });
|
||||
const j = await r.json();
|
||||
if (j.status === 'success') { toast('Data dihapus!'); loadAll(); }
|
||||
else toast(j.message, 'error');
|
||||
};
|
||||
|
||||
/* ── Layer toggling ── */
|
||||
function bindLayerToggles() {
|
||||
const map = {
|
||||
'ly-spbu': 'spbu', 'ly-jalan': 'jalan', 'ly-kavling': 'kavling',
|
||||
'ly-kawasan': 'kawasan', 'ly-rumah': 'rumah', 'ly-warga': 'warga',
|
||||
'ly-choropleth': 'choropleth', 'ly-blankspot': 'blankSpot'
|
||||
};
|
||||
Object.entries(map).forEach(([id, key]) => {
|
||||
document.getElementById(id)?.addEventListener('change', (e) => {
|
||||
const layer = state.layers[key];
|
||||
if (!layer) return;
|
||||
if (e.target.checked) state.map.addLayer(layer);
|
||||
else state.map.removeLayer(layer);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ── Drawing tool activation ── */
|
||||
function activateDraw(type) {
|
||||
if (state.activeDraw) deactivateDraw();
|
||||
state.activeDraw = type;
|
||||
|
||||
// Update UI button state
|
||||
document.querySelectorAll('[data-draw]').forEach(b => b.classList.remove('active'));
|
||||
document.querySelector(`[data-draw="${type}"]`)?.classList.add('active');
|
||||
|
||||
// Create appropriate L.Draw handler
|
||||
let handler = null;
|
||||
if (type === 'spbu' || type === 'rumah' || type === 'warga') {
|
||||
handler = new L.Draw.Marker(state.map);
|
||||
} else if (type === 'jalan') {
|
||||
handler = new L.Draw.Polyline(state.map, { shapeOptions: { color: COLORS.jalan, weight: 5 } });
|
||||
} else if (type === 'kavling' || type === 'kawasan') {
|
||||
handler = new L.Draw.Polygon(state.map, { shapeOptions: { color: type === 'kavling' ? COLORS.kavling : COLORS.kawasan } });
|
||||
}
|
||||
state.drawHandlers[type] = handler;
|
||||
handler.enable();
|
||||
}
|
||||
|
||||
/* ── Deactivate drawing ── */
|
||||
function deactivateDraw() {
|
||||
if (state.activeDraw && state.drawHandlers[state.activeDraw]) {
|
||||
state.drawHandlers[state.activeDraw].disable();
|
||||
}
|
||||
state.activeDraw = null;
|
||||
document.querySelectorAll('[data-draw]').forEach(b => b.classList.remove('active'));
|
||||
}
|
||||
|
||||
/* ── Draw event listener ── */
|
||||
function bindDrawEvent() {
|
||||
state.map.on(L.Draw.Event.CREATED, (e) => {
|
||||
const geom = e.layer.toGeoJSON().geometry;
|
||||
state.pendingGeometry = geom;
|
||||
openFormModal(state.activeDraw, geom);
|
||||
});
|
||||
|
||||
state.map.on(L.Draw.Event.DRAWSTOP, () => {
|
||||
// User cancelled drawing
|
||||
document.querySelectorAll('[data-draw]').forEach(b => b.classList.remove('active'));
|
||||
state.activeDraw = null;
|
||||
});
|
||||
}
|
||||
|
||||
/* ── Form modal untuk input data baru ── */
|
||||
function openFormModal(type, geometry) {
|
||||
const modal = document.getElementById('formModal');
|
||||
const title = document.getElementById('formModalTitle');
|
||||
const body = document.getElementById('formModalBody');
|
||||
|
||||
const titles = { spbu: '⛽ Tambah SPBU', jalan: '🛣️ Tambah Jalan', kavling: '🏘️ Tambah Kavling',
|
||||
kawasan: '⚠️ Tambah Kawasan Kumuh', rumah: '🕌 Tambah Rumah Ibadah', warga: '👤 Tambah Warga Miskin' };
|
||||
title.textContent = titles[type] || 'Tambah Data';
|
||||
|
||||
let formHtml = '';
|
||||
if (type === 'spbu') {
|
||||
formHtml = `
|
||||
<div class="form-group"><label class="form-label">Nama SPBU *</label><input type="text" id="f-nama" class="form-control" required></div>
|
||||
<div class="form-group"><label class="form-label">Deskripsi</label><textarea id="f-deskripsi" class="form-control"></textarea></div>
|
||||
<div class="form-group"><label class="form-label" style="display:flex;align-items:center;gap:8px;cursor:pointer;"><input type="checkbox" id="f-24" style="accent-color:var(--primary);"> Buka 24 Jam</label></div>`;
|
||||
} else if (type === 'jalan') {
|
||||
formHtml = `
|
||||
<div class="form-group"><label class="form-label">Nama Jalan *</label><input type="text" id="f-nama" class="form-control" required></div>
|
||||
<div class="form-group"><label class="form-label">Jenis Jalan</label>
|
||||
<select id="f-jenis" class="form-control">
|
||||
<option>Jalan Arteri</option><option>Jalan Kolektor</option>
|
||||
<option selected>Jalan Lokal</option><option>Jalan Lingkungan</option>
|
||||
</select></div>`;
|
||||
} else if (type === 'kavling') {
|
||||
formHtml = `
|
||||
<div class="form-group"><label class="form-label">Nama Pemilik *</label><input type="text" id="f-nama" class="form-control" required></div>
|
||||
<div class="form-group"><label class="form-label">Status Kepemilikan *</label>
|
||||
<select id="f-status" class="form-control">
|
||||
<option value="SHM">SHM</option><option value="HGB">HGB</option>
|
||||
<option value="HGU">HGU</option><option value="HP">HP</option>
|
||||
</select></div>
|
||||
<div class="form-group"><label class="form-label">Luas (m²)</label><input type="number" id="f-luas" class="form-control" min="0" step="0.01"></div>`;
|
||||
} else if (type === 'kawasan') {
|
||||
formHtml = `
|
||||
<div class="form-group"><label class="form-label">Nama Kawasan *</label><input type="text" id="f-nama" class="form-control" required></div>`;
|
||||
} else if (type === 'rumah') {
|
||||
formHtml = `
|
||||
<div class="form-group"><label class="form-label">Nama *</label><input type="text" id="f-nama" class="form-control" required></div>
|
||||
<div class="form-group"><label class="form-label">Agama *</label>
|
||||
<select id="f-agama" class="form-control">
|
||||
<option>Islam</option><option>Kristen</option><option>Katolik</option>
|
||||
<option>Hindu</option><option>Buddha</option><option>Konghucu</option>
|
||||
</select></div>
|
||||
<div class="form-group"><label class="form-label">Radius Bantuan (meter) *</label><input type="number" id="f-radius" class="form-control" min="100" max="10000" step="50" value="1000" required></div>`;
|
||||
} else if (type === 'warga') {
|
||||
formHtml = `
|
||||
<div class="form-group"><label class="form-label">Nama Kepala Keluarga *</label><input type="text" id="f-nama" class="form-control" required></div>
|
||||
<div class="form-group"><label class="form-label">Penghasilan/Bln (Rp)</label><input type="number" id="f-penghasilan" class="form-control" min="0"></div>
|
||||
<div class="form-group"><label class="form-label">Jumlah Tanggungan</label><input type="number" id="f-tanggungan" class="form-control" min="0" max="20"></div>`;
|
||||
}
|
||||
|
||||
body.innerHTML = formHtml + `
|
||||
<div class="modal-footer" style="margin-top:20px;display:flex;gap:10px;justify-content:flex-end;">
|
||||
<button class="btn btn-ghost" onclick="closeFormModal()">Batal</button>
|
||||
<button class="btn btn-primary" id="btn-simpan" onclick="saveFeature('${type}')"><i class="fas fa-save"></i> Simpan</button>
|
||||
</div>`;
|
||||
|
||||
modal.classList.add('active');
|
||||
}
|
||||
|
||||
window.closeFormModal = function () {
|
||||
document.getElementById('formModal').classList.remove('active');
|
||||
state.pendingGeometry = null;
|
||||
deactivateDraw();
|
||||
};
|
||||
|
||||
/* ── Save feature to backend ── */
|
||||
window.saveFeature = async function (type) {
|
||||
const ep = { spbu: 'spbu.php', jalan: 'jalan.php', kavling: 'kavling.php', kawasan: 'kawasan_kumuh.php', rumah: 'rumah_ibadah.php', warga: 'warga_miskin.php' }[type];
|
||||
if (!ep) return;
|
||||
|
||||
let payload = { geometry: state.pendingGeometry };
|
||||
const v = (id) => document.getElementById(id)?.value;
|
||||
|
||||
if (type === 'spbu') {
|
||||
if (!v('f-nama')) return toast('Nama wajib!', 'error');
|
||||
payload = { ...payload, nama: v('f-nama'), deskripsi: v('f-deskripsi') || '', buka_24_jam: document.getElementById('f-24').checked ? 1 : 0 };
|
||||
} else if (type === 'jalan') {
|
||||
if (!v('f-nama')) return toast('Nama wajib!', 'error');
|
||||
payload = { ...payload, nama: v('f-nama'), jenis_jalan: v('f-jenis') };
|
||||
} else if (type === 'kavling') {
|
||||
if (!v('f-nama')) return toast('Nama wajib!', 'error');
|
||||
payload = { ...payload, nama_pemilik: v('f-nama'), status_kepemilikan: v('f-status'), luas: parseFloat(v('f-luas')) || 0 };
|
||||
} else if (type === 'kawasan') {
|
||||
if (!v('f-nama')) return toast('Nama wajib!', 'error');
|
||||
payload = { ...payload, nama_kawasan: v('f-nama') };
|
||||
} else if (type === 'rumah') {
|
||||
if (!v('f-nama')) return toast('Nama wajib!', 'error');
|
||||
payload = { ...payload, nama: v('f-nama'), agama: v('f-agama'), radius_bantuan_meter: Math.max(100, Math.min(10000, parseInt(v('f-radius'), 10) || 1000)) };
|
||||
} else if (type === 'warga') {
|
||||
if (!v('f-nama')) return toast('Nama wajib!', 'error');
|
||||
payload = { ...payload, nama_kk: v('f-nama'), penghasilan: parseFloat(v('f-penghasilan')) || 0, jumlah_tanggungan: parseInt(v('f-tanggungan')) || 0 };
|
||||
}
|
||||
|
||||
try {
|
||||
const r = await fetch(`${API}/${ep}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
const j = await r.json();
|
||||
if (j.status === 'success') { toast('Data berhasil disimpan!'); closeFormModal(); loadAll(); }
|
||||
else toast(j.message || 'Gagal menyimpan', 'error');
|
||||
} catch (e) { toast('Error: ' + e.message, 'error'); }
|
||||
};
|
||||
|
||||
/* ── Analysis: SPBU Terdekat ── */
|
||||
async function findNearestSpbu() {
|
||||
const center = state.map.getCenter();
|
||||
document.getElementById('spbuPanelResult').innerHTML = '<div class="spinner"></div> Mencari...';
|
||||
document.getElementById('spbuPanel').style.display = 'block';
|
||||
|
||||
try {
|
||||
const r = await fetch(`${API}/spbu_terdekat.php?lat=${center.lat}&lng=${center.lng}`);
|
||||
const j = await r.json();
|
||||
if (j.status === 'success' && j.data) {
|
||||
const p = j.data.properties;
|
||||
const coords = j.data.geometry.coordinates;
|
||||
const html = `<div class="spbu-result">
|
||||
<div class="spbu-result-name">⛽ ${p.nama}</div>
|
||||
<div class="spbu-result-meta">${p.buka_24_jam ? '🟢 24 Jam' : '🟡 Terbatas'}</div>
|
||||
<div class="spbu-result-distance">${p.jarak_km} km</div>
|
||||
</div>`;
|
||||
document.getElementById('spbuPanelResult').innerHTML = html;
|
||||
|
||||
// Show marker
|
||||
if (state.layers.spbuRoute) state.map.removeLayer(state.layers.spbuRoute);
|
||||
state.layers.spbuRoute = L.marker([coords[1], coords[0]], { icon: ICONS.spbu }).addTo(state.map)
|
||||
.bindPopup(`<b>${p.nama}</b><br>${p.jarak_km} km dari pusat peta`).openPopup();
|
||||
} else {
|
||||
document.getElementById('spbuPanelResult').innerHTML = `<div class="spbu-result">${j.message || 'Tidak ada SPBU'}</div>`;
|
||||
}
|
||||
} catch (e) {
|
||||
document.getElementById('spbuPanelResult').innerHTML = `<div class="spbu-result">Error: ${e.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Load all layers ── */
|
||||
async function loadAll() {
|
||||
document.getElementById('loadingOverlay').style.display = 'flex';
|
||||
try {
|
||||
const [spbu, jalan, kavling, kawasan, rumah, warga, stat, blank] = await Promise.all([
|
||||
fetchLayer('spbu.php'),
|
||||
fetchLayer('jalan.php'),
|
||||
fetchLayer('kavling.php'),
|
||||
fetchLayer('kawasan_kumuh.php'),
|
||||
fetchLayer('rumah_ibadah.php'),
|
||||
fetchLayer('warga_miskin.php'),
|
||||
fetch(STAT_API).then(r => r.json()).then(j => j.data).catch(() => null),
|
||||
fetchLayer('blank_spot.php')
|
||||
]);
|
||||
renderSpbu(spbu); renderJalan(jalan); renderKavling(kavling);
|
||||
renderKawasan(kawasan); renderRumah(rumah); renderWarga(warga);
|
||||
if (stat && stat.choropleth) renderChoropleth(stat.choropleth);
|
||||
if (blank) renderBlankSpot(blank);
|
||||
|
||||
// Update quick stats
|
||||
if (stat && stat.counts) {
|
||||
document.getElementById('qs-spbu').textContent = stat.counts.total_spbu;
|
||||
document.getElementById('qs-jalan').textContent = stat.counts.total_jalan;
|
||||
document.getElementById('qs-kavling').textContent = stat.counts.total_kavling;
|
||||
document.getElementById('qs-warga').textContent = stat.counts.total_warga_miskin;
|
||||
}
|
||||
} catch (e) {
|
||||
toast('Gagal load data: ' + e.message, 'error');
|
||||
} finally {
|
||||
document.getElementById('loadingOverlay').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Init ── */
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initMap();
|
||||
loadAll();
|
||||
bindLayerToggles();
|
||||
bindDrawEvent();
|
||||
|
||||
document.querySelectorAll('[data-draw]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const type = btn.dataset.draw;
|
||||
if (state.activeDraw === type) deactivateDraw();
|
||||
else activateDraw(type);
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('btn-find-spbu')?.addEventListener('click', findNearestSpbu);
|
||||
document.getElementById('btn-close-spbu')?.addEventListener('click', () => {
|
||||
document.getElementById('spbuPanel').style.display = 'none';
|
||||
if (state.layers.spbuRoute) { state.map.removeLayer(state.layers.spbuRoute); state.layers.spbuRoute = null; }
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,358 @@
|
||||
/* =========================================================
|
||||
user-map.js — Read-only WebGIS Map (user mode)
|
||||
========================================================= */
|
||||
|
||||
const API = APP_BASE + '/api';
|
||||
const STAT_API = APP_BASE + '/api/statistik.php';
|
||||
|
||||
const state = {
|
||||
map: null,
|
||||
layers: {
|
||||
spbu: null, jalan: null, kavling: null,
|
||||
kawasan: null, rumah: null, warga: null,
|
||||
choropleth: null, blankSpot: null, spbuRoute: null
|
||||
}
|
||||
};
|
||||
|
||||
const COLORS = {
|
||||
spbu: '#F59E0B',
|
||||
spbu24: '#10B981',
|
||||
jalan: '#3B82F6',
|
||||
kavling: '#8B5CF6',
|
||||
kawasan: '#EF4444',
|
||||
rumah: '#A855F7',
|
||||
warga: '#EF4444',
|
||||
blankSpot: '#F97316'
|
||||
};
|
||||
|
||||
function makeIcon(emoji, bgColor, size = 34) {
|
||||
return L.divIcon({
|
||||
className: 'div-icon-wrap',
|
||||
html: `<div class="marker-pin" style="background:${bgColor};width:${size}px;height:${size}px;"><span>${emoji}</span></div>`,
|
||||
iconSize: [size, size],
|
||||
iconAnchor: [size / 2, size],
|
||||
popupAnchor: [0, -size]
|
||||
});
|
||||
}
|
||||
|
||||
const ICONS = {
|
||||
spbu24: makeIcon('⛽', COLORS.spbu24),
|
||||
spbu: makeIcon('⛽', COLORS.spbu),
|
||||
rumah: makeIcon('🕌', COLORS.rumah),
|
||||
warga: makeIcon('👤', COLORS.warga),
|
||||
blankSpot: makeIcon('⚠️', COLORS.blankSpot, 36)
|
||||
};
|
||||
|
||||
function toast(msg, type = 'success') {
|
||||
const c = document.getElementById('toastContainer');
|
||||
const t = document.createElement('div');
|
||||
t.className = `toast ${type}`;
|
||||
t.innerHTML = `<i class="fas fa-${type === 'success' ? 'check-circle' : 'info-circle'}" style="margin-right:8px;"></i>${msg}`;
|
||||
c.appendChild(t);
|
||||
setTimeout(() => { t.style.opacity = '0'; setTimeout(() => t.remove(), 400); }, 3000);
|
||||
}
|
||||
|
||||
function initMap() {
|
||||
state.map = L.map('user-map', { zoomControl: false })
|
||||
.setView([-0.0583, 109.3448], 13);
|
||||
|
||||
L.control.zoom({ position: 'bottomright' }).addTo(state.map);
|
||||
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
||||
attribution: '© OpenStreetMap, © CARTO',
|
||||
subdomains: 'abcd',
|
||||
maxZoom: 20
|
||||
}).addTo(state.map);
|
||||
}
|
||||
|
||||
async function fetchLayer(path) {
|
||||
const r = await fetch(`${API}/${path}`);
|
||||
const j = await r.json();
|
||||
return j.status === 'success' ? j.data : { type: 'FeatureCollection', features: [] };
|
||||
}
|
||||
|
||||
function formatKm(value) {
|
||||
return Number(value || 0).toLocaleString('id-ID', {
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
}
|
||||
|
||||
function bindReadOnlyPopup(layer, type, props) {
|
||||
let html = `<div class="popup-title">${props.nama || props.nama_pemilik || props.nama_kk || props.nama_kawasan || 'Tanpa Nama'}</div>`;
|
||||
if (type === 'spbu') {
|
||||
html += `<div class="popup-row">24 Jam: <strong style="color:${props.buka_24_jam ? '#10B981' : '#EF4444'}">${props.buka_24_jam ? 'Ya' : 'Tidak'}</strong></div>`;
|
||||
if (props.deskripsi) html += `<div class="popup-row">${props.deskripsi}</div>`;
|
||||
html += `<div class="popup-row">Rating: <strong>${props.avg_rating > 0 ? '⭐ ' + props.avg_rating + ' (' + props.total_ulasan + ' ulasan)' : 'Belum ada ulasan'}</strong></div>`;
|
||||
html += `<button class="btn btn-primary btn-sm" style="margin-top:10px;width:100%;" onclick="bukaReview('spbu', ${props.id}, '${props.nama}')">Beri Ulasan</button>`;
|
||||
} else if (type === 'jalan') {
|
||||
html += `<div class="popup-row">Jenis: <strong>${props.jenis_jalan || '-'}</strong></div>`;
|
||||
} else if (type === 'kavling') {
|
||||
html += `<div class="popup-row">Status: <strong>${props.status_kepemilikan || '-'}</strong></div>`;
|
||||
html += `<div class="popup-row">Luas: <strong>${props.luas ? props.luas + ' m²' : '-'}</strong></div>`;
|
||||
} else if (type === 'rumah') {
|
||||
html += `<div class="popup-row">Agama: <strong>${props.agama || '-'}</strong></div>`;
|
||||
html += `<div class="popup-row">Radius Bantuan: <strong>${formatKm(props.radius_bantuan_km)} km</strong></div>`;
|
||||
html += `<div class="popup-row">Rating: <strong>${props.avg_rating > 0 ? '⭐ ' + props.avg_rating + ' (' + props.total_ulasan + ' ulasan)' : 'Belum ada ulasan'}</strong></div>`;
|
||||
html += `<button class="btn btn-primary btn-sm" style="margin-top:10px;width:100%;" onclick="bukaReview('rumah_ibadah', ${props.id}, '${props.nama}')">Beri Ulasan</button>`;
|
||||
} else if (type === 'warga') {
|
||||
html += `<div class="popup-row">Penghasilan: <strong>Rp ${Number(props.penghasilan || 0).toLocaleString('id-ID')}</strong></div>`;
|
||||
html += `<div class="popup-row">Tanggungan: <strong>${props.jumlah_tanggungan || 0} org</strong></div>`;
|
||||
}
|
||||
layer.bindPopup(html);
|
||||
}
|
||||
|
||||
// Ulasan Modal Logic
|
||||
window.bukaReview = function(tipe, id, nama) {
|
||||
let m = document.getElementById('modalReview');
|
||||
if(!m) {
|
||||
m = document.createElement('div');
|
||||
m.id = 'modalReview';
|
||||
m.className = 'modal-overlay';
|
||||
m.innerHTML = `
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">⭐ Beri Ulasan</span>
|
||||
<button class="modal-close" onclick="document.getElementById('modalReview').style.display='none'">×</button>
|
||||
</div>
|
||||
<div style="padding:15px;">
|
||||
<h4 id="revNama" style="margin-top:0; color:var(--text-primary);"></h4>
|
||||
<input type="hidden" id="revTipe"><input type="hidden" id="revId">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Rating (1-5)</label>
|
||||
<select id="revRating" class="form-control">
|
||||
<option value="5">⭐⭐⭐⭐⭐ Sangat Baik</option>
|
||||
<option value="4">⭐⭐⭐⭐ Baik</option>
|
||||
<option value="3">⭐⭐⭐ Cukup</option>
|
||||
<option value="2">⭐⭐ Buruk</option>
|
||||
<option value="1">⭐ Sangat Buruk</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Komentar</label>
|
||||
<textarea id="revKomen" class="form-control" rows="3" placeholder="Tuliskan pengalaman Anda..."></textarea>
|
||||
</div>
|
||||
<button class="btn btn-primary" style="width:100%" onclick="submitReview()">Kirim Ulasan</button>
|
||||
</div>
|
||||
</div>`;
|
||||
document.body.appendChild(m);
|
||||
}
|
||||
|
||||
document.getElementById('revTipe').value = tipe;
|
||||
document.getElementById('revId').value = id;
|
||||
document.getElementById('revNama').innerText = "Mengulas: " + nama;
|
||||
document.getElementById('revRating').value = "5";
|
||||
document.getElementById('revKomen').value = "";
|
||||
m.style.display = 'flex';
|
||||
};
|
||||
|
||||
window.submitReview = async function() {
|
||||
const tipe = document.getElementById('revTipe').value;
|
||||
const id = document.getElementById('revId').value;
|
||||
const rating = document.getElementById('revRating').value;
|
||||
const komen = document.getElementById('revKomen').value;
|
||||
|
||||
const res = await fetch(APP_BASE + '/api/ulasan.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ fasilitas_tipe: tipe, fasilitas_id: id, rating: rating, komentar: komen })
|
||||
});
|
||||
const j = await res.json();
|
||||
if(j.status === 'success') {
|
||||
toast('Ulasan berhasil dikirim!');
|
||||
document.getElementById('modalReview').style.display = 'none';
|
||||
loadAll(); // reload data
|
||||
} else {
|
||||
toast(j.message, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
function renderSpbu(data) {
|
||||
if (state.layers.spbu) state.map.removeLayer(state.layers.spbu);
|
||||
state.layers.spbu = L.geoJSON(data, {
|
||||
pointToLayer: (f, ll) => L.marker(ll, { icon: f.properties.buka_24_jam ? ICONS.spbu24 : ICONS.spbu }),
|
||||
onEachFeature: (f, l) => bindReadOnlyPopup(l, 'spbu', f.properties)
|
||||
});
|
||||
if (document.getElementById('ly-spbu')?.checked) state.layers.spbu.addTo(state.map);
|
||||
}
|
||||
|
||||
function renderJalan(data) {
|
||||
if (state.layers.jalan) state.map.removeLayer(state.layers.jalan);
|
||||
state.layers.jalan = L.geoJSON(data, {
|
||||
style: { color: COLORS.jalan, weight: 5, opacity: 0.85 },
|
||||
onEachFeature: (f, l) => bindReadOnlyPopup(l, 'jalan', f.properties)
|
||||
});
|
||||
if (document.getElementById('ly-jalan')?.checked) state.layers.jalan.addTo(state.map);
|
||||
}
|
||||
|
||||
function renderKavling(data) {
|
||||
if (state.layers.kavling) state.map.removeLayer(state.layers.kavling);
|
||||
state.layers.kavling = L.geoJSON(data, {
|
||||
style: { color: COLORS.kavling, fillColor: COLORS.kavling, fillOpacity: 0.3, weight: 2 },
|
||||
onEachFeature: (f, l) => bindReadOnlyPopup(l, 'kavling', f.properties)
|
||||
});
|
||||
if (document.getElementById('ly-kavling')?.checked) state.layers.kavling.addTo(state.map);
|
||||
}
|
||||
|
||||
function renderKawasan(data) {
|
||||
if (state.layers.kawasan) state.map.removeLayer(state.layers.kawasan);
|
||||
state.layers.kawasan = L.geoJSON(data, {
|
||||
style: { color: COLORS.kawasan, fillColor: COLORS.kawasan, fillOpacity: 0.25, weight: 2, dashArray: '6 4' },
|
||||
onEachFeature: (f, l) => bindReadOnlyPopup(l, 'kawasan', f.properties)
|
||||
});
|
||||
if (document.getElementById('ly-kawasan')?.checked) state.layers.kawasan.addTo(state.map);
|
||||
}
|
||||
|
||||
function renderRumah(data) {
|
||||
if (state.layers.rumah) state.map.removeLayer(state.layers.rumah);
|
||||
state.layers.rumah = L.featureGroup();
|
||||
(data.features || []).forEach((f) => {
|
||||
if (!f.geometry || f.geometry.type !== 'Point') return;
|
||||
const props = f.properties || {};
|
||||
const ll = L.latLng(f.geometry.coordinates[1], f.geometry.coordinates[0]);
|
||||
const circle = L.circle(ll, {
|
||||
radius: Number(props.radius_bantuan_meter || 1000),
|
||||
color: COLORS.rumah,
|
||||
fillColor: COLORS.rumah,
|
||||
fillOpacity: 0.08,
|
||||
opacity: 0.55,
|
||||
weight: 2
|
||||
});
|
||||
const marker = L.marker(ll, { icon: ICONS.rumah });
|
||||
bindReadOnlyPopup(circle, 'rumah', props);
|
||||
bindReadOnlyPopup(marker, 'rumah', props);
|
||||
state.layers.rumah.addLayer(circle);
|
||||
state.layers.rumah.addLayer(marker);
|
||||
});
|
||||
if (document.getElementById('ly-rumah')?.checked) state.layers.rumah.addTo(state.map);
|
||||
}
|
||||
|
||||
function renderWarga(data) {
|
||||
if (state.layers.warga) state.map.removeLayer(state.layers.warga);
|
||||
state.layers.warga = L.geoJSON(data, {
|
||||
pointToLayer: (f, ll) => L.marker(ll, { icon: ICONS.warga }),
|
||||
onEachFeature: (f, l) => bindReadOnlyPopup(l, 'warga', f.properties)
|
||||
});
|
||||
if (document.getElementById('ly-warga')?.checked) state.layers.warga.addTo(state.map);
|
||||
}
|
||||
|
||||
function renderChoropleth(data) {
|
||||
if (state.layers.choropleth) state.map.removeLayer(state.layers.choropleth);
|
||||
state.layers.choropleth = L.geoJSON(data, {
|
||||
style: (f) => {
|
||||
const c = f.properties.jumlah_warga;
|
||||
let color = '#10B981';
|
||||
if (c > 0) color = '#F59E0B';
|
||||
if (c > 3) color = '#EF4444';
|
||||
return { color, fillColor: color, fillOpacity: 0.35, weight: 3 };
|
||||
},
|
||||
onEachFeature: (f, l) => {
|
||||
l.bindPopup(`<div class="popup-title">${f.properties.nama_kawasan}</div>
|
||||
<div class="popup-row">Jumlah Warga: <strong>${f.properties.jumlah_warga}</strong></div>
|
||||
<div class="popup-row">Total Tanggungan: <strong>${f.properties.total_tanggungan}</strong></div>`);
|
||||
}
|
||||
});
|
||||
if (document.getElementById('ly-choropleth')?.checked) state.layers.choropleth.addTo(state.map);
|
||||
}
|
||||
|
||||
function renderBlankSpot(data) {
|
||||
if (state.layers.blankSpot) state.map.removeLayer(state.layers.blankSpot);
|
||||
state.layers.blankSpot = L.geoJSON(data, {
|
||||
pointToLayer: (f, ll) => L.marker(ll, { icon: ICONS.blankSpot }),
|
||||
onEachFeature: (f, l) => {
|
||||
l.bindPopup(`<div class="popup-title">⚠️ ${f.properties.nama_kk}</div>
|
||||
<div class="popup-row">Jarak ke RI terdekat: <strong>${formatKm(f.properties.jarak_km)} km</strong></div>
|
||||
<div class="popup-row">Radius bantuan: <strong>${formatKm(f.properties.radius_km)} km</strong></div>
|
||||
<div class="popup-row">Di luar radius: <strong>${formatKm(f.properties.selisih_km)} km</strong></div>
|
||||
<div class="popup-row">Rumah ibadah terdekat: <strong>${f.properties.rumah_ibadah_terdekat || '-'}</strong></div>
|
||||
<div class="popup-row" style="color:#F97316">Blank spot di luar radius bantuan</div>`);
|
||||
}
|
||||
});
|
||||
if (document.getElementById('ly-blankspot')?.checked) state.layers.blankSpot.addTo(state.map);
|
||||
}
|
||||
|
||||
function bindLayerToggles() {
|
||||
const map = {
|
||||
'ly-spbu': 'spbu', 'ly-jalan': 'jalan', 'ly-kavling': 'kavling',
|
||||
'ly-kawasan': 'kawasan', 'ly-rumah': 'rumah', 'ly-warga': 'warga',
|
||||
'ly-choropleth': 'choropleth', 'ly-blankspot': 'blankSpot'
|
||||
};
|
||||
Object.entries(map).forEach(([id, key]) => {
|
||||
document.getElementById(id)?.addEventListener('change', (e) => {
|
||||
const layer = state.layers[key];
|
||||
if (!layer) return;
|
||||
if (e.target.checked) state.map.addLayer(layer);
|
||||
else state.map.removeLayer(layer);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function findNearestSpbu() {
|
||||
const center = state.map.getCenter();
|
||||
document.getElementById('spbuPanelResult').innerHTML = '<div class="spinner"></div> Mencari...';
|
||||
document.getElementById('spbuPanel').style.display = 'block';
|
||||
|
||||
try {
|
||||
const r = await fetch(`${API}/spbu_terdekat.php?lat=${center.lat}&lng=${center.lng}`);
|
||||
const j = await r.json();
|
||||
if (j.status === 'success' && j.data) {
|
||||
const p = j.data.properties;
|
||||
const coords = j.data.geometry.coordinates;
|
||||
document.getElementById('spbuPanelResult').innerHTML = `<div class="spbu-result">
|
||||
<div class="spbu-result-name">⛽ ${p.nama}</div>
|
||||
<div class="spbu-result-meta">${p.buka_24_jam ? '🟢 24 Jam' : '🟡 Terbatas'}</div>
|
||||
<div class="spbu-result-distance">${p.jarak_km} km</div>
|
||||
</div>`;
|
||||
if (state.layers.spbuRoute) state.map.removeLayer(state.layers.spbuRoute);
|
||||
state.layers.spbuRoute = L.marker([coords[1], coords[0]], { icon: ICONS.spbu }).addTo(state.map)
|
||||
.bindPopup(`<b>${p.nama}</b><br>${p.jarak_km} km dari pusat peta`).openPopup();
|
||||
} else {
|
||||
document.getElementById('spbuPanelResult').innerHTML = `<div class="spbu-result">${j.message || 'Tidak ada SPBU'}</div>`;
|
||||
}
|
||||
} catch (e) {
|
||||
document.getElementById('spbuPanelResult').innerHTML = `<div class="spbu-result">Error: ${e.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadAll() {
|
||||
document.getElementById('loadingOverlay').style.display = 'flex';
|
||||
try {
|
||||
const [spbu, jalan, kavling, kawasan, rumah, warga, stat, blank] = await Promise.all([
|
||||
fetchLayer('spbu.php'),
|
||||
fetchLayer('jalan.php'),
|
||||
fetchLayer('kavling.php'),
|
||||
fetchLayer('kawasan_kumuh.php'),
|
||||
fetchLayer('rumah_ibadah.php'),
|
||||
fetchLayer('warga_miskin.php'),
|
||||
fetch(STAT_API).then(r => r.json()).then(j => j.data).catch(() => null),
|
||||
fetchLayer('blank_spot.php')
|
||||
]);
|
||||
renderSpbu(spbu); renderJalan(jalan); renderKavling(kavling);
|
||||
renderKawasan(kawasan); renderRumah(rumah); renderWarga(warga);
|
||||
if (stat && stat.choropleth) renderChoropleth(stat.choropleth);
|
||||
if (blank) renderBlankSpot(blank);
|
||||
|
||||
if (stat && stat.counts) {
|
||||
document.getElementById('qs-spbu').textContent = stat.counts.total_spbu;
|
||||
document.getElementById('qs-jalan').textContent = stat.counts.total_jalan;
|
||||
document.getElementById('qs-kavling').textContent = stat.counts.total_kavling;
|
||||
document.getElementById('qs-warga').textContent = stat.counts.total_warga_miskin;
|
||||
}
|
||||
} catch (e) {
|
||||
toast('Gagal load data: ' + e.message, 'error');
|
||||
} finally {
|
||||
document.getElementById('loadingOverlay').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initMap();
|
||||
loadAll();
|
||||
bindLayerToggles();
|
||||
|
||||
document.getElementById('btn-find-spbu')?.addEventListener('click', findNearestSpbu);
|
||||
document.getElementById('btn-close-spbu')?.addEventListener('click', () => {
|
||||
document.getElementById('spbuPanel').style.display = 'none';
|
||||
if (state.layers.spbuRoute) { state.map.removeLayer(state.layers.spbuRoute); state.layers.spbuRoute = null; }
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user