powji/webgis-pemetaan-sosial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menambahkan fitur statistik pada sidebar dan memindahkan tombol login dari bawah sidebar ke header sidebar

Browse Source
This commit is contained in:
powji17
2026-06-12 15:51:04 +07:00
parent 04e4529195
commit 21307a323e
3 changed files with 217 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGISPovertyMapping/assets/css/style.css
+112 -16
View File
@@ -24,6 +24,12 @@ html, body {
box-shadow: 2px 0 12px rgba(0,0,0,0.10);
z-index: 1000;
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge */
}
#sidebar::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
/* Header sidebar */
@@ -250,26 +256,22 @@ html, body {
.btn-login:hover { background: #253d6e; }
.btn-logout {
.btn-logout-header {
color: white;
opacity: 0.7;
text-decoration: none;
font-size: 16px;
padding: 4px 6px;
border-radius: 6px;
transition: opacity 0.2s, background 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px;
background: #fdecea;
color: #c0392b;
border-radius: 10px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
border: none;
cursor: pointer;
transition: background 0.2s;
width: 100%;
margin-top: auto;
}
.btn-logout:hover { background: #f5b7b1; }
.btn-logout-header:hover {
opacity: 1;
background: rgba(255,255,255,0.15);
}
/* ===== MAP CONTAINER ===== */
#map-container {
@@ -377,3 +379,97 @@ html, body {
display: inline-block;
flex-shrink: 0;
}
/* ===== SIDEBAR STATS ===== */
.sidebar-stats {
background: #f8fafc;
border-bottom: 1px solid #e8edf2;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.stat-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.stat-label {
font-size: 12px;
color: #666;
display: flex;
align-items: center;
gap: 6px;
}
.stat-label i {
color: #1B2A4A;
font-size: 12px;
width: 14px;
text-align: center;
}
.stat-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
flex-shrink: 0;
}
.stat-value {
font-size: 15px;
font-weight: 700;
color: #1B2A4A;
min-width: 28px;
text-align: right;
}
.stat-value.green { color: #27ae60; }
.stat-value.red { color: #e74c3c; }
.stat-divider {
height: 1px;
background: #e8edf2;
margin: 2px 0;
}
/* Progress bar */
.stat-progress-wrap {
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.stat-progress-bar {
flex: 1;
height: 6px;
background: #e8edf2;
border-radius: 20px;
overflow: hidden;
}
.stat-progress-fill {
height: 100%;
border-radius: 20px;
background: #27ae60;
transition: width 0.5s ease, background 0.5s ease;
}
.stat-persen {
font-size: 12px;
font-weight: 700;
color: #1B2A4A;
min-width: 36px;
text-align: right;
}
.stat-persen-label {
font-size: 11px;
color: #aab4c0;
white-space: nowrap;
}
WebGISPovertyMapping/assets/js/script.js
+23
View File
@@ -161,6 +161,7 @@ function perbaruiWarnaPrasejahtera() {
p.marker.addTo(layerTidakTercakup);
}
}
updateRingkasan();
}
// --- MANAJEMEN MODE UI ---
@@ -929,3 +930,25 @@ function buatHeatmap() {
}
}).addTo(map);
}
function updateRingkasan() {
let totalPrasejahtera = Object.keys(dataPrasejahtera).length;
let totalIbadah = Object.keys(dataIbadah).length;
let totalTercakup = layerTercakup.getLayers().length;
let totalTidak = layerTidakTercakup.getLayers().length;
let persen = totalPrasejahtera > 0
? Math.round((totalTercakup / totalPrasejahtera) * 100) : 0;
document.getElementById('stat-total').textContent = totalPrasejahtera;
document.getElementById('stat-tercakup').textContent = totalTercakup;
document.getElementById('stat-tidak').textContent = totalTidak;
document.getElementById('stat-persen').textContent = persen + '%';
document.getElementById('stat-ibadah').textContent = totalIbadah;
// Update progress bar
document.getElementById('stat-progress').style.width = persen + '%';
// Warna progress bar berdasarkan persentase
let warna = persen >= 70 ? '#27ae60' : persen >= 40 ? '#f39c12' : '#e74c3c';
document.getElementById('stat-progress').style.background = warna;
}
WebGISPovertyMapping/index.php
+82 -7
View File
@@ -20,7 +20,12 @@ $role = $isLoggedIn ? $_SESSION['role'] : 'viewer';
<div class="sidebar-header">
<i class="fa-solid fa-map-location-dot"></i>
Sistem Pemetaan
<span style="flex:1;">Sistem Pemetaan</span>
<?php if ($isLoggedIn): ?>
<a href="logout.php" class="btn-logout-header" title="Logout">
<i class="fa-solid fa-right-from-bracket"></i>
</a>
<?php endif; ?>
</div>
<div class="sidebar-body">
@@ -33,6 +38,44 @@ $role = $isLoggedIn ? $_SESSION['role'] : 'viewer';
<small><?= ucfirst($role) ?></small>
</div>
<div class="sidebar-divider"></div>
<span class="sidebar-label">Statistik</span>
<div class="sidebar-stats">
<div class="stat-row">
<span class="stat-label">
<i class="fa-solid fa-house-chimney-crack"></i> Total Prasejahtera
</span>
<span class="stat-value" id="stat-total">—</span>
</div>
<div class="stat-divider"></div>
<div class="stat-row">
<span class="stat-label">
<span class="stat-dot" style="background:#27ae60;"></span> Tercakup
</span>
<span class="stat-value green" id="stat-tercakup">—</span>
</div>
<div class="stat-row">
<span class="stat-label">
<span class="stat-dot" style="background:#e74c3c;"></span> Belum Tercakup
</span>
<span class="stat-value red" id="stat-tidak">—</span>
</div>
<div class="stat-progress-wrap">
<div class="stat-progress-bar">
<div class="stat-progress-fill" id="stat-progress" style="width:0%"></div>
</div>
<span class="stat-persen" id="stat-persen">0%</span>
<span class="stat-persen-label">tercakup</span>
</div>
<div class="stat-divider"></div>
<div class="stat-row">
<span class="stat-label">
<i class="fa-solid fa-place-of-worship"></i> Rumah Ibadah
</span>
<span class="stat-value" id="stat-ibadah">—</span>
</div>
</div>
<?php if (in_array($role, ['admin', 'operator'])): ?>
<div class="sidebar-divider"></div>
<span class="sidebar-label">Input Data</span>
@@ -87,11 +130,6 @@ $role = $isLoggedIn ? $_SESSION['role'] : 'viewer';
</label>
</div>
<div class="sidebar-divider"></div>
<a href="logout.php" class="btn-logout">
<i class="fa-solid fa-right-from-bracket"></i> Logout
</a>
<?php else: ?>
<div class="viewer-info">
@@ -102,8 +140,45 @@ $role = $isLoggedIn ? $_SESSION['role'] : 'viewer';
</a>
<div class="sidebar-divider"></div>
<span class="sidebar-label">Visualisasi</span>
<span class="sidebar-label">Statistik</span>
<div class="sidebar-stats">
<div class="stat-row">
<span class="stat-label">
<i class="fa-solid fa-house-chimney-crack"></i> Total Prasejahtera
</span>
<span class="stat-value" id="stat-total">—</span>
</div>
<div class="stat-divider"></div>
<div class="stat-row">
<span class="stat-label">
<span class="stat-dot" style="background:#27ae60;"></span> Tercakup
</span>
<span class="stat-value green" id="stat-tercakup">—</span>
</div>
<div class="stat-row">
<span class="stat-label">
<span class="stat-dot" style="background:#e74c3c;"></span> Belum Tercakup
</span>
<span class="stat-value red" id="stat-tidak">—</span>
</div>
<div class="stat-progress-wrap">
<div class="stat-progress-bar">
<div class="stat-progress-fill" id="stat-progress" style="width:0%"></div>
</div>
<span class="stat-persen" id="stat-persen">0%</span>
<span class="stat-persen-label">tercakup</span>
</div>
<div class="stat-divider"></div>
<div class="stat-row">
<span class="stat-label">
<i class="fa-solid fa-place-of-worship"></i> Rumah Ibadah
</span>
<span class="stat-value" id="stat-ibadah">—</span>
</div>
</div>
<div class="sidebar-divider"></div>
<span class="sidebar-label">Visualisasi</span>
<div class="layer-control">
<label class="layer-item">
<input type="checkbox" checked onchange="toggleLayer('tercakup', this)">